/* ============================================
   DigitalXform v7.2 — Inter Headers
   Professional typography with Inter for headers
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  /* Clean, professional base — warm white, not pink */
  --bg: #fafafa;
  --bg2: #ffffff;
  --card: #ffffff;
  --text: #1a1a2e;
  --muted: #5c5c6d;
  --line: rgba(26, 26, 46, 0.10);

  /* Brand palette — kept your brand colours */
  --indigo: #2d287e;
  --sky: #a0c5eb;
  --magenta: #be48ab;
  --orange: #f06010;

  /* Extended palette — more subtle, corporate */
  --indigo-light: rgba(45, 40, 126, 0.06);
  --accent-subtle: rgba(45, 40, 126, 0.04);

  /* Gradients — your brand gradient for CTAs */
  --accent: linear-gradient(135deg, var(--indigo) 0%, var(--magenta) 50%, var(--orange) 100%);
  --accent-soft: rgba(45, 40, 126, 0.05);
  
  /* Clean professional background — no pink tints */
  --grid-color: rgba(26, 26, 46, 0.025);

  /* Professional shadows — subtle and refined */
  --shadow-sm: 0 1px 3px rgba(26, 26, 46, 0.06);
  --shadow-md: 0 4px 20px rgba(26, 26, 46, 0.08);
  --shadow-lg: 0 12px 40px rgba(26, 26, 46, 0.10);
  --shadow-glow: 0 8px 30px rgba(45, 40, 126, 0.12);

  --radius: 12px;
  --radius-lg: 16px;

  /* Typography — professional, clean, authoritative */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Clean professional background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
  pointer-events: none;
  z-index: -1;
}

a { 
  color: inherit; 
  text-decoration: none; 
  transition: color 0.2s ease;
}

/* Container */
.container {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}

/* ============================================
   Header
   ============================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 160px;
}

.brand img { 
  height: 32px; 
  width: auto; 
  display: block;
}

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav > a,
.dropbtn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  padding: 10px 14px;
  border-radius: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.nav > a:hover,
.dropbtn:hover {
  color: var(--text);
  background: var(--indigo-light);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: white;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn:hover {
  border-color: rgba(45, 40, 126, 0.2);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.btn-primary {
  border: none;
  background: var(--accent);
  color: white;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  box-shadow: 0 12px 45px rgba(45, 40, 126, 0.25);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
}

.btn-ghost:hover {
  background: var(--indigo-light);
}

/* Hamburger */
.hamburger {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 6px;
}

.hamburger svg {
  width: 20px;
  height: 20px;
}

/* Mobile nav */
.mobile-panel {
  display: none;
  border-top: 1px solid var(--line);
  padding: 16px 0 24px;
}

/* Ensure the HTML `hidden` attribute always wins (especially inside flex layouts) */
.mobile-panel[hidden] {
  display: none !important;
}

.mobile-panel .nav {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.mobile-panel .nav > a {
  padding: 14px 16px;
  border-radius: 12px;
}

/* ============================================
   Hero Section
   ============================================ */
.hero {
  padding: 60px 0 24px;
  position: relative;
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
}

/* When the hero only has one content block, make it a true single-column layout.
   Otherwise the single child sits in the first (narrow) track and causes wrapping. */
.hero-grid-single {
  grid-template-columns: 1fr;
  gap: 0;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 6px;
  background: var(--indigo-light);
  border: 1px solid rgba(45, 40, 126, 0.10);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--indigo);
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kicker b {
  color: var(--text);
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--text);
  margin: 0 0 20px;
}

h1 .gradient-text {
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subtitle {
  font-size: 18px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 24px;
  max-width: 74ch;
  text-wrap: balance;
}

/* Wider hero subtitle on the homepage to keep the key proposition to ~1–2 lines */
.subtitle.subtitle-wide {
  max-width: 96ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 16px;
}

/* Statement box with professional accent */
.statement {
  position: relative;
  padding: 20px 24px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.statement::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--accent);
}

.statement .big {
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  margin: 0;
  letter-spacing: 0;
}

.statement .big span {
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.statement .small {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
}

/* Hero card (book) */
.hero-card {
  position: relative;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: block;
}

.hero-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: 10;
}

.hero-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg), 0 20px 40px rgba(45, 40, 126, 0.15);
}

.hero-card:hover::before {
  transform: scaleX(1);
}

.hero-card-inner {
  padding: 20px;
  background: white;
  border-radius: 7px;
}

.book {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
}

/* ============================================
   Sections
   ============================================ */
.section {
  padding: 32px 0;
}

/* About page: widen key lines so they sit on 1–2 lines on desktop */
@media (min-width: 980px) {
  .about-page .hero .subtitle {
    max-width: 110ch;
    font-size: 16.5px;
    text-wrap: balance;
  }
  .about-page .section .lead {
    max-width: 110ch;
    font-size: 16px;
    text-wrap: balance;
  }
}

.section h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.section .lead {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0 0 22px;
  max-width: 82ch;
  text-wrap: pretty;
}

/* Keep key lead line on a single row on larger screens (requested for homepage) */
@media (min-width: 980px) {
  .section .lead.one-line {
    max-width: none;
    white-space: nowrap;
  }
}


/* Layout tightening: avoid double vertical gaps */
.section > *:last-child,
.card > *:last-child { margin-bottom: 0; }

/* Service cards grid */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  position: relative;
  padding: 28px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(45, 40, 126, 0.15);
}

/* Cards with links get the lift and top bar animation */
.card-link {
  cursor: pointer;
}

.card-link:hover {
  transform: translateY(-6px);
}

.card-link:hover::before {
  transform: scaleX(1);
}


/* Cards that need the same hover animation but are not necessarily links */
.card-animate:hover {
  transform: translateY(-6px);
}

.card-animate:hover::before {
  transform: scaleX(1);
}
/* Card icon */
.card-icon {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--indigo-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.card-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--indigo);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--indigo-light);
  font-size: 11px;
  font-weight: 700;
  color: var(--indigo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: 0;
}

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

/* Featured logos */
.featured {
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.6);
}

.featured-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: center;
  margin-bottom: 24px;
}

.featured-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.featured-logo {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--muted);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.featured-logo:hover {
  opacity: 1;
}

/* Split layout */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Profile */
.profile {
  display: flex;
  gap: 16px;
  align-items: center;
}

.profile img {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  object-fit: cover;
  border: 2px solid var(--line);
}

.profile h3 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0 0 4px;
}

.profile .meta {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Form */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.form .full {
  grid-column: 1 / -1;
}

label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 8px;
}

input, textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: white;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: all 0.2s ease;
}

input:focus, textarea:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 4px var(--indigo-light);
}

textarea {
  min-height: 140px;
  resize: vertical;
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}

.form-note {
  color: var(--muted);
  font-size: 13px;
}

/* ============================================
   Footer
   ============================================ */
.footer {
  padding: 48px 0 60px;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.5);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}

.footer-tagline {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 280px;
}

.footer h4 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 16px;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  color: var(--muted);
  font-size: 14px;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: var(--indigo);
}

.socials {
  display: flex;
  gap: 10px;
}

.iconbtn {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  transition: all 0.2s ease;
}

.iconbtn:hover {
  background: var(--indigo-light);
  border-color: var(--indigo);
  color: var(--indigo);
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

/* ============================================
   Dropdowns
   ============================================ */
.dropdown {
  position: relative;
}

.dropbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.chev {
  font-size: 10px;
  opacity: 0.6;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 320px;
  max-width: min(480px, 90vw);
  max-height: 70vh;
  overflow: auto;
  padding: 8px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 50;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
  display: block;
}

.dropdown-menu a {
  display: block;
  padding: 12px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  transition: all 0.15s ease;
}

.dropdown-menu a:hover {
  background: var(--indigo-light);
  color: var(--text);
}

.dropdown-menu .menu-top {
  color: var(--text);
  font-weight: 700;
}

.dropdown-menu .menu-sep {
  height: 1px;
  background: var(--line);
  margin: 8px;
}

/* Mobile dropdowns */
.m-details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: white;
}

.m-details summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 600;
  color: var(--muted);
}

.m-details summary::-webkit-details-marker {
  display: none;
}

.m-sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px 12px;
}

.m-sub a {
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.m-sub a:hover {
  background: var(--indigo-light);
  color: var(--text);
}

.m-sub .m-top {
  color: var(--text);
  font-weight: 600;
}

/* ============================================
   List items (articles, podcasts, case studies)
   ============================================ */
.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 8px;
  background: white;
  border: 1px solid var(--line);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.list-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.list-item:hover {
  border-color: var(--indigo);
  box-shadow: var(--shadow-sm);
  transform: translateY(-4px);
}

.list-item:hover::before {
  transform: scaleX(1);
}

.tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 4px;
  background: var(--indigo-light);
  color: var(--indigo);
  white-space: nowrap;
}

/* ============================================
   Bio / About page
   ============================================ */
.bio-split {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 24px;
  align-items: start;
}

.banner-img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Article body */
.article-body {
  padding: 32px;
}

.article-body p {
  margin: 0 0 16px;
  color: var(--text);
}

.article-body h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  margin: 28px 0 12px;
}

.article-body h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 10px;
}

.article-body ul, .article-body ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.article-body li {
  margin: 8px 0;
}

.article-body a {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.case-pages {
  display: grid;
  gap: 20px;
}

.case-pages img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--line);
}

/* ============================================
   Calendly embed
   ============================================ */
.calendly-embed {
  min-width: 320px;
  height: 700px;
  border: none;
  border-radius: var(--radius);
  margin-top: 20px;
}

@media (max-width: 768px) {
  .calendly-embed {
    height: 800px;
  }
}

/* ============================================
   Animations
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.animate-in {
  animation: fadeInUp 0.6s ease forwards;
}

.animate-delay-1 { animation-delay: 0.1s; opacity: 0; }
.animate-delay-2 { animation-delay: 0.2s; opacity: 0; }
.animate-delay-3 { animation-delay: 0.3s; opacity: 0; }
.animate-delay-4 { animation-delay: 0.4s; opacity: 0; }
.animate-delay-5 { animation-delay: 0.5s; opacity: 0; }

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .hero-card {
    max-width: 400px;
    /*margin: 0 auto;*/
  }
  
  .grid3 {
    grid-template-columns: 1fr;
  }
  
  .split {
    grid-template-columns: 1fr;
  }
  
  .bio-split {
    grid-template-columns: 1fr;
  }
  
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  /* Allow the mobile panel to sit on its own row under the header bar */
  .header-inner {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  /* Hide only the DESKTOP nav in the header bar (the mobile panel has its own nav) */
  .header-inner > .nav {
    display: none;
  }

  /* Ensure the mobile panel nav is visible on small screens */
  .mobile-panel .nav {
    display: flex;
  }
  
  .hamburger {
    display: inline-flex;
  }
  
  .mobile-panel {
    display: block;
    width: 100%;
    flex: 0 0 100%;
  }
  
  .hero {
    padding: 48px 0 24px;
  }
  
  h1 {
    font-size: 36px;
  }
  
  .form {
    grid-template-columns: 1fr;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  
  .header-cta .btn:not(.hamburger) {
    display: none;
  }
}

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


/* Home page spacing tweaks */
.home-page .section { padding: 28px 0; }
@media (max-width: 640px) {
  .home-page .section { padding: 24px 0; }
}
.home-page .hero { padding: 60px 0 20px; }

/* Tighten specific homepage spacing */
.home-page .section .lead { margin-bottom: 18px; }
.home-page .grid3 { margin-top: 0; }

/* Eliminate gaps between scroll sections */
.home-page .scroll-section + .scroll-section {
  padding-top: 0;
}


/* ============================================
   Sticky Hero + Scroll-Over Effect (homepage)
   ============================================ */

/* Hero sticks in place — content scrolls over it */
.home-page .hero {
  position: sticky;
  top: 0;
  z-index: -1;
  padding-top: 90px;
  padding-bottom: 40px;
  background: #fafafa;
}

/* Scroll sections need opaque backgrounds to cover the hero */
.home-page .scroll-section {
  background: #fafafa;
}

.home-page .featured.scroll-section {
  background: #ffffff;
}

/* Enhanced section reveals */
.scroll-section .reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-section .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-section .grid3 .reveal:nth-child(1) { transition-delay: 0s; }
.scroll-section .grid3 .reveal:nth-child(2) { transition-delay: 0.08s; }
.scroll-section .grid3 .reveal:nth-child(3) { transition-delay: 0.16s; }

/* Scroll indicator */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  color: var(--muted);
  opacity: 0.6;
  animation: fadeInUp 0.6s ease forwards;
}

.scroll-indicator span {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.scroll-dot {
  animation: scrollDot 2s ease-in-out infinite;
}

@keyframes scrollDot {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(12px); opacity: 0.3; }
}

.hero.scrolled .scroll-indicator {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* Responsive: disable sticky hero on mobile */
@media (max-width: 768px) {
  .home-page .hero {
    position: relative;
    z-index: auto;
    padding-top: 48px;
  }

  .scroll-indicator {
    display: none;
  }
}

/* ============================================
   Header fit fix v2: compact desktop navigation
   Added for AI Transformation Assessment nav item.
   Keeps the header centred and removes the excessive whitespace introduced by v1.
   ============================================ */
@media (min-width: 769px) {
  .header > .container {
    width: min(1320px, calc(100% - 48px));
  }

  .header-inner {
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
  }

  .brand {
    min-width: 166px;
    flex: 0 0 auto;
  }

  .nav {
    flex: 0 1 auto;
    justify-content: flex-start;
    gap: 2px;
    min-width: 0;
  }

  .nav > a,
  .dropbtn {
    font-size: 13.5px;
    padding: 9px 9px;
  }

  .header-cta {
    flex: 0 0 auto;
    gap: 8px;
  }

  .header-cta .btn {
    font-size: 13.5px;
    padding: 11px 14px;
  }
}

@media (min-width: 769px) and (max-width: 1360px) {
  .header > .container {
    width: min(1320px, calc(100% - 28px));
  }

  .header-inner {
    gap: 12px;
  }

  .brand {
    min-width: 150px;
  }

  .brand img {
    height: 30px;
  }

  .nav > a,
  .dropbtn {
    font-size: 12.75px;
    padding: 8px 6px;
  }

  .header-cta .btn {
    font-size: 12.75px;
    padding: 10px 12px;
  }
}

@media (min-width: 769px) and (max-width: 1180px) {
  .header-cta .btn-ghost {
    display: none;
  }
}

@media (min-width: 769px) and (max-width: 1060px) {
  .header-inner > .nav {
    display: none;
  }

  .hamburger {
    display: inline-flex;
  }

  .header-cta .btn-ghost {
    display: none;
  }
}

/* === DigitalXform AI execution rebrand overrides === */
:root {
  --dx-ink: #0f1020;
  --dx-navy: #17162b;
  --dx-purple: #5b2fa3;
  --dx-orange: #f36b21;
  --dx-teal: #43b7a8;
  --dx-soft: #f4f1fa;
  --dx-warm: #faf9f7;
  --dx-risk: #d64545;
  --dx-amber: #f2a93b;
  --dx-good: #2fae83;
}
html[data-theme="dark"] {
  --bg: #0f1020;
  --surface: #17162b;
  --card: rgba(255,255,255,0.06);
  --text: #f8f7fb;
  --muted: rgba(248,247,251,0.72);
  --line: rgba(255,255,255,0.14);
}
html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
html[data-theme="dark"] .header { background: rgba(15,16,32,0.84); border-bottom-color: rgba(255,255,255,0.12); backdrop-filter: blur(16px); }
html[data-theme="dark"] .card, html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .mobile-panel { background: #17162b; border-color: rgba(255,255,255,0.12); color: var(--text); }
html[data-theme="dark"] .section, html[data-theme="dark"] .featured { background: transparent; }
.theme-toggle { border: 1px solid var(--line); background: var(--card, #fff); color: var(--text); width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 900; box-shadow: 0 8px 22px rgba(15,16,32,.08); }
.theme-toggle:hover { transform: translateY(-1px); }
.home-page .hero { background: radial-gradient(circle at 80% 30%, rgba(91,47,163,.35), transparent 34%), linear-gradient(135deg, #0f1020 0%, #17162b 58%, #271443 100%); color: #fff; }
.home-page .hero h1 { color: #fff; max-width: 940px; font-size: clamp(44px, 7vw, 84px); letter-spacing: -0.055em; }
.home-page .hero .subtitle { color: rgba(255,255,255,.82); max-width: 880px; }
.home-page .hero .kicker { color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.18); }
.home-page .hero .btn:not(.btn-primary) { color: #fff; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.diagnostic-preview { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 28px; align-items: center; padding: clamp(24px, 4vw, 44px); border: 1px solid var(--line); border-radius: 30px; background: linear-gradient(135deg, rgba(91,47,163,.09), rgba(67,183,168,.08)), var(--card, #fff); box-shadow: 0 24px 60px rgba(15,16,32,.10); }
.diagnostic-copy h2 { margin-top: 12px; }
.diagnostic-mock { border-radius: 26px; border: 1px solid var(--line); padding: 24px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,241,250,.92)); box-shadow: 0 18px 40px rgba(15,16,32,.14); }
html[data-theme="dark"] .diagnostic-mock { background: rgba(255,255,255,.06); }
.mock-top { display: flex; justify-content: space-between; align-items: center; gap: 18px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.mock-top strong { font-size: 42px; color: var(--dx-orange); letter-spacing: -.04em; }
.risk-chips { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 20px; }
.risk { border-radius:999px; padding:7px 10px; font-size:12px; font-weight:800; }
.risk.critical { background: rgba(214,69,69,.13); color: var(--dx-risk); }
.risk.high { background: rgba(242,169,59,.16); color: #a86408; }
.risk.medium { background: rgba(67,183,168,.16); color: #16796f; }
.mini-bars { display:grid; gap:12px; }
.mini-bars div { display:grid; grid-template-columns: 150px 1fr; align-items:center; gap:12px; font-size:13px; color:var(--muted); }
.mini-bars b { height:10px; border-radius:999px; display:block; background: linear-gradient(90deg, var(--dx-orange), var(--dx-purple)); position:relative; overflow:hidden; }
.mini-bars b::after { content:""; display:block; width:var(--w); height:100%; background: var(--dx-teal); border-radius:inherit; }
.offer-ladder { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; margin-top:24px; }
.offer-card { position:relative; overflow:hidden; }
.offer-card::before { content:""; position:absolute; inset:0 0 auto 0; height:5px; background: linear-gradient(90deg, var(--dx-purple), var(--dx-orange), var(--dx-teal)); }
.offer-num { font-size: 13px; font-weight: 900; color: var(--dx-orange); letter-spacing: .12em; margin-bottom: 16px; }
.offer-card ul { margin: 14px 0 18px; padding-left: 19px; color: var(--muted); line-height: 1.65; font-size: 14px; }
.dx-footer-grid { grid-template-columns: 1.4fr repeat(4, 1fr); }
@media (max-width: 1100px) { .offer-ladder, .diagnostic-preview { grid-template-columns: 1fr 1fr; } .dx-footer-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 760px) { .offer-ladder, .diagnostic-preview { grid-template-columns: 1fr; } .home-page .hero h1 { font-size: 44px; } .mini-bars div { grid-template-columns: 1fr; gap:6px; } .theme-toggle { width: 38px; height: 38px; } }

/* === Theme hardening patch === */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1020;
  --bg2: #17162b;
  --card: #17162b;
  --surface: #17162b;
  --text: #f8f7fb;
  --muted: rgba(248,247,251,.74);
  --line: rgba(255,255,255,.14);
  --grid-color: rgba(255,255,255,.04);
}
html[data-theme="dark"] body,
html[data-theme="dark"] main,
html[data-theme="dark"] .section { background: var(--bg) !important; color: var(--text) !important; }
html[data-theme="dark"] body::before { background: linear-gradient(180deg, #0f1020 0%, #15142a 100%) !important; }
html[data-theme="dark"] .header { background: rgba(15,16,32,.9) !important; border-bottom-color: rgba(255,255,255,.14) !important; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .featured,
html[data-theme="dark"] .diagnostic-preview,
html[data-theme="dark"] .offer-card,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .mobile-panel { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14) !important; color: var(--text) !important; }
html[data-theme="dark"] .diagnostic-mock { background: rgba(255,255,255,.07) !important; }
html[data-theme="dark"] .footer { background: #0b0c18 !important; border-top-color: rgba(255,255,255,.14) !important; }
.theme-toggle { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card, #fff); color: var(--text); width: 42px; height: 42px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-weight: 900; box-shadow: 0 8px 22px rgba(15,16,32,.08); }
.theme-toggle:hover { transform: translateY(-1px); }

/* === Regression fix v3: theme visibility and stable hero === */
.home-page .hero,
html[data-theme="dark"] .home-page .hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: calc(100vh - 74px);
  background: radial-gradient(circle at 80% 30%, rgba(91,47,163,.35), transparent 34%), linear-gradient(135deg, #0f1020 0%, #17162b 58%, #271443 100%) !important;
  color: #fff !important;
}
.home-page .hero .container {
  opacity: 1 !important;
  visibility: visible !important;
}
.home-page .hero h1,
.home-page .hero .subtitle,
.home-page .hero .kicker,
.home-page .hero .hero-actions {
  opacity: 1 !important;
  visibility: visible !important;
}
.home-page .scroll-section,
.home-page .featured.scroll-section { position: relative; z-index: 2; }
html[data-theme="dark"] .home-page .scroll-section,
html[data-theme="dark"] .home-page .featured.scroll-section {
  background: #0f1020 !important;
}
html[data-theme="dark"] .home-page .hero .btn:not(.btn-primary) {
  color: #fff !important;
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.07) !important;
}

/* === Dark-mode readability and media visibility fix v4 === */
html[data-theme="dark"] .btn:not(.btn-primary),
html[data-theme="dark"] a.btn:not(.btn-primary),
html[data-theme="dark"] button.btn:not(.btn-primary),
html[data-theme="dark"] .card .btn:not(.btn-primary),
html[data-theme="dark"] .footer .btn:not(.btn-primary) {
  background: rgba(255,255,255,.08) !important;
  color: #f8f7fb !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: none;
}
html[data-theme="dark"] .btn:not(.btn-primary):hover,
html[data-theme="dark"] a.btn:not(.btn-primary):hover,
html[data-theme="dark"] button.btn:not(.btn-primary):hover {
  background: rgba(255,255,255,.14) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.34) !important;
}
html[data-theme="dark"] .btn[disabled],
html[data-theme="dark"] .btn.is-disabled,
html[data-theme="dark"] .btn[aria-disabled="true"] {
  background: rgba(255,255,255,.12) !important;
  color: rgba(248,247,251,.72) !important;
  border-color: rgba(255,255,255,.18) !important;
  opacity: 1 !important;
}
html[data-theme="dark"] .list-item,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .profile,
html[data-theme="dark"] .split .card {
  background: rgba(255,255,255,.07) !important;
  color: #f8f7fb !important;
  border-color: rgba(255,255,255,.16) !important;
}
html[data-theme="dark"] .list-item h3,
html[data-theme="dark"] .list-item p,
html[data-theme="dark"] .article-card h3,
html[data-theme="dark"] .case-card h3,
html[data-theme="dark"] .profile h3 {
  color: #f8f7fb !important;
}
html[data-theme="dark"] .tag,
html[data-theme="dark"] .pill,
html[data-theme="dark"] .kicker {
  background: rgba(255,255,255,.09) !important;
  color: #f8f7fb !important;
  border-color: rgba(255,255,255,.16) !important;
}
html[data-theme="dark"] img,
html[data-theme="dark"] .case-pages img,
html[data-theme="dark"] .banner-img,
html[data-theme="dark"] .profile img,
html[data-theme="dark"] .card img {
  opacity: 1 !important;
  visibility: visible !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}
html[data-theme="dark"] .iconbtn,
html[data-theme="dark"] .socials a {
  background: rgba(255,255,255,.10) !important;
  color: #f8f7fb !important;
  border-color: rgba(255,255,255,.18) !important;
}
.home-page .scroll-indicator {
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.home-page .scroll-indicator span { color: rgba(255,255,255,.82) !important; }
.home-page .scroll-dot {
  border-color: rgba(255,255,255,.82) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 8px 24px rgba(0,0,0,.24);
}
html[data-theme="dark"] .home-page .hero .btn.btn-primary,
.home-page .hero .btn.btn-primary {
  background: linear-gradient(135deg, var(--dx-purple,#5b2fa3), #c64db7, var(--dx-orange,#f36b21)) !important;
  color: #fff !important;
}

/* === Regression fix v5: dark-mode media, compact header and readable CTA states === */
@media (min-width: 769px) {
  .header > .container { width: min(1500px, calc(100% - 40px)) !important; }
  .header-inner { display: grid !important; grid-template-columns: auto 1fr auto !important; justify-content: initial !important; gap: 22px !important; padding: 12px 0 !important; }
  .brand { min-width: 0 !important; }
  .brand img { height: 34px !important; }
  .nav { justify-self: end !important; justify-content: flex-end !important; gap: 4px !important; margin-left: auto !important; }
  .nav > a, .dropbtn { padding: 9px 10px !important; }
  .header-cta { justify-self: end !important; }
}
@media (min-width: 769px) and (max-width: 1180px) {
  .header-inner { gap: 12px !important; }
  .nav > a, .dropbtn { padding: 8px 6px !important; font-size: 12.5px !important; }
  .brand img { height: 30px !important; }
}
html[data-theme="dark"] .card-icon { background: rgba(255,255,255,.12) !important; color: #9f8dff !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: inset 0 0 0 1px rgba(143,124,255,.10), 0 10px 26px rgba(0,0,0,.18) !important; }
html[data-theme="dark"] .card-icon svg { stroke: #9f8dff !important; color: #9f8dff !important; opacity: 1 !important; filter: drop-shadow(0 0 9px rgba(143,124,255,.34)); }
html[data-theme="dark"] .profile img, html[data-theme="dark"] img[src*="headshot"], html[data-theme="dark"] img[src*="brian"], html[data-theme="dark"] .report-galapagos-logo, html[data-theme="dark"] img[src*="galapagos"], html[data-theme="dark"] img[src*="logo"] { opacity: 1 !important; visibility: visible !important; filter: none !important; mix-blend-mode: normal !important; }
html[data-theme="dark"] .profile img, html[data-theme="dark"] img[src*="headshot"] { background: #fff !important; border: 1px solid rgba(255,255,255,.25) !important; }
html[data-theme="dark"] .btn, html[data-theme="dark"] a.btn, html[data-theme="dark"] button.btn { color: #f8f7fb !important; }
html[data-theme="dark"] .btn.btn-primary, html[data-theme="dark"] a.btn.btn-primary, html[data-theme="dark"] button.btn.btn-primary { color: #fff !important; }
html[data-theme="dark"] .btn:not(.btn-primary), html[data-theme="dark"] a.btn:not(.btn-primary), html[data-theme="dark"] button.btn:not(.btn-primary) { background: rgba(255,255,255,.10) !important; border-color: rgba(255,255,255,.26) !important; color: #f8f7fb !important; }
html[data-theme="dark"] .btn[disabled], html[data-theme="dark"] .btn.is-disabled, html[data-theme="dark"] .btn[aria-disabled="true"] { background: rgba(255,255,255,.18) !important; color: rgba(248,247,251,.76) !important; border-color: rgba(255,255,255,.24) !important; opacity: 1 !important; }
.home-page .scroll-indicator, .home-page .scroll-dot { opacity: 1 !important; }
.home-page .scroll-dot { border-color: rgba(255,255,255,.9) !important; }
.home-page .scroll-indicator span { color: rgba(255,255,255,.88) !important; }

/* === Fix v6: compact header after menu simplification === */
@media (min-width: 981px) {
  .header > .container {
    width: min(1240px, calc(100% - 72px)) !important;
  }
  .header-inner {
    display: grid !important;
    grid-template-columns: auto auto auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(22px, 3vw, 48px) !important;
    padding: 10px 0 !important;
  }
  .brand {
    min-width: auto !important;
    margin-right: clamp(10px, 1.2vw, 22px) !important;
  }
  .nav {
    justify-self: center !important;
    justify-content: center !important;
    gap: 2px !important;
    margin-left: 0 !important;
    flex: 0 1 auto !important;
  }
  .nav > a, .dropbtn {
    padding: 8px 9px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .header-cta {
    justify-self: center !important;
    gap: 10px !important;
  }
  .header-cta .btn {
    padding: 10px 15px !important;
  }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .header > .container { width: min(1160px, calc(100% - 36px)) !important; }
  .header-inner { gap: 18px !important; }
  .nav > a, .dropbtn { padding: 7px 6px !important; font-size: 12.5px !important; }
}

/* ============================================
   v8 overflow hardening
   ============================================ */
/* Long lead lines must never escape the viewport. The former one-line rule caused
   homepage copy to run off the right edge on desktop. */
.section .lead,
.section .lead.one-line,
.hero .subtitle,
.card p,
.featured p {
  white-space: normal !important;
  overflow-wrap: break-word;
  word-break: normal;
  max-width: min(100%, 86ch);
}

@media (min-width: 980px) {
  .section .lead.one-line {
    white-space: normal !important;
    max-width: min(100%, 110ch) !important;
  }
}

.home-page .scroll-section .lead {
  max-width: min(100%, 112ch) !important;
}

/* Keep cards and content from creating horizontal scroll on any page. */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

.container,
.card,
.featured,
.diagnostic-preview,
.diagnostic-mock {
  min-width: 0;
}

/* === Offer ladder card top accent animation v9 ===
   Mirrors the reality-check card hover behaviour for Diagnose/Review/Rescue/Execute cards. */
.offer-card.card-animate::before,
.offer-card::before {
  height: 5px;
  background: linear-gradient(90deg, var(--dx-purple), var(--dx-orange), var(--dx-teal));
  transform: scaleX(0) !important;
  transform-origin: left;
  transition: transform .42s cubic-bezier(.2,.8,.2,1) !important;
}
.offer-card:nth-child(2)::before { background: linear-gradient(90deg, var(--dx-teal), var(--dx-purple), var(--dx-orange)); }
.offer-card:nth-child(3)::before { background: linear-gradient(90deg, var(--dx-orange), var(--dx-purple), var(--dx-teal)); }
.offer-card:nth-child(4)::before { background: linear-gradient(90deg, var(--dx-purple), var(--dx-teal), var(--dx-orange)); }
.offer-card.card-animate:hover::before,
.offer-card.card-animate:focus-within::before,
.offer-card:hover::before,
.offer-card:focus-within::before {
  transform: scaleX(1) !important;
}
.offer-card.card-animate:hover,
.offer-card.card-animate:focus-within,
.offer-card:hover,
.offer-card:focus-within {
  transform: translateY(-6px);
}
@media (prefers-reduced-motion: reduce) {
  .offer-card,
  .offer-card::before {
    transition: none !important;
  }
}

/* ==========================================================
   Phase 1+2 Visual System Release v12
   Front-end only: premium hero, diagnostic product module,
   offer journey, visual cards, final CTA and dark-mode polish.
   ========================================================== */
:root {
  --phase-card-radius: 22px;
  --phase-card-shadow: 0 24px 70px rgba(15,16,32,.13);
  --phase-card-shadow-hover: 0 34px 90px rgba(15,16,32,.18);
  --phase-gradient: linear-gradient(135deg, var(--dx-purple), #c64db7 52%, var(--dx-orange));
  --phase-teal-gradient: linear-gradient(135deg, rgba(67,183,168,.95), rgba(91,47,163,.92));
}

/* More compact, premium header balance after simplified navigation */
@media (min-width: 981px) {
  .header > .container { width: min(1180px, calc(100% - 64px)) !important; }
  .header-inner { grid-template-columns: auto 1fr auto !important; justify-content: initial !important; gap: 18px !important; }
  .nav { justify-self: end !important; gap: 0 !important; }
  .nav > a, .dropbtn { padding: 8px 8px !important; font-size: 13px !important; }
  .header-cta { justify-self: end !important; gap: 8px !important; }
  .header-cta .btn { padding: 10px 14px !important; }
  .theme-toggle { width: 40px !important; height: 40px !important; }
}

.section-heading-block {
  max-width: 900px;
  margin-bottom: 24px;
}
.section-heading-block h2 {
  font-size: clamp(32px, 4.1vw, 54px);
  letter-spacing: -.045em;
  line-height: 1.04;
  margin-bottom: 14px;
}
.section-heading-block .lead { max-width: 84ch !important; font-size: clamp(17px, 1.45vw, 20px); }

/* Premium hero */
.hero-premium {
  overflow: hidden;
  isolation: isolate;
}
.hero-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(240,96,16,.22), transparent 30%),
    radial-gradient(circle at 82% 30%, rgba(67,183,168,.25), transparent 34%),
    radial-gradient(circle at 58% 86%, rgba(190,72,171,.16), transparent 34%);
  z-index: -2;
}
.hero-bg-orbit {
  position: absolute;
  inset: 8% -15% auto auto;
  width: min(680px, 70vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 60px rgba(255,255,255,.015), inset 0 0 0 140px rgba(255,255,255,.018);
  opacity: .7;
  z-index: -1;
}
.hero-grid-premium {
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .86fr) !important;
  gap: clamp(32px, 5vw, 72px);
  min-height: min(760px, calc(100vh - 94px));
  align-items: center;
}
.hero-copy { max-width: 940px; }
.home-page .hero-premium h1 {
  max-width: 860px;
  font-size: clamp(48px, 7.8vw, 92px) !important;
  line-height: .94;
  letter-spacing: -.072em;
  margin-bottom: 24px;
}
.home-page .hero-premium .subtitle {
  max-width: 780px !important;
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.52;
}
.hero-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.hero-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.84);
  font-size: 13px;
  font-weight: 700;
}
.hero-trust-row span::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--dx-teal);
  box-shadow: 0 0 0 4px rgba(67,183,168,.14);
}
.hero-visual { min-width: 0; }
.premium-glass-card {
  position: relative;
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07));
  box-shadow: 0 34px 100px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(18px) saturate(140%);
}
.diagnostic-console { padding: clamp(20px, 3vw, 30px); color: #fff; transform: rotate(.7deg); }
.diagnostic-console::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(67,183,168,.55), transparent 35%, rgba(240,96,16,.42));
  z-index: -1;
  filter: blur(18px);
  opacity: .55;
}
.console-header,
.console-score-row,
.console-bars div,
.console-next-step {
  position: relative;
  z-index: 1;
}
.console-header { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:22px; }
.console-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.11em; color:rgba(255,255,255,.62); font-weight:900; margin-bottom:4px; }
.console-header strong { display:block; font-size:20px; letter-spacing:-.02em; }
.console-status { border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.09); border-radius:999px; padding:6px 9px; font-size:11px; font-weight:800; color:rgba(255,255,255,.82); white-space:nowrap; }
.console-score-row { display:grid; grid-template-columns: 128px 1fr; gap:18px; align-items:center; margin-bottom:20px; }
.hero-score-ring { position:relative; width:120px; height:120px; display:grid; place-items:center; }
.hero-score-ring svg { position:absolute; inset:0; transform:rotate(-90deg); overflow:visible; }
.hero-score-ring .ring-track { fill:none; stroke:rgba(255,255,255,.14); stroke-width:12; }
.hero-score-ring .ring-progress { fill:none; stroke:url(#unused); stroke:var(--dx-orange); stroke-width:12; stroke-linecap:round; stroke-dasharray:301.59; stroke-dashoffset: calc(301.59 - (301.59 * var(--score)) / 100); filter: drop-shadow(0 0 10px rgba(240,96,16,.42)); }
.hero-score-ring div { position:relative; text-align:center; }
.hero-score-ring strong { display:block; font-size:38px; line-height:1; letter-spacing:-.06em; }
.hero-score-ring span { font-size:12px; color:rgba(255,255,255,.62); font-weight:800; }
.console-archetype span,
.console-next-step span { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.11em; color:rgba(255,255,255,.58); font-weight:900; margin-bottom:5px; }
.console-archetype strong { display:block; font-size:20px; line-height:1.12; }
.console-archetype p,
.console-next-step p { color:rgba(255,255,255,.72); margin:8px 0 0; font-size:14px; line-height:1.45; }
.console-risk-grid { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.console-bars { display:grid; gap:11px; }
.console-bars div { display:grid; grid-template-columns: 132px 1fr 32px; gap:10px; align-items:center; font-size:12px; color:rgba(255,255,255,.75); }
.console-bars b { height:9px; border-radius:999px; background:rgba(255,255,255,.14); overflow:hidden; position:relative; }
.console-bars b::after { content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:inherit; background:linear-gradient(90deg, var(--dx-teal), var(--dx-orange)); }
.console-bars em { font-style:normal; color:rgba(255,255,255,.88); font-weight:900; text-align:right; }
.console-next-step { margin-top:20px; border-top:1px solid rgba(255,255,255,.14); padding-top:16px; }

/* Dashboard and visual content sections */
.reality-section,
.failure-domains-section,
.offer-journey-section,
.premium-diagnostic-section {
  background:
    radial-gradient(circle at 9% 14%, rgba(91,47,163,.06), transparent 26%),
    radial-gradient(circle at 92% 48%, rgba(67,183,168,.07), transparent 28%);
}
.reality-dashboard {
  display:grid;
  grid-template-columns: 1.2fr repeat(3, .9fr);
  gap:16px;
}
.stat-card {
  position:relative;
  min-height:190px;
  padding:24px;
  border-radius: var(--phase-card-radius);
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(250,249,247,.86));
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.stat-card::before,
.failure-card::before,
.final-cta-card::before { height:5px; }
.stat-card span { display:block; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; font-size:11px; font-weight:900; margin-bottom:10px; }
.stat-card strong { display:block; font-size: clamp(38px, 5vw, 66px); line-height:.9; letter-spacing:-.065em; color:var(--dx-purple); margin-bottom:14px; }
.stat-card p { margin:0; color:var(--text); font-weight:650; line-height:1.35; }
.stat-card small { display:block; margin-top:12px; color:var(--muted); }
.stat-card-large { background: linear-gradient(135deg, rgba(91,47,163,.11), rgba(240,96,16,.09)), #fff; }

.diagnostic-preview-premium { border-radius: 34px !important; box-shadow: var(--phase-card-shadow) !important; }
.diagnostic-feature-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; margin:22px 0 24px; }
.diagnostic-feature-grid span {
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  background: rgba(255,255,255,.54);
  font-weight:800;
  color:var(--text);
}
.diagnostic-mock-premium { box-shadow: 0 26px 70px rgba(15,16,32,.16) !important; }
.next-action-note { margin-top:20px; padding:14px 16px; border-radius:16px; background:rgba(67,183,168,.11); border:1px solid rgba(67,183,168,.24); color:var(--text); font-size:14px; line-height:1.45; }

.failure-domain-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:20px; }
.failure-card { border-radius: var(--phase-card-radius); min-height: 280px; }
.failure-icon {
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background: var(--phase-gradient);
  color:#fff;
  font-weight:950;
  margin-bottom:18px;
  box-shadow: 0 16px 34px rgba(91,47,163,.22);
}
.execution-system-strip {
  margin-top:22px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: 28px;
  border:1px solid var(--line);
  background: linear-gradient(135deg, rgba(15,16,32,.96), rgba(23,22,43,.94));
  color:#fff;
  box-shadow: var(--phase-card-shadow);
}
.execution-system-strip h3 { font-size: clamp(22px, 2.5vw, 34px); margin:0 0 18px; letter-spacing:-.035em; }
.execution-steps { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:10px; margin-bottom:20px; }
.execution-steps span { position:relative; border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:13px 12px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.88); font-weight:800; font-size:13px; text-align:center; }
.execution-steps span:not(:last-child)::after { content:"→"; position:absolute; right:-13px; top:50%; transform:translateY(-50%); color:var(--dx-teal); font-weight:900; }
.compact-actions { margin-bottom:0; }

/* Offer journey */
.offer-journey-shell { position:relative; margin-top:24px; }
.journey-line { position:absolute; left:6%; right:6%; top:42px; height:2px; background:linear-gradient(90deg, var(--dx-purple), var(--dx-orange), var(--dx-teal)); opacity:.32; pointer-events:none; }
.offer-ladder-premium { position:relative; z-index:1; }
.offer-ladder-premium .offer-card { border-radius: var(--phase-card-radius); box-shadow: 0 18px 45px rgba(15,16,32,.08); }
.offer-ladder-premium .offer-card:hover { box-shadow: var(--phase-card-shadow-hover); }
.offer-num {
  display:inline-grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:999px;
  background: var(--phase-gradient);
  color:#fff !important;
  letter-spacing:0 !important;
  margin-bottom:18px !important;
  box-shadow: 0 14px 28px rgba(91,47,163,.22);
}

/* Final CTA */
.final-cta-section { padding-top: 26px; }
.final-cta-card {
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap:28px;
  align-items:center;
  padding: clamp(28px, 5vw, 54px);
  border-radius: 34px;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 12% 20%, rgba(240,96,16,.24), transparent 30%),
    radial-gradient(circle at 92% 80%, rgba(67,183,168,.22), transparent 30%),
    linear-gradient(135deg, #0f1020, #17162b 58%, #2b1747);
  color:#fff;
  box-shadow: 0 34px 90px rgba(15,16,32,.24);
}
.final-cta-card .lead { color:rgba(255,255,255,.75); max-width: 72ch !important; margin-bottom:0; }
.final-cta-card h2 { color:#fff; font-size:clamp(30px, 4vw, 56px); letter-spacing:-.052em; line-height:1.02; margin:0 0 14px; }
.final-cta-card .pill { background:rgba(255,255,255,.09) !important; color:#fff !important; border-color:rgba(255,255,255,.16) !important; }
.final-cta-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
.final-cta-card .btn:not(.btn-primary) { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.2); }

/* Unified polish for cards and buttons */
.card { border-radius: 18px; }
.btn { border-radius: 999px; }
.btn-primary { background: var(--phase-gradient) !important; }
.card h3 { letter-spacing: -.018em; }
.pill { border-radius: 999px; }

/* Dark mode is designed, not inverted */
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .diagnostic-feature-grid span,
html[data-theme="dark"] .diagnostic-mock-premium,
html[data-theme="dark"] .diagnostic-preview-premium,
html[data-theme="dark"] .failure-card,
html[data-theme="dark"] .offer-ladder-premium .offer-card {
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(255,255,255,.15) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .stat-card strong { color: #b5a5ff; }
html[data-theme="dark"] .stat-card p,
html[data-theme="dark"] .diagnostic-feature-grid span,
html[data-theme="dark"] .next-action-note { color: var(--text) !important; }
html[data-theme="dark"] .next-action-note { background: rgba(67,183,168,.13); border-color: rgba(67,183,168,.24); }
html[data-theme="dark"] .home-page .scroll-section,
html[data-theme="dark"] .home-page .featured.scroll-section { background: #0f1020 !important; }
html[data-theme="dark"] .reality-section,
html[data-theme="dark"] .failure-domains-section,
html[data-theme="dark"] .offer-journey-section,
html[data-theme="dark"] .premium-diagnostic-section { background: radial-gradient(circle at 8% 18%, rgba(91,47,163,.13), transparent 26%), radial-gradient(circle at 92% 52%, rgba(67,183,168,.10), transparent 28%), #0f1020 !important; }
html[data-theme="dark"] .journey-line { opacity:.55; }

@media (max-width: 1180px) {
  .hero-grid-premium { grid-template-columns: 1fr !important; min-height: auto; padding: 72px 0 58px; }
  .hero-visual { max-width: 720px; }
  .diagnostic-console { transform:none; }
  .reality-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .execution-steps { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .execution-steps span::after { display:none; }
}
@media (max-width: 860px) {
  .failure-domain-grid, .offer-ladder-premium, .reality-dashboard { grid-template-columns: 1fr !important; }
  .journey-line { display:none; }
  .final-cta-card { grid-template-columns: 1fr; }
  .final-cta-actions { justify-content:flex-start; }
  .diagnostic-feature-grid { grid-template-columns:1fr; }
  .console-score-row { grid-template-columns: 1fr; }
  .console-bars div { grid-template-columns: 1fr; gap:6px; }
  .hero-trust-row span { width:100%; justify-content:flex-start; }
}
@media (max-width: 560px) {
  .home-page .hero-premium h1 { font-size: clamp(42px, 13vw, 58px) !important; }
  .diagnostic-console { padding:18px; border-radius:24px; }
  .console-header { flex-direction:column; }
  .hero-score-ring { width:104px; height:104px; }
  .stat-card { min-height: unset; }
  .section-heading-block h2 { font-size: 34px; }
}

/* V13 follow-up polish: agreed hero wording, intentional preview angle, visual failure icons, stat-card top accent */
/* v14: hero diagnostic card tilts clockwise so bottom-left is raised and bottom-right is lowered. */
.hero-premium .hero-copy h1 br { display:block; }
.diagnostic-console {
  transform: rotate(3deg) translateY(6px);
  transform-origin: center center;
  transition: transform .28s ease, box-shadow .28s ease;
}
.hero-visual:hover .diagnostic-console,
.hero-visual:focus-within .diagnostic-console {
  transform: rotate(1.5deg) translateY(0);
}
.failure-icon-svg {
  color: #fff;
  font-size: 0;
}
.failure-icon-svg svg {
  width: 27px;
  height: 27px;
  display: block;
}
html[data-theme="dark"] .failure-icon-svg { color: #fff; }
.stat-card.card-animate {
  position: relative;
  overflow: hidden;
}
.stat-card.card-animate::before {
  content:"";
  position:absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--dx-purple), var(--dx-teal), var(--dx-orange));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
  opacity: 1;
}
.stat-card.card-animate:nth-child(2)::before { background: linear-gradient(90deg, var(--dx-teal), var(--dx-purple), var(--dx-orange)); }
.stat-card.card-animate:nth-child(3)::before { background: linear-gradient(90deg, var(--dx-orange), var(--dx-purple), var(--dx-teal)); }
.stat-card.card-animate:nth-child(4)::before { background: linear-gradient(90deg, var(--dx-purple), var(--dx-orange), var(--dx-teal)); }
.stat-card.card-animate:hover::before,
.stat-card.card-animate:focus-within::before {
  transform: scaleX(1);
}
@media (max-width: 980px) {
  .diagnostic-console { transform: none; }
  .hero-visual:hover .diagnostic-console,
  .hero-visual:focus-within .diagnostic-console { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .diagnostic-console,
  .stat-card.card-animate::before { transition: none; }
}

/* =========================================================
   Phase 3 visual system: Galapagos diagrams, roadmap, motion
   Front-end only. No database or scoring impact.
   ========================================================= */
.phase3-framework-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(111, 53, 200, .12), transparent 34%),
    radial-gradient(circle at 88% 24%, rgba(67, 183, 168, .10), transparent 30%),
    linear-gradient(180deg, rgba(250,249,247,.98), rgba(244,241,250,.48));
}
[data-theme="dark"] .phase3-framework-section {
  background:
    radial-gradient(circle at 12% 20%, rgba(111, 53, 200, .25), transparent 34%),
    radial-gradient(circle at 88% 24%, rgba(67, 183, 168, .16), transparent 30%),
    linear-gradient(180deg, rgba(15,16,32,.98), rgba(24,21,42,.94));
}
.phase3-framework-section::before {
  content: "";
  position: absolute;
  inset: 36px auto auto 50%;
  width: min(720px, 80vw);
  height: min(720px, 80vw);
  transform: translateX(-50%);
  border: 1px solid rgba(91, 47, 163, .12);
  border-radius: 999px;
  pointer-events: none;
}
.phase3-visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 34px;
}
.phase3-map-card,
.phase3-roadmap-card,
.phase3-page-visual {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 28px 80px rgba(15, 16, 32, .10);
}
.phase3-map-card::before,
.phase3-roadmap-card::before,
.phase3-page-visual::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #6f35c8, #48b7a8, #f36b21);
  transform: scaleX(.18);
  transform-origin: left center;
  transition: transform .5s ease;
}
.phase3-map-card:hover::before,
.phase3-map-card:focus-within::before,
.phase3-roadmap-card:hover::before,
.phase3-roadmap-card:focus-within::before,
.phase3-page-visual:hover::before,
.phase3-page-visual:focus-within::before { transform: scaleX(1); }
.phase3-map-card { padding: 28px; min-height: 620px; }
.phase3-card-head { max-width: 650px; }
.phase3-eyebrow {
  display: inline-flex;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--purple);
}
.phase3-card-head h3,
.phase3-roadmap-copy h3,
.phase3-page-copy h3 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 36px); }
.phase3-card-head p,
.phase3-roadmap-copy p,
.phase3-page-copy p { margin: 0; color: var(--muted); line-height: 1.75; }
.island-diagram,
.cycle-diagram {
  position: relative;
  min-height: 380px;
  margin-top: 30px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 50%, rgba(72, 183, 168, .16), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(111, 53, 200, .10), transparent 54%),
    color-mix(in srgb, var(--bg) 55%, transparent);
  border: 1px solid rgba(91, 47, 163, .12);
  overflow: hidden;
}
.island-parent-ring {
  position: absolute;
  inset: 42px 72px;
  border: 1px dashed rgba(91, 47, 163, .28);
  border-radius: 50%;
  animation: phase3Pulse 5s ease-in-out infinite;
}
.island-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #5b2fa3, #43b7a8 52%, #f36b21);
  box-shadow: 0 24px 64px rgba(91,47,163,.28);
}
.island-core span { display: block; font-weight: 900; line-height: 1.08; }
.island-core small { display: block; margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; opacity: .9; }
.island-node {
  position: absolute;
  z-index: 3;
  padding: 10px 13px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid rgba(91,47,163,.18);
  box-shadow: 0 14px 38px rgba(15,16,32,.10);
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
}
.node-leadership { top: 54px; left: 40px; }
.node-users { top: 94px; right: 34px; }
.node-risk { bottom: 50px; left: 38px; }
.node-integration { right: 42px; bottom: 70px; }
.island-bridges { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.island-bridges path { fill: none; stroke: url(#phase3IslandGradient); stroke-width: 2.5; stroke-dasharray: 8 10; opacity: .72; animation: phase3Dash 8s linear infinite; }
.cycle-diagram { background: radial-gradient(circle at 50% 48%, rgba(111,53,200,.18), transparent 24%), color-mix(in srgb, var(--bg) 55%, transparent); }
.cycle-path { position: absolute; inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
.cycle-path path { fill: none; stroke: url(#phase3CycleGradient); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 16 14; animation: phase3Dash 9s linear infinite; }
.cycle-node {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--card);
  border: 1px solid rgba(91,47,163,.18);
  box-shadow: 0 14px 34px rgba(15,16,32,.10);
  min-width: 150px;
}
.cycle-node b { color: var(--orange); font-size: 13px; letter-spacing: .08em; }
.cycle-node span { font-weight: 900; font-size: 13px; }
.cycle-node.n1 { left: 26px; top: 150px; }
.cycle-node.n2 { left: 150px; top: 38px; }
.cycle-node.n3 { right: 42px; top: 88px; }
.cycle-node.n4 { right: 54px; bottom: 74px; }
.cycle-node.n5 { left: 126px; bottom: 38px; }
.cycle-centre {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 76%, transparent));
  border: 1px solid rgba(91,47,163,.20);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 50px rgba(15,16,32,.12);
}
.cycle-centre strong { font-size: 21px; }
.cycle-centre small { max-width: 120px; margin-top: 8px; color: var(--muted); line-height: 1.35; }
.phase3-roadmap-card {
  margin-top: 26px;
  padding: 28px;
  display: grid;
  grid-template-columns: .85fr 1.35fr;
  gap: 26px;
  align-items: center;
}
.phase3-roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.phase3-roadmap::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 28px;
  height: 3px;
  background: linear-gradient(90deg, #6f35c8, #48b7a8, #f36b21);
  border-radius: 999px;
  opacity: .75;
}
.roadmap-step {
  position: relative;
  z-index: 1;
  padding: 54px 18px 20px;
  min-height: 170px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid rgba(91,47,163,.16);
  box-shadow: 0 18px 44px rgba(15,16,32,.07);
}
.roadmap-step::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6f35c8, #48b7a8, #f36b21);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--card) 80%, transparent);
}
.roadmap-step span { display: block; margin-bottom: 8px; color: var(--purple); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.roadmap-step strong { display: block; font-size: 22px; }
.roadmap-step p { margin: 8px 0 0; color: var(--muted); line-height: 1.55; }
.phase3-page-visual { margin-top: 22px; padding: 24px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: center; }
.phase3-mini-system { display: flex; align-items: center; gap: 10px; overflow-x: auto; padding: 12px 4px; }
.mini-system-node { flex: 0 0 auto; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid rgba(91,47,163,.16); font-weight: 900; }
.mini-system-node.featured { color: #fff; background: linear-gradient(135deg, #5b2fa3, #43b7a8, #f36b21); }
.mini-system-line { flex: 0 0 42px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #6f35c8, #48b7a8, #f36b21); }
.phase3-interactive-card { transform-style: preserve-3d; transition: transform .22s ease, box-shadow .22s ease; }
@keyframes phase3Dash { to { stroke-dashoffset: -180; } }
@keyframes phase3Pulse { 0%,100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.035); opacity: .38; } }
@media (prefers-reduced-motion: reduce) {
  .island-bridges path,
  .cycle-path path,
  .island-parent-ring { animation: none !important; }
  .phase3-interactive-card { transition: none; }
}
@media (max-width: 980px) {
  .phase3-visual-grid,
  .phase3-roadmap-card,
  .phase3-page-visual { grid-template-columns: 1fr; }
  .phase3-map-card { min-height: auto; }
  .island-diagram,
  .cycle-diagram { min-height: 420px; }
  .phase3-roadmap { grid-template-columns: 1fr; }
  .phase3-roadmap::before { top: 20px; bottom: 20px; left: 30px; right: auto; width: 3px; height: auto; }
  .roadmap-step { padding-left: 64px; padding-top: 22px; min-height: auto; }
  .roadmap-step::before { left: 18px; top: 24px; }
}
@media (max-width: 640px) {
  .phase3-map-card,
  .phase3-roadmap-card,
  .phase3-page-visual { border-radius: 22px; padding: 20px; }
  .island-diagram,
  .cycle-diagram { min-height: 500px; }
  .island-parent-ring { inset: 80px 20px; }
  .island-core { width: 144px; height: 144px; }
  .island-node { font-size: 12px; padding: 9px 10px; }
  .node-leadership { left: 16px; top: 38px; }
  .node-users { right: 14px; top: 106px; }
  .node-risk { left: 18px; bottom: 84px; }
  .node-integration { right: 14px; bottom: 34px; }
  .cycle-node { min-width: 138px; }
  .cycle-node.n1 { left: 14px; top: 70px; }
  .cycle-node.n2 { left: auto; right: 12px; top: 134px; }
  .cycle-node.n3 { right: 18px; top: 238px; }
  .cycle-node.n4 { right: auto; left: 18px; bottom: 98px; }
  .cycle-node.n5 { left: 50%; transform: translateX(-50%); bottom: 22px; }
  .cycle-centre { width: 142px; height: 142px; }
}

/* V16 hero proof visibility and true circular execution cycle */
@media (min-width: 1181px) {
  .hero-grid-premium {
    min-height: min(690px, calc(100vh - 74px)) !important;
    gap: clamp(26px, 4vw, 58px) !important;
  }
  .home-page .hero-premium h1 {
    font-size: clamp(54px, 6.55vw, 82px) !important;
    line-height: .94 !important;
    margin-bottom: 16px !important;
  }
  .home-page .hero-premium .subtitle {
    font-size: clamp(17px, 1.35vw, 20px) !important;
    line-height: 1.45 !important;
    margin-bottom: 0 !important;
  }
  .hero-trust-row {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .hero-actions {
    margin-top: 0 !important;
    gap: 12px !important;
  }
  .hero-actions .btn {
    padding: 13px 18px !important;
  }
  .hero-premium .scroll-indicator {
    margin-top: 22px !important;
  }
  .diagnostic-console {
    max-width: 560px;
    margin-inline: auto;
  }
}

.cycle-diagram {
  aspect-ratio: 1 / 1;
  min-height: auto !important;
  max-width: 570px;
  margin-left: auto;
  margin-right: auto;
}
.cycle-path {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.cycle-path path,
.cycle-path circle {
  fill: none;
  stroke: url(#phase3CycleGradient);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 16 14;
  animation: phase3Dash 9s linear infinite;
}
.cycle-node.n1 {
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
}
.cycle-node.n2 {
  left: 50%;
  top: 5%;
  transform: translateX(-50%);
}
.cycle-node.n3 {
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
}
.cycle-node.n4 {
  right: 13%;
  bottom: 9%;
}
.cycle-node.n5 {
  left: 13%;
  bottom: 9%;
}
.cycle-centre {
  top: 50% !important;
}
@media (prefers-reduced-motion: reduce) {
  .cycle-path circle { animation: none !important; }
}
@media (max-width: 640px) {
  .cycle-diagram {
    min-height: auto !important;
    aspect-ratio: 1 / 1.28;
    max-width: 100%;
  }
  .cycle-node {
    min-width: 126px !important;
    padding: 10px 11px !important;
  }
  .cycle-node.n1 { left: 50% !important; top: 9% !important; transform: translateX(-50%) !important; }
  .cycle-node.n2 { left: 50% !important; top: 26% !important; transform: translateX(-50%) !important; }
  .cycle-node.n3 { right: auto !important; left: 50% !important; top: auto !important; bottom: 31% !important; transform: translateX(-50%) !important; }
  .cycle-node.n4 { right: 6% !important; bottom: 8% !important; }
  .cycle-node.n5 { left: 6% !important; bottom: 8% !important; transform: none !important; }
  .cycle-centre { width: 132px !important; height: 132px !important; }
}

/* V17 hero headline and execution-cycle fine tuning */
@media (min-width: 1181px) {
  .hero-grid-premium {
    grid-template-columns: minmax(420px, .86fr) minmax(520px, 1.14fr) !important;
    grid-template-areas:
      "title title"
      "copy visual" !important;
    align-items: center !important;
    row-gap: 18px !important;
    column-gap: clamp(34px, 5vw, 82px) !important;
    min-height: min(720px, calc(100vh - 74px)) !important;
    padding-top: clamp(46px, 5vh, 72px) !important;
    padding-bottom: clamp(24px, 3vh, 42px) !important;
  }
  .hero-title-block {
    grid-area: title;
    position: relative;
    z-index: 4;
    max-width: none;
  }
  .hero-title-block .kicker { margin-bottom: 18px; }
  .hero-title-block h1 {
    max-width: 1240px;
    margin: 0;
    color: #fff;
    font-size: clamp(56px, 5.1vw, 84px);
    line-height: .94;
    letter-spacing: -.075em;
  }
  .hero-title-block h1 span { display: block; }
  .hero-title-block .hero-title-line { white-space: nowrap; }
  .hero-copy { grid-area: copy; align-self: start; max-width: 690px; }
  .hero-visual { grid-area: visual; align-self: start; }
  .home-page .hero-premium h1 { font-size: inherit !important; }
  .hero-copy .subtitle { max-width: 680px; }
  .hero-visual .diagnostic-console { margin-top: -10px; }
}
@media (max-width: 1180px) {
  .hero-title-block h1 span { display: block; }
  .hero-title-block .kicker { margin-bottom: 16px; }
}

/* V17 true-circle node contact positions */
@media (min-width: 641px) {
  .cycle-node.n2 {
    left: 50% !important;
    top: 14.5% !important;
    transform: translate(-50%, -50%) !important;
  }
  .cycle-node.n4 {
    right: 12% !important;
    bottom: 16% !important;
    transform: translateY(50%) !important;
  }
  .cycle-node.n5 {
    left: 12% !important;
    bottom: 16% !important;
    transform: translateY(50%) !important;
  }
}

/* V18 hero headline restore and execution-cycle node contact tuning */
@media (min-width: 1181px) {
  .home-page .hero-premium .hero-title-block h1,
  .hero-title-block h1 {
    font-size: clamp(58px, 5.15vw, 88px) !important;
    line-height: .91 !important;
    letter-spacing: -0.078em !important;
    max-width: min(1320px, 100%) !important;
  }
  .home-page .hero-premium .hero-title-block .hero-title-line {
    white-space: nowrap !important;
    display: block !important;
  }
  .home-page .hero-premium .hero-title-block h1 span:not(.hero-title-line) {
    display: block !important;
  }
  .home-page .hero-premium .hero-grid-premium {
    row-gap: clamp(12px, 1.5vh, 20px) !important;
  }
}

@media (min-width: 1181px) and (max-width: 1450px) {
  .home-page .hero-premium .hero-title-block h1,
  .hero-title-block h1 {
    font-size: clamp(52px, 4.55vw, 70px) !important;
    letter-spacing: -0.074em !important;
  }
}

@media (max-width: 1180px) {
  .home-page .hero-premium .hero-title-block h1,
  .hero-title-block h1 {
    font-size: clamp(44px, 8vw, 72px) !important;
    line-height: .94 !important;
  }
  .home-page .hero-premium .hero-title-block .hero-title-line {
    white-space: normal !important;
  }
}

@media (min-width: 641px) {
  .cycle-node.n2 {
    left: 50% !important;
    top: 21% !important;
    transform: translate(-50%, -50%) !important;
  }
  .cycle-node.n4 {
    right: 12% !important;
    bottom: 22% !important;
    transform: translateY(50%) !important;
  }
  .cycle-node.n5 {
    left: 12% !important;
    bottom: 22% !important;
    transform: translateY(50%) !important;
  }
}

/* V19 hero spacing and protected-execution symmetry fix */
@media (min-width: 1181px) {
  .home-page .hero-premium .hero-grid-premium {
    padding-top: clamp(18px, 2.8vh, 34px) !important;
    padding-bottom: clamp(18px, 2.5vh, 34px) !important;
    min-height: min(690px, calc(100vh - 74px)) !important;
    row-gap: clamp(8px, 1.1vh, 16px) !important;
  }
  .hero-title-block .kicker {
    margin-bottom: 14px !important;
  }
  .home-page .hero-premium .hero-title-block h1,
  .hero-title-block h1 {
    margin-top: 0 !important;
  }
  .hero-visual {
    justify-self: end !important;
  }
  .hero-visual .diagnostic-console {
    margin-top: -28px !important;
    transform: rotate(3deg) translate(28px, -8px) !important;
  }
  .hero-visual:hover .diagnostic-console,
  .hero-visual:focus-within .diagnostic-console {
    transform: rotate(1.5deg) translate(24px, -14px) !important;
  }
}

@media (min-width: 641px) {
  .island-diagram {
    min-height: 380px;
  }
  .island-parent-ring {
    inset: 44px 86px !important;
    border-radius: 50% !important;
  }
  .island-core {
    width: 168px;
    height: 168px;
  }
  .node-leadership,
  .node-users,
  .node-risk,
  .node-integration {
    min-width: 128px;
    text-align: center;
    justify-content: center;
  }
  .node-leadership {
    top: 72px !important;
    left: 56px !important;
  }
  .node-users {
    top: 72px !important;
    right: 56px !important;
  }
  .node-risk {
    bottom: 72px !important;
    left: 56px !important;
  }
  .node-integration {
    bottom: 72px !important;
    right: 56px !important;
  }
  .island-bridges path {
    stroke-width: 3 !important;
    stroke-dasharray: 9 10 !important;
    opacity: .78 !important;
  }
}

/* V20 hero spacing and diagnostic card clearance fix */
@media (min-width: 1181px) {
  .home-page .hero-premium {
    padding-top: clamp(18px, 2.2vh, 26px) !important;
    padding-bottom: clamp(14px, 2vh, 28px) !important;
  }
  .home-page .hero-premium .hero-grid-premium {
    padding-top: 0 !important;
    padding-bottom: clamp(14px, 2vh, 28px) !important;
    min-height: min(650px, calc(100vh - 74px)) !important;
    row-gap: clamp(4px, .8vh, 10px) !important;
  }
  .hero-title-block .kicker {
    margin-bottom: 12px !important;
  }
  .home-page .hero-premium .hero-title-block h1,
  .hero-title-block h1 {
    max-width: min(1240px, 100%) !important;
    margin-bottom: 0 !important;
  }
  .hero-visual .diagnostic-console {
    margin-top: 18px !important;
    transform: rotate(3deg) translate(34px, 18px) !important;
  }
  .hero-visual:hover .diagnostic-console,
  .hero-visual:focus-within .diagnostic-console {
    transform: rotate(1.5deg) translate(30px, 12px) !important;
  }
}

@media (min-width: 1181px) and (max-width: 1450px) {
  .hero-visual .diagnostic-console {
    margin-top: 24px !important;
    transform: rotate(3deg) translate(22px, 24px) !important;
  }
  .hero-visual:hover .diagnostic-console,
  .hero-visual:focus-within .diagnostic-console {
    transform: rotate(1.5deg) translate(18px, 18px) !important;
  }
}

/* === Fix v21: increase desktop top navigation font size === */
@media (min-width: 1200px) {
  .header > .container {
    width: min(1240px, calc(100% - 56px)) !important;
  }

  .nav {
    gap: 6px !important;
  }

  .nav > a,
  .dropbtn {
    font-size: 14.5px !important;
    font-weight: 750 !important;
    letter-spacing: -0.01em !important;
    padding: 8px 10px !important;
  }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .nav > a,
  .dropbtn {
    font-size: 13.5px !important;
    font-weight: 750 !important;
    letter-spacing: -0.01em !important;
    padding: 7px 7px !important;
  }
}

/* === Fix v22: mobile-safe Phase 3 Galapagos diagrams ===
   Front-end only. Keeps desktop diagrams intact while giving small screens
   true square geometry, readable labels and connector endpoints that line up. */
@media (max-width: 760px) {
  .phase3-visual-grid {
    gap: 18px !important;
  }

  .phase3-map-card {
    padding: 18px !important;
  }

  .phase3-card-head h3,
  .phase3-roadmap-copy h3,
  .phase3-page-copy h3 {
    font-size: clamp(24px, 8vw, 34px) !important;
    line-height: 1.12 !important;
  }

  .phase3-card-head p,
  .phase3-roadmap-copy p,
  .phase3-page-copy p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .island-diagram,
  .cycle-diagram {
    width: 100% !important;
    max-width: 440px !important;
    margin: 24px auto 0 !important;
    min-height: auto !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 22px !important;
    overflow: visible !important;
  }

  .island-parent-ring {
    inset: 13% 10% !important;
    width: auto !important;
    height: auto !important;
    border-radius: 50% !important;
  }

  .island-core {
    width: clamp(118px, 34vw, 150px) !important;
    height: clamp(118px, 34vw, 150px) !important;
    left: 50% !important;
    top: 50% !important;
  }

  .island-core span {
    font-size: clamp(15px, 4.2vw, 19px) !important;
  }

  .island-core small {
    font-size: 9.5px !important;
  }

  .island-node {
    font-size: clamp(10.5px, 3vw, 12px) !important;
    padding: 8px 10px !important;
    min-width: 104px !important;
    max-width: 132px !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }

  .node-leadership,
  .node-users,
  .node-risk,
  .node-integration {
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
  }

  .node-leadership { left: 23.5% !important; top: 26.7% !important; }
  .node-users { left: 76.5% !important; top: 26.7% !important; }
  .node-risk { left: 23.5% !important; top: 73.3% !important; }
  .node-integration { left: 76.5% !important; top: 73.3% !important; }

  .island-bridges {
    inset: 0 !important;
  }

  .island-bridges path {
    stroke-width: 3 !important;
    stroke-dasharray: 8 10 !important;
    opacity: .78 !important;
  }

  .cycle-diagram {
    max-width: 460px !important;
  }

  .cycle-path {
    inset: 9% !important;
    width: 82% !important;
    height: 82% !important;
  }

  .cycle-node {
    min-width: 0 !important;
    width: max-content !important;
    max-width: 42% !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    gap: 6px !important;
    line-height: 1.1 !important;
  }

  .cycle-node b {
    font-size: 11px !important;
  }

  .cycle-node span {
    font-size: clamp(10.5px, 3vw, 12px) !important;
    white-space: normal !important;
  }

  .cycle-node.n1,
  .cycle-node.n2,
  .cycle-node.n3,
  .cycle-node.n4,
  .cycle-node.n5 {
    right: auto !important;
    bottom: auto !important;
  }

  .cycle-node.n1 {
    left: 7% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .cycle-node.n2 {
    left: 50% !important;
    top: 12% !important;
    transform: translate(-50%, -50%) !important;
  }

  .cycle-node.n3 {
    left: 93% !important;
    top: 50% !important;
    transform: translate(-100%, -50%) !important;
  }

  .cycle-node.n4 {
    left: 70% !important;
    top: 84% !important;
    transform: translate(-50%, -50%) !important;
  }

  .cycle-node.n5 {
    left: 30% !important;
    top: 84% !important;
    transform: translate(-50%, -50%) !important;
  }

  .cycle-centre {
    width: clamp(118px, 34vw, 150px) !important;
    height: clamp(118px, 34vw, 150px) !important;
    left: 50% !important;
    top: 50% !important;
  }

  .cycle-centre strong {
    font-size: clamp(18px, 5vw, 24px) !important;
  }

  .cycle-centre small {
    font-size: clamp(11px, 3vw, 13px) !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 420px) {
  .island-diagram,
  .cycle-diagram {
    max-width: 340px !important;
  }

  .island-node {
    min-width: 92px !important;
    max-width: 112px !important;
    padding: 7px 8px !important;
  }

  .cycle-node {
    max-width: 46% !important;
    padding: 7px 8px !important;
  }

  .cycle-path {
    inset: 11% !important;
    width: 78% !important;
    height: 78% !important;
  }
}

/* V23: Galapagos AI Execution Pathway visual */
.execution-pathway-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 4vw, 54px);
  border-radius: 34px;
  background: radial-gradient(circle at 18% 18%, rgba(243,107,33,.18), transparent 28%), radial-gradient(circle at 78% 18%, rgba(67,183,168,.14), transparent 30%), linear-gradient(135deg, #141326 0%, #202034 58%, #171529 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 90px rgba(15,16,32,.28);
}
.execution-pathway-panel::before {
  content:"";
  position:absolute;
  inset: 18px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.06);
  pointer-events:none;
}
.pathway-copy { max-width: 760px; position: relative; z-index: 2; }
.pathway-copy h3 {
  color: #fff;
  font-size: clamp(30px, 4vw, 54px);
  line-height: .98;
  letter-spacing: -.055em;
  margin: 12px 0 14px;
}
.pathway-copy p {
  color: rgba(255,255,255,.76);
  max-width: 660px;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.65;
  margin: 0;
}
.pathway-pill { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.12); }
.pathway-map {
  --path-y: 58%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  margin: clamp(30px, 4vw, 52px) 0 26px;
  z-index: 2;
}
.pathway-line {
  position: absolute;
  left: 7%;
  right: 7%;
  top: var(--path-y);
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--dx-purple), var(--dx-teal), var(--dx-orange));
  opacity: .9;
  box-shadow: 0 0 24px rgba(67,183,168,.26);
}
.pathway-line::before,
.pathway-line::after {
  content:"";
  position:absolute;
  top:50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  transform: translateY(-50%);
  box-shadow: 0 0 0 7px rgba(255,255,255,.12);
}
.pathway-line::before { left: -2px; }
.pathway-line::after { right: -2px; }
.pathway-node {
  position: relative;
  min-height: 220px;
  padding: 22px 18px 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
  transition: transform .28s ease, border-color .28s ease, background .28s ease;
}
.pathway-node::before {
  content:"";
  position:absolute;
  left:50%;
  top: var(--path-y);
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dx-teal), var(--dx-orange));
  border: 3px solid rgba(255,255,255,.92);
  box-shadow: 0 0 0 9px rgba(255,255,255,.12);
  z-index: 3;
}
.pathway-node:hover,
.pathway-node:focus-within {
  transform: translateY(-8px);
  background: rgba(255,255,255,.105);
  border-color: rgba(255,255,255,.26);
}
.pathway-number {
  display:inline-flex;
  color: var(--dx-orange);
  font-weight: 950;
  letter-spacing: .08em;
  margin-bottom: 18px;
}
.pathway-icon {
  display:flex;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  align-items:center;
  justify-content:center;
  color: #fff;
  background: linear-gradient(135deg, rgba(109,59,212,.9), rgba(243,107,33,.9));
  box-shadow: 0 14px 34px rgba(109,59,212,.26);
  margin-bottom: 16px;
}
.pathway-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pathway-node h4 { color: #fff; margin: 0 0 9px; font-size: 16px; letter-spacing: -.02em; }
.pathway-node p { margin:0; color: rgba(255,255,255,.68); font-size: 13.5px; line-height: 1.55; }
.pathway-model {
  position:absolute;
  left:50%;
  top: calc(var(--path-y) + 94px);
  transform: translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width: 220px;
  min-height: 92px;
  padding: 18px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #17162b;
  box-shadow: 0 22px 70px rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.65);
  z-index: 5;
  text-align:center;
}
.pathway-model strong { font-size: 19px; letter-spacing: -.03em; }
.pathway-model span { color: rgba(23,22,43,.65); font-weight: 750; font-size: 12px; margin-top: 4px; }
.pathway-actions { position: relative; z-index: 6; margin-top: clamp(28px, 4vw, 76px); }
.pathway-actions .btn-ghost { display:none; }
[data-theme="dark"] .execution-pathway-panel { box-shadow: 0 34px 100px rgba(0,0,0,.42); }
@media (prefers-reduced-motion: no-preference) {
  .pathway-line { background-size: 180% 100%; animation: pathwayFlow 6s linear infinite; }
  .pathway-node { animation: pathwayRise .7s ease both; animation-delay: calc(var(--step) * 90ms); }
}
@keyframes pathwayFlow { 0% { background-position: 0 50%; } 100% { background-position: 180% 50%; } }
@keyframes pathwayRise { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform: translateY(0); } }
@media (max-width: 980px) {
  .pathway-map {
    display:flex;
    flex-direction:column;
    gap: 16px;
    margin: 28px 0 22px;
  }
  .pathway-line {
    left: 28px;
    right: auto;
    top: 20px;
    bottom: 20px;
    width: 4px;
    height: auto;
    transform:none;
    background: linear-gradient(180deg, var(--dx-purple), var(--dx-teal), var(--dx-orange));
  }
  .pathway-line::before,
  .pathway-line::after { left: 50%; right:auto; top: 0; transform: translate(-50%, -50%); }
  .pathway-line::after { top: auto; bottom: 0; transform: translate(-50%, 50%); }
  .pathway-node {
    min-height: 0;
    padding: 18px 18px 18px 72px;
  }
  .pathway-node::before {
    left: 28px;
    top: 30px;
    transform: translate(-50%, -50%);
  }
  .pathway-icon { position:absolute; left: 48px; top: 17px; width: 0; height: 0; opacity: 0; overflow:hidden; }
  .pathway-number { margin-bottom: 8px; }
  .pathway-model {
    position:relative;
    left:auto;
    top:auto;
    transform:none;
    width: auto;
    min-height: 0;
    border-radius: 22px;
    margin: 6px 0 0 72px;
  }
  .pathway-actions { margin-top: 24px; }
}
@media (max-width: 640px) {
  .execution-pathway-panel { padding: 26px 18px; border-radius: 26px; }
  .pathway-copy h3 { font-size: 34px; }
  .pathway-actions { flex-direction: column; align-items: stretch; }
  .pathway-actions .btn { width: 100%; justify-content:center; }
}

/* V24: robust Galapagos pathway rendering fix
   Prevent inline SVG icons from rendering as oversized black fills on mobile/print
   and provide a simple, stable vertical timeline below tablet width. */
.execution-pathway-panel .pathway-icon svg,
.execution-pathway-panel .pathway-icon svg * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  max-width: 24px !important;
  max-height: 24px !important;
}
.execution-pathway-panel .pathway-icon svg {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  overflow: visible !important;
}

@media (max-width: 980px) {
  .execution-pathway-panel {
    overflow: hidden !important;
  }

  .execution-pathway-panel .pathway-map {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin: 28px 0 22px !important;
    padding-left: 34px !important;
  }

  .execution-pathway-panel .pathway-line {
    left: 18px !important;
    right: auto !important;
    top: 8px !important;
    bottom: 8px !important;
    width: 4px !important;
    height: auto !important;
    transform: none !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, var(--dx-purple), var(--dx-teal), var(--dx-orange)) !important;
  }

  .execution-pathway-panel .pathway-line::before,
  .execution-pathway-panel .pathway-line::after {
    width: 10px !important;
    height: 10px !important;
    left: 50% !important;
    right: auto !important;
    top: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  .execution-pathway-panel .pathway-line::after {
    top: auto !important;
    bottom: 0 !important;
    transform: translate(-50%, 50%) !important;
  }

  .execution-pathway-panel .pathway-node {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    column-gap: 14px !important;
    min-height: 0 !important;
    padding: 18px 18px !important;
    border-radius: 22px !important;
    overflow: visible !important;
  }

  .execution-pathway-panel .pathway-node::before {
    left: -34px !important;
    top: 28px !important;
    width: 16px !important;
    height: 16px !important;
    transform: translate(-50%, -50%) !important;
  }

  .execution-pathway-panel .pathway-icon,
  .execution-pathway-panel .pathway-icon svg,
  .execution-pathway-panel .pathway-icon svg * {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  .execution-pathway-panel .pathway-number {
    grid-row: 1 / span 2 !important;
    align-self: start !important;
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    margin: 0 !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--dx-purple), var(--dx-orange)) !important;
    box-shadow: 0 14px 34px rgba(109,59,212,.24) !important;
  }

  .execution-pathway-panel .pathway-node h4 {
    margin: 0 0 6px !important;
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  .execution-pathway-panel .pathway-node p {
    grid-column: 2 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .execution-pathway-panel .pathway-model {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
    min-height: 0 !important;
    margin: 2px 0 0 !important;
    padding: 18px !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 640px) {
  .execution-pathway-panel .pathway-copy h3 {
    font-size: clamp(28px, 9vw, 38px) !important;
    line-height: 1.02 !important;
  }
  .execution-pathway-panel .pathway-copy p {
    font-size: 15.5px !important;
  }
}

/* V25: Galapagos pathway collision and wording refinement */
@media (min-width: 981px) {
  .execution-pathway-panel .pathway-node::before {
    display: none !important;
    content: none !important;
  }
  .execution-pathway-panel .pathway-map {
    align-items: stretch !important;
    padding-bottom: 0 !important;
  }
  .execution-pathway-panel .pathway-line {
    top: 50% !important;
    z-index: 0 !important;
    opacity: .72 !important;
  }
  .execution-pathway-panel .pathway-node {
    z-index: 2 !important;
  }
  .execution-pathway-panel .pathway-model {
    position: relative !important;
    grid-column: 1 / -1 !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 22px auto 0 !important;
    width: min(340px, 100%) !important;
    min-height: 86px !important;
    z-index: 4 !important;
  }
  .execution-pathway-panel .pathway-actions {
    margin-top: 24px !important;
    clear: both !important;
  }
}
@media (max-width: 980px) {
  .execution-pathway-panel .pathway-model { margin-top: 14px !important; }
  .execution-pathway-panel .pathway-actions { margin-top: 22px !important; }
}

/* V26: Align Galapagos pathway icons next to stage numbers on desktop */
@media (min-width: 981px) {
  .execution-pathway-panel .pathway-node {
    display: grid !important;
    grid-template-columns: auto auto 1fr !important;
    grid-template-rows: auto auto 1fr !important;
    column-gap: 12px !important;
    align-content: start !important;
  }

  .execution-pathway-panel .pathway-number {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    margin: 0 0 22px 0 !important;
    line-height: 1 !important;
  }

  .execution-pathway-panel .pathway-icon {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 14px !important;
    margin: 0 0 22px 0 !important;
  }

  .execution-pathway-panel .pathway-icon svg {
    width: 22px !important;
    height: 22px !important;
  }

  .execution-pathway-panel .pathway-node h4 {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .execution-pathway-panel .pathway-node p {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
  }
}

/* V28 hero diagnostic preview safe positioning
   Front-end only: moves the diagnostic card right/up and reduces top dead space without touching logic. */
@media (min-width: 1181px) {
  .home-page .hero-premium {
    padding-top: clamp(8px, 1.4vh, 18px) !important;
    padding-bottom: clamp(30px, 4vh, 52px) !important;
  }

  .home-page .hero-premium .hero-grid-premium {
    min-height: min(640px, calc(100vh - 74px)) !important;
    row-gap: clamp(2px, .65vh, 8px) !important;
    overflow: visible !important;
  }

  .hero-title-block .kicker {
    margin-bottom: 10px !important;
  }

  .hero-visual {
    justify-self: end !important;
    transform: translate(64px, -34px) !important;
    max-width: min(690px, 45vw) !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .hero-visual .diagnostic-console {
    margin-top: 0 !important;
    transform: rotate(3deg) !important;
  }

  .hero-visual:hover .diagnostic-console,
  .hero-visual:focus-within .diagnostic-console {
    transform: rotate(1.5deg) translateY(-4px) !important;
  }
}

@media (min-width: 1181px) and (max-width: 1450px) {
  .hero-visual {
    transform: translate(38px, -26px) !important;
    max-width: min(640px, 44vw) !important;
  }

  .hero-visual .diagnostic-console {
    transform: rotate(3deg) scale(.96) !important;
    transform-origin: top right !important;
  }

  .hero-visual:hover .diagnostic-console,
  .hero-visual:focus-within .diagnostic-console {
    transform: rotate(1.5deg) scale(.96) translateY(-4px) !important;
  }
}

/* SEO content architecture landing pages */
.seo-landing-hero .container{max-width:980px}.diagnostic-preview-panel{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:28px;border:1px solid var(--border);border-radius:28px;background:linear-gradient(135deg,rgba(91,47,163,.10),rgba(67,183,168,.08));box-shadow:var(--shadow-soft)}@media(max-width:780px){.diagnostic-preview-panel{grid-template-columns:1fr}.seo-landing-hero .subtitle{font-size:1.05rem}}

/* ============================================
   V31 Galapagos by DigitalXform homepage redesign
   Brand hierarchy, journey and visual system
   ============================================ */
.dx31-home {
  --dx31-ink: #111226;
  --dx31-panel: #17142e;
  --dx31-panel-2: #241b46;
  --dx31-line: rgba(255,255,255,.16);
  --dx31-glow: rgba(190,72,171,.28);
}
.dx31-header .header-inner { padding: 14px 0; }
.dx31-brand { min-width: 250px; }
.dx31-brand img { height: 34px; }
.dx31-brand-lockup { display:flex; flex-direction:column; line-height:1.05; border-left:1px solid rgba(26,26,46,.16); padding-left:12px; }
.dx31-brand-lockup strong { font-family:var(--font-display); font-size:15px; letter-spacing:-.02em; color:var(--text); }
.dx31-brand-lockup em { font-style:normal; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.dx31-nav { gap: 4px; }
.dx31-nav > a { font-size: 14px; padding-inline: 12px; }
.dx31-hero { position:relative; overflow:hidden; padding: clamp(28px, 3vw, 44px) 0 clamp(28px, 3vw, 44px); color:#fff; background: radial-gradient(circle at 22% 18%, rgba(190,72,171,.42), transparent 32%), radial-gradient(circle at 84% 22%, rgba(240,96,16,.24), transparent 30%), linear-gradient(135deg, #111226 0%, #21183d 50%, #321f55 100%); }
.dx31-hero::before { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, rgba(0,0,0,.92), transparent 84%); }
.dx31-orbit { position:absolute; border:1px solid rgba(255,255,255,.12); border-radius:999px; filter:blur(.1px); pointer-events:none; }
.dx31-orbit-one { width:620px; height:620px; right:-170px; top:-180px; }
.dx31-orbit-two { width:380px; height:380px; left:-120px; bottom:-170px; }
.dx31-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns: 1.03fr .97fr; gap: clamp(36px, 7vw, 86px); align-items:center; }
.dx31-kicker { display:inline-flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); margin-bottom:24px; }
.dx31-kicker span { font-size:13px; font-weight:800; letter-spacing:.01em; }
.dx31-kicker i { font-style:normal; font-size:12px; color:rgba(255,255,255,.72); }
.dx31-hero h1 { margin:0; max-width: 760px; color:#fff; font-family:var(--font-display); font-size: clamp(48px, 6.9vw, 92px); line-height:.94; letter-spacing:-.075em; }
.dx31-hero-lead { max-width: 680px; margin:26px 0 0; font-size: clamp(18px, 2vw, 22px); line-height:1.45; color:rgba(255,255,255,.76); }
.dx31-hero-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:30px; }
.dx31-dark-btn { background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.18); }
.dx31-dark-btn:hover { background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.28); }
.dx31-proof-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.dx31-proof-row span { color:rgba(255,255,255,.78); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.055); padding:8px 10px; border-radius:999px; font-size:13px; font-weight:700; }
.dx31-hero-panel { position:relative; padding: clamp(22px, 3vw, 34px); border-radius:30px; border:1px solid rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.07)); box-shadow: 0 34px 90px rgba(0,0,0,.36), 0 0 80px var(--dx31-glow); backdrop-filter: blur(22px) saturate(160%); }
.dx31-hero-panel::after { content:""; position:absolute; inset:14px; border-radius:24px; border:1px solid rgba(255,255,255,.07); pointer-events:none; }
.dx31-panel-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; color:rgba(255,255,255,.74); font-size:13px; text-transform:uppercase; letter-spacing:.08em; }
.dx31-panel-top strong { color:#fff; text-transform:none; letter-spacing:0; font-size:15px; }
.dx31-score-system { display:grid; grid-template-columns: 150px 1fr; gap:24px; align-items:center; }
.dx31-score-ring { width:148px; height:148px; border-radius:50%; display:grid; place-items:center; background: conic-gradient(from 210deg, #f06010 0 62%, rgba(255,255,255,.13) 62% 100%); box-shadow: inset 0 0 0 14px rgba(17,18,38,.78), 0 16px 40px rgba(0,0,0,.26); }
.dx31-score-ring strong { font-family:var(--font-display); font-size:46px; line-height:1; letter-spacing:-.08em; }
.dx31-score-ring span { margin-left:3px; color:rgba(255,255,255,.66); font-weight:700; }
.dx31-panel-label { margin:0 0 6px; color:rgba(255,255,255,.62); text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:800; }
.dx31-score-system h3 { color:#fff; margin:0 0 8px; font-size:26px; letter-spacing:-.04em; line-height:1.05; }
.dx31-score-system p:not(.dx31-panel-label) { margin:0; color:rgba(255,255,255,.72); }
.dx31-signal-stack { display:grid; gap:12px; margin-top:28px; }
.dx31-signal-stack div { display:grid; grid-template-columns: 138px 1fr 36px; align-items:center; gap:12px; font-size:13px; color:rgba(255,255,255,.76); }
.dx31-signal-stack b { height:8px; border-radius:999px; background:linear-gradient(90deg, #be48ab, #f06010); position:relative; overflow:hidden; }
.dx31-signal-stack b::after { content:""; display:block; width:calc(100% - var(--w)); height:100%; margin-left:var(--w); background:rgba(255,255,255,.16); }
.dx31-signal-stack em { font-style:normal; color:#fff; font-weight:800; }
.dx31-next-card { margin-top:24px; padding:16px; border-radius:18px; background:rgba(17,18,38,.54); border:1px solid rgba(255,255,255,.13); }
.dx31-next-card span { display:block; color:rgba(255,255,255,.62); text-transform:uppercase; letter-spacing:.08em; font-size:11px; font-weight:800; margin-bottom:5px; }
.dx31-next-card strong { color:#fff; font-size:15px; }
.dx31-section-head { max-width: 820px; margin-bottom: 28px; }
.dx31-section-head h2, .dx31-system-copy h2, .dx31-diagnostic-card h2, .dx31-proof-card h2, .dx31-final-card h2 { letter-spacing:-.055em; line-height:1.02; }
.dx31-journey-grid, .dx31-offer-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:18px; }
.dx31-journey-card, .dx31-offer-card, .dx31-diagnostic-card, .dx31-archetype-card, .dx31-proof-card, .dx31-final-card { border:1px solid var(--line); background:rgba(255,255,255,.86); border-radius:26px; box-shadow:0 18px 48px rgba(26,26,46,.08); }
.dx31-journey-card { padding:28px; }
.dx31-journey-card span, .dx31-offer-card span, .dx31-final-card > span { display:inline-flex; margin-bottom:18px; color:#f06010; font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:12px; }
.dx31-journey-card h3, .dx31-offer-card h3 { margin:0 0 10px; font-size:24px; letter-spacing:-.04em; line-height:1.08; }
.dx31-journey-card p, .dx31-offer-card p { margin:0; color:var(--muted); }
.dx31-system { background:linear-gradient(180deg, rgba(45,40,126,.055), rgba(255,255,255,0)); }
.dx31-system-grid { display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 7vw, 80px); align-items:center; }
.dx31-check-list { list-style:none; padding:0; margin:24px 0; display:grid; gap:14px; }
.dx31-check-list li { padding-left:28px; position:relative; color:var(--muted); }
.dx31-check-list li::before { content:""; position:absolute; left:0; top:.45em; width:14px; height:14px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 5px rgba(45,40,126,.08); }
.dx31-loop-map { position:relative; min-height:520px; border-radius:34px; overflow:hidden; background: radial-gradient(circle at 50% 50%, rgba(190,72,171,.22), transparent 34%), linear-gradient(135deg, #15162d, #2b1a46); border:1px solid rgba(255,255,255,.12); box-shadow:0 28px 70px rgba(26,26,46,.22); }
.dx31-loop-map::before { content:""; position:absolute; inset:54px; border:1px dashed rgba(255,255,255,.22); border-radius:50%; }
.dx31-loop-map::after { content:""; position:absolute; inset:112px; border:1px solid rgba(255,255,255,.12); border-radius:50%; }
.dx31-loop-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:176px; height:176px; display:grid; place-items:center; text-align:center; border-radius:50%; background:linear-gradient(135deg,#be48ab,#f06010); color:#fff; font-family:var(--font-display); font-weight:800; line-height:1.08; box-shadow:0 24px 60px rgba(0,0,0,.28); }
.dx31-loop-node { position:absolute; padding:11px 16px; border-radius:999px; color:#fff; font-weight:800; font-size:13px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); backdrop-filter: blur(12px); }
.dx31-loop-node.n1 { left:47%; top:42px; } .dx31-loop-node.n2 { right:58px; top:139px; } .dx31-loop-node.n3 { right:72px; bottom:132px; } .dx31-loop-node.n4 { left:45%; bottom:42px; } .dx31-loop-node.n5 { left:52px; bottom:132px; } .dx31-loop-node.n6 { left:64px; top:139px; }
.dx31-diagnostic-grid { display:grid; grid-template-columns: 1.15fr .85fr; gap:22px; align-items:stretch; }
.dx31-diagnostic-card, .dx31-archetype-card { padding: clamp(26px, 4vw, 42px); }
.dx31-output-grid, .dx31-mini-matrix { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; margin:24px 0; }
.dx31-output-grid span, .dx31-mini-matrix span { padding:13px 14px; border-radius:16px; background:rgba(45,40,126,.06); color:var(--text); font-weight:800; font-size:14px; }
.dx31-archetype-card { background:linear-gradient(135deg,#17142e,#362054); color:#fff; }
.dx31-archetype-card h3 { margin:8px 0 10px; color:#fff; font-size:34px; letter-spacing:-.05em; }
.dx31-archetype-card p { color:rgba(255,255,255,.72); }
.dx31-mini-matrix span { color:#fff; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.11); }
.dx31-mini-matrix .hot { box-shadow:inset 0 -3px 0 #f06010; } .dx31-mini-matrix .warn { box-shadow:inset 0 -3px 0 #be48ab; } .dx31-mini-matrix .cool { box-shadow:inset 0 -3px 0 #a0c5eb; }
.dx31-offer-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.dx31-offer-card { padding:24px; transition:transform .2s ease, box-shadow .2s ease; }
.dx31-offer-card:hover { transform:translateY(-4px); box-shadow:0 24px 64px rgba(26,26,46,.12); }
.dx31-offer-card a { display:inline-flex; margin-top:18px; color:var(--indigo); font-weight:900; }
.dx31-proof-card, .dx31-final-card { padding: clamp(28px, 5vw, 56px); }
.dx31-proof-card { display:grid; grid-template-columns: 1fr auto; gap:24px; align-items:center; }
.dx31-proof-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end; }
.dx31-final-card { text-align:center; color:#fff; background: radial-gradient(circle at 20% 10%, rgba(240,96,16,.22), transparent 30%), linear-gradient(135deg,#111226,#2c1a49); border-color:rgba(255,255,255,.13); }
.dx31-final-card h2 { color:#fff; margin:0 auto 14px; max-width:850px; font-size:clamp(34px, 5vw, 68px); }
.dx31-final-card p { max-width:720px; margin:0 auto; color:rgba(255,255,255,.74); font-size:18px; }
.dx31-final-card .dx31-hero-actions { justify-content:center; }
html[data-theme="dark"] .dx31-journey-card, html[data-theme="dark"] .dx31-offer-card, html[data-theme="dark"] .dx31-diagnostic-card, html[data-theme="dark"] .dx31-proof-card { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1); }
html[data-theme="dark"] .dx31-output-grid span { background:rgba(255,255,255,.08); color:#fff; }
html[data-theme="dark"] .dx31-brand-lockup { border-color:rgba(255,255,255,.18); }
@media (max-width: 1100px) {
  .dx31-nav { display:none; }
  .dx31-hero-grid, .dx31-system-grid, .dx31-diagnostic-grid, .dx31-proof-card { grid-template-columns:1fr; }
  .dx31-offer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .dx31-hero-panel { max-width:720px; }
}
@media (max-width: 760px) {
  .dx31-brand { min-width:0; }
  .dx31-brand-lockup { display:none; }
  .dx31-hero { padding-top:28px; }
  .dx31-hero h1 { font-size: clamp(44px, 14vw, 62px); }
  .dx31-kicker { align-items:flex-start; flex-direction:column; border-radius:18px; }
  .dx31-score-system, .dx31-signal-stack div, .dx31-journey-grid, .dx31-offer-grid, .dx31-output-grid, .dx31-mini-matrix { grid-template-columns:1fr; }
  .dx31-score-ring { width:130px; height:130px; }
  .dx31-loop-map { min-height:430px; }
  .dx31-loop-node { font-size:12px; padding:9px 11px; }
  .dx31-loop-node.n1 { left:38%; } .dx31-loop-node.n2 { right:18px; } .dx31-loop-node.n3 { right:20px; } .dx31-loop-node.n4 { left:38%; } .dx31-loop-node.n5 { left:18px; } .dx31-loop-node.n6 { left:18px; }
}

/* === Galapagos brand hierarchy header patch v32 === */
.header .brand.galapagos-brand {
  display: inline-flex !important;
  align-items: center !important;
  min-width: 0 !important;
  line-height: 1 !important;
}
.header .brand.galapagos-brand img.galapagos-brand-logo {
  display: block !important;
  width: clamp(185px, 17vw, 275px) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 54px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.dx31-brand-kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex-wrap: wrap !important;
}
.dx31-brand-kicker img {
  width: clamp(104px, 10vw, 150px) !important;
  height: auto !important;
  max-height: 28px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.dx31-brand-kicker span,
.dx31-brand-kicker i {
  white-space: nowrap !important;
}

@media (min-width: 1181px) {
  .header > .container {
    width: min(1520px, calc(100% - 32px)) !important;
  }
  .header-inner {
    display: grid !important;
    grid-template-columns: minmax(190px, auto) 1fr auto !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 8px 0 !important;
  }
  .header-inner > .nav {
    display: flex !important;
    justify-self: end !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }
  .header-inner > .nav > a,
  .header-inner > .nav .dropbtn {
    padding: 8px 8px !important;
    font-size: clamp(12px, .82vw, 14px) !important;
    white-space: nowrap !important;
  }
  .header-cta {
    gap: 8px !important;
    justify-self: end !important;
  }
  .header-cta .btn-primary {
    padding: 10px 15px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 1320px) and (min-width: 1181px) {
  .header .brand.galapagos-brand img.galapagos-brand-logo {
    width: 190px !important;
  }
  .header-inner > .nav > a,
  .header-inner > .nav .dropbtn {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 12px !important;
  }
  .header-cta .btn-primary {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }
}

@media (max-width: 1180px) {
  .header .brand.galapagos-brand img.galapagos-brand-logo {
    width: clamp(175px, 44vw, 245px) !important;
    max-height: 52px !important;
  }
}

/* === Galapagos by DigitalXform header correction v33 === */
.header .brand.galapagos-brand.galapagos-brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  max-width: 430px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
.header .brand.galapagos-brand.galapagos-brand-lockup img.galapagos-brand-logo {
  display: block !important;
  width: clamp(138px, 14vw, 210px) !important;
  max-width: 210px !important;
  height: auto !important;
  max-height: 46px !important;
  object-fit: contain !important;
}
.header .brand.galapagos-brand.galapagos-brand-lockup .brand-by {
  display: inline-block !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--muted) !important;
  margin-top: 2px !important;
}
.header .brand.galapagos-brand.galapagos-brand-lockup img.digitalxform-brand-logo {
  display: block !important;
  width: clamp(94px, 8vw, 138px) !important;
  max-width: 138px !important;
  height: auto !important;
  max-height: 30px !important;
  object-fit: contain !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.dx31-brand-kicker img { display: none !important; }
.dx31-brand-kicker { gap: 12px !important; }
.dx31-brand-kicker span { font-weight: 900 !important; }
@media (max-width: 1180px) {
  .header .brand.galapagos-brand.galapagos-brand-lockup {
    max-width: min(58vw, 360px) !important;
    gap: 8px !important;
  }
  .header .brand.galapagos-brand.galapagos-brand-lockup img.galapagos-brand-logo {
    width: clamp(118px, 26vw, 170px) !important;
  }
  .header .brand.galapagos-brand.galapagos-brand-lockup img.digitalxform-brand-logo {
    width: clamp(76px, 17vw, 112px) !important;
  }
  .header .brand.galapagos-brand.galapagos-brand-lockup .brand-by { font-size: 10px !important; }
}
@media (max-width: 620px) {
  .header .brand.galapagos-brand.galapagos-brand-lockup img.digitalxform-brand-logo,
  .header .brand.galapagos-brand.galapagos-brand-lockup .brand-by {
    display: none !important;
  }
  .header .brand.galapagos-brand.galapagos-brand-lockup img.galapagos-brand-logo {
    width: clamp(132px, 48vw, 178px) !important;
  }
}

/* === Header brand balance hotfix v34 ===
   Keep Galapagos as the dominant brand and reduce DigitalXform to an endorsement mark. */
.header .brand.galapagos-brand.galapagos-brand-lockup {
  gap: 8px !important;
  max-width: 385px !important;
}
.header .brand.galapagos-brand.galapagos-brand-lockup img.digitalxform-brand-logo {
  width: clamp(74px, 5.8vw, 104px) !important;
  max-width: 104px !important;
  max-height: 22px !important;
}
.header .brand.galapagos-brand.galapagos-brand-lockup .brand-by {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
  color: rgba(26,26,46,.72) !important;
}
@media (max-width: 1180px) {
  .header .brand.galapagos-brand.galapagos-brand-lockup {
    max-width: min(54vw, 330px) !important;
    gap: 7px !important;
  }
  .header .brand.galapagos-brand.galapagos-brand-lockup img.digitalxform-brand-logo {
    width: clamp(64px, 13vw, 90px) !important;
    max-width: 90px !important;
    max-height: 20px !important;
  }
}


/* === Header hard override v35 ===
   Force DigitalXform to read as a small endorsement inside the Galapagos by DigitalXform lockup.
   This deliberately appears at the end of the stylesheet to beat earlier .brand img rules. */
.header a.brand.galapagos-brand.galapagos-brand-lockup {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 360px !important;
}
.header a.brand.galapagos-brand.galapagos-brand-lockup img.galapagos-brand-logo {
  width: clamp(150px, 14vw, 215px) !important;
  max-width: 215px !important;
  height: auto !important;
  max-height: 52px !important;
}
.header a.brand.galapagos-brand.galapagos-brand-lockup .brand-by {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: rgba(26,26,46,.74) !important;
  margin: 0 2px !important;
}
.header a.brand.galapagos-brand.galapagos-brand-lockup img.digitalxform-brand-logo,
.header .brand img.digitalxform-brand-logo,
img.digitalxform-brand-logo {
  height: 18px !important;
  width: auto !important;
  max-width: 88px !important;
  max-height: 18px !important;
  object-fit: contain !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
@media (max-width: 1180px) {
  .header a.brand.galapagos-brand.galapagos-brand-lockup {
    max-width: min(52vw, 320px) !important;
    gap: 7px !important;
  }
  .header a.brand.galapagos-brand.galapagos-brand-lockup img.galapagos-brand-logo {
    width: clamp(130px, 24vw, 185px) !important;
  }
  .header a.brand.galapagos-brand.galapagos-brand-lockup img.digitalxform-brand-logo,
  .header .brand img.digitalxform-brand-logo,
  img.digitalxform-brand-logo {
    height: 16px !important;
    max-height: 16px !important;
    max-width: 78px !important;
  }
}
@media (max-width: 760px) {
  .header a.brand.galapagos-brand.galapagos-brand-lockup img.digitalxform-brand-logo,
  .header a.brand.galapagos-brand.galapagos-brand-lockup .brand-by {
    display: none !important;
  }
}

/* === Header logo refinement v36 ===
   Uses Galapagos mark without the small "framework" text and increases the primary brand size. */
.header a.brand.galapagos-brand.galapagos-brand-lockup {
  max-width: 455px !important;
  gap: 9px !important;
}
.header a.brand.galapagos-brand.galapagos-brand-lockup img.galapagos-brand-logo {
  width: clamp(215px, 17vw, 285px) !important;
  max-width: 285px !important;
  max-height: 64px !important;
  height: auto !important;
  object-fit: contain !important;
}
@media (max-width: 1180px) {
  .header a.brand.galapagos-brand.galapagos-brand-lockup {
    max-width: min(60vw, 375px) !important;
  }
  .header a.brand.galapagos-brand.galapagos-brand-lockup img.galapagos-brand-logo {
    width: clamp(170px, 32vw, 240px) !important;
    max-width: 240px !important;
    max-height: 58px !important;
  }
}
@media (max-width: 760px) {
  .header a.brand.galapagos-brand.galapagos-brand-lockup img.galapagos-brand-logo {
    width: clamp(160px, 52vw, 215px) !important;
    max-width: 215px !important;
  }
}

/* ==========================================================
   V41 Execution Signal hero animation
   Front-end only. Animates the visible hero diagnostic panel,
   score ring and signal bars. No PHP or assessment logic changes.
   ========================================================== */
.dx41-execution-signal-panel {
  position: relative !important;
  overflow: visible !important;
  transform-origin: center center !important;
  will-change: transform, opacity, filter !important;
}

.dx41-execution-signal-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, rgba(67,183,168,.45), transparent 35%, rgba(240,96,16,.36)) !important;
  filter: blur(20px) !important;
  opacity: .38 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

html.dx41-execution-signal-ready .dx41-execution-signal-panel {
  animation: dx41-panel-settle 950ms cubic-bezier(.16,1,.3,1) 80ms both !important;
}

html.dx41-execution-signal-ready .dx41-execution-signal-panel::before {
  animation: dx41-panel-glow 2200ms ease-out 780ms infinite !important;
}

.dx31-score-ring.dx41-score-ring {
  position: relative !important;
  width: 148px !important;
  height: 148px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: radial-gradient(circle at center, rgba(255,255,255,.12) 0 48%, rgba(255,255,255,.035) 49% 58%, transparent 59%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 34px rgba(240,96,16,.18),
    0 16px 40px rgba(0,0,0,.26) !important;
  overflow: visible !important;
}

.dx31-score-ring.dx41-score-ring svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: rotate(-90deg) !important;
  overflow: visible !important;
}

.dx31-score-ring.dx41-score-ring circle {
  fill: none !important;
  stroke-width: 7 !important;
}

.dx31-score-ring.dx41-score-ring .dx41-score-bg {
  stroke: rgba(255,255,255,.13) !important;
}

.dx31-score-ring.dx41-score-ring .dx41-score-fg {
  stroke: url(#dx41ScoreGradient) !important;
  stroke-linecap: round !important;
  stroke-dasharray: 402 !important;
  stroke-dashoffset: 402 !important;
  filter: drop-shadow(0 0 10px rgba(240,96,16,.42)) !important;
}

html.dx41-execution-signal-ready .dx31-score-ring.dx41-score-ring .dx41-score-fg {
  animation: dx41-score-ring-draw 1700ms cubic-bezier(.16,1,.3,1) 420ms forwards !important;
}

.dx31-score-ring.dx41-score-ring .dx41-score-ticks {
  stroke: rgba(255,255,255,.34) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 1 19 !important;
  opacity: 0 !important;
}

html.dx41-execution-signal-ready .dx31-score-ring.dx41-score-ring .dx41-score-ticks {
  animation: dx41-score-ticks-in 900ms ease 260ms forwards !important;
}

.dx31-score-ring.dx41-score-ring::after {
  content: "" !important;
  position: absolute !important;
  inset: 13px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(240,96,16,.22) !important;
  opacity: 0 !important;
  transform: scale(.86) !important;
  pointer-events: none !important;
}

html.dx41-execution-signal-ready .dx31-score-ring.dx41-score-ring::after {
  animation: dx41-score-pulse 2100ms ease-out 1800ms infinite !important;
}

.dx41-score-value {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
}

.dx41-score-value strong {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: 50px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -.075em !important;
  color: #fff !important;
}

.dx41-score-value span {
  display: block !important;
  margin-top: 5px !important;
  margin-left: 0 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.58) !important;
}

.dx31-signal-stack b {
  background: rgba(255,255,255,.14) !important;
}

.dx31-signal-stack b::after {
  content: "" !important;
  display: block !important;
  height: 100% !important;
  width: 0 !important;
  margin-left: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #43b7a8, #be48ab, #f06010) !important;
}

html.dx41-execution-signal-ready .dx31-signal-stack div:nth-child(1) b::after { animation: dx41-signal-bar-grow 1200ms cubic-bezier(.16,1,.3,1) 1050ms forwards !important; }
html.dx41-execution-signal-ready .dx31-signal-stack div:nth-child(2) b::after { animation: dx41-signal-bar-grow 1200ms cubic-bezier(.16,1,.3,1) 1190ms forwards !important; }
html.dx41-execution-signal-ready .dx31-signal-stack div:nth-child(3) b::after { animation: dx41-signal-bar-grow 1200ms cubic-bezier(.16,1,.3,1) 1330ms forwards !important; }
html.dx41-execution-signal-ready .dx31-signal-stack div:nth-child(4) b::after { animation: dx41-signal-bar-grow 1200ms cubic-bezier(.16,1,.3,1) 1470ms forwards !important; }

@keyframes dx41-panel-settle {
  0% { opacity: 0; transform: translateY(22px) rotate(2.25deg) scale(.975); filter: blur(5px); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); filter: blur(0); }
}

@keyframes dx41-panel-glow {
  0% { opacity: .42; transform: scale(.985); }
  72%, 100% { opacity: .16; transform: scale(1.035); }
}

@keyframes dx41-score-ring-draw {
  to { stroke-dashoffset: 153; }
}

@keyframes dx41-score-ticks-in {
  to { opacity: .42; }
}

@keyframes dx41-score-pulse {
  0% { opacity: .30; transform: scale(.86); }
  78%, 100% { opacity: 0; transform: scale(1.14); }
}

@keyframes dx41-signal-bar-grow {
  to { width: var(--w); }
}

@media (max-width: 760px) {
  .dx31-score-ring.dx41-score-ring {
    width: 130px !important;
    height: 130px !important;
  }

  .dx41-score-value strong {
    font-size: 44px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dx41-execution-signal-panel,
  .dx41-execution-signal-panel::before,
  .dx31-score-ring.dx41-score-ring .dx41-score-fg,
  .dx31-score-ring.dx41-score-ring .dx41-score-ticks,
  .dx31-score-ring.dx41-score-ring::after,
  .dx31-signal-stack b::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================
   V44 Execution Signal animation
   Uses direct browser animation API for reliability; CSS only defines
   animated states and visuals. Option A: runs once and settles.
   ?animtest=1 adds a replay button for verification.
   ========================================================== */
@property --dx44-bar-width {
  syntax: '<length-percentage>';
  inherits: false;
  initial-value: 0%;
}

.dx44-execution-signal-panel {
  position: relative !important;
  overflow: hidden !important;
  transform-origin: center center !important;
  will-change: transform, opacity, filter !important;
}

.dx44-execution-signal-panel::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, rgba(67,183,168,.44), transparent 35%, rgba(240,96,16,.34)) !important;
  filter: blur(20px) !important;
  opacity: .30 !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.dx44-panel-sheen {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -35% !important;
  width: 42% !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,.16) 42%, rgba(255,255,255,.30) 49%, rgba(255,255,255,.12) 56%, transparent 76%) !important;
  z-index: 3 !important;
}

.dx31-score-ring.dx44-score-ring,
.dx44-score-ring {
  position: relative !important;
  width: 148px !important;
  height: 148px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  background: radial-gradient(circle at center, rgba(255,255,255,.12) 0 48%, rgba(255,255,255,.035) 49% 58%, transparent 59%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.12),
    0 0 34px rgba(240,96,16,.18),
    0 16px 40px rgba(0,0,0,.26) !important;
  overflow: visible !important;
}

.dx44-score-ring svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: rotate(-90deg) !important;
  overflow: visible !important;
}

.dx44-score-ring circle {
  fill: none !important;
  stroke-width: 7 !important;
}

.dx44-score-ring .dx44-score-bg {
  stroke: rgba(255,255,255,.13) !important;
}

.dx44-score-ring .dx44-score-fg {
  stroke: url(#dx44ScoreGradient) !important;
  stroke-linecap: round !important;
  stroke-dasharray: 402 !important;
  stroke-dashoffset: 153;
  filter: drop-shadow(0 0 10px rgba(240,96,16,.42)) !important;
}

.dx44-score-ring .dx44-score-ticks {
  stroke: rgba(255,255,255,.34) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 1 19 !important;
  opacity: .42;
}

.dx44-score-value {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  text-align: center !important;
}

.dx44-score-value strong {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: 50px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -.075em !important;
  color: #fff !important;
}

.dx44-score-value span {
  display: block !important;
  margin-top: 5px !important;
  margin-left: 0 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.58) !important;
}

.dx31-signal-stack b {
  background: rgba(255,255,255,.14) !important;
  overflow: hidden !important;
}

.dx31-signal-stack b::after {
  content: "" !important;
  display: block !important;
  height: 100% !important;
  width: var(--dx44-bar-width, var(--w)) !important;
  margin-left: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #43b7a8, #be48ab, #f06010) !important;
}

.dx44-animation-test-control {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 99999 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 13px 18px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #5b2fa3, #be48ab 55%, #f06010) !important;
  box-shadow: 0 14px 42px rgba(15,16,32,.28) !important;
  font-family: var(--font-body) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}

@media (max-width: 760px) {
  .dx31-score-ring.dx44-score-ring,
  .dx44-score-ring {
    width: 130px !important;
    height: 130px !important;
  }

  .dx44-score-value strong {
    font-size: 44px !important;
  }
}

/* ==========================================================
   V45 signal bar fix
   Bars now use real child spans so replay animation can target them directly.
   ========================================================== */
.dx31-signal-stack b {
  position: relative !important;
  display: block !important;
  background: rgba(255,255,255,.14) !important;
  overflow: hidden !important;
}

.dx31-signal-stack b::after {
  content: none !important;
  display: none !important;
}

.dx45-bar-fill {
  display: block !important;
  height: 100% !important;
  width: 100%;
  border-radius: inherit !important;
  background: linear-gradient(90deg, #43b7a8, #be48ab, #f06010) !important;
  transform: translateZ(0);
  will-change: width;
}


/* ==========================================================
   V47 brand and theme contrast regression fixes
   - Uses transparent registered Galapagos mark in the header.
   - Keeps endorsement text/logo readable in dark mode.
   - Makes desktop dropdowns and mobile menus opaque in dark mode.
   - Restores readable mobile menu item colours in both themes.
   ========================================================== */
.header a.brand.galapagos-brand.galapagos-brand-lockup img.galapagos-brand-logo {
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}
.header a.brand.galapagos-brand.galapagos-brand-lockup .brand-by {
  color: rgba(26,26,46,.74) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html[data-theme="dark"] .header a.brand.galapagos-brand.galapagos-brand-lockup .brand-by {
  color: rgba(248,247,251,.78) !important;
}
.header a.brand.galapagos-brand.galapagos-brand-lockup img.digitalxform-brand-logo {
  background: transparent !important;
  box-shadow: none !important;
  mix-blend-mode: normal !important;
}
.dropdown-menu {
  background: #ffffff !important;
  color: #1a1a2e !important;
  border-color: rgba(26,26,46,.14) !important;
  box-shadow: 0 22px 60px rgba(15,16,32,.22) !important;
  backdrop-filter: none !important;
}
.dropdown-menu a { color: #5c5c6d !important; }
.dropdown-menu .menu-top,
.dropdown-menu a:hover { color: #1a1a2e !important; }
html[data-theme="dark"] .dropdown-menu {
  background: #17162b !important;
  color: #f8f7fb !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.48) !important;
  backdrop-filter: none !important;
}
html[data-theme="dark"] .dropdown-menu a { color: rgba(248,247,251,.82) !important; }
html[data-theme="dark"] .dropdown-menu .menu-top,
html[data-theme="dark"] .dropdown-menu a:hover { color: #ffffff !important; }
html[data-theme="dark"] .dropdown-menu a:hover { background: rgba(255,255,255,.10) !important; }
.mobile-panel {
  background: #ffffff !important;
  color: #1a1a2e !important;
  border-top-color: rgba(26,26,46,.12) !important;
}
.mobile-panel .nav > a,
.m-details summary,
.m-sub a { color: #5c5c6d !important; }
.m-details,
.m-sub {
  background: #ffffff !important;
  color: #1a1a2e !important;
}
.m-details { border-color: rgba(26,26,46,.12) !important; }
.mobile-panel .nav > a:hover,
.m-details summary:hover,
.m-sub a:hover,
.m-sub .m-top { color: #1a1a2e !important; }
html[data-theme="dark"] .mobile-panel {
  background: #17162b !important;
  color: #f8f7fb !important;
  border-top-color: rgba(255,255,255,.16) !important;
}
html[data-theme="dark"] .mobile-panel .nav > a,
html[data-theme="dark"] .m-details summary,
html[data-theme="dark"] .m-sub a { color: rgba(248,247,251,.82) !important; }
html[data-theme="dark"] .m-details,
html[data-theme="dark"] .m-sub {
  background: #17162b !important;
  color: #f8f7fb !important;
}
html[data-theme="dark"] .m-details { border-color: rgba(255,255,255,.16) !important; }
html[data-theme="dark"] .mobile-panel .nav > a:hover,
html[data-theme="dark"] .m-details summary:hover,
html[data-theme="dark"] .m-sub a:hover,
html[data-theme="dark"] .m-sub .m-top { color: #ffffff !important; background: rgba(255,255,255,.08) !important; }

/* ==========================================================
   V48 brand asset hardening
   - Dark theme uses a light Galapagos registered wordmark so the header remains readable.
   - All visible DigitalXform marks use cleaned transparent PNGs without white matte remnants.
   - Guards against old logo assets being reintroduced in headers, footers and assessment pages.
   ========================================================== */
.header a.brand.galapagos-brand.galapagos-brand-lockup img.galapagos-brand-logo,
img.galapagos-brand-logo {
  background-color: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
html[data-theme="dark"] .header a.brand.galapagos-brand.galapagos-brand-lockup img.galapagos-brand-logo,
html[data-theme="dark"] img.galapagos-brand-logo {
  content: url("assets/galapagosWordingNoFrameworkRegisteredDarkV48.png") !important;
  background-color: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
.header a.brand.galapagos-brand.galapagos-brand-lockup img.digitalxform-brand-logo,
.brand img[src*="digitalxformLogoCleanTransparentV48"],
.brand img[src*="digitalxformReportCleanTransparentV48"],
.footer img[src*="digitalxformLogoCleanTransparentV48"],
.footer img[src*="digitalxformReportCleanTransparentV48"],
.report-dx-logo {
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
html[data-theme="dark"] .header a.brand.galapagos-brand.galapagos-brand-lockup .brand-by {
  color: rgba(248,247,251,.88) !important;
}


/* ==========================================================
   V49 Galapagos framework inline-logo dark-mode hardening
   Ensures content-level Galapagos framework wordmarks remain legible on dark hero/background panels.
   ========================================================== */
.galapagos-framework-inline-logo {
  background-color: transparent !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
html[data-theme="dark"] .galapagos-framework-inline-logo,
html[data-theme="dark"] .hero h1 img[src*="galapagosWordingNoFrameworkRegisteredTransparentV47.png"] {
  content: url("assets/galapagosWordingNoFrameworkRegisteredDarkV48.png") !important;
  background-color: transparent !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* ============================================================
   Dark hero band for interior pages (UX consistency upgrade)
   Mirrors the homepage hero so authority carries site-wide.
   ============================================================ */
.dark-hero{
  position:relative; overflow:hidden; color:#fff;
  padding: clamp(28px,3.5vw,44px) 0 clamp(28px,3vw,40px);
  background:
    radial-gradient(circle at 20% 16%, rgba(190,72,171,.40), transparent 32%),
    radial-gradient(circle at 86% 24%, rgba(240,96,16,.22), transparent 30%),
    linear-gradient(135deg, #111226 0%, #21183d 50%, #321f55 100%);
}
.dark-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.92), transparent 86%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.92), transparent 86%);
}
.dark-hero .container{ position:relative; z-index:1; }
.dark-hero h1{ color:#fff !important; }
.dark-hero .subtitle{ color:rgba(255,255,255,.80) !important; }
.dark-hero p{ color:rgba(255,255,255,.80); }
.dark-hero .kicker{
  color:#fff !important;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.20) !important;
}
.dark-hero .kicker b{ color:#fff; }
.dark-hero .btn:not(.btn-primary){
  color:#fff !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:rgba(255,255,255,.06) !important;
}
.dark-hero .btn:not(.btn-primary):hover{ background:rgba(255,255,255,.12) !important; }
/* keep the gradient accent word readable on dark */
.dark-hero .gradient-text{
  background:linear-gradient(90deg,#f48fb1,#b06ab3,#f06010);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
/* the framework-page white logo chip already styled inline; ensure spacing */
.dark-hero .galapagos-framework-hero-lockup{ margin-top:4px; }

/* ============================================================
   About page credibility cards + book cover
   ============================================================ */
.about-cred-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:26px 0 8px;
}
.about-cred-card{
  background:var(--surface,#fff); border:1px solid var(--border,#e5e7eb);
  border-radius:14px; padding:20px 18px; position:relative; overflow:hidden;
}
.about-cred-card::before{
  content:""; position:absolute; left:0; top:0; height:3px; width:100%;
  background:linear-gradient(90deg,#035152,#C10230);
}
.about-cred-card .stat{
  font-family:var(--font-display); font-size:30px; line-height:1;
  color:var(--indigo,#2d287e); margin:6px 0 8px; letter-spacing:-.02em;
}
.about-cred-card .label{ font-size:13px; line-height:1.45; color:var(--muted,#5b6370); }
@media(max-width:900px){ .about-cred-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .about-cred-grid{ grid-template-columns:1fr; } }

.about-book-row{
  display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:center;
  margin-top:34px; padding:28px; border:1px solid var(--border,#e5e7eb);
  border-radius:18px; background:var(--surface-alt,#f7f8fa);
}
.about-book-row img{
  width:100%; max-width:200px; height:auto; display:block; border-radius:6px;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
}
.about-book-row h3{ margin:0 0 10px; }
@media(max-width:680px){ .about-book-row{ grid-template-columns:1fr; text-align:left; }
  .about-book-row img{ max-width:160px; margin:0 0 12px; } }

/* ============================================================
   Equal-height offer cards on homepage ladder
   ============================================================ */
.dx31-offer-grid{ align-items:stretch; }
.dx31-offer-card{ display:flex; flex-direction:column; height:100%; }
.dx31-offer-card a{ margin-top:auto; }

/* ============================================================
   Articles page: featured cards + grouped list rhythm
   ============================================================ */
.articles-featured{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:22px 0 10px;
}
.article-feature-card{
  display:flex; flex-direction:column; gap:12px; padding:24px;
  border:1px solid var(--border,#e5e7eb); border-radius:16px;
  background:var(--surface,#fff); position:relative; overflow:hidden;
  text-decoration:none; color:inherit; transition:transform .18s ease, box-shadow .18s ease;
}
.article-feature-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#035152,#C10230);
}
.article-feature-card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.10); }
.article-feature-card .src{ font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:#C10230; }
.article-feature-card .hook{ font-family:var(--font-display); font-size:21px;
  line-height:1.18; color:var(--text,#1a1a2e); }
.article-feature-card .meta{ font-size:13px; color:var(--muted,#5b6370); margin-top:auto; }
@media(max-width:880px){ .articles-featured{ grid-template-columns:1fr; } }

.article-year-head{
  font-family:var(--font-display); font-size:15px; letter-spacing:.02em;
  color:var(--muted,#5b6370); text-transform:uppercase; font-weight:700;
  margin:26px 0 10px; padding-bottom:8px; border-bottom:1px solid var(--border,#e5e7eb);
}

/* ============================================================
   Case study outcome line
   ============================================================ */
.cs-outcome{
  display:block; margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--border,#e5e7eb);
  font-size:13px; color:#035152; font-weight:600;
}

/* ============================================================
   Reveal animation safety net (UX reliability)
   Content must never stay invisible if JS is slow, missed,
   disabled, or errors. is-visible (JS) still drives the nice
   staggered effect; this guarantees a fallback.
   ============================================================ */
.reveal{ animation: dxRevealFallback 0.6s ease 1.1s forwards; }
.reveal.is-visible{ animation:none; }
@keyframes dxRevealFallback{ to{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-visible, .animate-in{
    opacity:1 !important; transform:none !important; animation:none !important; transition:none !important;
  }
}


/* ============================================================
   V50 dark-mode systemic hardening
   - Prevents browser/OS dark handling from fighting the designed theme.
   - Removes white-on-white failures on assessment forms and light panels.
   - Keeps logo assets legible when placed inside white chips.
   ============================================================ */
:root{
  color-scheme: light dark;
  --surface-alt: #f7f8fa;
  --border: rgba(26,26,46,.12);
}
html[data-theme="light"]{ color-scheme: light; }
html[data-theme="dark"]{
  color-scheme: dark;
  --surface-alt: rgba(255,255,255,.075);
  --border: rgba(255,255,255,.16);
}

/* Do not let dark-mode rendering algorithms alter brand/media assets. */
img,
svg,
video,
canvas,
.galapagos-brand-logo,
.digitalxform-brand-logo,
.galapagos-framework-inline-logo,
.banner-img,
.report-galapagos-logo,
.report-dx-logo{
  forced-color-adjust: none;
}

/* Framework hero logo chip: dark-mode header logos are light; this chip is deliberately white. */
.galapagos-inline-logo-chip{
  background:#ffffff !important;
  color:#17162b !important;
  forced-color-adjust:none;
}
.galapagos-inline-logo-chip .galapagos-framework-inline-logo{
  content:url("assets/galapagosWordingNoFrameworkRegisteredTransparentV47.png") !important;
  background:transparent !important;
  filter:none !important;
  mix-blend-mode:normal !important;
}
html[data-theme="dark"] .galapagos-inline-logo-chip .galapagos-framework-inline-logo{
  content:url("assets/galapagosWordingNoFrameworkRegisteredTransparentV47.png") !important;
}

/* Generic dark surfaces that previously fell back to light-mode variables. */
html[data-theme="dark"] .about-book-row,
html[data-theme="dark"] .about-cred-card,
html[data-theme="dark"] .featured-logo,
html[data-theme="dark"] .statement,
html[data-theme="dark"] .diagnostic-preview,
html[data-theme="dark"] .diagnostic-mock,
html[data-theme="dark"] .list-item,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .profile,
html[data-theme="dark"] .split .card{
  background:rgba(255,255,255,.065) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#f8f7fb !important;
}
html[data-theme="dark"] .about-book-row p,
html[data-theme="dark"] .about-cred-card .label,
html[data-theme="dark"] .featured-logo,
html[data-theme="dark"] .statement .small{
  color:rgba(248,247,251,.76) !important;
}
html[data-theme="dark"] .about-cred-card .stat{
  color:#b5a5ff !important;
}

/* Assessment dark mode: v2 visual system forced white cards. Keep the diagnostic in the site theme. */
html[data-theme="dark"] body.assessment-page,
html[data-theme="dark"] body.assessment-page .assessment-main{
  background:#0f1020 !important;
  color:#f8f7fb !important;
}
html[data-theme="dark"] body.assessment-page .step-card,
html[data-theme="dark"] body.assessment-page .panel,
html[data-theme="dark"] body.assessment-page .card-form,
html[data-theme="dark"] body.assessment-page .report-card,
html[data-theme="dark"] body.assessment-page .dimension-card,
html[data-theme="dark"] body.assessment-page .answer-group,
html[data-theme="dark"] body.assessment-page .answer-card,
html[data-theme="dark"] body.assessment-page .plan-card,
html[data-theme="dark"] body.assessment-page .resource-card,
html[data-theme="dark"] body.assessment-page .warning-card,
html[data-theme="dark"] body.assessment-page .chart-card,
html[data-theme="dark"] body.assessment-page .report-section,
html[data-theme="dark"] body.assessment-page .privacy-notice-inline,
html[data-theme="dark"] body.assessment-page .score-row,
html[data-theme="dark"] body.assessment-page .insight-list article,
html[data-theme="dark"] body.assessment-page .context-strip span,
html[data-theme="dark"] body.assessment-page .sticky-submit{
  background:rgba(255,255,255,.065) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#f8f7fb !important;
  box-shadow:none !important;
}
html[data-theme="dark"] body.assessment-page .card-form label,
html[data-theme="dark"] body.assessment-page .panel h3,
html[data-theme="dark"] body.assessment-page .report-card h3,
html[data-theme="dark"] body.assessment-page .dimension-card h2,
html[data-theme="dark"] body.assessment-page .dimension-card h3,
html[data-theme="dark"] body.assessment-page .answer-card h3,
html[data-theme="dark"] body.assessment-page .section-heading h2,
html[data-theme="dark"] body.assessment-page .privacy-notice-inline h3{
  color:#f8f7fb !important;
}
html[data-theme="dark"] body.assessment-page .card-form p,
html[data-theme="dark"] body.assessment-page .panel p,
html[data-theme="dark"] body.assessment-page .lead,
html[data-theme="dark"] body.assessment-page .consent,
html[data-theme="dark"] body.assessment-page .low-score,
html[data-theme="dark"] body.assessment-page .answer-id,
html[data-theme="dark"] body.assessment-page .question legend,
html[data-theme="dark"] body.assessment-page .context-strip span,
html[data-theme="dark"] body.assessment-page .privacy-notice-inline p{
  color:rgba(248,247,251,.76) !important;
}
html[data-theme="dark"] body.assessment-page input,
html[data-theme="dark"] body.assessment-page select,
html[data-theme="dark"] body.assessment-page textarea{
  background:#17162b !important;
  color:#f8f7fb !important;
  border-color:rgba(255,255,255,.22) !important;
  -webkit-text-fill-color:#f8f7fb !important;
  caret-color:#f8f7fb !important;
  color-scheme:dark;
}
html[data-theme="dark"] body.assessment-page input::placeholder,
html[data-theme="dark"] body.assessment-page textarea::placeholder{
  color:rgba(248,247,251,.52) !important;
  -webkit-text-fill-color:rgba(248,247,251,.52) !important;
}
html[data-theme="dark"] body.assessment-page select option{
  background:#17162b !important;
  color:#f8f7fb !important;
}
html[data-theme="dark"] body.assessment-page input[type="checkbox"]{
  accent-color:#be48ab;
  -webkit-text-fill-color:initial !important;
}
html[data-theme="dark"] body.assessment-page .privacy-notice-inline a{
  color:#8be0d3 !important;
}
html[data-theme="dark"] body.assessment-page .scale span{
  background:#17162b !important;
  color:rgba(248,247,251,.76) !important;
  border-color:rgba(255,255,255,.22) !important;
}
html[data-theme="dark"] body.assessment-page .scale input:checked + span{
  background:var(--accent) !important;
  color:#ffffff !important;
  border-color:transparent !important;
}

/* Keep generated reports printable and intentionally light. */
@media print{
  :root, html, body{ color-scheme: light !important; }
}


/* ============================================
   v52 additions: credential strip, five-step ladder,
   contact form status, honeypot, footer legal line
   ============================================ */
.dx-cred-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; background: var(--card); }
.dx-cred-strip p { margin: 0; text-align: center; color: var(--muted); font-size: 14px; letter-spacing: .02em; line-height: 1.7; }
.dx-cred-strip em { font-style: italic; color: var(--text); }

.dx31-offer-grid.dx31-offer-grid-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) {
  .dx31-offer-grid.dx31-offer-grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .dx31-offer-grid-five .dx31-offer-card { padding: 24px 18px; }
}
@media (max-width: 640px) {
  .dx31-offer-grid.dx31-offer-grid-five { grid-template-columns: 1fr; }
}

.form-status { border-radius: 12px; padding: 14px 18px; margin-bottom: 18px; font-size: 15px; line-height: 1.6; border: 1px solid transparent; }
.form-status.ok { background: rgba(47, 174, 131, .12); border-color: rgba(47, 174, 131, .4); color: var(--text); }
.form-status.err { background: rgba(214, 69, 69, .10); border-color: rgba(214, 69, 69, .4); color: var(--text); }

.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.footer-legal { margin-top: 6px; font-size: 12px; color: var(--muted); opacity: .85; }