/* ═══════════════════════════════════════════════════════════
   OPTIMUS — DESIGN SYSTEM & STYLESHEET
   Cabinet Grotesk display · Satoshi body
   Palette: deep charcoal + warm off-white + muted teal accent
   ═══════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root,
[data-theme='light'] {
  /* Type scale */
  --text-xs:   clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3rem, 0.5rem + 7vw, 7rem);

  /* Spacing */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Surfaces — clean white */
  --color-bg:             #f4f6fa;
  --color-surface:        #ffffff;
  --color-surface-2:      #f8faff;
  --color-surface-offset: #edf1f9;
  --color-divider:        #dde3ef;
  --color-border:         #ccd4e4;

  /* Text — navy derived from logo */
  --color-text:         #111827;
  --color-text-muted:   #4b5a72;
  --color-text-faint:   #99aac0;
  --color-text-inverse: #ffffff;

  /* Corporate blue accent — from logo gradient */
  --color-primary:          #1e56c8;
  --color-primary-hover:    #1444a8;
  --color-primary-active:   #0e3280;
  --color-primary-light:    #e8eeff;
  --color-primary-glow:     rgba(30, 86, 200, 0.14);

  /* Dark navy — from logo wordmark */
  --color-dark:     #0f1e3d;
  --color-dark-2:   #1a2d52;

  /* Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   1rem;
  --radius-xl:   1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(30,28,24,0.06), 0 1px 2px rgba(30,28,24,0.04);
  --shadow-md:  0 4px 16px rgba(30,28,24,0.08), 0 2px 6px rgba(30,28,24,0.04);
  --shadow-lg:  0 12px 40px rgba(30,28,24,0.12), 0 4px 12px rgba(30,28,24,0.06);
  --shadow-xl:  0 24px 64px rgba(30,28,24,0.16);

  /* Transitions */
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* Fonts */
  --font-display: 'Cabinet Grotesk', 'Helvetica Neue', sans-serif;
  --font-body:    'Satoshi', 'Inter', sans-serif;
}

[data-theme='dark'],
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #0a0f1e;
    --color-surface:        #101728;
    --color-surface-2:      #151d30;
    --color-surface-offset: #1a2438;
    --color-divider:        #1e2c44;
    --color-border:         #253450;
    --color-text:           #c8d4e8;
    --color-text-muted:     #6a82a8;
    --color-text-faint:     #3a4f70;
    --color-text-inverse:   #0a0f1e;
    --color-primary:        #5b8ef0;
    --color-primary-hover:  #4478e0;
    --color-primary-light:  #121e3a;
    --color-primary-glow:   rgba(91,142,240,0.18);
    --color-dark:           #0a0f1e;
    --color-dark-2:         #101728;
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
    --shadow-xl:  0 24px 64px rgba(0,0,0,0.6);
  }
}

[data-theme='dark'] {
  --color-bg:             #0a0f1e;
  --color-surface:        #101728;
  --color-surface-2:      #151d30;
  --color-surface-offset: #1a2438;
  --color-divider:        #1e2c44;
  --color-border:         #253450;
  --color-text:           #c8d4e8;
  --color-text-muted:     #6a82a8;
  --color-text-faint:     #3a4f70;
  --color-text-inverse:   #0a0f1e;
  --color-primary:        #5b8ef0;
  --color-primary-hover:  #4478e0;
  --color-primary-light:  #121e3a;
  --color-primary-glow:   rgba(91,142,240,0.18);
  --color-dark:           #0a0f1e;
  --color-dark-2:         #101728;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
  --shadow-xl:  0 24px 64px rgba(0,0,0,0.6);
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scroll-padding-top: var(--space-16);
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  transition: background var(--transition-slow), color var(--transition-slow);
}

img, svg { display: block; max-width: 100%; height: auto; }
ul[role='list'], ol[role='list'] { list-style: none; }
button { cursor: pointer; background: none; border: none; }
input, button, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { text-wrap: balance; line-height: 1.15; font-family: var(--font-display); }
p, li { text-wrap: pretty; max-width: 68ch; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--color-primary-glow); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }

a, button, [role='button'] {
  transition: color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), opacity var(--transition);
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border-width: 0; white-space: nowrap; }

/* ── LAYOUT ────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 5vw, var(--space-16));
}

.section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-32));
}

/* ── TYPOGRAPHY UTILITIES ──────────────────────────────────── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  background: rgba(30,86,200,0.08);
  border: 1px solid rgba(30,86,200,0.15);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.results .section-tag,
.services--dark .section-tag {
  background: rgba(91,142,240,0.12);
  border-color: rgba(91,142,240,0.25);
}

.section-tag--light {
  color: rgba(77,160,167,0.9);
}

.section-title {
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.025em;
  margin-bottom: var(--space-4);
}

.section-header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: var(--space-16);
}

.section-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-inline: auto;
}

/* ── BUTTONS ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: 0.01em;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); transform: translateY(-1px); box-shadow: 0 6px 20px var(--color-primary-glow); }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover { background: var(--color-primary-light); transform: translateY(-1px); }

.btn-ghost {
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.5); }

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }
.btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn-full { width: 100%; justify-content: center; }

/* ── NAVIGATION ────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 1px 0 rgba(30,86,200,0.2);
  transition: box-shadow var(--transition);
}

.site-header::after { display: none; }

.site-header.scrolled {
  box-shadow: var(--shadow-md);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  text-decoration: none;
}

.logo-text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.logo-img {
  height: 56px;
  width: auto;
  object-fit: contain;
  display: block;
  border-radius: var(--radius-sm);
}

[data-theme='dark'] .logo-img {
  background: #fff;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}

.logo-img--footer {
  height: 72px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
  margin: 0;
  flex: 1;
}

.nav-links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: #323130;
  text-decoration: none;
  transition: color var(--transition);
  padding-block: var(--space-2);
}

.nav-links a:hover { color: #0067b8; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.6);
  transition: background var(--transition), color var(--transition);
}

.theme-toggle:hover {
  background: rgba(255,255,255,0.1);
  color: #ffffff;
}

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
}

.mobile-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all var(--transition);
}

.mobile-drawer {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-4);
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
}

.mobile-drawer.open { display: flex; }

.mobile-drawer ul { list-style: none; }
.mobile-drawer li a {
  display: block;
  padding: var(--space-3) 0;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-divider);
}
.mobile-drawer li a:hover { color: var(--color-primary); }

/* ── HERO ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(10,16,40,0.92) 0%,
    rgba(15,30,61,0.80) 50%,
    rgba(30,86,200,0.45) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-24);
  max-width: 820px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.03em;
  margin-bottom: var(--space-8);
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.8); }
}

.hero-accent-line {
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, #1e56c8, #5b8ef0);
  border-radius: 2px;
  margin-bottom: var(--space-6);
  animation: accent-expand 0.8s cubic-bezier(0.16,1,0.3,1) 0.3s both;
}

@keyframes accent-expand {
  from { width: 0; opacity: 0; }
  to { width: 56px; opacity: 1; }
}

.hero-heading {
  font-size: clamp(2.8rem, 0.5rem + 6vw, 6rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: var(--space-6);
}

.hero-heading em {
  font-style: normal;
  background: linear-gradient(90deg, #5b8ef0, #a5bff8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.75);
  max-width: 56ch;
  line-height: 1.6;
  margin-bottom: var(--space-10);
  font-weight: 400;
}

.hero-ctas {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}

.hero-stats {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  align-items: center;
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.15);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.6);
  font-weight: 500;
  letter-spacing: 0.03em;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

.hero-scroll-hint {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255,255,255,0.4);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: bounce-hint 2s ease-in-out infinite;
}

@keyframes bounce-hint {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

.scroll-dot { animation: scroll-fall 2s ease-in-out infinite; }
@keyframes scroll-fall {
  0%, 100% { cy: 7; opacity: 1; }
  50% { cy: 14; opacity: 0.3; }
}

/* ── LOGO STRIP ────────────────────────────────────────────── */
.logo-strip {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  padding-block: var(--space-6);
  overflow: hidden;
}

.logo-strip .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.logo-strip-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Marquee wrapper */
.logo-strip-track {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.logo-strip-logos {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: max-content;
  animation: marquee 28s linear infinite;
}

.logo-strip-logos:hover { animation-play-state: paused; }

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

.brand-logo {
  color: var(--color-text-faint);
  transition: color var(--transition);
  flex-shrink: 0;
}

.brand-logo:hover { color: var(--color-text-muted); }

/* ── PAIN HOOK ─────────────────────────────────────────────── */
.pain { background: #dde8f8; }

.pain-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-12);
}

@media (max-width: 900px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pain-grid { grid-template-columns: 1fr; } }

.pain-card {
  background: #ffffff;
  border: 1px solid rgba(30,86,200,0.12);
  border-top: 3px solid #1e56c8;
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: 0 4px 20px rgba(30,86,200,0.08), 0 1px 4px rgba(0,0,0,0.04);
  transition: transform var(--transition), box-shadow var(--transition);
}

.pain-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(30,86,200,0.14), 0 4px 12px rgba(0,0,0,0.06);
}

.pain-icon {
  margin-bottom: var(--space-4);
}

.pain-card h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.pain-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── HOW WE WORK ────────────────────────────────────────── */
.howwework { background: #e8f0fb; }

.hww-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: var(--space-16);
  align-items: start;
}

@media (max-width: 960px) {
  .hww-grid { grid-template-columns: 1fr; }
}

/* Left narrative */
.hww-narrative p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-5);
  max-width: none;
}

.hww-lead {
  font-size: var(--text-lg) !important;
  color: var(--color-text) !important;
  font-weight: 500;
  line-height: 1.65 !important;
}

.hww-callout {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-7);
  background: linear-gradient(135deg, rgba(30,86,200,0.06), rgba(30,86,200,0.02));
  border: 1px solid rgba(30,86,200,0.15);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-lg);
}

.hww-callout-stat {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--color-primary);
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -0.04em;
}

.hww-callout strong {
  display: block;
  font-size: var(--text-base);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.hww-callout span {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* Right column */
.hww-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.hww-block {
  background: #ffffff;
  border: 1px solid rgba(30,86,200,0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: 0 2px 12px rgba(30,86,200,0.06);
}

.hww-block-title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

/* Tags */
.hww-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hww-tag {
  background: #eef2fa;
  border: 1px solid rgba(30,86,200,0.15);
  color: #1a3d7c;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

/* List */
.hww-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hww-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}

.hww-list li svg {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Pillars */
.hww-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 500px) {
  .hww-pillars { grid-template-columns: 1fr; }
}

.hww-pillar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.hww-pillar-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30,86,200,0.08);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.hww-pillar strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.hww-pillar span {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── SERVICES / ENGAGEMENT TIERS ──────────────────────────── */
.services { background: #ffffff; }

.services--dark {
  background: #08142a;
}

.services--dark .section-title {
  color: #ffffff;
}

.services--dark .section-desc {
  color: rgba(255,255,255,0.6);
}

.services--dark .section-tag {
  color: #5b8ef0;
}

.services--dark .engage-tier {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.1);
}

.services--dark .engage-tier:hover {
  background: rgba(255,255,255,0.08);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.services--dark .engage-tier-name,
.services--dark .engage-tier-list li {
  color: rgba(255,255,255,0.85);
}

.services--dark .engage-tier-type {
  color: rgba(255,255,255,0.45);
}

.services--dark .engage-tier-desc {
  color: rgba(255,255,255,0.55);
}

.services--dark .engage-tier-list li::before {
  color: #5b8ef0;
}

.services--dark .engage-tier-list li {
  color: rgba(255,255,255,0.6);
}

.services--dark .btn-outline {
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.25);
}

.services--dark .btn-outline:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.services--dark .framework {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
}

.services--dark .framework-title {
  color: #ffffff;
}

.services--dark .framework-desc {
  color: rgba(255,255,255,0.55);
}

.services--dark .framework-pillar {
  border-color: rgba(255,255,255,0.1);
}

.services--dark .framework-pillar h4 {
  color: rgba(255,255,255,0.9);
}

.services--dark .framework-pillar p {
  color: rgba(255,255,255,0.55);
}

.services--dark .engage-tier-badge {
  background: rgba(91,142,240,0.2);
  color: #5b8ef0;
}

/* Engagement tiers */
.engage-tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-20);
}

@media (max-width: 1100px) { .engage-tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .engage-tiers { grid-template-columns: 1fr; } }

.engage-tier {
  background: #ffffff;
  border: 1px solid rgba(30,86,200,0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(30,86,200,0.06);
  transition: transform var(--transition), box-shadow var(--transition);
}

.engage-tier:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(30,86,200,0.1);
}

.engage-tier--featured {
  background: #0f1e3d;
  border-color: #0f1e3d;
  color: #fff;
}

.engage-tier-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.engage-tier-badge {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #1e56c8;
  background: rgba(30,86,200,0.1);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.engage-tier--featured .engage-tier-badge {
  background: rgba(91,142,240,0.2);
  color: #5b8ef0;
}

.engage-tier-type {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.engage-tier--featured .engage-tier-type { color: rgba(255,255,255,0.5); }

.engage-tier-name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  letter-spacing: -0.02em;
}

.engage-tier--featured .engage-tier-name { color: #ffffff; }

.engage-tier-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.engage-tier--featured .engage-tier-desc { color: rgba(255,255,255,0.65); }

.engage-tier-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  flex: 1;
}

.engage-tier-list li {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  padding-left: var(--space-5);
  position: relative;
  line-height: 1.5;
}

.engage-tier-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #1e56c8;
  font-weight: 700;
}

.engage-tier--featured .engage-tier-list li { color: rgba(255,255,255,0.6); }
.engage-tier--featured .engage-tier-list li::before { color: #5b8ef0; }

.engage-tier-footer {
  margin-top: auto;
}

.engage-tier--featured .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}

.engage-tier--featured .btn-outline:hover {
  background: rgba(255,255,255,0.1);
}

/* Framework */
.framework {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
}

.framework-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.framework-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}

.framework-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-inline: auto;
  line-height: 1.7;
}

.framework-pillars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
}

@media (max-width: 1000px) { .framework-pillars { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .framework-pillars { grid-template-columns: 1fr; } }

.framework-pillar {
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.framework-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}

.framework-pillar h4 {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.framework-pillar p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* Experts grid */
.experts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

@media (max-width: 900px) { .experts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .experts-grid { grid-template-columns: 1fr; } }

.expert-card {
  background: #ffffff;
  border: 1px solid rgba(30,86,200,0.1);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  box-shadow: 0 4px 20px rgba(30,86,200,0.07), 0 1px 4px rgba(0,0,0,0.04);
  transition: transform var(--transition), box-shadow var(--transition);
}

.expert-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(30,86,200,0.08);
}

.expert-icon {
  width: 56px;
  height: 56px;
  background: rgba(30,86,200,0.06);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
}

.expert-card h3 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}

.expert-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: var(--space-5);
}

.expert-pedigree {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.expert-pedigree span {
  font-size: 11px;
  font-weight: 600;
  color: #1a3d7c;
  background: rgba(30,86,200,0.08);
  border: 1px solid rgba(30,86,200,0.15);
  padding: 2px 10px;
  border-radius: var(--radius-full);
}

.experts-cta {
  text-align: center;
  padding: var(--space-10);
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(30,86,200,0.1);
  box-shadow: 0 4px 16px rgba(30,86,200,0.06);
}

.experts-cta p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* Also update impact-grid to 3 cols */
.impact-grid { grid-template-columns: repeat(3, 1fr); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .services-grid { grid-template-columns: 1fr; }
}

.service-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  position: relative;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.service-card--featured {
  grid-column: span 1;
  background: #0f1e3d;
  border-color: #1a2d52;
  color: var(--color-text-inverse);
}

[data-theme='dark'] .service-card--featured {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

.service-card--featured h3,
.service-card--featured p,
.service-card--featured .service-features li {
  color: rgba(249,248,244,0.9);
}

[data-theme='dark'] .service-card--featured h3,
[data-theme='dark'] .service-card--featured p,
[data-theme='dark'] .service-card--featured .service-features li {
  color: var(--color-text);
}

.service-card--featured .service-icon {
  color: var(--color-primary);
}

.service-card--accent {
  background: var(--color-primary-light);
  border-color: rgba(0,104,110,0.2);
}

.service-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
}

.service-card--featured .service-icon {
  background: rgba(0,104,110,0.15);
}

.service-card--accent .service-icon {
  background: rgba(0,104,110,0.12);
  color: var(--color-primary);
}

.service-card h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-3);
  letter-spacing: -0.02em;
}

.service-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  max-width: none;
}

.service-card--featured p { color: rgba(249,248,244,0.65); }
[data-theme='dark'] .service-card--featured p { color: var(--color-text-muted); }

.service-features {
  list-style: none;
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-features li {
  font-size: var(--text-xs);
  padding-left: var(--space-5);
  position: relative;
  max-width: none;
}

.service-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: var(--space-5);
  text-decoration: none;
  transition: gap var(--transition);
}

.service-link:hover { gap: var(--space-3); }

/* Services narrative strip */
.services-narrative {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
}

.services-narrative__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-8);
}

.services-narrative__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

@media (max-width: 900px) {
  .services-narrative__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .services-narrative__grid { grid-template-columns: 1fr; }
}

.services-narrative__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.services-narrative__num {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: 0.1em;
  padding-top: 3px;
  flex-shrink: 0;
  min-width: 28px;
}

.services-narrative__item h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.services-narrative__item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ── APPROACH ──────────────────────────────────────────────── */
.approach { background: #eef2fa; }

.approach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}

@media (max-width: 800px) {
  .approach-grid { grid-template-columns: 1fr; }
}

.approach-content .section-title { text-align: left; margin-bottom: var(--space-5); }
.approach-content p { color: var(--color-text-muted); margin-bottom: var(--space-8); }

.approach-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.step-num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-primary);
  opacity: 0.5;
  min-width: 44px;
  flex-shrink: 0;
  letter-spacing: -0.04em;
  line-height: 1;
  padding-top: 2px;
}

.step-body h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-1);
  letter-spacing: -0.01em;
}

.step-body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  max-width: none;
}

.approach-card {
  background: #0f1e3d;
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  color: var(--color-text-inverse);
  box-shadow: var(--shadow-xl);
  position: sticky;
  top: calc(68px + var(--space-8));
}

[data-theme='dark'] .approach-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.approach-card-header { margin-bottom: var(--space-8); }

.approach-card-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.approach-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.approach-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,0.08);
}

[data-theme='dark'] .approach-metric {
  background: var(--color-surface-offset);
  border-color: var(--color-border);
}

.metric-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
}

[data-theme='dark'] .metric-value { color: var(--color-text); }

.metric-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

[data-theme='dark'] .metric-label { color: var(--color-text-muted); }

.approach-tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.approach-tags span {
  background: rgba(77,160,167,0.15);
  border: 1px solid rgba(77,160,167,0.3);
  color: var(--color-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
}

/* ── GLOBAL NETWORK ────────────────────────────────────────── */
.network {
  position: relative;
  overflow: hidden;
  background: #07111f;
  padding-block: clamp(var(--space-16), 10vw, var(--space-32));
}

.network-bg {
  position: absolute;
  inset: 0;
}

.network-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  filter: saturate(0.6);
}

.network-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(7,17,31,0.92) 0%,
    rgba(10,24,60,0.75) 50%,
    rgba(7,17,31,0.92) 100%
  );
}

/* Subtle animated radial glow behind the number */
.network-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

/* Hero number anchor */
.network-hero-number {
  font-family: var(--font-display);
  font-size: clamp(6rem, 18vw, 14rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.06em;
  background: linear-gradient(135deg, #2979ff 0%, rgba(41,121,255,0.25) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
  margin-bottom: -0.15em;
  pointer-events: none;
  user-select: none;
}

.network-hero-label {
  display: inline-block;
  background: rgba(41,121,255,0.12);
  border: 1px solid rgba(41,121,255,0.35);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-5);
  font-size: var(--text-xs);
  font-weight: 600;
  color: #5b8ef0;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.network-title {
  color: #fff;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: var(--space-5);
  max-width: 640px;
  margin-inline: auto;
  letter-spacing: -0.02em;
}

.network-title em {
  font-style: normal;
  background: linear-gradient(90deg, #4d9cf7, #2979ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.network-desc {
  color: rgba(255,255,255,0.6);
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--space-14);
  font-size: var(--text-base);
  line-height: 1.75;
}

/* Region cards */
.network-regions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  max-width: 820px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

@media (max-width: 640px) {
  .network-regions { grid-template-columns: 1fr; }
}

.region-item {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 3px solid #1e56c8;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-7);
  text-align: left;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}

.region-item:hover {
  background: rgba(30,86,200,0.12);
  border-color: rgba(30,86,200,0.4);
  border-top-color: #5b8ef0;
  transform: translateY(-3px);
}

.region-icon {
  font-size: 1.6rem;
  margin-bottom: var(--space-3);
  display: block;
}

.region-name {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}

.region-detail {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
}

/* Divider before pills */
.network-divider {
  width: 48px;
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: var(--space-10) auto var(--space-8);
}

.network-highlights {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.highlight-pill {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: rgba(30,86,200,0.15);
  border: 1px solid rgba(91,142,240,0.3);
  color: rgba(255,255,255,0.88);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: background var(--transition), border-color var(--transition);
}

.highlight-pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4d9cf7;
  flex-shrink: 0;
}

.highlight-pill:hover {
  background: rgba(30,86,200,0.28);
  border-color: rgba(91,142,240,0.55);
}

/* ── TEAM ──────────────────────────────────────────────────── */
.team { background: #ffffff; }

.team-featured {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-16);
  align-items: start;
  margin-bottom: var(--space-16);
}

@media (max-width: 900px) {
  .team-featured { grid-template-columns: 1fr; }
}

.team-photo-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 3/4;
  max-height: 480px;
}

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.5s ease;
}

.team-photo-wrap:hover .team-photo { transform: scale(1.03); }

.team-photo-badge {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  letter-spacing: 0.05em;
}

.team-badges {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.team-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}

.team-name {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: var(--space-2);
}

.team-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}

.team-location {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.team-summary {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-4);
  max-width: 62ch;
}

.team-summary strong { color: var(--color-text); }

.team-credentials {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  margin-block: var(--space-6);
}

.credential {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.credential-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--color-text);
  letter-spacing: -0.03em;
}

.credential-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 500;
}

.team-ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Diversity banner */
.diversity-banner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background: var(--color-primary-light);
  border: 1px solid rgba(0,104,110,0.15);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  flex-wrap: wrap;
}

.diversity-icon {
  flex-shrink: 0;
}

.diversity-content { flex: 1; min-width: 200px; }

.diversity-content h4 {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.diversity-content p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: none;
}

.diversity-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-8);
  border: 1px solid var(--color-border);
}

.diversity-num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--color-primary);
  letter-spacing: -0.04em;
}

.diversity-lbl {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  max-width: 120px;
  line-height: 1.4;
}

/* ── RESULTS ───────────────────────────────────────────────── */
.results { background: #0a1428; }

/* Magazine-style stat layout */
.results-magazine {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: var(--space-10);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.mag-stat {
  flex: 1;
  padding: var(--space-10) var(--space-8);
  position: relative;
  transition: background var(--transition);
}

.mag-stat:hover {
  background: rgba(30,86,200,0.1);
}

.mag-stat--hero {
  background: linear-gradient(135deg, rgba(30,86,200,0.25) 0%, rgba(91,142,240,0.15) 100%);
  border-right: 1px solid rgba(255,255,255,0.1);
}

.mag-divider {
  width: 1px;
  background: rgba(255,255,255,0.1);
  flex-shrink: 0;
}

.mag-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 3vw + 1rem, 4.5rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--space-3);
}

.mag-plus {
  font-size: 0.55em;
  vertical-align: super;
  color: #5b8ef0;
}

.mag-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-2);
  letter-spacing: 0.01em;
}

.mag-context {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .results-magazine {
    flex-direction: column;
  }
  .mag-divider {
    width: 100%;
    height: 1px;
  }
}

/* Secondary metric row */
.results-secondary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-12);
}

@media (max-width: 700px) {
  .results-secondary { grid-template-columns: repeat(2, 1fr); }
}

.sec-stat {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: background var(--transition), transform var(--transition);
}

.sec-stat:hover {
  background: rgba(30,86,200,0.15);
  transform: translateY(-2px);
}

.sec-number {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: #5b8ef0;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.sec-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}

/* Testimonial */
.testimonial-block {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-left: 4px solid #5b8ef0;
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  max-width: 800px;
  margin-inline: auto;
}

.testimonial-quote p {
  font-size: var(--text-lg);
  font-style: italic;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin-top: var(--space-4);
  max-width: none;
}

.testimonial-attr {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
}

.testimonial-author-dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  flex-shrink: 0;
}

.testimonial-attr strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: rgba(255,255,255,0.9);
}

.testimonial-attr span {
  display: block;
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}


/* Results section — white text overrides on dark navy bg */
.results .section-title { color: #ffffff; }
.results .section-tag { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); }
.results .section-desc { color: rgba(255,255,255,0.65); }
.results .testimonial-attr strong { color: rgba(255,255,255,0.9); }
.results .testimonial-attr span { color: rgba(255,255,255,0.55); }
.results .testimonial-attr { border-top-color: rgba(255,255,255,0.12); }

/* ── CONTACT ───────────────────────────────────────────────── */
.contact { background: #f0f6ff; }

/* Premium contact layout */
.contact-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-16);
  align-items: start;
}

.contact-left::before {
  content: '';
  display: block;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #1e56c8, #5b8ef0);
  border-radius: 2px;
  margin-bottom: var(--space-5);
}

@media (max-width: 800px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-left .section-title { text-align: left; font-size: var(--text-xl); margin-bottom: var(--space-5); color: var(--color-text); }
.contact-left p { color: var(--color-text-muted); margin-bottom: var(--space-8); }

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact-detail a {
  color: var(--color-text);
  text-decoration: none;
}

.contact-detail a:hover { color: var(--color-primary); }

.contact-detail svg { flex-shrink: 0; margin-top: 2px; }

/* Contact form */
.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.form-group label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-text-faint); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

.form-group textarea { resize: vertical; min-height: 100px; }

.form-note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
  margin-top: var(--space-4);
  max-width: none;
}

.form-success {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-12);
  gap: var(--space-4);
}

.form-success.visible { display: flex; }
.form-success h3 { font-size: var(--text-lg); font-weight: 700; }
.form-success p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── FOOTER ────────────────────────────────────────────────── */
.site-footer {
  background: #0f1e3d;
  color: #ffffff;
  padding-top: var(--space-16);
}

[data-theme='dark'] .site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: var(--space-10);
  padding-bottom: var(--space-12);
}

@media (max-width: 800px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 500px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
}

/* logo-img in footer already handled by logo-img--footer class */

.footer-tagline {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin-top: var(--space-3);
  max-width: 220px;
}

[data-theme='dark'] .footer-tagline { color: var(--color-text-muted); }

.footer-location {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.75);
  margin-top: var(--space-4);
}

[data-theme='dark'] .footer-location { color: var(--color-text-faint); }

.footer-links {
  display: contents;
}

.footer-col h5 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--space-4);
}

[data-theme='dark'] .footer-col h5 { color: var(--color-text-faint); }

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }

.footer-col a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-col a:hover { color: #fff; }

[data-theme='dark'] .footer-col a { color: var(--color-text-muted); }
[data-theme='dark'] .footer-col a:hover { color: var(--color-text); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.08);
  gap: var(--space-4);
  flex-wrap: wrap;
}

[data-theme='dark'] .footer-bottom { border-color: var(--color-divider); }

.footer-bottom p {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.7);
  max-width: none;
}

[data-theme='dark'] .footer-bottom p { color: var(--color-text-faint); }

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.footer-social a {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.3);
  transition: all var(--transition);
}

.footer-social a:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.05);
}

/* ── VALUES & SOCIAL IMPACT ───────────────────────────────── */
.impact { background: #eef2fa; }

.impact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-10);
}

@media (max-width: 700px) {
  .impact-grid { grid-template-columns: 1fr; }
}

.impact-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.impact-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.impact-card--featured {
  grid-column: span 2;
  background: linear-gradient(135deg, #0f1e3d 0%, #1a3570 100%);
  border-color: transparent;
  color: var(--color-text-inverse);
}

[data-theme='dark'] .impact-card--featured {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

.impact-card--featured h3 { color: #fff; }
[data-theme='dark'] .impact-card--featured h3 { color: var(--color-text); }
.impact-card--featured p { color: rgba(249,248,244,0.7); }
[data-theme='dark'] .impact-card--featured p { color: var(--color-text-muted); }
.impact-card--featured .impact-tag { color: var(--color-primary); }

.impact-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.impact-card h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}

.impact-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: none;
}

.impact-stats {
  display: flex;
  gap: var(--space-8);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}

[data-theme='dark'] .impact-stats { border-color: var(--color-divider); }

.impact-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.55);
}

[data-theme='dark'] .impact-stat { color: var(--color-text-muted); }

.impact-stat span {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  line-height: 1;
}

[data-theme='dark'] .impact-stat span { color: var(--color-text); }

.impact-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding-top: var(--space-4);
  flex-wrap: wrap;
}

.impact-cta p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: none;
}

/* ── SCROLL ANIMATIONS ─────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-up:nth-child(2) { transition-delay: 0.1s; }
.fade-up:nth-child(3) { transition-delay: 0.2s; }
.fade-up:nth-child(4) { transition-delay: 0.3s; }
.fade-up:nth-child(5) { transition-delay: 0.4s; }
.fade-up:nth-child(6) { transition-delay: 0.5s; }

/* ── MOBILE ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-actions .btn-primary { display: none; }
  .mobile-menu-btn { display: flex; }

  .hero-stats {
    gap: var(--space-4);
  }

  .stat-divider { display: none; }

  .team-featured { gap: var(--space-8); }

  .diversity-banner { flex-direction: column; text-align: center; }
  .diversity-stat { width: 100%; }
}

@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .team-ctas { flex-direction: column; }
  .team-ctas .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════
   PARTNER REVENUE FUNNEL SECTION
══════════════════════════════════════════ */

.funnel-section {
  background: #08142a;
}

/* Layout: funnel visual left, steps right */
.funnel-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3.5rem;
  align-items: start;
  margin-top: 3rem;
}

/* ── Funnel Visual Column ── */
.funnel-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.funnel-arrow {
  display: flex;
  justify-content: center;
  padding: 0.25rem 0;
  opacity: 0.6;
}

/* Funnel stages — trapezoid via margin taper (no clip-path clipping) */
.funnel-stage {
  border-radius: 10px;
  padding: 1.25rem 1.4rem 1.1rem;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}
.funnel-stage:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(30,86,200,0.22);
}

.funnel-stage--top {
  background: linear-gradient(135deg, #0f1e3d 0%, #1e56c8 100%);
  margin-left: 0;
  margin-right: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.funnel-stage--mid {
  background: linear-gradient(135deg, #1e56c8 0%, #2563eb 100%);
  margin-left: 24px;
  margin-right: 24px;
  border-radius: 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.funnel-stage--bot {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
  margin-left: 48px;
  margin-right: 48px;
  border-radius: 0 0 10px 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.funnel-stage-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.funnel-stage-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.funnel-stage-label {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  line-height: 1.2;
}

.funnel-stage-sublabel {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffffff;
  margin-top: 0.1rem;
  opacity: 1;
}

.funnel-stage-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  padding-bottom: 0.4rem;
}

.ftag {
  background: rgba(255,255,255,0.28);
  color: #ffffff;
  font-family: 'Satoshi', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.65rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.55);
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

.ftag--light {
  background: rgba(255,255,255,0.40);
  border-color: rgba(255,255,255,0.70);
}

/* ── Right Steps Column ── */
.funnel-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.funnel-step {
  display: flex;
  gap: 1.25rem;
  background: #fff;
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
  border: 1px solid #e4ecf7;
  transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.funnel-step:hover {
  box-shadow: 0 8px 28px rgba(13,38,128,0.18);
  transform: translateY(-3px);
  background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%) !important;
  border-color: #4285F4 !important;
}

.funnel-step-num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 4.2rem;
  font-weight: 900;
  color: #0d2680;
  opacity: 1;
  line-height: 1;
  flex-shrink: 0;
  width: 72px;
  padding-top: 0;
  letter-spacing: -0.04em;
  align-self: flex-start;
}

.funnel-step-body h4 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #0f1e3d;
  margin-bottom: 0.35rem;
}

.funnel-step-body p {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.875rem;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.funnel-step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.funnel-step-tags span {
  background: #eef2fa;
  color: #1e56c8;
  font-family: 'Satoshi', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  border: 1px solid #d0dff5;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ── Stat Strip ── */
.funnel-stat-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f1e3d;
  border-radius: 14px;
  padding: 2rem 2.5rem;
  margin-top: 3rem;
  gap: 1rem;
}

.funnel-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
}

.funnel-stat-num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.funnel-stat-label {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.4;
  max-width: 140px;
}

.funnel-stat-div {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* ── Dark mode overrides ── */
[data-theme="dark"] .funnel-section {
  background: #0d1526;
}
[data-theme="dark"] .funnel-step {
  background: #111d35;
  border-color: #1e2d4a;
}
[data-theme="dark"] .funnel-step-body h4 {
  color: #e8edf5;
}
[data-theme="dark"] .funnel-step-tags span {
  background: #1a2d52;
  border-color: #2a3f6a;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .funnel-layout {
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .funnel-layout {
    grid-template-columns: 1fr;
  }
  .funnel-visual {
    max-width: 400px;
    margin: 0 auto;
  }
  .funnel-stat-strip {
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem;
  }
  .funnel-stat-div {
    width: 48px;
    height: 1px;
  }
}

/* ══════════════════════════════════════════
   ECOSYSTEM INVESTMENTS SECTION
══════════════════════════════════════════ */

.ecosystem-invest {
  background: #ffffff;
}

.eco-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 3rem;
}

/* ── Investment pool grid ── */
.eco-pools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.eco-pool {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 1.6rem 1.5rem 1.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.eco-pool:hover {
  box-shadow: 0 8px 28px rgba(30,86,200,0.1);
  transform: translateY(-3px);
}

/* Icon badge */
.eco-pool-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.eco-pool-icon--hyperscaler { background: #dbeafe; color: #1e56c8; }
.eco-pool-icon--cyber       { background: #fce7f3; color: #be185d; }
.eco-pool-icon--ai          { background: #e0e7ff; color: #4338ca; }
.eco-pool-icon--salesforce  { background: #d1fae5; color: #047857; }
.eco-pool-icon--channel     { background: #fef3c7; color: #b45309; }
.eco-pool-icon--programs    { background: #eff6ff; color: #1a73e8; }
.eco-pool-icon--results     { background: #dcfce7; color: #16a34a; }

/* Dollar amount */
.eco-pool-amount {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #0f1e3d;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.eco-pool-name {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #1a2d52;
  margin-bottom: 0.65rem;
}

.eco-pool-desc {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.84rem;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 0.9rem;
}

.eco-pool-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.eco-pool-tags span {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: #1e56c8;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
  padding: 0.18rem 0.55rem;
  border-radius: 20px;
  white-space: nowrap;
}

/* Bullet list inside eco-pool (Partner Funding Programs card) */
.eco-pool-bullets {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.eco-pool-bullets li {
  font-size: 0.85rem;
  color: #3c4043;
  line-height: 1.5;
  padding-left: 1.1rem;
  position: relative;
}
.eco-pool-bullets li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #1a73e8;
  font-weight: 700;
  font-size: 0.8rem;
}

/* Results grid inside Optimus results card */
.eco-pool--results {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 1.5px solid #bbf7d0;
}
.eco-pool-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin: 0.75rem 0 1rem;
}
.eco-pool-result-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.7);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font-size: 0.78rem;
  color: #3c4043;
  line-height: 1.3;
}
.eco-pool-result-logo {
  flex-shrink: 0;
  width: 36px;
  height: 28px;
  border-radius: 5px;
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.eco-pool-result-logo--msft { background: #f0f4ff; color: #1a47cc; }
.eco-pool-result-logo--aws  { background: #fff8ec; color: #b45309; }
.eco-pool-result-logo--gcp  { background: #f0fdf4; color: #047857; }
.eco-pool-result-logo--cyber{ background: #fdf2f8; color: #be185d; }

/* CTA card — dark navy */
.eco-pool--cta {
  background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%);
  border: 1.5px solid #c5d8fd;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}
.eco-pool--cta:hover {
  box-shadow: 0 8px 32px rgba(26,115,232,0.15);
  border-color: rgba(26,115,232,0.4);
  background: linear-gradient(135deg, #dbeafe 0%, #e8f0fe 100%);
}

.eco-cta-headline {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: #1a2d52;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.eco-pool--cta p {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.875rem;
  color: #3c4043;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.eco-cta-quote {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.82rem;
  font-style: italic;
  color: #5f6368;
  border-left: 3px solid #1a73e8;
  padding-left: 0.75rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.eco-pool--cta .btn {
  align-self: flex-start;
}

/* ── Unlock strip ── */
.eco-unlock-strip {
  background: #eef2fa;
  border: 1px solid #d0dff5;
  border-radius: 14px;
  padding: 2rem 2.5rem;
}

.eco-unlock-label {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1e56c8;
  margin-bottom: 1.25rem;
}

.eco-unlock-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.eco-unlock-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.eco-unlock-item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.eco-unlock-item span {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.875rem;
  color: #2d3748;
  line-height: 1.5;
}

/* ── Dark mode ── */
[data-theme="dark"] .ecosystem-invest { background: #0a0f1e; }
[data-theme="dark"] .eco-pool {
  background: #111d35;
  border-color: #1e2d4a;
}
[data-theme="dark"] .eco-pool-amount { color: #e8edf5; }
[data-theme="dark"] .eco-pool-name   { color: #c5d3f0; }
[data-theme="dark"] .eco-pool-desc   { color: #8899bb; }
[data-theme="dark"] .eco-unlock-strip {
  background: #111d35;
  border-color: #1e2d4a;
}
[data-theme="dark"] .eco-unlock-item span { color: #a0b0cc; }

/* ── Responsive ── */
@media (max-width: 1024px) {
  .eco-pools { grid-template-columns: repeat(2, 1fr); }
  .eco-unlock-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .eco-pools { grid-template-columns: 1fr; }
  .eco-unlock-items { grid-template-columns: 1fr; }
  .eco-unlock-strip { padding: 1.5rem; }
}

/* ── Eco proof banner (below header) ── */
.eco-proof-banner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: linear-gradient(135deg, #0f1e3d 0%, #1a2d52 100%);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  text-align: left;
}
.eco-proof-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: rgba(30,86,200,0.5);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.eco-proof-banner p {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.82);
  line-height: 1.65;
  margin: 0;
}
.eco-proof-banner strong {
  color: #fff;
}

/* ── Client wins strip ── */
.eco-wins-strip {
  background: #eef2fa;
  border: 1px solid #d0dff5;
  border-radius: 16px;
  padding: 2.25rem 2.5rem;
  margin-bottom: 1.75rem;
}
.eco-wins-header {
  margin-bottom: 1.75rem;
}
.eco-wins-title {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f1e3d;
  margin: 0.35rem 0 0.5rem;
  line-height: 1.2;
}
.eco-wins-sub {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.875rem;
  color: #4a5568;
  line-height: 1.6;
  max-width: 680px;
}

.eco-wins-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.eco-win {
  display: flex;
  gap: 1rem;
  background: #fff;
  border: 1px solid #e4ecf7;
  border-radius: 12px;
  padding: 1.25rem 1.3rem;
  transition: box-shadow 0.2s ease;
}
.eco-win:hover {
  box-shadow: 0 6px 20px rgba(30,86,200,0.1);
}

/* Platform logo badges */
.eco-win-logo {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.eco-win-logo--msft  { background: #dbeafe; color: #1e3a8a; }
.eco-win-logo--aws   { background: #fef3c7; color: #92400e; }
.eco-win-logo--dist  { background: #d1fae5; color: #065f46; }
.eco-win-logo--cloud { background: #ede9fe; color: #5b21b6; }

.eco-win-headline {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f1e3d;
  margin-bottom: 0.35rem;
}
.eco-win-body p {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.82rem;
  color: #4a5568;
  line-height: 1.55;
  margin: 0;
}

/* ── Big tech love block ── */
.eco-love-block {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 3rem;
  align-items: start;
  background: linear-gradient(135deg, #0f1e3d 0%, #1a2d52 100%);
  border-radius: 16px;
  padding: 2.75rem 3rem;
  margin-top: 0;
}

.eco-love-eyebrow {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5b8ef0;
  margin-bottom: 0.6rem;
}

.eco-love-headline {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1.1rem;
}

.eco-love-left p {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  margin-bottom: 0.85rem;
}
.eco-love-left p em {
  color: #fff;
  font-style: normal;
  font-weight: 600;
}
.eco-love-left .btn {
  margin-top: 0.5rem;
}

/* Right panel */
.eco-love-right {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
}

.eco-love-metric {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.25rem;
}
.eco-love-num {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.4rem;
}
.eco-love-label {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

.eco-love-divider {
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin-bottom: 1.25rem;
}

.eco-love-checks {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.eco-love-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.eco-love-check svg { flex-shrink: 0; margin-top: 2px; }
.eco-love-check span {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.45;
}

/* ── Dark mode ── */
[data-theme="dark"] .eco-wins-strip {
  background: #111d35;
  border-color: #1e2d4a;
}
[data-theme="dark"] .eco-wins-title { color: #e8edf5; }
[data-theme="dark"] .eco-win {
  background: #0d1526;
  border-color: #1e2d4a;
}
[data-theme="dark"] .eco-win-headline { color: #c5d3f0; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .eco-love-block {
    grid-template-columns: 1fr;
    padding: 2rem 1.75rem;
  }
}
@media (max-width: 640px) {
  .eco-wins-grid { grid-template-columns: 1fr; }
  .eco-wins-strip { padding: 1.5rem; }
  .eco-proof-banner { flex-direction: column; }
  .eco-love-headline { font-size: 1.3rem; }
}



/* ═══════════════════════════════════════════════════════════════════
   GOOGLE.COM DESIGN SYSTEM — SINGLE AUTHORITATIVE SOURCE OF TRUTH
   Based on cloud.google.com / about.google visual reference
   Pure light theme: white everywhere, zero dark sections.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ── */
:root,
:root:not([data-theme]),
:root[data-theme="light"] {
  /* Google exact palette */
  --g-blue:         #1a73e8;   /* Google Blue — primary CTA */
  --g-blue-dark:    #1558b0;   /* hover */
  --g-blue-light:   #e8f0fe;   /* tinted bg, tags */
  --g-blue-mid:     #c5d8fd;   /* border on blue tint */
  --g-blue-text:    #1a73e8;   /* link/accent text */

  /* Google accent spectrum (Material You) */
  --g-green:        #1e8e3e;
  --g-red:          #d93025;
  --g-yellow:       #f9ab00;
  --g-teal:         #129eaf;

  /* Surfaces — Google uses almost-white, never true dark */
  --g-white:        #ffffff;
  --g-grey-1:       #f8f9fa;   /* page bg, alternating sections */
  --g-grey-2:       #f1f3f4;   /* card hover bg */
  --g-grey-3:       #e8eaed;   /* borders, dividers */
  --g-grey-4:       #dadce0;   /* stronger border */

  /* Text — Google uses near-black, not pure black */
  --g-text-h:       #202124;   /* headings */
  --g-text-body:    #3c4043;   /* body copy */
  --g-text-muted:   #5f6368;   /* subtext, muted */
  --g-text-faint:   #80868b;   /* faint labels */
  --g-text-white:   #ffffff;

  /* "Hero" accent — Google uses a soft gradient wash, not dark */
  --g-hero-bg:      #f0f4ff;   /* very soft blue-tinted white */
  --g-hero-grad:    linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 40%, #fce8ff 100%);

  /* Section alternation */
  --g-section-a:    #ffffff;
  --g-section-b:    #f8f9fa;

  /* Shadows — Google Material shadow */
  --g-shadow-sm:    0 1px 2px rgba(60,64,67,0.10), 0 1px 3px rgba(60,64,67,0.08);
  --g-shadow-md:    0 1px 3px rgba(60,64,67,0.12), 0 4px 12px rgba(60,64,67,0.10);
  --g-shadow-hover: 0 2px 8px rgba(60,64,67,0.15), 0 6px 20px rgba(60,64,67,0.12);

  /* Radius — Google uses pill/rounded style */
  --g-radius-sm:    4px;
  --g-radius-md:    8px;
  --g-radius-lg:    12px;
  --g-radius-pill:  24px;

  /* Base var overrides */
  --color-surface:        #ffffff !important;
  --color-surface-2:      #f8f9fa !important;
  --color-border:         #e8eaed !important;
  --color-text:           #202124 !important;
  --color-text-muted:     #5f6368 !important;
  --color-text-faint:     #80868b !important;
  --color-text-inverse:   #ffffff !important;
  --color-primary:        #1a73e8 !important;
  --color-bg:             #f8f9fa !important;
}

/* ── 2. GLOBAL BASE ── */
html, body {
  background: var(--g-white) !important;
  color: var(--g-text-body) !important;
  font-family: 'Google Sans', 'Product Sans', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ── 3. NAV — Google: white, no shadow, hairline border ── */
.nav, nav, header.nav, .site-header {
  background: var(--g-white) !important;
  border-bottom: 1px solid var(--g-grey-3) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.nav-link, .nav a, nav a:not(.btn) {
  color: var(--g-text-body) !important;
  opacity: 1 !important;
  font-weight: 500 !important;
}
.nav-link:hover, nav a:not(.btn):hover { color: var(--g-blue) !important; }
.nav .btn, .nav a.btn {
  background: var(--g-blue) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--g-radius-pill) !important;
  padding: 0.5rem 1.5rem !important;
  font-weight: 500 !important;
}
.nav .btn:hover { background: var(--g-blue-dark) !important; }

/* ── 4. ALL SECTION BACKGROUNDS — light only ── */

/* Hero — soft blue-tinted gradient, no dark */
/* NOTE: #home is intentionally excluded here — it's the carousel section
   and gets its own dark background override below */
.hero, .section-hero {
  background: var(--g-hero-grad) !important;
  color: var(--g-text-h) !important;
}
.hero h1, .hero h2 { color: var(--g-text-h) !important; }
.hero p { color: var(--g-text-body) !important; }
/* Hero accent line */
.hero .accent-line { background: var(--g-blue) !important; }

/* White sections */
#pain, .section-pain,
#model, .section-model,
#impact, .section-impact,
#contact, .section-contact {
  background: var(--g-white) !important;
}

/* Light grey sections */
#funnel, .section-funnel,
#ecosystem, .section-ecosystem,
#approach, .section-approach,
#experts, .section-experts,
#results, .section-results,
#network, .section-network,
#shelflife, .shelf-life, .section-shelflife,
#services, .section-services {
  background: var(--g-grey-1) !important;
}

/* Logo strip — light grey with slightly more depth */
.logo-strip { background: var(--g-grey-2) !important; }
.marquee-item, .logo-strip span { color: var(--g-text-muted) !important; }

/* Footer — Google uses white/very light footer too */
footer, .footer {
  background: var(--g-grey-1) !important;
  border-top: 1px solid var(--g-grey-3) !important;
  color: var(--g-text-muted) !important;
}
footer a, .footer a { color: var(--g-text-muted) !important; }
footer a:hover, .footer a:hover { color: var(--g-blue) !important; }

/* ── 5. ALL TEXT — headings and body on light sections ── */
h1, h2, h3, h4 { color: var(--g-text-h) !important; }
p, li, span:not(.btn span) { color: var(--g-text-body) !important; }
.section-title, .section-heading { color: var(--g-text-h) !important; }
.section-desc { color: var(--g-text-muted) !important; }

/* Section pill tags — Google style: blue tint, rounded */
.section-tag, .pill-tag, .section-label {
  background: var(--g-blue-light) !important;
  color: var(--g-blue) !important;
  border: 1px solid var(--g-blue-mid) !important;
  border-radius: var(--g-radius-pill) !important;
  font-weight: 500 !important;
}

/* ── 6. CARDS — white, Material shadow, colored top border ── */
.pain-card, .expert-card, .hww-block,
.approach-step, .impact-card, .contact-form-wrap,
.funnel-step, .activation-step,
.eco-pool, .eco-card, .region-card,
.engage-tier, .result-card, .mag-stat-cell,
.shelf-card, .win-item {
  background: var(--g-white) !important;
  border: 1px solid var(--g-grey-3) !important;
  border-radius: var(--g-radius-lg) !important;
  box-shadow: var(--g-shadow-sm) !important;
  color: var(--g-text-body) !important;
}
.pain-card:hover, .expert-card:hover, .hww-block:hover,
.engage-tier:hover, .region-card:hover {
  box-shadow: var(--g-shadow-hover) !important;
  transform: translateY(-2px) !important;
  border-color: var(--g-grey-4) !important;
}

/* Card headings and text */
.pain-card h3, .expert-card h3, .hww-block h3,
.eco-card h3, .eco-pool h3, .region-card h3,
.engage-tier .engage-tier-name,
.result-card h3, .shelf-card-label,
.funnel-step h3, .activation-step h3 {
  color: var(--g-text-h) !important;
}
.pain-card p, .expert-card p, .hww-block p,
.eco-card p, .eco-pool p, .region-card p,
.engage-tier .engage-tier-desc,
.engage-tier .engage-tier-type,
.engage-tier .engage-tier-list li,
.funnel-step p, .activation-step p {
  color: var(--g-text-muted) !important;
}

/* Card top accent borders — Google spectrum */
.pain-card:nth-child(1), .expert-card:nth-child(1) { border-top: 4px solid var(--g-blue) !important; }
.pain-card:nth-child(2), .expert-card:nth-child(2) { border-top: 4px solid var(--g-green) !important; }
.pain-card:nth-child(3), .expert-card:nth-child(3) { border-top: 4px solid var(--g-red) !important; }
.pain-card:nth-child(4), .expert-card:nth-child(4) { border-top: 4px solid var(--g-yellow) !important; }

/* Icon backgrounds */
.card-icon, .icon-wrap, .hww-icon,
.eco-pool-icon, .funnel-icon {
  background: var(--g-blue-light) !important;
  color: var(--g-blue) !important;
  border-radius: var(--g-radius-md) !important;
}

/* ── 7. SERVICES / ENGAGE TIERS — light cards with featured in blue ── */
.engage-tier {
  background: var(--g-white) !important;
  border: 1px solid var(--g-grey-3) !important;
}
.engage-tier .engage-tier-badge {
  background: var(--g-grey-1) !important;
  color: var(--g-text-muted) !important;
  border: 1px solid var(--g-grey-3) !important;
}
.engage-tier .engage-tier-list li::before { color: var(--g-blue) !important; }

/* Featured tier — Google Blue */
.engage-tier--featured, .engage-tier.engage-tier--featured {
  background: var(--g-blue) !important;
  border-color: var(--g-blue-dark) !important;
  box-shadow: var(--g-shadow-md) !important;
}
.engage-tier--featured .engage-tier-name { color: #ffffff !important; }
.engage-tier--featured .engage-tier-type { color: rgba(255,255,255,0.7) !important; }
.engage-tier--featured .engage-tier-desc { color: rgba(255,255,255,0.9) !important; }
.engage-tier--featured .engage-tier-list li { color: rgba(255,255,255,0.9) !important; }
.engage-tier--featured .engage-tier-list li::before { color: #ffffff !important; }
.engage-tier--featured .engage-tier-badge {
  background: rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.3) !important;
}

/* ── 8. FUNNEL SECTION — light grey bg, white cards ── */
#funnel .section-title, .section-funnel h2 { color: var(--g-text-h) !important; }
#funnel .section-desc { color: var(--g-text-muted) !important; }
.funnel-tag, .keyword-tag {
  background: var(--g-blue-light) !important;
  color: var(--g-blue) !important;
  border: 1px solid var(--g-blue-mid) !important;
  border-radius: var(--g-radius-pill) !important;
  font-weight: 500 !important;
}
/* funnel-stage colors set by --top/--mid/--bot Google gradient rules */
.funnel-stage h3, .funnel-stage-title { color: #ffffff !important; }
.funnel-stage p, .funnel-stage-sub { color: rgba(255,255,255,0.88) !important; }

/* ── 9. ECOSYSTEM SECTION ── */
#ecosystem .section-title, .section-ecosystem h2 { color: var(--g-text-h) !important; }
#ecosystem .section-desc { color: var(--g-text-muted) !important; }
.eco-proof-banner, .proof-banner {
  background: var(--g-blue-light) !important;
  border: 1px solid var(--g-blue-mid) !important;
  border-radius: var(--g-radius-lg) !important;
  color: var(--g-text-h) !important;
}
.eco-proof-banner strong, .eco-pool-amount, .eco-amount { color: var(--g-blue) !important; font-weight: 700 !important; }
.eco-pool-label { color: var(--g-text-muted) !important; }

/* ── 10. SHELF-LIFE SECTION — light grey bg, no dark ── */
#shelflife .section-title,
#shelflife h2,
.shelf-headline { color: var(--g-text-h) !important; }
#shelflife p,
.shelf-sub { color: var(--g-text-muted) !important; }
.shelf-big-number {
  background: linear-gradient(135deg, #1a73e8 0%, #4285f4 50%, #34a853 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.shelf-card {
  background: var(--g-white) !important;
  border: 1px solid var(--g-grey-3) !important;
}
.shelf-card--problem { border-top: 4px solid var(--g-red) !important; }
.shelf-card--solution { border-top: 4px solid var(--g-green) !important; }
.shelf-card-label { color: var(--g-text-h) !important; }
.shelf-list li { color: var(--g-text-body) !important; }
.shelf-list--bad li::before { color: var(--g-red) !important; }
.shelf-list--good li::before { color: var(--g-green) !important; }
.shelf-8020 {
  background: var(--g-blue-light) !important;
  border: 1px solid var(--g-blue-mid) !important;
  border-radius: var(--g-radius-lg) !important;
}
.shelf-8020 strong { color: var(--g-text-h) !important; }
.shelf-8020 span { color: var(--g-text-muted) !important; }

/* ── 11. RESULTS SECTION ── */
#results .section-title, .section-results h2 { color: var(--g-text-h) !important; }
#results .section-desc { color: var(--g-text-muted) !important; }
.mag-stat-value, .result-stat-value { color: var(--g-text-h) !important; font-weight: 700 !important; }
.mag-stat-label, .result-stat-label { color: var(--g-text-muted) !important; }
.sec-metric-value { color: var(--g-blue) !important; font-weight: 700 !important; }
.sec-metric-label { color: var(--g-text-muted) !important; }
.testimonial-quote { color: var(--g-text-body) !important; }
.testimonial-author { color: var(--g-text-muted) !important; }

/* ── 12. REACH / NETWORK SECTION ── */
#network .section-title, .section-network h2 { color: var(--g-text-h) !important; }
#network .section-desc { color: var(--g-text-muted) !important; }
#network .big-number { color: var(--g-blue) !important; }
.region-card h3 { color: var(--g-text-h) !important; }
.region-card p  { color: var(--g-text-muted) !important; }

/* ── 13. APPROACH SECTION ── */
#approach .section-title, .approach h2 { color: var(--g-text-h) !important; }
.approach-step-num { color: var(--g-blue) !important; font-weight: 700 !important; }
.approach-step h3  { color: var(--g-text-h) !important; }
.approach-step p   { color: var(--g-text-muted) !important; }
.approach-card, .approach-proof {
  background: var(--g-white) !important;
  border: 1px solid var(--g-grey-3) !important;
  box-shadow: var(--g-shadow-md) !important;
  border-radius: var(--g-radius-lg) !important;
}
.approach-metric {
  background: var(--g-blue-light) !important;
  border: 1px solid var(--g-blue-mid) !important;
  border-radius: var(--g-radius-md) !important;
}
.metric-value { color: var(--g-blue) !important; font-weight: 700 !important; }
.metric-label { color: var(--g-text-muted) !important; }
.proof-tag {
  background: var(--g-blue-light) !important;
  color: var(--g-blue) !important;
  border: 1px solid var(--g-blue-mid) !important;
  border-radius: var(--g-radius-pill) !important;
}
.approach-card-tag { color: var(--g-blue) !important; font-weight: 700 !important; }

/* ── 14. IMPACT SECTION ── */
.impact-tag, .impact-category {
  color: var(--g-blue) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.05em !important;
}

/* ── 15. BUTTONS — Google pill style ── */
.btn-primary, .btn[class*="primary"],
a.btn:not(.btn-outline):not(.btn-ghost),
button.btn:not(.btn-outline) {
  background: var(--g-blue) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--g-radius-pill) !important;
  font-weight: 500 !important;
}
.btn-primary:hover { background: var(--g-blue-dark) !important; }

.btn-outline, a.btn-outline {
  background: transparent !important;
  color: var(--g-blue) !important;
  border: 1px solid var(--g-blue) !important;
  border-radius: var(--g-radius-pill) !important;
  font-weight: 500 !important;
}
.btn-outline:hover {
  background: var(--g-blue-light) !important;
}

/* Hero CTAs — dark bg buttons become light bg */
.hero .btn-outline,
#home .btn-outline {
  color: var(--g-blue) !important;
  border-color: var(--g-blue) !important;
  background: rgba(255,255,255,0.8) !important;
}

/* ── 16. HERO — override dark text colors ── */
.hero .section-tag, #home .section-tag {
  background: var(--g-blue-light) !important;
  color: var(--g-blue) !important;
  border-color: var(--g-blue-mid) !important;
}
.hero .accent-bar { background: var(--g-blue) !important; }
.hero-stat-value { color: var(--g-blue) !important; }
.hero-stat-label { color: var(--g-text-muted) !important; }

/* ── 17. CONTACT SECTION ── */
#contact { background: var(--g-white) !important; }
.contact-form input, .contact-form textarea, .contact-form select {
  background: var(--g-white) !important;
  border: 1px solid var(--g-grey-3) !important;
  border-radius: var(--g-radius-md) !important;
  color: var(--g-text-body) !important;
}
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--g-blue) !important;
  outline: 2px solid var(--g-blue-light) !important;
}
.contact-form label { color: var(--g-text-body) !important; }

/* ── 18. MOBILE NAV ── */
.mobile-menu, .nav-drawer, .mobile-nav {
  background: var(--g-white) !important;
  border-color: var(--g-grey-3) !important;
}
.mobile-menu a, .nav-drawer a { color: var(--g-text-body) !important; }

/* ── 19. SCROLL ANIMATIONS ── */
.fade-in-up { opacity: 0; transform: translateY(20px); }
.fade-in-up.visible { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease; }

/* ═══════════════════════════════════════════════
   END GOOGLE.COM DESIGN SYSTEM
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   GOOGLE LIGHT — HERO + HARDCODED DARK BG OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */

/* Hero: make overlay very light so it reads as a light section */
.hero-overlay {
  background: linear-gradient(
    135deg,
    rgba(240,244,255,0.97) 0%,
    rgba(232,240,254,0.95) 50%,
    rgba(248,245,255,0.90) 100%
  ) !important;
}

/* Hero text must be dark since background is now light */
.hero-heading, .hero-heading em,
.hero h1, .hero h2 {
  color: #202124 !important;
  -webkit-text-fill-color: #202124 !important;
  background: none !important;
}
.hero-heading em, .hero h1 em, .hero h1 span.accent {
  color: #1a73e8 !important;
  -webkit-text-fill-color: #1a73e8 !important;
}
.hero-sub, .hero p { color: #3c4043 !important; }
.hero-badge, .hero .section-tag {
  background: rgba(26,115,232,0.10) !important;
  color: #1a73e8 !important;
  border-color: rgba(26,115,232,0.25) !important;
}
.hero-accent-line { background: #1a73e8 !important; }
.hero-stat-value  { color: #1a73e8 !important; }
.hero-stat-label  { color: #5f6368 !important; }
.hero-scroll-hint { color: #5f6368 !important; }

/* Hero CTA buttons */
.hero .btn-primary, #home .btn-primary {
  background: #1a73e8 !important;
  color: #ffffff !important;
  border-radius: 24px !important;
  border: none !important;
}
.hero .btn-outline, #home .btn-outline {
  background: transparent !important;
  color: #1a73e8 !important;
  border: 1.5px solid #1a73e8 !important;
  border-radius: 24px !important;
}

/* All hardcoded dark navy section backgrounds → light grey */
/* Line 996: funnel | Line 1287: ecosystem | Line 1519: services | Line 1604: results */
/* Line 2290: shelf | Line 2442: approach | Line 2773: hww | Line 2950: contact */
.partner-funnel, .section-funnel,
.ecosystem-invest, .section-ecosystem,
.services-engage, .section-services,
.results-section, .section-results,
.shelf-life, .section-shelflife,
.how-we-work, .section-model,
.network-section, .section-network {
  background: #f8f9fa !important;
}

/* Dark text on all previously-dark sections */
.partner-funnel h2, .partner-funnel p,
.ecosystem-invest h2, .ecosystem-invest p,
.services-engage h2, .services-engage p,
.results-section h2, .results-section p,
.shelf-life h2, .shelf-life p,
.how-we-work h2, .how-we-work p,
.network-section h2, .network-section p {
  color: #202124 !important;
}
.partner-funnel .section-desc,
.ecosystem-invest .section-desc,
.services-engage .section-desc,
.results-section .section-desc {
  color: #5f6368 !important;
}

/* Funnel tags on light bg */
.funnel-tag, .funnel-keyword, .keyword-tag {
  background: #e8f0fe !important;
  color: #1a73e8 !important;
  border: 1px solid #c5d8fd !important;
  border-radius: 20px !important;
}

/* Logo strip on light */
.logo-strip {
  background: #f1f3f4 !important;
  border-top: 1px solid #e8eaed !important;
  border-bottom: 1px solid #e8eaed !important;
}
.marquee-item, .logo-strip span, .marquee span {
  color: #5f6368 !important;
}

/* Footer light */
footer, .footer {
  background: #f8f9fa !important;
  border-top: 1px solid #e8eaed !important;
}
footer *, .footer * { color: #5f6368 !important; }
footer a:hover, .footer a:hover { color: #1a73e8 !important; }
footer .logo-text, .footer-logo { color: #202124 !important; opacity: 1 !important; }

/* Results stats — dark text not white */
.mag-stat-value, .result-stat-value,
.mag-stat-cell .stat-num { color: #202124 !important; }
.sec-metric-value { color: #1a73e8 !important; }
.testimonial-quote { color: #3c4043 !important; }
.testimonial-author { color: #5f6368 !important; }

/* Network big number */
.network-hero-number, .big-number { color: #1a73e8 !important; }

/* Shelf list checkmarks */
.shelf-list--bad li::before { color: #d93025 !important; }
.shelf-list--good li::before { color: #1e8e3e !important; }
.shelf-list li { color: #3c4043 !important; }
.shelf-card-label { color: #202124 !important; }
.shelf-8020 strong { color: #202124 !important; }
.shelf-8020 span   { color: #5f6368 !important; }

/* Approach card tag */
.approach-card-tag, .proof-tag-label { color: #1a73e8 !important; }

/* Eco proof banner */
.eco-proof-banner strong, .eco-big-text {
  color: #1a73e8 !important;
}

/* ── DARK MODE KILL — disable entirely ── */
[data-theme="dark"],
[data-theme="dark"] * {
  background: unset !important;
  color: unset !important;
}

/* ═══════════════════════════════════════════════
   END GOOGLE LIGHT HERO + HARDCODED OVERRIDES
   ═══════════════════════════════════════════════ */

/* ============================================================
   GOOGLE LIGHT — RESULTS + FUNNEL FINAL FIX
   ============================================================ */

/* --- Results magazine bar --- */
.results-magazine {
  border: 1px solid #e8eaed !important;
  background: #ffffff !important;
}
.mag-stat--hero {
  background: linear-gradient(135deg, #e8f0fe 0%, #f0f4ff 100%) !important;
  border-right: 1px solid #e8eaed !important;
}
.mag-divider {
  background: #e8eaed !important;
}
.mag-number {
  color: #202124 !important;
}
.mag-plus {
  color: #1a73e8 !important;
}
.mag-label {
  color: #3c4043 !important;
}
.mag-context {
  color: #5f6368 !important;
}
.mag-stat:hover {
  background: #f8f9fa !important;
}

/* --- Secondary stats row --- */
.sec-stat {
  background: #f8f9fa !important;
  border: 1px solid #e8eaed !important;
}
.sec-stat:hover {
  background: #e8f0fe !important;
}
.sec-number {
  color: #1a73e8 !important;
}
.sec-label {
  color: #5f6368 !important;
}

/* --- Testimonial block in results --- */
.testimonial-block {
  background: #f8f9fa !important;
  border: 1px solid #e8eaed !important;
  border-left: 4px solid #1a73e8 !important;
}
.testimonial-block blockquote,
.testimonial-block p {
  color: #3c4043 !important;
}
.testimonial-block .testimonial-attr,
.testimonial-block cite {
  border-top-color: #e8eaed !important;
  color: #5f6368 !important;
}
.testimonial-block .testimonial-attr strong,
.testimonial-block cite strong {
  color: #202124 !important;
}

/* --- Funnel visual stages — Google carousel colors with animation --- */
.funnel-stage--top {
  background: linear-gradient(135deg, #0d2680 0%, #1a47cc 100%) !important;
  border-top: none !important;
}
.funnel-stage--mid {
  background: linear-gradient(135deg, #5c0a05 0%, #9a1818 100%) !important;
  border-top: none !important;
}
.funnel-stage--bot {
  background: linear-gradient(135deg, #0a2e14 0%, #14532d 100%) !important;
  border-top: none !important;
}
.funnel-stage-label {
  color: #ffffff !important;
}
.funnel-stage-sublabel {
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
}
.funnel-stage-icon {
  background: rgba(255,255,255,0.18) !important;
}
.funnel-stage-icon svg,
.funnel-stage-icon i {
  color: #ffffff !important;
}
/* Google-color hover glow per card */
.funnel-stage--top:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 36px rgba(66,133,244,0.45) !important;
}
.funnel-stage--mid:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 36px rgba(234,67,53,0.45) !important;
}
.funnel-stage--bot:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 12px 36px rgba(52,168,83,0.45) !important;
}
.funnel-stage {
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.28s ease !important;
}

/* --- Funnel stat chips at bottom of funnel section --- */
.funnel-stat-num {
  color: #1a73e8 !important;
}
.funnel-stat-label {
  color: #5f6368 !important;
}

/* ============================================================
   GOOGLE LIGHT — SERVICES SECTION COMPLETE FIX
   ============================================================ */

/* --- Override the services--dark section background --- */
.services--dark {
  background: #f8f9fa !important;
}
.services--dark .section-title,
.services--dark .section-desc {
  color: #202124 !important;
}
.services--dark .section-tag {
  color: #5f6368 !important;
  border-color: #e8eaed !important;
  background: #ffffff !important;
}

/* --- Non-featured tier cards: already white, ensure text is dark --- */
.services--dark .engage-tier {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  box-shadow: 0 2px 8px rgba(26,115,232,0.06) !important;
}
.services--dark .engage-tier:hover {
  box-shadow: 0 8px 28px rgba(26,115,232,0.12) !important;
}
.services--dark .engage-tier-name,
.services--dark .engage-tier-list li {
  color: #202124 !important;
}
.services--dark .engage-tier-type {
  color: #5f6368 !important;
}
.services--dark .engage-tier-desc {
  color: #3c4043 !important;
}
.services--dark .engage-tier-list li::before {
  color: #1a73e8 !important;
}
.services--dark .engage-tier-badge {
  background: #e8f0fe !important;
  color: #1a73e8 !important;
}

/* --- Featured card (Tier 02): Google Blue instead of dark navy --- */
.engage-tier--featured {
  background: #1a73e8 !important;
  border-color: #1a73e8 !important;
}
.engage-tier--featured .engage-tier-name { color: #ffffff !important; }
.engage-tier--featured .engage-tier-type { color: rgba(255,255,255,0.7) !important; }
.engage-tier--featured .engage-tier-desc { color: rgba(255,255,255,0.85) !important; }
.engage-tier--featured .engage-tier-list li { color: rgba(255,255,255,0.85) !important; }
.engage-tier--featured .engage-tier-list li::before { color: #ffffff !important; }
.engage-tier--featured .engage-tier-badge {
  background: rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
}
.engage-tier--featured .btn-outline {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.5) !important;
}
.engage-tier--featured .btn-outline:hover {
  background: rgba(255,255,255,0.15) !important;
}
.services--dark .btn-outline {
  color: #1a73e8 !important;
  border-color: #1a73e8 !important;
}
.services--dark .btn-outline:hover {
  background: #e8f0fe !important;
}

/* --- Framework block: proper white card on light grey section --- */
.services--dark .framework,
.framework {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
}
.services--dark .framework-title {
  color: #202124 !important;
}
.services--dark .framework-desc {
  color: #5f6368 !important;
}
.services--dark .framework-pillar {
  background: #f8f9fa !important;
  border: 1px solid #e8eaed !important;
  border-top: 3px solid #1a73e8 !important;
}
.services--dark .framework-pillar h4 {
  color: #202124 !important;
}
.services--dark .framework-pillar p {
  color: #5f6368 !important;
}
.services--dark .framework-num {
  color: #1a73e8 !important;
}

/* ============================================================
   FEATURED TIER CARD — HIGH SPECIFICITY TEXT OVERRIDE
   (services--dark forces dark text; re-assert white on featured)
   ============================================================ */
.services--dark .engage-tier--featured .engage-tier-name,
.services--dark .engage-tier.engage-tier--featured .engage-tier-name {
  color: #ffffff !important;
}
.services--dark .engage-tier--featured .engage-tier-type,
.services--dark .engage-tier.engage-tier--featured .engage-tier-type {
  color: rgba(255,255,255,0.75) !important;
}
.services--dark .engage-tier--featured .engage-tier-desc,
.services--dark .engage-tier.engage-tier--featured .engage-tier-desc {
  color: rgba(255,255,255,0.9) !important;
}
.services--dark .engage-tier--featured .engage-tier-list li,
.services--dark .engage-tier.engage-tier--featured .engage-tier-list li {
  color: rgba(255,255,255,0.9) !important;
}
.services--dark .engage-tier--featured .engage-tier-list li::before,
.services--dark .engage-tier.engage-tier--featured .engage-tier-list li::before {
  color: #ffffff !important;
}
.services--dark .engage-tier--featured .engage-tier-badge,
.services--dark .engage-tier.engage-tier--featured .engage-tier-badge {
  background: rgba(255,255,255,0.2) !important;
  color: #ffffff !important;
}
.services--dark .engage-tier--featured .btn-outline,
.services--dark .engage-tier.engage-tier--featured .btn-outline {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* Featured card background — must beat services--dark .engage-tier rule */
.services--dark .engage-tier--featured,
.services--dark .engage-tier.engage-tier--featured {
  background: #1a73e8 !important;
  border-color: #1558b0 !important;
}

/* ============================================================
   GOOGLE LIGHT — NETWORK / REACH SECTION COMPLETE FIX
   ============================================================ */

/* Kill the dark base background and overlay */
.network {
  background: #f8f9fa !important;
}
.network-overlay {
  background: none !important;
  display: none !important;
}
.network-bg img {
  opacity: 0.04 !important;
  filter: saturate(0.3) invert(1) !important;
}

/* Hero number and label */
.network-hero-number,
.network .big-number {
  color: #1a73e8 !important;
  text-shadow: none !important;
}
.network-hero-label {
  color: #5f6368 !important;
}

/* Section heading and description */
.network-title,
.network-title em,
.network h2 {
  color: #202124 !important;
}
.network-desc,
.network p {
  color: #5f6368 !important;
}

/* Region cards */
.region-card {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  box-shadow: 0 2px 8px rgba(26,115,232,0.06) !important;
}
.region-card:hover {
  box-shadow: 0 8px 24px rgba(26,115,232,0.12) !important;
}
.region-card h3,
.region-card .region-name {
  color: #202124 !important;
}
.region-card p,
.region-card .region-countries {
  color: #5f6368 !important;
}
.region-card .region-icon,
.region-card .emoji {
  filter: none !important;
}

/* Network divider and highlights */
.network-divider {
  border-color: #e8eaed !important;
}
.network-highlights,
.network-highlights * {
  color: #5f6368 !important;
}
.network-highlights strong {
  color: #202124 !important;
}

/* Region items — light cards */
.region-item {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-top: 3px solid #1a73e8 !important;
  box-shadow: 0 2px 8px rgba(26,115,232,0.06) !important;
}
.region-item:hover {
  background: #f0f4ff !important;
  border-color: #c5d8fd !important;
  border-top-color: #1a73e8 !important;
}
.region-name {
  color: #202124 !important;
}
.region-detail {
  color: #5f6368 !important;
}
.network-divider {
  background: #e8eaed !important;
}
/* Network highlights pills */
.network-highlights .highlight-pill,
.network-highlights span {
  background: #e8f0fe !important;
  color: #1a73e8 !important;
  border: 1px solid #c5d8fd !important;
}

/* ============================================================
   GOOGLE LIGHT — FUNNEL STAT STRIP FIX
   ============================================================ */
.funnel-stat-strip {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  box-shadow: 0 2px 12px rgba(26,115,232,0.08) !important;
}
.funnel-stat-num {
  color: #1a73e8 !important;
}
.funnel-stat-label {
  color: #3c4043 !important;
}
.funnel-stat-div {
  background: #e8eaed !important;
}

/* ============================================================
   GOOGLE LIGHT — ECO LOVE BLOCK FIX
   ============================================================ */
.eco-love-block {
  background: #f0f4ff !important;
  border: 1px solid #c5d8fd !important;
}
.eco-love-eyebrow {
  color: #1a73e8 !important;
}
.eco-love-headline {
  color: #202124 !important;
}
.eco-love-left p {
  color: #3c4043 !important;
}
.eco-love-left p em {
  color: #202124 !important;
}

/* Right panel */
.eco-love-right {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
}
.eco-love-num {
  color: #1a73e8 !important;
}
.eco-love-label {
  color: #5f6368 !important;
}
.eco-love-divider {
  background: #e8eaed !important;
}
.eco-love-check span {
  color: #3c4043 !important;
}
/* Update SVG stroke color to Google Blue via filter */
.eco-love-check svg circle,
.eco-love-check svg path {
  stroke: #1a73e8 !important;
}

/* ============================================================
   TAB BAR — GOOGLE STYLE
   ============================================================ */

/* Tab bar container */
.tab-bar {
  background: #ffffff;
  border-bottom: 1px solid #e8eaed;
  position: sticky;
  top: 64px; /* nav height */
  z-index: 90;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.tab-bar-inner {
  display: flex;
  align-items: stretch;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tab-bar-inner::-webkit-scrollbar { display: none; }

/* Tab buttons */
.tab-btn {
  position: relative;
  font-family: 'Satoshi', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #5f6368;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 20px;
  height: 48px;
  white-space: nowrap;
  transition: color 0.18s ease;
  letter-spacing: 0.01em;
  flex-shrink: 0;
}
.tab-btn::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #1a73e8;
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.tab-btn:hover {
  color: #1a73e8;
  background: #f8f9fa;
}
.tab-btn.active {
  color: #1a73e8;
  font-weight: 600;
}
.tab-btn.active::after {
  transform: scaleX(1);
}

/* ── Tab panels ── */
.tab-panel {
  display: none;
  animation: tabFadeIn 0.22s ease forwards;
}
.tab-panel.active {
  display: block;
}

@keyframes tabFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile tab buttons in drawer ── */
.mobile-tab-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Satoshi', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  color: #202124;
  padding: 0.5rem 0;
  text-align: left;
  width: 100%;
  transition: color 0.15s;
}
.mobile-tab-btn:hover,
.mobile-tab-btn.active {
  color: #1a73e8;
}

/* ── Adjust nav for tab bar presence ── */
.site-header {
  /* header now taller due to tab bar — adjust any sticky calcs */
}

/* ── Remove old nav-links (replaced by tabs) ── */
.nav-links { display: none !important; }

/* ── Make tab-bar-inner a max-width container ── */
.tab-bar .container {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 1.5rem;
}

/* ── Responsive: tab bar scrolls on mobile ── */
@media (max-width: 640px) {
  .tab-btn {
    padding: 0 14px;
    font-size: 0.8rem;
  }
  .tab-bar {
    top: 56px;
  }
}

/* ── Mobile tab bar: fade hint + active highlight ── */
@media (max-width: 768px) {
  /* Wrapper so we can overlay the fade */
  .tab-bar {
    position: relative !important;
  }
  /* Right-edge fade gradient — signals more tabs exist */
  .tab-bar::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48px;
    background: linear-gradient(to right, transparent, #ffffff);
    pointer-events: none;
    z-index: 2;
  }
  /* Active tab gets a solid blue pill background so it's unmissable */
  .tab-btn.active {
    background: #1a73e8 !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    padding: 0 16px !important;
    margin: 6px 4px !important;
    height: 36px !important;
    font-weight: 600 !important;
  }
  /* Hide the underline bar on mobile — pill replaces it */
  .tab-btn.active::after {
    display: none !important;
  }
  .tab-btn {
    padding: 0 14px !important;
    height: 48px !important;
    font-size: 0.82rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   POLISH SPRINT — Modern, Elevated, Production-Grade
   Scroll reveals · Stats fix · Ghost CTA · Hover · Typography · Micro-UX
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. SCROLL-REVEAL ── */
/* All content always visible — reveal is a live-user enhancement only */
.reveal { opacity: 1; }
/* Live user scroll enhancement — JS adds classes */
.reveal.not-revealed { opacity: 0; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.revealed { opacity: 1 !important; }
.reveal-delay-1.revealed { transition-delay: 60ms; }
.reveal-delay-2.revealed { transition-delay: 120ms; }
.reveal-delay-3.revealed { transition-delay: 180ms; }
.reveal-delay-4.revealed { transition-delay: 240ms; }

/* ── 2. HERO ENTRANCE ANIMATION ── */
.hero-badge-animate { 
  opacity: 0;
  animation: heroSlideIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.hero-heading-animate {
  opacity: 0;
  animation: heroSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
.hero-sub-animate {
  opacity: 0;
  animation: heroSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
.hero-cta-animate {
  opacity: 0;
  animation: heroSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}
.hero-stats-animate {
  opacity: 0;
  animation: heroSlideIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}

@keyframes heroSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 3. HERO STATS — 4-column even grid (fixes orphan) ── */
.hero-stats {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  flex-wrap: unset !important;
  padding-top: 2rem !important;
  border-top: 1px solid rgba(26, 115, 232, 0.2) !important;
  max-width: 640px;
}
.stat-divider {
  display: none !important; /* grid handles spacing */
}
.stat-item {
  padding: 0 1.25rem;
  border-right: 1px solid rgba(26, 115, 232, 0.15);
}
.stat-item:first-child { padding-left: 0; }
.stat-item:last-child  { border-right: none; }

.stat-number {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  font-weight: 800 !important;
  color: #1a73e8 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}
.stat-label {
  font-size: 0.7rem !important;
  color: #5f6368 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin-top: 2px;
}

@media (max-width: 640px) {
  .hero-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem 0 !important;
    max-width: 100%;
  }
  .stat-item {
    padding: 0 0.75rem;
  }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-right: 1px solid rgba(26, 115, 232, 0.15); }
}

/* ── 4. GHOST CTA — "See How We Engage" — visible on light bg ── */
.hero .btn-ghost,
#home .btn-ghost,
.hero a.btn-ghost {
  background: transparent !important;
  color: #1a73e8 !important;
  border: 1.5px solid rgba(26, 115, 232, 0.4) !important;
  border-radius: 24px !important;
  font-weight: 500 !important;
  backdrop-filter: none !important;
  transition: background 180ms cubic-bezier(0.16,1,0.3,1),
              border-color 180ms cubic-bezier(0.16,1,0.3,1),
              transform 180ms cubic-bezier(0.16,1,0.3,1);
}
.hero .btn-ghost:hover,
#home .btn-ghost:hover {
  background: rgba(26, 115, 232, 0.08) !important;
  border-color: #1a73e8 !important;
  transform: translateY(-1px);
}
.hero .btn-ghost:active { transform: translateY(0) !important; }

/* ── 5. LOGO STRIP MARQUEE — fix clipping ── */
/* marquee: uses existing base CSS marquee keyframes */

/* ── 6. CARD HOVER MICRO-INTERACTIONS ── */
/* Clickable cards: lift + shadow */
.card, .service-card, .pain-card, .eco-card,
.engage-tier, .approach-card, .proof-card,
.region-block, .team-card, .funnel-step,
.mag-stat-cell, .secondary-stat-cell,
.values-card, .social-card {
  transition: box-shadow 180ms cubic-bezier(0.16,1,0.3,1),
              transform 180ms cubic-bezier(0.16,1,0.3,1),
              border-color 180ms cubic-bezier(0.16,1,0.3,1) !important;
}
.card:hover, .service-card:hover, .pain-card:hover,
.eco-card:hover, .engage-tier:hover, .approach-card:hover,
.proof-card:hover, .region-block:hover, .team-card:hover,
.mag-stat-cell:hover, .secondary-stat-cell:hover,
.values-card:hover, .social-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(26, 115, 232, 0.12) !important;
  border-color: rgba(26, 115, 232, 0.25) !important;
}
.card:active, .service-card:active, .pain-card:active,
.engage-tier:active, .eco-card:active {
  transform: translateY(-1px);
}

/* ── 7. BUTTON PRESS MICRO-INTERACTION ── */
.btn {
  transition: background 180ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 180ms cubic-bezier(0.16,1,0.3,1),
              transform 180ms cubic-bezier(0.16,1,0.3,1),
              border-color 180ms cubic-bezier(0.16,1,0.3,1) !important;
}
.btn:hover:not(.btn-ghost) { transform: translateY(-1px); }
.btn:active:not(.btn-ghost) { transform: translateY(0); }
/* Primary button hover glow */
.btn-primary:hover, .hero .btn-primary:hover {
  box-shadow: 0 4px 20px rgba(26, 115, 232, 0.35) !important;
}

/* ── 8. TYPOGRAPHY POLISH ── */
h1, h2, h3, .hero-heading, .section-title, .panel-title {
  letter-spacing: -0.025em;
  font-feature-settings: "kern" 1, "liga" 1;
}
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); }

/* Section tag pill — tighter, more refined */
.section-tag {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.3rem 0.85rem !important;
  border-radius: 100px !important;
}

/* ── 9. IMPROVED SECTION SPACING ── */
/* Reduce excessive gap in Reach & Results after stats */
#panel-results .mag-stats + * { margin-top: 0 !important; }
#panel-results .secondary-stats { margin-bottom: 2rem !important; }
#panel-results section, #panel-results .section-block { padding-block: 3.5rem !important; }
.mag-stats-wrapper { padding-bottom: 2rem !important; }

/* About & Contact — tighten values section padding */
#panel-contact .values-section, #panel-contact .social-impact-section {
  padding-block: 3rem !important;
}

/* ── 10. LINK HOVER ── */
a:not(.btn):not(.tab-btn):not(.nav-link):not([class*="nav-"]) {
  transition: color 150ms ease;
}

/* ── 11. FORM MICRO-INTERACTIONS ── */
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15) !important;
  transform: none;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
.contact-form .btn-primary:hover {
  box-shadow: 0 4px 20px rgba(26, 115, 232, 0.3) !important;
}

/* ── 12. TAB BAR POLISH — fade right edge on mobile ── */
@media (max-width: 640px) {
  .tab-bar-inner {
    position: relative;
  }
  .tab-bar {
    -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%);
    mask-image: linear-gradient(to right, black 70%, transparent 100%);
  }
}

/* ── 13. STAT COUNT-UP TARGET CLASSES ── */
.count-stat { display: inline-block; }

/* ── 14. NAV — refined drop shadow ── */
.site-header {
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.04) !important;
}

/* ── 15. TAB BAR — active tab pill animate ── */
.tab-btn {
  transition: color 180ms cubic-bezier(0.16,1,0.3,1),
              background 180ms cubic-bezier(0.16,1,0.3,1) !important;
}
.tab-btn::after {
  transition: transform 200ms cubic-bezier(0.16,1,0.3,1) !important;
  transform-origin: left center;
}
.tab-btn:not([aria-selected="true"])::after {
  transform: scaleX(0);
}
.tab-btn[aria-selected="true"]::after {
  transform: scaleX(1);
}

/* ── 16. FUNNEL STAT STRIP — more visual impact ── */
.funnel-stat-strip {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%) !important;
  border: 1px solid #c5d8fd !important;
  border-radius: 16px !important;
  padding: 2rem !important;
}
.funnel-stat-num {
  color: #1a73e8 !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}
.funnel-stat-label { color: #5f6368 !important; }

/* ── 17. APPROACH FRAMEWORK — numbered pillars ── */
.approach-pillar, .framework-pillar, .methodology-step {
  border-left: 3px solid transparent !important;
  transition: border-color 180ms ease, background 180ms ease !important;
}
.approach-pillar:hover, .framework-pillar:hover {
  border-left-color: #1a73e8 !important;
  background: rgba(26, 115, 232, 0.04) !important;
}

/* ── 18. TESTIMONIAL — elevated look ── */
.testimonial, .testimonial-card {
  background: linear-gradient(135deg, #f0f4ff, #e8f0fe) !important;
  border: 1px solid #c5d8fd !important;
  border-radius: 16px !important;
}

/* ── 19. HERO BG image subtle parallax feel ── */
.hero-bg-image {
  transform-origin: center center;
}

/* ── 20. GLOBAL TRANSITIONS — link + focus ring ── */
*:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── 21. SECTION DIVIDERS — subtle, not harsh ── */
section + section,
.tab-panel > div + div { 
  /* sections flow naturally — no heavy borders */
}

/* ── 22. FOOTER LOGO text contrast ── */
.footer-brand p, footer .footer-brand p {
  color: #5f6368 !important;
}
footer h5, .footer-col h5 {
  color: #202124 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  margin-bottom: 0.75rem !important;
}

/* ── 23. HERO — ensure hero section is tall and centered ── */
#panel-overview .hero {
  min-height: calc(100vh - 110px);
}

/* ── 24. REDUCE-MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-badge-animate, .hero-heading-animate,
  .hero-sub-animate, .hero-cta-animate, .hero-stats-animate,
  .marquee-track, .logos-track {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ── SPACING REFINEMENT ── tighter sections for polished vertical rhythm ── */
.section {
  padding-block: clamp(3rem, 6vw, 5rem) !important;
}

/* Results section — remove double-gap between experts and stats */
#panel-results .section + .section {
  padding-top: 2.5rem !important;
}

/* Experts section bottom */
.experts-section, section#experts {
  padding-bottom: 2.5rem !important;
}


/* ── RESULTS TAB GAP FIX ── */
/* Tighten team->results and network->team transitions */
#panel-results section.team { padding-bottom: 2rem !important; }
#panel-results section.results { padding-top: 2.5rem !important; }
#panel-results section.network { padding-bottom: 2rem !important; }
section.team.section { padding-block: 3rem !important; }
section.results.section { padding-top: 3rem !important; }


/* ── TESTIMONIAL BLOCK — fix for light background ── */
.testimonial-block {
  background: linear-gradient(135deg, #f0f4ff, #e8f0fe) !important;
  border: 1px solid #c5d8fd !important;
  border-left: 4px solid #1a73e8 !important;
}
.testimonial-quote p {
  color: #3c4043 !important;
}
.testimonial-attr strong {
  color: #202124 !important;
}
.testimonial-attr span {
  color: #5f6368 !important;
}
.testimonial-attr {
  border-top: 1px solid #e8eaed !important;
}
.testimonial-author-dot {
  background: linear-gradient(135deg, #1a73e8, #6ea8fe) !important;
}


/* ── DIRECT RESULTS GAP FIX ── */
section#experts.section,
.team.section {
  padding-block: 2.5rem 2rem !important;
}
section#results.section {
  padding-top: 2.5rem !important;
}
.experts-cta {
  margin-top: 2rem !important;
}


/* ═══════════════════════════════════════════════════════════════════
   WHY OPTIMUS — Two-column proof section
   ═══════════════════════════════════════════════════════════════════ */

.why-optimus {
  background: #ffffff;
}

.why-optimus-inner {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 4rem;
  align-items: start;
}

/* Left column */
.why-left .section-tag {
  margin-bottom: 1rem;
  display: inline-flex;
}

.why-heading {
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: #202124;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}
.why-heading em {
  font-style: normal;
  color: #1a73e8;
}

.why-lead {
  font-size: 1.05rem;
  color: #3c4043;
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 56ch;
}

.why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.why-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.why-check {
  flex-shrink: 0;
  margin-top: 2px;
}

.why-list li strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #202124;
  margin-bottom: 0.3rem;
}
.why-list li span {
  display: block;
  font-size: 0.875rem;
  color: #5f6368;
  line-height: 1.6;
}

/* Right column — proof grid */
.why-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.why-proof-card {
  background: #f8f9fa;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  padding: 1.1rem 1rem;
  transition: box-shadow 180ms cubic-bezier(0.16,1,0.3,1),
              transform 180ms cubic-bezier(0.16,1,0.3,1),
              border-color 180ms ease;
}
.why-proof-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(26,115,232,0.1);
  border-color: rgba(26,115,232,0.25);
}

/* Featured card spans full width */
.why-proof-card--feature {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #f0f4ff, #e8f0fe);
  border-color: #c5d8fd;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
}
.why-proof-card--feature .why-proof-icon { flex-shrink: 0; }
.why-proof-card--feature .why-proof-value {
  font-size: 1.5rem !important;
  margin: 0 !important;
}
.why-proof-card--feature .why-proof-label {
  margin-bottom: 0.1rem;
}
.why-proof-card--feature .why-proof-desc {
  margin: 0;
}

.why-proof-icon {
  color: #1a73e8;
  margin-bottom: 0.6rem;
}
.why-proof-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #5f6368;
  margin-bottom: 0.2rem;
}
.why-proof-value {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1a73e8;
  letter-spacing: -0.02em;
  margin-bottom: 0.2rem;
}
.why-proof-desc {
  font-size: 0.75rem;
  color: #5f6368;
  line-height: 1.45;
}

@media (max-width: 960px) {
  .why-optimus-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .why-right {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 540px) {
  .why-right { grid-template-columns: 1fr; }
  .why-proof-card--feature { flex-direction: column; gap: 0.75rem; }
}


/* ═══════════════════════════════════════════════════════════════════
   SERVICES ICON GRID — 3×2 capability cards
   ═══════════════════════════════════════════════════════════════════ */

.svc-grid-section {
  background: #f8f9fa;
}

.svc-icon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.svc-icon-card {
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow 180ms cubic-bezier(0.16,1,0.3,1),
              transform 180ms cubic-bezier(0.16,1,0.3,1),
              border-color 180ms ease;
  position: relative;
  overflow: hidden;
}
.svc-icon-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #1a73e8;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms cubic-bezier(0.16,1,0.3,1);
}
.svc-icon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(26,115,232,0.12);
  border-color: rgba(26,115,232,0.2);
}
.svc-icon-card:hover::before {
  transform: scaleX(1);
}

.svc-icon-wrap {
  width: 56px;
  height: 56px;
  background: #e8f0fe;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a73e8;
  margin-bottom: 1.1rem;
  transition: background 180ms ease;
}
.svc-icon-card:hover .svc-icon-wrap {
  background: #1a73e8;
  color: #ffffff;
}

.svc-icon-title {
  font-size: 1rem;
  font-weight: 700;
  color: #202124;
  line-height: 1.3;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

.svc-icon-desc {
  font-size: 0.845rem;
  color: #5f6368;
  line-height: 1.65;
  margin-bottom: 1.1rem;
  flex: 1;
}

.svc-icon-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: auto;
}
.svc-icon-tags span {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #1a73e8;
  background: #e8f0fe;
  border: 1px solid #c5d8fd;
  border-radius: 100px;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .svc-icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .svc-icon-grid {
    grid-template-columns: 1fr;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   FOOTER — Optimized with tagline band + 4-column grid
   ═══════════════════════════════════════════════════════════════════ */

/* Kill old footer styles that might conflict */
footer *, .footer * { color: inherit !important; }
footer a:hover, .footer a:hover { color: #1a73e8 !important; }

/* ── Tagline band ── */
.footer-tagline-band {
  background: linear-gradient(135deg, #1a1f36 0%, #0f1728 100%) !important;
  padding: 3.5rem 0 !important;
  border-top: 1px solid rgba(26,115,232,0.3) !important;
}

.footer-tagline-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 3rem !important;
}

.footer-tagline-eyebrow {
  display: block !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #6ea8fe !important;
  margin-bottom: 0.6rem !important;
}

.footer-tagline-headline {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
  line-height: 1.2 !important;
  margin: 0 0 0.75rem !important;
}
.footer-tagline-headline em {
  font-style: normal !important;
  color: #6ea8fe !important;
}

.footer-tagline-sub {
  font-size: 0.9rem !important;
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.65 !important;
  max-width: 52ch !important;
  margin: 0 !important;
}

.footer-cta-btn {
  background: #1a73e8 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 24px !important;
  padding: 0.875rem 1.75rem !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease !important;
}
.footer-cta-btn:hover {
  background: #1558b0 !important;
  box-shadow: 0 4px 20px rgba(26,115,232,0.4) !important;
  transform: translateY(-1px) !important;
}

/* ── Footer main ── */
.footer-main {
  background: #f8f9fa !important;
  border-top: 1px solid #e8eaed !important;
  padding: 3rem 0 2rem !important;
}

.footer-inner {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr 1.3fr !important;
  gap: 2.5rem !important;
  align-items: start !important;
}

/* Brand col */
.footer-brand { }

.footer-logo-link {
  display: inline-block !important;
  margin-bottom: 0.85rem !important;
}

.footer-brand-desc {
  font-size: 0.82rem !important;
  color: #5f6368 !important;
  line-height: 1.6 !important;
  margin-bottom: 1rem !important;
  max-width: 28ch !important;
}

.footer-brand-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.3rem !important;
}
.footer-brand-badges span {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #1a73e8 !important;
  background: #e8f0fe !important;
  border: 1px solid #c5d8fd !important;
  border-radius: 100px !important;
  padding: 0.15rem 0.55rem !important;
}

/* Nav cols */
.footer-col h5 {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #202124 !important;
  margin-bottom: 0.85rem !important;
}

.footer-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.55rem !important;
}

.footer-col ul a {
  font-size: 0.855rem !important;
  color: #5f6368 !important;
  text-decoration: none !important;
  transition: color 150ms ease !important;
}
.footer-col ul a:hover { color: #1a73e8 !important; }

/* Contact col — horizontal chip layout */
.fci-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.45rem !important;
  margin-bottom: 0.9rem !important;
}

.fci-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: #e8f0fe !important;
  border: 1px solid #c5d8fd !important;
  border-radius: 20px !important;
  padding: 0.3rem 0.65rem !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: #202124 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 150ms ease, color 150ms ease !important;
  line-height: 1.3 !important;
}

.fci-chip svg {
  color: #1a73e8 !important;
  flex-shrink: 0 !important;
}

a.fci-chip:hover {
  background: #1a73e8 !important;
  color: #fff !important;
  border-color: #1a73e8 !important;
}

a.fci-chip:hover svg {
  color: #fff !important;
}

.fci-chip--address {
  white-space: normal !important;
  line-height: 1.45 !important;
}

.footer-book-link {
  display: inline-block !important;
  margin-top: 1.1rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #1a73e8 !important;
  text-decoration: none !important;
  transition: gap 150ms ease, color 150ms ease !important;
}
.footer-book-link:hover { color: #1558b0 !important; }

/* ── Footer bottom bar ── */
/* Cycling Google-color footer bottom bar */
@keyframes footerColorCycle {
  0%   { background: #1a73e8; } /* Google Blue   */
  25%  { background: #ea4335; } /* Google Red    */
  50%  { background: #e6a800; } /* Rich Gold (readable on white text) */
  75%  { background: #34a853; } /* Google Green  */
  100% { background: #1a73e8; } /* Loop back     */
}

.footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-block: 1rem !important;
  border-top: none !important;
  animation: footerColorCycle 12s ease-in-out infinite !important;
  background: #1a73e8 !important; /* initial frame before animation kicks in */
}

.footer-bottom p {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.9) !important;
  margin: 0 !important;
  font-weight: 500 !important;
}

.footer-bottom-right {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem !important;
}

.footer-legal-links {
  display: flex !important;
  gap: 1.25rem !important;
}
.footer-legal-links a {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.85) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 150ms ease !important;
}
.footer-legal-links a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}
.footer-linkedin {
  color: rgba(255,255,255,0.85) !important;
  transition: color 150ms ease, transform 150ms ease !important;
}
.footer-linkedin:hover {
  color: #ffffff !important;
  transform: scale(1.15) !important;
}
/* footer-linkedin color now set in the block above */

/* ── Responsive ── */
@media (max-width: 960px) {
  .footer-tagline-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }
  .footer-inner {
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
  }
  .footer-brand { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: 1fr !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   SERVICES TAB — McKinsey-Grade Redesign
   ═══════════════════════════════════════════════════════════════════ */

/* ── Services Tab Hero ── */
.svc-tab-hero {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 50%, #fce8ff 100%) !important;
  padding: 5rem 0 4rem !important;
  border-bottom: 1px solid #e8eaed !important;
}
.svc-tab-hero-inner {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 4rem !important;
  align-items: center !important;
}
@media (max-width: 900px) {
  .svc-tab-hero-inner { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
}
.svc-tab-hero-left .section-tag { margin-bottom: 1rem !important; display: inline-block !important; }
.svc-tab-hero-title {
  font-family: 'Cabinet Grotesk', 'Satoshi', sans-serif !important;
  font-size: clamp(2.2rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  color: #202124 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 1.25rem !important;
}
.svc-tab-hero-title em {
  font-style: italic !important;
  color: #1a73e8 !important;
}
.svc-tab-hero-lead {
  font-size: 1.08rem !important;
  color: #3c4043 !important;
  line-height: 1.7 !important;
  max-width: 520px !important;
  margin-bottom: 2rem !important;
}
.svc-tab-hero-actions {
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.btn-ghost {
  background: transparent !important;
  color: #1a73e8 !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  padding: 0.75rem 0 !important;
  text-decoration: none !important;
  transition: color 150ms ease !important;
}
.btn-ghost:hover { color: #1558b0 !important; }
.svc-hero-stat-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1px !important;
  background: #e8eaed !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(26,115,232,0.08) !important;
}
.svc-hero-stat {
  background: #ffffff !important;
  padding: 1.5rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
}
.svc-hero-stat-val {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #1a73e8 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}
.svc-hero-stat-label {
  font-size: 0.78rem !important;
  color: #5f6368 !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

/* ── Capabilities Grid ── */
.svc-capabilities {
  background: #ffffff !important;
  padding: 5rem 0 !important;
}
.svc-cap-header {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 3rem !important;
  align-items: end !important;
  margin-bottom: 3.5rem !important;
  padding-bottom: 2.5rem !important;
  border-bottom: 1px solid #e8eaed !important;
}
@media (max-width: 768px) {
  .svc-cap-header { grid-template-columns: 1fr !important; gap: 1rem !important; }
}
.svc-cap-header-desc {
  font-size: 1rem !important;
  color: #5f6368 !important;
  line-height: 1.7 !important;
  max-width: 440px !important;
  margin: 0 !important;
}
.svc-cap-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5px !important;
  background: #e8eaed !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 20px rgba(32,33,36,0.06) !important;
}
@media (max-width: 1100px) {
  .svc-cap-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .svc-cap-grid { grid-template-columns: 1fr !important; border-radius: 12px !important; }
}
.svc-cap-card {
  background: #ffffff !important;
  padding: 2.25rem 2rem 2rem !important;
  position: relative !important;
  transition: background 200ms ease !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.svc-cap-card:hover {
  background: #f8f9ff !important;
}
.svc-cap-card::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: #1a73e8 !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 250ms ease !important;
}
.svc-cap-card:hover::after {
  transform: scaleX(1) !important;
}
.svc-cap-card-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 1.25rem !important;
}
.svc-cap-num {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #9aa0a6 !important;
  letter-spacing: 0.12em !important;
  padding-top: 2px !important;
}
.svc-cap-icon {
  width: 48px !important;
  height: 48px !important;
  background: #e8f0fe !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #1a73e8 !important;
  transition: background 200ms ease, color 200ms ease !important;
  flex-shrink: 0 !important;
}
.svc-cap-card:hover .svc-cap-icon {
  background: #1a73e8 !important;
  color: #ffffff !important;
}
.svc-cap-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  line-height: 1.35 !important;
  margin-bottom: 0.75rem !important;
  letter-spacing: -0.01em !important;
}
.svc-cap-body {
  font-size: 0.875rem !important;
  color: #5f6368 !important;
  line-height: 1.65 !important;
  margin-bottom: 1.25rem !important;
  flex: 1 !important;
}
.svc-cap-outcomes {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.35rem !important;
  align-items: center !important;
  margin-bottom: 1rem !important;
}
.svc-cap-outcome-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  width: 100% !important;
  margin-bottom: 0.15rem !important;
}
.svc-cap-outcomes span:not(.svc-cap-outcome-label) {
  font-size: 0.78rem !important;
  color: #1a73e8 !important;
  background: #e8f0fe !important;
  padding: 0.25rem 0.6rem !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
}
.svc-cap-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  margin-top: auto !important;
  padding-top: 1rem !important;
  border-top: 1px solid #f1f3f4 !important;
}
.svc-cap-tags span {
  font-size: 0.72rem !important;
  color: #5f6368 !important;
  background: #f8f9fa !important;
  border: 1px solid #e8eaed !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
}

/* ── Strategic Insight Strip ── */
.svc-insight-strip {
  background: #f0f4ff !important;
  border-top: 1px solid #c5d8fd !important;
  border-bottom: 1px solid #c5d8fd !important;
  padding: 2.25rem 0 !important;
}
.svc-insight-inner {
  display: flex !important;
  align-items: center !important;
  gap: 2rem !important;
}
@media (max-width: 768px) {
  .svc-insight-inner { flex-direction: column !important; align-items: flex-start !important; }
}
.svc-insight-icon {
  flex-shrink: 0 !important;
  opacity: 0.9 !important;
}
.svc-insight-text { flex: 1 !important; }
.svc-insight-headline {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  margin: 0 0 0.35rem !important;
  line-height: 1.4 !important;
}
.svc-insight-headline strong { color: #1a73e8 !important; }
.svc-insight-sub {
  font-size: 0.875rem !important;
  color: #5f6368 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}
.svc-insight-cta {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* ── Engagement Model ── */
.svc-engage {
  background: #f8f9fa !important;
}
.svc-engage-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem !important;
  margin-top: 3rem !important;
}
@media (max-width: 900px) {
  .svc-engage-grid { grid-template-columns: 1fr !important; }
}
.svc-engage-card {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 16px !important;
  padding: 2.25rem 2rem !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  transition: box-shadow 200ms ease, transform 200ms ease !important;
  overflow: hidden !important;
}
.svc-engage-card:hover {
  box-shadow: 0 8px 32px rgba(26,115,232,0.12) !important;
  transform: translateY(-3px) !important;
}
.svc-engage-card--featured {
  border-color: #1a73e8 !important;
  border-width: 2px !important;
  background: #ffffff !important;
}
.svc-engage-card--featured::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, #1a73e8, #4a9cf7) !important;
}
.svc-engage-featured-badge {
  position: absolute !important;
  top: 1.25rem !important;
  right: 1.25rem !important;
  background: #e8f0fe !important;
  color: #1a73e8 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 0.3rem 0.75rem !important;
  border-radius: 20px !important;
}
.svc-engage-header {
  display: flex !important;
  align-items: flex-start !important;
  gap: 1rem !important;
  margin-bottom: 1.25rem !important;
}
.svc-engage-num-wrap {
  width: 44px !important;
  height: 44px !important;
  background: #e8f0fe !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.svc-engage-card--featured .svc-engage-num-wrap {
  background: #1a73e8 !important;
}
.svc-engage-num {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  color: #1a73e8 !important;
  letter-spacing: 0.04em !important;
}
.svc-engage-card--featured .svc-engage-num {
  color: #ffffff !important;
}
.svc-engage-meta {
  padding-top: 2px !important;
}
.svc-engage-type {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #1a73e8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 0.3rem !important;
}
.svc-engage-name {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em !important;
  margin: 0 !important;
}
.svc-engage-desc {
  font-size: 0.88rem !important;
  color: #5f6368 !important;
  line-height: 1.65 !important;
  margin-bottom: 1.25rem !important;
}
.svc-engage-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}
.svc-engage-list li {
  font-size: 0.85rem !important;
  color: #3c4043 !important;
  padding-left: 1.3rem !important;
  position: relative !important;
  line-height: 1.5 !important;
}
.svc-engage-list li::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #1a73e8 !important;
  font-size: 0.8rem !important;
}
.svc-engage-list li strong { color: #202124 !important; }
.svc-engage-link {
  display: inline-block !important;
  margin-top: auto !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #1a73e8 !important;
  text-decoration: none !important;
  border-top: 1px solid #e8eaed !important;
  padding-top: 1.25rem !important;
  transition: color 150ms ease, gap 150ms ease !important;
}
.svc-engage-link:hover { color: #1558b0 !important; }
.svc-engage-link--featured {
  color: #1a73e8 !important;
  font-weight: 700 !important;
}

/* ── Performance Framework ── */
.svc-framework {
  background: #ffffff !important;
  border-top: 1px solid #e8eaed !important;
}
.svc-framework-intro {
  display: grid !important;
  grid-template-columns: 360px 1fr !important;
  gap: 4rem !important;
  align-items: start !important;
}
@media (max-width: 900px) {
  .svc-framework-intro { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
}
.svc-framework-proof {
  display: flex !important;
  gap: 2rem !important;
  margin-top: 2rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid #e8eaed !important;
}
.svc-fw-proof-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.2rem !important;
}
.svc-fw-proof-val {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #1a73e8 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}
.svc-fw-proof-label {
  font-size: 0.78rem !important;
  color: #5f6368 !important;
  line-height: 1.4 !important;
}
.svc-framework-pillars {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
.svc-fw-pillar {
  padding: 1.5rem 0 !important;
  border-bottom: 1px solid #f1f3f4 !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 1.5rem !important;
  align-items: start !important;
  transition: background 150ms ease !important;
}
.svc-fw-pillar:first-child { padding-top: 0 !important; }
.svc-fw-pillar:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.svc-fw-pillar-head {
  display: contents !important;
}
.svc-fw-pillar-num {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #1a73e8 !important;
  letter-spacing: 0.1em !important;
  background: #e8f0fe !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.svc-fw-pillar-content {
  grid-column: 2 !important;
}
.svc-fw-pillar-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  margin: 0 0 0.4rem !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}
.svc-fw-pillar-body {
  font-size: 0.855rem !important;
  color: #5f6368 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Fix pillar layout — title & body need to be in column 2 */
.svc-fw-pillar {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  gap: 1.25rem !important;
  align-items: start !important;
}
.svc-fw-pillar-num { grid-column: 1 !important; }
.svc-fw-pillar-title { grid-column: 2 !important; }
.svc-fw-pillar-body { grid-column: 2 !important; margin-top: -0.25rem !important; }

/* ── Force override: remove old dark services--dark styles from engage tiers ── */
.svc-engage .section-tag { color: #1a73e8 !important; background: #e8f0fe !important; border-color: #c5d8fd !important; }
.svc-engage .section-title { color: #202124 !important; }
.svc-engage .section-desc { color: #5f6368 !important; }

/* ── Framework pillar layout fix ── */
.svc-fw-pillar {
  display: grid !important;
  grid-template-columns: 44px 1fr !important;
  gap: 1.25rem !important;
  align-items: start !important;
  padding: 1.5rem 0 !important;
  border-bottom: 1px solid #f1f3f4 !important;
}
.svc-fw-pillar:first-child { padding-top: 0 !important; }
.svc-fw-pillar:last-child { border-bottom: none !important; padding-bottom: 0 !important; }
.svc-fw-pillar > .svc-fw-pillar-num {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #1a73e8 !important;
  background: #e8f0fe !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.05em !important;
  margin-top: 2px !important;
}
.svc-fw-pillar-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.svc-fw-pillar-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  margin: 0 0 0.4rem !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}
.svc-fw-pillar-body {
  font-size: 0.855rem !important;
  color: #5f6368 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ── Shelf-Life Section Layout Fix ── */
.shelf-split {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: start !important;
}
@media (max-width: 900px) {
  .shelf-split { grid-template-columns: 1fr !important; gap: 2.5rem !important; }
}
.shelf-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}
.shelf-tag-row { margin-bottom: 0.5rem !important; }
.shelf-big-number {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: 5rem !important;
  font-weight: 800 !important;
  color: #1a73e8 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
}
.shelf-months {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: #5f6368 !important;
  margin-left: 0.15em !important;
}
.shelf-headline {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.shelf-sub {
  font-size: 0.9rem !important;
  color: #5f6368 !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}
.shelf-compare {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
  margin-bottom: 1.25rem !important;
}
.shelf-card {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.5rem !important;
}
.shelf-card--problem { border-top: 3px solid #d93025 !important; }
.shelf-card--solution { border-top: 3px solid #1e8e3e !important; }
.shelf-card-label {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  margin-bottom: 0.75rem !important;
}
.shelf-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.4rem !important;
}
.shelf-list li {
  font-size: 0.84rem !important;
  color: #3c4043 !important;
  padding-left: 1.25rem !important;
  position: relative !important;
  line-height: 1.5 !important;
}
.shelf-list li::before {
  content: '•' !important;
  position: absolute !important;
  left: 0 !important;
  font-weight: 700 !important;
}
.shelf-list--bad li::before { color: #d93025 !important; }
.shelf-list--good li::before { color: #1e8e3e !important; }
.shelf-8020 {
  display: flex !important;
  gap: 1rem !important;
  align-items: flex-start !important;
  background: #e8f0fe !important;
  border-radius: 12px !important;
  padding: 1rem 1.25rem !important;
}
.shelf-8020-icon { flex-shrink: 0 !important; margin-top: 2px !important; }
.shelf-8020 strong { font-size: 0.9rem !important; color: #202124 !important; display: block !important; margin-bottom: 0.25rem !important; }
.shelf-8020 span { font-size: 0.82rem !important; color: #5f6368 !important; line-height: 1.6 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   $2500/HR FULL SITE UPGRADE — April 2026
   McKinsey × Gartner × Wolff Olins Design Standards
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. HEADER — Clean, minimal, surgical ── */
.site-header {
  background: rgba(255,255,255,0.97) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(232,234,237,0.8) !important;
  box-shadow: 0 1px 0 rgba(32,33,36,0.06) !important;
}
.nav-inner {
  height: 76px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.logo-img {
  height: 36px !important;
  width: auto !important;
  object-fit: contain !important;
}
/* Remove dark mode toggle — too casual for B2B */
.theme-toggle { display: none !important; }

/* CTA pill — refined */
.btn-sm {
  font-size: 0.82rem !important;
  padding: 0.5rem 1.25rem !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
}

/* Tab bar — clean rule-line style */
.tab-bar {
  background: #ffffff !important;
  border-bottom: 1px solid #e8eaed !important;
  top: 64px !important;
}
.tab-btn {
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #5f6368 !important;
  letter-spacing: 0.01em !important;
  padding: 0 0 14px !important;
  transition: color 150ms ease !important;
  text-transform: none !important;
}
.tab-btn:hover { color: #202124 !important; }
.tab-btn.active {
  color: #1a73e8 !important;
  font-weight: 600 !important;
}
.tab-btn.active::after {
  height: 2px !important;
  background: #1a73e8 !important;
  border-radius: 2px 2px 0 0 !important;
}

/* ── 2. HERO — Impactful, full-viewport, bold ── */
.hero {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  background: linear-gradient(145deg, #f0f4ff 0%, #e8f0fe 45%, #ede7f6 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Geometric accent shapes */
.hero::before {
  content: '' !important;
  position: absolute !important;
  top: -120px !important;
  right: -80px !important;
  width: 600px !important;
  height: 600px !important;
  background: radial-gradient(circle, rgba(26,115,232,0.08) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.hero::after {
  content: '' !important;
  position: absolute !important;
  bottom: -100px !important;
  left: -100px !important;
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle, rgba(103,58,183,0.05) 0%, transparent 70%) !important;
  pointer-events: none !important;
}
.hero-overlay { display: none !important; }
.hero-bg img { display: none !important; }
.hero-content {
  position: relative !important;
  z-index: 2 !important;
  padding: 6rem 0 5rem !important;
  max-width: 820px !important;
}
/* Hero badge — refined pill */
.hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: rgba(26,115,232,0.08) !important;
  border: 1px solid rgba(26,115,232,0.2) !important;
  color: #1a73e8 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 0.35rem 0.9rem !important;
  border-radius: 20px !important;
  margin-bottom: 2rem !important;
}
.badge-dot {
  width: 6px !important;
  height: 6px !important;
  background: #1a73e8 !important;
  border-radius: 50% !important;
  animation: pulse-dot 2s infinite !important;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
/* Hero accent line — remove (too decorative) */
.hero-accent-line { display: none !important; }

/* Hero heading — the most important text on the site */
.hero-heading {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: clamp(3rem, 6.5vw, 5.5rem) !important;
  font-weight: 800 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
  color: #0d1117 !important;
  margin-bottom: 1.5rem !important;
  max-width: 780px !important;
}
.hero-heading em {
  font-style: normal !important;
  background: linear-gradient(135deg, #1a73e8 0%, #6ea8fe 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
  color: #3c4043 !important;
  line-height: 1.7 !important;
  max-width: 580px !important;
  margin-bottom: 2.5rem !important;
  font-weight: 400 !important;
}
/* Hero CTAs */
.hero-ctas {
  display: flex !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  margin-bottom: 4rem !important;
}
.btn-lg {
  padding: 0.875rem 2rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  letter-spacing: 0.01em !important;
}
.btn.btn-primary {
  background: #1a73e8 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 1px 3px rgba(26,115,232,0.3), 0 4px 12px rgba(26,115,232,0.2) !important;
  transition: transform 160ms ease, box-shadow 160ms ease !important;
}
.btn.btn-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(26,115,232,0.4), 0 8px 24px rgba(26,115,232,0.25) !important;
}

/* Hero stats — elevated horizontal bar */
.hero-stats {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(232,234,237,0.9) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 24px rgba(32,33,36,0.06) !important;
  max-width: 680px !important;
}
.stat-item {
  flex: 1 !important;
  padding: 1.25rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.25rem !important;
  border-right: 1px solid #e8eaed !important;
}
.stat-item:last-child { border-right: none !important; }
.stat-number {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #1a73e8 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}
.stat-label {
  font-size: 0.72rem !important;
  color: #5f6368 !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}
.stat-divider { display: none !important; }
/* Hide scroll hint */
.hero-scroll-hint { display: none !important; }

/* ── 3. LOGO STRIP — Restrained, premium ── */
.logo-strip {
  background: #ffffff !important;
  border-top: 1px solid #e8eaed !important;
  border-bottom: 1px solid #e8eaed !important;
  padding: 1.75rem 0 !important;
}
.logo-strip-label {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #9aa0a6 !important;
  text-align: center !important;
  margin-bottom: 1.25rem !important;
}
.brand-logo {
  color: #b0b7c0 !important;
  transition: color 200ms ease !important;
  padding: 0 1.5rem !important;
}
.brand-logo:hover { color: #5f6368 !important; }
.brand-logo svg { font-weight: 700 !important; }

/* ── 4. PAIN CARDS — Editorial, not widget ── */
.pain { background: #ffffff !important; }
.pain-grid {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 1px !important;
  background: #e8eaed !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin-top: 3rem !important;
  box-shadow: 0 2px 16px rgba(32,33,36,0.05) !important;
}
@media (max-width: 900px) { .pain-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 540px) { .pain-grid { grid-template-columns: 1fr !important; } }
.pain-card {
  background: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 2.25rem 1.75rem !important;
  box-shadow: none !important;
  position: relative !important;
  transition: background 180ms ease !important;
}
.pain-card:hover { background: #f8f9ff !important; }
/* Replace colored top borders with a subtle left number treatment */
.pain-card::before {
  display: none !important;
}
.pain-card:nth-child(1)::after { content: '01'; }
.pain-card:nth-child(2)::after { content: '02'; }
.pain-card:nth-child(3)::after { content: '03'; }
.pain-card:nth-child(4)::after { content: '04'; }
.pain-card::after {
  position: absolute !important;
  top: 1.5rem !important;
  right: 1.5rem !important;
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: 0.65rem !important;
  font-weight: 800 !important;
  color: #e8eaed !important;
  letter-spacing: 0.08em !important;
}
.pain-icon {
  width: 44px !important;
  height: 44px !important;
  background: #e8f0fe !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.25rem !important;
}
.pain-card h4 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  line-height: 1.35 !important;
  margin-bottom: 0.65rem !important;
  letter-spacing: -0.01em !important;
}
.pain-card p {
  font-size: 0.855rem !important;
  color: #5f6368 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ── 5. SECTION HEADERS — Elevated ── */
.section-header {
  text-align: center !important;
  max-width: 680px !important;
  margin: 0 auto 3rem !important;
}
.section-tag {
  display: inline-block !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #1a73e8 !important;
  background: #e8f0fe !important;
  border: 1px solid rgba(26,115,232,0.2) !important;
  padding: 0.3rem 0.85rem !important;
  border-radius: 20px !important;
  margin-bottom: 1rem !important;
}
.section-title {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: clamp(1.8rem, 3.5vw, 2.75rem) !important;
  font-weight: 800 !important;
  color: #202124 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 1rem !important;
}
.section-title em {
  font-style: italic !important;
  color: #1a73e8 !important;
}
.section-desc {
  font-size: 1rem !important;
  color: #5f6368 !important;
  line-height: 1.7 !important;
  max-width: 560px !important;
  margin: 0 auto !important;
}

/* ── 6. WHY OPTIMUS — Elevated ── */
.why-optimus { background: #f8f9fa !important; }
.why-heading {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: clamp(1.6rem, 3vw, 2.4rem) !important;
  font-weight: 800 !important;
  color: #202124 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.18 !important;
  margin-bottom: 1.1rem !important;
}
.why-heading em { font-style: italic !important; color: #1a73e8 !important; }
.why-lead {
  font-size: 0.975rem !important;
  color: #5f6368 !important;
  line-height: 1.7 !important;
  margin-bottom: 2rem !important;
  max-width: 520px !important;
}
.why-list li strong { color: #202124 !important; display: block !important; margin-bottom: 0.2rem !important; font-size: 0.9rem !important; }
.why-list li span { color: #5f6368 !important; font-size: 0.84rem !important; line-height: 1.6 !important; }
.why-proof-card {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 12px !important;
  padding: 1.25rem 1.5rem !important;
  transition: box-shadow 180ms ease, transform 180ms ease !important;
}
.why-proof-card:hover {
  box-shadow: 0 6px 24px rgba(26,115,232,0.1) !important;
  transform: translateY(-2px) !important;
}
.why-proof-card--feature {
  background: linear-gradient(135deg, #1a73e8 0%, #1558b0 100%) !important;
  border-color: transparent !important;
  grid-column: 1 / -1 !important;
}
.why-proof-card--feature .why-proof-label,
.why-proof-card--feature .why-proof-desc { color: rgba(255,255,255,0.7) !important; }
.why-proof-card--feature .why-proof-value { color: #ffffff !important; }
.why-proof-card--feature .why-proof-icon svg { stroke: rgba(255,255,255,0.8) !important; }
.why-proof-label {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #9aa0a6 !important;
  margin-bottom: 0.2rem !important;
}
.why-proof-value {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #202124 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}
.why-proof-desc {
  font-size: 0.78rem !important;
  color: #5f6368 !important;
  line-height: 1.45 !important;
  margin-top: 0.25rem !important;
}

/* ── 7. CTA BANNERS — Elevated, not generic blue block ── */
/* Override all inline CTA banners */
.cta-banner-override,
section[style*="background:linear-gradient(135deg,#1a73e8"] {
  background: #0d1117 !important;
  position: relative !important;
  overflow: hidden !important;
}
section[style*="background:linear-gradient(135deg,#1a73e8"]::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(26,115,232,0.5), transparent) !important;
}
section[style*="background:linear-gradient(135deg,#1a73e8"] h2 {
  color: #ffffff !important;
}
section[style*="background:linear-gradient(135deg,#1a73e8"] p {
  color: rgba(255,255,255,0.7) !important;
}

/* ── 8. EXPERT CARDS — Clean grid ── */
.experts-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1.5rem !important;
}
@media (max-width: 1000px) { .experts-grid { grid-template-columns: repeat(2,1fr) !important; } }
@media (max-width: 540px) { .experts-grid { grid-template-columns: 1fr !important; } }
.expert-card {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 14px !important;
  padding: 1.75rem 1.5rem !important;
  box-shadow: none !important;
  transition: box-shadow 180ms ease, transform 180ms ease !important;
  color: #202124 !important;
}
.expert-card:hover {
  box-shadow: 0 6px 24px rgba(26,115,232,0.1) !important;
  transform: translateY(-2px) !important;
}
.expert-card h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  margin-bottom: 0.6rem !important;
  letter-spacing: -0.01em !important;
}
.expert-card p {
  font-size: 0.855rem !important;
  color: #5f6368 !important;
  line-height: 1.65 !important;
}
.expert-pedigree {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem !important;
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid #f1f3f4 !important;
}
.expert-pedigree span {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: #1a73e8 !important;
  background: #e8f0fe !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 20px !important;
}

/* ── 9. RESULTS SECTION — Fix emoji icons, elevate ── */
.network-regions {
  display: flex !important;
  gap: 2rem !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  margin-top: 2.5rem !important;
}
.region-item {
  background: #ffffff !important;
  border: 1.5px solid #e8eaed !important;
  border-radius: 14px !important;
  padding: 1.5rem 2rem !important;
  text-align: center !important;
  min-width: 200px !important;
  flex: 1 !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform 220ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 220ms cubic-bezier(0.16,1,0.3,1),
    border-color 220ms cubic-bezier(0.16,1,0.3,1),
    background 220ms cubic-bezier(0.16,1,0.3,1) !important;
}
.region-item:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 24px rgba(26,115,232,0.14), 0 2px 6px rgba(0,0,0,0.07) !important;
  border-color: rgba(66,133,244,0.4) !important;
  background: #fafbff !important;
}
/* Sliding color bar on left edge */
.region-item::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 4px !important;
  border-radius: 4px 0 0 4px !important;
  transform: scaleY(0) !important;
  transform-origin: bottom center !important;
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1) !important;
  z-index: 2 !important;
}
.region-item:hover::before { transform: scaleY(1) !important; }
.region-item:nth-child(1)::before { background: var(--gc-blue) !important; }
.region-item:nth-child(2)::before { background: var(--gc-red) !important; }
.region-item:nth-child(3)::before { background: var(--gc-green) !important; }
.region-item:nth-child(1):hover { border-color: rgba(66,133,244,0.35) !important; box-shadow: 0 8px 32px rgba(66,133,244,0.14) !important; background: rgba(66,133,244,0.03) !important; }
.region-item:nth-child(2):hover { border-color: rgba(234,67,53,0.3) !important; box-shadow: 0 8px 32px rgba(234,67,53,0.12) !important; background: rgba(234,67,53,0.03) !important; }
.region-item:nth-child(3):hover { border-color: rgba(52,168,83,0.35) !important; box-shadow: 0 8px 32px rgba(52,168,83,0.14) !important; background: rgba(52,168,83,0.03) !important; }
.region-icon { font-size: 2rem !important; display: block !important; margin-bottom: 0.75rem !important; }
.region-name { font-weight: 800 !important; color: #202124 !important; font-size: 1.1rem !important; margin-bottom: 0.25rem !important; }
.region-detail { font-size: 0.82rem !important; color: #5f6368 !important; margin-top: 0.25rem !important; line-height: 1.6 !important; }

/* ── 10. CONTACT/ABOUT TAB — Ensure visible ── */
#panel-contact {
  display: none !important;
}
#panel-contact.active {
  display: block !important;
}
.impact-card {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  color: #202124 !important;
  border-radius: 14px !important;
  padding: 1.75rem !important;
}
.impact-card h3, .impact-card p { color: #202124 !important; }
.impact-tag {
  display: inline-block !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: #1a73e8 !important;
  background: #e8f0fe !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 20px !important;
  margin-bottom: 0.85rem !important;
}

/* ── 11. TESTIMONIAL — Editorial quote style ── */
.testimonial-block {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-left: 4px solid #1a73e8 !important;
  border-radius: 0 12px 12px 0 !important;
  padding: 2rem 2.5rem !important;
  color: #202124 !important;
}
.testimonial-quote {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: #202124 !important;
  font-style: italic !important;
}
.testimonial-quote::before { content: '\201C'; font-size: 2em; color: #1a73e8; line-height: 0; vertical-align: -0.4em; margin-right: 0.1em; }

/* ── 12. CONTACT FORM — Polished ── */
.contact-form-wrap {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 32px rgba(32,33,36,0.06) !important;
  color: #202124 !important;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  background: #f8f9fa !important;
  border: 1px solid #e8eaed !important;
  border-radius: 8px !important;
  color: #202124 !important;
  font-size: 0.9rem !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12) !important;
  outline: none !important;
  background: #ffffff !important;
}
.contact-form label { color: #3c4043 !important; font-size: 0.85rem !important; font-weight: 600 !important; }

/* ── 13. GLOBAL SECTION SPACING — More air ── */
.section { padding: 5rem 0 !important; }
@media (max-width: 768px) { .section { padding: 3.5rem 0 !important; } }

/* ── 14. FOOTER — Final polish ── */
.footer-tagline-band {
  padding: 4.5rem 0 !important;
}
.footer-tagline-headline {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
}
.footer-tagline-headline em { color: #6ea8fe !important; font-style: italic !important; }

/* ── 15. RESULTS HIGHLIGHT PILLS — Elevated ── */
.highlight-pill {
  background: rgba(255,255,255,0.1) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: rgba(255,255,255,0.9) !important;
  border-radius: 24px !important;
  padding: 0.5rem 1.1rem !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  backdrop-filter: blur(6px) !important;
}

/* ── 16. RESULT CARDS ── */
.result-card {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 14px !important;
  color: #202124 !important;
  box-shadow: none !important;
  transition: box-shadow 180ms ease, transform 180ms ease !important;
}
.result-card:hover {
  box-shadow: 0 6px 24px rgba(26,115,232,0.1) !important;
  transform: translateY(-2px) !important;
}
.result-card h3, .result-card h4, .result-card p, .result-card li { color: #202124 !important; }
.result-card p, .result-card li { color: #5f6368 !important; }

/* ── 17. HOWWEWORK SECTION ── */
.howwework { background: #f8f9fa !important; }
.hww-callout {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-left: 3px solid #1a73e8 !important;
  border-radius: 0 10px 10px 0 !important;
  padding: 1.25rem 1.5rem !important;
  color: #202124 !important;
}
.hww-callout-stat {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #1a73e8 !important;
  letter-spacing: -0.04em !important;
}
.hww-callout strong { color: #202124 !important; }
.hww-callout span { color: #5f6368 !important; font-size: 0.85rem !important; }

/* ── 18. APPROACH SECTION ── */
.approach { background: #f0f4ff !important; }
.approach-card {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 24px rgba(26,115,232,0.08) !important;
}
.metric-value {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #1a73e8 !important;
  letter-spacing: -0.03em !important;
}
.metric-label { color: #5f6368 !important; font-size: 0.8rem !important; }

/* ── 19. FUNNEL SECTION ── */
.funnel-section { background: #f8f9fa !important; }
/* funnel-stage background is set per-modifier (--top/--mid/--bot) with Google colors */
.funnel-stage {
  border: none !important;
  color: #ffffff !important;
  border-radius: 12px !important;
}
.funnel-stage h3, .funnel-stage h4, .funnel-stage p { color: #ffffff !important; }

/* ── 20. GLOBAL LINK STYLE ── */
a.svc-engage-link, a.footer-book-link, a.svc-insight-cta {
  color: #1a73e8 !important;
}

/* ── PREMIUM CTA BAND — Dark, editorial, decisive ── */
.premium-cta-band {
  background: #f0f4ff !important;
  border-top: 1.5px solid #c5d8fd !important;
  border-bottom: 1.5px solid #c5d8fd !important;
  padding: 5rem 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
.premium-cta-band::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #4285F4 0%, #EA4335 33%, #FBBC05 66%, #34A853 100%) !important;
}
.premium-cta-band::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: -100px !important;
  width: 400px !important;
  height: 400px !important;
  background: radial-gradient(circle, rgba(26,115,232,0.06) 0%, transparent 70%) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}
.premium-cta-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4rem !important;
  align-items: center !important;
}
@media (max-width: 768px) {
  .premium-cta-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
}
.premium-cta-eyebrow {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #1a73e8 !important;
  margin-bottom: 1rem !important;
}
.premium-cta-heading {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
  font-weight: 800 !important;
  color: #202124 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.03em !important;
  margin: 0 !important;
}
.premium-cta-sub {
  font-size: 0.95rem !important;
  color: #3c4043 !important;
  line-height: 1.7 !important;
  margin-bottom: 1.75rem !important;
}
.premium-cta-right .btn.btn-primary {
  background: #1a73e8 !important;
  color: #ffffff !important;
}

/* ── Section dividers — subtle breathing room ── */
.section + .section {
  border-top: 1px solid #f1f3f4 !important;
}
.hero + .logo-strip {
  border-top: none !important;
}

/* ── Typography micro-polish ── */
strong { font-weight: 700 !important; }
p { -webkit-font-smoothing: antialiased !important; }

/* ── Funnel stats strip ── */
.funnel-stat-strip {
  background: #f8f9fa !important;
  border: 1px solid #e8eaed !important;
  border-radius: 14px !important;
  color: #202124 !important;
}
.funnel-stat-strip .mag-stat-num, .mag-stat-num {
  font-family: 'Cabinet Grotesk', sans-serif !important;
  color: #1a73e8 !important;
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}
.funnel-stat-strip .mag-stat-label, .mag-stat-label { color: #5f6368 !important; }

/* ── Override any remaining dark card backgrounds sitewide ── */
.result-stat, .win-item, .impact-card, .hww-block, .step, .approach-step {
  background: #ffffff !important;
  color: #202124 !important;
}
.result-stat h3, .win-item h3, .step h4, .approach-step h4 { color: #202124 !important; }
.result-stat p, .win-item p, .step p, .approach-step p { color: #5f6368 !important; }

/* ── Network/globe section — keep its dark bg but fix text ── */
.network { color: #ffffff !important; }
.network-title em { color: #6ea8fe !important; font-style: italic !important; }

/* ── Remove all remaining colored section-tag variations ── */
.section-tag { color: #1a73e8 !important; background: #e8f0fe !important; border-color: rgba(26,115,232,0.2) !important; }

/* ── Breadth of polish: subtle card hover sitewide ── */
.why-proof-card, .pain-card, .expert-card, .result-card, .svc-cap-card, .svc-engage-card, .engage-tier, .funnel-step-card {
  cursor: default !important;
}

/* ═══════════════════════════════════════════════════════════════
   TAB BAR SPACING FIX — April 2026
   Buttons were running together with gap:0. Add breathing room.
═══════════════════════════════════════════════════════════════ */

/* Tab bar inner: give buttons space to breathe */
.tab-bar-inner {
  gap: 0 !important;
}
.tab-btn {
  padding: 0 1.25rem 14px !important;
  margin: 0 !important;
}
/* Active/hover underline still touches bottom */
.tab-btn.active {
  padding-bottom: 14px !important;
}

/* On very wide screens, center the tab bar */
.tab-bar .tab-bar-inner,
.tab-bar > .container > .tab-bar-inner {
  justify-content: center !important;
}

/* ── Ensure hero stat numbers never show wrong value on load ── */
.stat-number.count-stat {
  /* Text is set by data-* attrs as fallback — keep visible */
  visibility: visible !important;
}

/* ── Remove any lingering hero left-alignment ── */
.hero-content,
.hero .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  max-width: 800px !important;
}

/* ═══════════════════════════════════════════════════════════════
   FINAL POLISH — April 2026
   Small refinements for McKinsey / Gartner feel
═══════════════════════════════════════════════════════════════ */

/* Slightly tighter line-height on hero headline for editorial look */
.hero-heading {
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
}

/* Hero sub — more air */
.hero-sub {
  max-width: 640px !important;
  line-height: 1.7 !important;
  color: #3c4043 !important;
}

/* Stats bar — clean card, horizontal rule style */
.hero-stats {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid #e8eaed !important;
  border-radius: 12px !important;
  backdrop-filter: blur(8px) !important;
  padding: 1.25rem 2rem !important;
  margin-top: 2.5rem !important;
  width: fit-content !important;
}
.hero-stats .stat-divider {
  width: 1px !important;
  height: 2.5rem !important;
  background: #e8eaed !important;
  margin: 0 1.75rem !important;
}
.hero-stats .stat-number {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: #1a73e8 !important;
  line-height: 1 !important;
}
.hero-stats .stat-label {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #5f6368 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-top: 4px !important;
}
.hero-stats .stat-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
}


/* ═══════════════════════════════════════════════════════════════
   EXPERT CARD BORDER FIX — remove rainbow nth-child top borders
═══════════════════════════════════════════════════════════════ */
.expert-card:nth-child(1),
.expert-card:nth-child(2),
.expert-card:nth-child(3),
.expert-card:nth-child(4),
.expert-card:nth-child(5),
.expert-card:nth-child(n) {
  border-top: 1px solid #e8eaed !important;
}

/* Also ensure pain cards use the clean numbered style, not rainbow */
.pain-card:nth-child(1),
.pain-card:nth-child(2),
.pain-card:nth-child(3),
.pain-card:nth-child(4),
.pain-card:nth-child(n) {
  border-top: 1px solid #e8eaed !important;
}


/* ═══════════════════════════════════════════════════════════════
   ECO-POOL CTA CARD FIX — restore dark navy card
   The broad white-card override was making this invisible.
═══════════════════════════════════════════════════════════════ */
.eco-pool--cta,
.eco-pool--cta:hover {
  background: #ffffff !important;
  border: 2px solid #1a73e8 !important;
  color: #202124 !important;
}
.eco-pool--cta .eco-cta-headline {
  color: #0d2680 !important;
  font-size: 1.3rem !important;
  font-weight: 800 !important;
  margin-bottom: 0.75rem !important;
}
.eco-pool--cta p {
  color: #3c4043 !important;
  font-size: 0.875rem !important;
  line-height: 1.65 !important;
  margin-bottom: 1rem !important;
}
.eco-pool--cta .eco-cta-quote {
  color: #5f6368 !important;
  border-left: 3px solid #1a73e8 !important;
  padding-left: 0.75rem !important;
  font-style: italic !important;
  font-size: 0.82rem !important;
  margin-bottom: 1.25rem !important;
}


/* =========================================================
   PERFORMANCE FRAMEWORK — PILLAR CARDS FIX
   Each pillar gets a proper card background, border, hover
   ========================================================= */

.svc-fw-pillar {
  background: #ffffff !important;
  border: 1.5px solid #e8eaed !important;
  border-radius: 12px !important;
  padding: 1.5rem 1.75rem !important;
  margin-bottom: 1rem !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 1.25rem !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}

.svc-fw-pillar:last-child {
  margin-bottom: 0 !important;
}

.svc-fw-pillar:hover {
  box-shadow: 0 4px 16px rgba(26,115,232,0.12) !important;
  border-color: #c5d8fd !important;
}

.svc-fw-pillar-num {
  flex-shrink: 0 !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  border-radius: 50% !important;
  background: #e8f0fe !important;
  color: #1a73e8 !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 0.02em !important;
  margin-top: 0.1rem !important;
}

.svc-fw-pillar-content {
  flex: 1 !important;
}

.svc-fw-pillar-title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #202124 !important;
  margin: 0 0 0.35rem !important;
  line-height: 1.4 !important;
}

.svc-fw-pillar-body {
  font-size: 0.9rem !important;
  color: #5f6368 !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* Remove old bottom-border separator since we now use card borders */
.svc-fw-pillar + .svc-fw-pillar {
  border-top: none !important;
}

/* Proof stats below intro text — give them a subtle card too */
.svc-framework-proof {
  display: flex !important;
  gap: 1.25rem !important;
  margin-top: 2rem !important;
}

.svc-framework-proof-item {
  background: #e8f0fe !important;
  border-radius: 10px !important;
  padding: 1rem 1.25rem !important;
  flex: 1 !important;
}

.svc-framework-proof-num {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #1a73e8 !important;
  line-height: 1 !important;
  margin-bottom: 0.25rem !important;
}

.svc-framework-proof-label {
  font-size: 0.8rem !important;
  color: #5f6368 !important;
  line-height: 1.4 !important;
}

/* =========================================================
   TEI SECTION — FORRESTER TOTAL ECONOMIC IMPACT STYLE
   Dark navy, 5 vertical pillar cards, rich data
   ========================================================= */

.tei-section {
  background: #f8f9fa !important;
  padding: 5rem 2rem 5rem !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Subtle radial highlight overlay */
.tei-section::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(circle at 20% 20%, rgba(26,115,232,0.04) 0%, transparent 55%),
                    radial-gradient(circle at 80% 80%, rgba(26,115,232,0.03) 0%, transparent 50%) !important;
  pointer-events: none !important;
}

/* ── Header ── */
.tei-header {
  max-width: 1200px !important;
  margin: 0 auto 3rem !important;
  text-align: center !important;
  position: relative !important;
  z-index: 1 !important;
}

.tei-eyebrow {
  display: inline-block !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #1a73e8 !important;
  background: #e8f0fe !important;
  border: 1px solid #c5d8fd !important;
  padding: 0.3rem 0.9rem !important;
  border-radius: 20px !important;
  margin-bottom: 1.25rem !important;
}

.tei-headline {
  font-size: clamp(1.75rem, 3vw, 2.5rem) !important;
  font-weight: 700 !important;
  color: #202124 !important;
  line-height: 1.2 !important;
  margin: 0 0 1rem !important;
  letter-spacing: -0.02em !important;
}

.tei-sub {
  font-size: 1rem !important;
  color: #5f6368 !important;
  line-height: 1.7 !important;
  max-width: 640px !important;
  margin: 0 auto 2.5rem !important;
}

/* ── Proof strip ── */
.tei-proof-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  flex-wrap: wrap !important;
  background: #ffffff !important;
  border: 1.5px solid #e8eaed !important;
  border-radius: 12px !important;
  padding: 1.25rem 2rem !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05) !important;
}

.tei-proof-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 2rem !important;
  flex: 1 !important;
  min-width: 160px !important;
}

.tei-proof-val {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #202124 !important;
  line-height: 1 !important;
  margin-bottom: 0.3rem !important;
  letter-spacing: -0.02em !important;
}

.tei-proof-lbl {
  font-size: 0.75rem !important;
  color: #5f6368 !important;
  text-align: center !important;
  line-height: 1.4 !important;
}

.tei-proof-div {
  width: 1px !important;
  height: 2.5rem !important;
  background: #e8eaed !important;
  flex-shrink: 0 !important;
}

/* ── Cards grid ── */
.tei-cards {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1rem !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  position: relative !important;
  z-index: 1 !important;
}

/* ── Individual card ── */
.tei-card {
  background: #ffffff !important;
  border: 1.5px solid #e8eaed !important;
  border-radius: 14px !important;
  padding: 1.5rem 1.25rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  transition:
    transform 220ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 220ms cubic-bezier(0.16,1,0.3,1),
    border-color 220ms cubic-bezier(0.16,1,0.3,1),
    background 220ms cubic-bezier(0.16,1,0.3,1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Left sliding color bar — Google colors by position */
.tei-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 4px !important;
  border-radius: 4px 0 0 4px !important;
  transform: scaleY(0) !important;
  transform-origin: bottom center !important;
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1) !important;
  z-index: 2 !important;
}
.tei-card:hover::before { transform: scaleY(1) !important; }
.tei-card:nth-child(5n+1)::before { background: var(--gc-blue) !important; }
.tei-card:nth-child(5n+2)::before { background: var(--gc-red) !important; }
.tei-card:nth-child(5n+3)::before { background: var(--gc-yellow) !important; }
.tei-card:nth-child(5n+4)::before { background: var(--gc-green) !important; }
.tei-card:nth-child(5n+5)::before { background: var(--gc-blue) !important; }

.tei-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.09) !important;
}
.tei-card:nth-child(5n+1):hover { border-color: rgba(66,133,244,0.35) !important; background: rgba(66,133,244,0.03) !important; }
.tei-card:nth-child(5n+2):hover { border-color: rgba(234,67,53,0.3) !important; background: rgba(234,67,53,0.03) !important; }
.tei-card:nth-child(5n+3):hover { border-color: rgba(251,188,5,0.4) !important; background: rgba(251,188,5,0.03) !important; }
.tei-card:nth-child(5n+4):hover { border-color: rgba(52,168,83,0.35) !important; background: rgba(52,168,83,0.03) !important; }
.tei-card:nth-child(5n+5):hover { border-color: rgba(66,133,244,0.35) !important; background: rgba(66,133,244,0.03) !important; }

/* Card top: number + tag */
.tei-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 1.25rem !important;
}

.tei-card-num {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: #1a73e8 !important;
  letter-spacing: 0.05em !important;
  background: #e8f0fe !important;
  border: 1px solid #c5d8fd !important;
  border-radius: 50% !important;
  width: 2rem !important;
  height: 2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.tei-card-tag {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  color: #5f6368 !important;
  text-transform: uppercase !important;
}

/* Metric — the hero number */
.tei-card-metric {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #202124 !important;
  line-height: 1 !important;
  margin-bottom: 0.2rem !important;
  letter-spacing: -0.03em !important;
}

.tei-card-metric-lbl {
  font-size: 0.72rem !important;
  color: #5f6368 !important;
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
  padding-bottom: 1rem !important;
  border-bottom: 1px solid #e8eaed !important;
}

/* Title */
.tei-card-title {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  line-height: 1.35 !important;
  margin: 0 0 0.6rem !important;
}

/* Body text */
.tei-card-body {
  font-size: 0.78rem !important;
  color: #3c4043 !important;
  line-height: 1.65 !important;
  margin: 0 0 1rem !important;
  flex: 1 !important;
}

/* Outcomes bullets */
.tei-card-outcomes {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.35rem !important;
}

.tei-card-outcomes li {
  font-size: 0.73rem !important;
  color: #3c4043 !important;
  padding-left: 1rem !important;
  position: relative !important;
  line-height: 1.4 !important;
}

.tei-card-outcomes li::before {
  content: '→' !important;
  position: absolute !important;
  left: 0 !important;
  color: #1a73e8 !important;
  font-size: 0.65rem !important;
  top: 0.05em !important;
}

/* Footer tags */
.tei-card-footer {
  font-size: 0.65rem !important;
  color: #9aa0a6 !important;
  letter-spacing: 0.04em !important;
  padding-top: 0.75rem !important;
  border-top: 1px solid #e8eaed !important;
  margin-top: auto !important;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .tei-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .tei-cards {
    grid-template-columns: 1fr 1fr !important;
  }
  .tei-proof-strip {
    gap: 0.5rem !important;
    padding: 1rem !important;
  }
  .tei-proof-item {
    min-width: 120px !important;
    padding: 0 1rem !important;
  }
}

@media (max-width: 480px) {
  .tei-cards {
    grid-template-columns: 1fr !important;
  }
}

/* Proof strip accent color for key numbers */
.tei-proof-item:nth-child(1) .tei-proof-val { color: #1a73e8 !important; }
.tei-proof-item:nth-child(3) .tei-proof-val { color: #34a853 !important; }
.tei-proof-item:nth-child(5) .tei-proof-val { color: #ea4335 !important; }

/* Proof strip already set to white above — no override needed */

/* =========================================================
   ECO-SCALE-STRIP — 850K partners / top 2% stat bar
   ========================================================= */

.eco-scale-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  background: #ffffff !important;
  border: 1.5px solid #e8eaed !important;
  border-radius: 14px !important;
  padding: 1.5rem 2rem !important;
  margin: 2rem auto !important;
  max-width: 900px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
}

.eco-scale-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 2rem !important;
  flex: 1 !important;
  min-width: 160px !important;
}

.eco-scale-num {
  font-size: 1.65rem !important;
  font-weight: 800 !important;
  color: #202124 !important;
  line-height: 1 !important;
  margin-bottom: 0.35rem !important;
  letter-spacing: -0.02em !important;
}

/* Highlight the "Top 2%" in blue */
.eco-scale-item:nth-child(3) .eco-scale-num,
.eco-scale-item:nth-child(5) .eco-scale-num {
  color: #1a73e8 !important;
}

.eco-scale-lbl {
  font-size: 0.72rem !important;
  color: #5f6368 !important;
  line-height: 1.4 !important;
  max-width: 130px !important;
}

.eco-scale-div {
  width: 1px !important;
  height: 2.5rem !important;
  background: #e8eaed !important;
  flex-shrink: 0 !important;
}

@media (max-width: 700px) {
  .eco-scale-strip {
    gap: 1rem !important;
  }
  .eco-scale-div {
    display: none !important;
  }
  .eco-scale-item {
    min-width: 130px !important;
    padding: 0 1rem !important;
  }
}

/* =========================================================
   NUCLEAR FIX: OLD CACHED HTML — svc-framework-pillars
   His phone has old HTML with 5-column .svc-fw-pillar cards
   inside a dark .svc-framework section. Force everything visible.
   ========================================================= */

.svc-framework {
  background: #0a1628 !important;
  padding: 5rem 2rem !important;
}

.svc-framework .section-title,
.svc-framework h2 {
  color: #ffffff !important;
}

.svc-framework p,
.svc-framework .section-desc {
  color: rgba(255,255,255,0.65) !important;
}

.svc-framework-intro {
  display: block !important;
}

/* OLD 5-column pillar grid — force horizontal layout with content */
.svc-framework-pillars {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 1rem !important;
  margin-top: 2.5rem !important;
}

/* Each pillar card — force full dark card with white text */
.svc-fw-pillar {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 14px !important;
  padding: 1.5rem 1.25rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  min-height: 280px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: background 0.25s, border-color 0.25s, transform 0.2s !important;
}

.svc-fw-pillar::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 0; right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #1a73e8, #4da3ff) !important;
  border-radius: 14px 14px 0 0 !important;
}

.svc-fw-pillar:hover {
  background: rgba(26,115,232,0.12) !important;
  border-color: rgba(26,115,232,0.4) !important;
  transform: translateY(-4px) !important;
}

.svc-fw-pillar-num {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #4da3ff !important;
  letter-spacing: 0.06em !important;
  display: block !important;
  margin-bottom: 0.5rem !important;
}

.svc-fw-pillar-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  line-height: 1.35 !important;
  margin: 0 0 0.5rem !important;
  display: block !important;
}

.svc-fw-pillar-body {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.65) !important;
  line-height: 1.65 !important;
  display: block !important;
}

/* Proof items below title in old layout */
.svc-fw-proof-item {
  background: rgba(26,115,232,0.15) !important;
  border: 1px solid rgba(26,115,232,0.25) !important;
  border-radius: 10px !important;
  padding: 0.75rem 1rem !important;
}

.svc-fw-proof-val {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: block !important;
}

.svc-fw-proof-label {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.55) !important;
  display: block !important;
}

/* Intro left column in old layout */
.svc-framework-intro-left .section-title,
.svc-framework-intro-left h2 {
  color: #ffffff !important;
}

.svc-framework-intro-left p {
  color: rgba(255,255,255,0.65) !important;
}

/* Responsive for old layout */
@media (max-width: 1100px) {
  .svc-framework-pillars {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}
@media (max-width: 700px) {
  .svc-framework-pillars {
    grid-template-columns: 1fr 1fr !important;
  }
}


/* =========================================================
   ANIMATION SYSTEM — Scroll reveals, hovers, entrances
   ========================================================= */

/* --- Scroll reveal base --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays for child elements */
.reveal-stagger > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.40s; }

/* --- Card hover lifts --- */
.pain-card,
.eco-pool,
.eco-card,
.engage-tier,
.svc-cap-card,
.result-card,
.expert-card,
.shelf-card,
.why-proof-card,
.eco-win,
.tei-card,
.svc-fw-pillar,
.mag-stat {
  transition: transform 0.22s cubic-bezier(.22,1,.36,1),
              box-shadow 0.22s cubic-bezier(.22,1,.36,1),
              border-color 0.22s ease !important;
  will-change: transform !important;
}

.pain-card:hover,
.svc-cap-card:hover,
.expert-card:hover,
.shelf-card:hover,
.why-proof-card:hover,
.eco-win:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 12px 32px rgba(26,115,232,0.13) !important;
  border-color: #c5d8fd !important;
}

.mag-stat:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 8px 24px rgba(26,115,232,0.1) !important;
}

/* --- Button press effect --- */
.btn, .btn-primary, .btn-secondary, [class*="btn"] {
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.18s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn:hover, .btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(26,115,232,0.35) !important;
}

.btn:active, .btn-primary:active {
  transform: translateY(0px) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(26,115,232,0.2) !important;
}

/* Ripple on click */
.btn::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255,255,255,0.18) !important;
  border-radius: inherit !important;
  opacity: 0 !important;
  transform: scale(0) !important;
  transition: transform 0.4s ease, opacity 0.4s ease !important;
}
.btn:active::after {
  transform: scale(2) !important;
  opacity: 0 !important;
  transition: 0s !important;
}

/* --- Stat number pulse on entrance --- */
@keyframes countUp {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}

.stat-number,
.mag-number,
.tei-card-metric,
.eco-scale-num,
.eco-love-num,
.tei-proof-val,
.eco-pool-amount,
.sec-number {
  animation: countUp 0.7s cubic-bezier(.22,1,.36,1) both !important;
}

/* --- Section header fade in --- */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.section-title, .tei-headline, .eco-love-headline,
.svc-hero-headline, .hero-headline {
  animation: fadeSlideUp 0.8s cubic-bezier(.22,1,.36,1) both !important;
}

/* --- Glow pulse on hero CTA --- */
@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(26,115,232,0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(26,115,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(26,115,232,0); }
}

.hero .btn-primary,
.premium-cta-band .btn,
.svc-hero .btn {
  animation: glowPulse 2.5s ease-in-out infinite !important;
}

/* --- Floating subtle background orbs on hero --- */
.hero {
  position: relative !important;
  overflow: hidden !important;
}

.hero::after {
  content: '' !important;
  position: absolute !important;
  width: 600px !important;
  height: 600px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(26,115,232,0.07) 0%, transparent 70%) !important;
  top: -150px !important;
  right: -150px !important;
  pointer-events: none !important;
  animation: floatOrb 8s ease-in-out infinite !important;
}

@keyframes floatOrb {
  0%, 100% { transform: translateY(0) scale(1); }
  50%       { transform: translateY(-30px) scale(1.05); }
}

/* --- TEI section: card entrance stagger --- */
.tei-cards .tei-card:nth-child(1) { animation-delay: 0s !important; }
.tei-cards .tei-card:nth-child(2) { animation-delay: 0.1s !important; }
.tei-cards .tei-card:nth-child(3) { animation-delay: 0.2s !important; }
.tei-cards .tei-card:nth-child(4) { animation-delay: 0.3s !important; }
.tei-cards .tei-card:nth-child(5) { animation-delay: 0.4s !important; }

/* --- eco-pool card colored border glow on hover --- */
.eco-pool:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(26,115,232,0.15) !important;
  border-color: #1a73e8 !important;
}

/* --- Pain cards: colored left border accent on hover --- */
.pain-card:hover {
  border-left: 3px solid #1a73e8 !important;
}

/* --- Section tag pill bounce --- */
@keyframes pillBounce {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1);    opacity: 1; }
}

.section-tag, .tei-eyebrow, .eco-love-eyebrow {
  animation: pillBounce 0.55s cubic-bezier(.22,1,.36,1) both !important;
}

/* --- Underline sweep on headings --- */
.why-heading em,
.hero-headline span,
.svc-hero-headline em {
  position: relative !important;
  display: inline !important;
}

/* --- Testimonial block: slide in from left --- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: none; }
}

.testimonial-block {
  animation: slideInLeft 0.7s cubic-bezier(.22,1,.36,1) both !important;
}

/* --- Number stat strip: scale in --- */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

.hero-stats .stat-item,
.tei-proof-strip .tei-proof-item,
.eco-scale-strip .eco-scale-item {
  animation: scaleIn 0.5s cubic-bezier(.22,1,.36,1) both !important;
}

.hero-stats .stat-item:nth-child(1) { animation-delay: 0.1s !important; }
.hero-stats .stat-item:nth-child(2) { animation-delay: 0.2s !important; }
.hero-stats .stat-item:nth-child(3) { animation-delay: 0.3s !important; }
.hero-stats .stat-item:nth-child(4) { animation-delay: 0.4s !important; }

/* --- Logo strip: fade in sequence --- */
@keyframes logoFade {
  from { opacity: 0; filter: blur(4px); }
  to   { opacity: 0.65; filter: blur(0); }
}

.logo-strip img,
.logo-strip .logo-item {
  animation: logoFade 0.6s cubic-bezier(.22,1,.36,1) both !important;
}

/* --- Funnel steps: cascade down --- */
@keyframes cascadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: none; }
}

.funnel-step:nth-child(1) { animation: cascadeDown 0.5s 0.0s both !important; }
.funnel-step:nth-child(2) { animation: cascadeDown 0.5s 0.1s both !important; }
.funnel-step:nth-child(3) { animation: cascadeDown 0.5s 0.2s both !important; }
.funnel-step:nth-child(4) { animation: cascadeDown 0.5s 0.3s both !important; }
.funnel-step:nth-child(5) { animation: cascadeDown 0.5s 0.4s both !important; }
.funnel-step:nth-child(6) { animation: cascadeDown 0.5s 0.5s both !important; }

/* --- Eco win cards: slide in right --- */
@keyframes slideRight {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

.eco-win:nth-child(1) { animation: slideRight 0.5s 0.05s both !important; }
.eco-win:nth-child(2) { animation: slideRight 0.5s 0.15s both !important; }
.eco-win:nth-child(3) { animation: slideRight 0.5s 0.25s both !important; }
.eco-win:nth-child(4) { animation: slideRight 0.5s 0.35s both !important; }

/* --- Shelf life card: flip reveal --- */
@keyframes flipReveal {
  from { opacity: 0; transform: rotateX(-15deg) translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.shelf-card {
  animation: flipReveal 0.6s cubic-bezier(.22,1,.36,1) both !important;
  transform-origin: top center !important;
}

/* --- Expert cards: pop in --- */
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.88) translateY(16px); }
  70%  { transform: scale(1.03) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) none; }
}

.expert-card {
  animation: popIn 0.55s cubic-bezier(.22,1,.36,1) both !important;
}

/* --- Cursor-follow glow on tei-card --- */
.tei-card {
  cursor: default !important;
}

/* --- Active tab indicator animation --- */
@keyframes tabSlide {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.tab-btn.active::after {
  animation: tabSlide 0.3s cubic-bezier(.22,1,.36,1) !important;
  transform-origin: left !important;
}

/* --- Shelf life highlight number pulse --- */
@keyframes numPulse {
  0%, 100% { color: #1a73e8; text-shadow: 0 0 0 transparent; }
  50%       { color: #4da3ff; text-shadow: 0 0 16px rgba(26,115,232,0.5); }
}

.shelf-highlight,
.shelf-life-num,
.shelf-months {
  animation: numPulse 3s ease-in-out infinite !important;
}

/* --- Why proof card: icon spin on hover --- */
.why-proof-card:hover .why-proof-icon svg {
  transform: rotate(12deg) scale(1.1) !important;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1) !important;
}

/* --- Section dividers: animated gradient line --- */
@keyframes gradientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Engagement tier: featured card shimmer --- */
.engage-tier--featured {
  position: relative !important;
  overflow: hidden !important;
}

.engage-tier--featured::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 30px !important;
  height: 200% !important;
  background: rgba(255,255,255,0.06) !important;
  transform: rotate(25deg) !important;
  animation: shimmer 3s ease-in-out infinite !important;
}

@keyframes shimmer {
  0%   { left: -50%; }
  100% { left: 150%; }
}

/* --- Scroll indicator bounce in hero --- */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%       { transform: translateY(6px); opacity: 1; }
}

/* --- CTA band: pulsing background --- */
/* gradientShift removed — premium-cta-band is now light */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HERO CAROUSEL
═══════════════════════════════════════════════════════════════ */
.hero-carousel {
  position: relative !important;
  overflow: visible !important;
  background: #0d1117 !important;
  margin-top: 64px !important; /* nav height */
}

/* Stage wraps track + arrows + dots — controls anchor to this, not the stat strip */
.hc-stage {
  position: relative !important;
  overflow: hidden !important;
}

/* Track */
.hc-track {
  display: flex !important;
  width: 900% !important;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1) !important;
  will-change: transform !important;
}

/* Individual slide */
.hc-slide {
  position: relative !important;
  width: 11.111% !important; /* 100% / 9 slides */
  min-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.hc-slide-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

/* Subtle dot-grid overlay for depth */
.hc-grid-overlay {
  position: absolute !important;
  inset: 0 !important;
  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  z-index: 1 !important;
}

/* Slide content */
.hc-content {
  position: relative !important;
  z-index: 2 !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  max-width: 820px !important;
}

.hc-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
  margin-bottom: 1.4rem !important;
}

.hc-eyebrow .hc-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #1a73e8 !important;
  display: inline-block !important;
  animation: glowPulse 2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}

.hc-headline {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 1.4rem !important;
}

.hc-em {
  font-style: normal !important;
  color: #60a5fa !important;
  font-weight: 800 !important;
}

.hc-sub {
  font-size: 1.05rem !important;
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.7 !important;
  max-width: 620px !important;
  margin-bottom: 2rem !important;
}

.hc-ctas {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.85rem !important;
}

/* Arrow buttons */
.hc-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.2) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background 200ms ease, transform 200ms ease !important;
}

.hc-arrow:hover {
  background: rgba(26,115,232,0.7) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.hc-arrow--prev { left: 1.5rem !important; }
.hc-arrow--next { right: 1.5rem !important; }

/* Controls: progress bar + dots */
/* ── Full-width progress bar — normal flow, outside hc-stage ── */
.hc-progress-bar {
  height: 2px !important;
  background: rgba(255,255,255,0.10) !important;
  width: 100% !important;
  position: relative !important;
}
.hc-progress-fill {
  height: 100% !important;
  width: 0%;
  background: linear-gradient(90deg, #4285F4, #FBBC05) !important;
}

/* ── Controls row — normal flow, below progress bar ── */
.hc-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.65rem clamp(1.25rem, 4vw, 3rem) 0.85rem !important;
  background: #0a1628 !important;
}
.hc-controls > * { pointer-events: auto !important; }

/* ── Pill dots (left side) ── */
.hc-dots {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
.hc-dot-btn {
  width: 28px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.20) !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: background 250ms ease, width 300ms cubic-bezier(.4,0,.2,1) !important;
}
.hc-dot-btn:hover { background: rgba(255,255,255,0.42) !important; }
.hc-dot-btn.active {
  background: #ffffff !important;
  width: 48px !important;
}

/* ── Nav cluster (right side): prev · pause · counter · next ── */
.hc-nav {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
}
.hc-nav-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.07) !important;
  color: #ffffff !important;
  cursor: pointer !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  transition: background 200ms ease, border-color 200ms ease, transform 150ms ease !important;
  flex-shrink: 0 !important;
}
.hc-nav-btn svg { width: 15px !important; height: 15px !important; }
.hc-nav-btn:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.5) !important;
}
.hc-nav-btn:active { transform: scale(0.92) !important; }
.hc-nav-btn.is-paused {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.5) !important;
}

/* ── Slide counter ── */
.hc-counter {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 0.1em !important;
  min-width: 48px !important;
  text-align: center !important;
  display: inline-block !important;
}
.hc-counter strong {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* .hc-pause-btn now inherits all styles from .hc-nav-btn */

/* Stat strip beneath carousel */
.hc-stat-strip {
  background: #fff !important;
  border-bottom: 1px solid #e8eaed !important;
}

.hc-stat-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding-block: 1.4rem !important;
  flex-wrap: wrap !important;
}

.hc-stat {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 0 2.5rem !important;
}

.hc-stat-num {
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  color: #1a73e8 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
}

.hc-stat-lbl {
  font-size: 0.75rem !important;
  color: #5f6368 !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-top: 0.2rem !important;
}

.hc-stat-div {
  width: 1px !important;
  height: 40px !important;
  background: #e8eaed !important;
  flex-shrink: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .hc-slide { min-height: 95vh !important; }
  .hc-stat { padding: 0 1.2rem !important; }
  .hc-stat-num { font-size: 1.4rem !important; }
  .hc-content { padding-top: 3.5rem !important; padding-bottom: 5rem !important; }
  /* Hide side arrows on mobile — nav buttons in controls handle prev/next */
  .hc-arrow { display: none !important; }
  /* Slightly smaller dots on mobile */
  .hc-dot-btn { width: 20px !important; }
  .hc-dot-btn.active { width: 36px !important; }
  .hc-counter { min-width: 38px !important; font-size: 0.68rem !important; }
}

/* Force carousel min-height — override any conflicting hero rules */
section.hero-carousel {
  min-height: 88vh !important;
  height: auto !important;
  display: block !important;
}
section.hero-carousel .hc-slide {
  min-height: 88vh !important;
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM CARD SYSTEM — Full Upgrade
═══════════════════════════════════════════════════════════════ */

/* ── Pain Cards V2 ── */
.pain-card--v2 {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 16px !important;
  padding: 1.6rem 1.5rem 1.4rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.7rem !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
}

.pain-card--v2::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  border-radius: 16px 16px 0 0 !important;
}

.pain-card--v2:nth-child(1)::before { background: linear-gradient(90deg, #ea4335, #fbbc04) !important; }
.pain-card--v2:nth-child(2)::before { background: linear-gradient(90deg, #f4511e, #fbbc04) !important; }
.pain-card--v2:nth-child(3)::before { background: linear-gradient(90deg, #7b1fa2, #1a73e8) !important; }
.pain-card--v2:nth-child(4)::before { background: linear-gradient(90deg, #1a73e8, #0d47a1) !important; }

.pain-card--v2:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.10) !important;
}

.pain-card-top {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin-bottom: 0.3rem !important;
}

.pain-badge {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
}

.pain-badge--red    { background: #fce8e6 !important; color: #c5221f !important; }
.pain-badge--orange { background: #fef0e6 !important; color: #c94c15 !important; }
.pain-badge--purple { background: #f0e6ff !important; color: #6200ea !important; }
.pain-badge--blue   { background: #e8f0fe !important; color: #1557b0 !important; }

.pain-trigger {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  color: #5f6368 !important;
}

.pain-headline {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

.pain-body {
  font-size: 0.875rem !important;
  color: #3c4043 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.pain-stat-row {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
  background: #f8f9fa !important;
  border-radius: 8px !important;
  padding: 0.6rem 0.8rem !important;
  margin-top: auto !important;
}

.pain-stat-num {
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #1a73e8 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.pain-stat-txt {
  font-size: 0.74rem !important;
  color: #5f6368 !important;
  line-height: 1.45 !important;
}

/* ── Why Metric Cards ── */
.why-metric-card {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 14px !important;
  padding: 1.1rem 1.2rem !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
  transition: transform 200ms ease, box-shadow 200ms ease !important;
  display: flex !important;
  gap: 0.85rem !important;
  align-items: center !important;
}

.why-metric-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.09) !important;
}

.why-metric-card--hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  background: linear-gradient(135deg, #0a2657 0%, #1a73e8 100%) !important;
  border: none !important;
  color: white !important;
  padding: 1.6rem 1.5rem !important;
  margin-bottom: 0.25rem !important;
}

.why-metric-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin-bottom: 0.5rem !important;
}

.why-metric-eyebrow {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: rgba(255,255,255,0.7) !important;
}

.why-metric-badge {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
  padding: 0.2rem 0.55rem !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.why-metric-number {
  font-size: 2.8rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  letter-spacing: -0.03em !important;
}

.why-metric-number span {
  font-size: 1.8rem !important;
  color: rgba(255,255,255,0.7) !important;
}

.why-metric-label {
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.9) !important;
  margin-top: 0.25rem !important;
}

.why-metric-sub {
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.6) !important;
  margin-top: 0.35rem !important;
  line-height: 1.5 !important;
}

.why-metric-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.why-metric-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.why-metric-num-sm {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  line-height: 1.2 !important;
}

.why-metric-lbl-sm {
  font-size: 0.75rem !important;
  color: #5f6368 !important;
  line-height: 1.4 !important;
  margin-top: 0.1rem !important;
  margin-bottom: 0.4rem !important;
}

.why-metric-bar {
  height: 4px !important;
  background: #e8eaed !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.why-metric-fill {
  height: 100% !important;
  border-radius: 4px !important;
  transition: width 1s ease !important;
}

/* ── Voice of the Customer (VotC) Section ── */
.votc-section {
  background: #f8f9fa !important;
  padding: 5rem 0 !important;
  border-top: 1px solid #e8eaed !important;
}

.votc-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.25rem !important;
}

/* On medium screens, still single column rows */
@media (max-width: 860px) {
  .votc-grid { flex-direction: column !important; }
}
@media (max-width: 540px) {
  .votc-grid { flex-direction: column !important; }
}

.votc-card {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 20px !important;
  padding: 1.8rem 2rem !important;
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 2rem !important;
  row-gap: 0 !important;
  align-items: start !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
  position: relative !important;
}

.votc-card--dark {
  background: linear-gradient(135deg, #0a1628 0%, #0d2244 100%) !important;
  border-color: #1a3a6e !important;
}

.votc-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important;
}

.votc-quote-mark {
  font-family: Georgia, serif !important;
  font-size: 4rem !important;
  line-height: 0.6 !important;
  color: #1a73e8 !important;
  font-weight: 700 !important;
  margin-bottom: 0.25rem !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.votc-card--dark .votc-quote-mark { color: #60a5fa !important; }

.votc-quote {
  font-size: 0.92rem !important;
  line-height: 1.75 !important;
  color: #3c4043 !important;
  font-style: italic !important;
  margin: 0 !important;
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.votc-card--dark .votc-quote { color: rgba(255,255,255,0.82) !important; }

.votc-footer {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  border-top: none !important;
  border-left: 1px solid #e8eaed !important;
  padding-top: 0 !important;
  padding-left: 2rem !important;
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  min-width: 200px !important;
  max-width: 240px !important;
}

.votc-footer-row1 {
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
}

.votc-footer-row2 {
  display: flex !important;
  align-items: center !important;
  padding-left: 0 !important;
}

.votc-card--dark .votc-footer { border-top-color: rgba(255,255,255,0.12) !important; }

.votc-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  color: #fff !important;
  letter-spacing: 0.02em !important;
}

.votc-name {
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #202124 !important;
  line-height: 1.3 !important;
}

.votc-card--dark .votc-name { color: #ffffff !important; }

.votc-company {
  font-size: 0.74rem !important;
  color: #5f6368 !important;
  margin-top: 0.1rem !important;
}

.votc-card--dark .votc-company { color: rgba(255,255,255,0.5) !important; }

.votc-role-tag {
  margin-left: 0 !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 20px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

.votc-role-tag--cro          { background: #e8f0fe !important; color: #1557b0 !important; }
.votc-role-tag--cfo          { background: #e6f4ea !important; color: #1e7e34 !important; }
.votc-role-tag--channel      { background: #f3e5f5 !important; color: #6a1b9a !important; }
.votc-role-tag--partnerships { background: #ecfdf5 !important; color: #047857 !important; }

/* Accent card — green tint for partnerships quote */
.votc-card--accent {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%) !important;
  border: 1.5px solid #bbf7d0 !important;
}
.votc-card--accent .votc-quote-mark { color: #16a34a !important; }
.votc-card--accent .votc-footer { border-top-color: #bbf7d0 !important; }
.votc-card--accent strong { color: #047857 !important; }

/* ── Results Mag-Stat V2 ── */
.mag-stat--v2 {
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 16px !important;
  padding: 1.6rem 1.4rem !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.3rem !important;
  transition: transform 220ms ease, box-shadow 220ms ease !important;
}

.mag-stat--v2:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.10) !important;
}

.mag-stat--v2.mag-stat--hero {
  background: linear-gradient(135deg, #0a2657 0%, #1a73e8 100%) !important;
  border: none !important;
  grid-column: span 1 !important;
}

.mag-stat--v2.mag-stat--hero .mag-number { color: #ffffff !important; }
.mag-stat--v2.mag-stat--hero .mag-label  { color: rgba(255,255,255,0.85) !important; }
.mag-stat--v2.mag-stat--hero .mag-v2-eyebrow { color: rgba(255,255,255,0.6) !important; }

.mag-v2-eyebrow {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #5f6368 !important;
  margin-bottom: 0.2rem !important;
}

.mag-v2-proof {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  font-size: 0.75rem !important;
  color: #5f6368 !important;
  margin-top: 0.4rem !important;
  line-height: 1.4 !important;
}

.mag-stat--v2.mag-stat--hero .mag-v2-proof { color: rgba(255,255,255,0.65) !important; }

.mag-proof-dot {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

/* votc-grid responsive handled above */
@media (max-width: 768px) {
  .pain-stat-num { font-size: 1.1rem !important; }
  .why-metric-number { font-size: 2.2rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HCI INFOGRAPHIC STAT BAND
   ═══════════════════════════════════════════════════════════════ */

/* Container: 4-col grid sitting inside .hc-stat-strip */
.hc-infographic {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 !important;
  padding: 0 !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
}

/* ── Base card ── */
.hci-card {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 28px 24px !important;
  background: #ffffff !important;
  border-right: 1px solid #e8eaed !important;
  position: relative !important;
  overflow: hidden !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
  cursor: default !important;
}

.hci-card:last-child {
  border-right: none !important;
}

.hci-card:hover {
  box-shadow: 0 4px 24px rgba(26, 115, 232, 0.12) !important;
  transform: translateY(-2px) !important;
  z-index: 1 !important;
}

/* ── Primary card (ARR — dark blue gradient) ── */
.hci-card--primary {
  background: linear-gradient(135deg, #0a1628 0%, #1a3a5c 50%, #1a73e8 100%) !important;
  color: white !important;
  border-right: 1px solid rgba(255,255,255,0.12) !important;
}

.hci-card--primary:hover {
  box-shadow: 0 8px 32px rgba(26, 115, 232, 0.35) !important;
}

/* ── Icon wrap ── */
.hci-icon-wrap {
  flex-shrink: 0 !important;
  width: 52px !important;
  height: 52px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

.hci-icon-wrap--globe {
  background: #e8f0fe !important;
  border-radius: 50% !important;
}

.hci-icon-wrap--ring {
  background: #f8f9fa !important;
  border-radius: 50% !important;
}

.hci-icon-wrap--bars {
  background: #f0f4ff !important;
  border-radius: 12px !important;
}

/* ── SVG charts inside icon wrap ── */
.hci-chart {
  width: 48px !important;
  height: 32px !important;
}

.hci-icon-svg {
  width: 38px !important;
  height: 38px !important;
}

.hci-ring {
  width: 44px !important;
  height: 44px !important;
}

.hci-bars {
  width: 40px !important;
  height: 36px !important;
}

/* ── Content stack ── */
.hci-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.hci-eyebrow {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.6) !important;
  margin-bottom: 2px !important;
}

.hci-number {
  font-size: 2rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #ffffff !important;
  letter-spacing: -0.02em !important;
}

.hci-number--dark {
  color: #202124 !important;
}

.hci-label {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.75) !important;
  line-height: 1.3 !important;
}

.hci-label--dark {
  color: #5f6368 !important;
}

.hci-trend {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-top: 5px !important;
  letter-spacing: 0.01em !important;
}

.hci-trend--dark {
  color: #5f6368 !important;
}

/* ── Responsive: 2-col on tablet, 1-col on mobile ── */
@media (max-width: 900px) {
  .hc-infographic {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .hci-card {
    border-bottom: 1px solid #e8eaed !important;
  }
  .hci-card:nth-child(even) {
    border-right: none !important;
  }
}

@media (max-width: 540px) {
  .hc-infographic {
    grid-template-columns: 1fr !important;
  }
  .hci-card {
    border-right: none !important;
    padding: 20px 16px !important;
  }
  .hci-number {
    font-size: 1.65rem !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   LOGO STRIP V2 — BRAND PILLS
   ═══════════════════════════════════════════════════════════════ */

/* Section wrapper */
.logo-strip--v2 {
  background: #f8f9fa !important;
  padding: 22px 0 !important;
  border-top: 1px solid #e8eaed !important;
  border-bottom: 1px solid #e8eaed !important;
  overflow: hidden !important;
}

.logo-strip--v2 .logo-label {
  text-align: center !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: #5f6368 !important;
  margin-bottom: 14px !important;
}

/* Scroll track */
.logo-scroll-track {
  display: flex !important;
  gap: 10px !important;
  animation: scrollPills 28s linear infinite !important;
  width: max-content !important;
  padding: 0 20px !important;
}

.logo-strip--v2:hover .logo-scroll-track {
  animation-play-state: paused !important;
}

@keyframes scrollPills {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Individual pill */
.brand-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  border: 1px solid #e8eaed !important;
  border-radius: 100px !important;
  padding: 8px 16px 8px 10px !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
  cursor: default !important;
}

.brand-pill:hover {
  box-shadow: 0 4px 16px rgba(26, 115, 232, 0.14) !important;
  border-color: #c5d8fd !important;
  transform: translateY(-1px) !important;
}

/* Microsoft 4-square logo */
.brand-pill--msft {
  padding-left: 10px !important;
}

.brand-pill--msft .bp-squares {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px !important;
  width: 18px !important;
  height: 18px !important;
}

.bp-square {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 1px !important;
}

/* Microsoft pill: arrange squares in 2×2 grid */
.brand-pill--msft {
  position: relative !important;
}

/* Google colored letter dots */
.bp-dot {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1 !important;
}

/* Generic colored initial badge */
.bp-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 8px !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Brand name text */
.bp-name {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  color: #3c4043 !important;
  letter-spacing: 0.01em !important;
}

/* Responsive: just let it scroll on mobile */
@media (max-width: 768px) {
  .brand-pill {
    padding: 6px 12px 6px 8px !important;
  }
  .bp-name {
    font-size: 0.72rem !important;
  }
}


/* ── bp-squares: 2×2 grid for Microsoft logo ── */
.bp-squares {
  display: inline-grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 2px !important;
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

.bp-squares .bp-square {
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 1px !important;
}


/* ═══════════════════════════════════════════════════════════════
   CAROUSEL SPLIT LAYOUT — text left + SVG visual right
   ═══════════════════════════════════════════════════════════════ */

/* 2-column split inside each slide */
.hc-content--split {
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  align-items: center !important;
  gap: 40px !important;
  max-width: 1280px !important;
  padding-top: 4.5rem !important;
  padding-bottom: 4.5rem !important;
}

.hc-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Right panel SVG container */
.hc-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
}

.hc-svg {
  width: 100% !important;
  max-width: 380px !important;
  height: auto !important;
  filter: drop-shadow(0 8px 32px rgba(0,0,0,0.4)) !important;
  animation: floatCard 6s ease-in-out infinite !important;
}

@keyframes floatCard {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* Stagger float per slide so they don't all pulse together */
.hc-slide--1 .hc-svg { animation-delay: 0s; }
.hc-slide--2 .hc-svg { animation-delay: -1.2s; }
.hc-slide--2 .hc-svg { animation-delay: -2.4s; }
.hc-slide--5 .hc-svg { animation-delay: -3.6s; }
.hc-slide--6 .hc-svg { animation-delay: -4.8s; }

/* Glow accent per slide theme */
.hc-slide--1 .hc-visual::after {
  content: '' !important;
  position: absolute !important;
  width: 240px !important;
  height: 240px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(66,133,244,0.35) 0%, transparent 70%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
.hc-slide--2 .hc-visual::after {
  content: '' !important;
  position: absolute !important;
  width: 240px !important;
  height: 240px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(234,67,53,0.35) 0%, transparent 70%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
.hc-slide--2 .hc-visual::after {
  content: '' !important;
  position: absolute !important;
  width: 240px !important;
  height: 240px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(251,188,5,0.3) 0%, transparent 70%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
.hc-slide--5 .hc-visual::after {
  content: '' !important;
  position: absolute !important;
  width: 240px !important;
  height: 240px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(52,168,83,0.35) 0%, transparent 70%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}
.hc-slide--6 .hc-visual::after {
  content: '' !important;
  position: absolute !important;
  width: 240px !important;
  height: 240px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(13,71,161,0.4) 0%, transparent 70%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Responsive: stack on tablet */
@media (max-width: 1024px) {
  .hc-content--split {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .hc-visual {
    display: none !important; /* hide graphic on mobile to preserve text legibility */
  }
}


/* ═══════════════════════════════════════════════════════════════
   LOGO STRIP V2 — inline SVG logos + scroll track fix
   ═══════════════════════════════════════════════════════════════ */

/* Remove old container wrapping — strip is now full-width */
.logo-strip--v2 .container {
  padding-bottom: 0 !important;
}

/* bp-logo: inline SVG sizing inside pills */
.bp-logo {
  width: 22px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Real logo images — scale by height, let width be natural */
.bp-logo--img {
  width: auto !important;
  height: 28px !important;
  max-width: 120px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Wider logos (Amazon wordmark, VMware/Cisco text) */
.brand-pill svg.bp-logo[viewBox="0 0 48 48"],
.brand-pill svg.bp-logo[viewBox="0 0 60 24"] {
  width: 52px !important;
  height: 20px !important;
}

/* Hide duplicate name text when the SVG already IS the wordmark */
.bp-name--hide {
  display: none !important;
}

/* Scroll track: now directly on section, full width overflow */
.logo-scroll-track {
  display: flex !important;
  gap: 10px !important;
  animation: scrollPills 32s linear infinite !important;
  width: max-content !important;
  padding: 12px 20px !important;
  align-items: center !important;
}

.logo-strip--v2:hover .logo-scroll-track {
  animation-play-state: paused !important;
}


/* ═══════════════════════════════════════════════════════════════
   CAROUSEL TEXT CONTRAST FIX
   Force white on all dark-bg slides (overrides global h1 #202124)
   ═══════════════════════════════════════════════════════════════ */

.hc-slide .hc-headline,
.hero-carousel .hc-headline,
section.hero-carousel h1,
.hc-content--split h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

.hc-slide .hc-sub,
.hero-carousel .hc-sub,
.hc-content--split .hc-sub {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 0.95 !important;
}

.hc-slide .hc-eyebrow,
.hc-content--split .hc-eyebrow {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 0.95 !important;
}

/* Also ensure em highlight stays visible */
.hc-slide .hc-em,
.hc-content--split .hc-em {
  color: #60a5fa !important;
  -webkit-text-fill-color: #60a5fa !important;
}


/* MAXIMUM SPECIFICITY — beat h1,h2,h3,h4 global override */
section.hero-carousel .hc-slide .hc-headline,
section.hero-carousel .hc-slide h1.hc-headline,
#panel-overview section.hero-carousel h1 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4) !important;
}

section.hero-carousel .hc-slide .hc-sub,
section.hero-carousel .hc-slide p.hc-sub {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 0.95 !important;
}

section.hero-carousel .hc-slide .hc-em {
  color: #60a5fa !important;
  -webkit-text-fill-color: #60a5fa !important;
}


/* ═══════════════════════════════════════════════════════════════
   CAROUSEL DARK SCRIM — guarantees text readability on all screens
   ═══════════════════════════════════════════════════════════════ */

/* Dark overlay on top of every slide bg so light gradients can't wash text */
.hc-slide-bg::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  /* Scrim removed — gradient colors are dark enough to ensure readability */
  background: transparent !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* The grid overlay sits above the scrim */
.hc-grid-overlay {
  z-index: 2 !important;
}

/* Keep hc-content above scrim */
.hc-content, .hc-content--split {
  z-index: 3 !important;
}

/* Slide 3 uses the same global scrim — no extra override needed */


/* ─── Logo strip: correct sizing for new SVG variants ─────────────────── */
/* Wide logos: Amazon wordmark, VMware, Arrow, Ingram, TD Synnex, SHI, CDW, Noventiq, Avaya */
.bp-logo--wide {
  width: 70px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* Cisco: bridge icon + wordmark needs more horizontal space */
.bp-logo--cisco {
  width: 80px !important;
  height: 22px !important;
  flex-shrink: 0 !important;
  display: block !important;
}

/* ─── Logo strip 3× scale ────────────────────────────────────────────────
   Triples all brand pill logo sizes, pill padding, and name font           */

/* Square logos (Microsoft 4-square, Google G) */
.bp-logo {
  width: 66px !important;
  height: 66px !important;
}

/* Wide wordmark logos (Amazon, VMware, Arrow, Ingram, TD Synnex, SHI, CDW, etc.) */
.bp-logo--wide {
  width: 210px !important;
  height: 66px !important;
}

/* Cisco bridge + wordmark */
.bp-logo--cisco {
  width: 240px !important;
  height: 66px !important;
}

/* Scale up the pill itself */
.brand-pill {
  padding: 14px 28px 14px 20px !important;
  gap: 14px !important;
  border-radius: 120px !important;
}

/* Scale up the text label */
.bp-name {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
}

/* Scale up initial badge icons (Avaya, etc.) */
.bp-icon {
  width: 52px !important;
  height: 52px !important;
  font-size: 1.4rem !important;
  border-radius: 14px !important;
}

/* Increase scroll track padding to match larger pills */
.logo-scroll-track {
  gap: 20px !important;
  padding: 20px 32px !important;
}

/* Logo strip section height auto-adjusts — remove any fixed height */
.logo-strip--v2 {
  padding: 0 !important;
}

@media (max-width: 768px) {
  .bp-logo {
    width: 44px !important;
    height: 44px !important;
  }
  .bp-logo--wide {
    width: 140px !important;
    height: 44px !important;
  }
  .bp-logo--cisco {
    width: 160px !important;
    height: 44px !important;
  }
  .brand-pill {
    padding: 10px 18px 10px 14px !important;
    gap: 10px !important;
  }
  .bp-name {
    font-size: 1rem !important;
  }
  .bp-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }
}

/* ─── Google Yellow slide (slide 3) — white text on gold bg ──────── */
.hc-slide--2 .hc-headline,
.hc-slide--2 .hc-eyebrow,
.hc-slide--2 .hc-body,
.hc-slide--2 .hc-sub,
.hc-slide--2 .hc-headline em,
.hc-slide--2 .hc-headline span {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
}

/* Accent on yellow — slightly brighter white */
.hc-slide--2 .hc-headline .hc-accent {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
}

/* Google Green slide (slide 4) — white text works fine on deep green */
/* Google Blue slides (1, 2, 5) — white text fine */
/* Google Red slide (2) — white text fine */

/* Dot on yellow slide */
.hc-slide--2 .hc-dot {
  background: #3d2800 !important;
}

/* Outline CTA button on yellow slide */
.hc-slide--2 .hc-cta-outline {
  color: #1a1200 !important;
  border-color: rgba(30, 20, 0, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════
   COMPACT FOOTER — 3-column horizontal
   ═══════════════════════════════════════════════════════════════ */

.site-footer--compact {
  background: #ffffff !important;
  color: #3c4043 !important;
  border-top: 1.5px solid #e8eaed !important;
}

/* Brand strip */
.fc-brand-strip {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 40px 0 28px !important;
  border-bottom: 1px solid #e8eaed !important;
}
.fc-brand-strip .logo-img--footer {
  height: 36px !important;
  width: auto !important;
  display: block !important;
  flex-shrink: 0 !important;
}
.fc-brand-strip .fc-tagline {
  color: #5f6368 !important;
  font-size: 0.85rem !important;
  margin: 0 !important;
  flex: 1 !important;
}
.fc-brand-strip .fc-badges {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* 3-col equal grid */
.footer-compact-inner {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 48px !important;
  padding-top: 36px !important;
  padding-bottom: 40px !important;
  align-items: start !important;
}

.fc-brand .logo-img--footer {
  height: 36px !important;
  width: auto !important;
  margin-bottom: 12px !important;
  display: block !important;
}
.fc-tagline {
  font-size: 0.85rem !important;
  color: #5f6368 !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
}
.fc-tagline em { color: #1a73e8 !important; font-style: italic !important; }
.fc-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.fc-badges span {
  background: #e8f0fe !important;
  color: #1a73e8 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 100px !important;
  letter-spacing: 0.04em !important;
}

.fc-links { display: contents !important; }
.fc-link-group h6 {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #9aa0a6 !important;
  margin: 0 0 12px !important;
}
.fc-link-group a {
  display: block !important;
  font-size: 0.82rem !important;
  color: #3c4043 !important;
  text-decoration: none !important;
  margin-bottom: 8px !important;
  transition: color 0.15s !important;
}
.fc-link-group a:hover { color: #1a73e8 !important; }

/* Col 3: Contact */
.fc-contact h6 {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #9aa0a6 !important;
  margin: 0 0 14px !important;
}
.fc-contact-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  font-size: 0.82rem !important;
  color: #3c4043 !important;
  text-decoration: none !important;
  margin-bottom: 10px !important;
  line-height: 1.4 !important;
}
.fc-contact-row svg { flex-shrink: 0 !important; margin-top: 2px !important; color: #5f6368 !important; }
a.fc-contact-row:hover { color: #1a73e8 !important; }
.fc-contact-row--addr { align-items: flex-start !important; }
.fc-cta {
  display: inline-block !important;
  margin-top: 16px !important;
  background: #1a73e8 !important;
  color: #fff !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  padding: 10px 20px !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: background 0.15s, transform 0.15s !important;
}
.fc-cta:hover { background: #1558b0 !important; transform: translateY(-1px) !important; }

/* Bottom bar — color cycling handled by global footerColorCycle animation */
.site-footer--compact .footer-bottom {
  border-top: none !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

/* Mobile: stack to single col */
@media (max-width: 768px) {
  .footer-compact-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding-top: 36px !important;
  }
  /* mobile: stack all 3 cols */
  .footer-compact-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   CARD ENTRANCE ANIMATIONS
   IntersectionObserver triggers .card--visible class
   ═══════════════════════════════════════════════════════════════ */

/* Base state: hidden, translated down */
.pain-card,
.pain-card--v2,
.why-card,
.why-metric-card,
.hci-card,
.result-stat,
.tei-card,
.votc-card,
.eco-card,
.svc-card,
.cap-card,
.engagement-card {
  opacity: 0 !important;
  transform: translateY(32px) !important;
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease !important;
}

/* Visible state (added by JS) */
.pain-card.card--visible,
.pain-card--v2.card--visible,
.why-card.card--visible,
.why-metric-card.card--visible,
.hci-card.card--visible,
.result-stat.card--visible,
.tei-card.card--visible,
.votc-card.card--visible,
.eco-card.card--visible,
.svc-card.card--visible,
.cap-card.card--visible,
.engagement-card.card--visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Staggered delay via nth-child */
.pain-card:nth-child(1), .pain-card--v2:nth-child(1), .why-card:nth-child(1),
.why-metric-card:nth-child(1), .hci-card:nth-child(1), .eco-card:nth-child(1),
.svc-card:nth-child(1), .cap-card:nth-child(1), .engagement-card:nth-child(1),
.votc-card:nth-child(1), .tei-card:nth-child(1) { transition-delay: 0s !important; }

.pain-card:nth-child(2), .pain-card--v2:nth-child(2), .why-card:nth-child(2),
.why-metric-card:nth-child(2), .hci-card:nth-child(2), .eco-card:nth-child(2),
.svc-card:nth-child(2), .cap-card:nth-child(2), .engagement-card:nth-child(2),
.votc-card:nth-child(2), .tei-card:nth-child(2) { transition-delay: 0.1s !important; }

.pain-card:nth-child(3), .pain-card--v2:nth-child(3), .why-card:nth-child(3),
.why-metric-card:nth-child(3), .hci-card:nth-child(3), .eco-card:nth-child(3),
.svc-card:nth-child(3), .cap-card:nth-child(3), .engagement-card:nth-child(3),
.votc-card:nth-child(3), .tei-card:nth-child(3) { transition-delay: 0.18s !important; }

.pain-card:nth-child(4), .pain-card--v2:nth-child(4), .why-card:nth-child(4),
.why-metric-card:nth-child(4), .hci-card:nth-child(4), .eco-card:nth-child(4),
.svc-card:nth-child(4), .cap-card:nth-child(4), .engagement-card:nth-child(4),
.votc-card:nth-child(4), .tei-card:nth-child(4) { transition-delay: 0.26s !important; }

.pain-card:nth-child(5), .pain-card--v2:nth-child(5), .why-card:nth-child(5),
.why-metric-card:nth-child(5), .hci-card:nth-child(5), .eco-card:nth-child(5),
.svc-card:nth-child(5), .cap-card:nth-child(5), .engagement-card:nth-child(5),
.votc-card:nth-child(5) { transition-delay: 0.33s !important; }

.pain-card:nth-child(6), .pain-card--v2:nth-child(6), .why-card:nth-child(6),
.why-metric-card:nth-child(6), .eco-card:nth-child(6), .svc-card:nth-child(6),
.cap-card:nth-child(6) { transition-delay: 0.40s !important; }


/* ═══════════════════════════════════════════════════════════════
   TAB BAR PROMINENCE UPGRADE — April 2026
   Taller, bolder, click-animated navigation
═══════════════════════════════════════════════════════════════ */

/* Make the bar itself taller and more substantial */
.tab-bar {
  background: #ffffff !important;
  border-bottom: 2px solid #e8eaed !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  top: 64px !important;
  z-index: 90 !important;
}

/* Buttons: bigger, bolder, more breathing room */
.tab-btn {
  font-family: 'Cabinet Grotesk', 'Satoshi', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #5f6368 !important;
  letter-spacing: 0.01em !important;
  padding: 0 1.6rem 0 !important;
  height: 56px !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: color 180ms cubic-bezier(0.16,1,0.3,1),
              background 180ms cubic-bezier(0.16,1,0.3,1) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Hover state */
.tab-btn:hover {
  color: #202124 !important;
  background: rgba(26,115,232,0.05) !important;
}

/* Active indicator underline — thicker and colored */
.tab-btn::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: #1a73e8 !important;
  border-radius: 3px 3px 0 0 !important;
  transform: scaleX(0) !important;
  transform-origin: left center !important;
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1) !important;
}

.tab-btn.active {
  color: #1a73e8 !important;
  font-weight: 700 !important;
  background: rgba(26,115,232,0.06) !important;
}

.tab-btn.active::after,
.tab-btn[aria-selected="true"]::after {
  transform: scaleX(1) !important;
}

/* Click ripple: a circular scale-up that fades on press */
.tab-btn::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(26,115,232,0.12) !important;
  border-radius: inherit !important;
  transform: scale(0) !important;
  opacity: 0 !important;
  transition: transform 0ms, opacity 0ms !important;
  pointer-events: none !important;
}

/* JS adds .tab-btn--pressing on mousedown; CSS handles the flash */
.tab-btn--pressing::before {
  transform: scale(1) !important;
  opacity: 1 !important;
  transition: transform 120ms cubic-bezier(0.22,1,0.36,1),
              opacity 120ms ease !important;
}

/* Tab bar inner spacing */
.tab-bar-inner {
  gap: 0 !important;
  justify-content: center !important;
}

/* Mobile: slightly smaller but still prominent */
@media (max-width: 640px) {
  .tab-btn {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 0 1rem 0 !important;
    height: 48px !important;
  }
  .tab-bar {
    top: 56px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LOGO BRAND NAME + TAGLINE IN HEADER
═══════════════════════════════════════════════════════════════ */

/* Logo link: flex row, vertically centered */
.logo {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

/* Brand text block: stacked name + tagline */
.logo-brand {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 1px !important;
  line-height: 1 !important;
}

/* Company name */
.logo-brand-name {
  font-family: 'Cabinet Grotesk', 'Satoshi', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #202124 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
}

/* Tagline */
.logo-brand-tagline {
  font-family: 'Satoshi', sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  color: #5f6368 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
}

/* Keep logo image sizing consistent */
.nav-inner .logo-img {
  height: 52px !important;
  width: auto !important;
}

/* Company name — slightly smaller to fit full name + tagline */
.logo-brand-name {
  font-size: 1.05rem !important;
}

/* Tagline */
.logo-brand-tagline {
  font-size: 0.72rem !important;
  display: block !important;
}

/* Always show tagline on desktop */
@media (min-width: 641px) {
  .logo-brand-tagline { display: block !important; }
}
/* Mobile: hide tagline on small screens, keep name */
@media (max-width: 640px) {
  .logo-brand-tagline { display: none !important; }
  .logo-brand-name { font-size: 1rem !important; }
  .nav-inner .logo-img { height: 38px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL ACCENT COLOR FIXES — slides 3, 4, 5
   Accent words must match their slide's color family, not always blue
═══════════════════════════════════════════════════════════════ */

/* Slide 3 (Gold/Yellow) — accent stays dark amber, already set.
   But body text on gold needs to be white not dark for contrast */
.hc-slide--2 .hc-body { color: #ffffff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.35) !important; }
.hc-slide--2 .hc-eyebrow { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 1px 4px rgba(0,0,0,0.35) !important; }
.hc-slide--2 .hc-headline { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-shadow: 0 1px 6px rgba(0,0,0,0.35) !important; }
.hc-slide--2 .hc-headline .hc-accent {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
}

/* Slide 4 (Green) — accent should be bright green-lime, not blue */
.hc-slide--5 .hc-headline .hc-accent {
  color: #6EE7A0 !important;
  -webkit-text-fill-color: #6EE7A0 !important;
  text-shadow: 0 0 20px rgba(110,231,160,0.35) !important;
}

/* Slide 5 (Deep Blue) — accent should be bright sky blue, not same blue */
.hc-slide--6 .hc-headline .hc-accent {
  color: #93C5FD !important;
  -webkit-text-fill-color: #93C5FD !important;
  text-shadow: 0 0 20px rgba(147,197,253,0.35) !important;
}

/* Slide 1 (Blue) — accent stays current cyan-blue */
/* Slide 2 (Red) — accent stays current blue (good contrast on red) */

/* ═══════════════════════════════════════════════════════════════
   GOOGLE COLOR CARD HOVER SYSTEM — sitewide
   On hover: card border flashes the matching Google color,
   subtle tinted background bleeds in, icon/number gets the color
═══════════════════════════════════════════════════════════════ */

/* Google color vars (already defined, reuse here) */
:root {
  --gc-blue:   #4285F4;
  --gc-red:    #EA4335;
  --gc-yellow: #FBBC05;
  --gc-green:  #34A853;
}

/* Base: all content cards get a smooth transition on hover */
.pain-card, .expert-card, .hww-block,
.eco-card, .eco-pool, .region-card,
.engage-tier, .result-card, .funnel-step,
.approach-step, .impact-card,
.svc-cap-card, .svc-engage-card,
.shelf-card, .win-item, .values-card,
.mag-stat-cell, .secondary-stat-cell {
  position: relative !important;
  overflow: hidden !important;
  transition:
    transform 220ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 220ms cubic-bezier(0.16,1,0.3,1),
    border-color 220ms cubic-bezier(0.16,1,0.3,1),
    background 220ms cubic-bezier(0.16,1,0.3,1) !important;
}

/* Sliding color bar on the left edge — reveals on hover */
.pain-card::before, .expert-card::before, .hww-block::before,
.eco-card::before, .eco-pool::before, .region-card::before,
.engage-tier::before, .result-card::before, .funnel-step::before,
.approach-step::before, .impact-card::before,
.svc-cap-card::before, .svc-engage-card::before,
.shelf-card::before, .win-item::before, .values-card::before,
.mag-stat-cell::before, .secondary-stat-cell::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  border-radius: 4px 0 0 4px !important;
  transform: scaleY(0) !important;
  transform-origin: bottom center !important;
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1) !important;
  z-index: 2 !important;
}

/* On hover: slide bar up + lift + tinted box-shadow */
.pain-card:hover::before, .expert-card:hover::before, .hww-block:hover::before,
.eco-card:hover::before, .eco-pool:hover::before, .region-card:hover::before,
.engage-tier:hover::before, .result-card:hover::before, .funnel-step:hover::before,
.approach-step:hover::before, .impact-card:hover::before,
.svc-cap-card:hover::before, .svc-engage-card:hover::before,
.shelf-card:hover::before, .win-item:hover::before, .values-card:hover::before,
.mag-stat-cell:hover::before, .secondary-stat-cell:hover::before {
  transform: scaleY(1) !important;
}

/* Google Blue — 1st, 5th, 9th cards */
.pain-card:nth-child(4n+1)::before,
.expert-card:nth-child(4n+1)::before,
.eco-card:nth-child(4n+1)::before,
.result-card:nth-child(4n+1)::before,
.svc-cap-card:nth-child(4n+1)::before,
.engage-tier:nth-child(4n+1)::before,
.region-card:nth-child(4n+1)::before,
.values-card:nth-child(4n+1)::before,
.mag-stat-cell:nth-child(4n+1)::before { background: var(--gc-blue) !important; }

.pain-card:nth-child(4n+1):hover,
.expert-card:nth-child(4n+1):hover,
.eco-card:nth-child(4n+1):hover,
.result-card:nth-child(4n+1):hover,
.svc-cap-card:nth-child(4n+1):hover,
.engage-tier:nth-child(4n+1):hover,
.region-card:nth-child(4n+1):hover,
.values-card:nth-child(4n+1):hover,
.mag-stat-cell:nth-child(4n+1):hover {
  border-color: rgba(66,133,244,0.35) !important;
  box-shadow: 0 8px 32px rgba(66,133,244,0.14), 0 2px 8px rgba(0,0,0,0.06) !important;
  background: rgba(66,133,244,0.03) !important;
}

/* Google Red — 2nd, 6th, 10th cards */
.pain-card:nth-child(4n+2)::before,
.expert-card:nth-child(4n+2)::before,
.eco-card:nth-child(4n+2)::before,
.result-card:nth-child(4n+2)::before,
.svc-cap-card:nth-child(4n+2)::before,
.engage-tier:nth-child(4n+2)::before,
.region-card:nth-child(4n+2)::before,
.values-card:nth-child(4n+2)::before,
.mag-stat-cell:nth-child(4n+2)::before { background: var(--gc-red) !important; }

.pain-card:nth-child(4n+2):hover,
.expert-card:nth-child(4n+2):hover,
.eco-card:nth-child(4n+2):hover,
.result-card:nth-child(4n+2):hover,
.svc-cap-card:nth-child(4n+2):hover,
.engage-tier:nth-child(4n+2):hover,
.region-card:nth-child(4n+2):hover,
.values-card:nth-child(4n+2):hover,
.mag-stat-cell:nth-child(4n+2):hover {
  border-color: rgba(234,67,53,0.3) !important;
  box-shadow: 0 8px 32px rgba(234,67,53,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  background: rgba(234,67,53,0.03) !important;
}

/* Google Yellow — 3rd, 7th, 11th cards */
.pain-card:nth-child(4n+3)::before,
.expert-card:nth-child(4n+3)::before,
.eco-card:nth-child(4n+3)::before,
.result-card:nth-child(4n+3)::before,
.svc-cap-card:nth-child(4n+3)::before,
.engage-tier:nth-child(4n+3)::before,
.region-card:nth-child(4n+3)::before,
.values-card:nth-child(4n+3)::before,
.mag-stat-cell:nth-child(4n+3)::before { background: var(--gc-yellow) !important; }

.pain-card:nth-child(4n+3):hover,
.expert-card:nth-child(4n+3):hover,
.eco-card:nth-child(4n+3):hover,
.result-card:nth-child(4n+3):hover,
.svc-cap-card:nth-child(4n+3):hover,
.engage-tier:nth-child(4n+3):hover,
.region-card:nth-child(4n+3):hover,
.values-card:nth-child(4n+3):hover,
.mag-stat-cell:nth-child(4n+3):hover {
  border-color: rgba(251,188,5,0.4) !important;
  box-shadow: 0 8px 32px rgba(251,188,5,0.14), 0 2px 8px rgba(0,0,0,0.06) !important;
  background: rgba(251,188,5,0.03) !important;
}

/* Google Green — 4th, 8th, 12th cards */
.pain-card:nth-child(4n+4)::before,
.expert-card:nth-child(4n+4)::before,
.eco-card:nth-child(4n+4)::before,
.result-card:nth-child(4n+4)::before,
.svc-cap-card:nth-child(4n+4)::before,
.engage-tier:nth-child(4n+4)::before,
.region-card:nth-child(4n+4)::before,
.values-card:nth-child(4n+4)::before,
.mag-stat-cell:nth-child(4n+4)::before { background: var(--gc-green) !important; }

.pain-card:nth-child(4n+4):hover,
.expert-card:nth-child(4n+4):hover,
.eco-card:nth-child(4n+4):hover,
.result-card:nth-child(4n+4):hover,
.svc-cap-card:nth-child(4n+4):hover,
.engage-tier:nth-child(4n+4):hover,
.region-card:nth-child(4n+4):hover,
.values-card:nth-child(4n+4):hover,
.mag-stat-cell:nth-child(4n+4):hover {
  border-color: rgba(52,168,83,0.3) !important;
  box-shadow: 0 8px 32px rgba(52,168,83,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
  background: rgba(52,168,83,0.03) !important;
}

/* Lift on hover — universal */
.pain-card:hover, .expert-card:hover, .hww-block:hover,
.eco-card:hover, .eco-pool:hover, .region-card:hover,
.engage-tier:hover, .result-card:hover, .funnel-step:hover,
.approach-step:hover, .impact-card:hover,
.svc-cap-card:hover, .svc-engage-card:hover,
.shelf-card:hover, .win-item:hover, .values-card:hover,
.mag-stat-cell:hover, .secondary-stat-cell:hover {
  transform: translateY(-4px) !important;
}

/* ── eco-pool Google-color nth-child bars (Ecosystem cards) ── */
.eco-pool::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 4px !important;
  border-radius: 4px 0 0 4px !important;
  transform: scaleY(0) !important;
  transform-origin: bottom center !important;
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1) !important;
  z-index: 2 !important;
}
.eco-pool:hover::before { transform: scaleY(1) !important; }
.eco-pool:nth-child(4n+1)::before { background: var(--gc-blue) !important; }
.eco-pool:nth-child(4n+2)::before { background: var(--gc-red) !important; }
.eco-pool:nth-child(4n+3)::before { background: var(--gc-yellow) !important; }
.eco-pool:nth-child(4n+4)::before { background: var(--gc-green) !important; }
.eco-pool:nth-child(4n+1):hover { border-color: rgba(66,133,244,0.35) !important; box-shadow: 0 8px 32px rgba(66,133,244,0.14) !important; background: rgba(66,133,244,0.03) !important; }
.eco-pool:nth-child(4n+2):hover { border-color: rgba(234,67,53,0.3) !important; box-shadow: 0 8px 32px rgba(234,67,53,0.12) !important; background: rgba(234,67,53,0.03) !important; }
.eco-pool:nth-child(4n+3):hover { border-color: rgba(251,188,5,0.4) !important; box-shadow: 0 8px 32px rgba(251,188,5,0.14) !important; background: rgba(251,188,5,0.03) !important; }
.eco-pool:nth-child(4n+4):hover { border-color: rgba(52,168,83,0.35) !important; box-shadow: 0 8px 32px rgba(52,168,83,0.14) !important; background: rgba(52,168,83,0.03) !important; }

/* ── votc-card hover animation ── */
.votc-card {
  transition:
    transform 220ms cubic-bezier(0.16,1,0.3,1),
    box-shadow 220ms cubic-bezier(0.16,1,0.3,1),
    border-color 220ms cubic-bezier(0.16,1,0.3,1) !important;
  position: relative !important;
  overflow: hidden !important;
}
.votc-card::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 4px !important;
  border-radius: 4px 0 0 4px !important;
  transform: scaleY(0) !important;
  transform-origin: bottom center !important;
  transition: transform 260ms cubic-bezier(0.22,1,0.36,1) !important;
  z-index: 2 !important;
}
.votc-card:hover { transform: translateY(-4px) !important; }
.votc-card:hover::before { transform: scaleY(1) !important; }
.votc-card:nth-child(4n+1)::before { background: var(--gc-blue) !important; }
.votc-card:nth-child(4n+2)::before { background: var(--gc-red) !important; }
.votc-card:nth-child(4n+3)::before { background: var(--gc-yellow) !important; }
.votc-card:nth-child(4n+4)::before { background: var(--gc-green) !important; }
.votc-card:nth-child(4n+1):hover { border-color: rgba(66,133,244,0.35) !important; box-shadow: 0 8px 32px rgba(66,133,244,0.14) !important; }
.votc-card:nth-child(4n+2):hover { border-color: rgba(234,67,53,0.3) !important; box-shadow: 0 8px 32px rgba(234,67,53,0.12) !important; }
.votc-card:nth-child(4n+3):hover { border-color: rgba(251,188,5,0.4) !important; box-shadow: 0 8px 32px rgba(251,188,5,0.14) !important; }
.votc-card:nth-child(4n+4):hover { border-color: rgba(52,168,83,0.35) !important; box-shadow: 0 8px 32px rgba(52,168,83,0.14) !important; }

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL ACCENT FIX v2 — target .hc-em (the correct class)
═══════════════════════════════════════════════════════════════ */

/* Slide 3 (Gold) — white with shadow for legibility on bright gold */
.hc-slide--2 .hc-em {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
  font-style: normal !important;
}
/* Also fix body text contrast on gold */
.hc-slide--2 .hc-heading,
.hc-slide--2 h1, .hc-slide--2 h2 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Slide 4 (Green) — bright mint green */
.hc-slide--5 .hc-em {
  color: #6EE7A0 !important;
  -webkit-text-fill-color: #6EE7A0 !important;
  text-shadow: 0 0 24px rgba(110,231,160,0.45) !important;
  font-style: normal !important;
}

/* Slide 5 (Deep Blue) — bright periwinkle */
.hc-slide--6 .hc-em {
  color: #93C5FD !important;
  -webkit-text-fill-color: #93C5FD !important;
  text-shadow: 0 0 24px rgba(147,197,253,0.4) !important;
  font-style: normal !important;
}

/* Slide 1 (Blue) and Slide 2 (Red) — keep current light blue, it reads well */

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL ACCENT FINAL — highest specificity overrides
═══════════════════════════════════════════════════════════════ */

/* Slide 3 (Gold) — white, final override */
section.hero-carousel .hc-slide--2 .hc-em {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4) !important;
}

/* Slide 4 (Green) — bright mint */
section.hero-carousel .hc-slide--5 .hc-em {
  color: #6EE7A0 !important;
  -webkit-text-fill-color: #6EE7A0 !important;
  text-shadow: 0 0 28px rgba(110,231,160,0.5) !important;
}

/* Slide 5 (Deep Blue) — light periwinkle */
section.hero-carousel .hc-slide--6 .hc-em {
  color: #93C5FD !important;
  -webkit-text-fill-color: #93C5FD !important;
  text-shadow: 0 0 28px rgba(147,197,253,0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════
   CAROUSEL EYEBROW ICONS
═══════════════════════════════════════════════════════════════ */

.hc-eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.hc-icon {
  flex-shrink: 0 !important;
  opacity: 0.9 !important;
  color: currentColor !important;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.3)) !important;
}

/* Slide-specific icon tints to match slide accent colors */
.hc-slide--1 .hc-icon { color: #93c5fd !important; }
.hc-slide--2 .hc-icon { color: #fca5a5 !important; }
.hc-slide--2 .hc-icon { color: #FFE066 !important; }
.hc-slide--5 .hc-icon { color: #6EE7A0 !important; }
.hc-slide--6 .hc-icon { color: #93C5FD !important; }

/* ═══════════════════════════════════════════════════════════════
   CARD ICON UPGRADES — pain cards, services caps, ecosystem
═══════════════════════════════════════════════════════════════ */

/* Ensure card icon wrappers are styled consistently */
.pain-card .card-icon,
.svc-cap-card .cap-icon,
.eco-card .eco-icon,
.engage-tier .tier-icon,
.impact-card .impact-icon,
.values-card .values-icon {
  width: 48px !important;
  height: 48px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
  transition: transform 220ms cubic-bezier(0.16,1,0.3,1),
              box-shadow 220ms cubic-bezier(0.16,1,0.3,1) !important;
}

/* Google color icon backgrounds by nth-child */
.pain-card:nth-child(4n+1) .card-icon,
.svc-cap-card:nth-child(4n+1) .cap-icon,
.eco-card:nth-child(4n+1) .eco-icon { background: rgba(66,133,244,0.1) !important; color: #4285F4 !important; }

.pain-card:nth-child(4n+2) .card-icon,
.svc-cap-card:nth-child(4n+2) .cap-icon,
.eco-card:nth-child(4n+2) .eco-icon { background: rgba(234,67,53,0.1) !important; color: #EA4335 !important; }

.pain-card:nth-child(4n+3) .card-icon,
.svc-cap-card:nth-child(4n+3) .cap-icon,
.eco-card:nth-child(4n+3) .eco-icon { background: rgba(251,188,5,0.12) !important; color: #c49000 !important; }

.pain-card:nth-child(4n+4) .card-icon,
.svc-cap-card:nth-child(4n+4) .cap-icon,
.eco-card:nth-child(4n+4) .eco-icon { background: rgba(52,168,83,0.1) !important; color: #34A853 !important; }

/* Icon lift on card hover */
.pain-card:hover .card-icon,
.svc-cap-card:hover .cap-icon,
.eco-card:hover .eco-icon {
  transform: scale(1.12) rotate(-3deg) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12) !important;
}

/* ── FUNNEL STEP NUMBER — FINAL OVERRIDE ── */
.funnel-step-num {
  font-size: 4.2rem !important;
  font-weight: 900 !important;
  color: #0d2680 !important;
  opacity: 1 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  width: 72px !important;
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}

/* ── FUNNEL STAGE LEFT CARDS — ALL WHITE TEXT ── */
.funnel-stage-label,
.funnel-stage-sublabel {
  color: #ffffff !important;
  opacity: 1 !important;
}
.funnel-stage-icon svg * { stroke: #ffffff !important; }

/* ── FUNNEL STEP RIGHT CARDS — HOVER COLOR CHANGE ── */
.funnel-step {
  transition: box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease, border-color 0.25s ease !important;
}
.funnel-step:hover {
  background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%) !important;
  border-color: #4285F4 !important;
  box-shadow: 0 8px 28px rgba(13,38,128,0.18) !important;
  transform: translateY(-3px) !important;
}

/* ── FINAL: funnel left card text — bright white, bold, no fade ── */
.funnel-stage-sublabel {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 700 !important;
  font-size: 0.88rem !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
  -webkit-text-fill-color: #ffffff !important;
}
.funnel-stage-label {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* ══ FINAL AUTHORITY: All funnel left-card text = pure white, zero blur ══ */
.funnel-stage,
.funnel-stage *,
.funnel-stage--top,
.funnel-stage--top *,
.funnel-stage--mid,
.funnel-stage--mid *,
.funnel-stage--bot,
.funnel-stage--bot * {
  color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Tag chip appearance — bright white pill on all funnel cards */
.funnel-stage .ftag,
.funnel-stage--top .ftag,
.funnel-stage--mid .ftag,
.funnel-stage--bot .ftag {
  background: rgba(255,255,255,0.30) !important;
  border: 1.5px solid rgba(255,255,255,0.65) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

/* ══ CAROUSEL: second button matches first — solid blue, white text ══ */
.hc-ctas .btn-ghost,
.hc-ctas a.btn-ghost {
  background: #1a73e8 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: none !important;
  border-radius: 24px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
.hc-ctas .btn-ghost:hover,
.hc-ctas a.btn-ghost:hover {
  background: #1558b0 !important;
  transform: translateY(-1px) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════
   PROSPECTRAMP — FULL REDESIGN
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared tokens ── */
.pr-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1a73e8;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.pr-eyebrow-blue {
  font-size: 0.8rem;
  font-weight: 700;
  color: #1a73e8;
  letter-spacing: 0.04em;
}
.pr-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #9aa0a6;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-left: auto;
}

/* ══════════════════════════════════════
   1. HERO – Problem Statement
   ══════════════════════════════════════ */
.pr-hero {
  background: #ffffff;
  padding: 4.5rem 0 3.5rem;
  border-top: 1.5px solid #e8eaed;
}
.pr-hero-inner {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 3rem;
  align-items: center;
}
.pr-hero-h {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #202124;
  line-height: 1.15;
  margin: 0.5rem 0 1rem;
  letter-spacing: -0.03em;
}
.pr-hero-blue { color: #1a47cc; }
.pr-hero-body {
  font-size: 1rem;
  color: #3c4043;
  line-height: 1.65;
  margin-bottom: 1.25rem;
  max-width: 560px;
}
.pr-problem-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pr-problem-list li {
  font-size: 0.9rem;
  color: #3c4043;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.5;
}
.pr-problem-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #1a47cc;
  font-weight: 700;
}

.pr-hero-right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pr-logo-mark svg {
  width: 120px;
  height: 140px;
  opacity: 0.85;
}

/* ══════════════════════════════════════
   2. SOLUTION – 5-Stage Cards
   ══════════════════════════════════════ */
.pr-solution {
  background: #f8f9fa;
  padding: 3rem 0;
  border-top: 1.5px solid #e8eaed;
}
.pr-solution-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.75rem;
  border-bottom: 1.5px solid #e8eaed;
  padding-bottom: 0.75rem;
}
.pr-stages-v2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: #e8eaed;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  overflow: hidden;
}
.pr-stage-v2 {
  background: #ffffff;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pr-stage-v2-num {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #1a73e8;
  text-transform: uppercase;
}
.pr-stage-v2-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #202124;
  margin: 0;
  line-height: 1.3;
}
.pr-stage-v2-desc {
  font-size: 0.8rem;
  color: #5f6368;
  margin: 0;
  line-height: 1.55;
}

/* ══════════════════════════════════════
   3. VOLUME – 10–100x
   ══════════════════════════════════════ */
.pr-volume-section {
  background: #ffffff;
  padding: 4rem 0;
  border-top: 1.5px solid #e8eaed;
}
.pr-volume-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.pr-volume-headline {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: #202124;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin: 0 0 1rem;
}
.pr-volume-body {
  font-size: 0.95rem;
  color: #3c4043;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.pr-volume-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pr-volume-bullets li {
  font-size: 0.875rem;
  color: #3c4043;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.55;
}
.pr-volume-bullets li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #1a47cc;
  font-weight: 700;
}

.pr-volume-right {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1.5px solid #e8eaed;
  border-radius: 12px;
  overflow: hidden;
}
.pr-vol-tier {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pr-vol-tier--dim  { background: #f8f9fa; }
.pr-vol-tier--mid  { background: #f1f3f4; }
.pr-vol-tier--hero { background: #ffffff; padding-bottom: 1.5rem; }

.pr-vol-divider {
  height: 1px;
  background: #e8eaed;
}
.pr-vol-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9aa0a6;
  text-transform: uppercase;
}
.pr-vol-label--blue { color: #1a73e8; }
.pr-vol-num {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: #9aa0a6;
  letter-spacing: -0.04em;
  line-height: 1;
}
.pr-vol-num--hero {
  font-size: clamp(3rem, 6vw, 5rem);
  color: #202124;
}
.pr-vol-unit {
  font-size: 0.8rem;
  color: #9aa0a6;
  font-weight: 500;
}
.pr-vol-underline {
  height: 3px;
  background: #1a47cc;
  width: 48px;
  border-radius: 2px;
  margin-top: 0.5rem;
}

/* ══════════════════════════════════════
   4. FUNNEL – Reply-Rate
   ══════════════════════════════════════ */
.pr-funnel-section {
  background: #f8f9fa;
  padding: 4rem 0;
  border-top: 1.5px solid #e8eaed;
}
.pr-funnel-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1.5px solid #e8eaed;
  padding-bottom: 0.75rem;
}
.pr-funnel-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}
.pr-funnel-row {
  display: grid;
  grid-template-columns: 200px 1fr 240px;
  align-items: center;
  gap: 1.5rem;
}
.pr-funnel-left-text {
  text-align: right;
  padding-right: 1rem;
}
.pr-funnel-stage-lbl {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #9aa0a6;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.pr-funnel-stage-name {
  font-size: 1rem;
  font-weight: 700;
  color: #202124;
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.pr-funnel-sub {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #1a73e8;
  text-transform: uppercase;
}

/* Trapezoid funnel shapes using clip-path */
.pr-funnel-shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem;
  color: #ffffff;
  text-align: center;
  min-height: 80px;
  position: relative;
}
.pr-funnel-shape--1 {
  background: #1a47cc;
  clip-path: polygon(5% 0%, 95% 0%, 88% 100%, 12% 100%);
}
.pr-funnel-shape--2 {
  background: #1a3a99;
  clip-path: polygon(12% 0%, 88% 0%, 80% 100%, 20% 100%);
}
.pr-funnel-shape--3 {
  background: #0d2680;
  clip-path: polygon(20% 0%, 80% 0%, 70% 100%, 30% 100%);
}
.pr-funnel-pct {
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #ffffff;
}
.pr-funnel-pct-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin-top: 0.3rem;
}
.pr-funnel-right-text {
  font-size: 0.85rem;
  color: #5f6368;
  line-height: 1.6;
}
.pr-funnel-right-text p { margin: 0; }
.pr-funnel-right-text strong { color: #202124; }

/* ── Why It Matters math bar ── */
.pr-math-bar {
  background: linear-gradient(135deg, #0d2680 0%, #1a47cc 50%, #4285F4 100%);
  border-radius: 14px;
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.pr-math-left {
  flex-shrink: 0;
  max-width: 200px;
}
.pr-math-why {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.pr-math-tagline {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
}
.pr-math-flow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  flex-wrap: wrap;
  justify-content: center;
}
.pr-math-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.pr-math-val {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.pr-math-lbl {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  text-align: center;
}
.pr-math-node--highlight {
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 10px;
  padding: 0.5rem 1rem;
}
.pr-math-node--highlight .pr-math-lbl { color: rgba(255,255,255,0.85); }
.pr-math-arrow {
  font-size: 1.2rem;
  color: rgba(255,255,255,0.4);
}

/* ══════════════════════════════════════
   5. WHO WE WORK WITH + BENEFITS
   ══════════════════════════════════════ */
.pr-clients-section {
  background: #ffffff;
  padding: 4rem 0;
  border-top: 1.5px solid #e8eaed;
}
.pr-clients-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 2rem;
  border-bottom: 1.5px solid #e8eaed;
  padding-bottom: 0.75rem;
}
.pr-clients-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.pr-clients-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #202124;
  margin: 0 0 0.5rem;
}
.pr-clients-sub {
  font-size: 0.875rem;
  color: #5f6368;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.pr-team-tiers {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.pr-team-tier {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.pr-team-badge {
  background: #e8f0fe;
  color: #1a47cc;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  text-align: center;
  min-width: 52px;
  flex-shrink: 0;
}
.pr-team-badge span { display: block; font-size: 0.6rem; font-weight: 600; opacity: 0.75; }
.pr-team-badge--dark { background: #1a47cc; color: #ffffff; }
.pr-team-badge--dark span { opacity: 0.8; }
.pr-team-text strong { display: block; font-size: 0.9rem; color: #202124; margin-bottom: 0.2rem; }
.pr-team-text p { font-size: 0.82rem; color: #5f6368; margin: 0; line-height: 1.55; }

/* Benefits grid */
.pr-benefits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.pr-benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.pr-benefit-icon { flex-shrink: 0; margin-top: 2px; }
.pr-benefit strong { display: block; font-size: 0.875rem; color: #202124; margin-bottom: 0.2rem; }
.pr-benefit p { font-size: 0.8rem; color: #5f6368; margin: 0; line-height: 1.5; }

/* ══════════════════════════════════════
   6. STATS BAR
   ══════════════════════════════════════ */
.pr-stats-bar-v2 {
  background: #1a47cc;
  padding: 2.5rem 0;
}
.pr-stats-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.pr-stat-v2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 2rem;
  flex: 1 1 140px;
}
.pr-stat-v2-num {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1;
}
.pr-stat-v2-unit { font-size: 1rem; font-weight: 600; }
.pr-stat-v2-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.65);
  text-transform: uppercase;
  text-align: center;
}
.pr-stat-v2-div {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */
@media (max-width: 900px) {
  .pr-hero-inner      { grid-template-columns: 1fr; }
  .pr-hero-right      { display: none; }
  .pr-volume-inner    { grid-template-columns: 1fr; gap: 2rem; }
  .pr-stages-v2       { grid-template-columns: 1fr 1fr; }
  .pr-stages-v2 .pr-stage-v2:last-child { grid-column: span 2; }
  .pr-clients-grid    { grid-template-columns: 1fr; }
  .pr-funnel-row      { grid-template-columns: 1fr; gap: 0.5rem; }
  .pr-funnel-left-text{ text-align: left; padding-right: 0; }
  .pr-funnel-shape    { clip-path: none !important; border-radius: 8px; }
  .pr-math-bar        { flex-direction: column; align-items: flex-start; }
  .pr-math-left       { max-width: 100%; }
}
@media (max-width: 600px) {
  .pr-stages-v2       { grid-template-columns: 1fr; }
  .pr-stages-v2 .pr-stage-v2:last-child { grid-column: span 1; }
  .pr-benefits-grid   { grid-template-columns: 1fr; }
  .pr-stat-v2-div     { display: none; }
  .pr-stat-v2         { padding: 0.5rem 1rem; }
}

/* ── Contrast overrides for ProspectRamp dark bg elements ── */
.pr-stats-bar-v2 .pr-stat-v2-num,
.pr-stats-bar-v2 .pr-stat-v2-num * {
  color: #ffffff !important;
}
.pr-stats-bar-v2 .pr-stat-v2-lbl {
  color: rgba(255,255,255,0.7) !important;
}
.pr-math-bar .pr-math-tagline,
.pr-math-bar .pr-math-val,
.pr-math-bar .pr-math-node--highlight .pr-math-val {
  color: #ffffff !important;
}
.pr-math-bar .pr-math-why,
.pr-math-bar .pr-math-lbl {
  color: rgba(255,255,255,0.7) !important;
}
.pr-funnel-shape .pr-funnel-pct,
.pr-funnel-shape .pr-funnel-pct-lbl {
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════
   MID-FUNNEL PLAYBOOK CAPTURE SECTION
   ══════════════════════════════════════════════════════════════ */
.playbook-capture-section {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 50%, #f5f5f5 100%);
  border-top: 1px solid #dce3f5;
  border-bottom: 1px solid #dce3f5;
  padding: 5rem 0;
}

.playbook-capture-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

/* ── Left side ── */
.playbook-heading {
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 800;
  color: #202124;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.playbook-subhead {
  font-size: 1.05rem;
  color: #3c4043;
  line-height: 1.65;
  margin-bottom: 1.75rem;
}

.playbook-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.playbook-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.95rem;
  color: #3c4043;
  line-height: 1.5;
}

.playbook-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background: #1a73e8;
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 900;
  margin-top: 1px;
}

.playbook-fine {
  font-size: 0.8rem;
  color: #5f6368;
  line-height: 1.5;
  border-left: 3px solid #1a73e8;
  padding-left: 0.75rem;
  margin: 0;
}

/* ── Right side: form card ── */
.playbook-right {
  display: flex;
  justify-content: center;
}

.playbook-form-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(26, 115, 232, 0.10), 0 1px 4px rgba(0,0,0,0.06);
  padding: 2.25rem 2rem;
  width: 100%;
  max-width: 460px;
  border: 1px solid #e8eaf6;
}

.playbook-form-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a73e8;
  margin-bottom: 0.4rem;
}

.playbook-form-desc {
  font-size: 0.9rem;
  color: #5f6368;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

/* HubSpot embed inside playbook card */
.playbook-hs-wrap {
  width: 100%;
}
.playbook-hs-wrap .hs-form-frame {
  width: 100% !important;
  min-height: 280px;
  display: block;
}
.playbook-hs-wrap iframe {
  width: 100% !important;
  border: none !important;
  border-radius: 8px !important;
}

.playbook-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.playbook-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.playbook-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #3c4043;
  letter-spacing: 0.04em;
}

.playbook-input {
  padding: 0.7rem 0.9rem;
  border: 1.5px solid #dadce0;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  color: #202124;
  background: #fff;
  transition: border-color 0.18s, box-shadow 0.18s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.playbook-input:focus {
  border-color: #1a73e8;
  box-shadow: 0 0 0 3px rgba(26,115,232,0.12);
}

.playbook-input.playbook-error {
  border-color: #d93025;
  box-shadow: 0 0 0 3px rgba(217,48,37,0.10);
}

.playbook-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f6368' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}

.playbook-submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
}

.playbook-privacy {
  font-size: 0.72rem;
  color: #80868b;
  line-height: 1.45;
  text-align: center;
  margin: 0;
}

/* ── Success state ── */
.playbook-success {
  text-align: center;
  padding: 1rem 0.5rem;
}

.playbook-success-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #34a853, #1e8a40);
  color: #fff;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: 1rem;
}

.playbook-success-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #202124;
  margin: 0 0 0.6rem;
}

.playbook-success-msg {
  font-size: 0.92rem;
  color: #3c4043;
  line-height: 1.6;
  margin: 0;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .playbook-capture-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .playbook-form-card {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .playbook-capture-section {
    padding: 3.5rem 0;
  }
  .playbook-form-card {
    padding: 1.75rem 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
   CHANNEL DEEP-DIVE SECTION
═══════════════════════════════════════════════════════════════ */
.channel-dive {
  background: #f8f9fa;
  padding: 5rem 0;
  border-top: 1px solid #e8eaed;
}

/* Channel nav pill bar */
.ch-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2.5rem;
  padding: 1rem 1.5rem;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e8eaed;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.ch-nav-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.25rem;
  border-radius: 50px;
  border: 1.5px solid #dadce0;
  background: #ffffff;
  color: #3c4043;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  letter-spacing: -0.01em;
}
.ch-nav-btn svg { opacity: 0.6; transition: opacity 0.2s; }
.ch-nav-btn:hover {
  border-color: #1a73e8;
  color: #1a73e8;
  background: #e8f0fe;
}
.ch-nav-btn:hover svg { opacity: 1; }
.ch-nav-btn.active {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(26,115,232,0.35);
}
.ch-nav-btn.active svg { opacity: 1; }

/* Panels */
.ch-panels { position: relative; }
.ch-panel { display: none; }
.ch-panel.active { display: block; animation: chFadeIn 0.3s ease; }
@keyframes chFadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Panel grid: left copy | right infographic */
.ch-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid #e8eaed;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  overflow: hidden;
}

.ch-panel-left {
  padding: 2.5rem 2rem 2.5rem 2.5rem;
}

.ch-badge {
  display: inline-block;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.25rem;
}

.ch-panel-title {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 800;
  color: #202124;
  letter-spacing: -0.025em;
  margin: 0 0 1rem;
  line-height: 1.2;
}

.ch-panel-desc {
  font-size: 0.97rem;
  color: #3c4043;
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

.ch-what-we-do {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ch-what-we-do li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: #3c4043;
  line-height: 1.5;
}
.ch-what-we-do li::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a73e8;
  margin-top: 0.5em;
  flex-shrink: 0;
}

/* Right infographic panel */
.ch-panel-right {
  background: linear-gradient(160deg, #f8f9fa 0%, #ffffff 100%);
  border-left: 1px solid #e8eaed;
  padding: 2.5rem 2.5rem 2.5rem 2rem;
}

.ch-infographic {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ch-info-header {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5f6368;
  padding-bottom: 0.75rem;
  border-bottom: 1.5px solid #e8eaed;
}

/* 2×2 stat card grid */
.ch-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.ch-stat-card {
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-top: 3px solid var(--accent, #1a73e8);
  border-radius: 12px;
  padding: 1rem 1rem 0.85rem;
  transition: box-shadow 0.2s;
}
.ch-stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

.ch-stat-num {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--accent, #1a73e8);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.ch-stat-label {
  font-size: 0.78rem;
  color: #3c4043;
  line-height: 1.4;
  font-weight: 500;
  margin-bottom: 0.4rem;
}

.ch-stat-source {
  font-size: 0.68rem;
  color: #9aa0a6;
  font-style: italic;
  letter-spacing: 0.01em;
}

/* Bar charts */
.ch-bar-section { display: flex; flex-direction: column; gap: 0.35rem; }
.ch-bar-label { font-size: 0.78rem; font-weight: 600; color: #5f6368; }
.ch-bar-track {
  height: 10px;
  background: #e8eaed;
  border-radius: 99px;
  overflow: hidden;
}
.ch-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
.ch-bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #9aa0a6;
}

/* Insight callout box */
.ch-insight-box {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: #e8f0fe;
  border: 1px solid #1a73e8;
  border-radius: 10px;
  padding: 0.9rem 1rem;
}
.ch-insight-icon {
  font-size: 1rem;
  color: #1a73e8;
  flex-shrink: 0;
  margin-top: 1px;
}
.ch-insight-text {
  font-size: 0.82rem;
  color: #202124;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   COMPARISON TABLE SECTION
═══════════════════════════════════════════════════════════════ */
.compare-section {
  background: #ffffff;
  padding: 5rem 0;
  border-top: 1px solid #e8eaed;
}

.compare-wrapper { max-width: 100%; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; box-shadow: 0 4px 32px rgba(0,0,0,0.09); border: 1px solid #e8eaed; }

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  background: #ffffff;
}

/* Header row */
.compare-th {
  padding: 1.1rem 1.25rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #5f6368;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  background: #f8f9fa;
  border-bottom: 2px solid #e8eaed;
  white-space: nowrap;
}
.compare-th--feature {
  text-align: left;
  width: 20%;
  color: #202124;
}
.compare-th--optimus {
  background: linear-gradient(160deg, #e8f0fe, #f0f4ff);
  color: #1a73e8;
  border-bottom: 3px solid #1a73e8;
  position: relative;
}

.compare-badge {
  display: inline-block;
  background: #1a73e8;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.55rem;
  border-radius: 50px;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Body rows */
.compare-td {
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  color: #3c4043;
  text-align: center;
  border-bottom: 1px solid #f1f3f4;
  vertical-align: top;
}
.compare-td--feature {
  text-align: left;
  font-weight: 700;
  color: #202124;
  font-size: 0.9rem;
  background: #fafafa;
}
.compare-td--optimus {
  background: linear-gradient(160deg, #f0f4ff, #f8faff);
  border-left: 2px solid #1a73e8;
  border-right: 2px solid #1a73e8;
}
.compare-row--alt td { background: #fafafa; }
.compare-row--alt .compare-td--feature { background: #f5f6f7; }
.compare-row--alt .compare-td--optimus { background: linear-gradient(160deg, #e8f0fe, #f0f6ff); }

/* Value indicators */
.cmp-good {
  display: inline-block;
  color: #137333;
  font-weight: 800;
  font-size: 0.95rem;
}
.cmp-mid {
  display: inline-block;
  color: #b45309;
  font-weight: 700;
  font-size: 0.95rem;
}
.cmp-bad {
  display: inline-block;
  color: #c5221f;
  font-weight: 700;
  font-size: 0.95rem;
}
.cmp-sub {
  font-size: 0.72rem;
  color: #9aa0a6;
  margin-top: 0.2rem;
  line-height: 1.3;
}

.compare-footnote {
  font-size: 0.75rem;
  color: #9aa0a6;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #f1f3f4;
  font-style: italic;
  background: #fafafa;
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* Responsive */
@media (max-width: 900px) {
  .ch-panel-grid {
    grid-template-columns: 1fr;
  }
  .ch-panel-right {
    border-left: none;
    border-top: 1px solid #e8eaed;
  }
  .ch-nav-btn {
    font-size: 0.8rem;
    padding: 0.5rem 0.9rem;
  }
  .ch-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .ch-stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ch-nav { gap: 0.4rem; padding: 0.75rem; }
  .ch-panel-left, .ch-panel-right { padding: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HUBSPOT FORM OVERRIDES — match site design
═══════════════════════════════════════════════════════════════ */
.hs-form-wrap {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e8eaed;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  padding: 2rem 2rem 1.5rem;
  min-height: 200px;
}

/* HubSpot injects an iframe — make it fill the wrapper */
.hs-form-wrap iframe,
.hs-form-frame {
  width: 100% !important;
  border: none !important;
  display: block;
}

/* Labels */
.hs-form-wrap .hs-form-field label,
.hs-form-wrap .hs_firstname label,
.hs-form-wrap .hs_email label {
  font-family: 'Satoshi', sans-serif !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #202124 !important;
  margin-bottom: 0.35rem !important;
}

/* Inputs */
.hs-form-wrap input[type="text"],
.hs-form-wrap input[type="email"],
.hs-form-wrap select,
.hs-form-wrap textarea {
  font-family: 'Satoshi', sans-serif !important;
  font-size: 0.95rem !important;
  color: #202124 !important;
  background: #f8f9fa !important;
  border: 1.5px solid #dadce0 !important;
  border-radius: 8px !important;
  padding: 0.65rem 0.9rem !important;
  width: 100% !important;
  transition: border-color 0.2s !important;
}
.hs-form-wrap input:focus,
.hs-form-wrap select:focus,
.hs-form-wrap textarea:focus {
  border-color: #1a73e8 !important;
  outline: none !important;
  background: #fff !important;
}

/* Submit button */
.hs-form-wrap input[type="submit"],
.hs-form-wrap .hs-button {
  background: #1a73e8 !important;
  color: #ffffff !important;
  font-family: 'Satoshi', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 0.875rem 2rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  margin-top: 0.5rem !important;
  letter-spacing: -0.01em !important;
}
.hs-form-wrap input[type="submit"]:hover,
.hs-form-wrap .hs-button:hover {
  background: #1558b0 !important;
}

/* Error messages */
.hs-form-wrap .hs-error-msg {
  color: #c5221f !important;
  font-size: 0.78rem !important;
  margin-top: 0.25rem !important;
}

/* Loading state */
.hs-form-wrap::before {
  content: 'Loading form...';
  display: block;
  text-align: center;
  color: #9aa0a6;
  font-size: 0.88rem;
  padding: 2rem 0 1rem;
}
.hs-form-wrap:has(iframe)::before,
.hs-form-wrap:has(.hs-form)::before {
  display: none;
}

/* Hide loading placeholder once HubSpot confirmed loaded or fallback shown */
.hs-form-wrap.hs-loaded::before { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   SLIDE 9 — COMPARISON GRID  (carousel card)
   ═══════════════════════════════════════════════════════════════ */

/* Full-width content override (no split layout) */
.hc-content--wide {
  max-width: 1100px !important;
  width: 90% !important;
  margin: 0 auto !important;
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.75rem !important;
}

/* Centred text block */
.hc-text--centered {
  text-align: center !important;
  max-width: 680px !important;
}

/* Smaller headline for dense content slides */
.hc-headline--sm {
  font-size: clamp(1.5rem, 3vw, 2.25rem) !important;
  line-height: 1.25 !important;
  margin-bottom: 0 !important;
}

/* ── Compare grid wrapper ── */
.hc-compare-grid {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr !important;
  gap: 0 !important;
  width: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* ── Base cell ── */
.hcc-cell {
  padding: 0.6rem 0.85rem !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-align: center !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.3 !important;
}
.hcc-cell:nth-child(-n+5) {
  /* first row — no border-top */
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}
.hcc-cell:nth-last-child(-n+5) {
  border-bottom: none !important;
}

/* ── Row label (first column) ── */
.hcc-row-label {
  text-align: left !important;
  justify-content: flex-start !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  color: rgba(255,255,255,0.75) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.75) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  background: rgba(255,255,255,0.04) !important;
  padding-left: 1.1rem !important;
}

/* Empty corner label cell */
.hcc-label {
  background: rgba(255,255,255,0.06) !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

/* ── Column headers ── */
.hcc-head {
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.65) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.65) !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  padding: 0.75rem 0.5rem !important;
}

/* Winning column header — Optimus blue highlight */
.hcc-head--win {
  background: rgba(26,115,232,0.35) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-left: 2px solid #1a73e8 !important;
  border-right: 2px solid #1a73e8 !important;
}

/* ── Value cells ── */
/* Green = Optimus wins */
.hcc-win {
  background: rgba(26,115,232,0.15) !important;
  color: #6ee7b7 !important;
  -webkit-text-fill-color: #6ee7b7 !important;
  font-weight: 700 !important;
  border-left: 2px solid #1a73e8 !important;
  border-right: 2px solid #1a73e8 !important;
}

/* Amber = middle ground */
.hcc-mid {
  color: #fcd34d !important;
  -webkit-text-fill-color: #fcd34d !important;
  font-weight: 500 !important;
}

/* Red-muted = competitor disadvantage */
.hcc-bad {
  color: #fca5a5 !important;
  -webkit-text-fill-color: #fca5a5 !important;
  font-weight: 500 !important;
  opacity: 0.85 !important;
}

/* Optimus win column last row — close blue border */
.hc-compare-grid > .hcc-win:nth-last-child(1) {
  border-bottom-right-radius: 10px !important;
}
.hc-compare-grid > .hcc-head--win:first-of-type {
  border-top-right-radius: 10px !important;
  border-top-left-radius: 0 !important;
}

/* Slide 9 eye-brow icon tint — light blue */
.hc-slide--9 .hc-icon {
  color: #93c5fd !important;
}

/* Slide 9 eyebrow and headline white */
.hc-slide--9 .hc-eyebrow,
.hc-slide--9 .hc-headline {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Float animation stagger for slide 9 */
.hc-slide--9 .hc-svg { animation-delay: -6s; }

/* Glow accent for slide 9 */
.hc-slide--9 .hc-visual::after {
  content: '' !important;
  position: absolute !important;
  width: 240px !important;
  height: 240px !important;
  border-radius: 50% !important;
  background: rgba(26,115,232,0.25) !important;
  filter: blur(60px) !important;
  top: 20% !important;
  right: -60px !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

/* Responsive: stack grid to scrollable on mobile */
@media (max-width: 768px) {
  .hc-content--wide {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
    gap: 1.25rem !important;
  }
  .hc-compare-grid {
    grid-template-columns: 1.2fr 0.9fr 0.9fr 0.9fr 0.9fr !important;
    font-size: 0.7rem !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    min-width: 480px !important;
  }
  .hc-headline--sm {
    font-size: 1.3rem !important;
  }
  .hcc-cell {
    padding: 0.45rem 0.5rem !important;
    font-size: 0.72rem !important;
  }
}


/* ═══ OVERFLOW FIXES — Slides 5 & 7 ═══════════════════════════ */

/* Slide 5 (Alliance Manager): tall headline pushes CTAs below fold */
.hc-slide--5 .hc-headline {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 1rem !important;
}
.hc-slide--5 .hc-sub {
  font-size: 0.97rem !important;
  margin-bottom: 1.4rem !important;
  line-height: 1.6 !important;
}
.hc-slide--5 .hc-content--split {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}

/* Slide 7 (CSP/MSP): SVG infographic clips at right edge */
.hc-slide--7 .hc-visual {
  overflow: hidden !important;
}
.hc-slide--7 .hc-svg {
  max-width: 340px !important;
  width: 100% !important;
}

/* ═══ PLAYBOOK — CTA card + modal ═══════════════════════════════ */

/* CTA card replacing always-visible form */
.playbook-cta-card {
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
}
.playbook-cta-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a73e8;
  background: rgba(26,115,232,0.08);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}
.playbook-cta-icon {
  margin-top: 0.25rem;
}
.playbook-cta-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #202124;
  line-height: 1.3;
  margin: 0;
}
.playbook-cta-desc {
  font-size: 0.97rem;
  color: #5f6368;
  line-height: 1.6;
  margin: 0;
}
.playbook-open-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}
.playbook-cta-fine {
  font-size: 0.8rem;
  color: #9aa0a6;
  margin: 0;
  line-height: 1.5;
}

/* Modal overlay */
.playbook-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.playbook-modal-overlay[style*="display:none"],
.playbook-modal-overlay[style*="display: none"] {
  display: none !important;
}
.playbook-modal-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 2.5rem 2.25rem 2rem;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22);
  animation: modalIn 0.22s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.playbook-modal-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 1.6rem;
  line-height: 1;
  background: none;
  border: none;
  color: #9aa0a6;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.playbook-modal-close:hover { color: #202124; background: #f1f3f4; }
.playbook-modal-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1a73e8;
  margin-bottom: 0.6rem;
}
.playbook-modal-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #202124;
  margin: 0 0 0.4rem;
  line-height: 1.3;
  padding-right: 2rem;
}
.playbook-modal-sub {
  font-size: 0.93rem;
  color: #5f6368;
  margin: 0 0 1.25rem;
  line-height: 1.55;
}