:root {
  --navy: #0F0F0F;
  --navy-dark: #171717;
  --teal: #00B4FF;
  --teal-dark: #00B4FF;
  --teal-light: #00B4FF;
  --teal-vivid: #00B4FF;
  --teal-muted: rgba(0,180,255,0.12);
  --teal-subtle: rgba(0,180,255,0.06);
  --text-primary: #0F0F0F;      /* L1 headings */
  --text-heading-alt: #1A1A1A;  /* L2 card titles, subheadings */
  --text-body: #4A4A4A;         /* L3 body paragraphs */
  /* Display-type token - keep Georgia/italic headings pure black, never gray.
     Used by pillars titles, hero italics, and anywhere we were falling through
     to --text-body by mistake. */
  --text: #0A0A0A;
  --text-secondary: #6B6B6B;    /* L4 card excerpts, meta */
  --text-caption: #8A8A8A;      /* L5 captions, footnotes */
  --text-inverse: #FFFFFF;
  --text-inverse-muted: rgba(255,255,255,0.65);
  --bg-primary: #FFFFFF;
  --bg-subtle: #FAFAF8;
  --bg-muted: #F4F3F0;
  --bg-navy: #0F0F0F;
  --bg-dark: #171717;
  --border-hairline: rgba(15,15,15,0.06);
  --border-default: rgba(15,15,15,0.10);
  --border-strong: rgba(15,15,15,0.18);
  --font-display: 'Georgia', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  /* Premium institutional timing - Blackstone/KKR/Carlyle tier */
  --hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hover-duration: 0.5s;
  --hover-duration-fast: 0.35s;
  --max-width: 1280px;
  --gutter: 64px;
  /* Edge of the 1280px container from viewport edge - used by full-bleed sections
     (cta-v3, pillar-v2 banners) to align their content with the page grid. */
  --page-inset: max(var(--gutter), calc((100vw - var(--max-width)) / 2 + var(--gutter)));
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) *, :where(.cfgi-redesign-chrome, .cfgi-homepage) *::before, :where(.cfgi-redesign-chrome, .cfgi-homepage) *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* All H1s are Georgia italic - editorial CFGI voice, no exceptions. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) h1, :where(.cfgi-redesign-chrome, .cfgi-homepage) h1 * { font-family: var(--font-display); font-style: italic; }
  /* Lenis owns scroll - native smooth-scroll would fight it */
:where(.cfgi-redesign-chrome, .cfgi-homepage) {
  font-family: var(--font-body);
  background: var(--bg-subtle);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) img { max-width: 100%; display: block; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) a { color: inherit; text-decoration: none; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) button { font-family: inherit; cursor: pointer; border: none; background: none; }

:where(.cfgi-redesign-chrome, .cfgi-homepage) ::selection {
  background: rgba(0,180,255,0.25);
  color: var(--navy);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) ::-moz-selection {
  background: rgba(0,180,255,0.25);
  color: var(--navy);
}

/* Eyebrow / inline teal callouts - use navy highlight so it stays legible */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eyebrow::selection, :where(.cfgi-redesign-chrome, .cfgi-homepage) [style*="color: var(--teal)"]::selection {
  background: rgba(15,15,15, 0.2);
  color: var(--navy);
}

/* For text on dark/navy backgrounds - inverted selection */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer ::selection, :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-banner ::selection, :where(.cfgi-redesign-chrome, .cfgi-homepage) .ai-section ::selection, :where(.cfgi-redesign-chrome, .cfgi-homepage) [class*="navy"] ::selection {
  background: rgba(157,212,48, 0.4);
  color: var(--text-inverse);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer ::-moz-selection, :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-banner ::-moz-selection, :where(.cfgi-redesign-chrome, .cfgi-homepage) .ai-section ::-moz-selection {
  background: rgba(157,212,48, 0.4);
  color: var(--text-inverse);
}

/* All Georgia (display) text renders italic - editorial magazine feel */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .section-title, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-headline .headline-static, :where(.cfgi-redesign-chrome, .cfgi-homepage) .stat-number, :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-banner h2 {
  font-style: italic;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00B4FF;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: #00B4FF;
  display: inline-block;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eyebrow-line { display: none; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eyebrow.on-dark { color: var(--teal-light); }

:where(.cfgi-redesign-chrome, .cfgi-homepage) .section-title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-size: clamp(28px, 3.2vw, 40px);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   SCROLL REVEAL SYSTEM
   ═══════════════════════════════════════════════════════════ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Belt-and-braces for Elementor editor: even if JS hasn't run yet (or fails),
 * the editor sets these classes on body/html so editors can see content
 * immediately instead of staring at blank sections.
 * Covers both [data-reveal] elements AND widget-specific reveal patterns
 * (like .cta-v2 which uses .is-revealed on the parent to drive opacity:0
 * children, separately from the global data-reveal system). */
body.elementor-editor-active [data-reveal],
body.elementor-edit-mode [data-reveal],
html.elementor-html [data-reveal],
body.elementor-editor-active .cta-v2 .cta-line,
body.elementor-editor-active .cta-v2 .cta-v2__subline,
body.elementor-editor-active .cta-v2 .cta-v2__btn,
body.elementor-edit-mode .cta-v2 .cta-line,
body.elementor-edit-mode .cta-v2 .cta-v2__subline,
body.elementor-edit-mode .cta-v2 .cta-v2__btn,
html.elementor-html .cta-v2 .cta-line,
html.elementor-html .cta-v2 .cta-v2__subline,
html.elementor-html .cta-v2 .cta-v2__btn {
  opacity: 1 !important;
  transform: none !important;
}

/* Stagger delays stored as --reveal-delay custom property so they only affect
   opacity/transform reveal transitions, NOT hover transitions on the cards. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal-stagger] > [data-reveal]:nth-child(1) { --reveal-delay: 250ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal-stagger] > [data-reveal]:nth-child(2) { --reveal-delay: 330ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal-stagger] > [data-reveal]:nth-child(3) { --reveal-delay: 410ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal-stagger] > [data-reveal]:nth-child(4) { --reveal-delay: 490ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal-stagger] > [data-reveal]:nth-child(5) { --reveal-delay: 570ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal-stagger] > [data-reveal]:nth-child(6) { --reveal-delay: 630ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal-stagger] > [data-reveal]:nth-child(7) { --reveal-delay: 690ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal-stagger] > [data-reveal]:nth-child(8) { --reveal-delay: 750ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal-stagger] > [data-reveal]:nth-child(9) { --reveal-delay: 790ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal-stagger] > [data-reveal]:nth-child(10) { --reveal-delay: 830ms; }

/* Insight cards - tighter sequential cascade (3 cards, 150ms gaps) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-grid[data-reveal-stagger] > [data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-grid[data-reveal-stagger] > [data-reveal]:nth-child(2) { --reveal-delay: 150ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-grid[data-reveal-stagger] > [data-reveal]:nth-child(3) { --reveal-delay: 300ms; }

/* Insights - slight left-to-right drift on each card as they cascade down */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-grid > [data-reveal] {
  transform: translateY(20px) translateX(-10px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-grid > [data-reveal].is-visible {
  transform: translateY(0) translateX(0);
}

/* "What We Do" / Integrated Solutions cards - fluid wave (5 cards, 100ms gaps = 400ms total) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solutions-grid[data-reveal-stagger] > [data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solutions-grid[data-reveal-stagger] > [data-reveal]:nth-child(2) { --reveal-delay: 100ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solutions-grid[data-reveal-stagger] > [data-reveal]:nth-child(3) { --reveal-delay: 200ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solutions-grid[data-reveal-stagger] > [data-reveal]:nth-child(4) { --reveal-delay: 300ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solutions-grid[data-reveal-stagger] > [data-reveal]:nth-child(5) { --reveal-delay: 400ms; }

/* Industry Expertise grids - rapid wave (10 items, 80ms gaps for first 7, then taper) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid[data-reveal-stagger] > [data-reveal]:nth-child(1), :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-reveal-stagger] > [data-reveal]:nth-child(1) { --reveal-delay: 0ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid[data-reveal-stagger] > [data-reveal]:nth-child(2), :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-reveal-stagger] > [data-reveal]:nth-child(2) { --reveal-delay: 80ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid[data-reveal-stagger] > [data-reveal]:nth-child(3), :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-reveal-stagger] > [data-reveal]:nth-child(3) { --reveal-delay: 160ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid[data-reveal-stagger] > [data-reveal]:nth-child(4), :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-reveal-stagger] > [data-reveal]:nth-child(4) { --reveal-delay: 240ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid[data-reveal-stagger] > [data-reveal]:nth-child(5), :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-reveal-stagger] > [data-reveal]:nth-child(5) { --reveal-delay: 320ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid[data-reveal-stagger] > [data-reveal]:nth-child(6), :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-reveal-stagger] > [data-reveal]:nth-child(6) { --reveal-delay: 400ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid[data-reveal-stagger] > [data-reveal]:nth-child(7), :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-reveal-stagger] > [data-reveal]:nth-child(7) { --reveal-delay: 480ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid[data-reveal-stagger] > [data-reveal]:nth-child(8), :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-reveal-stagger] > [data-reveal]:nth-child(8) { --reveal-delay: 540ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid[data-reveal-stagger] > [data-reveal]:nth-child(9), :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-reveal-stagger] > [data-reveal]:nth-child(9) { --reveal-delay: 600ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid[data-reveal-stagger] > [data-reveal]:nth-child(10), :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-reveal-stagger] > [data-reveal]:nth-child(10) { --reveal-delay: 660ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid[data-reveal-stagger] > [data-reveal]:nth-child(11), :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-reveal-stagger] > [data-reveal]:nth-child(11) { --reveal-delay: 720ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid[data-reveal-stagger] > [data-reveal]:nth-child(12), :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-reveal-stagger] > [data-reveal]:nth-child(12) { --reveal-delay: 780ms; }

/* Industries - subtle scale "zoom in" feel */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid > [data-reveal] {
  transform: translateY(24px) scale(0.97);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid > [data-reveal].is-visible {
  transform: translateY(0) scale(1);
}

/* Industry Option 3 rows - 180ms gaps between rows (skips .ind-row-body siblings via :nth-of-type) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-rows > .ind-row[data-reveal]:nth-of-type(1) { --reveal-delay: 250ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-rows > .ind-row[data-reveal]:nth-of-type(2) { --reveal-delay: 430ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-rows > .ind-row[data-reveal]:nth-of-type(3) { --reveal-delay: 610ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-rows > .ind-row[data-reveal]:nth-of-type(4) { --reveal-delay: 790ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-rows > .ind-row[data-reveal]:nth-of-type(5) { --reveal-delay: 970ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-rows > .ind-row[data-reveal]:nth-of-type(6) { --reveal-delay: 1150ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-rows > .ind-row[data-reveal]:nth-of-type(7) { --reveal-delay: 1330ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-rows > .ind-row[data-reveal]:nth-of-type(8) { --reveal-delay: 1510ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-rows > .ind-row[data-reveal]:nth-of-type(9) { --reveal-delay: 1690ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-rows > .ind-row[data-reveal]:nth-of-type(10) { --reveal-delay: 1870ms; }

:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal="left"] {
  opacity: 0;
  transform: translateX(-40px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal="left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal="right"] {
  opacity: 0;
  transform: translateX(40px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal="right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.96) translateY(20px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal="scale"].is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal="fade"] {
  opacity: 0;
  transform: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal="fade"].is-visible {
  opacity: 1;
}

/* Hero-specific cinematic choreography */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-eyebrow[data-reveal] { transition-duration: 0.8s; transition-delay: 0ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-headline[data-reveal] { transition-duration: 0.9s; transition-delay: 100ms; transform: translateY(32px); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-body[data-reveal] { transition-duration: 0.8s; transition-delay: 250ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-ctas[data-reveal], :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-services[data-reveal] { transition-duration: 0.7s; transition-delay: 400ms; }

/* ═══ NAV ═══ */
/* Announce bar - solid black, always sits above the nav and scrolls away
 * normally with the rest of the page. Same look on homepage + inner pages. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .announce-bar {
  background: #000;
  border-bottom: none;
  padding-top:    var(--cfgi-pad-top, 10px);
  padding-right:  var(--cfgi-pad-right, var(--gutter));
  padding-bottom: var(--cfgi-pad-bottom, 10px);
  padding-left:   var(--cfgi-pad-left, var(--gutter));
  text-align: center;
  position: relative;
  z-index: 101;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .announce-bar__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
  color: rgba(255,255,255,0.88);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .announce-bar__accent {
  color: rgba(255,255,255,0.88);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-hairline);
  height: 64px;
  transition: box-shadow 350ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav.scrolled {
  box-shadow: 0 1px 8px rgba(15,15,15,0.04);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-inner .logo { flex: 0 0 auto; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-inner .nav-links {
  flex: 1 1 auto;
  justify-content: center;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-utilities {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-utilities::before {
  content: '';
  display: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-divider {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--border-default);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logo {
  display: inline-block;
  width: 79px;
  height: 32px;
  background-color: var(--navy);
  -webkit-mask-image: url("../logos/cfgi-logo.svg");
          mask-image: url("../logos/cfgi-logo.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  text-indent: -9999px;
  overflow: hidden;
  transition: opacity 350ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logo:hover { opacity: 0.7; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logo { position: relative; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logo::before {
  content: '';
  position: absolute;
  inset: -6px -8px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links {
  display: flex;
  gap: 38px;
  list-style: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  position: relative;
  padding: 4px 0;
  transition: color 200ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links a:hover { color: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links a:hover::after { transform: scaleX(1); }

/* Nav CTA - tighter sizing override on top of .btn.btn-primary */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-cta.btn-primary {
  padding: 10px 22px;
  font-size: 11px;
  border-radius: 0;
}

/* ═══ NAV LOCALE TOGGLE - ghost button, globe icon ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-locale {
  position: relative;
  font-family: var(--font-body);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 200ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-current:hover { color: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-globe {
  font-size: 16px;
  line-height: 1;
  color: var(--text-caption);
  transition: color 200ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-current:hover .locale-globe, :where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-locale.is-open .locale-globe { color: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-label {
  font-size: 11px;
  letter-spacing: 0.08em;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-chevron {
  color: var(--text-caption);
  transition: transform 250ms var(--ease-smooth), color 200ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-locale.is-open .locale-chevron {
  transform: rotate(180deg);
  color: var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-locale.is-open .locale-current { color: var(--teal); }

:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 200px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(15,15,15,0.08);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 200ms var(--ease-smooth), transform 200ms var(--ease-smooth);
  z-index: 100;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-locale.is-open .locale-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-dropdown li { margin: 0; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 180ms var(--ease-smooth), color 180ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-option:hover {
  background: var(--bg-muted);
  color: var(--navy);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-option .locale-code {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-caption);
  min-width: 22px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-option .locale-name { flex: 1; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-check {
  color: var(--teal);
  opacity: 0;
  transition: opacity 180ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-option.is-active .locale-check { opacity: 1; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-option.is-active {
  color: var(--navy);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .locale-option.is-active .locale-code { color: var(--teal); }

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hamburger {
  display: none;
  width: 28px;
  height: 20px;
  flex-direction: column;
  justify-content: space-between;
  z-index: 201;
  position: relative;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hamburger span {
  display: block;
  height: 2px;
  background: var(--navy);
  transition: transform 350ms var(--ease-out-expo), opacity 250ms var(--ease-smooth);
  transform-origin: center;
}
/* Hamburger → X morph */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hamburger.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hamburger.is-open span:nth-child(2) { opacity: 0; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hamburger.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ═══ MOBILE MENU OVERLAY ═══
 * Dark overlay matching the mega-panel chrome. z-index 99 sits BELOW the
 * nav (100) and announce-bar (101) so the chrome stays visible above the
 * open drawer. Top padding clears announce-bar + nav + breathing room. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(5, 10, 18, 0.97);
  display: flex;
  flex-direction: column;
  padding: calc(var(--announce-h, 40px) + var(--nav-h, 64px) + 24px) var(--gutter) 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms var(--ease-out-expo);
  overflow-y: auto;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Top-level list ─────────────────────────────────────────────────────── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px;
}

/* Top-level items: flex row so the optional chevron button sits on the right */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links > li:first-child {
  border-top: 1px solid rgba(255,255,255,0.07);
}

/* Top-level link — italic display font, large */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links > li > a {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 18px 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  transition: color 200ms var(--ease-smooth);
  border: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links > li > a:hover { color: var(--teal); }

/* Staggered reveal — top-level items only */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links > li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms var(--ease-out-expo), transform 400ms var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu.is-open .mobile-menu__links > li {
  opacity: 1;
  transform: translateY(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu.is-open .mobile-menu__links > li:nth-child(1) { transition-delay: 80ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu.is-open .mobile-menu__links > li:nth-child(2) { transition-delay: 130ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu.is-open .mobile-menu__links > li:nth-child(3) { transition-delay: 180ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu.is-open .mobile-menu__links > li:nth-child(4) { transition-delay: 230ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu.is-open .mobile-menu__links > li:nth-child(5) { transition-delay: 280ms; }

/* ── Sub-menu chevron toggle (injected by JS) ───────────────────────────── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-sub-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  transition: color 200ms var(--ease-smooth), transform 250ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-sub-toggle svg {
  stroke: currentColor;
  transition: transform 250ms var(--ease-smooth);
}
/* is-open: works at every nesting depth */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links .menu-item-has-children.is-open > .mobile-sub-toggle {
  color: var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links .menu-item-has-children.is-open > .mobile-sub-toggle svg {
  transform: rotate(180deg);
}

/* ── Sub-menu (WordPress .sub-menu) — level 1 ──────────────────────────── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links .sub-menu {
  display: none;
  flex-direction: column;
  width: 100%;
  list-style: none;
  padding: 0 0 12px 0;
  margin: 0;
  gap: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links .menu-item-has-children.is-open > .sub-menu {
  display: flex;
}
/* Level-1 sub items: block by default, flex-wrap when they have their own children */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links .sub-menu > li {
  opacity: 1;
  transform: none;
  border: none;
  display: block;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links .sub-menu > li.menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links .sub-menu > li > a {
  flex: 1;
  display: block;
  padding: 9px 0 9px 16px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  color: rgba(255,255,255,0.5);
  border: none;
  transition: color 180ms var(--ease-smooth), padding-left 180ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links .sub-menu > li > a:hover {
  color: var(--teal);
  padding-left: 22px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links .sub-menu > li:first-child > a { padding-top: 4px; }

/* ── Sub-sub-menu (level 2) ─────────────────────────────────────────────── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links .sub-menu .sub-menu {
  padding: 0 0 6px 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links .sub-menu .sub-menu > li > a {
  padding-left: 32px;
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__links .sub-menu .sub-menu > li > a:hover {
  color: var(--teal);
  padding-left: 38px;
}

/* ── CTA block ──────────────────────────────────────────────────────────── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__cta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__cta .btn { width: 100%; text-align: center; }

/* Locale selector row in mobile menu */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__locale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  margin-top: 8px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__locale-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-menu__locale-options {
  display: flex;
  gap: 6px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-locale-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 0;
  cursor: pointer;
  transition: color 200ms, border-color 200ms;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-locale-btn.is-active {
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mobile-locale-btn:hover {
  color: var(--teal-light);
  border-color: var(--teal-light);
}

/* ═══ MEGA MENU — Elementor wrapper passthrough ═══
 * ElementsKit mega panel content renders inside .elementskit-megamenu-panel.
 * Elementor wraps its output in several structural divs that would break the
 * .mega-panel layout. display:contents makes those elements invisible to the
 * box model so .mega-panel__inner / .mega-panel__footer appear as direct children.
 * Scoped inside .elementskit-megamenu-panel so it only fires in the nav context. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .elementor,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .elementor-inner,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .elementor-section-wrap,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .elementor-section,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .elementor-container,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .elementor-row,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .elementor-column,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .elementor-col-100,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .elementor-column-wrap,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .elementor-element,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .elementor-widget-wrap,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .elementor-widget-container,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .e-con,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .elementskit-megamenu-panel .e-con-inner {
  display: contents;
}
/* The mega panel widget's own container is the structural root for inner+footer;
 * flex-column makes .mega-panel__footer stack below .mega-panel__inner. */
.elementor-widget-cfgi_mega_panel > .elementor-widget-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ═══ MEGA MENU ═══ */

/* Keep mega li in flow so the panel anchors to the sticky .nav, not the li */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links .elementskit-megamenu-has {
  position: static;
}

/* Hide ElementsKit's default icon; we render our own CSS chevron */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links .elementskit-submenu-indicator {
  display: none !important;
}

/* Trigger link: inline-flex so chevron sits baseline-aligned with text */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links .elementskit-megamenu-has > a.ekit-menu-nav-link {
  display: inline-flex;
  align-items: center;
}

/* Chevron via ::after — reset ALL conflicting a::after base properties */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links .elementskit-megamenu-has > a.ekit-menu-nav-link::after {
  content: '';
  display: inline-block;
  position: static;           /* override base: position:absolute */
  left: auto; right: auto; bottom: auto;
  background: transparent;    /* override base: background:var(--teal) */
  transform-origin: center;   /* override base: transform-origin:left */
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 280ms var(--ease-smooth);
  flex-shrink: 0;
  margin-left: 10px;
  margin-top: -5px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links .elementskit-megamenu-has.is-open > a.ekit-menu-nav-link::after {
  transform: rotate(225deg);
  margin-top: 2px;
}

/* Active link tint */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links .elementskit-megamenu-has.is-open > a.ekit-menu-nav-link {
  color: var(--teal);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .nav-links .elementskit-megamenu-has.is-open > a.ekit-menu-nav-link {
  color: var(--teal-light);
}

/* Panel shell — flex column so footer stacks below the grid, never as a grid item.
 * display:flex !important overrides ElementsKit's display:none default; visibility
 * is controlled via opacity/visibility/pointer-events instead. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links .elementskit-megamenu-panel {
  display: flex !important;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 220ms var(--ease-smooth), transform 220ms var(--ease-smooth), visibility 0s 220ms;
  pointer-events: none;
  z-index: 999;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links .elementskit-megamenu-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 220ms var(--ease-smooth), transform 220ms var(--ease-smooth), visibility 0s;
  pointer-events: auto;
}

/* Panel inner grid — count-based columns set by cfgi_mega_panel widget */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-panel__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 36px var(--gutter) 32px;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(4, 1fr);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-panel__inner--cols-1 { grid-template-columns: 300px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-panel__inner--cols-2 { grid-template-columns: 260px 1fr; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-panel__inner--cols-3 { grid-template-columns: repeat(3, 1fr); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-panel__inner--cols-4 { grid-template-columns: repeat(3, 1fr) 1.5fr; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-panel__inner--cols-5 { grid-template-columns: repeat(5, 1fr); }

:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-col-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,180,255,0.18);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-col ul li a {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.52) !important;
  text-transform: initial;
  transition: color 180ms var(--ease-smooth), padding-left 180ms var(--ease-smooth);
  display: block;
  line-height: 1.4;
  padding: 6px 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-col ul li a:hover {
  color: var(--teal);
  padding-left: 5px;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-panel__footer {
  border-top: 1px solid rgba(255,255,255,0.05);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-panel__footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 13px var(--gutter);
  display: flex;
  justify-content: flex-end;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-panel__footer-inner a {
  color: rgba(255, 255, 255, 0.9) !important;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-view-all {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--teal);
  opacity: 0.85;
  transition: opacity 200ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-view-all:hover { opacity: 1; }


/* Featured card - image left, label+title+excerpt right */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-featured {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-col--featured-only .mega-featured,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-col--featured-only {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-featured-card {
  display: flex;
  text-decoration: none;
  border-radius: 4px;
  overflow: hidden;
  max-width: 400px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  transition: border-color 200ms var(--ease-smooth);
  padding: 14px !important;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-featured-card:hover {
  border-color: rgba(0,180,255,0.28);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-featured-img {
  width: 100px;
  height: 70px;
  flex-shrink: 0;
  align-self: center;
  background-size: cover;
  background-position: center;
  background-color: rgba(255,255,255,0.06);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-featured-body {
  padding: 0 0 0 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-featured-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 2px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-featured-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: rgba(255,255,255,0.92);
  line-height: 1.15;
  margin: 0;
  text-transform: initial;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .mega-featured-excerpt {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-transform: initial;
  font-weight: 300;
  margin-bottom: 0;
}

@media (max-width: 960px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links .elementskit-megamenu-panel { display: none !important; }
}

/* ═══ HERO ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero {
  background: var(--bg-subtle);
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 56px 0 48px;
  position: relative;
  overflow: hidden;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 64px;
  align-items: center;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-content .eyebrow {
  margin-bottom: 28px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-content { min-width: 0; position: relative; z-index: 3; }
/* Headline - all Inter, all static, navy */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-headline {
  margin-bottom: 36px;
  padding-bottom: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-headline .headline-static {
  display: block;
  font-family: var(--font-display);  /* Georgia */
  font-weight: 400;
  font-style: italic;
  font-size: clamp(36px, 4.8vw, 64px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy);
  white-space: nowrap;
  margin-bottom: 0.02em;
}

/* Subhead - Inter static + Georgia italic teal rotator inline */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-subhead {
  font-family: var(--font-body);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-body);
  max-width: 580px;
  margin-bottom: 44px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .subhead-static { /* inherits */ }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .subhead-line { display: block; }

/* Rotating words - vertical slide */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-subhead .word-rotator {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.5em;
  width: auto;
  margin: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-subhead .word-rotator__item {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-family: var(--font-body);   /* Inter */
  font-style: normal;
  font-weight: 500;
  font-size: 1em;
  letter-spacing: -0.005em;
  color: var(--teal);
  opacity: 0;
  transform: translateY(100%);
  transition: transform 700ms var(--ease-out-expo),
              opacity 500ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-subhead .word-rotator__item.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-subhead .word-rotator__item.exit {
  opacity: 0;
  transform: translateY(-100%);
}

/* Legacy hero-body kept for any stray references; now unused in hero */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 480px;
  margin-bottom: 28px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-ctas {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ═══ HERO SERVICE CARDS - compact nav tiles ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-hairline);
  max-width: 480px;
  position: relative;
  z-index: 3;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card {
  background: var(--bg-subtle);
  padding: 18px 20px 16px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 450ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card__title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-heading-alt);
  margin: 0;
  transition: color 350ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card__desc {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-caption);
  margin: 0;
  line-height: 1.4;
  transition: color 350ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card__link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--teal);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 350ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card__arrow {
  display: inline-block;
  transition: transform 250ms var(--ease-out-expo);
  font-size: 13px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card:hover { background: var(--bg-navy); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card:hover .hero-card__title { color: var(--text-inverse); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card:hover .hero-card__desc { color: var(--text-inverse-muted); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card:hover .hero-card__link { color: var(--teal-light); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card:hover .hero-card__arrow { transform: translateX(3px); }

/* ═══ BUTTON SYSTEM ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: background 250ms var(--ease-smooth),
              color 250ms var(--ease-smooth),
              border-color 250ms var(--ease-smooth),
              transform 250ms var(--ease-smooth),
              box-shadow 250ms var(--ease-smooth);
  white-space: nowrap;
}

/* Primary - filled navy */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-primary {
  padding: 13px 28px;
  background: var(--navy);
  color: var(--text-inverse);
  border: 1.5px solid var(--navy);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-primary:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(15,15,15,0.15);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Primary teal variant */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-primary--teal {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--text-inverse);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-primary--teal:hover {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,180,255,0.2);
}

/* Primary on dark backgrounds */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-primary--inverse {
  background: var(--text-inverse);
  border-color: var(--text-inverse);
  color: var(--navy);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-primary--inverse:hover {
  background: var(--bg-subtle);
  border-color: var(--bg-subtle);
  transform: translateY(-1px);
}

/* Secondary - outlined */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-secondary {
  padding: 14px 28px;
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--border-strong);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-secondary:hover {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--text-inverse);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-secondary--inverse {
  color: var(--text-inverse);
  border-color: rgba(255,255,255,0.25);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-secondary--inverse:hover {
  border-color: var(--text-inverse);
  background: rgba(255,255,255,0.08);
}

/* Text link - minimal, inline */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-text {
  padding: 0 0 4px 0;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1.5px solid var(--border-default);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 200ms var(--ease-smooth),
              border-color 200ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-text:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-text--inverse {
  color: var(--text-inverse);
  border-bottom-color: rgba(255,255,255,0.3);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-text--inverse:hover {
  color: var(--teal-light);
  border-bottom-color: var(--teal-light);
}

/* Arrow affix for text links */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-arrow::after {
  content: '→';
  font-size: 14px;
  transition: transform 200ms var(--ease-out-expo), opacity 200ms ease;
  display: inline-block;
  opacity: 0.4;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-arrow:hover::after {
  transform: translateX(3px);
  opacity: 0.7;
}

/* ═══ UNIVERSAL CTA ARROW ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-arrow {
  display: inline-block;
  transition: transform 0.35s var(--hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
              opacity 0.35s var(--hover-ease, cubic-bezier(0.22, 1, 0.36, 1));
  opacity: 0.4;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) a:hover > .cta-arrow, :where(.cfgi-redesign-chrome, .cfgi-homepage) a:hover .cta-arrow, :where(.cfgi-redesign-chrome, .cfgi-homepage) button:hover > .cta-arrow, :where(.cfgi-redesign-chrome, .cfgi-homepage) button:hover .cta-arrow {
  transform: translateX(3px);
  opacity: 0.7;
}
/* Filled / dark buttons - brighter dim white */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-primary .cta-arrow { opacity: 0.5; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-primary:hover .cta-arrow { opacity: 0.8; }
/* Card-hover arrows (V1 hero cards) - start hidden, slide in */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card .cta-arrow { opacity: 0; transform: translateX(-4px); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card:hover .cta-arrow { opacity: 0.7; transform: translateX(0); }

/* ═══ SUBTLE DOT GRID ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .has-grid { position: relative; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .has-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--navy) 0.5px, transparent 0.5px);
  background-size: 32px 32px;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .has-grid > * { position: relative; z-index: 1; }

/* ═══ FOOTER REVEAL ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .page-content {
  position: relative;
  z-index: 2;
  background: var(--bg-subtle);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .page-content > .logos-strip {
  border-radius: 0;
  position: relative;
  z-index: 2;
}
/* Dot grid override for dark cta-banner */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-banner.has-grid::before {
  background-image: radial-gradient(circle, rgba(255,255,255,0.8) 0.5px, transparent 0.5px);
  opacity: 0.04;
}

/* Shared image container */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .img-container {
  position: relative;
  overflow: hidden;
  background: var(--bg-muted);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
  transition: transform 900ms var(--ease-out-expo), filter 650ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .img-container:hover img {
  transform: scale(1.03);
  filter: saturate(1) contrast(1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,15,15,0.22), rgba(59,143,128,0.1));
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* ═══ HERO SKYLINE ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .sky {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 36%;
  right: 0;
  width: 64%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  /* Dual mask: left fade for blending into hero, bottom fade for service cards */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 10%, black 30%),
    linear-gradient(to bottom, black 0%, black 55%, rgba(0,0,0,0.3) 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,0.15) 10%, black 30%),
    linear-gradient(to bottom, black 0%, black 55%, rgba(0,0,0,0.3) 80%, transparent 100%);
  mask-composite: intersect;
  opacity: 0.7;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .sky-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .sky-layer svg {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: auto;
  height: 100%;
  max-width: none;
  display: block;
  overflow: visible;
  transform: translateX(-50%) scale(1.3);
  transform-origin: center bottom;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) #sky1 { --mouse-x: 0.08; --scroll-y: 0.15; --ambient: 0; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) #sky2 { --mouse-x: 0.16; --scroll-y: 0.25; --ambient: 0; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) #sky3 { --mouse-x: 0.28; --scroll-y: 0.40; --ambient: 0.3; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) #sky4 { --mouse-x: 0.45; --scroll-y: 0.60; --ambient: 0.6; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) #sky5 { --mouse-x: 0.70; --scroll-y: 0.85; --ambient: 1.0; }

/* ═══ SECTIONS ═══
 * Each widget exposes a responsive "Section padding" control (see
 * Cfgi_Widget_Base::register_section_spacing()). The control writes
 * --cfgi-pad-* variables onto the widget's wrapper (per device, via
 * Elementor's media-query wrapping). The fallbacks below are the design
 * defaults; admin entry overrides any side. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .section {
  padding-top:    var(--cfgi-pad-top, 64px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 64px);
  padding-left:   var(--cfgi-pad-left, 0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .section-head {
  max-width: 720px;
  margin-bottom: 56px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .section-head .eyebrow {
  margin-bottom: 20px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .section-head .section-title {
  margin-bottom: 16px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .section-head p {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-body);
  max-width: 560px;
}

/* Integrated Solutions */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: transparent;
  min-height: 320px;  /* Reserve space so layout doesn't jump as cards reveal */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solutions-grid > [data-reveal] {
  will-change: opacity, transform;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card {
  background: transparent;
  padding: 36px 28px 5px;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: background var(--hover-duration) var(--hover-ease),
              box-shadow var(--hover-duration) var(--hover-ease),
              opacity 700ms var(--ease-out-expo) var(--reveal-delay, 0ms),
              transform 700ms var(--ease-out-expo) var(--reveal-delay, 0ms);
  border-top: 2px solid var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  height: 2px;
  width: 40px;
  background: var(--teal);
  transition: width 550ms var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card:hover {
  background: var(--bg-navy);
  border-top-color: var(--teal-light);
  box-shadow: 0 4px 20px rgba(15,15,15,0.12);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card:hover::before {
  width: 100%;
  background: var(--teal-light);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-num {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--teal);
  margin-bottom: 20px;
  overflow: hidden;
  max-height: 20px;
  opacity: 1;
  transition: color 350ms var(--ease-smooth),
              max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.25s ease,
              margin-bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card:hover .solution-num {
  color: var(--teal-light);
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card h3 {
  font-family: var(--font-body);    /* Roboto - functional within grid */
  font-size: 18px;
  font-weight: 600;
  color: var(--text-heading-alt);
  line-height: 1.3;
  margin-bottom: 12px;
  letter-spacing: 0;
  transition: color var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card:hover h3 { color: var(--text-inverse); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 20px;
  transition: color var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card:hover p { color: rgba(255,255,255,0.45); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-list {
  list-style: none;
  border-top: 1px solid var(--border-hairline);
  padding-top: 16px;
  transition: border-color var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card:hover .solution-list { border-top-color: rgba(255,255,255,0.08); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-list li {
  font-size: 12px;
  color: var(--text-caption);
  padding: 6px 0;
  line-height: 1.5;
  transition: color var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card:hover .solution-list li { color: rgba(255,255,255,0.4); }

/* "Explore Service" CTA - hidden by default, slides in on hover */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-cta {
  display: block;
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #00B4FF;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease 0.1s,
              max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  margin-bottom: 15px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-cta .cta-arrow {
  display: inline-block;
  opacity: 0.6;
  transition: transform 0.35s var(--hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
              opacity 0.35s var(--hover-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card:hover .solution-cta {
  opacity: 1;
  max-height: 48px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card:hover .solution-cta .cta-arrow {
  transform: translateX(3px);
  opacity: 0.9;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-cta:hover,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-cta:focus {
  color: #00B4FF;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-cta:hover .cta-arrow,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-cta:focus .cta-arrow {
  color: #00B4FF;
  opacity: 1;
}

/* Touch devices: CTA always visible (no hover on touch) */
@media (hover: none) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-cta {
    opacity: 1;
    max-height: 48px;
  }
}

/* Global: no rounded corners on images or image containers */
:where(.cfgi-redesign-chrome, .cfgi-homepage) img, :where(.cfgi-redesign-chrome, .cfgi-homepage) .img-container, :where(.cfgi-redesign-chrome, .cfgi-homepage) /* ═══ PRODUCT BANDS - Curtain Reveal ═══ */
.product-bands { padding: 0; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-bands .container {
  max-width: 100%;
  padding: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band {
  --band-px: max(var(--gutter), calc((100% - var(--max-width)) / 2 + var(--gutter)));
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  padding: 48px var(--band-px);
  min-height: 50vh;
  column-gap: 24px;
  row-gap: 0;
  text-decoration: none;
  cursor: pointer;
  background: var(--bg-navy);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: padding-left 500ms var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__eyebrow { grid-column: 1 / -1; grid-row: 1; align-self: start; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__content { grid-column: 1; grid-row: 2; align-self: center; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__arrow { grid-column: 2; grid-row: 2; align-self: center; }

/* Curtain background */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 700ms var(--ease-smooth);
  z-index: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.3) contrast(1.1) brightness(0.3);
  transform: scale(1.08);
  transition: transform 4s cubic-bezier(0.16, 1, 0.3, 1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(15,15,15,0.75) 0%,
    rgba(15,15,15,0.4) 50%,
    rgba(15,15,15,0.2) 100%);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band:hover .product-band__bg { opacity: 1; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band:hover .product-band__bg img { transform: scale(1); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band:hover { padding-left: calc(var(--band-px) + 8px); }

/* Eyebrow */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__eyebrow {
  position: relative;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-light);
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding-top: 6px;
  transition: color 350ms;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__eyebrow .eyebrow-line {
  display: block !important;
  width: 24px;
  height: 1.5px;
  background: var(--teal-light);
  flex-shrink: 0;
  transition: background 350ms, width 450ms var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band:hover .product-band__eyebrow .eyebrow-line { width: 32px; }

/* Content */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 48px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__info { max-width: 380px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__desc {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-inverse-muted);
  margin: 0;
  transition: color 400ms;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band:hover .product-band__desc { color: rgba(255,255,255,0.7); }

/* Title */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400;
  color: var(--text-inverse);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  white-space: nowrap;
}

/* Arrow */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__arrow {
  position: relative;
  z-index: 2;
  color: var(--teal-light);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 400ms var(--ease-smooth),
              transform 500ms var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band:hover .product-band__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Bottom line draw */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__line {
  position: absolute;
  bottom: 0;
  left: var(--band-px);
  right: var(--band-px);
  height: 1px;
  background: rgba(255,255,255,0.12);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--ease-out-expo);
  z-index: 2;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band:hover .product-band__line { transform: scaleX(1); }

/* ═══ Industries Section - 3 Views ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .industries-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 56px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .industries-head .section-head { margin-bottom: 0; }

:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-tabs {
  display: flex;
  gap: 2px;
  margin-top: 16px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-tab {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-caption);
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: color 200ms, background 200ms;
  position: relative;
}
/* Extend tap target to 44×44 on touch devices */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-tab::before {
  content: '';
  position: absolute;
  inset: -8px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-tab:hover { color: var(--navy); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-tab.active {
  color: var(--navy);
  font-weight: 500;
  background: rgba(15,15,15,0.05);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-view { display: none; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-view.active { display: block; }

/* Shared arrow icon (hidden by default, fades in on hover) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-arrow {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 250ms var(--ease-smooth),
              transform 350ms var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-arrow svg {
  stroke: var(--teal);
  transition: stroke 250ms;
}

/* ── OPTION 1: Icon Grid ── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: transparent;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid::before {
  content: '';
  grid-column: 1 / -1;
  height: 2px;
  background: var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-filler {
  background: var(--bg-subtle);
  display: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell {
  background: var(--bg-subtle);
  padding: 32px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--hover-duration) var(--hover-ease),
              opacity 700ms var(--ease-out-expo) var(--reveal-delay, 0ms),
              transform 700ms var(--ease-out-expo) var(--reveal-delay, 0ms);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell:hover { background: var(--bg-navy); }

/* Icon + CTA share the same grid cell so there's no height change on hover */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell .ind-top {
  display: grid;
  height: 28px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell .ind-top > * {
  grid-area: 1 / 1;
  align-self: center;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell .ind-icon {
  font-size: 28px;
  color: var(--navy);
  line-height: 1;
  transition: color var(--hover-duration) var(--hover-ease),
              opacity var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell:hover .ind-icon {
  color: var(--teal-light);
  opacity: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell .ind-name {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-heading-alt);
  transition: color var(--hover-duration) var(--hover-ease);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell:hover .ind-name { color: var(--text-inverse); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell .ind-line {
  width: 24px;
  height: 2px;
  background: var(--teal);
  transition: background var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell:hover .ind-line { background: var(--teal-light); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell:hover .ind-arrow {
  opacity: 1;
  transform: translateX(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell:hover .ind-arrow svg { stroke: var(--teal-light); }

/* "Explore →" CTA - fades in at icon's position (grid-stacked, no height change) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cta {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #00B4FF;
  opacity: 0;
  transition: opacity var(--hover-duration) var(--hover-ease) 0.08s;
  pointer-events: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cta .cta-arrow {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.6;
  transition: transform var(--hover-duration-fast) var(--hover-ease),
              opacity var(--hover-duration-fast) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell:hover .ind-cta {
  opacity: 1;
  pointer-events: auto;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell:hover .ind-cta .cta-arrow {
  transform: translateX(3px);
  opacity: 0.9;
}
@media (hover: none) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cta { opacity: 1; color: var(--teal); pointer-events: auto; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell .ind-icon { opacity: 0; }
}

/* ── OPTION 2: Photo Grid - zigzag portrait cards ──
 * Default is a 5-column grid (designed for 10 cards / 2 rows). When the
 * widget renders 11-12 cards, the layout flips to a 6-column grid so the
 * full set stays as 2 even rows. data-count is emitted by the render loop. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  /* Reserve space for the zigzag overhang on the offset cards */
  padding-bottom: 40px;
}
/* The 11/12-card 6-column layout is DESKTOP ONLY (> 1200px). Below that the
 * existing responsive rules take over: 4 cols at ≤1200, 3 cols at ≤900, 2 cols
 * at ≤600. Without this min-width gate, the attribute selector beats the @media
 * overrides on specificity and the grid stays at 6 cols on every viewport. */
@media (min-width: 1201px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-count="11"],
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-count="12"] {
    grid-template-columns: repeat(6, 1fr);
  }
  /* Zigzag for the 6-column layout (11-12 cards): even-positioned cards drop 40px. */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-count="11"] > .ind-photo:nth-child(even),
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos[data-count="12"] > .ind-photo:nth-child(even) {
    top: 40px;
  }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}
/* Zigzag for the default 5-column layout: cols 2 and 4 of each row drop 40px.
   Using `top` (not margin-top) keeps the grid row height unchanged so the
   10px row-gap stays clean between rows. Scoped with :not() so it doesn't
   fire on the 6-col override above. At <= 1200px (tablet/mobile) this rule
   also doesn't apply since the @media overrides below remap the grid to
   4/3/2 columns with their own zigzag (see further down in the file). */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos:not([data-count="11"]):not([data-count="12"]) > .ind-photo:nth-child(5n+2),
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos:not([data-count="11"]):not([data-count="12"]) > .ind-photo:nth-child(5n+4) {
  top: 40px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 500ms, transform 700ms var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:hover img {
  filter: saturate(1) contrast(1.02) brightness(0.92);
  transform: scale(1.05);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,15,15,0.85) 0%, rgba(15,15,15,0.1) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  opacity: 1;
  transition: background 400ms var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:hover .ind-photo-overlay {
  background: linear-gradient(to top, rgba(15,15,15,0.95) 0%, rgba(15,15,15,0.3) 55%, transparent 100%);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-photo-icon {
  font-size: 20px;
  color: #00B4FF;
  margin-bottom: 6px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-photo-name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:hover .ind-arrow {
  opacity: 1;
  transform: translateX(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-arrow svg { stroke: var(--teal-light); }

/* "Explore →" CTA overlay - dark scrim + centered CTA on hover */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 2;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:hover .ind-cta-overlay { opacity: 1; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-cta-overlay .ind-cta {
  display: inline-block;
  margin: 0;
  max-height: none;
  opacity: 1;
  overflow: visible;
  color: #00B4FF;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.05s,
              opacity 0.3s ease 0.1s;
  transform: translateY(6px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-cta-overlay .cta-arrow {
  display: inline-block;
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:hover .ind-cta-overlay .ind-cta { transform: translateY(0); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:hover .ind-cta-overlay .ind-cta:hover .cta-arrow {
  transform: translateX(3px);
  opacity: 1;
}
@media (hover: none) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-cta-overlay {
    opacity: 0; /* Keep hidden on touch - the name/icon already in overlay */
  }
}

/* ── OPTION 3: Split Layout ── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-split {
  display: grid;
  grid-template-columns: 380px 1fr;
  min-height: 400px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-split-img {
  position: relative;
  overflow: hidden;
  background: var(--navy-dark);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-split-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.35) contrast(1.08) brightness(0.5);
  opacity: 0;
  transition: opacity 700ms var(--ease-smooth),
              transform 4s cubic-bezier(0.16, 1, 0.3, 1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-split-img img.active {
  opacity: 1;
  transform: scale(1.04);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-split-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(15,15,15,0.2), rgba(15,15,15,0.05));
  pointer-events: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-rows {
  display: flex;
  flex-direction: column;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--border-hairline);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--hover-duration) var(--hover-ease),
              opacity 700ms var(--ease-out-expo) var(--reveal-delay, 0ms),
              transform 700ms var(--ease-out-expo) var(--reveal-delay, 0ms);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row:first-child { border-top: 1px solid var(--border-hairline); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row:hover, :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row.active {
  background: var(--bg-navy);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row .ind-row-name {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
  transition: color 250ms;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row:hover .ind-row-name, :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row.active .ind-row-name { color: var(--text-inverse); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row .ind-row-desc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-caption);
  line-height: 1.5;
  transition: color 250ms;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row:hover .ind-row-desc, :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row.active .ind-row-desc { color: var(--text-inverse-muted); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row:hover .ind-arrow, :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row.active .ind-arrow {
  opacity: 1;
  transform: translateX(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row.active .ind-arrow svg { stroke: var(--teal-light); }

/* Mobile accordion body - hidden on desktop */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row-body { display: none; }

/* Mobile accordion styles */
@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-split-img { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-split { grid-template-columns: 1fr; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row {
    grid-template-columns: 1fr auto;
    padding: 18px 20px;
    gap: 12px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row:first-child { border-top: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row .ind-row-desc { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row .ind-arrow {
    opacity: 1;
    transform: none;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row .ind-arrow svg { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row .ind-arrow::after {
    content: '+';
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 22px;
    color: var(--text-caption);
    line-height: 1;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row.active .ind-arrow::after { content: '−'; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row:hover { background: transparent; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row:hover .ind-row-name { color: var(--navy); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row.active { background: transparent; border-bottom: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row.active .ind-row-name { color: var(--navy); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row.active .ind-arrow svg { display: none; }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row-body {
    display: none;
    padding: 0 20px 20px;
    border-bottom: 1px solid var(--border-hairline);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row.active + .ind-row-body { display: block; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row-body-img {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin-bottom: 14px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row-body-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.35) contrast(1.08) brightness(0.5);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-row-body-desc {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-caption);
    line-height: 1.6;
  }
}

/* Stats Bar */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar {
  padding-top:    var(--cfgi-pad-top, 40px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 40px);
  padding-left:   var(--cfgi-pad-left, 0);
  background: #0A0A0A;
  border-top: 1px solid rgba(15,15,15,0.06);
  border-bottom: 1px solid rgba(15,15,15,0.06);
}
/* Count-agnostic single row at desktop: each .stat flows into its own equal
 * column via grid-auto-flow, so 2 → 6 (or any) items lay out correctly
 * without count-specific selectors. Mobile overrides further below switch
 * to a 2-col wrap with count-aware borders. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stat {
  text-align: center;
  padding: 0 24px;
  position: relative;
}
/* Divider rendered as an absolutely-positioned pseudo so it sits at the
   column's right edge WITHOUT subtracting 1px from the content box. With
   border-right + box-sizing: border-box, the text would shift 0.5px left
   relative to the visible vertical lines on either side — barely visible
   per-column but compounding across the row. Using a pseudo keeps padding
   symmetric so each .stat is exactly centered between its bordering lines. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stat:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-hairline);
  pointer-events: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stat-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(36px, 3.5vw, 56px);
  font-weight: 400;
  color: var(--navy);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 8px;
  /* Lock dimensions so the JS count-up rewriting innerHTML 60×/sec
     doesn't reflow the section and trigger a Lenis scroll jump. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-height: 1em;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stat-number sup {
  font-size: 0.4em;
  color: var(--teal);
  vertical-align: super;
  margin-left: 2px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-caption);
  letter-spacing: 0.02em;
}

/* Stats Bar tagline - single editor input, with <em>...</em> wrapping the
 * cyan italic part. Base text = Inter / gray; <em> = Georgia italic cyan.
 * Gives the admin full flexibility over where the emphasis sits. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar__tagline {
  margin: 32px 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-caption);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar__tagline em {
  font-family: var(--font-display);
  font-style: italic;
  color: #00B4FF;
  margin-right: 4px;
}

/* ═══ CTA Banner - navy, bigger padding, no logos ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-banner {
  background: var(--bg-navy);
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-banner h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-inverse);
  max-width: 18ch;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-banner .btn-primary--inverse {
  padding: 18px 40px;
  font-size: 13px;
  border-radius: 0;
}

/* ═══ Logo Strip - light bg, compact, separate section ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip {
  background: var(--bg-subtle);
  padding-top:    var(--cfgi-pad-top, 40px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 36px);
  padding-left:   var(--cfgi-pad-left, 0);
  overflow: hidden;
  position: relative;
  z-index: 2;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip__label {
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-caption);
  margin: 0 0 24px;
}
/* Marquee centered to site max-width with gutters; fade mask stays with the track */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip__marquee {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, white 6%, white 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, white 6%, white 94%, transparent);
}
/* Footer reveal shadow under the logo strip */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip::after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 5%;
  right: 5%;
  height: 20px;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(0,0,0,0.06) 0%,
    transparent 70%);
  pointer-events: none;
  z-index: 3;
}

/* Insights */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 72px;
  max-width: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-head .head-left .eyebrow {
  margin-bottom: 28px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: transparent;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card {
  background: var(--bg-subtle);
  position: relative;
  border-top: 2px solid var(--teal);
  transition: background var(--hover-duration) var(--hover-ease),
              border-color var(--hover-duration) var(--hover-ease),
              transform var(--hover-duration) var(--hover-ease),
              opacity 700ms var(--ease-out-expo) var(--reveal-delay, 0ms);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: 32px 28px 36px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card:hover { border-top-color: var(--teal-light); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-num {
  position: absolute;
  top: 32px;
  right: 32px;
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 400;
  line-height: 1;
  color: rgba(15,15,15,0.06);
  letter-spacing: -0.03em;
  pointer-events: none;
  transition: color 650ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card:hover .insight-num { color: rgba(255,255,255,0.10); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 1;
  position: relative;
  z-index: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  height: 2px;
  width: 40px;
  background: var(--teal);
  transition: width var(--hover-duration) var(--hover-ease),
              background var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card:hover {
  background: var(--bg-navy);
  transform: translateY(-4px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card:hover::before { width: 100%; background: var(--teal-light); }
/* Meta + Read More share the same grid cell so the title doesn't shift on hover */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-top {
  display: grid;
  height: 14px;
  margin-bottom: 16px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-top > * {
  grid-area: 1 / 1;
  align-self: center;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-meta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  transition: color var(--hover-duration) var(--hover-ease),
              opacity var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card:hover .insight-meta {
  color: var(--teal-light);
  opacity: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-read-more {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #00B4FF;
  opacity: 0;
  transition: opacity var(--hover-duration) var(--hover-ease) 0.08s;
  pointer-events: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-read-more .cta-arrow {
  display: inline-block;
  margin-left: 4px;
  opacity: 0.6;
  transition: transform var(--hover-duration-fast) var(--hover-ease),
              opacity var(--hover-duration-fast) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card:hover .insight-read-more {
  opacity: 1;
  pointer-events: auto;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card:hover .insight-read-more .cta-arrow {
  transform: translateX(3px);
  opacity: 0.9;
}
@media (hover: none) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-read-more { opacity: 1; color: var(--teal); pointer-events: auto; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-meta { opacity: 0; }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card h3 {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-heading-alt);
  line-height: 1.3;
  letter-spacing: 0;
  transition: color var(--hover-duration) var(--hover-ease) 50ms;
  max-width: 92%;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card:hover h3 { color: var(--text-inverse); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  transition: color var(--hover-duration) var(--hover-ease) 80ms;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card:hover p { color: rgba(255,255,255,0.45); }

/* ─────────────────────────────────────────────────────────────
   INSIGHTS · V2 - EDITORIAL (feature + 2 supporting, imagery-led)
   Broadsheet rhythm: one wide feature card on the left with large
   image, two stacked secondary cards right. Duotone SVG covers.
   ───────────────────────────────────────────────────────────── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-v2 {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 32px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-v2__secondary {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 32px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed {
  position: relative;
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-top: 2px solid var(--teal);
  overflow: hidden;
  transition: transform var(--hover-duration) var(--hover-ease),
              border-color var(--hover-duration) var(--hover-ease),
              opacity 700ms var(--ease-out-expo) var(--reveal-delay, 0ms);
  cursor: pointer;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed:hover { transform: translateY(-4px); border-top-color: var(--teal-light); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed__cover {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--bg-navy);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--feature .insight-ed__cover { aspect-ratio: 16 / 11; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--standard .insight-ed__cover {
  flex: 0 0 auto;
  aspect-ratio: 16 / 8;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed__cover svg, :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 900ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed:hover .insight-ed__cover svg, :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed:hover .insight-ed__cover img { transform: scale(1.03); }
/* Subtle navy wash over photography for brand cohesion + text legibility of category pill */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed__cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,31,68,0.28) 0%, rgba(10,31,68,0.08) 40%, rgba(10,31,68,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed__cat {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--teal-light);
  padding: 6px 10px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed__body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--feature .insight-ed__body { padding: 36px 36px 40px; gap: 18px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--standard .insight-ed__body { padding: 22px 24px 24px; gap: 10px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-caption);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed__meta .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--teal);
  display: inline-block;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-heading-alt);
  margin: 0;
  transition: color var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--feature h3 { font-size: 30px; line-height: 1.15; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--standard h3 { font-size: 17px; line-height: 1.3; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed:hover h3 { color: var(--navy); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--feature p { font-size: 15.5px; line-height: 1.7; max-width: 52ch; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--standard p { display: none; }
/* Feature card - proper pill-shaped CTA, reads as a button, not inline text */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed__foot {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  background: transparent;
  border: 1.5px solid var(--navy);
  padding: 13px 22px;
  align-self: flex-start;
  transition: background var(--hover-duration) var(--hover-ease),
              color var(--hover-duration) var(--hover-ease),
              border-color var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed__foot .cta-arrow {
  display: inline-block;
  transition: transform var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed:hover .insight-ed__foot {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed:hover .insight-ed__foot .cta-arrow { transform: translateX(4px); }

/* Standard cards - tight inline CTA w/ underline affordance */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--standard .insight-ed__foot {
  display: inline-flex;
  border: none;
  padding: 0;
  margin-top: 6px;
  color: var(--teal);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  background: none;
  position: relative;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--standard .insight-ed__foot::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 20px;
  height: 1.5px;
  background: var(--teal);
  transition: width var(--hover-duration) var(--hover-ease),
              background var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--standard:hover .insight-ed__foot {
  background: none;
  color: var(--navy);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--standard:hover .insight-ed__foot::after {
  width: 100%;
  background: var(--navy);
}

/* ─────────────────────────────────────────────────────────────
   INSIGHTS · V3 - RESEARCH LIST (horizontal rows, dense, Bloomberg-ish)
   Small square thumbnail left, metadata column, headline + dek.
   ───────────────────────────────────────────────────────────── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-v3 {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(15,15,15,0.12);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row {
  display: grid;
  grid-template-columns: 150px 120px 1fr auto;
  gap: 34px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid rgba(15,15,15,0.12);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
  transition: background var(--hover-duration) var(--hover-ease);
}
/* Posts with no thumbnail get a placeholder block in the thumb slot (rendered
 * by the widget with .insight-row__thumb--placeholder + an initial), so the
 * grid stays uniform across rows. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--teal);
  transition: width var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row:hover::before { width: 3px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row:hover { background: rgba(42,161,152,0.04); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb {
  width: 150px;
  height: 106px;
  background: var(--bg-navy);
  overflow: hidden;
  position: relative;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb svg, :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Step 5 - start desaturated, gain subtle color when revealed (Hark-style) */
  filter: saturate(0) brightness(1.02);
  /* Step 3 - scroll parallax via --parallax-y custom property + base scale to prevent edge gaps */
  transform: translateY(var(--parallax-y, 0px)) scale(1.06);
  transition: transform 700ms var(--ease-smooth),
              filter 800ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, filter;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row.is-visible .insight-row__thumb img, :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row[data-reveal].is-visible .insight-row__thumb img {
  filter: saturate(0.45) brightness(1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row:hover .insight-row__thumb img {
  transform: translateY(var(--parallax-y, 0px)) scale(1.10);
}
@media (prefers-reduced-motion: reduce) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb img {
    transform: scale(1.06) !important;
    filter: saturate(0.45) brightness(1) !important;
    transition: none !important;
  }
}
@media (hover: none) {
  /* Disable scroll parallax on touch - let images sit static */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb img { transform: scale(1.06) !important; }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,31,68,0.15) 0%, rgba(10,31,68,0.5) 100%);
  pointer-events: none;
}
/* Placeholder thumb shown when a post has no featured image - navy gradient
 * surface with a Georgia italic monogram of the title's first letter and a
 * subtle hairline corner crop. Reads as editorial branding, not "broken image". */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb--placeholder {
  background: linear-gradient(135deg, var(--navy) 0%, #1a3666 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb--placeholder::after {
  background: linear-gradient(135deg, transparent 55%, rgba(42,161,152,0.18) 100%);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb--placeholder::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
  z-index: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb-initial {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.9);
  transition: transform 700ms var(--ease-smooth), color 500ms var(--ease-smooth);
  will-change: transform;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row:hover .insight-row__thumb-initial {
  color: var(--teal-light);
  transform: scale(1.08);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__cat {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #05B8FC;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__date {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-caption);
  font-variant-numeric: tabular-nums;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__read {
  font-size: 14px;
  color: var(--text-caption);
  letter-spacing: 0.02em;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__body {
  padding-right: 16px;
  /* Grid items default to min-width: auto, so a long unbreakable word in the
   * post title/excerpt would force the 1fr column to grow past viewport and
   * produce a horizontal scroll. Allow the column to shrink below content,
   * and break long tokens within. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-heading-alt);
  margin: 0 0 8px;
  transition: color var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row:hover h3 { color: var(--navy); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: 62ch;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(15,15,15,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: background var(--hover-duration) var(--hover-ease),
              border-color var(--hover-duration) var(--hover-ease),
              transform var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row:hover .insight-row__arrow {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  transform: translateX(4px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__arrow svg { display: block; }

/* ── Subscribe block (lives inside Insights section per Figma) ── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding-top: 56px;
  flex-wrap: wrap;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__lead { max-width: 640px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin: 0 0 6px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__desc {
  font-family: var(--font-body);
  font-size: 18px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__form {
  display: flex;
  align-items: stretch;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__form[data-reveal] { transform: translateY(16px); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__form[data-reveal].is-visible { transform: translateY(0); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__input {
  width: 280px;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--navy);
  background: #fff;
  border: 1px solid #D0D0D0;
  border-right: 0;
  border-radius: 0;
  outline: none;
  transition: border-color var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__input::placeholder { color: #AAA; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__input:focus { border-color: var(--navy); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__btn {
  padding: 11px 23px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--hover-duration) var(--hover-ease),
              color      var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__btn:hover { background: var(--teal); border-color: var(--teal); color: #0A0A0A; }

@media (max-width: 720px) {
  /* Wrap the lead block above the form (parent column), but keep the form
   * itself as a row at this breakpoint - input fills, button at intrinsic
   * width. min-width: 0 on the flex input breaks the default min-width: auto
   * so the input can actually shrink to fill the remaining row space. */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    min-width: 0;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    box-sizing: border-box;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__btn {
    flex: 0 0 auto;
    box-sizing: border-box;
  }
}

/* Under 480px the row gets too cramped - drop into a stacked column:
 * input full-row first, button full-row below. Restore the right border on
 * the input (the base rule strips it for the flush-with-button pill). */
@media (max-width: 480px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__form {
    flex-direction: column;
    gap: 12px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__input {
    flex: none;
    width: 100% !important;
    max-width: 100% !important;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__btn {
    width: 100%;
    max-width: 100%;
    padding: 14px 23px;
  }
}

/* Responsive - insights V2 & V3 */
@media (max-width: 960px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-v2 { grid-template-columns: 1fr; gap: 24px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-v2__secondary { gap: 24px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--feature .insight-ed__body { padding: 28px 24px 32px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-ed--feature h3 { font-size: 24px; }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row {
    grid-template-columns: 100px 1fr auto;
    gap: 20px;
    padding: 22px 0;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb { width: 100px; height: 70px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb-initial { font-size: 32px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__thumb--placeholder::before { inset: 6px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__meta { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row h3 { font-size: 17px; margin-bottom: 6px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row p { font-size: 13px; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-row__arrow { width: 36px; height: 36px; }
}

/* Client Logos - seamless 4-set marquee on light bg */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-track {
  display: flex;
  align-items: center;
  gap: 0;
  width: max-content;
  animation: marquee 35s linear infinite;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logos-track { animation: marquee 35s linear infinite; }

:where(.cfgi-redesign-chrome, .cfgi-homepage) .logo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 36px;
  height: 44px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item img {
  height: auto;
  max-height: 32px;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: center;
  display: block;
  vertical-align: middle;
  /* Tints black SVGs to neutral #8A8A8A to match var(--text-caption) -
     same shade as the "Trusted by..." label above (no blue cast). */
  filter: brightness(0) saturate(100%) invert(54%);
  opacity: 1;
  transition: none;
}
/* V2 - full color: drop the monochrome filter. SVGs are cropped to artwork
   bounds (matching mono's aspect ratios) so base per-logo max-heights apply. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--color .logo-item img {
  filter: none;
}
/* Color-variant overrides live below, AFTER the generic per-logo rules */

/* Per-logo optical balancing */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="bain"]       img { max-height: 24px !important; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="spire"]      img { max-height: 22px !important; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="lionbridge"] img { max-height: 14px !important; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="treliant"]   img { max-height: 22px !important; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="wms"]        img { max-height: 26px !important; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="odyssey"]    img { max-height: 20px !important; }

/* Color variant - eye-calibrated sizes (Lionbridge bumped, Treliant +30% to match Spire) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--color .logo-item[data-logo="lionbridge"] img { max-height: 40px !important; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--color .logo-item[data-logo="treliant"]   img { max-height: 32px !important; }

/* Footer - simplified per Figma V4 */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple {
  background: #0f0f0f;
  color: rgba(255,255,255,0.65);
  padding: 64px 0 32px;
  font-family: var(--font-body);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-logo {
  /* Override the global .logo mask color so the wordmark shows on dark bg */
  background-color: #ffffff !important;
  width: 79px !important;
  height: 32px !important;
  display: inline-block;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  align-items: center;
  flex-wrap: wrap;
}
/* Per Figma: each top-nav item is a fixed 120px slot, text right-aligned so
 * the labels stack to a clean right edge regardless of label length. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-nav li {
  width: 120px;
  margin: 0;
  text-align: right;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-nav a {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-nav a:hover { color: #fff; }

/* LinkedIn CTA row - right-aligned, sits between the top nav and legal row.
 * Mirrors the nav above and legal links below in alignment.
 * Reference: xivic-storage.s3.amazonaws.com/cfgi/cfgi.html */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-cta-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 24px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-cta:hover { color: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-cta__icon { width: 18px; height: 18px; flex-shrink: 0; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-cta__arrow {
  margin-left: 4px;
  transition: transform var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-cta:hover .footer-cta__arrow { transform: translateX(3px); }

:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 33px;
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-bottom p {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.4);
  margin: 0;
  line-height: 1.6;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-legal a {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-legal a:hover { color: rgba(255,255,255,0.8); }

@media (max-width: 720px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-top { flex-direction: column; align-items: flex-start; }
  /* On mobile the 120px-slot grid feels rigid - let items flow naturally,
   * left-aligned under the logo. */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-nav li {
    width: auto;
    text-align: left;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-bottom { flex-direction: column; align-items: flex-start; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-nav { gap: 18px 22px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer--simple .footer-cta-row { justify-content: flex-start; }
}

/* Footer - legacy (kept for reference, no HTML uses these now) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer {
  background: var(--navy-dark);
  color: var(--text-inverse-muted);
  padding: 64px 0 32px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.8fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}
/* Single-link footer column - heading itself is the link, no list below.
   Match the other cols' <h5> visual style (uppercase caption) so the row
   reads consistently. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-col--single h5 {
  margin-bottom: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-col--single h5 a {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  padding: 4px 0;
  display: inline-block;
  transition: color 350ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-col--single h5 a:hover { color: var(--teal-light); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-brand .logo {
  background-color: var(--text-inverse);
  width: 69px;
  height: 28px;
  opacity: 0.9;
  margin-bottom: 24px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-brand p {
  font-size: 14px;
  line-height: 1.75;
  font-weight: 400;
  color: var(--text-inverse-muted);
  max-width: 320px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-col h5 {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 24px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-col ul { list-style: none; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-col li { padding: 7px 0; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-col a {
  font-size: 13px;
  color: var(--text-inverse-muted);
  transition: color 350ms var(--ease-smooth);
  display: inline-block;
  padding: 4px 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-col a:hover { color: var(--teal-light); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-bottom p {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-legal {
  display: flex;
  gap: 28px;
  list-style: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-legal a {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  transition: color 350ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-legal a:hover { color: var(--teal-light); }

/* ─────────────────────────────────────────────────────────────
   FOOTER · V2 - Rule-Cased Thesis Band
   Three tiers: oversized thesis → teal hairline → utility grid → legal.
   Ceremonial closing statement. Thesis gets full weight; columns serve
   as quiet reference below. Peer: Blackstone, KKR.
   ───────────────────────────────────────────────────────────── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2 {
  padding: 120px 0 32px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2 > .container > * + * { margin-top: 0; }

/* Tier 1 - Thesis band */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__thesis {
  padding: 0 0 88px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__thesis-line {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 5.2vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--text-inverse);
  margin: 0;
  max-width: 18ch;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__thesis-line em {
  font-style: italic;
  color: var(--teal-light);
  /* Subtle underline via border so it feels typeset, not decorated */
  position: relative;
}

/* Teal hairline rule - the "rule-cased" signature */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__rule {
  height: 2px;
  background: var(--teal);
  width: 100%;
  margin: 0 0 56px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--ease-out-expo) 0.2s;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2.is-revealed .footer-v2__rule { transform: scaleX(1); }

/* Tier 2 - Utility grid (quieter than V1, more breathing room) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 0.8fr 1fr;
  gap: 48px;
  margin-bottom: 72px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__brand .logo {
  background-color: var(--text-inverse);
  width: 69px;
  height: 28px;
  opacity: 0.9;
  margin-bottom: 20px;
  display: block;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__descriptor {
  font-size: 12px;
  line-height: 1.75;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.01em;
  max-width: 240px;
}

/* Tier 3 - Legal strip (tighter, more subordinate than V1) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__bottom p {
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* Responsive - laptop */
@media (max-width: 1200px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2 { padding: 96px 0 28px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__thesis { padding-bottom: 64px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__rule { margin-bottom: 48px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__grid { gap: 32px; margin-bottom: 56px; }
}
/* Responsive - tablet */
@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2 { padding: 72px 0 24px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__thesis { padding-bottom: 48px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__thesis-line { max-width: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__rule { margin-bottom: 40px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
    margin-bottom: 48px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__brand { grid-column: 1 / -1; }
}
/* Responsive - mobile */
@media (max-width: 600px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2 { padding: 56px 0 20px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__thesis { padding-bottom: 36px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__rule { margin-bottom: 32px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-v2__grid {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 36px;
  }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE - 3 BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

/* ── LAPTOP (≤1200px) ── */
@media (max-width: 1200px) {
  :root { --gutter: 48px; }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links { gap: 24px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links a { font-size: 11px; }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-inner { gap: 48px; grid-template-columns: 60% 40%; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-headline .headline-static { font-size: clamp(34px, 4.5vw, 56px); white-space: nowrap; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-subhead { font-size: clamp(17px, 1.9vw, 20px); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .section {
    padding-top:    var(--cfgi-pad-top, 64px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 64px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .section-head { margin-bottom: 56px; }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solutions-grid { grid-template-columns: repeat(3, 1fr); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solutions-grid::after {
    content: '';
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card { padding: 36px 24px 5px; }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__title { font-size: clamp(28px, 3.5vw, 44px); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__content { gap: 32px; }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid { grid-template-columns: repeat(4, 1fr); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid .ind-filler { display: block; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos { grid-template-columns: repeat(4, 1fr); }
  /* Zigzag recalculated for 4-col - every other column offset */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo { top: 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:nth-child(2n) { top: 40px; }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-inner { gap: 36px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-grid { gap: 32px; }
}

/* ── SKYLINE: desktop only ── */
@media (max-width: 1024px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .sky { display: none; }
}

/* ── TABLET (≤900px) ── */
@media (max-width: 900px) {
  :root { --gutter: 24px; }

  /* Nav */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .nav { height: 60px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-links, :where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-utilities { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .nav-inner { justify-content: space-between; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hamburger { display: flex; width: 44px; height: 44px; padding: 12px 8px; }

  /* Hero - single column, image BELOW text */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero { padding: 56px 0 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-inner { gap: 32px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-headline .headline-static { font-size: clamp(32px, 7vw, 48px); white-space: nowrap; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-subhead { font-size: clamp(16px, 2.5vw, 20px); max-width: 100%; margin-bottom: 28px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-content .eyebrow { margin-bottom: 24px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-body { max-width: 100%; font-size: 16px; margin-bottom: 28px; }

  /* Stats: 2-col wrap, count-aware borders. The `data-count` attribute on
   * .stats-grid is emitted by the widget render() based on the actual stat
   * count; each value selects the right "last row" to skip border-bottom on.
   * Light-on-dark hairline since the bar bg is #0A0A0A. */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar {
    padding-top:    var(--cfgi-pad-top, 48px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 48px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-columns: auto;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stat {
    padding: 28px 24px;
    border-right: none;
    border-bottom: none;
  }
  /* Desktop pseudo-divider not used in the 2-col mobile wrap (border-right
     on odd cells handles vertical dividers there). */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stat::after {
    display: none;
  }
  /* Vertical hairline between the two columns - odd-positioned cells get a
   * right border, except when they're alone in the last row (the last child). */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stat:nth-child(odd):not(:last-child) {
    border-right: 1px solid rgba(255,255,255,0.1);
  }
  /* Horizontal hairline between rows - depends on total count:
   *   3 / 4 stats  -> last row starts at item 3, so items 1+2 get bottom
   *   5 / 6 stats  -> last row starts at item 5, so items 1-4 get bottom */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-grid[data-count="3"] > .stat:nth-child(-n+2),
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-grid[data-count="4"] > .stat:nth-child(-n+2),
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-grid[data-count="5"] > .stat:nth-child(-n+4),
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-grid[data-count="6"] > .stat:nth-child(-n+4) {
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stat-number { font-size: clamp(32px, 6vw, 44px); }

  /* Section defaults (tablet) - admin can override per-device via the widget's
   * Section Spacing control which sets --cfgi-pad-* tablet variants. */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .section {
    padding-top:    var(--cfgi-pad-top, 40px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 40px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .section-head { margin-bottom: 48px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .section-title { font-size: clamp(26px, 4.5vw, 36px); }

  /* Solutions */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solutions-grid { grid-template-columns: repeat(2, 1fr); gap: 1px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card { padding: 32px 24px 5px; }

  /* Product bands - stacked */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    min-height: auto;
    padding: 40px var(--band-px);
    gap: 16px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__eyebrow { grid-column: 1 / -1; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__content {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__title { font-size: clamp(28px, 6vw, 40px); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__info { max-width: 100%; }

  /* Industries */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .industries-head { flex-direction: column; gap: 16px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid { grid-template-columns: repeat(3, 1fr); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid .ind-filler { display: block; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos { grid-template-columns: repeat(3, 1fr); padding-bottom: 30px; }
  /* Zigzag for 3-col - middle column offset */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo { top: 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:nth-child(3n+2) { top: 30px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell { padding: 28px 20px 24px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell .ind-icon { font-size: 26px; }

  /* Insights */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 48px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-grid { grid-template-columns: 1fr; gap: 1px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card { min-height: auto; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-body { padding: 28px 24px 32px; }

  /* CTA */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-banner { padding: 72px 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-banner h2 { font-size: clamp(28px, 5vw, 40px); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .btn.btn-primary--inverse, :where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-cta-inverse { width: 100%; text-align: center; }

  /* Logos */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip {
    padding-top:    var(--cfgi-pad-top, 32px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 28px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip__label { margin-bottom: 16px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logo-item { padding: 0 24px; height: 44px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item img { max-height: 24px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="bain"] img { max-height: 20px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="spire"] img { max-height: 18px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="lionbridge"] img { max-height: 12px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="treliant"] img { max-height: 18px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="wms"] img { max-height: 22px !important; }
  /* Color variant overrides */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--color .logo-item[data-logo="lionbridge"] img { max-height: 33px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--color .logo-item[data-logo="treliant"]   img { max-height: 26px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="odyssey"] img { max-height: 16px !important; }

  /* Footer */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer { padding: 56px 0 28px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px 28px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-brand { grid-column: 1 / -1; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

}

/* ── MOBILE (≤600px) ── */
@media (max-width: 600px) {
  :root { --gutter: 20px; }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .nav { height: 56px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logo-svg { height: 28px; }

  /* Hero */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero { padding: 44px 0 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-inner { gap: 32px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-content .eyebrow { margin-bottom: 20px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-headline { margin-bottom: 40px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-headline .headline-static { font-size: clamp(28px, 8vw, 40px); white-space: nowrap; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-subhead { font-size: 16px; margin-bottom: 24px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-body { font-size: 15px; font-weight: 400; margin-bottom: 24px; line-height: 1.65; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-ctas .btn-primary { text-align: center; width: 100%; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-ctas .btn-text { align-self: center; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-services { grid-template-columns: 1fr; max-width: 100%; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card { padding: 24px 20px 20px; }

  /* Stats */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar {
    padding-top:    var(--cfgi-pad-top, 36px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 36px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stat { padding: 24px 16px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stat-number { font-size: clamp(28px, 9vw, 38px); margin-bottom: 6px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stat-label { font-size: 11px; }

  /* Sections (mobile) */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .section {
    padding-top:    var(--cfgi-pad-top, 40px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 40px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .section-head { margin-bottom: 36px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .section-head .eyebrow { margin-bottom: 16px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .section-title { font-size: clamp(24px, 6.5vw, 32px); line-height: 1.18; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .section-head p { font-size: 15px; }

  /* Solutions - single column */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solutions-grid { grid-template-columns: 1fr; gap: 1px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solutions-grid::after { content: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card { padding: 28px 20px 5px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-num { margin-bottom: 16px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card h3 { font-size: 17px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card p { font-size: 14px; margin-bottom: 16px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-list { padding-top: 14px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-list li { font-size: 12px; padding: 5px 0; }

  /* Product bands - mobile */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band { padding: 48px var(--band-px); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__title { font-size: clamp(24px, 7vw, 36px); white-space: normal; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__desc { font-size: 14px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__arrow svg { width: 24px; height: 24px; }

  /* Industries - 2 columns */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid { grid-template-columns: repeat(2, 1fr); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid .ind-filler { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos { grid-template-columns: repeat(2, 1fr); padding-bottom: 24px; }
  /* Zigzag for 2-col - second column offset */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo { top: 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:nth-child(2n) { top: 24px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell { padding: 24px 16px 22px; gap: 12px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell .ind-icon { font-size: 24px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-cell .ind-name { font-size: 13px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .industry::after { bottom: 18px; left: 16px; }

  /* Teal line only on first row - recalculate for 2-col */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .industry:nth-child(-n+2) { border-top: 2px solid var(--teal); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .industry:nth-child(n+3) { border-top: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .industry:nth-child(n+3)::before { display: none; }

  /* Insights */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-grid { grid-template-columns: 1fr; gap: 1px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-body { padding: 24px 20px 28px; gap: 16px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card h3 { font-size: 17px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .insight-card p { font-size: 14px; }

  /* CTA */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-banner { padding: 56px 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-banner h2 { font-size: clamp(24px, 6.5vw, 32px); }

  /* Logos */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip {
    padding-top:    var(--cfgi-pad-top, 28px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 24px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip__label { font-size: 10px; margin-bottom: 16px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logo-item { padding: 0 20px; height: 40px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item img { max-height: 20px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="bain"] img { max-height: 16px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="spire"] img { max-height: 15px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="lionbridge"] img { max-height: 10px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="treliant"] img { max-height: 15px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="wms"] img { max-height: 18px !important; }
  /* Color variant overrides */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--color .logo-item[data-logo="lionbridge"] img { max-height: 28px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--color .logo-item[data-logo="treliant"]   img { max-height: 22px !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .logo-item[data-logo="odyssey"] img { max-height: 13px !important; }

  /* Footer */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer { padding: 48px 0 24px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-brand { margin-bottom: 8px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-brand p { font-size: 14px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-col h5 { margin-bottom: 10px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-col li { padding: 4px 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-col a { padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-legal { justify-content: center; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .footer-legal a { padding: 12px 4px; min-height: 44px; display: flex; align-items: center; }

  /* Tap targets - 44px minimum */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-text.btn-arrow { position: relative; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .btn-text.btn-arrow::before {
    content: '';
    position: absolute;
    inset: -10px -12px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card { min-height: 80px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card__link { padding: 6px 0; }

  /* Announce bar - prevent wrapping on very small screens */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .announce-bar__text { font-size: 12px; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) *, :where(.cfgi-redesign-chrome, .cfgi-homepage) *::before, :where(.cfgi-redesign-chrome, .cfgi-homepage) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .word-rotator__track {
    animation: none !important;
    transform: translateY(0) !important;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Touch device overrides */
@media (hover: none), (pointer: coarse) {
  /* Product bands - show image reveal statically on touch (no hover) */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .product-band__bg img { transform: scale(1); opacity: 0.12; }

  /* Solution cards - show accent line on all cards */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card::after { transform: scaleX(1); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .solution-card .cta-arrow { opacity: 0.4; transform: translateX(0); }

  /* Hero cards - show arrow on touch */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card .cta-arrow { opacity: 0.5; transform: translateX(0); }
}

/* ═══════════════════════════════════════════════════════════════════════
   V2 / V3 ADDITIONS - Section Variants + Version Studio
   ═══════════════════════════════════════════════════════════════════════ */

/* Section variant visibility */
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-variant] { display: none; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-variant].is-active { display: block; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .variant-section { position: relative; }

/* Lime block primitive - re-used across V2/V3 sections */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .lime-block {
  background: var(--teal-light);
  color: var(--navy);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .lime-block--dark { color: var(--navy); }

/* ═══════════════════════════════════════════════════════════════════════
   HERO V2 - Video background, oversized H1, lime-block overhang
   ═══════════════════════════════════════════════════════════════════════ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2 {
  position: relative;
  min-height: 88vh;
  background: var(--navy-dark);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 120px 0 80px;
  color: var(--text-inverse);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #0A1F44;
  filter: saturate(0.85) contrast(1.05) brightness(0.75);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(15,15,15,0.65) 0%,
      rgba(15,15,15,0.35) 40%,
      rgba(15,15,15,0.75) 100%),
    linear-gradient(90deg,
      rgba(15,15,15,0.5) 0%,
      rgba(15,15,15,0) 65%);
  z-index: 2;
  pointer-events: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
  z-index: 3;
  pointer-events: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__inner {
  position: relative;
  z-index: 4;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: end;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: Menlo, 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 32px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-weight: 400 !important;
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--text-inverse);
  margin: 0;
  position: relative;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline-line {
  display: block;
}
/* Oversized - the big move */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l1 { font-size: clamp(60px, 9.5vw, 148px); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l2 { font-size: clamp(60px, 9.5vw, 148px); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l3 {
  font-size: clamp(60px, 9.5vw, 148px);
  position: relative;
  display: inline-block;
}
/* Lime block behind the last word, overhanging the video frame */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .lime-wrap {
  position: relative;
  display: inline-block;
  padding: 0 18px 0 14px;
  color: var(--navy);
  z-index: 2;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .lime-wrap::before {
  content: '';
  position: absolute;
  inset: 6% -6px 10% -8px;
  background: var(--teal-light);
  z-index: -1;
  transform-origin: left center;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__foot {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  margin-top: 44px;
  align-items: end;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__subhead {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  max-width: 560px;
  margin: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__subhead .rotator { color: var(--teal-light); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-subhead .rotator {
  color: var(--teal);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ═══ Unified rotator system (V1/V2/V3) - vertical slide ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .rotator {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  overflow: hidden;
  height: 1.5em;
  width: auto;
  margin: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .rotator .r-item {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 700ms var(--ease-out-expo),
              opacity 500ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .rotator .r-item.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .rotator .r-item.exit {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .rotator { overflow: visible; height: auto; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .rotator .r-item { position: relative; opacity: 1; transform: none; transition: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .rotator .r-item:not(.active) { display: none; }
  /* Targeted-fix reveals - make instantly visible */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap--capital [data-reveal], :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap--ai [data-reveal], :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-grid > [data-reveal], :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-grid > [data-reveal], :where(.cfgi-redesign-chrome, .cfgi-homepage) .insights-subscribe__form[data-reveal], :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2 .cta-line, :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2 .cta-v2__subline, :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2 .cta-v2__btn {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 22px 32px 22px 36px;
  background: var(--teal-light);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: background 450ms var(--ease-out-expo),
              padding 450ms var(--ease-out-expo),
              color 450ms var(--ease-out-expo);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__cta::after {
  content: '→';
  font-size: 16px;
  transition: transform 350ms var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__cta:hover {
  background: var(--navy);
  color: var(--teal-light);
  padding-right: 40px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__cta:hover::after { transform: translateX(6px); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__meta {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: 12px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__meta::before {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(255,255,255,0.3);
}
/* Scroll indicator */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__scroll {
  position: absolute;
  bottom: 32px;
  right: var(--gutter);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__scroll::after {
  content: '';
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.55), transparent);
  animation: heroScrollPulse 2.4s var(--ease-smooth) infinite;
}
@keyframes heroScrollPulse {
  0%, 100% { transform: scaleY(0.4); transform-origin: top; opacity: 0.3; }
  50%      { transform: scaleY(1); transform-origin: top; opacity: 0.9; }
}

/* Headline word-by-word reveal */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l1, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l2, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l3 {
  overflow: hidden;
}
/* Release overflow clip after reveal so highlight block can render */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__headline .l1, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__headline .l2, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__headline .l3 {
  overflow: visible;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .word {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__headline .word {
  transform: translateY(0);
  opacity: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__headline .l1 .word { transition-delay: 0.1s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__headline .l1 .word:nth-child(2) { transition-delay: 0.18s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__headline .l2 .word:nth-child(1) { transition-delay: 0.28s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__headline .l2 .word:nth-child(2) { transition-delay: 0.36s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__headline .l2 .word:nth-child(3) { transition-delay: 0.44s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__headline .l3 .word:nth-child(1) { transition-delay: 0.56s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__headline .l3 .word:nth-child(2) { transition-delay: 0.66s; }
/* V2 H1 phrase cycle - subtle highlighter: lime band covers full text height */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .hero-v2__headline-line {
  position: relative;
  transition: color 500ms cubic-bezier(0.22, 1, 0.36, 1) 220ms;
  will-change: color;
}
/* Keep l1/l2 on their own line; l3 already inline-block */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l3 { display: inline-block; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l1, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l2 { display: block; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l1::before, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l2::before, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l3::before {
  content: '';
  position: absolute;
  left: -0.04em;
  /* Cover full glyph: cap-height top through descender bottom */
  top: -0.02em;
  bottom: -0.08em;
  background: var(--teal-light);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  /* Calm slide - site-standard reveal easing for consistency with other motion */
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity   700ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
  will-change: transform, opacity;
}
/* l1/l2 are block-level - their ::before needs to match their text run width, not full-width */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l1, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l2 { width: max-content; max-width: 100%; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l1::before, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l2::before, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l3::before {
  right: -0.04em;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .hero-v2__headline-line.is-lit {
  color: #0A0A0A;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .hero-v2__headline-line.is-lit::before {
  transform: scaleX(1);
  opacity: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .hero-v2__headline-line.is-leaving::before {
  transform-origin: right center;
  transform: scaleX(0);
  opacity: 0;
  /* Match enter duration so cycle rhythm stays even */
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity   500ms cubic-bezier(0.16, 1, 0.3, 1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline { position: relative; z-index: 1; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__headline .l3 .lime-wrap::before {
  animation: limeSweep 0.9s cubic-bezier(0.83, 0, 0.17, 1) 0.9s backwards;
  transform-origin: left center;
}
@keyframes limeSweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2 .hero-v2__eyebrow, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2 .hero-v2__foot {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__eyebrow { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.is-revealed .hero-v2__foot { opacity: 1; transform: translateY(0); transition-delay: 1.3s; }

/* ═════════════════════════════════════════════════════════════════
   HERO V2 DARK CHROME - extends video's dark feel to nav + stats
   Activated by body.hero-dark-chrome (V2 variant + near top of page)
   ═════════════════════════════════════════════════════════════════ */
/* Announce bar stays solid black (base rule) at all scroll positions. The
 * transparent-gradient-over-video effect only applies to the nav now. */
body.hero-dark-chrome .nav {
  background: linear-gradient(180deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 100%) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  z-index: 102;
}
@media (min-width: 721px) {
  body.hero-dark-chrome:not(.home) .nav {
    background: #000 !important;
  }
}
/* Pull hero-v2 up so the video fills behind the transparent nav, but NOT
 * behind the announce bar - the announce bar stays visible at the top of the
 * page with the hero starting just below it. Applied unconditionally so the
 * layout offset is permanent (toggling hero-dark-chrome must not shift document
 * height, otherwise the page jumps when the stats-bar hits the top). */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2 {
  margin-top: calc(-1 * var(--nav-h, 64px));
  padding-top: calc(120px + var(--nav-h, 64px)) !important;
}
body.hero-dark-chrome .logo {
  background-color: #fff !important;
}
body.hero-dark-chrome .nav-links a.ekit-menu-nav-link {
  color: rgba(255,255,255,0.9) !important;
}
body.hero-dark-chrome .nav-links a:hover {
  color: var(--teal-light) !important;
}
body.hero-dark-chrome .nav-divider {
  background: rgba(255,255,255,0.22) !important;
}
body.hero-dark-chrome .locale-current, body.hero-dark-chrome .locale-current * {
  color: rgba(255,255,255,0.9) !important;
}
body.hero-dark-chrome .locale-current svg { stroke: rgba(255,255,255,0.9); }
body.hero-dark-chrome .nav-cta.btn-primary {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
}
body.hero-dark-chrome .nav-cta.btn-primary:hover {
  background: var(--teal-light) !important;
  color: #0A0A0A !important;
  border-color: var(--teal-light) !important;
}
/* Stats bar - dark treatment in V2, seamless continuation of hero
   (uses hero-v2-active so it persists through scroll, unlike hero-dark-chrome) */
body.hero-v2-active .stats-bar {
  background: #0A0A0A !important;
}
body.hero-v2-active .stats-bar .stat-number {
  color: #fff !important;
}
body.hero-v2-active .stats-bar .stat-label {
  color: rgba(255,255,255,0.6) !important;
}
body.hero-v2-active .stats-bar .stat {
  border-color: rgba(255,255,255,0.1) !important;
}

@media (min-width: 901px) {
  body.hero-v2-active .stats-bar .stat {
    margin-right: -32px;
  }
}

body.hero-v2-active .stats-bar .stat sup {
  color: #05B8FC !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO V3 - Editorial split, color block bleeds across columns
   ═══════════════════════════════════════════════════════════════════════ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3 {
  position: relative;
  background: var(--bg-subtle);
  padding: 60px 0 100px;
  overflow: hidden;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__inner {
  position: relative;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0;
  align-items: start;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__eyebrow {
  grid-column: 1 / 5;
  grid-row: 1;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 48px;
  align-self: center;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__eyebrow::before {
  content: '';
  width: 56px;
  height: 1.5px;
  background: var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__ticker {
  grid-column: 8 / 13;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-caption);
  margin-bottom: 48px;
  align-self: center;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__ticker-dot {
  width: 8px;
  height: 8px;
  background: var(--teal);
  border-radius: 50%;
  animation: tickerPulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes tickerPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.25); }
}

/* Editorial H1 - massive, broken across columns */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__headline {
  grid-column: 1 / 13;
  grid-row: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.035em;
  color: var(--navy);
  margin: 0;
  position: relative;
  z-index: 3;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l1, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l2, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l3 {
  display: block;
  overflow: hidden;
  font-size: clamp(56px, 8.5vw, 136px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l1 { padding-left: 0; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l2 { padding-left: 12%; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l3 { padding-left: 4%; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__word {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__word { transform: translateY(0); opacity: 1; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__l1 .hero-v3__word { transition-delay: 0.1s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__l1 .hero-v3__word:nth-child(2) { transition-delay: 0.22s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__l2 .hero-v3__word { transition-delay: 0.34s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__l2 .hero-v3__word:nth-child(2) { transition-delay: 0.44s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__l2 .hero-v3__word:nth-child(3) { transition-delay: 0.54s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__l3 .hero-v3__word { transition-delay: 0.66s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__l3 .hero-v3__word:nth-child(2) { transition-delay: 0.76s; }

/* Lime block - large, overhanging; breaks the grid */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__block {
  position: absolute;
  top: 38%;
  left: 52%;
  width: 44%;
  height: 28vw;
  max-height: 360px;
  background: var(--teal-light);
  z-index: 1;
  transform-origin: right center;
  transform: scaleX(0);
  transition: transform 0.9s cubic-bezier(0.83, 0, 0.17, 1) 0.3s;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__block { transform: scaleX(1); }
/* Inner lime block content - caption that peeks over */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__block-content {
  position: absolute;
  left: 32px;
  bottom: 28px;
  max-width: 340px;
  opacity: 0;
  transition: opacity 0.6s var(--ease-smooth) 1.1s;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__block-content { opacity: 1; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__block-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__block-eyebrow::before {
  content: '';
  width: 28px;
  height: 1.5px;
  background: var(--navy);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__block-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: var(--navy);
  margin: 0;
}

/* Portrait still overlapping right edge */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__still {
  position: absolute;
  top: 14%;
  right: -4%;
  width: 34%;
  aspect-ratio: 3/4;
  background: var(--navy-dark);
  overflow: hidden;
  z-index: 2;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.83, 0, 0.17, 1) 0.5s;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__still { clip-path: inset(0 0 0 0); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.35) contrast(1.08) brightness(0.58);
  transform: scale(1.08);
  transition: transform 6s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__still img { transform: scale(1); }

/* Foot row with subhead + CTA block */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__foot {
  grid-column: 1 / 13;
  grid-row: 3;
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: end;
  position: relative;
  z-index: 3;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__subhead {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--text-body);
  max-width: 480px;
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease-out-expo) 1.1s,
              transform 0.8s var(--ease-out-expo) 1.1s;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__subhead { opacity: 1; transform: translateY(0); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__subhead .rotator { color: var(--teal); font-family: var(--font-display); font-style: italic; font-weight: 500; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.6s var(--ease-smooth) 1.3s;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__actions { opacity: 1; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 34px;
  background: var(--navy-dark);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 400ms, color 400ms, padding 400ms;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__cta:hover {
  background: var(--teal-light);
  color: var(--navy);
  padding-right: 42px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__cta::after { content: '→'; transition: transform 350ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__cta:hover::after { transform: translateX(6px); }

/* Large ghost serial in the corner */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__serial {
  position: absolute;
  top: 4px;
  right: var(--gutter);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text-caption);
  font-weight: 400;
  opacity: 0.6;
}

@media (max-width: 1100px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2 { padding: 100px 0 64px; min-height: 78vh; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l1, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l2, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l3 { font-size: clamp(44px, 9vw, 100px); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__foot { grid-template-columns: 1fr; gap: 28px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__actions { align-items: flex-start; }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__still { width: 40%; right: -6%; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__block { height: 32vw; }
}
@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2 { padding: 80px 0 56px; min-height: 70vh; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__scroll { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .lime-wrap { padding: 0 12px 0 10px; }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3 { padding: 40px 0 60px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l2 { padding-left: 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l3 { padding-left: 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__block { position: relative; left: 0; top: 0; width: 100%; height: 180px; margin-top: 32px; transform-origin: left; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__still { position: relative; right: 0; top: 0; width: 100%; margin-top: 24px; aspect-ratio: 4/3; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__foot { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__actions { justify-content: flex-start; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__serial { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__ticker { display: none; }
}

/* ═══ Hero - narrow mobile (≤600px): stack CTAs, shrink rotator, allow wrap ═══ */
@media (max-width: 600px) {
  /* Stack hero CTAs full-width in a column (was side-by-side, overflowed) */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-services--v2 {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2 {
    width: 100%;
    justify-content: center;
    padding: 18px 22px !important;
  }

  /* Subhead + rotator shrink to fit the column without overflow */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__subhead { font-size: 18px !important; line-height: 1.45 !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .rotator {
    /* Allow the rotator to wrap when the active word is longer than the line */
    display: block;
    height: auto;
    min-height: 1.5em;
    overflow: visible;
    white-space: normal;
    width: 100%;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .rotator .r-item {
    position: relative;
    white-space: normal;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .rotator .r-item:not(.active) {
    position: absolute;
    width: 100%;
  }
}

/* ═══ PILLARS V2 - A&M-style: light bg, big right-aligned title, cards overlap ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v2 {
  background: var(--bg);
  position: relative;
  padding-top:    var(--cfgi-pad-top, 0);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 64px);
  padding-left:   var(--cfgi-pad-left, 0);
  overflow: hidden;  /* contain any slight negative-margin overflow */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v2__stack {
  /* Container-bound - cards no longer full-bleed */
  position: relative;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v2__head {
  padding: 0 0 24px;
  /* Title sits top-right, eyebrow top-left, large gap left empty to let the title breathe */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v2__head-inner {
  display: flex;
  justify-content: flex-end;  /* title sits top-right like the reference */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v2__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 18px;
  white-space: nowrap;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v2__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(56px, 7.2vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.028em;
  color: #0A0A0A;
  max-width: 14ch;
  margin: 0;
  position: relative;
  z-index: 3;  /* title ABOVE cards - overlaps on top */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v2__title .amp-lime {
  color: #0A0A0A;
  font-family: var(--font-display);
  font-style: italic;
}
/* Cards - gap between them. Per-pillar headings overlap their own card. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v2__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}

/* Pillar wrapper - holds the overhead heading + card stacked vertically */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap--capital { /* heading above, card below */ }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap--ai { /* card above, heading below */ }

/* Overhead Georgia italic heading per pillar - overlaps the photo card */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__overhead {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #0A0A0A;
  margin: 0;
  position: relative;
  z-index: 3;
  max-width: none;          /* allow "Financial partner to" to fit on one line */
  white-space: nowrap;      /* keep "Financial partner to" / "AI-Enabled" intact */
  font-size: clamp(32px, 3.4vw, 48px);  /* slightly tighter so single line fits */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__overhead--left { padding-left: 26px;  margin-bottom: -41px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__overhead--right { padding-right: 26px; margin-top: -38px; align-self: flex-end; text-align: right; }

/* Solid teal block sits behind one line of the heading */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__overhead-block {
  display: inline-block;
  background: var(--teal);
  color: #0A0A0A;
  padding: 0 0.06em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Hide legacy top heading wrapper if present (no-op since HTML removed) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v2__head { display: none; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2 {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  min-height: 560px;                          /* card photo area */
  background: #E8E8E4;                        /* muted gray default */
  transition: background 0.6s var(--ease-out-expo),
              color     0.6s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap > .pillar-v2 { width: 100%; flex: 1 1 auto; }

/* ── Pillars directional reveal: left card slides in from left, right from right ── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap--capital [data-reveal] {
  transform: translateX(-40px) translateY(20px);
  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap--ai [data-reveal] {
  transform: translateX(40px) translateY(20px);
  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap--capital [data-reveal].is-visible, :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap--ai [data-reveal].is-visible {
  transform: translateX(0) translateY(0);
  opacity: 1;
}

/* ── Pillars stagger: left heading → left card → right card → right heading ── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap--capital .pillar-v2__overhead[data-reveal] { --reveal-delay: 0ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap--capital .pillar-v2[data-reveal] { --reveal-delay: 150ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap--ai .pillar-v2[data-reveal] { --reveal-delay: 350ms; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2-wrap--ai .pillar-v2__overhead[data-reveal] { --reveal-delay: 500ms; }

/* ── Photo background (per Figma V4) ── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__img {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.25) brightness(0.85);
  transition: transform 1.2s var(--ease-out-expo),
              filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0.25) 55%,
    rgba(0,0,0,0) 100%
  );
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out-expo);
}
/* AI card: gradient flipped (dark at top, since content sits at top) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2--ai::after {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.7) 0%,
    rgba(0,0,0,0.25) 55%,
    rgba(0,0,0,0) 100%
  );
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2:hover .pillar-v2__img img {
  transform: scale(1.04);
  filter: saturate(0.4) brightness(0.75);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2:hover::after { opacity: 0.92; }

/* Body - sits above image + gradient */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__body {
  position: absolute;
  inset: 0;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  z-index: 3;
}
@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__body {
    padding: 0px;
  }
}


/* AI card body sits at the TOP (asymmetric pairing with the heading at bottom-right) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2--ai .pillar-v2__body {
  justify-content: flex-start;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.6s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.9;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2:hover .pillar-v2__eyebrow { color: var(--teal-light); }

/* Headline - Inter Bold, white on photo */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__headline {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: clamp(24px, 2vw, 28px);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: #fff;
  max-width: 22ch;
}

@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__headline {
    margin: 0 0 -10px;
  }
}

/* CTA - blue on dark photo, grows on hover */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 8px;
  color: var(--teal);
  transition: gap      0.5s var(--ease-out-expo),
              font-size 0.5s var(--ease-out-expo),
              letter-spacing 0.5s var(--ease-out-expo),
              color 0.5s var(--ease-out-expo);
  max-width: 60%;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.5s var(--ease-out-expo),
              width     0.5s var(--ease-out-expo),
              height    0.5s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2:hover .pillar-v2__cta {
  gap: 18px;
  font-size: 16px;
  letter-spacing: 0.12em;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2:hover .pillar-v2__cta svg {
  width: 24px;
  height: 24px;
  transform: translateX(2px);
}

/* Legacy bits hidden (img is now used per Figma V4) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__figure, :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__num, :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__corner, :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__scrim, :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__grid-bg, :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__ai-prism { display: none; }

/* AI prism rings */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__ai-prism {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .prism-ring, :where(.cfgi-redesign-chrome, .cfgi-homepage) .prism-core {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(10,10,10,0.18);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .prism-ring--1 { width: 280px; height: 280px; animation: prismSpin 28s linear infinite; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .prism-ring--2 { width: 440px; height: 440px; border-style: dashed; animation: prismSpin 48s linear infinite reverse; opacity: 0.5; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .prism-ring--3 { width: 600px; height: 600px; animation: prismSpin 72s linear infinite; opacity: 0.28; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .prism-core {
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(10,10,10,0.12) 0%, transparent 70%);
  border: none;
  animation: prismPulse 4s ease-in-out infinite;
}
@keyframes prismSpin { to { transform: rotate(360deg); } }
@keyframes prismPulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.15); opacity: 1; } }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__grid-bg { z-index: 0; opacity: 0.7; }

/* ═══ PILLARS V3 - diagonal diptych, broken grid ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3 {
  background: var(--bg);
  padding: 120px 0 160px;
  position: relative;
  overflow: hidden;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__container { position: relative; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__serial {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin-bottom: 32px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: -100px;        /* pull the stage up so it overlaps the title */
  max-width: 16ch;
  /* Right-align the title to match the reference - sits top-right */
  margin-left: auto;
  text-align: left;
  width: fit-content;
  position: relative;
  z-index: 5;                   /* title ABOVE the plates where they overlap */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__title em {
  font-style: italic;
  color: #0A0A0A;
  background: var(--teal-light);
  padding: 0 0.15em 0.05em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__stage {
  position: relative;
  min-height: 720px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate {
  position: absolute;
  display: block;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.7s var(--ease-out-expo),
              box-shadow 0.7s var(--ease-out-expo),
              filter     0.6s var(--ease-out-expo);
  will-change: transform;
}
/* When the stage is hovered, dim all plates - then restore the one being hovered */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__stage:hover .plate { filter: brightness(0.85); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__stage .plate:hover {
  filter: brightness(1);
  transform: translateY(-10px);
  box-shadow: 0 40px 60px -20px rgba(0,0,0,0.4);
  z-index: 4;  /* stays below title (z:5) so it never covers "Two pillars / working as one." */
}
/* Keep the AI plate's baseline translate when not hovered */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate--ai { will-change: transform; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__stage:not(:hover) .plate--ai, :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__stage .plate--ai:not(:hover) { transform: translateY(60px); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__stage .plate--ai:hover { transform: translateY(50px); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate--capital {
  top: 0;
  left: 0;
  width: 54%;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  z-index: 2;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate--ai {
  top: 180px;
  right: 0;
  width: 54%;
  aspect-ratio: 4 / 5;
  max-height: 560px;
  z-index: 3;
  transform: translateY(60px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate__img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s var(--ease-out-expo);
  filter: grayscale(20%) contrast(1.05);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate:hover .plate__img img { transform: scale(1); filter: grayscale(0) contrast(1); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
  transition: background 0.6s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate:hover::after {
  background: #000;   /* fully opaque black on hover - image fully masked */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate__label {
  position: absolute;
  top: 32px;
  left: 32px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  z-index: 4;
  color: #fff;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate__label--right {
  left: auto;
  right: 32px;
  top: auto;
  bottom: 32px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate__num {
  display: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate__name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.01em;
  line-height: 1;
  position: relative;
  display: inline-block;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate__name::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--teal-light);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate:hover .plate__name::after { transform: scaleX(1); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate__desc {
  position: absolute;
  bottom: 32px;
  left: 32px;
  right: 32px;
  max-width: 380px;
  z-index: 4;
  color: #fff;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate__desc--right {
  bottom: auto;
  top: 32px;
  left: auto;
  right: 32px;
  text-align: right;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate__desc p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 16px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-light);
  transition: gap 0.5s var(--ease-out-expo),
              font-size 0.5s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate__cta svg {
  transition: transform 0.5s var(--ease-out-expo),
              width     0.5s var(--ease-out-expo),
              height    0.5s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate:hover .plate__cta { gap: 18px; font-size: 18px; letter-spacing: 0.14em; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .plate:hover .plate__cta svg { width: 26px; height: 26px; transform: translateX(4px); }

/* Lime invader block - removed in latest direction */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__invader { display: none !important; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .invader__label, :where(.cfgi-redesign-chrome, .cfgi-homepage) .invader__plus { display: none; }

/* Responsive for pillar variants */
@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v2__split { grid-template-columns: 1fr; min-height: auto; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2 { min-height: 520px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__body { left: 32px; right: 32px; bottom: 40px; top: 40px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__corner { width: 40px; height: 40px; top: 16px; right: 16px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v2__head-inner { grid-template-columns: 1fr; gap: 16px; }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__stage { min-height: auto; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .plate--capital, :where(.cfgi-redesign-chrome, .cfgi-homepage) .plate--ai {
    position: relative;
    width: 100%;
    max-width: 100%;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    margin-bottom: 24px;
    aspect-ratio: 4 / 5;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillars-v3__invader { display: none; }
}

/* On narrow mobile the body must grow with content, not clip inside a fixed height */
@media (max-width: 720px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2 { min-height: 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__body {
    position: relative;
    inset: auto;
    padding: 40px 32px;
  }
}

/* Industry Photo - number badge + lime accent enhancement */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo__num {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #fff;
  opacity: 0.9;
  background: rgba(10,10,10,0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 9px;
  border-radius: 2px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo--lime::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--teal-light);
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
  opacity: 0.85;
  transition: opacity 0.5s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo--lime:hover::after { opacity: 0.25; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo--lime .ind-photo__num {
  background: var(--teal-light);
  color: #0A0A0A;
  opacity: 1;
}

/* ═══ INDUSTRIES V3 - Draggable auto-scroll gallery with genie hover ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .industries-v3 {
  overflow: clip;           /* clip without establishing a scroll container for y */
  overflow-x: clip;
  overflow-y: visible;      /* let hovered cards grow up over the title */
  padding-bottom: 0;        /* tight to the next section - track already has reserved vertical room for hover growth */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .industries-v3 .industries-head {
  margin-bottom: 0;   /* V3 gallery has its own spacing via margin-top on .ind-gallery */
  position: relative;
  z-index: 1;         /* title sits below expanded cards */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery {
  position: relative;
  z-index: 2;              /* above the title so hover-grown cards can overlap it */
  /* Pull gallery tight to the title; track padding provides the vertical room
     needed for genie-expanded cards to grow upward without clipping. */
  margin: -80px auto 0;
  max-width: var(--max-width);   /* centered to site grid */
  padding: 0 var(--gutter);      /* honor the same gutter as .container */
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;   /* allow vertical page scroll; we handle horizontal */
  cursor: grab;
  overflow: visible;    /* cards can genie-grow vertically out of the strip */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery.is-dragging { cursor: grabbing; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__viewport {
  /* Clips the translating track horizontally within the centered max-width,
     while letting genie-expanded cards grow vertically beyond the strip. */
  overflow-x: clip;
  overflow-y: visible;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__track {
  display: flex;
  align-items: center;   /* cards expand from vertical center, not top */
  gap: 14px;
  /* Height is LOCKED to the hover-expanded state so the section never shifts
     as cards grow/shrink. 510 (max card) + 60 top + 60 bottom pad = 630. */
  height: 630px;
  padding: 60px 32px;
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* Each card - 2:3 portrait default, genie-grows to larger 2:3 on hover */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card {
  position: relative;
  flex: 0 0 200px;
  height: 300px;           /* 2:3 aspect */
  border-radius: 4px;
  overflow: hidden;
  background: #E5E5E0;
  /* Smoother, more organic curve and slightly longer duration */
  transition:
    flex-basis 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    height 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transform-origin: center center;
  cursor: pointer;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.45) contrast(1.06) brightness(0.8);
  transition:
    filter 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  transform: scale(1.04);
  pointer-events: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.1) 45%, transparent 75%);
  transition: opacity 0.5s var(--ease-out-expo);
  opacity: 0.85;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__label {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  color: #FAFAF8;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.25;
  opacity: 0.98;
  transition: font-size 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              bottom    0.55s cubic-bezier(0.16, 1, 0.3, 1),
              left      0.55s cubic-bezier(0.16, 1, 0.3, 1),
              right     0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__num {
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 2;
  color: rgba(250,250,248,0.55);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Icon - sits just above the industry name (bottom-left stack) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__icon {
  position: absolute;
  left: 18px;
  bottom: 44px;   /* sits directly above the label */
  z-index: 2;
  color: var(--teal-light);
  font-size: 22px;
  line-height: 1;
  opacity: 1;
  transform: none;
  transition: font-size 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              bottom    0.55s cubic-bezier(0.16, 1, 0.3, 1),
              left      0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Hover CTA - "Explore [Industry] →", Inter, lime arrow */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__cta {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #FAFAF8;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;   /* whole card is clickable */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__cta .ind-gallery__cta-arrow {
  color: var(--teal-light);
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* "Genie" expanded state - only when NOT dragging, and pointer-based devices */
@media (hover: hover) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery:not(.is-dragging) .ind-gallery__card:hover {
    flex-basis: 340px;
    height: 510px;         /* maintains 2:3 aspect while growing from center */
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery:not(.is-dragging) .ind-gallery__card:hover img {
    filter: saturate(1) contrast(1.02) brightness(0.92);
    transform: scale(1);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery:not(.is-dragging) .ind-gallery__card:hover::after {
    opacity: 1;
  }
  /* Icon grows on hover, stays directly above the (larger) name */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery:not(.is-dragging) .ind-gallery__card:hover .ind-gallery__icon {
    font-size: 28px;
    left: 24px;
    bottom: 98px;    /* tight stack: ~6px above the enlarged label (label top ≈ 92px) */
  }
  /* Name stays Inter Medium, scales up and lifts to make room for CTA below */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery:not(.is-dragging) .ind-gallery__card:hover .ind-gallery__label {
    font-size: 22px;
    font-weight: 500;
    bottom: 66px;
    left: 24px;
    right: 24px;
    letter-spacing: -0.005em;
  }
  /* "Explore [Industry] →" CTA fades in */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery:not(.is-dragging) .ind-gallery__card:hover .ind-gallery__cta {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery:not(.is-dragging) .ind-gallery__card:hover .ind-gallery__cta-arrow {
    transform: translateX(4px);
  }
  /* Siblings shrink in place - same vertical center, so the row stays put */
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery:not(.is-dragging) .ind-gallery__track:has(.ind-gallery__card:hover) .ind-gallery__card:not(:hover) {
    flex-basis: 170px;
    height: 255px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery:not(.is-dragging) .ind-gallery__track:has(.ind-gallery__card:hover) .ind-gallery__card:not(:hover) img {
    filter: saturate(0.3) contrast(1.08) brightness(0.55);
  }
}

/* Active (tapped) state on touch - promote to expanded via JS class */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card.is-active {
  flex-basis: 300px;
  height: 450px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card.is-active img {
  filter: saturate(1) contrast(1.02) brightness(0.92);
  transform: scale(1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card.is-active::after { opacity: 1; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card.is-active .ind-gallery__icon { font-size: 26px; left: 22px; bottom: 92px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card.is-active .ind-gallery__label {
  font-size: 20px;
  font-weight: 500;
  bottom: 60px;
  left: 22px;
  right: 22px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card.is-active .ind-gallery__cta { opacity: 1; transform: translateY(0); }

/* "Drag to explore" hint - fades out on first interaction */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__hint {
  position: absolute;
  top: 18px;
  right: 40px;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery.is-ready .ind-gallery__hint { opacity: 1; transform: translateY(0); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery.has-interacted .ind-gallery__hint { opacity: 0; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__hint-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(10,10,10,0.85);
  color: #FAFAF8;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery { margin-top: -40px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__track { gap: 10px; padding: 80px 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card { flex: 0 0 160px; height: 240px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card.is-active { flex-basis: 240px; height: 360px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__hint { right: 20px; }
}
@media (max-width: 600px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery { margin-top: -20px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__track { padding: 60px 0; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card { flex: 0 0 140px; height: 210px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-gallery__card.is-active { flex-basis: 220px; height: 330px; }
}

/* ═══ CTA V2 - off-white background, oversized type, lime highlighter ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2 {
  background: var(--bg);
  color: #0A0A0A;
  padding-top:    var(--cfgi-pad-top, 64px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 64px);
  padding-left:   var(--cfgi-pad-left, 0);
  position: relative;
  overflow: hidden;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__diagonal {
  display: none;  /* solid lime background - no diagonal split */
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__inner {
  position: relative;
  z-index: 2;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0A0A0A;
  opacity: 0.65;
  display: block;
  margin-bottom: 32px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6.4vw, 86px);
  line-height: 0.98 !important;
  letter-spacing: -0.025em;
  color: #0A0A0A;
  max-width: 18ch;
  margin-bottom: 24px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__subline {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  color: #6B6B6B;
  max-width: 480px;
  margin: 0 0 40px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__title em {
  font-style: italic;
  font-family: var(--font-display);
  color: #0A0A0A;
  position: relative;
  display: inline-block;
  z-index: 1;
  padding: 0 0.08em;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__title em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0.18em;
  bottom: 0.12em;
  background: var(--teal-light);  /* brand lime - highlighter marker effect */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out-expo) 0.35s;
  z-index: -1;
  border-radius: 2px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2.is-revealed .cta-v2__title em::after { transform: scaleX(1); }

/* CTA hero-style line-by-line reveal (driven by .cta-v2.is-revealed) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2 .cta-line {
  display: block;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--line-delay, 0ms),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--line-delay, 0ms);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2.is-revealed .cta-line {
  opacity: 1;
  transform: translateY(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2 .cta-v2__subline {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 400ms,
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 400ms;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2.is-revealed .cta-v2__subline {
  opacity: 1;
  transform: translateY(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2 .cta-v2__btn {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 550ms,
    transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 550ms,
    background 350ms var(--ease-smooth),
    color 350ms var(--ease-smooth),
    border-color 350ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2.is-revealed .cta-v2__btn {
  opacity: 1;
  transform: translateY(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__foot {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 48px;
  flex-wrap: wrap;
  padding-top: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(10,10,10,0.75);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__meta .cta-v2__hours { opacity: 0.6; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 22px 36px;
  background: #0A0A0A;
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__btn > * { position: relative; z-index: 1; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--teal-light);
  transform: translateX(-101%);
  transition: transform 0.5s var(--ease-out-expo);
  z-index: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__btn:hover {
  color: #0A0A0A;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__btn svg {
  transition: transform 0.5s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__btn:hover svg {
  transform: translateX(6px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__btn:hover::before { transform: translateX(0); }

/* ═══ CTA V3 - split: navy reading / lime action ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3 {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  min-height: 520px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__left {
  background: #0A0A0A;
  color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  /* Align left content edge with the 1280px container */
  padding-top: 96px;
  padding-bottom: 96px;
  padding-left: var(--page-inset);
  padding-right: clamp(40px, 4vw, 72px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__left-inner { max-width: 560px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__serial {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.5);
  display: block;
  margin-bottom: 40px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 80px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 28px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__title em {
  font-style: italic;
  color: #0A0A0A;
  position: relative;
  display: inline-block;
  z-index: 1;
  padding: 0 0.08em;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__title em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -0.05em;
  bottom: -0.05em;
  background: var(--teal-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out-expo) 0.35s;
  z-index: -1;
  border-radius: 2px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3.is-revealed .cta-v3__title em::after { transform: scaleX(1); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: rgba(255,255,255,0.75);
  max-width: 46ch;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__right {
  background: #0A0A0A;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 20px;
  /* Align right content edge with the 1280px container */
  padding-top: 96px;
  padding-bottom: 96px;
  padding-left: clamp(40px, 4vw, 72px);
  padding-right: var(--page-inset);
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.6s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__right::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--teal-light);
  transform: translateX(-100%);
  transition: transform 0.7s var(--ease-out-expo);
  z-index: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__right:hover::before { transform: translateX(0); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__right:hover { color: #0A0A0A; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__label, :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__arrow, :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__meta {
  position: relative;
  z-index: 2;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__row {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 20px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__label {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__arrow {
  align-self: auto;
  flex-shrink: 0;
  transition: transform 0.7s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__right:hover .cta-v3__arrow { transform: translateX(12px); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__meta em {
  font-style: normal;
  font-weight: 600;
  opacity: 1;
}

@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2 {
    padding-top:    var(--cfgi-pad-top, 88px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 72px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__foot { flex-direction: column; align-items: flex-start; gap: 24px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3 { grid-template-columns: 1fr; min-height: auto; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__left, :where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v3__right { padding: 64px 32px; }
}

/* ═══ ABOVE-THE-FOLD CANONICAL HERO (V1/V2/V3) ═══
   Goal: hero + stats fit within 900px viewport at 1440 wide.
   Applies to V2/V3 overrides; V1 already ships compact.
═════════════════════════════════════════════════════════════ */

/* V2: tighten, pin to top, size headline down for fit */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2 {
  min-height: 0 !important;
  height: clamp(520px, 72vh, 640px);
  padding: 96px 0 40px !important;
  align-items: center !important;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l1, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l2, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__headline .l3 {
  font-size: clamp(44px, 6vw, 74px) !important;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__foot {
  grid-template-columns: 1fr !important;
  gap: 24px !important;
  margin-top: 28px !important;
  align-items: start !important;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2__subhead { font-size: 24px !important; line-height: 1.5 !important; max-width: 720px !important; }

/* V2 service CTAs - match hero V3 button sizing (pill style, not boxy card) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-services--v2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  margin-bottom: 32px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2 {
  --btn-bg: rgba(255,255,255,0.06);
  --btn-fg: #fff;
  --btn-bd: rgba(255,255,255,0.22);
  position: relative;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  overflow: hidden;
  isolation: isolate;
  transition: color 450ms var(--hover-ease), border-color 450ms var(--hover-ease);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Sliding lime fill wipe on hover */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--teal-light);
  transform: translateX(-101%);
  transition: transform 550ms var(--hover-ease);
  z-index: -1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2:hover::before { transform: translateX(0); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2:hover {
  color: var(--navy-dark) !important;
  border-color: var(--teal-light) !important;
}
/* Secondary variant - outline with white fill wipe */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2-secondary {
  --btn-bd: rgba(255,255,255,0.22);
  background: transparent !important;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2-secondary::before {
  background: #fff !important;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2-secondary:hover {
  color: var(--navy-dark) !important;
  border-color: #fff !important;
}
/* V3-style label + animated arrow (adopted for V2) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2 .hero-v3-btn__label { position: relative; z-index: 1; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2 .hero-v3-btn__arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  overflow: hidden;
  color: #fff;
  transition: color 450ms var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2:hover .hero-v3-btn__arrow { color: var(--navy-dark); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2-secondary .hero-v3-btn__arrow { color: #fff; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2-secondary:hover .hero-v3-btn__arrow { color: var(--navy-dark); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2 .hero-v3-btn__arrow svg {
  width: 14px;
  height: 14px;
  transition: transform 450ms var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2:hover .hero-v3-btn__arrow svg {
  transform: translateX(22px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2 .hero-v3-btn__arrow::after {
  content: '→';
  position: absolute;
  font-size: 14px;
  font-weight: 600;
  transform: translateX(-22px);
  transition: transform 450ms var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2:hover .hero-v3-btn__arrow::after { transform: translateX(0); }

/* Old V1 card children no longer rendered on V2, but keep hidden just in case */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2 .hero-card__title, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2 .hero-card__desc, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v2 .hero-card__link { display: none; }

/* V2: hero + stats-bar together fill the viewport fold.
   Applied unconditionally (was scoped to body.hero-dark-chrome which the JS
   strips off at scrollY > heroH - 120) - toggling the class shrinks hero by
   ~361px which propagates through document height and yanks every section
   below up/down by exactly that. Keeping a constant hero size eliminates the
   jump entirely; the visual chrome dim/light transition still happens via the
   color rules below. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2 {
  height: calc(100vh + var(--nav-h, 64px) - var(--announce-h, 40px) - var(--stats-h, 300px)) !important;
  min-height: 560px !important;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-services--v2 {
  margin-bottom: 56px !important;
}

/* ═══ GLOBAL: V1 + V3 hero + stats-bar fit the viewport fold ═══
   V1 + V3 sit BELOW the nav/announce chrome, so available height = 100vh − announce − nav − stats.
   Use min-height so content never gets clipped on very tight viewports. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero {
  min-height: calc(100vh - var(--announce-h, 40px) - var(--nav-h, 64px) - var(--stats-h, 300px)) !important;
  display: flex;
  align-items: center;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__split {
  min-height: calc(100vh - var(--announce-h, 40px) - var(--nav-h, 64px) - var(--stats-h, 300px)) !important;
}

/* On small viewports, release the fold constraint so content doesn't get cramped */
@media (max-height: 680px), (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero { min-height: 0 !important; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__split { min-height: 560px !important; }
}

/* V3: collapse to a single compact column (no block, no still, no ticker) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3 {
  min-height: 0 !important;
  padding: 80px 0 40px !important;
  overflow: visible;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__grid {
  display: block !important;
  min-height: 0 !important;
  gap: 0 !important;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__headline {
  grid-column: unset !important;
  grid-row: unset !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l1, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l2, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l3 {
  padding-left: 0 !important;
  font-size: clamp(44px, 6vw, 74px) !important;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__foot {
  grid-column: unset !important;
  grid-row: unset !important;
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 24px !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  max-width: 880px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__subhead {
  max-width: 640px;
  font-size: clamp(16px, 1.3vw, 19px);
  color: var(--text);
  margin: 0 !important;
}
/* V3 - rotator in Inter Medium, teal-light (bold green) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__subhead .rotator {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  color: var(--teal-light) !important;
  letter-spacing: -0.005em;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__subhead .rotator .r-item { font-weight: 500 !important; }

/* V3 service cards - editorial light variant */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-services--v3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 280px));
  gap: 16px;
  margin-top: 4px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v3 {
  display: block;
  padding: 18px 20px 16px;
  background: #fff;
  border: 1px solid rgba(10,31,68,0.08);
  text-decoration: none;
  transition: border-color 400ms var(--ease-smooth), transform 400ms var(--ease-smooth), box-shadow 400ms var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v3:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -14px rgba(10,31,68,0.18);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v3 .hero-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--navy);
  margin: 0 0 4px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v3 .hero-card__desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v3 .hero-card__link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--teal);
  text-transform: uppercase;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v3 .hero-card__arrow { display: inline-block; transition: transform 350ms var(--ease-out-expo); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v3:hover .hero-card__arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-services--v2, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-services--v3 { grid-template-columns: 1fr; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2 {
    height: auto !important;
    min-height: 0 !important;
    padding: 80px 0 48px !important;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3 { padding: 64px 0 40px !important; }
}

/* ═══ HERO V3 (REFERENCE MATCH) - split: Georgia + body + photo, H1 overlaps 50% of image ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3 {
  background: var(--bg);
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__split {
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 640px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 64px var(--gutter) 56px;
  gap: 0;
  align-items: stretch;
  position: relative;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__col {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  position: relative;
  z-index: 3;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(52px, 6.4vw, 92px);
  line-height: 1.03;
  letter-spacing: -0.022em;
  color: var(--navy-dark);
  margin: 0 0 32px;
  position: relative;
  z-index: 3;
  /* Let headline extend ~50% into the image column */
  width: max-content;
  max-width: 150%;
  white-space: nowrap;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__subhead {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text);
  margin: 0 0 32px !important;
  max-width: 540px !important;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__subhead .rotator {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  color: var(--teal-light) !important;
  letter-spacing: -0.005em;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__subhead .rotator .r-item { font-weight: 500 !important; }

/* V3 H1 phrase cycle - subtle lime highlight one phrase at a time */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__headline .h1-phrase {
  display: inline-block;
  color: var(--navy-dark);
  transition: color 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(0);
  will-change: color, transform;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__headline .h1-phrase.is-lit {
  color: var(--teal-light);
  transform: translateY(-2px);
}

/* Hero V3 CTA buttons - primary (lime fill) + secondary (outline) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn {
  --btn-bg: var(--teal-light);
  --btn-fg: var(--navy-dark);
  --btn-bd: var(--teal-light);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  overflow: hidden;
  isolation: isolate;
  transition: color 450ms var(--hover-ease);
  cursor: pointer;
}
/* Sliding fill wipe */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--navy-dark);
  transform: translateX(-101%);
  transition: transform 550ms var(--hover-ease);
  z-index: -1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn:hover::before { transform: translateX(0); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn:hover {
  color: #fff;
  border-color: var(--navy-dark);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn__label { position: relative; z-index: 1; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn__arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  overflow: hidden;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn__arrow svg {
  width: 14px;
  height: 14px;
  transition: transform 450ms var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn:hover .hero-v3-btn__arrow svg {
  transform: translateX(22px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn__arrow::after {
  content: '→';
  position: absolute;
  font-size: 14px;
  font-weight: 600;
  transform: translateX(-22px);
  transition: transform 450ms var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn:hover .hero-v3-btn__arrow::after { transform: translateX(0); }

/* Secondary variant - no fill, wipes to black on hover */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--navy-dark);
  --btn-bd: rgba(15,15,15,0.25);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn--secondary::before { background: var(--navy-dark); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3-btn--secondary:hover {
  color: #fff;
  border-color: var(--navy-dark);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__image {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  overflow: hidden;
  min-height: 560px;
  z-index: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__image img, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__image video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(1.03);
}

/* Kill legacy grid/ticker/eyebrow/block/still styles that still target .hero-v3 */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__inner, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__grid, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__foot, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__eyebrow, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__ticker, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__serial, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__block, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__still, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l1, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l2, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__l3, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__word, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__actions, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__cta, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-services--v3, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-card--v3 { display: none !important; }

/* Reveal primitives */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3 .hero-v3__headline, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3 .hero-v3__subhead, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3 .hero-v3__ctas, :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3 .hero-v3__image {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__headline { opacity: 1; transform: translateY(0); transition-delay: 0.05s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__subhead { opacity: 1; transform: translateY(0); transition-delay: 0.25s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__ctas { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3.is-revealed .hero-v3__image { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }

@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__split {
    grid-template-columns: 1fr;
    padding: 48px 24px;
    min-height: auto;
    gap: 32px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__image { min-height: 320px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v3__ctas { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════
   PHASE A - Motion refinements (Lenis + glass nav + line draws + marquee polish)
   ═══════════════════════════════════════════════════════════ */

/* Step 1 - Lenis smooth scroll guards */
:where(.cfgi-redesign-chrome, .cfgi-homepage) html.lenis, :where(.cfgi-redesign-chrome, .cfgi-homepage) html.lenis body { height: auto; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .lenis.lenis-smooth { scroll-behavior: auto !important; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .lenis.lenis-stopped { overflow: hidden; }

/* Step 4 - Section accent line draws (left → right) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .line-draw {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .line-draw.is-visible { transform: scaleX(1); }

/* Step 6 - Nav glass enhancement (light chrome only - dark chrome handled separately)
   Note: backdrop-filter intentionally NOT transitioned - animating it forces
   per-frame re-rasterization of everything behind the nav. Snap-on/off only. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav {
  transition: background 0.4s var(--hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
              border-color 0.4s var(--hover-ease, cubic-bezier(0.22, 1, 0.36, 1)),
              box-shadow 0.4s var(--hover-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .nav.scrolled {
  background: rgba(250,250,248,0.85);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Figma diff fixes (2026-05)
   ═══════════════════════════════════════════════════════════════════════════ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eyebrow.on-light .eyebrow-line {
  background: #00B4FF !important;
}

/* Stats bar vertical divider on dark bg: should be light hairline, not dark */
body.hero-v2-active .stats-bar .stat {
  border-right-color: rgba(255,255,255,0.1) !important;
}
/* Recolor the desktop pseudo-element divider for the dark-bg variants. The
   `.stat::after` pseudo is the divider on desktop (replaced the old
   border-right that took 1px out of the content box and broke centering). */
body.hero-v2-active .stats-bar .stat::after,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar--dark .stat::after {
  background: rgba(255,255,255,0.10);
}


/* CTA V2 heading: Figma caps at 86px (not 128px). Tighten clamp ceiling. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .cta-v2__title {
  font-size: clamp(48px, 6vw, 86px);
}

/* Form inputs: override Hello Elementor parent reset.css defaults
 * (border #666 / radius 3px / padding .5rem 1rem / transition all .3s)
 * with redesign equivalents - hairline border, sharp corners, larger padding,
 * scoped transition. Scoped to .cfgi-redesign-chrome so on inner pages this
 * only applies inside the header/footer chrome wrappers, not to Elementor /
 * Gutenberg content. On the homepage, body has the class so the whole page
 * gets it. */
.cfgi-redesign-chrome input[type=date],
.cfgi-redesign-chrome input[type=email],
.cfgi-redesign-chrome input[type=number],
.cfgi-redesign-chrome input[type=password],
.cfgi-redesign-chrome input[type=search],
.cfgi-redesign-chrome input[type=tel],
.cfgi-redesign-chrome input[type=text],
.cfgi-redesign-chrome input[type=url],
.cfgi-redesign-chrome select,
.cfgi-redesign-chrome textarea {
  border: 1px solid #D0D0D0 !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  transition: border-color 0.3s !important;
}

/* Buttons separately: same sharp corners, but keep their own border/padding
 * so component-specific button styles (cta-v2__btn, hero-card--v2, etc.) don't
 * inherit input chrome. Scoped same as above so inner-page Elementor buttons
 * keep their default styling. */
.cfgi-redesign-chrome [type=button],
.cfgi-redesign-chrome [type=submit],
.cfgi-redesign-chrome button {
  border-radius: 0 !important;
}

/* Rotator inline-width cap.
 * The unified rotator JS (redesign.js: setup() -> measure()) sets
 * `rot.style.width = Math.ceil(maxW) + 'px'` to prevent layout shift between
 * phrases by locking to the widest item. On narrow viewports the longest
 * phrase exceeds the container, overflowing the hero/foot and stretching
 * everything (incl. CTA buttons) horizontally. Cap with !important so the
 * cascade beats the inline style. */
@media (max-width: 900px) {
  body .rotator[data-rotator] {
    max-width: 100% !important;
  }
}
@media (max-width: 600px) {
  body .rotator[data-rotator] {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Hero V2 headline mobile: reduce font + drop max-content so lines wrap freely. */
@media (max-width: 900px) {
  body .hero-v2__headline {
    line-height: 1.2 !important;
  }
  body .hero-v2__headline .l1,
  body .hero-v2__headline .l2,
  body .hero-v2__headline .l3 {
    font-size: clamp(32px, 7vw, 56px) !important;
    line-height: 1.2 !important;
    width: auto !important;
    max-width: 100% !important;
  }
}
@media (max-width: 600px) {
  body .hero-v2__headline {
    line-height: 1.2 !important;
  }
  body .hero-v2__headline .l1,
  body .hero-v2__headline .l2,
  body .hero-v2__headline .l3 {
    font-size: clamp(28px, 8vw, 44px) !important;
    line-height: 1.2 !important;
  }
}
.insights-subscribe__form--template .elementor-element.e-con,
.insights-subscribe__form--template .elementor-element.e-con-full {
  padding: 0;
  background: transparent;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
}
.insights-subscribe__form--template .elementor-widget-form .elementor-widget-container {
  padding: 0;
}
.insights-subscribe .elementor-widget-form .elementor-form-fields-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  align-items: stretch;
  width: 100%;
}
/* Elementor's form puts the input column in .elementor-col-70 and the submit
 * in .elementor-col-30 by default. Override the 70/30 split so input fills
 * the remaining row width and the button sits intrinsic-width on the right
 * (matching the standalone .insights-subscribe__input + __btn pill). */
.insights-subscribe .elementor-widget-form .elementor-field-group.elementor-col-70,
.insights-subscribe .elementor-widget-form .elementor-field-group.elementor-col-30,
.insights-subscribe .elementor-widget-form .elementor-field-group {
  flex: initial;
  max-width: none;
  padding: 0;
}
.insights-subscribe .elementor-widget-form .elementor-field-group.elementor-field-type-email,
.insights-subscribe .elementor-widget-form .elementor-field-group.elementor-field-type-text,
.insights-subscribe .elementor-widget-form .elementor-field-group.elementor-field-type-tel {
  flex: 1 1 auto;
}
.insights-subscribe .elementor-widget-form .elementor-field.elementor-field-textual,
.insights-subscribe .elementor-widget-form input.elementor-field {
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--navy);
  background: #fff;
  border: 1px solid #D0D0D0;
  border-right: 0;
  border-radius: 0;
  outline: none;
  box-shadow: none;
  transition: border-color var(--hover-duration, 0.3s) var(--hover-ease, cubic-bezier(0.22,1,0.36,1));
}
/* Elementor's form "Large" size: enforce a minimum height and use the secondary
 * text token for typed values (matches the redesign's typography hierarchy). */
.cfgi-redesign-chrome .elementor-field-textual.elementor-size-lg {
  min-height: 45px;
  color: var(--text-secondary) !important;
  width: 280px;
  max-height: 45px;
}
.cfgi-redesign-chrome .elementor-form .elementor-button.elementor-size-lg {
  min-height: 45px;
}
@media (max-width: 600px) {
  .cfgi-redesign-chrome .elementor-form .elementor-button.elementor-size-lg {
    margin-top: 15px;
  }
}
.insights-subscribe .elementor-widget-form .elementor-field.elementor-field-textual::placeholder {
  color: #AAA;
}
.insights-subscribe .elementor-widget-form .elementor-field.elementor-field-textual:focus {
  border-color: var(--navy);
}
.insights-subscribe .elementor-widget-form .elementor-button {
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--hover-duration, 0.3s) var(--hover-ease, cubic-bezier(0.22,1,0.36,1)),
              color var(--hover-duration, 0.3s) var(--hover-ease, cubic-bezier(0.22,1,0.36,1));
}
.insights-subscribe .elementor-widget-form .elementor-button:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #0A0A0A;
}
.insights-subscribe .elementor-widget-form .elementor-button-text {
  font-family: inherit;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: inherit;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .insights-subscribe .elementor-widget-form .elementor-form-fields-wrapper {
    flex-direction: column;
  }
  .insights-subscribe .elementor-widget-form .elementor-field.elementor-field-textual,
  .insights-subscribe .elementor-widget-form input.elementor-field {
    border-right: 1px solid #D0D0D0;
  }
  .insights-subscribe .elementor-widget-form .elementor-button {
    width: 100%;
    margin-top: -1px;
  }
}

/* Inner pages (any non-CFGI page) get a dark chrome treatment.
 * `.cfgi-homepage` is added to body only on pages with CFGI widgets, so
 * `body:not(.cfgi-homepage)` matches inner pages. The chrome wrapper still
 * exists on inner pages via header.php, but the body class doesn't get added.
 * Content sits naturally below the sticky nav (no negative margins on
 * non-homepage content), so this is purely a color/contrast change. */
body:not(.cfgi-homepage) .cfgi-redesign-chrome .announce-bar {
  background: #000;
  border-bottom-color: rgba(255,255,255,0.08);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .announce-bar__text,
body:not(.cfgi-homepage) .cfgi-redesign-chrome .announce-bar__accent {
  color: rgba(255,255,255,0.9);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .nav {
  background: #0A0A0A;
  border-bottom-color: rgba(255,255,255,0.08);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .nav.scrolled {
  box-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .logo {
  background-color: #fff;
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .nav-links a {
  color: rgba(255,255,255,0.9);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .nav-links a:hover {
  color: var(--teal-light);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .nav-divider {
  background: rgba(255,255,255,0.22);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .locale-current,
body:not(.cfgi-homepage) .cfgi-redesign-chrome .locale-current * {
  color: rgba(255,255,255,0.9);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .locale-current svg {
  stroke: rgba(255,255,255,0.9);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .nav-cta.btn-primary {
  border: 1px solid #fff;
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .nav-cta.btn-primary:hover {
  background: var(--teal-light);
  color: #0A0A0A;
  border-color: var(--teal-light);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .hamburger span {
  background: #fff;
}

/* Neutralize Hello Elementor parent reset.css button styling on .locale-current.
 * Force-strip the parent state colors so the redesign's transparent / icon-only
 * locale toggle survives every state. */
.cfgi-redesign-chrome .locale-current,
.cfgi-redesign-chrome .locale-current:hover,
.cfgi-redesign-chrome .locale-current:focus,
.cfgi-redesign-chrome .locale-current:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.cfgi-redesign-chrome .locale-current:hover,
.cfgi-redesign-chrome .nav-locale.is-open .locale-current {
  color: var(--teal) !important;
}

/* Same parent-reset cleanup for the hamburger <button>. */
.cfgi-redesign-chrome .hamburger,
.cfgi-redesign-chrome .hamburger:hover,
.cfgi-redesign-chrome .hamburger:focus,
.cfgi-redesign-chrome .hamburger:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: inherit !important;
}

/* Same cleanup for mega-menu trigger buttons and mobile accordion toggles. */
.cfgi-redesign-chrome .nav-mega-btn,
.cfgi-redesign-chrome .nav-mega-btn:hover,
.cfgi-redesign-chrome .nav-mega-btn:focus,
.cfgi-redesign-chrome .nav-mega-btn:active,
.cfgi-redesign-chrome .mobile-sub-toggle,
.cfgi-redesign-chrome .mobile-sub-toggle:hover,
.cfgi-redesign-chrome .mobile-sub-toggle:focus,
.cfgi-redesign-chrome .mobile-sub-toggle:active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Locale dropdown options are <a> in WP (so click navigates), not <button> like
 * the prototype. Browsers add link-default text-decoration + colors that drift
 * from the prototype's button styling - reset them. Also ensure the option
 * stays a flex row regardless of the user agent's anchor display defaults. */
.cfgi-redesign-chrome .locale-option,
.cfgi-redesign-chrome a.locale-option,
.cfgi-redesign-chrome a.locale-option:hover,
.cfgi-redesign-chrome a.locale-option:visited,
.cfgi-redesign-chrome a.locale-option:focus {
  text-decoration: none;
  color: var(--text-primary);
}
.cfgi-redesign-chrome a.locale-option {
  display: flex;
}
/* Inner pages have a dark nav, so the dropdown's light bg + dark option text
 * still applies (the dropdown itself overlays its own surface). Make sure the
 * inner-page nav-text overrides don't bleed into the open dropdown. */
body:not(.cfgi-homepage) .cfgi-redesign-chrome .locale-dropdown a.locale-option {
  color: var(--text-primary);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .locale-dropdown a.locale-option:hover {
  color: var(--navy);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .locale-dropdown .locale-option .locale-code {
  color: var(--text-caption);
}
body:not(.cfgi-homepage) .cfgi-redesign-chrome .locale-dropdown .locale-option.is-active .locale-code {
  color: var(--teal);
}

/* Homepage body bg: parent Hello Elementor reset.css sets body { background: #fff },
 * which shows through between sections and around .section padding. Figma uses
 * #FAFAF8 (the --bg-subtle token) site-wide for the "white" surfaces. Scope to
 * .cfgi-homepage so inner pages (Elementor / Gutenberg content) keep their
 * default white. */
body.cfgi-homepage {
  background: #FAFAF8;
}

/* Homepage mobile: drop the Hero V2 chrome-overlap so the sticky nav doesn't
 * intercept taps on hero content. The unconditional rule at ~line 3637 pulls
 * the hero up 104px behind the nav + announce-bar (intended for the desktop
 * transparent-video-behind-nav effect). On mobile the same overlap stacks the
 * sticky chrome (z-index 100-102) on top of the hero's interactive region,
 * blocking taps on the eyebrow / headline / lime block. Desktop > 900px is
 * untouched. */
@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2 {
    margin-top: 0 !important;
    padding-top: 32px !important;
  }
  /* The JS at redesign.js:140 still adds body.hero-dark-chrome on homepage
   * (it only bails when no .hero-v2 exists). Without the negative margin the
   * nav now sits on the #FAFAF8 page bg, not on dark video - so the
   * transparent gradient + white text rules look wrong. Revert to opaque
   * light chrome at this breakpoint. */
  body.hero-dark-chrome .nav {
    background: var(--bg-subtle) !important;
    box-shadow: none !important;
  }
  /* Announce bar stays solid black on mobile too (same as desktop now) -
   * only the nav reverts to opaque light at this breakpoint. */
  body.hero-dark-chrome .announce-bar {
    background: #000 !important;
  }
  body.hero-dark-chrome .announce-bar__text,
  body.hero-dark-chrome .announce-bar__accent {
    color: rgba(255,255,255,0.88) !important;
  }
  body.hero-dark-chrome .nav-links a,
  body.hero-dark-chrome .locale-current,
  body.hero-dark-chrome .locale-current * {
    color: var(--text-body) !important;
  }
  body.hero-dark-chrome .locale-current svg {
    stroke: var(--text-body) !important;
  }
  body.hero-dark-chrome .logo {
    background-color: var(--navy) !important;
  }
  body.hero-dark-chrome .nav-divider {
    background: var(--border-hairline) !important;
  }
  body.hero-dark-chrome .nav-cta.btn-primary {
    background: var(--navy) !important;
    color: #fff !important;
    border-color: var(--navy) !important;
  }
}

/* Pillar V2 hover state - rich content panel per Figma.
 * Default: image + headline + CTA visible (existing).
 * Hover: gradient deepens to a near-opaque dark panel; long description fades
 * in below the headline; corner label appears bottom-right with the
 * cyan/italic <em> highlight. Headline + CTA stay - they just shift slightly. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__hover-body {
  opacity: 0;
  transform: translateY(8px);
  max-height: 0;
  overflow: hidden;
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  transition:
    opacity 0.45s var(--ease-out-expo) 0.05s,
    transform 0.55s var(--ease-out-expo) 0.05s,
    max-height 0.55s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__hover-body p {
  margin: 0 0 14px;
  color: inherit;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__hover-body p:last-child {
  margin-bottom: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2:hover .pillar-v2__hover-body {
  opacity: 1;
  transform: translateY(0);
  max-height: 360px;
}
/* Headline shifts upward slightly on hover to make room for the body without
 * jumping vertically. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__headline {
  transition: transform 0.5s var(--ease-out-expo);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2:hover .pillar-v2__headline {
  transform: translateY(-4px);
}
/* Darken the gradient overlay further on hover so the description reads well. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2:hover::after {
  opacity: 0.96;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 60%, rgba(0,0,0,0.5) 100%);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2--ai:hover::after {
  background: linear-gradient(to bottom, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 60%, rgba(0,0,0,0.5) 100%);
}

/* Corner label at bottom-right - hidden by default, fades in on hover.
 * Georgia italic; the <em> portion gets a cyan block-highlight similar to
 * .pillar-v2__overhead-block, so it visually echoes the overhead branding. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__corner {
  position: absolute;
  right: 32px;
  bottom: 28px;
  z-index: 4;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.25;
  color: #fff;
  letter-spacing: -0.01em;
  text-align: right;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.45s var(--ease-out-expo) 0.1s,
              transform 0.55s var(--ease-out-expo) 0.1s;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2:hover .pillar-v2__corner {
  opacity: 1;
  transform: translateY(0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__corner em {
  display: inline;
  font-style: italic;
  color: #fff;
  background: #00B4FF;
  padding: 2px 8px;
  margin-right: 2px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__corner-text {
  display: inline-block;
}

/* Mobile: the corner label and body description both stay visible (no hover
 * on touch). Reduce paddings so they fit. */
@media (hover: none) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__hover-body {
    opacity: 1;
    transform: none;
    max-height: none;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__corner {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 600px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__corner {
    right: 20px;
    bottom: 20px;
    font-size: 16px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__hover-body {
    font-size: 14px;
  }
}

/* === WIDGET: cfgi_pc_lifecycle === */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-lifecycle--stepper {
  background: #0F0F0F;
  color: #fff;
  padding-top:    var(--cfgi-pad-top, 64px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 120px);
  padding-left:   var(--cfgi-pad-left, 0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-lifecycle--stepper .eyebrow { color: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-lifecycle--stepper .eyebrow::before { background: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-lifecycle--stepper .pc-lifecycle__title,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-lifecycle--stepper .section-title { color: #fff; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-lifecycle--stepper .pc-lifecycle__tagline { color: rgba(255,255,255,0.65); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-lifecycle__head { text-align: left; max-width: 760px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey .pc-lifecycle__head {
  width: 100%;
  max-width: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey .pc-lifecycle__title,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey .section-title {
  width: 100%;
  max-width: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey .pc-lifecycle__tagline,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey .section-tagline {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(17px, 1.35vw, 19px);
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,0.74);
  max-width: 640px;
  margin-top: 14px;
}

/* Stepper component */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper {
  position: relative;
  margin-top: 40px;
  --stepper-duration: 4800ms;
  --rail-fill-duration: var(--stepper-duration);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--stepper-n, 5), minmax(0, 1fr));
  gap: 0;
  position: relative;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__rail::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(50% / var(--stepper-n, 5));
  right: calc(50% / var(--stepper-n, 5));
  height: 1px;
  background: rgba(255,255,255,0.18);
  z-index: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__step {
  position: relative;
  display: flex;
  justify-content: center;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__node {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 220px;
  text-align: center;
  position: relative;
  z-index: 1;
  color: inherit;
  font-family: inherit;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__medallion {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #0F0F0F;
  border: 1.5px solid rgba(255,255,255,0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  transition: background 450ms cubic-bezier(0.22,1,0.36,1),
              border-color 450ms cubic-bezier(0.22,1,0.36,1),
              box-shadow 450ms cubic-bezier(0.22,1,0.36,1),
              transform 450ms cubic-bezier(0.22,1,0.36,1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__medallion i {
  font-size: 24px;
  color: rgba(255,255,255,0.55);
  transition: color 450ms cubic-bezier(0.22,1,0.36,1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__title {
  display: block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 0 8px;
  transition: color 350ms ease;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey .stepper__title {
  white-space: nowrap;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__desc {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  max-width: 200px;
  white-space: normal;
  overflow-wrap: break-word;
  transition: color 450ms cubic-bezier(0.22,1,0.36,1);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__node:hover {
  color: inherit;
  background: none;
  background-color: transparent;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__node:hover .stepper__medallion { border-color: rgba(255,255,255,0.55); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__node:hover .stepper__medallion i { color: rgba(255,255,255,0.9); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__step.is-active .stepper__medallion {
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 0 8px rgba(0,180,255,0.18);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__step.is-active .stepper__medallion i { color: #fff; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__step.is-active .stepper__desc { color: rgba(255,255,255,0.85); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__rail-fill {
  position: absolute;
  top: 28px;
  left: var(--rail-fill-left, 10%);
  width: var(--rail-fill-width, 20%);
  height: 1px;
  background: var(--teal);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
  z-index: 0;
  opacity: 1;
  transition: left 0s, opacity 200ms ease;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__rail-fill.is-hidden { opacity: 0; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper.is-running .stepper__rail-fill:not(.is-hidden) {
  animation: stepperRailDraw var(--rail-fill-duration, var(--stepper-duration)) linear forwards;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper.is-running.is-paused .stepper__rail-fill {
  animation-play-state: paused;
}
@keyframes stepperRailDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper.is-running .stepper__rail-fill:not(.is-hidden) {
    animation: none;
    transform: scaleX(1);
    opacity: 1;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__rail-fill { transition: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__medallion { transition: none; }
}
@media (max-width: 960px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-lifecycle--stepper {
    padding-top:    var(--cfgi-pad-top, 56px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 80px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
}
@media (max-width: 700px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__rail {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__rail::before {
    top: 28px;
    bottom: 28px;
    left: 28px;
    right: auto;
    width: 1px;
    height: auto;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__rail-fill { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__step { justify-content: flex-start; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__node {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    max-width: none;
    text-align: left;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__medallion {
    flex-shrink: 0;
    margin-bottom: 0;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__title { margin-top: 14px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__desc { max-width: none; }
}

/* === WIDGET: cfgi_pc_ecosystem === */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-audience--ecosystem {
  padding-top:    var(--cfgi-pad-top, 100px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 100px);
  padding-left:   var(--cfgi-pad-left, 0);
  background: var(--bg-primary);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(15,15,15,0.10);
  margin: 0 0 56px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tab {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 22px 0 24px;
  margin-right: 56px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  position: relative;
  transition: color var(--hover-duration-fast) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tab__count {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--text-caption);
  margin-left: 6px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tab__bar {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hover-duration) var(--ease-smooth);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tab:hover,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tab:focus,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tab:focus-visible,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tab:active {
  color: var(--text-primary);
  background: transparent;
  background-color: transparent;
  outline: none;
  box-shadow: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tab.is-active {
  color: var(--text-primary);
  background: transparent;
  background-color: transparent;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tab.is-active .eco-tab__bar { transform: scaleX(1); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tab__count {
  font-family: Menlo, "JetBrains Mono", monospace;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-hub {
  position: relative;
  isolation: isolate;
  overflow: visible;
  display: grid;
  grid-template-areas:
    "tl center tr"
    "bl center br";
  grid-template-columns: 1fr minmax(280px, 360px) 1fr;
  grid-template-rows: minmax(190px, auto) minmax(190px, auto);
  gap: 0px 40px;
  align-items: stretch;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-slot--tl { grid-area: tl; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-slot--tr { grid-area: tr; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-slot--bl { grid-area: bl; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-slot--br { grid-area: br; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-center {
  grid-area: center;
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 20;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-slot {
  position: relative;
  display: grid;
  align-items: center;
  z-index: 10;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card {
  position: relative;
  grid-area: 1 / 1;
  inset: auto;
  padding: 28px 28px 30px;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity var(--hover-duration-fast) var(--hover-ease),
    transform var(--hover-duration-fast) var(--hover-ease);
  will-change: opacity, transform;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: var(--eco-card-delay, 0ms);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card__icon {
  font-size: 26px;
  color: var(--teal);
  margin-bottom: 4px;
  display: inline-block;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.25;
  color: var(--text-primary);
  margin: 0 0 8px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card__list li {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text-body);
  padding-left: 16px;
  position: relative;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card__list li::before {
  content: "";
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0 0 6px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card__deliverable {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: #8a8a8a;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card__deliverable-label {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  line-height: 1.45;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-hub__lines {
  position: absolute;
  inset: 0;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-line-layer {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  overflow: visible;
  z-index: 5;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-line-segment {
  position: absolute;
  display: block;
  height: 1.5px;
  background: rgba(15, 15, 15, 0.16);
  border-radius: 999px;
  overflow: hidden;
  transform-origin: 0 50%;
  box-shadow: 0 0 0 1px rgba(0, 180, 255, 0.05);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-line-segment::after {
  content: "";
  position: absolute;
  inset: -5px 0;
  background:
    radial-gradient(circle at center, rgba(0, 180, 255, 0.85) 0%, rgba(0, 180, 255, 0.26) 34%, rgba(0, 180, 255, 0) 70%),
    linear-gradient(90deg, rgba(0, 180, 255, 0) 0%, rgba(0, 180, 255, 0.45) 18%, rgba(0, 180, 255, 1) 48%, rgba(148, 226, 255, 0.95) 58%, rgba(0, 180, 255, 0.45) 80%, rgba(0, 180, 255, 0) 100%);
  background-size: 300px 100%, 300px 100%;
  background-repeat: no-repeat;
  filter:
    drop-shadow(0 0 7px rgba(0, 180, 255, 0.80))
    drop-shadow(0 0 14px rgba(0, 180, 255, 0.36));
  opacity: 0;
  animation-duration: 8.5s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: var(--eco-flow-delay, 0s);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-line-segment--edge::after {
  animation-name: ecoLineSegmentFlowEdge;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-line-segment--diagonal::after {
  animation-name: ecoLineSegmentFlowDiagonal;
}
@keyframes ecoLineSegmentFlowEdge {
  0% {
    opacity: 1;
    background-position: -306px 0, -306px 0;
  }
  50% {
    opacity: 1;
    background-position: calc(100% + 306px) 0, calc(100% + 306px) 0;
  }
  51%, 100% {
    opacity: 0;
    background-position: calc(100% + 306px) 0, calc(100% + 306px) 0;
  }
}
@keyframes ecoLineSegmentFlowDiagonal {
  0%, 42% {
    opacity: 0;
    background-position: -306px 0, -306px 0;
  }
  43% {
    opacity: 1;
    background-position: -306px 0, -306px 0;
  }
  92% {
    opacity: 1;
    background-position: calc(100% + 306px) 0, calc(100% + 306px) 0;
  }
  93%, 100% {
    opacity: 0;
    background-position: calc(100% + 306px) 0, calc(100% + 306px) 0;
  }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-connector {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  fill: none !important;
  stroke: rgba(15, 15, 15, 0.18) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-connector-pulse {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  fill: none !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-dasharray: 300 9999;
  stroke-dashoffset: 300;
  filter: drop-shadow(0 0 6px rgba(0, 180, 255, 0.55));
  vector-effect: non-scaling-stroke;
}
@keyframes ecoConnectorFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -130; }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit {
  position: relative;
  width: 320px;
  height: 320px;
}
@keyframes ecoOrbitSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__ring--outer {
  position: absolute;
  inset: -60px;
  border: 1px dashed rgba(15,15,15,0.10);
  border-radius: 50%;
  pointer-events: none;
  animation: ecoOrbitSpin 90s linear infinite;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__ring--mid {
  position: absolute;
  inset: -16px;
  border: 1px dashed rgba(15,15,15,0.10);
  border-radius: 50%;
  pointer-events: none;
  animation: ecoOrbitSpin 75s linear infinite reverse;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__text-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 270px;
  height: 269px;
  margin: -134.5px 0 0 -135px;
  pointer-events: none;
  transform-origin: 50% 50%;
  animation: ecoOrbitSpin 60s linear infinite;
  z-index: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__inner-circle {
  fill: none;
  stroke: rgba(15,15,15,0.14);
  stroke-width: 1;
  stroke-dasharray: 4 6;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__text {
  font-family: Menlo, "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 3.5px;
  fill: var(--text-caption);
  text-transform: uppercase;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transform: translate(
    calc(var(--dot-r) * sin(var(--dot-angle))),
    calc(var(--dot-r) * -1 * cos(var(--dot-angle)))
  );
  transition:
    background var(--hover-duration) var(--hover-ease),
    border-color var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-eco-active="tab1"] .eco-orbit__dot {
  background: var(--teal);
  border: 2px solid var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-eco-active="tab2"] .eco-orbit__dot {
  background: transparent;
  border: 2px solid var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__dot--tl { --dot-r: 220px; --dot-angle: 315deg; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__dot--tr { --dot-r: 220px; --dot-angle: 45deg;  }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__dot--bl { --dot-r: 220px; --dot-angle: 225deg; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__dot--br { --dot-r: 220px; --dot-angle: 135deg; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-align: center;
  z-index: 3;
  transition:
    background var(--hover-duration) var(--hover-ease),
    border-color var(--hover-duration) var(--hover-ease),
    color var(--hover-duration) var(--hover-ease),
    box-shadow var(--hover-duration) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-eco-active="tab1"] .eco-orbit__core {
  background: var(--teal);
  border: 2px solid var(--teal);
  color: #fff;
  box-shadow: 0 0 0 8px rgba(0,180,255,0.10);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) [data-eco-active="tab2"] .eco-orbit__core {
  background: transparent;
  border: 2px solid var(--teal);
  color: var(--text-primary);
  box-shadow: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__core span { display: block; }

@media (max-width: 960px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-hub {
    grid-template-areas:
      "center center"
      "tl tr"
      "bl br";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 32px 24px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-center { margin-bottom: 32px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-slot { min-height: 180px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card { position: static; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card[data-eco-persona]:not(.is-active) { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-hub__lines,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-line-layer { display: none !important; }
}
@media (max-width: 960px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-audience--ecosystem {
    padding-top:    var(--cfgi-pad-top, 80px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 80px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
}
@media (max-width: 720px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-hub {
    grid-template-areas:
      "center"
      "tl"
      "tr"
      "bl"
      "br";
    grid-template-columns: 1fr;
    gap: 24px 0;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit { width: 240px; height: 240px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__core { width: 140px; height: 140px; margin: -70px 0 0 -70px; font-size: 20px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__ring--outer { inset: -28px; animation-duration: 70s; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__ring--mid   { inset: -8px;  animation-duration: 55s; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__inner       { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__text-svg    { width: 200px; height: 199px; margin: -99.5px 0 0 -100px; animation-duration: 45s; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__text { font-size: 7px; letter-spacing: 2px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__dot { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tab { margin-right: 28px; font-size: 15px; padding: 16px 0 18px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-tab__count { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-slot { min-height: auto; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card { padding: 22px 4px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__text-svg,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__ring--outer,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-orbit__ring--mid {
    animation: none !important;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-connector-pulse {
    animation: none !important;
    opacity: 0;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-line-segment::after {
    animation: none !important;
    opacity: 0;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .eco-card {
    transition: none !important;
  }
}

/* Shared page section tagline — match AIF Audience Tabs. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-lifecycle .section-tagline,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-audience .section-tagline,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .section-tagline,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-quote .section-tagline,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta .section-tagline,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .section-tagline {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 400;
  line-height: 1.55;
}
/* Center the tagline <p> box itself inside .section-head--center (parent's
   text-align centers the text, but .section-head p inherits max-width: 560px
   without auto margins, so the box stays left-pinned without these). */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip .section-head--center .section-tagline {
  margin-left: auto;
  margin-right: auto;
}

/* === WIDGET: cfgi_pc_services === */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services {
  background: #F0EFEC;
  padding-top:    var(--cfgi-pad-top, 100px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 100px);
  padding-left:   var(--cfgi-pad-left, 0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .section-head { margin-bottom: 56px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(15,15,15,0.06);
  border-left: 1px solid rgba(15,15,15,0.06);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .svc-grid > .svc-card {
  border-right: 1px solid rgba(15,15,15,0.06);
  border-bottom: 1px solid rgba(15,15,15,0.06);
  background: #FAFAF8;
  transition: background var(--hover-duration-fast) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .svc-grid > .svc-card:hover { background: #fff; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc { border: 0; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__summary {
  list-style: none;
  cursor: pointer;
  padding: 36px 28px;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  transition: padding var(--hover-duration-fast) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__summary::-webkit-details-marker { display: none; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__summary::marker { content: ""; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-card__num {
  font-family: Menlo, "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--text-caption);
  flex: 0 0 auto;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  flex: 1;
  margin: 0;
  transition: color var(--hover-duration-fast) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__summary:hover .acc__title { color: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__icon {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(15,15,15,0.10);
  border-radius: 50%;
  position: relative;
  flex: 0 0 36px;
  transition: background var(--hover-duration-fast) var(--hover-ease),
              border-color var(--hover-duration-fast) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__icon::before,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__icon::after {
  content: "";
  position: absolute;
  background: var(--text-primary);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: transform var(--hover-duration) var(--hover-ease),
              background var(--hover-duration-fast) var(--hover-ease);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__icon::before { width: 14px; height: 1.5px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__icon::after  { width: 1.5px; height: 14px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc[open] > .acc__summary .acc__icon {
  background: var(--text-primary);
  border-color: var(--text-primary);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc[open] > .acc__summary .acc__icon::before,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc[open] > .acc__summary .acc__icon::after {
  background: #fff;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc[open] > .acc__summary .acc__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__summary:hover .acc__icon { border-color: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__body {
  padding: 0 28px 32px;
  display: grid;
  gap: 20px;
  animation: pcAccFade var(--hover-duration) var(--ease-smooth);
}
@keyframes pcAccFade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__list li {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-body);
  padding-left: 18px;
  position: relative;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__list li::before {
  content: "";
  position: absolute;
  top: 0.65em;
  left: 0;
  width: 8px;
  height: 1px;
  background: var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-cta .cta-arrow {
  display: inline-block;
  transition: transform 0.3s var(--hover-ease, cubic-bezier(0.22, 1, 0.36, 1));
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-cta:hover .cta-arrow,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-cta:focus .cta-arrow {
  transform: translateX(4px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-card--featured .svc-cta {
  color: #fff;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-card--featured {
  background: var(--navy) !important;
  color: #fff;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-card--featured .acc__title { color: #fff; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-card--featured .acc__title:hover { color: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-card--featured .svc-card__num { color: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-card--featured .acc__icon { border-color: rgba(255,255,255,0.4); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-card--featured .acc__icon::before,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-card--featured .acc__icon::after { background: #fff; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-card--featured .acc__list li { color: rgba(255,255,255,0.82); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .svc-card--featured:hover { background: var(--navy-dark, #0F0F0F) !important; }
@media (max-width: 1100px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .svc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services {
    padding-top:    var(--cfgi-pad-top, 80px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 80px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
}
@media (max-width: 700px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .svc-grid { grid-template-columns: 1fr; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__summary { padding: 24px 20px; gap: 14px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-services .acc__body { padding: 0 20px 28px; }
}

/* === WIDGET: cfgi_pc_quote === */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-quote-section {
  background: var(--navy);
  color: #fff;
  position: relative;
  overflow: hidden;
  padding-top:    var(--cfgi-pad-top, 120px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 120px);
  padding-left:   var(--cfgi-pad-left, 0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-quote-section .container {
  position: relative;
  text-align: center;
  max-width: 1080px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-quote-section__mark {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 200px;
  line-height: 0.6;
  color: var(--teal);
  margin-bottom: 16px;
  user-select: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-quote-section__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 auto;
  max-width: 960px;
}
@media (max-width: 960px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-quote-section {
    padding-top:    var(--cfgi-pad-top, 80px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 80px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-quote-section__mark { font-size: 140px; }
}

/* === WIDGET: cfgi_pc_cta === */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta {
  background: var(--navy);
  color: #fff;
  padding-top:    var(--cfgi-pad-top, 100px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 100px);
  padding-left:   var(--cfgi-pad-left, 0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta .eyebrow { color: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta .eyebrow::before { background: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta__head { text-align: left; max-width: 760px; margin-bottom: 64px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta__head .section-title { color: #fff; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta__head .section-title em {
  color: var(--teal);
  font-style: italic;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta-card {
  display: flex;
  flex-direction: column;
  padding: 40px 32px;
  background: #1A1A1A;
  color: #fff;
  position: relative;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta-card__tag {
  font-family: Menlo, "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 24px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 1.9vw, 28px);
  line-height: 1.2;
  margin: 0 0 16px;
  color: #fff;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta-card__desc {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.65);
  margin: 0;
  flex: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta-card .btn-text.btn-arrow {
  margin-top: 24px;
  color: #fff;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta-card .btn-text.btn-arrow:hover {
  color: var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta__contact {
  margin-top: 64px;
  text-align: center /*left*/;
  max-width: 100%/*760px*/;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta__contact .section-tagline {
  margin: 0;
  color: rgba(255,255,255,0.7);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta__email {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta__email a {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 2px;
  align-self: flex-start;
  transition: color var(--hover-duration-fast) var(--hover-ease);
  margin: 0 auto;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta__email a:hover { color: var(--teal); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta__email-meta {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 1000px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-cta {
    padding-top:    var(--cfgi-pad-top, 80px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 80px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
}

/* === MODIFICATION: cfgi_logos_strip (text marquee + section head) === */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text {
  background: #fff;
  overflow: hidden;
  padding-top:    var(--cfgi-pad-top, 100px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 120px);
  padding-left:   var(--cfgi-pad-left, 0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .section-head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 880px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .section-head--center .eyebrow {
  justify-content: center;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .section-head--center { margin-bottom: 64px; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  margin-bottom: 8px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee__track {
  display: flex;
  gap: 0;
  width: max-content;
  animation: cfgiMarquee 60s linear infinite;
  will-change: transform;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee__track--reverse { animation-direction: reverse; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes cfgiMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee__item {
  flex: 0 0 auto;
  padding: 22px 56px;
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  opacity: 0.55;
  border-right: 1px solid rgba(15,15,15,0.06);
  transition: opacity var(--hover-duration-fast) var(--hover-ease),
              color var(--hover-duration-fast) var(--hover-ease);
  white-space: nowrap;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee__item:hover {
  opacity: 1;
  color: var(--teal);
}
@media (max-width: 960px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text {
    padding-top:    var(--cfgi-pad-top, 80px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 80px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
}
@media (max-width: 600px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee__item { padding: 18px 32px; font-size: 16px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee__track { animation-duration: 40s; }
}
@media (prefers-reduced-motion: reduce) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee__track { animation: none; transform: translateX(0); }
}

/* === MODIFICATION: cfgi_pillars_v2 (card eyebrow) === */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pillar-v2__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}

/* ═══ PC HERO ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0F0F0F;
  color: #fff;
  padding-top:    var(--cfgi-pad-top, 0);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 0);
  padding-left:   var(--cfgi-pad-left, 0);
}
body.hero-dark-chrome :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero {
  margin-top: calc(-1 * (var(--announce-h, 40px) + var(--nav-h, 64px)));
  --stats-h: 176px;
  height: calc(100vh - var(--stats-h));
  min-height: 600px;
}
body.hero-dark-chrome :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero .pc-hero__inner {
  padding-top: calc(48px + var(--announce-h, 40px) + var(--nav-h, 64px));
  padding-bottom: 48px;
}
@media (max-height: 680px), (max-width: 900px) {
  body.hero-dark-chrome :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero {
    height: auto;
    min-height: 0;
  }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 48px var(--gutter);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
/* Full-screen background — visual covers the entire hero, not just the right half */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__visual {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow: hidden;
  background: #0A0A0A;
  z-index: 1;
}
/* Left-to-right gradient keeps text readable against the full-bleed video */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.75) 0%, rgba(10,10,10,0.45) 55%, rgba(10,10,10,0.1) 100%),
    linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0) 40%, rgba(10,10,10,0.5) 100%);
  z-index: 1;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__visual img,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__visual video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.5) brightness(0.85) contrast(1.05);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: Menlo, 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__eyebrow-line {
  width: 32px;
  height: 1px;
  background: var(--teal);
  flex-shrink: 0;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 22px;
  position: relative;
  z-index: 2;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__headline em {
  font-style: italic;
  background: var(--teal);
  color: #0A0A0A;
  padding: 0.04em 0.18em 0.06em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__subhead {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.4vw, 20px);
  line-height: 1.55;
  color: rgba(255,255,255,0.92);
  margin: 0 0 14px;
  max-width: 640px;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__subhead em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--teal);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  margin: 0;
  max-width: 560px;
}
@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__inner { padding: 48px var(--gutter); }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__visual {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-bottom: 32px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__visual::after { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .pc-hero__headline { white-space: normal; }
}

/* Hero V2 + PC Hero eyebrow: monospace tag, teal, uppercase */

/* ── hero-v2 panel variant: 50vw video panel on the right, solid dark background left ── */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel {
  background: #0F0F0F;
  align-items: center;
}
/* Video confined to the right half instead of full-bleed */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video-wrap {
  left: auto;   /* cancel inset: 0 */
  right: 0;
  top: 0;
  bottom: 0;
  width: 50vw;
  max-width: 720px;
  min-width: 420px;
  background: #0A0A0A;
  filter: saturate(0.5) brightness(0.85) contrast(1.05);
}
/* Absolutely position the video (or image) so it fills the wrap regardless of layout mode */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Image variant inherits the same atmospheric desaturation as the video */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__image {
  filter: saturate(0.5) brightness(0.85) contrast(1.05);
}
/* Full-bleed image variant (when video_mode = 'full' and only image is set) */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2 .hero-v2__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Soft left-edge fade from the solid background into the video */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 30%;
  /*background: linear-gradient(to right, #0F0F0F 0%, rgba(15,15,15,0) 100%);*/
  z-index: 1;
  pointer-events: none;
}
/* Full-screen scrim and grain are not needed — the left background is solid dark */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__scrim,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__grain { display: none; }
/* Headline scaled down to fit the narrower left column */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l1,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l2,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l3 {
  font-size: clamp(40px, 5.2vw, 76px);
}
/* Subhead constrained to the left column width */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__subhead { max-width: 640px; }

/* ≤ 900px: panel drops out of absolute, becomes a normal-flow block above the copy */
@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2.hero-v2--panel {
    flex-direction: column;
    align-items: stretch;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 56px;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video-wrap {
    position: relative;
    top: auto; right: auto; bottom: auto; left: auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    aspect-ratio: 16 / 10;
    flex: 0 0 auto;
    order: -1;   /* video above text */
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video-wrap::after { display: none; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner { padding-top: 48px; }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l1,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l2,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l3 { font-size: clamp(36px, 8vw, 64px); }
}
/* Short landscape screens: release the vh height lock but keep the desktop panel layout */
@media (max-height: 680px) and (min-width: 901px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel {
    height: auto !important;
    min-height: 0 !important;
  }
}



/* ═══════════════════════════════════════════════════════════
   AI IN FINANCE PAGE — page CSS imported from
   .data/cfgi-dev-handoff/pages/ai-finance.html (inline <style>).
   Auto-scoped via _scope_aif_css.py.
   Source: this file is a faithful copy of the reference design,
   with each selector wrapped in :where(.cfgi-redesign-chrome, .cfgi-homepage).
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   AI IN FINANCE — page-specific styles
   All shared tokens, reveals, marquee, stepper come from cfgi-system.css.
   ═══════════════════════════════════════════════════════════════════════ */:where(.cfgi-redesign-chrome, .cfgi-homepage) main { display: block; }/* Section rhythm — three deliberate steps instead of a flat 120 everywhere.
   Tight (88) for tertiary strips, Default (120) for narrative sections,
   Generous (144) for statement moments. */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section {
  position: relative;
  padding: 120px 0;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--tight { padding: 96px 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--generous { padding: 144px 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--dark {
  background: var(--navy);
  color: var(--text-inverse);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--cream { background: var(--bg-muted); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--white { background: var(--bg-primary); }/* Eyebrow primitive lives in cfgi-system.css (.eyebrow). No page-local override. */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 20px;
  max-width: 22ch;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--dark .aif-heading { color: var(--text-inverse); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tagline,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey__tagline,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__tagline {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--text-body);
  max-width: 64ch;
  margin: 0 0 56px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--dark .aif-tagline,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--dark .aif-journey__tagline,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism .aif-prism__tagline { color: rgba(255, 255, 255, 0.78); }/* ─── 1. HERO + STATS ──────────────────────────────────────────────────
   Now using shared .pc-hero + .stats-bar from cfgi-system.css.
   No page-local hero/stat overrides — match Private Capital exactly.
   The "CFOs Investing in AI (up from 47%)" label is a hair longer than
   the 5-col cell width — keeping the parenthetical glued together lets
   the wrap fall before it cleanly instead of breaking "(up / from".
   ─────────────────────────────────────────────────────────────────────── */:where(.cfgi-redesign-chrome, .cfgi-homepage) .stat-label .nowrap { white-space: nowrap; }/* ─── 2. POV STRIP — reuses .solution-card from cfgi-system.css ─── */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-pov__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px; /* tight gap so teal border-tops read as one continuous line */
}/* Match card bg to section (white) — no cream offset */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-pov__grid .solution-card {
  background: var(--bg-primary);
  transition: none;
}/* Kill all hover effects */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-pov__grid .solution-card:hover {
  background: var(--bg-primary);
  border-top-color: var(--teal);
  box-shadow: none;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-pov__grid .solution-card:hover::before { width: 40px; }/* Remove default h3 bottom margin — divider sits on <p> instead */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-pov__grid .solution-card h3 {
  margin-bottom: 0;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-pov__grid .solution-card:hover h3 { color: var(--text-heading-alt); }/* Hairline divider between title and body */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-pov__grid .solution-card p {
  border-top: 1px solid var(--border-hairline);
  padding-top: 16px;
  margin-top: 16px;
  margin-bottom: 0;
  color: var(--text-caption);
  font-size: 15px;
  line-height: 1.65;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-pov__grid .solution-card:hover p {
  border-top-color: var(--border-hairline);
  color: var(--text-caption);
}/* ─── 3. AI ADOPTION JOURNEY ─────────────────────────────────────────
   Markup uses shared .stepper component from cfgi-system.css with 6 medallions
   (--stepper-n auto-set to 6 by initStepper). The deliverables panel below
   the rail is the only page-local addition. Centered hairline-framed block,
   one panel per stepper step. initStepper toggles .is-active on .stepper__panel
   children to match the active medallion.
   ─────────────────────────────────────────────────────────────────────── */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey {
  background: var(--navy);
  color: var(--text-inverse);
  padding: 120px 0;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey .eyebrow { color: var(--teal); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey .eyebrow::before { background: var(--teal); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey .section-title,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey .section-tagline { color: var(--text-inverse); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey .section-tagline { color: rgba(255, 255, 255, 0.74); margin-top: 14px; }/* ─── Stage panel ─────────────────────────────────────────────────────
   Two-column block: editorial image flush left, content stack right.
   Fades between stages via initStepper's .is-active toggle. */:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel {
  display: none;
  margin: 56px auto 0;
  max-width: 1040px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel.is-active {
  display: grid;
  grid-template-columns: 40% 1fr;
  animation: stepperPanelFade 0.5s var(--reveal-ease);
}@keyframes stepperPanelFade {from { opacity: 0; transform: translateY(8px); }to { opacity: 1; transform: translateY(0); }}:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel-image {
  position: relative;
  background: var(--navy-dark);
  overflow: hidden;
  /* Subtle navy gradient overlay keeps the photography from competing
     with the editorial copy on the right — keeps the panel feel cohesive
     across whichever stock image lands here. */
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,15,0.18) 0%, rgba(15,15,15,0.55) 100%);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.78) brightness(0.92);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel-body {
  padding: 36px 40px 32px;
  display: flex;
  flex-direction: column;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel-kicker {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--teal);
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(26px, 2.2vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 10px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel-desc {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  margin: 0 0 22px;
  max-width: 600px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__deliverables {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 28px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__deliverables li {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  padding-left: 22px;
  position: relative;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__deliverables li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 12px;
  height: 1px;
  background: var(--teal);
}@media (max-width: 900px) {/* Stack image on top, content below, on narrow viewports. */:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel.is-active { grid-template-columns: 1fr; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel-image { aspect-ratio: 16 / 9; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel-body { padding: 28px 26px 26px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__panel-title { font-size: 24px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .stepper__deliverables { grid-template-columns: 1fr; gap: 12px; padding-top: 16px; }}/* ─── 4. WHO WE SERVE — Tab groups ─────────────────────────────────── */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tabs__rail {
  display: flex;
  gap: 4px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--border-hairline);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tab {
  background: transparent;
  border: 0;
  padding: 18px 26px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
  cursor: pointer;
  position: relative;
  transition: color 0.25s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tab::after {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: -1px;
  height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-out-expo);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tab:hover { color: var(--text-primary); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tab.is-active { color: var(--text-primary); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tab.is-active::after { transform: scaleX(1); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tab:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tabpanel { display: none; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tabpanel.is-active { display: block; animation: aifPanelFade 0.5s var(--reveal-ease); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}/* Card primitive — same shape used for audience / accelerator / case cards.
   See cfgi-system.md "Card primitive" section. No ::before kicker. */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-audience-card {
  position: relative;
  padding: 32px 28px 30px;
  background: var(--bg-primary);
  border: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.4s var(--hover-ease),
              transform 0.4s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-audience-card:hover {
  border-color: rgba(15, 15, 15, 0.14);
  transform: translateY(-2px);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-audience-card__icon {
  font-size: 28px;
  color: var(--teal);
  line-height: 1;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-audience-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-audience-card__body {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-audience-card__applied {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-hairline);
  padding-top: 16px;
  margin-top: auto;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-audience-card__applied strong {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
}/* ─── 5. SOLUTIONS & CAPABILITIES — eco-hub variant ───────────────────
   Reuses the .eco-hub orbital pattern from Private Capital. No persona
   toggle (single set of 4 service pillars), no eco-card__list bullets
   (cards carry title + body + deliverable callout instead). The
   structural CSS below is copied from private-capital.html; the
   .eco-card--service rules at the bottom are the AI-Finance-specific
   content shape. *//* Hub grid */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-hub {
  position: relative;
  display: grid;
  grid-template-areas:
    "tl center tr"
    "bl center br";
  grid-template-columns: 1fr minmax(280px, 360px) 1fr;
  grid-template-rows: minmax(220px, auto) minmax(220px, auto);
  gap: 32px 56px;
  align-items: stretch;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--tl { grid-area: tl; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--tr { grid-area: tr; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--bl { grid-area: bl; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--br { grid-area: br; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-center {
  grid-area: center;
  align-self: center;
  justify-self: center;
  position: relative;
  z-index: 2;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--tl,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--tr,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--bl,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--br { min-height: 300px; }/* Card frame (single card per slot — no persona toggle on AI-Finance) */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-card {
  position: absolute;
  inset: 28px 0;
  padding: 36px 36px 40px;
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition:
    opacity var(--hover-duration-fast) var(--hover-ease),
    transform var(--hover-duration-fast) var(--hover-ease);
  will-change: opacity, transform;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-card.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: var(--eco-card-delay, 0ms);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-card__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.55vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 14px;
}/* AI-Finance card content — body + signature deliverable callout
   (replaces PC's .eco-card__list bullet style). */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-card__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-body);
  margin: 0 0 18px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-card__deliverable {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Value text inherits these (text nodes can't be targeted by child selectors) */
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.55;
  color: #8a8a8a;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-card__deliverable-label {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  line-height: 1.45;
}/* Orbit diagram (PRISM Platform) — 3 rotating rings, curved orbital
   text, 4 static quadrant dots, central core. */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit {
  position: relative;
  width: 320px;
  height: 320px;
}@keyframes ecoOrbitSpin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__ring--outer {
  position: absolute;
  inset: -60px;
  border: 1px dashed rgba(15,15,15,0.28);
  border-radius: 50%;
  pointer-events: none;
  animation: ecoOrbitSpin 90s linear infinite;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__ring--mid {
  position: absolute;
  inset: -16px;
  border: 1px dashed rgba(15,15,15,0.28);
  border-radius: 50%;
  pointer-events: none;
  animation: ecoOrbitSpin 75s linear infinite reverse;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: ecoOrbitSpin 60s linear infinite;
  overflow: visible;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__inner-circle { fill: none; stroke: none; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__text {
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: 1.1px;
  font-weight: 500;
  fill: rgba(15, 15, 15, 0.62);
  text-transform: uppercase;
}/* Quadrant dots — static, anchored to outer ring at 45° offsets */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  background: var(--teal);
  border: 2px solid var(--teal);
  transform: translate(
    calc(var(--dot-r) * sin(var(--dot-angle))),
    calc(var(--dot-r) * -1 * cos(var(--dot-angle)))
  );
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__dot--tl { --dot-r: 220px; --dot-angle: 315deg; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__dot--tr { --dot-r: 220px; --dot-angle: 45deg;  }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__dot--bl { --dot-r: 220px; --dot-angle: 225deg; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__dot--br { --dot-r: 220px; --dot-angle: 135deg; }/* Center "PRISM Platform" core — always teal-filled (no toggle here) */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-align: center;
  z-index: 3;
  background: var(--teal);
  border: 2px solid var(--teal);
  color: #fff;
  box-shadow: 0 0 0 8px rgba(0,180,255,0.10);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__core span { display: block; }/* SVG connectors — L-shape from card slot to orbit dot, with animated
   teal pulse. Positioned by initEcoConnectors() in cfgi-motion.js. */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot__connector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 0;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot__connector-base {
  fill: none;
  stroke: rgba(15, 15, 15, 0.12);
  stroke-width: 1;
  stroke-linecap: round;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot__connector-pulse {
  fill: none;
  stroke: var(--teal);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 300 9999;
  stroke-dashoffset: 300;
  filter: drop-shadow(0 0 5px rgba(0, 180, 255, 0.45));
}/* Per-slot gradient strokes: base line fades toward the card end */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--tl .eco-slot__connector-base { stroke: url(#conn-base-tl) rgba(15,15,15,0.10); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--tr .eco-slot__connector-base { stroke: url(#conn-base-tr) rgba(15,15,15,0.10); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--bl .eco-slot__connector-base { stroke: url(#conn-base-bl) rgba(15,15,15,0.10); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--br .eco-slot__connector-base { stroke: url(#conn-base-br) rgba(15,15,15,0.10); }/* Top slots: extra top padding so text clears the connector's horizontal run */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--tl .eco-card,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot--tr .eco-card { padding-top: 52px; }/* Responsive — drop cards into a 2×2 below the orbit on tablet, single
   stack on mobile. Connectors + dots hide when the spatial relationship
   breaks. */@media (max-width: 1099px) {:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-hub {
    grid-template-areas:
      "center center"
      "tl tr"
      "bl br";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 32px 24px;
  }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-center { margin-bottom: 32px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot { min-height: 180px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-card { position: static; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__dot,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot__connector { display: none; }}@media (max-width: 720px) {:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-hub {
    grid-template-areas:
      "center"
      "tl"
      "tr"
      "bl"
      "br";
    grid-template-columns: 1fr;
    gap: 24px 0;
  }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit { width: 240px; height: 240px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__core { width: 140px; height: 140px; margin: -70px 0 0 -70px; font-size: 20px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__ring--outer { inset: -28px; animation-duration: 70s; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__ring--mid { inset: -8px;  animation-duration: 55s; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__inner { inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); animation-duration: 45s; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__text { font-size: 8px; letter-spacing: 1.4px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-slot { min-height: auto; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-card { padding: 22px 4px 26px; }}@media (prefers-reduced-motion: reduce) {:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__inner,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__ring--outer,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-services-hub .eco-orbit__ring--mid {
    animation: none !important;
  }}/* ── Industries section (mirrored from homepage) ── */:where(.cfgi-redesign-chrome, .cfgi-homepage) .industries-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 56px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .industries-head .section-head { margin-bottom: 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-arrow {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--hover-duration-fast) var(--hover-ease),
              transform var(--hover-duration-fast) var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-arrow svg { stroke: var(--teal); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding-bottom: 40px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:nth-child(2n) { top: 40px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.35) contrast(1.08) brightness(0.55);
  transition: filter var(--hover-duration) var(--hover-ease), transform var(--reveal-duration) var(--reveal-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:hover img {
  filter: saturate(0.5) contrast(1.08) brightness(0.45);
  transform: scale(1.05);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,15,15,0.8) 0%, rgba(15,15,15,0.1) 55%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  transition: background var(--hover-duration-fast) var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:hover .ind-photo-overlay {
  background: linear-gradient(to top, rgba(15,15,15,0.9) 0%, rgba(15,15,15,0.2) 50%);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-photo-icon {
  font-size: 20px;
  color: var(--teal);
  margin-bottom: 6px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-photo-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:hover .ind-arrow { opacity: 1; transform: translateX(0); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-cta-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,15,15,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hover-duration-fast) var(--hover-ease);
  z-index: 2;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:hover .ind-cta-overlay { opacity: 1; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo .ind-cta-overlay .ind-cta {
  color: var(--teal);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(6px);
  transition: transform var(--hover-duration-fast) var(--hover-ease) 0.05s;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:hover .ind-cta-overlay .ind-cta { transform: translateY(0); }/* PRISM Spotlight — dark band, sits flush with Solutions (no gap) */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism {
  background: var(--navy);
  color: var(--text-inverse);
  padding: 128px 0;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism::before {
  /* faint atmospheric accent diagonal — earns its keep on a dark statement band */
  content: '';
  position: absolute;
  inset: -10% auto auto -10%;
  width: 50%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,180,255,0.08) 0%, transparent 62%);
  pointer-events: none;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism > .container { position: relative; z-index: 1; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__head {
  max-width: 740px;
  margin-bottom: 72px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--text-inverse);
  margin: 0 0 22px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}/* ─── PRISM accordion — 5 horizontal columns, click to expand ────── */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__accordion {
  display: flex;
  min-height: 641px;
  overflow: hidden;
  margin-top: 72px;
  border: 1px solid rgba(255,255,255,0.10);
  /* Force a GPU compositing layer — flex-basis reflows stay isolated */
  transform: translateZ(0);
  contain: layout style;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col {
  position: relative;
  flex: 0 0 120px;
  border-right: 1px solid rgba(255,255,255,0.08);
  cursor: pointer;
  transition: flex 0.82s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  min-width: 0;
  will-change: flex-basis;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col:last-child { border-right: none; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col.is-active {
  flex: 1 1 auto;
  cursor: default;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col:not(.is-active):hover {
  flex: 0 0 140px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__letter {
  position: absolute;
  top: 28px;
  left: 28px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(52px, 5.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--teal);
  z-index: 3;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  transition: color 0.3s;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col.is-active .aif-prism__col__letter {
  color: var(--teal);
  text-shadow: 0 0 40px rgba(0,180,255,0.45);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0.55) saturate(0.75);
  transition: opacity 0.18s ease;
  will-change: opacity;
}/* Enter: image appears once panel has some room (~320ms in) */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col.is-active .aif-prism__col__visual img {
  opacity: 1;
  transition: opacity 0.55s 0.32s ease;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, transparent 25%, rgba(8,8,8,0.78) 68%, rgba(8,8,8,0.94) 100%);
  opacity: 0;
  transition: opacity 0.18s ease;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col.is-active .aif-prism__col__scrim {
  opacity: 1;
  transition: opacity 0.55s 0.32s ease;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 40px 44px;
  z-index: 2;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.14s ease, transform 0.14s ease;
  pointer-events: none;
  will-change: opacity, transform;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col.is-active .aif-prism__col__content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  /* Enter: slides up shortly after image starts appearing */
  transition: opacity 0.38s 0.42s var(--ease-out-expo),
              transform 0.38s 0.42s var(--ease-out-expo);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__title {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__desc {
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.74);
  margin: 0 0 14px;
  max-width: 44ch;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__outcome {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--teal);
  margin: 0;
}/* Outcomes strip — unchanged */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__outcomes {
  margin-top: 48px;
  padding: 0;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__outcomes span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 22px 24px;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.005em;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__outcomes span:last-child { border-right: 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__outcomes span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px rgba(0, 180, 255, 0.5);
}/* Accelerators — split-panel (left content, right photo) */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-accelerators {
  padding-top: 112px;
  padding-bottom: 112px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-head {
  margin-bottom: 48px;
}/* Teal highlight on heading second line */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-heading mark {
  background: var(--teal);
  color: #fff;
  padding: 0 6px 3px;
  font-style: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}/* Split layout: card panel offset-down on left, photo flush from top on right */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split {
  display: flex;
  align-items: flex-start;
  overflow: visible;
  padding-left: max(var(--gutter), calc((100% - var(--max-width)) / 2 + var(--gutter)));
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__panel {
  width: 600px;
  flex-shrink: 0;
  height: 400px;
  background: var(--bg-subtle);
  padding: 60px;
  margin-top: 64px;
  margin-right: -64px;
  z-index: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__slides {
  flex: 1;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__slide {
  display: none;
  flex-direction: column;
  gap: 20px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__slide.is-active {
  display: flex;
  animation: accSlideFade 0.4s var(--ease-out-expo);
}@keyframes accSlideFade {from { opacity: 0; transform: translateY(10px); }to { opacity: 1; transform: translateY(0); }}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
  max-width: 46ch;
}/* Buttons live inside the card panel */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
}/* Dots live below the split, outside the card — own row */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-dots-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 20px 0 0;
  padding-left: max(var(--gutter), calc((100% - var(--max-width)) / 2 + var(--gutter)));
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(15,15,15,0.22);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, transform 0.3s;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__dot.is-active {
  background: var(--teal);
  transform: scale(1.4);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__btns {
  display: flex;
  gap: 8px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__btn {
  width: 44px;
  height: 44px;
  background: var(--text-primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--hover-ease);
  flex-shrink: 0;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__btn:hover:not(:disabled) { background: var(--teal); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__btn:disabled { opacity: 0.28; cursor: default; pointer-events: none; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__visual {
  flex: 0 0 600px;
  height: 400px; /* same height as the card panel */
  z-index: 1;
  position: relative;
  overflow: hidden;
  background: var(--navy);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.45s var(--ease-out-expo);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-partners {
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--border-hairline);
  text-align: center;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-partners__label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-partners__label::before,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-partners__label::after {
  content: '';
  width: 20px;
  height: 1px;
  background: var(--teal);
}/* Partners marquee — Georgia italic strip, same pattern as Trusted By */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-partners .marquee__item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  padding: 14px 36px;
  border-right: 1px solid var(--border-hairline);
  transition: color 0.3s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-partners .marquee__item:hover { color: var(--text-primary); }/* ─── 6. TRUSTED BY — marquee strip (mirrors PC .pc-sponsors pattern) ── */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted {
  padding: 96px 0 88px;
  background: var(--bg-primary);
  text-align: center;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted .section-head { margin-bottom: 56px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted .marquee + .marquee { margin-top: 6px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted .marquee__item {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--text-secondary);
  padding: 14px 36px;
  border-right: 1px solid var(--border-hairline);
  transition: color 0.3s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted .marquee__item:hover { color: var(--text-primary); }@media (max-width: 700px) {:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted { padding: 72px 0 64px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted .marquee__item { font-size: 17px; padding: 12px 24px; }}/* ─── 7. PULL QUOTE + CASE STUDIES ─────────────────────────────────── */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-quote {
  background: var(--navy);
  color: var(--text-inverse);
  padding: 128px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-quote__mark {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(80px, 9vw, 128px);
  line-height: 0.7;
  color: rgba(0, 180, 255, 0.85);
  margin-bottom: 8px;
  height: 0.5em;
  overflow: visible;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--text-inverse);
  margin: 0 auto 32px;
  max-width: 900px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-quote__attr {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-quote__attr::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--teal);
}/* Case studies heading: left-aligned, mark uses dark text on teal */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__head {
  margin-bottom: -48px; /* pull grid up so tallest column rises into heading */
  position: relative;
  z-index: 1;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__head .aif-heading mark {
  color: var(--text-primary); /* dark text on teal block — Figma spec */
}/* Staircase grid: columns bottom-aligned, images get progressively taller left→right */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  align-items: end;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__grid[data-reveal-stagger] > [data-reveal]:nth-child(1) { --reveal-delay: 0ms; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__grid[data-reveal-stagger] > [data-reveal]:nth-child(2) { --reveal-delay: 100ms; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__grid[data-reveal-stagger] > [data-reveal]:nth-child(3) { --reveal-delay: 200ms; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15,15,15,0.06);
  cursor: default;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) a.aif-case {
  cursor: pointer;
}/* Image wrapper — holds the overlay pseudo + scale on hover */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case__img-wrap {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case__img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.20);
  pointer-events: none;
  transition: background 0.4s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case:hover .aif-case__img-wrap::after {
  background: rgba(0,0,0,0.35);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case__img {
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.55s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case:hover .aif-case__img {
  transform: scale(1.04);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__grid .aif-case:nth-child(1) .aif-case__img { height: 200px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__grid .aif-case:nth-child(2) .aif-case__img { height: 280px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__grid .aif-case:nth-child(3) .aif-case__img { height: 360px; }/* Card body — flips to dark on hover */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px;
  min-height: 308px;
  background: #fff;
  transition: background 0.4s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case:hover .aif-case__body {
  background: var(--navy);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case__client {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px;
  display: block;
  flex-shrink: 0;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case__engagement {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0 0 10px;
  flex: 1;
  transition: color 0.4s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case:hover .aif-case__engagement {
  color: #fff;
}/* Outcome pinned to bottom with hairline rule */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case__outcome {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-body);
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(15,15,15,0.06);
  flex-shrink: 0;
  transition: color 0.4s var(--hover-ease),
              border-color 0.4s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case:hover .aif-case__outcome {
  color: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.1);
}/* "Read more" CTA — slides up on hover, consistent with ind-photo pattern */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  text-decoration: none;
  margin-top: 16px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--hover-ease),
              transform 0.3s var(--hover-ease);
  pointer-events: none;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-case:hover .aif-case__cta {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}/* ─── 8. WHY CFGI — Higherlife-inspired 3-col tab layout ─────────── */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why {
  display: grid;
  grid-template-columns: 140px 1fr 1fr;
  column-gap: 56px;
  align-items: start;
}/* Sidebar */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__sidebar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 2px;
}/* marker + label replaced by eyebrow — rules kept empty for legacy safety */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__marker { display: none; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__label { display: none; }/* Center: active pane + tab list */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__center {
  display: flex;
  flex-direction: column;
  gap: 52px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__pane {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 140px;
  transition: opacity 0.28s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__pane.is-fading { opacity: 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__pane-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__pane-body {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
  max-width: 52ch;
}/* Tab list */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__tabs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-hairline);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__tab {
  display: block;
  text-align: left;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-hairline);
  padding: 17px 0;
  cursor: pointer;
  transition: color 0.3s var(--hover-ease);
  position: relative;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__tab::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--teal);
  transition: width 0.45s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__tab.is-active {
  color: var(--text-primary);
  font-weight: 600;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__tab.is-active::after { width: 100%; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__tab:hover { color: var(--text-primary); }/* Right visual panel — height matches .aif-why__center via grid row stretch.
   `align-self: stretch` overrides the parent's `align-items: start` for
   this cell only (sidebar stays top-aligned). The aspect-ratio + max-height
   that previously locked the visual to a 4:5 / 500px box are removed so
   the cell fills the row instead. The inner image keeps proportions via
   object-fit: cover on .aif-why__visual-bg img. */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__visual {
  position: sticky;
  top: 120px;
  background: var(--bg-navy);
  border-radius: 3px;
  overflow: hidden;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__visual-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__visual-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Match the JS setTimeout (280ms) and the pane's opacity transition so
     the image fade-out completes before the new src is swapped, and the
     fade-in starts only after the new image has fully decoded. */
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__visual-bg img.is-fading { opacity: 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__visual-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.20);
  pointer-events: none;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__visual-icon { display: none; }/* ─── 9. CTA ───────────────────────────────────────────────────────── */:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta {
  background: var(--navy);
  color: var(--text-inverse);
  padding: 120px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta::before {
  content: '';
  position: absolute;
  inset: -20% -20% auto auto;
  width: 56%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(0,180,255,0.10) 0%, transparent 60%);
  pointer-events: none;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta > .container { position: relative; z-index: 1; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__heading {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.024em;
  color: var(--text-inverse);
  margin: 0 auto 28px;
  max-width: 16ch;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 auto 56px;
  max-width: 640px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__contacts {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  align-items: center;
  transition: transform 0.4s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__contact:hover { transform: translateY(-2px); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__contact-name {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__contact-email {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 500;
  color: var(--text-inverse);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 3px;
  letter-spacing: -0.005em;
  transition: color 0.3s var(--hover-ease), border-color 0.3s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__contact-email:hover {
  color: var(--teal);
  border-color: var(--teal);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 36px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-inverse);
  text-decoration: none;
  transition: background 0.4s var(--hover-ease),
              border-color 0.4s var(--hover-ease),
              color 0.4s var(--hover-ease),
              gap 0.35s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__secondary svg {
  transition: transform 0.35s var(--hover-ease);
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__secondary:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--navy);
  gap: 16px;
}:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__secondary:hover svg { transform: translateX(2px); }/* ─── Footer reuses existing pattern, but on dark page-end we want
       seamless dark continuity. ────────────────────────────────────── *//* ─── Responsive ───────────────────────────────────────────────────── */@media (max-width: 1024px) {:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section { padding: 96px 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--tight { padding: 80px 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--generous { padding: 112px 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-pov__grid { grid-template-columns: 1fr; gap: 20px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-audience-grid { grid-template-columns: repeat(2, 1fr); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__accordion { height: 420px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col { flex: 0 0 72px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__content { padding: 0 28px 36px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__title { font-size: 16px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__desc { font-size: 13.5px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__outcomes { grid-template-columns: repeat(2, 1fr); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__outcomes span:nth-child(2) { border-right: 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__outcomes span:nth-child(1),
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__outcomes span:nth-child(2) { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split { flex-direction: column; padding-left: 0; overflow: hidden; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__panel { width: 100%; height: auto; margin-top: 0; margin-right: 0; padding: 40px 36px 36px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__visual { flex: 0 0 auto; width: 100%; height: 300px; order: -1; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-dots-row { padding-left: var(--gutter); }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-accelerators { padding-top: 88px; padding-bottom: 88px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism { padding: 96px 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-quote { padding: 112px 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta { padding: 112px 0 96px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey { padding: 96px 0; }}@media (max-width: 720px) {:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section { padding: 80px 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--tight { padding: 64px 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--generous { padding: 96px 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why { grid-template-columns: 1fr; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__visual { display: none; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-audience-grid { grid-template-columns: 1fr; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tabs__rail { overflow-x: auto; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tab { padding: 16px 20px 14px; flex-shrink: 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism { padding: 80px 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__accordion { height: auto; flex-direction: column; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col { flex: 0 0 auto; height: 64px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col.is-active { height: 360px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__letter { top: 14px; left: 20px; font-size: 36px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__content { padding: 0 24px 28px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__outcomes { grid-template-columns: 1fr; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__outcomes span { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 18px 20px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__outcomes span:last-child { border-bottom: 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__grid { grid-template-columns: 1fr; gap: 32px; align-items: start; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__head { margin-bottom: 48px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__grid .aif-case:nth-child(1) .aif-case__img,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__grid .aif-case:nth-child(2) .aif-case__img,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cases__grid .aif-case:nth-child(3) .aif-case__img { height: 220px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why { grid-template-columns: 1fr 1fr; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__sidebar { display: none; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__center { grid-column: 1; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__visual { grid-column: 2; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-quote { padding: 96px 0; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta { padding: 96px 0 88px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta__contacts { gap: 32px; }:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey { padding: 80px 0; }}

/* ═══ Stats-bar dark variant + stats-grid--five (from cfgi-system.css) ═══ */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-grid--five {
  grid-template-columns: repeat(5, 1fr);
  gap: 32px;
}
@media (max-width: 1100px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-grid--five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-grid--five { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar--dark {
  background: #0F0F0F;
  border-top-color: rgba(255,255,255,0.10);
  border-bottom-color: rgba(255,255,255,0.10);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar--dark .stat { border-right-color: rgba(255,255,255,0.10); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar--dark .stat-number { color: #fff; }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar--dark .stat-label { color: rgba(255,255,255,0.6); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar--dark .stats-bar__caption,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar--dark .stats-bar__tagline { color: rgba(255,255,255,0.7); }
:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar--dark .stats-bar__caption em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--teal);
  margin-right: 4px;
}

/* AIF production corrections: keep widget spacing overridable and strip parent button reset colors. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section {
  padding-top:    var(--cfgi-pad-top, 120px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 120px);
  padding-left:   var(--cfgi-pad-left, 0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--tight {
  padding-top:    var(--cfgi-pad-top, 96px);
  padding-bottom: var(--cfgi-pad-bottom, 96px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--generous {
  padding-top:    var(--cfgi-pad-top, 144px);
  padding-bottom: var(--cfgi-pad-bottom, 144px);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-quote,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta {
  padding-top:    var(--cfgi-pad-top, 120px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 120px);
  padding-left:   var(--cfgi-pad-left, 0);
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tab:hover,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tab:focus,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tab:active,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__tab:hover,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__tab:focus,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__tab:active,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__dot:hover,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__dot:focus,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__dot:active {
  background-color: transparent;
  box-shadow: none;
}
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-tab:focus-visible,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__tab:focus-visible,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col:focus-visible,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__btn:focus-visible,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-acc-split__dot:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section {
    padding-top:    var(--cfgi-pad-top, 96px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 96px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--tight {
    padding-top:    var(--cfgi-pad-top, 80px);
    padding-bottom: var(--cfgi-pad-bottom, 80px);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--generous {
    padding-top:    var(--cfgi-pad-top, 112px);
    padding-bottom: var(--cfgi-pad-bottom, 112px);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism {
    padding-top:    var(--cfgi-pad-top, 96px);
    padding-bottom: var(--cfgi-pad-bottom, 96px);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-quote,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta {
    padding-top:    var(--cfgi-pad-top, 112px);
    padding-bottom: var(--cfgi-pad-bottom, 96px);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-accelerators {
    padding-top:    var(--cfgi-pad-top, 88px);
    padding-bottom: var(--cfgi-pad-bottom, 88px);
  }
}

@media (max-width: 720px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section {
    padding-top:    var(--cfgi-pad-top, 80px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 80px);
    padding-left:   var(--cfgi-pad-left, 0);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--tight {
    padding-top:    var(--cfgi-pad-top, 64px);
    padding-bottom: var(--cfgi-pad-bottom, 64px);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-section--generous {
    padding-top:    var(--cfgi-pad-top, 96px);
    padding-bottom: var(--cfgi-pad-bottom, 96px);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-journey,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism {
    padding-top:    var(--cfgi-pad-top, 80px);
    padding-bottom: var(--cfgi-pad-bottom, 80px);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-quote,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-cta {
    padding-top:    var(--cfgi-pad-top, 96px);
    padding-bottom: var(--cfgi-pad-bottom, 88px);
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why {
    grid-template-columns: 1fr;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__center {
    grid-column: auto;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-why__visual {
    display: none;
  }
}

/* AIF live-widget parity adapters.
   The static handoff uses pc-hero/aif-trusted classes in a few places, while
   Elementor renders shared widgets. These adapters keep the live markup aligned
   with the reference without changing other redesign pages. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel {
  height: calc(100svh - var(--announce-height) - var(--nav-height)) !important;
  min-height: 640px !important;
  padding: 0 !important;
  overflow: hidden;
  background: #0f0f0f;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner {
  width: 100%;
  max-width: var(--max-width);
  min-height: 100%;
  display: flex;
  align-items: center;
  margin: 0 auto;
  padding: 52px var(--gutter) 52px !important;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner > div {
  width: min(620px, calc(50vw - var(--gutter) - 20px));
  max-width: 100%;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video-wrap {
  width: 50vw;
  max-width: none;
  min-width: 460px;
  filter: saturate(0.48) brightness(0.88) contrast(1.05);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video-wrap::after {
  display: none;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  font-family: "SF Mono", "IBM Plex Mono", "Roboto Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--teal);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__eyebrow::before {
  width: 31px;
  height: 1px;
  background: currentColor;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline {
  max-width: none;
  margin: 0 0 24px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: 0;
  color: #fff;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .hero-v2__headline-line {
  position: relative;
  display: block;
  width: auto;
  max-width: 100%;
  overflow: visible;
  color: inherit;
  opacity: 1;
  transform: none;
  transition: none;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .hero-v2__headline-line::before {
  display: none !important;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l1,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l2,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l3 {
  font-size: clamp(44px, 5.15vw, 72px) !important;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l2 {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  margin-top: 0.05em;
  padding: 0 0.18em 0.06em;
  background: var(--teal);
  color: #050505;
  line-height: 1;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .word {
  display: inline;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__foot {
  display: block;
  max-width: 590px;
  margin: 0;
  padding: 0;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__subhead {
  max-width: 570px !important;
  margin: 0 0 22px;
  font-size: clamp(18px, 1.35vw, 22px) !important;
  font-weight: 600;
  line-height: 1.35 !important;
  color: rgba(255, 255, 255, 0.82);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__subhead .rotator {
  display: block;
  width: auto !important;
  height: auto;
  margin-top: 3px;
  overflow: visible;
  color: var(--teal);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__subhead .rotator .r-item {
  position: static;
  display: inline;
  opacity: 1;
  transform: none;
  transition: none;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__subhead .rotator .r-item:not(.active) {
  display: none;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__body {
  max-width: 590px;
  margin: 0;
  font-size: clamp(15.5px, 1.05vw, 17px);
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text {
  background: var(--bg-primary);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .section-head--center {
  margin-bottom: 56px;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee + .marquee {
  margin-top: 6px;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee__item {
  border-color: rgba(12, 36, 52, 0.12);
  background: #fff;
  color: var(--text-primary);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee__item:hover,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .logos-strip--text .marquee__item:focus {
  background: #fff;
  color: var(--text-primary);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .industries-section.aif-section {
  padding-top:    var(--cfgi-pad-top, 0);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 120px);
  padding-left:   var(--cfgi-pad-left, 0);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .stats-bar .stat-label .nowrap {
  white-space: nowrap;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted.logos-strip--text {
  padding-top:    var(--cfgi-pad-top, 96px);
  padding-right:  var(--cfgi-pad-right, 0);
  padding-bottom: var(--cfgi-pad-bottom, 88px);
  padding-left:   var(--cfgi-pad-left, 0);
  background: var(--bg-primary);
  text-align: center;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted.logos-strip--text .section-head--center {
  margin-bottom: 56px;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted.logos-strip--text .section-tagline {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(17px, 1.4vw, 19px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-body);
  max-width: 64ch;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__heading,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__heading * {
  line-height: 1.04;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-prism__col__title {
  line-height: 1.16;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-partners .marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-partners .marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: cfgiMarquee 52s linear infinite;
  will-change: transform;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-partners .marquee:hover .marquee__track {
  animation-play-state: paused;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted.logos-strip--text .marquee__item {
  padding: 14px 36px;
  border: 0;
  border-right: 1px solid var(--border-hairline);
  background: transparent;
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--text-secondary);
  opacity: 1;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted.logos-strip--text .marquee__item:hover,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted.logos-strip--text .marquee__item:focus {
  background: transparent;
  color: var(--text-primary);
}

@media (max-width: 700px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted.logos-strip--text {
    padding-top:    var(--cfgi-pad-top, 72px);
    padding-right:  var(--cfgi-pad-right, 0);
    padding-bottom: var(--cfgi-pad-bottom, 64px);
    padding-left:   var(--cfgi-pad-left, 0);
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-trusted.logos-strip--text .marquee__item {
    padding: 12px 24px;
    font-size: 17px;
  }
}

@media (max-width: 1100px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner > div {
    width: min(560px, calc(50vw - var(--gutter)));
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l1,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l2,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l3 {
    font-size: clamp(42px, 5vw, 62px) !important;
  }
}

@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video-wrap {
    width: 100%;
    min-width: 0;
    aspect-ratio: 16 / 10;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner {
    min-height: 0;
    padding-top: 52px !important;
    padding-bottom: 64px !important;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner > div {
    width: min(640px, 100%);
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l1,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l2,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l3 {
    font-size: clamp(40px, 8vw, 64px) !important;
  }
}

@media (max-width: 600px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video-wrap {
    aspect-ratio: 4 / 3;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner {
    padding-top: 42px !important;
    padding-bottom: 56px !important;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline {
    margin-bottom: 20px;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l1,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l2,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l3 {
    font-size: clamp(34px, 11vw, 50px) !important;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline .l2 {
    white-space: normal;
    width: fit-content;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__subhead {
    font-size: 17px !important;
  }
}

/* AIF hero reference mapping.
   Panel-mode Hero V2 now emits the same semantic pieces as the handoff
   pc-hero: eyebrow line span, h1 em[data-text], subhead em-style kicker. */
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  --stats-h: 176px;
  height: calc(100vh - var(--announce-h, 40px) - var(--nav-h, 64px) - var(--stats-h)) !important;
  min-height: 520px !important;
  padding: 0 !important;
}

body.hero-v2-active :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel {
  margin-top: 0 !important;
  height: calc(100vh - var(--announce-h, 40px) - var(--nav-h, 64px) - var(--stats-h)) !important;
  min-height: 520px !important;
}

body.hero-v2-active :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  min-height: 0;
  display: block;
  margin: 0 auto;
  padding: 48px var(--gutter) !important;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner > div {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 720px;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: 50vw;
  max-width: 720px;
  min-width: 420px;
  overflow: hidden;
  background: #0a0a0a;
  z-index: 1;
  filter: none;
}

@media (min-width: 901px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner {
    transform: translateY(12px);
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video-wrap {
    width: 47vw;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline {
    font-size: clamp(44px, 5.6vw, 76px) !important;
  }
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.5) brightness(0.85) contrast(1.05);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__scrim,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__grain,
:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video-wrap::after {
  display: none;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__eyebrow::before {
  display: none;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__eyebrow-line {
  width: 24px;
  height: 1px;
  background: var(--teal);
  flex-shrink: 0;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 76px) !important;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0 0 22px;
  position: relative;
  z-index: 2;
  white-space: nowrap;
  max-width: none;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline em {
  position: relative;
  display: inline-block;
  font-style: italic;
  color: #fff;
  padding: 0.04em 0.18em 0.06em;
  background: transparent;
  line-height: inherit;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline em::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1500ms cubic-bezier(0.83, 0, 0.17, 1);
  z-index: -1;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline em::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  color: #0a0a0a;
  font: inherit;
  font-style: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  transition: clip-path 1500ms cubic-bezier(0.83, 0, 0.17, 1),
              -webkit-clip-path 1500ms cubic-bezier(0.83, 0, 0.17, 1);
  pointer-events: none;
  z-index: 1;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline.is-visible em::before {
  transform: scaleX(1);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline.is-visible em::after {
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__foot {
  display: block;
  max-width: 640px;
  margin: 0;
  padding: 0;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__subhead {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.4vw, 20px) !important;
  font-weight: 400;
  line-height: 1.55 !important;
  color: rgba(255,255,255,0.92);
  margin: 0 0 14px;
  max-width: 640px !important;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__subhead .rotator {
  display: inline;
  width: auto !important;
  height: auto;
  margin: 0;
  overflow: visible;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__subhead .rotator .r-item {
  position: static;
  display: inline;
  opacity: 1;
  transform: none;
  transition: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--teal);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__subhead .rotator .r-item:not(.active) {
  display: none;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__body {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  color: rgba(255,255,255,0.7);
  margin: 0;
  max-width: 560px;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel + .stats-bar {
  padding: 32px 0;
  min-height: var(--stats-h, 176px);
  display: flex;
  align-items: center;
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel + .stats-bar .stat-number {
  font-size: clamp(36px, 3.4vw, 48px);
}

:where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel + .stats-bar .stat-label {
  font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline em::before {
    transform: scaleX(1);
    transition: none;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline em::after {
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    transition: none;
  }
}

@media (max-height: 680px), (max-width: 900px) {
  body.hero-v2-active :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel {
    height: auto !important;
    min-height: 0 !important;
  }
}

@media (max-width: 900px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel {
    flex-direction: column;
    align-items: stretch;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner {
    padding: 48px var(--gutter) !important;
    width: 100%;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__video-wrap {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    aspect-ratio: 16 / 10;
    order: -1;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline {
    white-space: normal;
  }

  :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__headline em::after {
    white-space: normal;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO V2 — Mobile content-driven height (last-word override).
   Multiple earlier unconditional !important rules (lines ~5664, ~5788,
   ~9359, ~9716) lock height to calc(100vh - chrome) and set min-height to
   520–640px. With overflow: hidden on the section, content longer than
   that calculated box gets clipped on small screens. This block defeats
   every earlier height/min-height rule for both full and panel modes by
   placing the override LAST in source order and adding a `body` element
   to the selector for higher specificity than any earlier hero-v2 rule.
   `contain: none` is required — without it, parent containers (Elementor
   wrapper, themes that apply `contain: layout`) can collapse the box even
   after height: auto, because layout containment isolates the child's
   intrinsic size from the parent height calculation.
   The result: hero grows to fit eyebrow + headline + subhead + body +
   cards on any screen width.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2,
  body :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    contain: none !important;
  }
  body :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2 .hero-v2__inner,
  body :where(.cfgi-redesign-chrome, .cfgi-homepage) .hero-v2--panel .hero-v2__inner {
    min-height: 0 !important;
    contain: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Industries — force clean 2-column grid on mobile (two blocks per row).
   A later-in-source duplicate rule at line ~8520 sets the grid to
   `repeat(6, 1fr)` UNCONDITIONALLY, which beats the earlier @media
   responsive rules at lines 3412/3525/3655 on source order. Without
   this override the mobile view collapses to 6 squished columns. Also
   zero every zigzag offset selector so the two columns sit flush, and
   drop the padding-bottom reserve that only existed for the overhang.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos {
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 0;
  }
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo,
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:nth-child(2n),
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photo:nth-child(3n+2),
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos:not([data-count="11"]):not([data-count="12"]) > .ind-photo:nth-child(5n+2),
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .ind-photos:not([data-count="11"]):not([data-count="12"]) > .ind-photo:nth-child(5n+4) {
    top: 0;
  }
}

/* AIF Accelerators — hide the pagination dots row on mobile. Prev/next
   arrows inside the panel remain as the sole navigation. */
@media (max-width: 720px) {
  :where(.cfgi-redesign-chrome, .cfgi-homepage) .aif-accelerators .aif-acc-dots-row { display: none; }
}