/* ==========================================================================
   RedOwl Design System — Inspired by Lok8.digital
   Sophisticated Crimson Ember & Deep Obsidian Aesthetics
   ========================================================================== */

/* Inter is loaded by a <link> in each page head (faster than @import) */

/* --- Root & Themes --- */
:root {
  /* Fonts */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* True RedOwl Brand Red (#FF0000) */
  --brand-crimson: #FF0000;
  --brand-crimson-hover: #FF0000;
  --brand-ruby: #FF0000;
  --brand-ruby-glow: rgba(255, 0, 0, 0.25);
  --brand-wine: #FF0000;
  --brand-rose-subtle: rgba(255, 0, 0, 0.05);
  --brand-rose-border: rgba(255, 0, 0, 0.15);
  
  /* Status Colors */
  --color-success: #10B981;
  --color-success-bg: rgba(16, 185, 129, 0.1);
  --color-warning: #F59E0B;
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-danger: #FF0000;
  --color-danger-bg: rgba(255, 0, 0, 0.1);

  /* Light Theme (Clean Crisp White & Light Grey) */
  --bg-main: #F8FAFC;
  --bg-surface: #F8FAFC;
  --bg-surface-elevated: #F8FAFC;
  --bg-surface-inset: #F1F5F9;
  --text-primary: #161C16;
  --text-secondary: #232B22;
  --text-muted: #8F948C;
  --text-inverse: #F5F5ED;
  --border-subtle: rgba(22, 28, 22, 0.08);
  --border-strong: rgba(22, 28, 22, 0.14);
  --border-glow: rgba(255, 0, 0, 0.25);
  --glass-bg: rgba(248, 250, 252, 0.88);
  --glass-border: rgba(226, 232, 240, 0.9);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-glow: none;
  --hero-glow-1: radial-gradient(circle at 50% 12%, rgba(241, 245, 249, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
  --hero-glow-2: radial-gradient(circle at 80% 30%, rgba(248, 250, 252, 0.8) 0%, rgba(255, 255, 255, 0) 60%);
  --badge-bg: #F1F5F9;
  --badge-text: #161C16;

  /* Layout & Radii */
  --radius-sm: 0.125rem;
  --radius-md: 0.125rem;
  --radius-lg: 0.125rem;
  --radius-xl: 0.125rem;
  --radius-full: 0.125rem;
  --max-width: 1240px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark Theme (Deep Titanium & Obsidian) */
[data-theme="dark"] {
  --bg-main: #161C16;
  --bg-surface: #161C16;
  --bg-surface-elevated: #232B22;
  --bg-surface-inset: #232B22;
  --text-primary: #F5F5ED;
  --text-secondary: #8F948C;
  --text-muted: #8F948C;
  --text-inverse: #161C16;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --border-glow: rgba(255, 0, 0, 0.3);
  --glass-bg: rgba(22, 28, 22, 0.78);
  --glass-border: rgba(255, 255, 255, 0.1);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-glow: none;
  --hero-glow-1: radial-gradient(circle at 50% 15%, rgba(35, 43, 34, 0.5) 0%, rgba(11, 13, 19, 0) 70%);
  --hero-glow-2: radial-gradient(circle at 85% 35%, rgba(255, 0, 0, 0.05) 0%, rgba(11, 13, 19, 0) 55%);
  --badge-bg: rgba(255, 255, 255, 0.06);
  --badge-text: #E2E8F0;
}

/* --- Base Reset & Typography --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-main);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Eye-friendly refined selection */
::selection {
  background: var(--brand-crimson);
  color: #F5F5ED;
}

/* Typography Scale */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); }

p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.65;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* --- Global Background Glow Canvas --- */
.ambient-glow-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1100px;
  background-image: var(--hero-glow-1), var(--hero-glow-2);
  pointer-events: none;
  z-index: 0;
}

/* --- Glass & Neumorphic Utilities --- */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: none;
  border-radius: 0.125rem;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.glass-panel:hover {
  border-color: var(--border-glow);
  box-shadow: none;
}

.neu-inset {
  background: var(--bg-surface-inset);
  border: 1px solid var(--border-subtle);
  border-radius: 0.125rem;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

.crimson-gradient-text {
  color: var(--brand-crimson);
  background: linear-gradient(135deg, #FF0000 0%, #FF0000 60%, #FF0000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* --- Navigation Header --- */
.header-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 0.85rem 0;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--transition-normal);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2.25rem;
}

.nav-brand-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--brand-crimson);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.brand-svg-logo {
  height: 32px;
  width: auto;
  color: var(--brand-crimson);
  fill: var(--brand-crimson);
  filter:none;
  transition: transform var(--transition-fast);
}

.nav-brand-link:hover .brand-svg-logo {
  transform: scale(1.04);
}

.nav-links-desktop {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
}

.nav-item {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: -12px;
}

.nav-link-btn,
.nav-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.95rem;
  border-radius: 0.125rem;
  color: var(--text-secondary);
  font-size: 0.925rem;
  font-weight: 500;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.nav-link-btn:hover,
.nav-link:hover,
.nav-item.active .nav-link-btn,
.nav-item.active .nav-link,
.nav-link-btn.active,
.nav-link.active,
.nav-item.menu-open .nav-link-btn,
.nav-item.menu-open .nav-link {
  color: var(--text-primary);
  background: var(--badge-bg);
}

.nav-item.active .nav-link-btn,
.nav-item.active .nav-link,
.nav-link-btn.active,
.nav-link.active {
  color: var(--brand-crimson);
  font-weight: 600;
}

.nav-chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.nav-item:hover .nav-chevron, .nav-item.menu-open .nav-chevron {
  transform: rotate(180deg);
}

/* Mega Menu Dropdown - Seamless Hover with Zero Gap */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  width: min(780px, 90vw);
  margin-top: 2px;
  padding: 1.5rem;
  background: #F8FAFC !important;
  border: 1px solid rgba(22, 28, 22, 0.12) !important;
  box-shadow: none !important;
  border-radius: 0.125rem;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease 0.15s, transform 0.2s ease 0.15s, visibility 0.2s ease 0.15s;
}

/* Invisible Hover Tunnel: Bridges any space between trigger and dropdown including diagonal mouse travel */
.mega-menu::before {
  content: "";
  position: absolute;
  top: -28px;
  left: -24px;
  right: -24px;
  height: 32px;
  background: transparent;
  display: block;
  z-index: 1201;
}

[data-theme="dark"] .mega-menu {
  background: #161C16 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  box-shadow: none !important;
}

.nav-item.menu-open .mega-menu,
.nav-item:focus-within .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

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

.mega-col-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
}

.mega-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.75rem;
  border-radius: 0.125rem;
  transition: all var(--transition-fast);
}

.mega-item:hover {
  background: var(--bg-surface-elevated);
  transform: translateX(3px);
}

.mega-icon {
  width: 36px;
  height: 36px;
  border-radius: 0.125rem;
  background: var(--brand-rose-subtle);
  border: 1px solid var(--brand-rose-border);
  color: var(--brand-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mega-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.mega-desc {
  font-size: 0.825rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Nav Actions */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

/* Navigation Header Login Option (Solid Black Text, High Contrast) */
.nav-login-btn,
.nav-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.52rem 1.25rem !important;
  font-size: 0.95rem;
  font-weight: 700;
  color: #161C16 !important;
  background: #F8FAFC;
  border: 1.5px solid #161C16 !important;
  border-radius: 0.125rem;
  letter-spacing: -0.01em;
  box-shadow: none;
  transition: all var(--transition-fast);
  cursor: pointer;
  text-decoration: none;
  opacity: 1 !important;
}

.nav-login-btn:hover,
.nav-actions .btn-secondary:hover {
  background: #161C16 !important;
  color: #F5F5ED !important;
  border-color: #161C16 !important;
  transform: translateY(-1.5px);
  box-shadow: none;
}

.nav-login-btn:active,
.nav-actions .btn-secondary:active {
  transform: translateY(0.5px);
}

[data-theme="dark"] .nav-login-btn,
[data-theme="dark"] .nav-actions .btn-secondary {
  color: #F5F5ED !important;
  background: #161C16;
  border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: none;
}

[data-theme="dark"] .nav-login-btn:hover,
[data-theme="dark"] .nav-actions .btn-secondary:hover {
  background: #F5F5ED !important;
  color: #161C16 !important;
  border-color: #F5F5ED !important;
  box-shadow: none;
}

.theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 0.125rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.theme-toggle-btn:hover {
  color: var(--brand-crimson);
  border-color: var(--border-glow);
}

.theme-toggle-btn svg {
  width: 18px;
  height: 18px;
}

[data-theme="dark"] .moon-icon,
[data-theme="dark"] .theme-icon-moon {
  display: none !important;
}

[data-theme="dark"] .sun-icon,
[data-theme="dark"] .theme-icon-sun {
  display: block !important;
}

[data-theme="light"] .sun-icon,
[data-theme="light"] .theme-icon-sun,
html:not([data-theme="dark"]) .sun-icon,
html:not([data-theme="dark"]) .theme-icon-sun {
  display: none !important;
}

[data-theme="light"] .moon-icon,
[data-theme="light"] .theme-icon-moon,
html:not([data-theme="dark"]) .moon-icon,
html:not([data-theme="dark"]) .theme-icon-moon {
  display: block !important;
}

/* Button System */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.68rem 1.4rem;
  font-size: 0.925rem;
  font-weight: 600;
  border-radius: 0.125rem;
  background: linear-gradient(135deg, var(--brand-crimson) 0%, var(--brand-ruby) 100%);
  color: #F5F5ED;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all var(--transition-fast);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-crimson-hover) 0%, var(--brand-crimson) 100%);
  transform: translateY(-1.5px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-primary:active {
  transform: translateY(0.5px);
  box-shadow: none;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.68rem 1.35rem;
  font-size: 0.925rem;
  font-weight: 600;
  border-radius: 0.125rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: none;
  transition: all var(--transition-fast);
}

.btn-secondary:hover {
  border-color: var(--brand-crimson);
  color: var(--brand-crimson);
  transform: translateY(-1.5px);
  box-shadow: none;
}

.btn-secondary:active {
  transform: translateY(0.5px);
}

.mobile-menu-btn {
  display: none;
  padding: 0.5rem;
  border-radius: 0.125rem;
  color: var(--text-primary);
}

/* --- Hero Section --- */
.hero-section {
  position: relative;
  z-index: 1;
  padding: 2.25rem 0 0rem;
  text-align: center;
}

.hero-header-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin: 0 auto 1.5rem;
  max-width: 1250px;
}

.hero-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.hero-owl-icon {
  height: clamp(115px, 12vw, 170px);
  width: auto;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  filter:none;
  transition: transform var(--transition-normal);
}

.hero-owl-icon:hover {
  transform: scale(1.04);
}

.hero-title {
  max-width: 900px;
  margin: 0 auto 0.75rem;
  letter-spacing: -0.035em;
}

.hero-header-wrap .hero-title {
  text-align: left;
  margin: 0 0 0.4rem;
}

.hero-subtitle {
  max-width: 760px;
  margin: 0 auto 0.85rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--text-secondary);
  font-weight: 450;
}

.hero-header-wrap .hero-subtitle {
  margin: 0;
  text-align: left;
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--text-secondary);
  font-weight: 500;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  .hero-header-wrap {
    flex-direction: column;
    gap: 0.85rem;
  }
  .hero-title-group {
    align-items: center;
    text-align: center;
  }
  .hero-header-wrap .hero-title {
    text-align: center;
  }
  .hero-header-wrap .hero-subtitle {
    text-align: center;
  }
  .hero-owl-icon {
    height: 85px;
  }
}

.hero-certifications-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 0 auto 1.75rem;
  flex-wrap: wrap;
}

.cert-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.95rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 0.125rem;
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: none;
  letter-spacing: 0.02em;
  transition: all var(--transition-fast);
}

.cert-pill:hover {
  border-color: var(--brand-crimson);
  transform: translateY(-1px);
  box-shadow: none;
}

.cert-icon {
  color: #10B981;
  flex-shrink: 0;
}

[data-theme="dark"] .cert-pill {
  background: #161C16;
  border-color: rgba(255, 255, 255, 0.14);
}

.footer-cert-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.footer-cert-badge {
  display: inline-block;
  height: 88px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  background: #FFFFFF;
  border-radius: 0.125rem;
  padding: 6px 12px;
  border: none;
  box-shadow: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  vertical-align: middle;
}

.footer-cert-badge.cert-badge-iso {
  padding: 6px 8px;
}

.footer-cert-badge:hover {
  transform: translateY(-3px);
  box-shadow: none;
  border-color: transparent;
}

[data-theme="dark"] .footer-cert-badge {
  background: #F5F5ED;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}




[data-theme="dark"] .cert-icon {
  color: #34D399;
}

/* Quick Tool Cards in Hero */
.hero-tool-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto 3rem;
  text-align: left;
}

.tool-card {
  padding: 1.5rem;
  border-radius: 0.125rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.tool-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--brand-crimson);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.tool-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-glow);
  box-shadow: none;
}

.tool-card:hover::before {
  opacity: 1;
}

.tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-crimson);
  margin-bottom: 0.5rem;
}

.tool-card h4 {
  font-size: 1.15rem;
  margin-bottom: 0.4rem;
}

.tool-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.tool-link-action {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-crimson);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Hero Awards & Partners Scrolling Marquee */
.awards-marquee-container {
  width: 100%;
  max-width: 1100px;
  margin: 0.5rem auto 1rem;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  padding: 0.5rem 0;
}

.awards-marquee-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: awards-marquee-scroll 34s linear infinite;
  will-change: transform;
}

.awards-marquee-track:hover {
  animation-play-state: paused;
}

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

.awards-ribbon {
  margin: 0 auto 0.05rem;
  padding: 0.5rem 0;
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.award-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
}

.award-logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  filter: grayscale(10%);
  transition: opacity var(--transition-fast), filter var(--transition-fast);
}

.award-item:hover .award-logo {
  opacity: 1;
  filter: grayscale(0%);
}

.award-meta {
  display: flex;
  flex-direction: column;
}

.award-category {
  font-size: 0.725rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-crimson);
}

.award-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
}

/* --- Section Global Layout --- */
.section {
  position: relative;
  padding: 1rem 0;
}

#pillars.section { padding-top: 0rem; }

.section-header {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 1.5rem;
}

.section-chip {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-crimson);
  background: var(--brand-rose-subtle);
  border: 1px solid var(--brand-rose-border);
  padding: 0.3rem 0.85rem;
  border-radius: 0.125rem;
  margin-bottom: 0.9rem;
}

.section-header h1,
.section-header h2 {
  margin-bottom: 1rem;
}

.section-header p {
  font-size: 1.1rem;
}

/* --- 3 Pillars / Value Leaks Section --- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-bottom: 3rem;
}

.pillar-card {
  padding: 2.25rem 1.75rem;
  border-radius: 0.125rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  align-content: start;
}

.pillar-card > *:not(.pillar-icon-wrap):not(h3) {
  grid-column: 1 / -1;
}

.pillar-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 0.125rem;
  background: var(--brand-rose-subtle);
  border: 1px solid var(--brand-rose-border);
  color: var(--brand-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.pillar-card h3 {
  font-size: 1.35rem;
  margin: 0 0 1.25rem;
  align-self: center;
  height: 48px;
  display: flex;
  align-items: center;
}

.pillar-tagline {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}

.pillar-desc {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Interactive AP Leakage ROI Calculator --- */
.calculator-container {
  margin-top: 3.5rem;
  padding: 2.5rem;
  border-radius: 0.125rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  box-shadow: none;
}

.calc-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: stretch;
}

.calc-inputs-col {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.calc-header-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.slider-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.slider-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.slider-title {
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--text-primary);
}

.slider-value-display {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-crimson);
}

.custom-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 0.125rem;
  background: color-mix(in srgb, var(--text-primary) 16%, transparent);
  outline: none;
  transition: background var(--transition-fast);
}

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-crimson);
  border: 3px solid #F5F5ED;
  box-shadow: none;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.custom-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: none;
}

/* Calculator Results Column */
.calc-results-col {
  padding: 2rem;
  border-radius: 0.125rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-glow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.calc-results-col::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255, 0, 0, 0.15) 0%, transparent 70%);
  pointer-events: none;
}

.result-metric-header {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.result-big-number {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  color: var(--brand-crimson);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.result-sub-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

.breakdown-bars {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}

.breakdown-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.breakdown-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.825rem;
}

.breakdown-name {
  color: var(--text-secondary);
  font-weight: 500;
}

.breakdown-val {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
}

.progress-track {
  height: 6px;
  background: var(--bg-surface-inset);
  border-radius: 0.125rem;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 0.125rem;
  background: linear-gradient(90deg, var(--brand-crimson), var(--brand-ruby));
  transition: width 0.4s ease;
}

/* --- Invoice Leakage Process Flow Banner --- */
.process-flow-banner {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 0.125rem;
  padding: 2rem 2.25rem;
  margin-bottom: 2.5rem;
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.process-flow-grid {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  align-items: stretch;
  gap: 0.5rem;
}

.flow-stage-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 0.125rem;
  padding: 1.5rem 1.35rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
}

.flow-stage-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: none;
}

.flow-stage-terminal {
  border-color: rgba(16, 185, 129, 0.35);
}

[data-theme="dark"] .flow-stage-terminal {
  border-color: rgba(16, 185, 129, 0.45);
}

.flow-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.flow-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.725rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 0.125rem;
  background: var(--brand-rose-subtle);
  color: var(--brand-crimson);
  border: 1px solid var(--brand-rose-border);
}

.flow-badge-pulse {
  background: rgba(255, 0, 0, 0.08);
}

.pulse-indicator {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-crimson);
  box-shadow: none;
  animation: flow-pulse 2s infinite;
}

@keyframes flow-pulse {
  0% { box-shadow: none; }
  70% { box-shadow: none; }
  100% { box-shadow: none; }
}

.flow-badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .flow-badge-success {
  background: rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.flow-step-idx {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

.flow-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 0.125rem;
  background: var(--brand-rose-subtle);
  color: var(--brand-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.flow-icon-terminal {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

[data-theme="dark"] .flow-icon-terminal {
  color: #34d399;
}

.flow-stage-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
  line-height: 1.25;
}

.flow-stage-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
  flex-grow: 1;
}

.flow-meta-tag {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  padding: 0.35rem 0.65rem;
  border-radius: 0.125rem;
  display: inline-block;
  align-self: flex-start;
}

.flow-dual-outcomes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.outcome-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 0.125rem;
  display: inline-flex;
  align-items: center;
}

.outcome-ok {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .outcome-ok {
  background: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.outcome-leakage {
  background: rgba(255, 0, 0, 0.1);
  color: var(--brand-crimson);
  border: 1px solid rgba(255, 0, 0, 0.25);
}

.flow-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--brand-crimson);
  opacity: 0.85;
  position: relative;
}

.flow-connector-line {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--border-strong), var(--brand-crimson));
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
}

.flow-connector-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: none;
}

@media (max-width: 900px) {
  .process-flow-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .flow-connector {
    transform: rotate(90deg);
    padding: 0.5rem 0;
  }
  .flow-connector-line {
    display: none;
  }
}

/* --- Interactive Fake AI Invoice & Fraud Detector Simulator --- */
.detector-sandbox {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 0.125rem;
  box-shadow: none;
  overflow: hidden;
}

.detector-toolbar {
  padding: 1rem 1.5rem;
  background: var(--bg-surface-elevated);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.sample-selector-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sample-btn {
  padding: 0.45rem 0.85rem;
  border-radius: 0.125rem;
  font-size: 0.825rem;
  font-weight: 600;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.sample-btn:hover {
  border-color: var(--brand-crimson);
  color: var(--brand-crimson);
}

.sample-btn.active {
  background: var(--brand-crimson);
  color: #F5F5ED;
  border-color: var(--brand-crimson);
  box-shadow: none;
}

.detector-workspace {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  min-height: 480px;
}

/* Document Preview Panel */
.doc-preview-panel {
  padding: 1.75rem;
  border-right: 1px solid var(--border-subtle);
  background: var(--bg-surface-inset);
  position: relative;
  display: flex;
  flex-direction: column;
}

.invoice-mock-sheet {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 0.125rem;
  padding: 1.5rem;
  box-shadow: none;
  position: relative;
  flex: 1;
  font-size: 0.85rem;
  overflow: hidden;
}

.scanner-laser-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-ruby), var(--brand-crimson), transparent);
  box-shadow: none;
  top: 0%;
  animation: scan-vertical 3s ease-in-out infinite;
  z-index: 10;
  pointer-events: none;
}

@keyframes scan-vertical {
  0% { top: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.inv-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.inv-tag {
  font-size: 0.7rem;
  font-family: var(--font-mono);
  padding: 0.2rem 0.5rem;
  border-radius: 0.125rem;
  background: var(--badge-bg);
}

.inv-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0;
}

.inv-flagged-row {
  background: var(--brand-rose-subtle);
  border-left: 3px solid var(--brand-crimson);
  padding-left: 0.5rem;
  border-radius: 0.125rem;
}

/* AI Analysis Inspector Panel */
.ai-inspector-panel {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: var(--bg-surface);
}

.score-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-radius: 0.125rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
}

.score-radial-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.score-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 4px solid var(--brand-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--brand-crimson);
}

.risk-level-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: 0.125rem;
}

.risk-high { background: var(--color-danger-bg); color: var(--color-danger); }
.risk-med { background: var(--color-warning-bg); color: var(--color-warning); }
.risk-low { background: var(--color-success-bg); color: var(--color-success); }

.violations-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.violation-card {
  padding: 0.95rem;
  border-radius: 0.125rem;
  background: var(--bg-surface-elevated);
  border-left: 3px solid var(--brand-crimson);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.violation-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.violation-clause {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--brand-crimson);
}

.violation-detail {
  font-size: 0.825rem;
  color: var(--text-secondary);
}

.audit-action-box {
  margin-top: auto;
  padding: 1rem;
  border-radius: 0.125rem;
  background: var(--bg-surface-inset);
  border: 1px dashed var(--border-strong);
  font-size: 0.85rem;
}

/* --- Case Study ($18-24M Telecommunications Leakage) --- */
.case-study-card {
  padding: 3.5rem;
  border-radius: 0.125rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}

.case-study-hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 3.5rem;
}

.metric-cards-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 3.5rem;
}

.stat-box {
  padding: 1.75rem;
  border-radius: 0.125rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  text-align: center;
}

.stat-number {
  font-family: var(--font-mono);
  font-size: 2.35rem;
  font-weight: 800;
  color: var(--brand-crimson);
  margin-bottom: 0.35rem;
}

.stat-label {
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 3-Step Process Flow */
.process-steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
}

.process-step-item {
  padding: 2rem 1.5rem;
  border-radius: 0.125rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  position: relative;
}

.step-badge {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-crimson);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  display: inline-block;
}

.process-step-item h4 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.process-step-item p {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

/* --- Multi-Stakeholder Perspective Switcher --- */
.stakeholder-tabs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.stakeholder-tab-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.25rem;
  border-radius: 0.125rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.925rem;
  transition: all var(--transition-fast);
}

.stakeholder-tab-btn:hover {
  border-color: var(--border-glow);
  color: var(--text-primary);
}

.stakeholder-tab-btn.active {
  background: var(--brand-crimson);
  color: #F5F5ED;
  border-color: var(--brand-crimson);
  box-shadow: none;
}

.stakeholder-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2.5rem;
  border-radius: 0.125rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  box-shadow: none;
  animation: fadeIn 0.35s ease;
}

.stakeholder-panel.active {
  display: grid;
}

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

.persona-portrait-card {
  position: relative;
  border-radius: 0.125rem;
  overflow: hidden;
  box-shadow: none;
}

.persona-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}

.persona-quote-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem;
  background: linear-gradient(180deg, transparent 0%, rgba(9, 11, 16, 0.88) 100%);
  color: #F5F5ED;
}

.persona-role-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand-ruby);
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}

.persona-quote-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #F5F5ED;
  line-height: 1.35;
}

.persona-insights-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.persona-point-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.point-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-rose-subtle);
  color: var(--brand-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.2rem;
}

/* --- Enterprise Engine & Architecture Section --- */
.engine-architecture-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 3rem;
}

.engine-feature-card {
  padding: 1.75rem;
  border-radius: 0.125rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
}

.engine-feature-card h4 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.engine-feature-card p {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.architecture-diagram-wrapper {
  margin-top: 3.5rem;
  border-radius: 0.125rem;
  background: var(--bg-surface-inset);
  border: 1px solid var(--border-subtle);
  padding: 2.5rem;
  text-align: center;
}

.diagram-image {
  max-width: 100%;
  height: auto;
  border-radius: 0.125rem;
  box-shadow: none;
}

/* --- Video Embed Section --- */
.video-showcase-wrap {
  margin: 3.5rem auto 0;
  max-width: 960px;
  border-radius: 0.125rem;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid var(--border-strong);
  background: #161C16;
  aspect-ratio: 16 / 9;
  position: relative;
}

.video-showcase-wrap iframe, .video-showcase-wrap video {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* --- CTA Banner Section --- */
.cta-banner-section {
  padding: 5rem 0;
}

.cta-banner-box {
  padding: 3.5rem;
  border-radius: 0.125rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-strong);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  position: relative;
  overflow: hidden;
}

.cta-content-side {
  max-width: 620px;
}

.cta-content-side h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  margin-bottom: 0.85rem;
}

.cta-buttons-side {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex-shrink: 0;
}

/* --- Modern Footer --- */
.site-footer {
  padding: 4.5rem 0 2.5rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 3.5rem;
}

@media (max-width: 1024px) {
  .footer-top-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 640px) {
  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.footer-brand-col p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 0.85rem;
  max-width: 320px;
}

.footer-nav-col h5,
.footer-col h4,
.footer-heading {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-bottom: 1.1rem;
}

.footer-nav-col ul,
.footer-col ul,
.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0;
  margin: 0;
}

.footer-nav-col a,
.footer-col a,
.footer-links a {
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: color var(--transition-fast);
  text-decoration: none;
}

.footer-nav-col a:hover,
.footer-col a:hover,
.footer-links a:hover {
  color: var(--brand-crimson);
}

.footer-legal-bar {
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.footer-disclaimer-text {
  font-size: 0.775rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.footer-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.825rem;
  color: var(--text-muted);
}

.social-links-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.social-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 0.125rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.social-icon-btn:hover {
  color: var(--brand-crimson);
  border-color: var(--border-glow);
  transform: translateY(-2px);
}

/* --- Modal Dialog (Book a Demo) --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(9, 11, 16, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}

.modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  width: 100%;
  max-width: 540px;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 0.125rem;
  box-shadow: none;
  padding: 2.25rem;
  position: relative;
  transform: translateY(16px) scale(0.96);
  transition: all var(--transition-normal);
}

.modal-overlay.open .modal-card {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-surface-elevated);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.modal-close-btn:hover {
  color: var(--text-primary);
  background: var(--bg-surface-inset);
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-label {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.65rem 0.95rem;
  border-radius: 0.125rem;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface-inset);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

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

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--brand-crimson);
  box-shadow: none;
}

/* Contact Us Page Layout */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
  align-items: start;
  margin-top: 2rem;
  margin-bottom: 4rem;
}

.contact-card {
  padding: 2.5rem;
  border-radius: 0.125rem;
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  box-shadow: none;
}

.contact-channels-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.contact-channel-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 0.125rem;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface-elevated);
  transition: all var(--transition-fast);
}

.contact-channel-item:hover {
  border-color: var(--brand-crimson);
  transform: translateY(-2px);
  box-shadow: none;
}

.contact-channel-icon {
  width: 42px;
  height: 42px;
  border-radius: 0.125rem;
  background: var(--badge-bg);
  color: var(--brand-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-channel-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.contact-channel-content p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 0.35rem;
}

.contact-channel-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-crimson);
  text-decoration: none;
}

.contact-channel-link:hover {
  text-decoration: underline;
}

.contact-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contact-success-box {
  display: none;
  padding: 2rem;
  text-align: center;
  border-radius: 0.125rem;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  margin-top: 1rem;
}

.contact-success-box.show {
  display: block;
}

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

/* Toast Notification */
.toast-notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 1rem 1.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-glow);
  border-radius: 0.125rem;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 3000;
  transform: translateY(100px);
  opacity: 0;
  transition: all var(--transition-normal);
}

.toast-notification.show {
  transform: translateY(0);
  opacity: 1;
}

/* --- Real-Time Invoice Pipeline Visualizer (Lok8 Movement Style - Borderless) --- */
.pipeline-showcase-container {
  margin: 1.75rem auto 2.5rem;
  max-width: 1160px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  position: relative;
}

.pipeline-showcase-container:hover {
  border-color: transparent;
  box-shadow: none;
}

/* Arena & Track */
.pipeline-arena {
  position: relative;
  height: 380px;
  background: transparent;
  border: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
}

/* Lok8.digital Style Dynamic Radar Grid, Network Paths & Sonar Ripple Canvas (Seamless) */
.pipeline-lok8-canvas {
  position: absolute;
  top: -10px;
  left: -25px;
  width: calc(100% + 50px);
  height: calc(100% + 50px);
  pointer-events: none;
  z-index: 1;
  mask-image: radial-gradient(ellipse 82% 80% at 50% 50%, #161C16 65%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 82% 80% at 50% 50%, #161C16 65%, transparent 100%);
}

/* Glowing Flow SVG Conveyor Rails */
.pipeline-svg-tracks {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.track-line {
  stroke-dasharray: 6 6;
  animation: flow-dash 20s linear infinite;
  position: relative;
  z-index: 0;
}

@keyframes flow-dash {
  to { stroke-dashoffset: -400; }
}

/* Source Lane */
.pipeline-source-lane {
  position: relative;
  z-index: 2;
  width: auto;
  max-width: 220px;
  text-align: left;
}

.source-lane-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6d28d9;
  background: var(--bg-surface);
  padding: 0.45rem 0.85rem;
  border-radius: 0.125rem;
  border: 1.5px solid #8b5cf6;
  box-shadow: none;
  margin-bottom: 0.5rem;
  transition: all var(--transition-fast);
}

.source-lane-badge svg {
  color: #8b5cf6;
  flex-shrink: 0;
}

.source-lane-badge:hover {
  border-color: #7c3aed;
  box-shadow: none;
  transform: translateY(-1px);
}

[data-theme="dark"] .source-lane-badge {
  color: #c084fc;
  background: rgba(139, 92, 246, 0.1);
  border-color: #a855f7;
  box-shadow: none;
}

[data-theme="dark"] .source-lane-badge svg {
  color: #c084fc;
}

/* Conveyor Track for Floating Nodes */
.pipeline-conveyor-track {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* Floating Invoice Node */
.pipeline-invoice-node {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.65rem 0.9rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 0.125rem;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  white-space: nowrap;
  pointer-events: auto;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.pipeline-invoice-node.approved {
  border-color: rgba(16, 185, 129, 0.4);
  box-shadow: none;
}

.pipeline-invoice-node.flagged {
  border-color: rgba(255, 0, 0, 0.5);
  box-shadow: none;
}

.node-icon-box {
  width: 24px;
  height: 24px;
  border-radius: 0.125rem;
  background: var(--bg-surface-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

.node-content {
  display: flex;
  flex-direction: column;
}

.node-vendor {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.775rem;
}

.node-amount {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.node-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 0.125rem;
  margin-left: 0.35rem;
  animation: popIn 0.25s ease;
}

@keyframes popIn {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.badge-ok {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge-leakage {
  background: var(--color-danger-bg);
  color: var(--brand-crimson);
}

/* Central AI Interception Gate - Default Blue Borders & Glow */
.pipeline-ai-gate {
  position: absolute;
  top: 50%;
  left: 48%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid #2563eb;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] .pipeline-ai-gate {
  border-color: #3b82f6;
  box-shadow: none;
}

/* Default Blue Spinning Radar Ring */
.gate-radar-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px dashed #2563eb;
  opacity: 0.55;
  animation: spin-radar 12s linear infinite;
  transition: border-color 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease;
}

[data-theme="dark"] .gate-radar-ring {
  border-color: #3b82f6;
  opacity: 0.65;
}

@keyframes spin-radar {
  to { transform: rotate(360deg); }
}

/* Default Blue Core Icon Frame */
.gate-core-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-surface-elevated);
  border: 1.5px solid #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
  color: var(--brand-crimson);
  box-shadow: none;
  transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease;
}

[data-theme="dark"] .gate-core-icon {
  border-color: #3b82f6;
  box-shadow: none;
}

/* --- When Rejected (Leakage Intercepted): Turn RED and GLOW RED --- */
.pipeline-ai-gate.scanning,
.pipeline-ai-gate.scanning-leakage {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: #FF0000 !important;
  box-shadow: none !important;
}

.pipeline-ai-gate.scanning-leakage .gate-radar-ring,
.pipeline-ai-gate.scanning .gate-radar-ring {
  border-color: #FF0000 !important;
  opacity: 0.95 !important;
  box-shadow: none;
}

.pipeline-ai-gate.scanning-leakage .gate-core-icon,
.pipeline-ai-gate.scanning .gate-core-icon {
  border-color: #FF0000 !important;
  color: #FF0000 !important;
  background: var(--brand-rose-subtle) !important;
  filter: !important;
  box-shadow: none !important;
}

.pipeline-ai-gate.scanning-leakage .gate-title,
.pipeline-ai-gate.scanning .gate-title {
  color: #FF0000 !important;
}

/* --- When Passed (Approved / Cleared): Turn GREEN and GLOW GREEN --- */
.pipeline-ai-gate.scanning-ok {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: #10b981 !important;
  box-shadow: none !important;
}

.pipeline-ai-gate.scanning-ok .gate-radar-ring {
  border-color: #10b981 !important;
  opacity: 0.95 !important;
  box-shadow: none;
}

.pipeline-ai-gate.scanning-ok .gate-core-icon {
  border-color: #10b981 !important;
  color: #10b981 !important;
  background: rgba(16, 185, 129, 0.14) !important;
  filter: !important;
  box-shadow: none !important;
}

.pipeline-ai-gate.scanning-ok .gate-title {
  color: #10b981 !important;
}

.gate-owl-mark {
  display: block;
  width: 26px;
  height: 26px;
  background-color: currentColor;
  -webkit-mask: url('assets/redowl-gate-logo-red.png') no-repeat center / contain;
  mask: url('assets/redowl-gate-logo-red.png') no-repeat center / contain;
  transition: all 0.25s ease;
}

.gate-title {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-crimson);
  line-height: 1.1;
}

.gate-sub {
  font-size: 0.58rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* Two Destination Buckets Column */
.pipeline-buckets-col {
  position: relative;
  z-index: 4;
  width: 290px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-left: auto;
}

.pipeline-bucket-card {
  padding: 1.25rem 1.5rem;
  border-radius: 0.125rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  box-shadow: none;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.pipeline-bucket-card.bucket-pulse {
  transform: scale(1.025);
}

.bucket-ok {
  border-left: 4px solid var(--color-success);
}
.bucket-ok.bucket-pulse {
  box-shadow: none;
  border-color: var(--color-success);
}

.bucket-leakage {
  border-left: 4px solid var(--brand-crimson);
}
.bucket-leakage.bucket-pulse {
  box-shadow: none;
  border-color: var(--brand-crimson);
}

.bucket-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

.bucket-title {
  font-size: 0.775rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.bucket-ok .bucket-title { color: var(--color-success); }
.bucket-leakage .bucket-title { color: var(--brand-crimson); }

.bucket-tally-dollars {
  font-family: var(--font-mono);
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 0.25rem;
  transition: color var(--transition-fast);
}

.bucket-tally-count {
  font-size: 0.775rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* --- Responsive Media Queries --- */
/* --- Card Spend Management & Payment Governance --- */
.card-reconciliation-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.reconcile-card {
  padding: 2rem 1.5rem;
  border-radius: 0.125rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
}

.reconcile-icon {
  width: 48px;
  height: 48px;
  border-radius: 0.125rem;
  background: var(--badge-bg);
  color: var(--brand-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.card-defense-demos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.defense-item {
  padding: 1.75rem;
  border-radius: 0.125rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
}

.defense-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

/* --- Responsive Media Queries --- */
@media (max-width: 1024px) {
  .calc-grid, .detector-workspace, .case-study-hero, .stakeholder-panel, .card-reconciliation-grid, .card-defense-demos-grid, .hero-tool-grid {
    grid-template-columns: 1fr;
  }
  .pipeline-arena {
    height: 480px;
    flex-direction: column;
    padding: 1.5rem 1rem;
    gap: 1.5rem;
  }
  .pipeline-source-lane, .pipeline-buckets-col {
    width: 100%;
  }
  .pipeline-buckets-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .pipeline-ai-gate {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 0 auto;
  }
  .doc-preview-panel {
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
  }
  .engine-architecture-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pillars-grid, .metric-cards-row, .process-steps-row {
    grid-template-columns: 1fr;
  }
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .nav-links-desktop {
    display: none;
  }
  .mobile-menu-btn {
    display: flex;
  }
  .hero-tool-grid {
    grid-template-columns: 1fr;
  }
  .pipeline-buckets-col {
    grid-template-columns: 1fr;
  }
  .cta-banner-box {
    flex-direction: column;
    text-align: center;
    padding: 2.25rem 1.5rem;
  }
  .cta-buttons-side {
    width: 100%;
  }
  .footer-top-grid {
    grid-template-columns: 1fr;
  }
  .case-study-card {
    padding: 2rem 1.5rem;
  }
  .calculator-container {
    padding: 1.5rem;
  }
}

/* ==========================================================================
   About Us, Company & Staff / Advisors Styles
   ========================================================================== */

/* Subpage Hero */
.subpage-hero {
  padding: 8rem 0 3.5rem;
  position: relative;
  text-align: center;
}

.subpage-hero .section-chip {
  margin-bottom: 1.25rem;
}

.subpage-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
}

.subpage-hero-lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 780px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}

/* Ecosystem Badges Row */
.achievements-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.achievement-pill {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.125rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow: none;
}

.achievement-pill img {
  height: 28px;
  max-height: 28px;
  max-width: 65px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.achievement-pill-text {
  text-align: left;
}

.achievement-pill-text .pill-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.achievement-pill-text .pill-subtitle {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.2;
}

/* Company Hub Cards (About overview) */
.hub-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
}

.hub-card {
  padding: 2.5rem;
  border-radius: 0.125rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
  color: inherit;
  box-shadow: none;
}

.hub-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-crimson);
  box-shadow: none;
}

.hub-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 0.125rem;
  background: var(--badge-bg);
  color: var(--brand-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.hub-card h3 {
  font-size: 1.45rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}

.hub-card p {
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.hub-card-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brand-crimson);
}

/* Corporate Credentials Table / Panel */
.credentials-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 0.125rem;
  padding: 2.5rem;
  box-shadow: none;
  margin-bottom: 3rem;
}

.credentials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.credential-item {
  padding: 1.25rem 1.5rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 0.125rem;
}

.credential-label {
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.credential-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.4;
}

.credential-sub {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Company Journey Timeline */
.company-timeline {
  position: relative;
  max-width: 860px;
  margin: 3rem auto;
  padding-left: 2.5rem;
}

.company-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  width: 2px;
  background: linear-gradient(180deg, var(--brand-crimson) 0%, rgba(255, 0, 0, 0.2) 100%);
}

.timeline-step {
  position: relative;
  margin-bottom: 2.5rem;
}

.timeline-step:last-child {
  margin-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -2.5rem;
  top: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--brand-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.timeline-marker::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-crimson);
}

.timeline-card {
  padding: 1.75rem 2rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 0.125rem;
  box-shadow: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.timeline-card:hover {
  transform: translateX(4px);
  border-color: var(--brand-crimson);
}

.timeline-date-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-crimson);
  background: var(--badge-bg);
  padding: 0.25rem 0.65rem;
  border-radius: 0.125rem;
  margin-bottom: 0.6rem;
}

.timeline-card h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.timeline-card p {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* Team Grid & Staff Cards */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.team-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 0.125rem;
  overflow: hidden;
  box-shadow: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.team-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 0, 0, 0.35);
  box-shadow: none;
}

.team-photo-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect Ratio */
  background: linear-gradient(135deg, rgba(255, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.03) 100%);
  overflow: hidden;
}

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

.team-card:hover .team-photo {
  transform: scale(1.04);
}

.team-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

.team-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.team-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.25;
}

.team-role {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-crimson);
  margin-bottom: 0.85rem;
  line-height: 1.4;
}

.team-bio {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.linkedin-badge-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0A66C2;
  color: #F5F5ED;
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  flex-shrink: 0;
}

.linkedin-badge-btn:hover {
  transform: scale(1.1);
  box-shadow: none;
}

/* Strategic Partners Grid */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.partner-card {
  padding: 2.5rem 2rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 0.125rem;
  text-align: center;
  box-shadow: none;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.partner-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-crimson);
}

.partner-logo-box {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.partner-logo-box img {
  max-height: 48px;
  max-width: 160px;
  object-fit: contain;
}

.partner-card h4 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.partner-card .partner-role {
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  color: var(--brand-crimson);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
}

.partner-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .subpage-hero {
    padding: 6.5rem 0 2.5rem;
  }
  .company-timeline {
    padding-left: 2rem;
  }
  .company-timeline::before {
    left: 10px;
  }
  .timeline-marker {
    left: -2rem;
    width: 24px;
    height: 24px;
  }
  .timeline-marker::after {
    width: 8px;
    height: 8px;
  }
  .credentials-panel {
    padding: 1.5rem;
  }
}




.nav-brand-link { display: inline-flex; align-items: center; gap: 0.4rem; }
.brand-owl-mark { display: block; height: 48px; margin: -9px 0; flex-shrink: 0; aspect-ratio: 437 / 744; background-color: currentColor; -webkit-mask: url(assets/redowl-owl.png) center / contain no-repeat; mask: url(assets/redowl-owl.png) center / contain no-repeat; }

/* Keep page content above the ambient glow layer */
.page-hero-section { position: relative; z-index: 1; padding: 4rem 0 2rem; }
.page-hero-section ~ section, main > section { position: relative; z-index: 1; }

/* Contact hero: RedOwl rendered as the brand logo */
.title-wordmark { display: inline-flex; align-items: center; gap: 0.12em; vertical-align: -0.08em; color: var(--brand-crimson); }
.title-wordmark .title-wordmark-svg { height: 0.78em; width: auto; }
.title-wordmark .brand-owl-mark { height: 1.25em; width: 0.74em; margin: -0.24em 0; }

/* Hero owl recoloured to exact logo red */
.hero-owl-mask {
  aspect-ratio: 741 / 896;
  background-color: var(--brand-crimson);
  -webkit-mask: url(assets/redowl-mark-cropped-red.png) center / contain no-repeat;
  mask: url(assets/redowl-mark-cropped-red.png) center / contain no-repeat;
}

/* --- Mobile navigation drawer --- */
.mobile-nav-drawer { position: fixed; inset: 0; z-index: 1000; background: var(--bg-main); transform: translateX(100%); transition: transform .3s ease; overflow-y: auto; display: flex; flex-direction: column; }
.mobile-nav-drawer.open { transform: none; }
.mnd-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-subtle); font-weight: 700; color: var(--text-primary); }
.mnd-close { font-size: 1.8rem; line-height: 1; color: var(--text-primary); background: none; border: 0; cursor: pointer; }
.mnd-body { padding: .5rem 1.25rem 2rem; display: flex; flex-direction: column; }
.mnd-group summary, .mnd-top { display: block; padding: 1rem 0; font-weight: 600; font-size: 1.05rem; color: var(--text-primary); border-bottom: 1px solid var(--border-subtle); cursor: pointer; text-decoration: none; list-style: none; }
.mnd-group summary::-webkit-details-marker { display: none; }
.mnd-group summary::after { content: '+'; float: right; color: var(--text-muted); }
.mnd-group[open] summary::after { content: '–'; }
.mnd-group a { display: block; padding: .6rem 0 .6rem 1rem; color: var(--text-secondary); text-decoration: none; font-size: .95rem; }
.mnd-cta { margin-top: 1.5rem; text-align: center; padding: .9rem; border-radius: 0.125rem; background: var(--brand-crimson); color: #F5F5ED; font-weight: 700; text-decoration: none; }
@media (max-width: 768px) {
  .nav-actions { gap: .4rem; }
  .nav-actions .btn-secondary { padding: .5rem .9rem; }
}
@media (max-width: 480px) {
  .nav-container { gap: .5rem; }
  .brand-svg-logo { width: 104px; height: auto; }
  .brand-owl-mark { width: 26px !important; height: 26px !important; }
}

/* Homepage background rhythm: hero matches header, then alternate */
.hero-section { background: var(--bg-main); }
#pillars, #case-study, #video-demo { background: var(--bg-surface-elevated); }
#calculator-section, #stakeholders, .cta-banner-section { background: var(--bg-main); }
#pillars, #calculator-section, #case-study, #stakeholders, #video-demo { position: relative; z-index: 1; }
#pillars, #calculator-section, #case-study, #stakeholders, #video-demo, .cta-banner-section { padding: 72px 0 !important; }
#pillars > .container > :first-child, #calculator-section > .container > :first-child, #case-study > .container > :first-child, #stakeholders > .container > :first-child, #video-demo > .container > :first-child, .cta-banner-section > .container > :first-child { margin-top: 0 !important; }
#pillars > .container > :last-child, #calculator-section > .container > :last-child, #case-study > .container > :last-child, #stakeholders > .container > :last-child, #video-demo > .container > :last-child, .cta-banner-section > .container > :last-child { margin-bottom: 0 !important; }
@media (max-width: 768px) { #pillars, #calculator-section, #case-study, #stakeholders, #video-demo, .cta-banner-section { padding: 48px 0 !important; } }

/* Case study: customer photo across the top of the card, faded for legible text */
#case-study .case-study-card { position: relative; overflow: hidden; isolation: isolate; box-shadow: none; }
#case-study .case-study-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 640px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 45%, var(--bg-surface) 92%),
    linear-gradient(90deg, var(--bg-surface) 0%, color-mix(in srgb, var(--bg-surface) 92%, transparent) 38%, color-mix(in srgb, var(--bg-surface) 20%, transparent) 72%, transparent 100%),
    url("/__l5e/assets-v1/10011af9-747f-4af5-be59-685b6df9cff4/telco-case-study-bg.png") right 35% / cover no-repeat; }
#case-study .case-study-hero > div:last-child > div { background: color-mix(in srgb, var(--bg-surface) 82%, transparent) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
#case-study .stat-box { background: color-mix(in srgb, var(--bg-surface) 85%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.dark #case-study .case-study-card::before, [data-theme="dark"] #case-study .case-study-card::before { filter: brightness(.7); }

/* Home hero: breathing room above the title; awards strip is a still row */
.hero-section { padding-top: 7.5rem !important; }
.awards-marquee-container { mask-image: none; -webkit-mask-image: none; max-width: 1240px; margin-top: 3.5rem; }
.awards-marquee-track { animation: none !important; width: 100%; flex-wrap: wrap; justify-content: center; gap: 1.5rem 3rem; transform: none !important; }
.awards-marquee-track > .award-item:nth-child(n+7) { display: none; }
#case-study, #case-study * { font-family: var(--font-sans) !important; }
.nav-brand-link .brand-owl-mark { display: none !important; }
/* Home hero: owl beside the headline, group centred */
.hero-section .hero-header-wrap { align-items: center; gap: 0.25rem; }

.hero-section .hero-owl-icon { margin-right: -0.75rem; height: clamp(150px, 13vw, 186px); width: auto; align-self: center; }
.hero-section .hero-title-group { text-align: left; margin: 0; }
.hero-section .hero-header-wrap { display: flex; justify-content: center; text-align: center; }
.hero-section .hero-title, .hero-section .hero-subtitle { text-align: left; margin-left: 0; margin-right: 0; }

/* Site-wide typeface: Inter everywhere */
:root { --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: var(--font-sans); --ro-font-display: var(--font-sans); --ro-font-text: var(--font-sans); --ro-font-mono: var(--font-sans); }
html body, html body *:not(.material-icons), html body svg text { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important; }
/* Sit the RedOwl wordmark on the same baseline and cap height as the title text */
.page-title .title-wordmark{display:inline-block;vertical-align:baseline}
.page-title .title-wordmark .title-wordmark-svg{display:inline-block;vertical-align:baseline;height:0.73em}

/* No divider line under page hero sections */
.cx-hero, .blog-hero, .nr-hero { border-bottom: 0 !important; }
.tc-section.tc-bgart, .ds-latest, .use-case-section { border-top: 0 !important; }
/* Homepage hero: red owl beside a left-aligned headline, group centred */
.hero-section .hero-header-wrap { display: flex; justify-content: center; align-items: center; gap: clamp(1.5rem, 4vw, 4rem); text-align: left; }
.hero-section .hero-title-group, .hero-section .hero-title, .hero-section .hero-subtitle { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
.hero-section .hero-owl-icon { margin: 0; height: clamp(110px, 12vw, 180px); aspect-ratio: 437 / 744; background-color: var(--brand-crimson, #FF0000); -webkit-mask: url(assets/redowl-owl.png) center / contain no-repeat; mask: url(assets/redowl-owl.png) center / contain no-repeat; }
.hero-section .hero-owl-icon:hover { transform: none; }
@media (max-width: 768px) { .hero-section .hero-owl-icon { display: none; } .hero-section .hero-header-wrap, .hero-section .hero-title-group, .hero-section .hero-title, .hero-section .hero-subtitle { text-align: center !important; } }

/* Night mode: stronger contrast. Red text uses a lighter tint so it stays readable on the dark backgrounds; red buttons and shapes keep brand red. */
[data-theme="dark"] {
  --red-text-dark: #FF5A5A;
  --border-subtle: rgba(248, 250, 252, 0.16);
  --border-strong: rgba(248, 250, 252, 0.28);
  --text-secondary: #C9CCC4;
  --text-muted: #A9AEA5;
}
[data-theme="dark"] :is(.crimson-gradient-text, .award-category, .section-chip, .mg-out-label, .step-badge,
  .ro-eyebrow, .ro-page .k, .ro-link, .tc-eyebrow, .tc-card-more, .cx-eyebrow, .nr-eyebrow, .wp-eyebrow, .md-eyebrow, .ds-eyebrow,
  .contact-channel-link, .nav-link-btn, .footer-links a:hover, .wp-inside li::before, .text-crimson, .eyebrow) {
  --brand-crimson: var(--red-text-dark);
}
[data-theme="dark"] :is(.crimson-gradient-text, .award-category, .section-chip, .mg-out-label, .step-badge, .ro-eyebrow, .ro-page .k,
  .tc-eyebrow, .tc-card-more, .cx-eyebrow, .nr-eyebrow, .wp-eyebrow, .md-eyebrow, .contact-channel-link) { color: var(--red-text-dark) !important; -webkit-text-fill-color: currentColor; }
[data-theme="dark"] :is(.nav-link-btn.active, .nav-item.active .nav-link-btn, .nav-item.menu-open .nav-link-btn, .nav-link-btn:hover) { color: var(--red-text-dark) !important; }
[data-theme="dark"] main a:not([class*="btn"]):not([class*="card"]):not([class*="item"]) { text-decoration-color: currentColor; }
[data-theme="dark"] :is(.pillar-link, .result-big-number, .ro-link, .cx-num, .ro-page small, .wp-inside .n, .ro-page .v, .ro-page b) { color: var(--red-text-dark) !important; }
[data-theme="dark"] main :is(p, li, label, small) a:not([class*="btn"]) { color: var(--red-text-dark); }
/* One View of Leakage: every role box takes the size of the tallest (CFO) box */
.stakeholder-panels { display: grid; }
.stakeholder-panels > .stakeholder-panel { display: grid; grid-area: 1 / 1; visibility: hidden; }
.stakeholder-panels > .stakeholder-panel.active { visibility: visible; }
/* Homepage bottom CTA: full red section, no box */
.cta-banner-section { background: #FF0000; color: #F5F5ED; padding: 72px 0; }
.cta-banner-section .cta-banner-box { background: none !important; border: 0 !important; padding: 0 !important; }
.cta-banner-section h2, .cta-banner-section p { color: #F5F5ED !important; }
.cta-banner-section .btn-primary { background: #F5F5ED !important; color: #FF0000 !important; border-color: #F5F5ED !important; }
.cta-banner-section .btn-secondary { background: transparent !important; color: #F5F5ED !important; border: 1px solid #F5F5ED !important; }
.cta-banner-section h2 { background: none !important; -webkit-text-fill-color: #F5F5ED !important; }

/* ===== Site-wide type scale: same heading and subtitle sizes on every page =====
   Page title (H1) · Section heading (H2) · Sub-heading (H3) · Card title (H3 in cards) · Subtitle/lede */
:root {
  --ts-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --ts-h2: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --ts-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
  --ts-card: 1.125rem;
  --ts-lede: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
}
main h1, body > section h1 { font-size: var(--ts-h1) !important; line-height: 1.08 !important; }
main h2, body > section h2 { font-size: var(--ts-h2) !important; line-height: 1.15 !important; }
main h3, body > section h3 { font-size: var(--ts-h3) !important; line-height: 1.3 !important; }
main :is([class*="card"], [class*="tile"], article, .tc-card, .cx-partner, .ds-clue, .wb-card, .pd-card, li) h3,
body > section :is([class*="card"], [class*="tile"], article, li) h3,
main h3.tc-uc-h { font-size: var(--ts-card) !important; }
/* Small label headings stay small */
main .cx-small-h, main h2[class*="eyebrow"], main h3[class*="eyebrow"] { font-size: 0.78rem !important; line-height: 1.3 !important; }
:is(.ro-lede, .md-standfirst, .cx-lede, .tc-lead, .hero-subtitle, .wp-standfirst, .page-subtitle, .blog-hero__lede, .nr-lede,
  .ds-standfirst, .article-header__standfirst, .section-header > p, .ro-page .hero p.lede) { font-size: var(--ts-lede) !important; line-height: 1.6 !important; }
/* Graphics keep their own label sizes */
:is(svg, .tc-hero-graphic, #mg-hero, .hc-ndis, [class*="graphic"]) :is(h2, h3) { font-size: revert-layer; }
/* Footer: wider gap after the logo block; link columns sit flush with the right edge */
@media (min-width: 1025px) {
  .footer-top-grid { grid-template-columns: minmax(260px, 1.4fr) repeat(3, auto) !important; column-gap: 4rem !important; justify-content: space-between; }
  .footer-top-grid > .footer-brand-col { margin-right: 4rem; }
  .footer-top-grid > .footer-nav-col:last-child { justify-self: end; }
}
.footer-social-under { margin-top: 1.25rem; justify-content: flex-start; }
/* Header logo stays still on hover, focus and click */
.nav-brand-link, .nav-brand-link *, .nav-brand-link:hover .brand-svg-logo, .nav-brand-link:active .brand-svg-logo, .nav-brand-link:focus .brand-svg-logo {
  transform: none !important; transition: none !important; animation: none !important; filter: none !important; opacity: 1 !important;
}
.nav-brand-link:active { transform: none !important; }
.page-title .title-wordmark { margin-left: 0.32em; } /* gap ≈ width of letter "e" */
.contact-form-row.cf-full { grid-template-columns: 1fr !important; }
/* One consent tick box style everywhere (matches the Contact form) */
:is(.cf-consent label, .wp-check, .wb-check, .cx-check, label:has(> #modal-terms)) {
  display: flex !important; gap: 0.6rem !important; align-items: flex-start !important;
  font-size: 0.85rem !important; line-height: 1.5 !important; font-weight: 400 !important; color: var(--text-secondary) !important; cursor: pointer; text-transform: none !important; letter-spacing: normal !important;
}
:is(.cf-consent label, .wp-check, .wb-check, .cx-check, label:has(> #modal-terms)) input[type="checkbox"] {
  width: 16px !important; height: 16px !important; margin: 0.2rem 0 0 !important; flex: none !important; accent-color: var(--brand-crimson); padding: 0 !important; appearance: auto !important; -webkit-appearance: checkbox !important;
}
:is(.cf-consent label, .wp-check, .wb-check, .cx-check, label:has(> #modal-terms)) a { color: var(--brand-crimson) !important; font-weight: 600 !important; text-decoration: none; }
.page-title.page-title-plain{font-size:var(--ts-h2,40px)!important}
.sf-step{font-size:var(--ts-card,18px)!important;font-weight:700;margin:1.75rem 0 .75rem;padding-top:1.25rem;border-top:1px solid var(--border-subtle);color:var(--text-primary)}.sf-step:first-of-type{border-top:0;padding-top:0;margin-top:.5rem}
.hero-section, #pillars { display: flow-root; }
.hero-section .hero-tool-grid { margin-bottom: 0 !important; }
.page-hero-section:has(.page-title-plain) { padding-top: 64px !important; }
/* Homepage hero headline: larger than the shared H1 to match the approved design */
body > section.hero-section h1.hero-title, main section.hero-section h1.hero-title { font-size: clamp(2.6rem, 1.2rem + 3.6vw, 5rem) !important; line-height: 1.05 !important; letter-spacing: -0.03em; max-width: none !important; }
@media (min-width: 900px) { .hero-section .hero-title-group { max-width: none !important; } .hero-section h1.hero-title { white-space: normal; text-wrap: balance; } }
.hero-section .hero-owl-icon { height: clamp(120px, 11vw, 200px) !important; }
/* Light mode: white header (all pages), white homepage hero and "Where is your value leaking?" section */
html:not([data-theme="dark"]) .header-nav { background: #FFFFFF !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
html:not([data-theme="dark"]) body:has(> .hero-section) { background: #FFFFFF; }
html:not([data-theme="dark"]) .hero-section, html:not([data-theme="dark"]) #pillars { background: #FFFFFF !important; }
html:not([data-theme="dark"]) body:has(> .hero-section) .ambient-glow-bg { display: none; }
/* Homepage 2nd section: RedOwl Model + graphic + phases on light grey; phase cards white */
html:not([data-theme="dark"]) #redowl-model { background: #F8FAFC !important; }
#redowl-model { padding: 72px 0 !important; margin-top: 0 !important; }
html:not([data-theme="dark"]) #redowl-model .process-step-item { background: #FFFFFF !important; }
@media (max-width: 768px) { #redowl-model { padding: 48px 0 !important; } }
/* Homepage 3rd section: calculator + case study on white */
html:not([data-theme="dark"]) #calculator-section, html:not([data-theme="dark"]) #case-study { background: #FFFFFF !important; }
/* Menu bar: no grey fill behind selected/hovered/open items in light mode (red text marks them) */
html:not([data-theme="dark"]) .header-nav :is(.nav-link-btn, .nav-link):is(:hover, :focus, .active),
html:not([data-theme="dark"]) .header-nav .nav-item:is(.active, .menu-open, :hover) :is(.nav-link-btn, .nav-link) { background: #FFFFFF !important; }
/* Light mode, all non-home pages: top-level sections alternate white then light grey (first section white).
   Closing call-to-action bands keep their own colour; photo backgrounds stay, only the base colour changes. */
html:not([data-theme="dark"]) main:not(.ro-page) > section:not(:is(.tc-final, .md-final, .blog-cta, .cx-cta, .cta-banner-section, [class*="-final"], [class*="-cta"])):nth-of-type(odd) { background-color: #FFFFFF !important; }
html:not([data-theme="dark"]) main:not(.ro-page) > section:not(:is(.tc-final, .md-final, .blog-cta, .cx-cta, .cta-banner-section, [class*="-final"], [class*="-cta"])):nth-of-type(even) { background-color: #F8FAFC !important; }
html:not([data-theme="dark"]) main:not(.ro-page) > section:first-of-type.tc-hero { background-image: none !important; }
/* Industry pages (light mode): dashboards/panels take the opposite colour to their section; no beige */
html:not([data-theme="dark"]) main > section:nth-of-type(even) :is(.tc-dash, .tc-dash th, .tc-metric) { background-color: #FFFFFF !important; }
html:not([data-theme="dark"]) main > section:nth-of-type(odd) :is(.tc-dash, .tc-dash th) { background-color: #F8FAFC !important; }
html:not([data-theme="dark"]) main > section:nth-of-type(odd) .tc-metric { background-color: #F8FAFC !important; }
html:not([data-theme="dark"]) .tc { --tc-panel: #FFFFFF; --tc-gbg: #FFFFFF; --tc-gnode: #FFFFFF; }
html:not([data-theme="dark"]) .g-t-w { fill: #FFFFFF; }
/* Solutions pages: "Works with/across ..." heading on one line on desktop */
@media (min-width: 1024px) { .tc-section:has(> .container > .tl-sys) > .container > h2 { max-width: none !important; white-space: nowrap; font-size: min(var(--ts-h2, 2.5rem), 2.15vw) !important; } }
/* Light mode: header drop-down menus on white */
html:not([data-theme="dark"]) .header-nav .mega-menu,
html:not([data-theme="dark"]) .header-nav .mega-menu :is(.mega-menu-inner, .res-panel, .res-col, .ab-panel, .mega-grid, .mega-col) { background-color: #FFFFFF !important; }

/* Footer white in light mode (matches header) */
html:not([data-theme="dark"]) footer,
html:not([data-theme="dark"]) .site-footer,
html:not([data-theme="dark"]) .ro-footer{background:#FFFFFF !important;background-image:none !important}

/* Mobile: white phone menu (matches desktop menus) and comfortable tap targets */
html:not([data-theme="dark"]) .mobile-nav-drawer { background: #FFFFFF; }
@media (max-width: 768px) {
  :is(.cf-consent label, .wp-check, .wb-check, .cx-check, label:has(> #modal-terms)) a { display: inline-block; padding: 10px 0; margin: -10px 0; }
  :is(.cf-consent label, .wp-check, .wb-check, .cx-check, label:has(> #modal-terms)) input[type="checkbox"] { min-width: 22px; min-height: 22px; }
  main a:not(.btn):not([class*="card"]):not([class*="logo"]) { min-height: 24px; }
  main p a, main li a { padding-block: 6px; }
  .mnd-close { min-width: 44px; min-height: 44px; }
  .rt-exp { min-height: 36px; padding-block: 8px; }
  .contact-channel-link { display: inline-block; padding-block: 8px; }
}

/* Theme toggle removed from header */
.theme-toggle-btn { display: none !important; }

/* Header CTA: Contact Us red box beside Login */
.nav-cta-btn{display:inline-flex;align-items:center;height:40px;padding:0 20px;background:#FF0000;color:#FFFFFF !important;font-weight:600;font-size:15px;border-radius:0.125rem;text-decoration:none;white-space:nowrap;transition:background .15s}
.nav-cta-btn:hover{background:#D90000}
@media (min-width:1025px){.nav-item-contact{display:none !important}}
@media (max-width:1024px){.nav-actions .nav-login-btn{display:none !important}.nav-cta-btn{height:40px;padding:0 16px;font-size:14px}}
@media (min-width:1025px){.nav-actions .nav-login-btn{border-color:transparent !important;background:transparent !important}}
/* Header switches to the phone/tablet menu at 1024px and below */
@media (max-width:1024px){.nav-links-desktop{display:none !important}.mobile-menu-btn{display:flex !important}}
.nav-links-desktop .nav-link-btn{white-space:nowrap}
@media (min-width:1025px) and (max-width:1200px){.nav-links-desktop{gap:0 !important}.nav-links-desktop .nav-link-btn{padding-left:10px !important;padding-right:10px !important}}

/* Friendly form error states (js/form-errors.js?v=1791758577) */
.fe-invalid:not([type=checkbox]){border-color:#FF0000 !important;background-color:#FFF5F5 !important}
input[type=checkbox].fe-invalid{outline:2px solid #FF0000;outline-offset:2px}
.fe-msg{color:#D00000;font-size:13px;line-height:1.4;margin:6px 0 0;font-weight:500}
[data-invalid] .fe-msg{display:none}

/* Thank-you pop-up (js/thank-you.js?v=2) */
.ty-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:rgba(22,28,22,.55);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.ty-overlay.show{opacity:1;visibility:visible}
.ty-card{position:relative;width:100%;max-width:440px;background:#FFFFFF;border-radius:0.125rem;padding:2.5rem 2rem 2rem;text-align:center;transform:translateY(12px) scale(.97);transition:transform .3s ease}
.ty-overlay.show .ty-card{transform:none}
.ty-owl{display:block;width:80px;height:auto;margin:0 auto 1.25rem}
.ty-overlay.show .ty-owl{animation:ty-hoot .7s ease .15s both}
@keyframes ty-hoot{0%{transform:scale(.6) rotate(-8deg);opacity:0}60%{transform:scale(1.08) rotate(4deg);opacity:1}100%{transform:none}}
.ty-title{font-size:1.75rem;font-weight:700;color:#161C16;margin:0 0 .75rem;letter-spacing:-.02em}
.ty-text{font-size:1rem;line-height:1.6;color:#4B5563;margin:0 0 1.75rem}
.ty-btn{background:#FF0000;color:#FFFFFF;border:0;border-radius:0.125rem;padding:.8rem 2.5rem;font:600 1rem Inter,sans-serif;cursor:pointer}
.ty-btn:hover{background:#D90000}
.ty-close{position:absolute;top:.5rem;right:.75rem;background:none;border:0;font-size:1.75rem;line-height:1;color:#8F948C;cursor:pointer;padding:.25rem}
.ty-close:hover{color:#161C16}
html.ty-lock{overflow:hidden}
@media (prefers-reduced-motion:reduce){.ty-overlay,.ty-card{transition:none}.ty-overlay.show .ty-owl{animation:none}}

/* Sending state for form submit buttons (spinner before the thank-you pop-up) */
button.is-sending{position:relative;cursor:progress;opacity:1!important;pointer-events:none;display:inline-flex;align-items:center;justify-content:center;gap:.6rem}
button.is-sending::before{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ro-spin .7s linear infinite;flex:none}
@keyframes ro-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){button.is-sending::before{animation-duration:2s}}

/* Cookie consent banner */
.ck-root{position:fixed;left:0;right:0;bottom:0;z-index:9998;padding:1rem;display:none;pointer-events:none;font-family:Inter,system-ui,sans-serif}
.ck-root.show{display:block}
.ck-banner{pointer-events:auto;max-width:1200px;margin:0 auto;background:#FFFFFF;color:#161C16;border:1px solid #E2E8F0;border-top:3px solid #FF0000;border-radius:.125rem;padding:1.25rem 1.5rem;display:flex;gap:1.5rem;align-items:flex-end;animation:ck-up .3s ease-out}
@keyframes ck-up{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
.ck-main{flex:1;min-width:0}
.ck-title{font-size:1.05rem;font-weight:700;margin:0 0 .35rem;color:#161C16}
.ck-text{font-size:.9rem;line-height:1.5;margin:0;color:#232B22}
.ck-text a{color:#FF0000;text-decoration:underline}
.ck-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.ck-btn{font:inherit;font-size:.875rem;font-weight:600;padding:.7rem 1.1rem;border-radius:.125rem;cursor:pointer;border:1px solid #161C16;background:#FFFFFF;color:#161C16;white-space:nowrap;min-height:44px}
.ck-btn:hover{background:#F1F5F9}
.ck-primary{background:#FF0000;border-color:#FF0000;color:#FFFFFF}
.ck-primary:hover{background:#D90000}
.ck-btn:focus-visible{outline:2px solid #FF0000;outline-offset:2px}
.ck-btn[hidden]{display:none}
.ck-prefs{margin-top:1rem;display:grid;gap:.5rem}
.ck-prefs[hidden]{display:none}
.ck-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem 1rem;background:#F8FAFC;border-radius:.125rem;cursor:pointer}
.ck-row-text{display:flex;flex-direction:column;font-size:.85rem;color:#232B22}
.ck-row-text strong{color:#161C16;font-size:.9rem}
.ck-switch{appearance:none;-webkit-appearance:none;flex:none;width:42px;height:24px;border-radius:999px;background:#CBD5E1;position:relative;cursor:pointer;transition:background .2s;margin:0}
.ck-switch::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#FFFFFF;transition:transform .2s}
.ck-switch:checked{background:#FF0000}
.ck-switch:checked::after{transform:translateX(18px)}
.ck-switch:disabled{opacity:.55;cursor:not-allowed}
.ck-switch:focus-visible{outline:2px solid #FF0000;outline-offset:2px}
@media (max-width:768px){.ck-root{padding:.5rem}.ck-banner{flex-direction:column;align-items:stretch;gap:1rem;padding:1rem}.ck-actions{flex-direction:column-reverse}.ck-btn{width:100%}}

/* Google "Add to preferred sources" (scripts/add-preferred-source.py) */
.gps { margin-top: 1.25rem; }
.gps-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted, #8F948C); margin: 0 0 .5rem; }
.gps-slot { min-height: 44px; }
.article-main .gps { margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle, #E2E8F0); }
.gps-link { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border: 1px solid #DADCE0; border-radius: 20px; background: #FFFFFF; color: #3C4043; font-size: .9rem; text-decoration: none; }
.gps-link:hover { background: #F8FAFC; }
.gps-link:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.hero-section .hero-title-line { display: block; }
/* Hero owl spans from top of heading to bottom of subtitle (desktop) */
@media (min-width: 769px) { .hero-section .hero-header-wrap { align-items: stretch !important; } .hero-section .hero-owl-icon { height: auto !important; align-self: stretch !important; width: auto; flex-shrink: 0; } }