/* ═══════════════════════════════════════════════════════════
   ROOT VARIABLES & RESET
   ═══════════════════════════════════════════════════════════ */
:root {
  /* Sirius core palette */
  --navy: #0A1628;
  --navy-mid: #111D33;
  --navy-light: #1A2A45;
  --navy-elevated: #1F3050;
  --accent: #3B82F6;
  --accent-glow: #60A5FA;
  --accent-deep: #2563EB;
  --gold: #D4A853;
  --gold-soft: #E8C97A;

  /* Pillar accents */
  --aiml-accent: #A855F7;        /* purple — AI/ML & LLM */
  --aiml-glow: #C084FC;
  --biz-accent: #3B82F6;         /* blue — Business Services */
  --biz-glow: #60A5FA;
  --geo-accent: #00B4CC;         /* teal — Geospatial / GeosIntel */
  --geo-glow: #00D4F0;
  --de-accent: #00D4AA;          /* cyan-green — Digital Engineering */
  --de-glow: #4FE3C0;

  /* GeosIntel page palette (matches dashboard) */
  --geo-bg: #0E1117;
  --geo-surface: #1B2332;
  --geo-border: #2a3a4e;
  --geo-text: #C8D6E5;
  /* Muted secondary for geo surfaces — solid replacement for the old
     opacity-dimmed labels (failed AA); 4.98:1 on --geo-surface,
     5.97:1 on --geo-bg. See docs/AUDIT_FINDINGS_2026-07.md B-2. */
  --geo-text-muted: #7F93A7;
  --geo-purple: #9467bd;

  /* Text scale */
  --white: #F8FAFC;
  --gray-100: #E2E8F0;
  --gray-300: #94A3B8;
  /* Lifted from #64748B (3.0-3.8:1, failed AA everywhere) to the darkest
     value that holds >=4.5:1 on every background it sits on, incl.
     navy-light #1A2A45 (4.64:1). See docs/AUDIT_FINDINGS_2026-07.md B-2. */
  --gray-500: #8494A8;
  --gray-700: #475569;

  /* Typography */
  --body-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --display-font: 'Instrument Serif', Georgia, serif;
  --logo-font: 'Orbitron', sans-serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body-font);
  background: var(--navy);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle film grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 1rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(59, 130, 246, 0.08);
  transition: all 0.4s ease;
}
nav.scrolled {
  padding: 0.7rem 2.5rem;
  background: rgba(10, 22, 40, 0.96);
  border-bottom-color: rgba(59, 130, 246, 0.15);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s;
}
.nav-logo:hover { opacity: 0.85; }

/* Sirius logo lockup — embedded PNG with screen blend to neutralize black bg */
.sirius-logo-img {
  width: 330px;
  height: auto;
  display: block;
  transition: width 0.4s ease;
}
nav.scrolled .sirius-logo-img {
  width: 283px;
}
.nav-logo-text { display: none; }

.nav-links {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  list-style: none;
}
.nav-tab {
  color: var(--gray-300);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.55rem 1rem;
  border-radius: 6px;
  transition: all 0.3s;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--body-font);
}
.nav-tab:hover { color: var(--white); background: rgba(255, 255, 255, 0.04); }
.nav-tab.active { color: var(--white); background: rgba(59, 130, 246, 0.12); }
.nav-tab.nav-cta {
  border: 1px solid var(--accent);
  color: var(--accent-glow);
  margin-left: 0.75rem;
}
.nav-tab.nav-cta:hover { background: var(--accent); color: var(--white); }

/* ═══════════════════════════════════════════════════════════
   PAGE SYSTEM
   ═══════════════════════════════════════════════════════════ */
.page { display: none; min-height: 100vh; }
.page.active { display: block; animation: pageIn 0.5s ease; }
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   SHARED COMPONENTS
   ═══════════════════════════════════════════════════════════ */
.section-inner { max-width: 1400px; margin: 0 auto; }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  color: var(--accent-glow);
}
.section-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.section-title {
  font-family: var(--display-font);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 1.2rem;
  letter-spacing: -0.01em;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--gray-300);
  max-width: 620px;
  line-height: 1.75;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.9rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--white);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: all 0.3s;
  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.3);
  border: none;
  cursor: pointer;
  font-family: var(--body-font);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(59, 130, 246, 0.45); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.9rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--gray-100);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  transition: all 0.3s;
  cursor: pointer;
  font-family: var(--body-font);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes slowFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, -15px) scale(1.05); }
}

.reveal { opacity: 0; transform: translateY(40px); transition: all 0.85s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }


/* ═══════════════════════════════════════════════════════════
   HERO — Home page
   ═══════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 7rem 2.5rem 4rem;
}

/* Layered background — replace with hero graphic when ready */
.hero-bg-layer-1 {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 75% 35%, rgba(59, 130, 246, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 70% at 20% 80%, rgba(212, 168, 83, 0.07), transparent 60%),
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(168, 85, 247, 0.05), transparent 70%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%);
}
.hero-bg-layer-2 {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(59, 130, 246, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 50%, black, transparent);
}

/* Animated nodes overlay — abstract neural network feel */
.hero-nodes {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-node {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-glow);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: pulse 4s infinite;
}
.hero-node:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
.hero-node:nth-child(2) { top: 35%; left: 70%; animation-delay: 1s; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.hero-node:nth-child(3) { top: 60%; left: 25%; animation-delay: 2s; }
.hero-node:nth-child(4) { top: 45%; left: 85%; animation-delay: 0.5s; }
.hero-node:nth-child(5) { top: 75%; left: 60%; animation-delay: 1.5s; background: var(--aiml-glow); box-shadow: 0 0 12px var(--aiml-glow); }
.hero-node:nth-child(6) { top: 30%; left: 45%; animation-delay: 2.5s; }

.hero-content {
  position: relative; z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4rem;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(212, 168, 83, 0.35);
  background: rgba(212, 168, 83, 0.05);
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  animation: fadeUp 0.8s ease both;
}
.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.hero h1 {
  font-family: var(--display-font);
  font-size: clamp(2.6rem, 4.8vw, 4rem);
  line-height: 1.05;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  animation: fadeUp 0.8s ease 0.1s both;
}
.hero h1 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--accent-glow) 0%, var(--gold-soft) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 1.1rem;
  color: var(--gray-300);
  max-width: 560px;
  line-height: 1.75;
  margin-bottom: 2.5rem;
  animation: fadeUp 0.8s ease 0.2s both;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  animation: fadeUp 0.8s ease 0.3s both;
}

/* Hero pillar cards — the four pillars previewed */
.hero-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  animation: fadeUp 0.8s ease 0.4s both;
}
.hero-pillar {
  padding: 1.4rem 1.2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
}
.hero-pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}
.hero-pillar:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.05); }
.hero-pillar:hover::before { transform: scaleX(1); }

.hero-pillar.aiml::before { background: linear-gradient(90deg, var(--aiml-accent), var(--aiml-glow)); }
.hero-pillar.aiml:hover { border-color: rgba(168, 85, 247, 0.3); }
.hero-pillar.biz::before { background: linear-gradient(90deg, var(--biz-accent), var(--biz-glow)); }
.hero-pillar.biz:hover { border-color: rgba(59, 130, 246, 0.3); }
.hero-pillar.geo::before { background: linear-gradient(90deg, var(--geo-accent), var(--geo-glow)); }
.hero-pillar.geo:hover { border-color: rgba(0, 180, 204, 0.3); }
.hero-pillar.de::before { background: linear-gradient(90deg, var(--de-accent), var(--de-glow)); }
.hero-pillar.de:hover { border-color: rgba(0, 212, 170, 0.3); }

.hero-pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
}
.hero-pillar.aiml .hero-pillar-icon { background: rgba(168, 85, 247, 0.12); color: var(--aiml-glow); }
.hero-pillar.biz .hero-pillar-icon { background: rgba(59, 130, 246, 0.12); color: var(--biz-glow); }
.hero-pillar.geo .hero-pillar-icon { background: rgba(0, 180, 204, 0.12); color: var(--geo-glow); }
.hero-pillar.de .hero-pillar-icon { background: rgba(0, 212, 170, 0.12); color: var(--de-glow); }

.hero-pillar h3 {
  font-size: 0.92rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--white);
}
.hero-pillar p {
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════════════════════════ */
.trust-bar {
  padding: 2rem 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  background: rgba(0, 0, 0, 0.18);
}
.trust-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.trust-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
.trust-text {
  font-size: 0.76rem;
  color: var(--gray-300);
  line-height: 1.4;
}
.trust-text strong {
  color: var(--white);
  display: block;
  font-size: 0.83rem;
  margin-bottom: 1px;
}


/* ═══════════════════════════════════════════════════════════
   FOUR PILLARS — TWO-LAYER LAYOUT (v6)

   Layer 1 — Content: normal block flow inside .section-inner.
       Each element pushes the next downward via margins; no
       absolute positioning, no aspect-ratio lock, no fixed
       offsets. Section height = top padding + natural content
       height + bottom padding.

   Layer 2 — Decoration: .pillars-video, .pillars-bg-canvas,
       and .pillars-hud remain absolute-positioned overlays.
       HUD lives in the section's side gutters and is hidden
       below 1200px where the gutters disappear.

   Carousel mechanism: JS toggles .active on one of four sibling
   .pillar-slide elements. To allow crossfade transitions while
   keeping the stage in flow, slides are stacked into a single
   CSS Grid cell (grid-area: 1/1). Stage height = the tallest
   slide's natural height; opacity gates which slide is visible.

   See docs/FOUR_PILLARS_LAYOUT_REFACTOR.md.
   ═══════════════════════════════════════════════════════════ */

.competencies {
  position: relative;
  background: var(--navy);
  overflow: hidden;
  isolation: isolate;
  min-height: 80vh;
  padding: 0;
}

.competencies > .section-inner {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  /* Top padding clears the fixed nav (~121px) plus a buffer; bottom
     padding leaves room for bottom-edge HUD elements at ≥1200px. */
  padding: 10rem 2.5rem 6rem;
}

/* Section header — block flow at the top of the column */
.competencies-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.competencies-header .section-label {
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  color: #00B4CC;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.competencies-header .section-title {
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  margin-bottom: 0.4rem;
}
.competencies-header .section-desc {
  font-size: 1.06rem;
  margin: 0 auto;
  max-width: 580px;
  color: #F5F5F5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* PILLAR STAGE — block-flow carousel container.
   Single-cell CSS Grid stacks all four .pillar-slide children at
   grid-area 1/1 so the stage takes the natural height of the
   tallest slide. Opacity gates which slide is visible. */
.pillar-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
}

.pillar-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.pillar-slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.pillar-slide-inner {
  width: 100%;
  max-width: 800px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 0;
}

/* Left: huge icon + pillar number */
.pillar-slide-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.pillar-slide-icon {
  width: 120px;
  height: 120px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  margin-bottom: 1rem;
  position: relative;
  transition: all 0.4s ease;
}

.pillar-slide-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 28px;
  background: linear-gradient(135deg, currentColor, transparent);
  opacity: 0.15;
  filter: blur(20px);
  z-index: -1;
}

.pillar-slide.aiml .pillar-slide-icon {
  background: rgba(168, 85, 247, 0.1);
  border: 2px solid rgba(168, 85, 247, 0.35);
  color: var(--aiml-glow);
  box-shadow: 0 0 60px rgba(168, 85, 247, 0.25);
}
.pillar-slide.biz .pillar-slide-icon {
  background: rgba(59, 130, 246, 0.1);
  border: 2px solid rgba(59, 130, 246, 0.35);
  color: var(--biz-glow);
  box-shadow: 0 0 60px rgba(59, 130, 246, 0.25);
}
.pillar-slide.geo .pillar-slide-icon {
  background: rgba(0, 180, 204, 0.1);
  border: 2px solid rgba(0, 180, 204, 0.35);
  color: var(--geo-glow);
  box-shadow: 0 0 60px rgba(0, 180, 204, 0.25);
}
.pillar-slide.de .pillar-slide-icon {
  background: rgba(0, 212, 170, 0.1);
  border: 2px solid rgba(0, 212, 170, 0.35);
  color: var(--de-glow);
  box-shadow: 0 0 60px rgba(0, 212, 170, 0.25);
}

.pillar-slide-number {
  font-family: var(--logo-font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}
.pillar-slide.aiml .pillar-slide-number { color: var(--aiml-glow); }
.pillar-slide.biz .pillar-slide-number { color: var(--biz-glow); }
.pillar-slide.geo .pillar-slide-number { color: var(--geo-glow); }
.pillar-slide.de .pillar-slide-number { color: var(--de-glow); }

/* Right: pillar content */
.pillar-slide-content h3 {
  font-family: var(--display-font);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.05;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  color: var(--white);
}

.pillar-slide-content p {
  font-size: 1rem;
  color: var(--gray-100);
  line-height: 1.65;
  margin-bottom: 1.4rem;
  max-width: 600px;
}

.pillar-slide-list {
  list-style: none;
  margin-bottom: 1.4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1.5rem;
  max-width: 600px;
}

.pillar-slide-list li {
  font-size: 0.85rem;
  color: var(--gray-100);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
}

.pillar-slide-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pillar-slide.aiml .pillar-slide-list li::before { background: var(--aiml-glow); }
.pillar-slide.biz .pillar-slide-list li::before { background: var(--biz-glow); }
.pillar-slide.geo .pillar-slide-list li::before { background: var(--geo-glow); }
.pillar-slide.de .pillar-slide-list li::before { background: var(--de-glow); }

.pillar-slide-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.3s;
  cursor: pointer;
}
.pillar-slide-link:hover { gap: 0.85rem; }
.pillar-slide.aiml .pillar-slide-link { color: var(--aiml-glow); }
.pillar-slide.biz .pillar-slide-link { color: var(--biz-glow); }
.pillar-slide.geo .pillar-slide-link { color: var(--geo-glow); }
.pillar-slide.de .pillar-slide-link { color: var(--de-glow); }

/* Pillar indicator dots */
.pillar-indicators {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

.pillar-dot {
  width: 36px;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.pillar-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 0;
  background: currentColor;
  transition: width 0.1s linear;
}

.pillar-dot.active {
  background: rgba(255, 255, 255, 0.3);
  width: 60px;
}

.pillar-dot.active.aiml { color: var(--aiml-glow); }
.pillar-dot.active.biz { color: var(--biz-glow); }
.pillar-dot.active.geo { color: var(--geo-glow); }
.pillar-dot.active.de { color: var(--de-glow); }

.pillar-dot.active::after {
  width: 100%;
  transition: width 5s linear;
}

.pillar-dot:hover:not(.active) {
  background: rgba(255, 255, 255, 0.25);
}

/* ═══ HUD METRICS LAYER ═══
   Absolute-positioned decoration in the section's edge gutters.
   Default off; enabled at ≥1200px where the gutters are wide
   enough to host edge decoration without colliding with the
   centered content column. */
.pillars-hud {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  font-family: 'SF Mono', Consolas, monospace;
  overflow: hidden;
  display: none;
}

@media (min-width: 1200px) {
  .pillars-hud { display: block; }
}

.hud-element {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0.85;
}

.hud-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}

.hud-value {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* HUD: Top-left clock — orange neon, horizontal.
   top: 8.5rem clears the fixed desktop nav (~121px) — Pillars is now the first section so 1.5rem
   would land behind the nav. .pillars-hud is display:none on mobile, so this only affects desktop. */
.hud-clock {
  top: 8.5rem;
  right: 2.5rem;
  text-align: right;
  color: #FF8C42;
}
.hud-clock .hud-value {
  font-size: 1.65rem;
  text-shadow:
    0 0 8px rgba(255, 140, 66, 0.7),
    0 0 16px rgba(255, 140, 66, 0.4),
    0 0 32px rgba(243, 156, 18, 0.3);
  font-variant-numeric: tabular-nums;
}
.hud-clock .hud-ms {
  font-size: 1.65rem;
  opacity: 1;
}

/* HUD: Top-right metric A — top:8.5rem matches the other top HUD elements to clear the fixed nav. */
.hud-metric-a {
  top: 8.5rem;
  left: 8rem;
  text-align: left;
  color: var(--accent-glow);
}
.hud-metric-a .hud-value {
  text-shadow: 0 0 8px rgba(96, 165, 250, 0.6), 0 0 20px rgba(59, 130, 246, 0.3);
  font-variant-numeric: tabular-nums;
}

/* HUD: Bottom-left metric B (compass-style) */
.hud-metric-b {
  bottom: 1.5rem;
  left: 2.5rem;
  color: var(--geo-glow);
}
.hud-metric-b .hud-value {
  text-shadow: 0 0 8px rgba(0, 212, 240, 0.6), 0 0 20px rgba(0, 180, 204, 0.3);
  font-variant-numeric: tabular-nums;
}

/* HUD: Bottom-right metric C (velocity-style) */
.hud-metric-c {
  bottom: 1.5rem;
  right: 2.5rem;
  text-align: right;
  color: var(--de-glow);
}
.hud-metric-c .hud-value {
  text-shadow: 0 0 8px rgba(79, 227, 192, 0.6), 0 0 20px rgba(0, 212, 170, 0.3);
  font-variant-numeric: tabular-nums;
}

/* HUD: Top-center metric D (altitude-style) — top:8.5rem matches the other top HUD elements to clear the fixed nav. */
.hud-metric-d {
  top: 8.5rem;
  left: 2.5rem;
  text-align: left;
  color: var(--gold-soft);
}
.hud-metric-d .hud-value {
  text-shadow: 0 0 8px rgba(232, 201, 122, 0.5), 0 0 20px rgba(212, 168, 83, 0.3);
  font-variant-numeric: tabular-nums;
}

/* HUD: Bottom-center coordinate readout (lat/long) */
.hud-metric-coord {
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
}
.hud-metric-coord .hud-value {
  text-shadow:
    0 0 8px rgba(255, 255, 255, 0.5),
    0 0 20px rgba(200, 220, 255, 0.3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

/* Responsive — typography and slide-inner stacking.
   Two layers of tightening: below 1200px the HUD is gone so the section
   can use slightly tighter padding; below 1024px the slide stacks
   vertically (icon above text) since side-by-side won't fit. */

@media (max-width: 1199.98px) {
  /* No HUD room at this width — tighten section padding and pull max-width in */
  .competencies { min-height: auto; }
  .competencies > .section-inner {
    max-width: 720px;
    padding: 5.5rem 1.5rem 3.5rem;
  }
  .competencies-header { margin-bottom: 1.75rem; }
  .competencies-header .section-title { font-size: 1.65rem; }
  .competencies-header .section-desc { font-size: 0.95rem; }
  .pillar-slide-content h3 { font-size: 1.5rem; }
  .pillar-slide-content p { font-size: 1rem; line-height: 1.6; }
  .pillar-slide-list li { font-size: 0.9rem; }
  .pillar-indicators { margin-top: 1.75rem; }
  .pillars-bg-glyphs { display: none; }
}

@media (max-width: 1024px) {
  /* Slide stacks vertically: icon above, content below */
  .pillar-slide-inner {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
    max-width: 100%;
  }
  .pillar-slide-visual { margin: 0 auto; }
  .pillar-slide-icon {
    width: 100px;
    height: 100px;
    font-size: 2.5rem;
  }
  .pillar-slide-list {
    grid-template-columns: 1fr;
    margin: 0 auto 1rem;
    text-align: left;
  }
  .pillar-slide-content p { margin: 0 auto 1.4rem; }
}

@media (max-width: 768px) {
  .pillar-slide-icon {
    width: 88px;
    height: 88px;
    font-size: 2.2rem;
  }
}


/* ═══════════════════════════════════════════════════════════
   PAST PERFORMANCE / DIFFERENTIATORS
   ═══════════════════════════════════════════════════════════ */
.differentiators {
  padding: 6rem 2.5rem;
  background: var(--navy-mid);
  position: relative;
}
.diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-top: 3rem;
}
.diff-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.stat-card {
  padding: 1.6rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  transition: all 0.3s;
}
.stat-card:hover { background: rgba(59, 130, 246, 0.06); border-color: rgba(59, 130, 246, 0.18); }
.stat-number {
  font-family: var(--display-font);
  font-size: 2.4rem;
  color: var(--accent-glow);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.stat-label {
  font-size: 0.78rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.diff-list { list-style: none; }
.diff-list li {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  gap: 1rem;
}
.diff-list li:last-child { border-bottom: none; }
.diff-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(212, 168, 83, 0.1);
  border: 1px solid rgba(212, 168, 83, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.diff-content h4 { font-size: 0.95rem; margin-bottom: 0.25rem; color: var(--white); }
.diff-content p { font-size: 0.84rem; color: var(--gray-300); line-height: 1.6; }


/* ═══════════════════════════════════════════════════════════
   CERTIFICATIONS BAR
   ═══════════════════════════════════════════════════════════ */
.certs-section {
  padding: 5rem 2.5rem;
  background: var(--navy);
}
.certs-header { text-align: center; margin-bottom: 3rem; }
.certs-header .section-desc { margin: 0 auto; }

.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.cert-card {
  padding: 2rem 1.5rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px;
  transition: all 0.3s;
}
.cert-card:hover { background: rgba(212, 168, 83, 0.04); border-color: rgba(212, 168, 83, 0.25); transform: translateY(-3px); }
.cert-shield {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  background: rgba(212, 168, 83, 0.1);
  border: 1px solid rgba(212, 168, 83, 0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
.cert-card h4 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.cert-card p { font-size: 0.78rem; color: var(--gray-500); }


/* ═══════════════════════════════════════════════════════════
   CONTACT CTA
   ═══════════════════════════════════════════════════════════ */
.cta-section {
  padding: 6rem 2.5rem;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%);
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(59, 130, 246, 0.1), transparent);
}
.cta-inner {
  position: relative;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.cta-inner .section-desc { margin: 0 auto 2rem; max-width: 100%; }


/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
footer {
  padding: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: var(--navy);
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-info {
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.7;
}
.footer-info strong { color: var(--gray-300); }
.footer-info a { color: var(--gray-300); text-decoration: none; transition: color 0.3s; }
.footer-info a:hover { color: var(--white); }
.footer-links { display: flex; gap: 1.25rem; list-style: none; flex-wrap: wrap; }
.footer-links a {
  font-size: 0.78rem;
  color: var(--gray-500);
  text-decoration: none;
  transition: color 0.3s;
}
.footer-links a:hover { color: var(--white); }
.footer-bottom {
  max-width: 1400px;
  margin: 1.5rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 0.72rem;
  color: var(--gray-500);
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════
   PILLAR PAGE — SHARED LAYOUT
   ═══════════════════════════════════════════════════════════ */
.pillar-hero {
  padding: 8rem 2.5rem 5rem;
  position: relative;
  overflow: hidden;
}
.pillar-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
}

/* AI/ML pillar hero background */
.pillar-hero.aiml-hero {
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(168, 85, 247, 0.15), transparent),
    radial-gradient(ellipse 50% 60% at 75% 60%, rgba(96, 165, 250, 0.08), transparent),
    var(--navy);
}
.pillar-hero.biz-hero {
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(59, 130, 246, 0.15), transparent),
    radial-gradient(ellipse 50% 60% at 75% 60%, rgba(212, 168, 83, 0.06), transparent),
    var(--navy);
}
.pillar-hero.de-hero {
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(0, 212, 170, 0.12), transparent),
    radial-gradient(ellipse 50% 60% at 75% 60%, rgba(46, 117, 182, 0.08), transparent),
    var(--navy);
}

.pillar-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.pillar-badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}
.aiml-hero .pillar-badge { border: 1px solid rgba(168, 85, 247, 0.35); color: var(--aiml-glow); background: rgba(168, 85, 247, 0.05); }
.aiml-hero .pillar-badge::before { background: var(--aiml-glow); }
.biz-hero .pillar-badge { border: 1px solid rgba(59, 130, 246, 0.35); color: var(--biz-glow); background: rgba(59, 130, 246, 0.05); }
.biz-hero .pillar-badge::before { background: var(--biz-glow); }
.de-hero .pillar-badge { border: 1px solid rgba(0, 212, 170, 0.35); color: var(--de-glow); background: rgba(0, 212, 170, 0.05); }
.de-hero .pillar-badge::before { background: var(--de-glow); }

.pillar-hero h1 {
  font-family: var(--display-font);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 1.2rem;
  letter-spacing: -0.02em;
}
.pillar-hero h1 em {
  font-style: italic;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.aiml-hero h1 em { background-image: linear-gradient(135deg, var(--aiml-glow), var(--accent-glow)); }
.biz-hero h1 em { background-image: linear-gradient(135deg, var(--biz-glow), var(--gold-soft)); }
.de-hero h1 em { background-image: linear-gradient(135deg, var(--de-glow), var(--accent-glow)); }

.pillar-hero-sub {
  font-size: 1.1rem;
  color: var(--gray-300);
  max-width: 720px;
  line-height: 1.75;
}

/* Pillar content sections */
.pillar-section {
  padding: 5rem 2.5rem;
}
.pillar-section.alt { background: var(--navy-mid); }

/* Capability blocks within pillars */
.cap-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}
.cap-block {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  transition: all 0.3s;
}
.cap-block:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.04); }
.cap-block.aiml:hover { border-color: rgba(168, 85, 247, 0.2); }
.cap-block.biz:hover { border-color: rgba(59, 130, 246, 0.2); }
.cap-block.de:hover { border-color: rgba(0, 212, 170, 0.2); }
.cap-block-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
.cap-block.aiml .cap-block-icon { background: rgba(168, 85, 247, 0.1); color: var(--aiml-glow); }
.cap-block.biz .cap-block-icon { background: rgba(59, 130, 246, 0.1); color: var(--biz-glow); }
.cap-block.de .cap-block-icon { background: rgba(0, 212, 170, 0.1); color: var(--de-glow); }
.cap-block h3 { font-size: 1.05rem; margin-bottom: 0.6rem; color: var(--white); }
.cap-block p { font-size: 0.86rem; color: var(--gray-500); line-height: 1.65; }

/* Visual placeholder area for pillar pages — designed for future Adobe graphic */
.pillar-visual {
  margin-top: 3rem;
  padding: 4rem 2rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pillar-visual.aiml-visual {
  background:
    radial-gradient(circle at 30% 50%, rgba(168, 85, 247, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(96, 165, 250, 0.12) 0%, transparent 50%),
    var(--navy);
}
.pillar-visual.biz-visual {
  background:
    radial-gradient(circle at 30% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(212, 168, 83, 0.08) 0%, transparent 50%),
    var(--navy);
}
.pillar-visual.de-visual {
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 212, 170, 0.12) 0%, transparent 50%),
    var(--navy);
}

.pillar-visual-content {
  position: relative;
  z-index: 2;
}
.pillar-visual-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--gray-500);
  margin-bottom: 0.5rem;
}
.pillar-visual-title {
  font-family: var(--display-font);
  font-size: 1.6rem;
  color: var(--gray-300);
  font-style: italic;
}


/* ═══════════════════════════════════════════════════════════
   GEOSINTEL PAGE — uses dashboard palette
   ═══════════════════════════════════════════════════════════ */
.geo-page {
  background: var(--geo-bg);
}

.geo-hero {
  padding: 8rem 2.5rem 5rem;
  position: relative;
  overflow: hidden;
}
.geo-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 40% 30%, rgba(0, 180, 204, 0.12), transparent),
    radial-gradient(ellipse 50% 60% at 70% 70%, rgba(148, 103, 189, 0.08), transparent);
}
.geo-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
}

.geo-brand-link {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: opacity 0.3s, transform 0.3s;
}
.geo-brand-link:hover { opacity: 0.85; transform: translateX(2px); }
.geo-brand-link:hover .geo-brand-sub { color: var(--geo-glow); opacity: 1; }
.geo-brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.geo-brand-text {
  font-family: var(--logo-font);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--geo-accent);
  letter-spacing: 0.04em;
}
.geo-brand-sub {
  font-size: 0.74rem;
  color: var(--geo-text);
  opacity: 0.55;
  margin-top: 2px;
}

.geo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border: 1px solid rgba(0, 180, 204, 0.35);
  background: rgba(0, 180, 204, 0.05);
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--geo-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}
.geo-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--geo-glow);
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.geo-hero h1 {
  font-family: var(--display-font);
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 1.2rem;
  letter-spacing: -0.02em;
}
.geo-hero h1 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--geo-glow), var(--geo-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.geo-hero-sub {
  font-size: 1.1rem;
  color: var(--geo-text);
  max-width: 700px;
  line-height: 1.75;
  margin-bottom: 2rem;
}
.geo-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn-geo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.9rem;
  background: linear-gradient(135deg, var(--geo-accent), #0097A7);
  color: var(--geo-bg);
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.92rem;
  transition: all 0.3s;
  box-shadow: 0 4px 24px rgba(0, 180, 204, 0.3);
}
.btn-geo:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0, 180, 204, 0.45); }

.btn-geo-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.9rem;
  background: rgba(0, 180, 204, 0.06);
  border: 1px solid rgba(0, 180, 204, 0.22);
  color: var(--geo-accent);
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.92rem;
  transition: all 0.3s;
}
.btn-geo-ghost:hover { background: rgba(0, 180, 204, 0.12); border-color: rgba(0, 180, 204, 0.35); }

/* Geo metrics */
.geo-metrics {
  padding: 0 2.5rem 4rem;
}
.geo-metrics-inner { max-width: 1400px; margin: 0 auto; }
.geo-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.geo-metric {
  padding: 1.6rem;
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: 12px;
  transition: all 0.3s;
}
.geo-metric:hover { border-color: rgba(0, 180, 204, 0.3); }
.geo-metric-label {
  font-size: 0.7rem;
  color: var(--geo-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}
.geo-metric-value {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--white);
}
.geo-metric-value span { color: var(--geo-accent); }

/* Geo modules */
.geo-modules { padding: 5rem 2.5rem; }
.geo-modules-inner { max-width: 1400px; margin: 0 auto; }
.geo-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--geo-accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.geo-section-label::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--geo-accent);
}
.geo-section-title {
  font-family: var(--display-font);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--white);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}
.geo-section-desc {
  font-size: 1rem;
  color: var(--geo-text);
  opacity: 0.7;
  max-width: 600px;
  margin-bottom: 2.5rem;
}

.geo-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.geo-module {
  padding: 2rem 1.6rem;
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: 14px;
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
}
.geo-module::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--geo-accent), var(--geo-purple));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s;
}
.geo-module:hover { border-color: rgba(0, 180, 204, 0.3); transform: translateY(-3px); }
.geo-module:hover::before { transform: scaleX(1); }
.geo-module-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(0, 180, 204, 0.1);
  border: 1px solid rgba(0, 180, 204, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.geo-module h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.5rem;
}
.geo-module p {
  font-size: 0.84rem;
  color: var(--geo-text);
  opacity: 0.65;
  line-height: 1.65;
}

/* Geo differentiators */
.geo-diff {
  padding: 5rem 2.5rem;
  background: var(--geo-surface);
  border-top: 1px solid var(--geo-border);
  border-bottom: 1px solid var(--geo-border);
}
.geo-diff-inner { max-width: 1400px; margin: 0 auto; }
.geo-diff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}
.geo-diff-item {
  display: flex;
  gap: 1rem;
  padding: 1.6rem;
  background: rgba(0, 180, 204, 0.03);
  border: 1px solid var(--geo-border);
  border-radius: 12px;
  transition: all 0.3s;
}
.geo-diff-item:hover { border-color: rgba(0, 180, 204, 0.22); }
.geo-diff-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(0, 180, 204, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}
.geo-diff-item h4 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.35rem;
}
.geo-diff-item p {
  font-size: 0.82rem;
  color: var(--geo-text);
  opacity: 0.65;
  line-height: 1.55;
}

.geo-cta {
  padding: 5rem 2.5rem;
  text-align: center;
  position: relative;
}
.geo-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 80% at 50% 50%, rgba(0, 180, 204, 0.08), transparent);
}
.geo-cta-inner { position: relative; max-width: 620px; margin: 0 auto; }

.geo-footer {
  padding: 2rem 2.5rem;
  border-top: 1px solid var(--geo-border);
  text-align: center;
}
.geo-footer-text {
  font-size: 0.75rem;
  color: var(--geo-text-muted);
}
.geo-footer-text a {
  color: var(--geo-accent);
  text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; }
  .hero-pillars { max-width: 540px; }
  .competencies-grid { grid-template-columns: 1fr; }
  .competency-visual { height: 160px; }
  .diff-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .cap-blocks { grid-template-columns: repeat(2, 1fr); }
  .geo-metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .geo-modules-grid { grid-template-columns: repeat(2, 1fr); }
  .geo-diff-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  nav { padding: 0.85rem 1.25rem; }
  .nav-logo-text { display: none; }
  .nav-links { gap: 0.1rem; }
  .nav-tab { padding: 0.45rem 0.65rem; font-size: 0.7rem; }
  .nav-tab.nav-cta { display: none; }
  .hero { padding: 5.5rem 1.25rem 3rem; }
  .hero-pillars { grid-template-columns: 1fr; }
  .competencies, .differentiators, .certs-section, .cta-section, .pillar-section, .geo-modules, .geo-metrics, .geo-diff, .geo-cta {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .competency { padding: 1.8rem; }
  .competency-visual { margin: -1.8rem -1.8rem 1.5rem; height: 140px; }
  .cap-blocks { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: 1fr; }
  .geo-metrics-grid { grid-template-columns: 1fr 1fr; }
  .geo-modules-grid { grid-template-columns: 1fr; }
  .pillar-hero { padding: 6rem 1.25rem 3rem; }
  .geo-hero { padding: 6rem 1.25rem 3rem; }
}


/* ═══════════════════════════════════════════════════════════
   V4 SHOWSTOPPER ADDITIONS
   ═══════════════════════════════════════════════════════════ */

/* SVG ANIMATED HERO BACKGROUND */
.hero-svg-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-svg-bg .grid-line {
  stroke: rgba(59, 130, 246, 0.06);
  stroke-width: 1;
  fill: none;
}

.hero-svg-bg .data-line {
  stroke: url(#dataGradient);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 10 6;
  animation: dataFlow 8s linear infinite;
}

.hero-svg-bg .data-line.alt {
  stroke-dasharray: 6 12;
  animation: dataFlow 12s linear infinite reverse;
}

@keyframes dataFlow {
  to { stroke-dashoffset: -200; }
}

.hero-svg-bg .orbit {
  fill: none;
  stroke-width: 1;
  opacity: 0.15;
}

.hero-svg-bg .orbit-particle {
  fill: var(--gold-soft);
  filter: drop-shadow(0 0 8px var(--gold));
}

@keyframes orbitMotion1 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes orbitMotion2 {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}

.orbit-group-1 {
  transform-origin: 50% 50%;
  animation: orbitMotion1 40s linear infinite;
}
.orbit-group-2 {
  transform-origin: 50% 50%;
  animation: orbitMotion2 60s linear infinite;
}
.orbit-group-3 {
  transform-origin: 50% 50%;
  animation: orbitMotion1 90s linear infinite;
}

.hero-svg-bg .pulse-ring {
  fill: none;
  stroke: var(--accent-glow);
  stroke-width: 1.5;
  opacity: 0;
  animation: pulseRing 4s ease-out infinite;
}

@keyframes pulseRing {
  0% { r: 20; opacity: 0.6; stroke-width: 2; }
  100% { r: 200; opacity: 0; stroke-width: 0.5; }
}

.hero-svg-bg .data-node {
  fill: var(--accent-glow);
  filter: drop-shadow(0 0 12px var(--accent-glow));
}

.hero-svg-bg .data-node.gold {
  fill: var(--gold-soft);
  filter: drop-shadow(0 0 12px var(--gold));
}

.hero-svg-bg .data-node.purple {
  fill: var(--aiml-glow);
  filter: drop-shadow(0 0 12px var(--aiml-glow));
}

.hero-svg-bg .data-node.teal {
  fill: var(--geo-glow);
  filter: drop-shadow(0 0 12px var(--geo-glow));
}

.scanning-beam {
  fill: url(#scanGradient);
  opacity: 0.5;
  animation: scanSweep 8s ease-in-out infinite;
}

@keyframes scanSweep {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  50% { transform: translateX(100%); opacity: 0.4; }
}

/* CAPABILITY FLOW SECTION (between pillars and differentiators) */
.capability-flow {
  padding: 6rem 2.5rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(59, 130, 246, 0.06), transparent 70%),
    var(--navy);
  position: relative;
  overflow: hidden;
}

.capability-flow::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.3), transparent);
}

.flow-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 4rem;
}
.flow-header .section-desc { margin: 0 auto; }

.flow-svg-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.flow-svg {
  width: 100%;
  height: auto;
}

.flow-node {
  fill: var(--navy-light);
  stroke-width: 2;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3));
}

.flow-node.aiml { stroke: var(--aiml-accent); }
.flow-node.biz { stroke: var(--biz-accent); }
.flow-node.geo { stroke: var(--geo-accent); }
.flow-node.de { stroke: var(--de-accent); }

.flow-node-label {
  fill: var(--white);
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 600;
  text-anchor: middle;
}

.flow-node-icon {
  font-size: 22px;
  text-anchor: middle;
  font-weight: 700;
}

.flow-node-icon.aiml { fill: var(--aiml-glow); }
.flow-node-icon.biz { fill: var(--biz-glow); }
.flow-node-icon.geo { fill: var(--geo-glow); }
.flow-node-icon.de { fill: var(--de-glow); }

.flow-center {
  fill: url(#centerGradient);
  filter: drop-shadow(0 0 24px rgba(59, 130, 246, 0.5));
}

.flow-connection {
  fill: none;
  stroke-width: 2;
  stroke-dasharray: 4 4;
  opacity: 0.6;
  animation: connectionPulse 3s ease-in-out infinite;
}

.flow-connection.aiml { stroke: var(--aiml-accent); }
.flow-connection.biz { stroke: var(--biz-accent); }
.flow-connection.geo { stroke: var(--geo-accent); }
.flow-connection.de { stroke: var(--de-accent); }

@keyframes connectionPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* PLATFORM SHOWCASE — Dashboard mockup */
.platform-showcase {
  padding: 6rem 2.5rem;
  background: var(--navy-mid);
  position: relative;
  overflow: hidden;
}

.platform-showcase::before {
  content: '';
  position: absolute;
  top: -150px; right: -150px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(0, 180, 204, 0.06), transparent 70%);
  pointer-events: none;
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.dashboard-mock {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--geo-bg);
  border: 1px solid var(--geo-border);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(0, 180, 204, 0.1),
              0 0 60px rgba(0, 180, 204, 0.08);
  transform: perspective(1000px) rotateY(-3deg) rotateX(2deg);
  transition: transform 0.6s ease;
}

.dashboard-mock:hover {
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
}

.dashboard-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--geo-border);
}

.dashboard-titlebar .dot {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.dashboard-titlebar .dot.r { background: #ff5f57; }
.dashboard-titlebar .dot.y { background: #ffbd2e; }
.dashboard-titlebar .dot.g { background: #28ca41; }
.dashboard-titlebar .url {
  flex: 1;
  text-align: center;
  font-size: 0.7rem;
  color: var(--geo-text);
  opacity: 0.5;
  font-family: 'SF Mono', Consolas, monospace;
}

.dashboard-body {
  padding: 24px;
}

.dashboard-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.dashboard-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
}

.dashboard-subtitle {
  font-size: 0.7rem;
  color: var(--geo-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.dashboard-metric {
  padding: 12px;
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: 8px;
}

.dashboard-metric-label {
  font-size: 0.6rem;
  color: var(--geo-text);
  opacity: 0.5;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.dashboard-metric-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}

.dashboard-metric-value .accent {
  color: var(--geo-accent);
}

.dashboard-chart {
  height: 180px;
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

.dashboard-chart svg {
  width: 100%;
  height: 100%;
}

.chart-grid-line {
  stroke: var(--geo-border);
  stroke-width: 0.5;
  stroke-dasharray: 2 4;
}

.chart-area {
  fill: url(#chartGradient);
  opacity: 0.6;
}

.chart-line {
  fill: none;
  stroke: var(--geo-accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px var(--geo-glow));
}

.chart-point {
  fill: var(--geo-glow);
  filter: drop-shadow(0 0 6px var(--geo-glow));
}

.chart-bar {
  fill: var(--geo-accent);
  opacity: 0.7;
  transition: opacity 0.3s;
}

.chart-bar.purple { fill: var(--geo-purple); }

@keyframes chartPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* TECH STACK BAND */
.tech-stack {
  padding: 4rem 2.5rem;
  background: var(--navy);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tech-stack-inner {
  max-width: 1400px;
  margin: 0 auto;
  text-align: center;
}

.tech-stack-label {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 2rem;
}

.tech-stack-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray-300);
  transition: color 0.3s;
  cursor: default;
}

.tech-item:hover { color: var(--white); }

.tech-item-icon {
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--accent-glow);
}

/* RESPONSIVE V4 */
@media (max-width: 1024px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .dashboard-mock { transform: none; }
}
@media (max-width: 768px) {
  .capability-flow, .platform-showcase, .tech-stack {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .dashboard-metrics { grid-template-columns: repeat(2, 1fr); }
  .tech-stack-grid { gap: 1.5rem; }
}


/* ═══════════════════════════════════════════════════════════
   AI/ML PAGE ENHANCEMENTS (v4.1)
   ═══════════════════════════════════════════════════════════ */

/* SVG-animated hero background for AI/ML page */
.aiml-svg-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.aiml-svg-bg .neural-line {
  stroke: url(#neuralGradient);
  stroke-width: 1.5;
  fill: none;
  opacity: 0.5;
  stroke-dasharray: 6 4;
  animation: neuralFlow 6s linear infinite;
}

.aiml-svg-bg .neural-line.alt {
  stroke-dasharray: 4 8;
  animation: neuralFlow 9s linear infinite reverse;
}

@keyframes neuralFlow {
  to { stroke-dashoffset: -200; }
}

.aiml-svg-bg .neural-node {
  fill: var(--aiml-glow);
  filter: drop-shadow(0 0 10px var(--aiml-glow));
}

.aiml-svg-bg .neural-node.large {
  fill: var(--aiml-accent);
  filter: drop-shadow(0 0 16px var(--aiml-accent));
}

.aiml-svg-bg .neural-node.accent {
  fill: var(--accent-glow);
  filter: drop-shadow(0 0 12px var(--accent-glow));
}

@keyframes neuralPulse {
  0%, 100% { opacity: 0.5; r: 4; }
  50% { opacity: 1; r: 6; }
}

.aiml-svg-bg .neural-node-pulse {
  animation: neuralPulse 3s ease-in-out infinite;
}

.aiml-svg-bg .layer-rect {
  fill: none;
  stroke: rgba(168, 85, 247, 0.15);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  rx: 8;
}

/* AI ASSISTANT TERMINAL MOCKUP SECTION */
.ai-assistant-section {
  padding: 6rem 2.5rem;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(168, 85, 247, 0.07), transparent 70%),
    var(--navy-mid);
  position: relative;
  overflow: hidden;
}

.assistant-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 4rem;
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
}

.terminal-mock {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0B0F1C;
  border: 1px solid rgba(168, 85, 247, 0.15);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(168, 85, 247, 0.1),
    0 0 60px rgba(168, 85, 247, 0.08);
  font-family: 'SF Mono', Consolas, monospace;
  transform: perspective(1200px) rotateY(3deg) rotateX(-2deg);
  transition: transform 0.6s ease;
}

.terminal-mock:hover {
  transform: perspective(1200px) rotateY(0deg) rotateX(0deg);
}

.terminal-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}

.terminal-titlebar .dot {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.terminal-titlebar .dot.r { background: #ff5f57; }
.terminal-titlebar .dot.y { background: #ffbd2e; }
.terminal-titlebar .dot.g { background: #28ca41; }

.terminal-titlebar-text {
  flex: 1;
  text-align: center;
  font-size: 0.7rem;
  color: var(--gray-500);
  letter-spacing: 0.05em;
}

.terminal-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.65rem;
  color: var(--aiml-glow);
}

.terminal-status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--aiml-glow);
  box-shadow: 0 0 8px var(--aiml-glow);
}

.terminal-body {
  padding: 1.8rem;
  min-height: 360px;
  font-size: 0.85rem;
  line-height: 1.7;
}

.terminal-line {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.terminal-prompt {
  color: var(--aiml-glow);
  font-weight: 700;
  flex-shrink: 0;
}

.terminal-prompt.assistant {
  color: var(--accent-glow);
}

.terminal-text {
  color: var(--gray-100);
}

.terminal-text.muted {
  color: var(--gray-500);
}

.terminal-text.highlight {
  color: var(--gold-soft);
}

.terminal-block {
  margin: 0.8rem 0 0.8rem 1.6rem;
  padding: 0.9rem 1rem;
  background: rgba(168, 85, 247, 0.05);
  border-left: 2px solid var(--aiml-accent);
  border-radius: 6px;
  color: var(--gray-100);
  font-size: 0.82rem;
}

.terminal-block-label {
  font-size: 0.64rem;
  color: var(--aiml-glow);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.4rem;
}

.cursor-blink {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--aiml-glow);
  margin-left: 2px;
  vertical-align: middle;
  animation: cursorBlink 1s ease-in-out infinite;
}

@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* CAPABILITY DOMAINS HEXMAP */
.capability-domains {
  padding: 6rem 2.5rem;
  background: var(--navy);
  position: relative;
  overflow: hidden;
}

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

.domain-card {
  position: relative;
  padding: 2rem 1.5rem;
  background: linear-gradient(145deg, var(--navy-light), var(--navy-mid));
  border: 1px solid rgba(168, 85, 247, 0.12);
  border-radius: 14px;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.domain-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.domain-card:hover {
  transform: translateY(-4px);
  border-color: rgba(168, 85, 247, 0.35);
  box-shadow: 0 16px 40px rgba(168, 85, 247, 0.15);
}

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

.domain-icon {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  border-radius: 14px;
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--aiml-glow);
}

.domain-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 0.4rem;
}

.domain-card p {
  font-size: 0.78rem;
  color: var(--gray-500);
  line-height: 1.55;
}

/* AI/ML page responsive */
@media (max-width: 1024px) {
  .assistant-grid { grid-template-columns: 1fr; }
  .terminal-mock { transform: none; }
  .domains-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ai-assistant-section, .capability-domains {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .domains-grid { grid-template-columns: 1fr; }
  .terminal-body { padding: 1.2rem; font-size: 0.78rem; }
}


/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════ */

.contact-page {
  background: var(--navy);
}

/* Orlando-themed hero with skyline silhouette and city glow */
.contact-hero {
  position: relative;
  padding: 8rem 2.5rem 6rem;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* Sky gradient — sunset over Orlando */
.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(212, 168, 83, 0.18), transparent 60%),
    radial-gradient(ellipse 70% 40% at 50% 90%, rgba(168, 85, 247, 0.12), transparent 70%),
    linear-gradient(180deg,
      var(--navy) 0%,
      #0F1F38 35%,
      #1A2845 60%,
      #2A3556 80%,
      #3D4570 100%);
  z-index: 1;
}

/* Stars */
.contact-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, white, transparent),
    radial-gradient(1px 1px at 28% 32%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 45% 14%, white, transparent),
    radial-gradient(1px 1px at 62% 25%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 78% 40%, white, transparent),
    radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 18% 45%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 35% 55%, rgba(255,255,255,0.5), transparent);
  z-index: 2;
  opacity: 0.9;
  animation: starTwinkle 4s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* Orlando skyline — SVG silhouette positioned at bottom of hero */
.skyline-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 3;
  pointer-events: none;
}

.skyline-building {
  fill: var(--navy);
  opacity: 0.95;
}

.skyline-building.back {
  fill: rgba(10, 22, 40, 0.7);
  opacity: 0.7;
}

.building-light {
  fill: var(--gold-soft);
  opacity: 0.85;
  animation: lightFlicker 8s ease-in-out infinite;
}

.building-light:nth-child(odd) {
  animation-delay: 1.5s;
  fill: var(--accent-glow);
}

.building-light:nth-child(3n) {
  animation-delay: 3s;
}

@keyframes lightFlicker {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 0.4; }
}

/* Aircraft beacon (Orlando = aviation hub) */
.beacon {
  fill: var(--accent-glow);
  filter: drop-shadow(0 0 8px var(--accent-glow));
  animation: beaconBlink 2s ease-in-out infinite;
}

@keyframes beaconBlink {
  0%, 80%, 100% { opacity: 0.2; }
  40%, 60% { opacity: 1; }
}

.contact-hero-inner {
  position: relative;
  z-index: 4;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.contact-hero h1 {
  font-family: var(--display-font);
  font-size: clamp(2.6rem, 5vw, 4rem);
  line-height: 1.05;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.contact-hero h1 em {
  font-style: italic;
  background: linear-gradient(135deg, var(--gold-soft), var(--accent-glow));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.contact-hero-sub {
  font-size: 1.15rem;
  color: var(--gray-100);
  max-width: 640px;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.contact-hero-location {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  background: rgba(212, 168, 83, 0.1);
  border: 1px solid rgba(212, 168, 83, 0.3);
  border-radius: 100px;
  font-size: 0.78rem;
  color: var(--gold-soft);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.contact-hero-location::before {
  content: '◉';
  color: var(--gold);
}

/* Contact main grid */
.contact-main {
  padding: 5rem 2.5rem;
  background: var(--navy-mid);
  position: relative;
}

.contact-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 3rem;
  align-items: start;
}

/* Contact info card */
.contact-info-card {
  padding: 2.5rem;
  background: linear-gradient(145deg, var(--navy-light), var(--navy-mid));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.contact-info-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

.contact-info-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-glow);
  margin-bottom: 0.75rem;
}

.contact-info-title {
  font-family: var(--display-font);
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.contact-info-subtitle {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-bottom: 2rem;
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s;
}

.contact-detail:last-child {
  border-bottom: none;
}

.contact-detail:hover {
  transform: translateX(3px);
}

.contact-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--accent-glow);
  transition: all 0.3s;
}

.contact-detail:hover .contact-icon {
  background: rgba(59, 130, 246, 0.18);
  border-color: rgba(59, 130, 246, 0.4);
}

.contact-content-wrap {
  flex: 1;
  min-width: 0;
}

.contact-content-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-500);
  margin-bottom: 0.2rem;
}

.contact-content-value {
  font-size: 0.95rem;
  color: var(--white);
  font-weight: 500;
  line-height: 1.5;
  word-break: break-word;
}

.contact-content-value a {
  color: var(--white);
  text-decoration: none;
  transition: color 0.3s;
}

.contact-content-value a:hover {
  color: var(--accent-glow);
}

.contact-certs {
  display: flex;
  gap: 0.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.contact-cert-pill {
  padding: 0.4rem 0.9rem;
  background: rgba(212, 168, 83, 0.08);
  border: 1px solid rgba(212, 168, 83, 0.2);
  border-radius: 100px;
  font-size: 0.7rem;
  color: var(--gold-soft);
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* Right side: map + direct contact card */
.contact-right {
  display: grid;
  gap: 2rem;
}

.contact-map {
  height: 450px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  position: relative;
  background: var(--navy);
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.85);
}

.contact-map-overlay {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(10, 22, 40, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  gap: 1rem;
}

.contact-map-label {
  font-size: 0.78rem;
  color: var(--gray-100);
  flex: 1;
  min-width: 0;
}

.contact-map-label strong {
  color: var(--white);
  display: block;
  margin-bottom: 2px;
  font-size: 0.85rem;
}

.contact-map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  color: var(--accent-glow);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.3s;
  flex-shrink: 0;
}

.contact-map-link:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
}

/* OSM iframe attribution credit — minimal navy strip in the bottom-right
   corner that covers the iframe's verbose attribution bar. "© OpenStreetMap
   contributors" with the copyright link is legally required by the ODbL
   license; the optional "Report a problem", "Make a Donation", and "Website
   and API terms" links are not reachable via CSS (cross-origin iframe), so
   we cover them with this opaque strip and provide our own minimal credit. */
.contact-map-osm-credit {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 22px;
  padding: 0 10px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 1;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
  pointer-events: none;
}
.contact-map-osm-credit a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  pointer-events: auto;
}
.contact-map-osm-credit a:hover {
  text-decoration: underline;
  color: rgba(255, 255, 255, 0.85);
}

/* Direct contact card — replaced the mailto: contact form. A form that
   fails silently on locked-down machines is worse than plainly displayed
   contact information that always works. See docs/FIX_ROUND_BATCH1.md */
.contact-direct-card {
  padding: 2.5rem;
  background: linear-gradient(145deg, var(--navy-light), var(--navy-mid));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

.contact-direct-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
}

.contact-direct-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.75rem;
}

.contact-direct-title {
  font-family: var(--display-font);
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
}

.contact-direct-invite {
  font-size: 0.95rem;
  color: var(--gray-300);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* Email/phone as large tap-friendly links. The visible link text is the
   address/number itself so it remains selectable and copyable where
   mailto:/tel: handlers are unavailable (locked-down federal machines).
   48px min-height exceeds the 44px touch minimum at every width. */
.contact-direct-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 48px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: var(--white);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background 0.3s, border-color 0.3s;
}
.contact-direct-link:hover,
.contact-direct-link:focus-visible {
  background: rgba(96, 165, 250, 0.08);
  border-color: rgba(96, 165, 250, 0.35);
}
.contact-direct-link-icon {
  flex-shrink: 0;
  color: var(--accent-glow);
  font-size: 1.05rem;
}

.contact-direct-address {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: var(--gray-300);
  line-height: 1.65;
}

.contact-direct-note {
  margin-top: 1.4rem;
  font-size: 0.8rem;
  color: var(--gray-300);
}

/* Contact page responsive */
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .contact-hero { padding: 6rem 1.25rem 4rem; min-height: 50vh; }
  .contact-main { padding: 3rem 1.25rem; }
  .contact-info-card, .contact-direct-card { padding: 1.8rem; }
  .contact-map { height: 350px; }
}

/* ═══════════════════════════════════════════════════════════
   PILLARS SECTION — VIDEO BACKGROUND LAYER
   ═══════════════════════════════════════════════════════════ */

/* Note: .competencies base rules are defined in the FOUR PILLARS PHASING STAGE
   block above (aspect-ratio, flex layout, etc.). Pillars-bg layers below. */

/* Video element — Firefly-produced ambient loop */
.pillars-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anchor to the top of the source frame so the ocean-wave detail at the
     top of the video reads through. With object-fit: cover any
     aspect-ratio mismatch crops at the bottom of the frame instead. */
  object-position: center top;
  z-index: 0;
  /* 0.7 below 1200px; raised to 0.8 at desktop (below) after Fidel's
     visual review found the Batch 2 treatment crushed the video. */
  opacity: 0.7;
  pointer-events: none;
}

@media (min-width: 1200px) {
  /* Desktop vibrancy: 0.85 pairs with the lightened scrim stops below.
     Final tune, owner-reviewed on the live loop (Fidel, 2026-07-08). */
  .pillars-video { opacity: 0.85; }
}

/* Contrast scrim — ALL widths, tuned for MAXIMUM video vibrancy.
   Owner-accepted contrast deviation (Fidel, live-loop review,
   2026-07-08): over the video, pillar LINK text falls below 4.5:1
   against the slide band's p99 brightness (3.1-3.9:1) while passing
   at p95, and the teal HEADER LABEL falls below 4.5:1 throughout the
   top sunlight band (3.05:1 vs peak, 3.5:1 at p95, desktop). Body
   text and headings still hold their AA thresholds at band p99 in
   every zone (6.6:1+). Accepted as a documented trade for hero
   vibrancy; audit findings B-2/B-3 are PARTIALLY ACCEPTED (not open)
   to this extent. Revisit if hero text styles change in Phase 2.
   Full per-band numbers in the vibrancy-nudge commit body.
   Decorative overlay: absolute + pointer-events none per CLAUDE.md
   section 2. See docs/AUDIT_FINDINGS_2026-07.md B-2/B-3. */
.competencies::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.62) 25%,
    rgba(0, 0, 0, 0.38) 38%,
    rgba(0, 0, 0, 0.38) 70%,
    rgba(0, 0, 0, 0.22) 100%);
  z-index: 3;
  pointer-events: none;
}

/* CSS-only animated background — ocean to sky with rising metrics.
   Sits above the video (z-index 0) and below the HUD (z-index 4) and
   pillar content (z-index 5). */
.pillars-bg-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

/* Layer 1: Ocean-to-sky vertical gradient with subtle drift */
.pillars-bg-gradient {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 100% 70% at 50% 100%,
      rgba(15, 31, 56, 0.7) 0%,
      rgba(26, 42, 69, 0.5) 40%,
      rgba(40, 58, 100, 0.3) 70%,
      transparent 100%),
    linear-gradient(180deg,
      rgba(20, 38, 70, 0.5) 0%,
      rgba(40, 58, 100, 0.4) 35%,
      rgba(70, 90, 140, 0.35) 65%,
      rgba(100, 120, 170, 0.25) 90%,
      rgba(212, 168, 83, 0.15) 100%);
  animation: gradientDrift 30s ease-in-out infinite;
}

@keyframes gradientDrift {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2%) scale(1.02); }
}

/* Layer 2: Horizontal cloud bands */
.pillars-bg-clouds {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 80% 8% at 50% 30%, rgba(96, 165, 250, 0.06), transparent 50%),
    radial-gradient(ellipse 70% 6% at 30% 50%, rgba(192, 132, 252, 0.04), transparent 50%),
    radial-gradient(ellipse 90% 10% at 70% 70%, rgba(0, 212, 240, 0.05), transparent 50%);
  animation: cloudDrift 60s ease-in-out infinite;
}

@keyframes cloudDrift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-3%); }
}

/* Layer 3: Rising particles — the "neon analytics metrics".
   Container opacity 0.75 — softens the firefly layer ~25% against the
   richer Firefly-produced video background while keeping particles legible. */
.pillars-bg-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.75;
}

.metric-particle {
  position: absolute;
  bottom: -10%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  filter: blur(0.5px);
  animation: riseUp 18s linear infinite;
}

.metric-particle.purple {
  background: var(--aiml-glow);
  box-shadow: 0 0 24px var(--aiml-glow), 0 0 48px var(--aiml-accent);
}
.metric-particle.blue {
  background: var(--accent-glow);
  box-shadow: 0 0 24px var(--accent-glow), 0 0 48px var(--accent);
}
.metric-particle.teal {
  background: var(--geo-glow);
  box-shadow: 0 0 24px var(--geo-glow), 0 0 48px var(--geo-accent);
}
.metric-particle.cyan {
  background: var(--de-glow);
  box-shadow: 0 0 24px var(--de-glow), 0 0 48px var(--de-accent);
}
.metric-particle.gold {
  background: var(--gold-soft);
  box-shadow: 0 0 24px var(--gold-soft), 0 0 48px var(--gold);
}

@keyframes riseUp {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  92% {
    opacity: 0.95;
  }
  100% {
    transform: translateY(-110vh) translateX(20px);
    opacity: 0;
  }
}

/* Particle position randomization */
.metric-particle:nth-child(1)  { left: 5%;  animation-delay: 0s;    animation-duration: 16s; }
.metric-particle:nth-child(2)  { left: 12%; animation-delay: 3s;    animation-duration: 22s; }
.metric-particle:nth-child(3)  { left: 18%; animation-delay: 7s;    animation-duration: 19s; }
.metric-particle:nth-child(4)  { left: 25%; animation-delay: 1s;    animation-duration: 24s; }
.metric-particle:nth-child(5)  { left: 33%; animation-delay: 9s;    animation-duration: 17s; }
.metric-particle:nth-child(6)  { left: 41%; animation-delay: 5s;    animation-duration: 21s; }
.metric-particle:nth-child(7)  { left: 48%; animation-delay: 12s;   animation-duration: 18s; }
.metric-particle:nth-child(8)  { left: 56%; animation-delay: 2s;    animation-duration: 23s; }
.metric-particle:nth-child(9)  { left: 64%; animation-delay: 8s;    animation-duration: 20s; }
.metric-particle:nth-child(10) { left: 72%; animation-delay: 4s;    animation-duration: 25s; }
.metric-particle:nth-child(11) { left: 80%; animation-delay: 11s;   animation-duration: 19s; }
.metric-particle:nth-child(12) { left: 88%; animation-delay: 6s;    animation-duration: 22s; }
.metric-particle:nth-child(13) { left: 95%; animation-delay: 14s;   animation-duration: 17s; }
.metric-particle:nth-child(14) { left: 22%; animation-delay: 15s;   animation-duration: 24s; }
.metric-particle:nth-child(15) { left: 60%; animation-delay: 10s;   animation-duration: 21s; }
.metric-particle:nth-child(16) { left: 38%; animation-delay: 13s;   animation-duration: 18s; }
.metric-particle:nth-child(17) { left: 75%; animation-delay: 16s;   animation-duration: 23s; }
.metric-particle:nth-child(18) { left: 8%;  animation-delay: 6.5s;  animation-duration: 26s; }

/* Layer 4: Floating analytic glyphs — abstract metric indicators */
.pillars-bg-glyphs {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.metric-glyph {
  position: absolute;
  bottom: -5%;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(96, 165, 250, 0.65);
  letter-spacing: 0.1em;
  text-shadow: 0 0 12px currentColor, 0 0 24px currentColor;
  animation: glyphFloat 28s linear infinite;
  white-space: nowrap;
}

.metric-glyph.gold { color: rgba(232, 201, 122, 0.7); }
.metric-glyph.teal { color: rgba(0, 212, 240, 0.7); }
.metric-glyph.purple { color: rgba(192, 132, 252, 0.65); }

@keyframes glyphFloat {
  0% {
    transform: translateY(0) translateX(0) rotate(-2deg);
    opacity: 0;
  }
  15% {
    opacity: 0.6;
  }
  85% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-110vh) translateX(40px) rotate(2deg);
    opacity: 0;
  }
}

.metric-glyph:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 30s; }
.metric-glyph:nth-child(2) { left: 30%; animation-delay: 8s; animation-duration: 32s; }
.metric-glyph:nth-child(3) { left: 50%; animation-delay: 4s; animation-duration: 28s; }
.metric-glyph:nth-child(4) { left: 70%; animation-delay: 12s; animation-duration: 34s; }
.metric-glyph:nth-child(5) { left: 85%; animation-delay: 16s; animation-duration: 30s; }
.metric-glyph:nth-child(6) { left: 20%; animation-delay: 20s; animation-duration: 33s; }
.metric-glyph:nth-child(7) { left: 60%; animation-delay: 24s; animation-duration: 29s; }

/* Note: .competencies > .section-inner z-index/layout is defined in the
   FOUR PILLARS TWO-LAYER LAYOUT block above (z-index: 5). */

/* Reduce particle/glyph density below the HUD-on/off boundary; video kept on
   for visual continuity (the dark overlay below 1200px keeps text contrast —
   see COMPREHENSIVE MOBILE AUDIT block). */
@media (max-width: 1199.98px) {
  .metric-particle:nth-child(n+10) { display: none; }
  .metric-glyph:nth-child(n+4) { display: none; }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pillars-bg-gradient,
  .pillars-bg-clouds,
  .metric-particle,
  .metric-glyph {
    animation: none;
  }
  .pillars-video { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   CAPABILITY STATEMENT PAGE
   Document-style page for procurement audiences. No video, no
   heavy animation — clean, scannable, fast-reading layout.
   ═══════════════════════════════════════════════════════════ */

.cap-hero {
  position: relative;
  padding: 8rem 2.5rem 3rem;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.cap-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.cap-hero h1 {
  font-family: var(--display-font);
  font-size: clamp(2.4rem, 4.2vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 0.6rem;
  color: var(--white);
}
.cap-hero-tagline {
  font-size: 1.05rem;
  color: var(--gray-100);
  max-width: 720px;
  line-height: 1.55;
}

.cap-main {
  padding: 3.5rem 2.5rem 5rem;
}
.cap-main-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Section headings shared */
.cap-section h2 {
  font-family: var(--display-font);
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  margin-bottom: 1.1rem;
  color: var(--white);
  letter-spacing: -0.01em;
}
.cap-section > p {
  color: var(--gray-100);
  margin-bottom: 1.5rem;
  max-width: 760px;
  line-height: 1.6;
}

/* Key Facts card */
.cap-facts-card {
  padding: 2rem 2.25rem;
  background: linear-gradient(145deg, var(--navy-light), var(--navy-mid));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.cap-facts-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--gold));
}
.cap-facts-card h2 {
  font-family: var(--display-font);
  font-size: 1.35rem;
  color: var(--white);
  margin-bottom: 1.4rem;
  letter-spacing: -0.005em;
}
.cap-facts-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.85rem 2rem;
  align-items: baseline;
  margin: 0;
}
.cap-facts-grid dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-300);
  white-space: nowrap;
}
.cap-facts-grid dd {
  margin: 0;
  font-size: 1rem;
  color: var(--white);
  line-height: 1.45;
}

/* Competencies & Differentiators list */
.cap-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cap-list li {
  display: flex;
  gap: 0.85rem;
  padding: 0.95rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cap-list li:first-child,
.cap-list li:nth-child(2) {
  border-top: none;
  padding-top: 0;
}
.cap-list-marker {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 6px;
  color: var(--accent-glow);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cap-list-body strong {
  display: block;
  font-size: 0.98rem;
  color: var(--white);
  margin-bottom: 0.2rem;
  font-weight: 600;
}
.cap-list-body span {
  font-size: 0.88rem;
  color: var(--gray-100);
  line-height: 1.5;
}

/* Past performance */
.cap-perf {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.cap-perf-item {
  padding: 1.25rem 1.5rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
}
.cap-perf-item-title {
  display: block;
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.cap-perf-item ul {
  list-style: disc;
  padding-left: 1.25rem;
  color: var(--gray-100);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0;
}
.cap-perf-item ul li + li { margin-top: 0.25rem; }

/* Download section — prominent */
.cap-download {
  padding: 2.5rem 2.25rem;
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.08), rgba(212, 168, 83, 0.04));
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 16px;
  text-align: center;
}
.cap-download h2 { margin-bottom: 0.75rem; }
.cap-download > p {
  color: var(--gray-100);
  margin: 0 auto 1.75rem;
  max-width: 540px;
  line-height: 1.55;
}
.cap-download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.05rem 2.4rem;
  min-height: 48px;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--white);
  text-decoration: none;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 28px rgba(59, 130, 246, 0.35);
}
.cap-download-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 34px rgba(59, 130, 246, 0.5);
}
.cap-download-button:focus-visible {
  outline: 2px solid var(--accent-glow);
  outline-offset: 3px;
}
.cap-download-button .download-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.cap-download-meta {
  display: block;
  margin-top: 0.95rem;
  font-size: 0.78rem;
  color: var(--gray-300);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Points of contact */
.cap-poc {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 1rem;
  line-height: 1.6;
}
.cap-poc strong {
  color: var(--white);
  font-size: 1.05rem;
  font-weight: 600;
}
.cap-poc a {
  color: var(--accent-glow);
  text-decoration: none;
}
.cap-poc a:hover { text-decoration: underline; }

/* Mobile */
@media (max-width: 768px) {
  .cap-hero { padding: 6rem 1.25rem 2.5rem; }
  .cap-main { padding: 2.5rem 1.25rem 4rem; }
  .cap-main-inner { gap: 2rem; }
  .cap-facts-card { padding: 1.6rem 1.4rem; }
  .cap-facts-grid {
    grid-template-columns: 1fr;
    gap: 0.4rem 0;
  }
  .cap-facts-grid dt { margin-top: 0.75rem; }
  .cap-facts-grid dt:first-of-type { margin-top: 0; }
  .cap-list { grid-template-columns: 1fr; gap: 0; }
  .cap-list li:nth-child(2) {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 0.95rem;
  }
  .cap-download { padding: 1.75rem 1.25rem; }
  .cap-download-button {
    padding: 1rem 1.6rem;
    font-size: 1rem;
    width: 100%;
  }
  .cap-perf-item { padding: 1rem 1.15rem; }
}

/* ═══════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE AUDIT — consolidated mobile fixes
   - Logo sized down so it fits a normal header bar
   - Hamburger menu replaces the horizontal nav-links
   - Pillars section clears the fixed nav and gets a dark overlay
     above the video so text stays readable
   - Tighter spacing/typography on smaller phones
   ═══════════════════════════════════════════════════════════ */

/* Hamburger toggle — desktop hidden, mobile visible */
.nav-hamburger {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  transition: background 0.2s, border-color 0.2s;
}
.nav-hamburger:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(96, 165, 250, 0.4); }
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
body.menu-open .nav-hamburger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav-hamburger span:nth-child(2) { opacity: 0; }
body.menu-open .nav-hamburger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu overlay — fills the viewport below the nav */
.mobile-menu {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 95;
  background: rgba(10, 22, 40, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 5.5rem 1.5rem 2rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  overflow-y: auto;
  display: none; /* removed entirely on desktop, set to block by media query */
}
body.menu-open .mobile-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.mobile-menu-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-width: 480px;
  margin: 0 auto;
}
.mobile-menu-link {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 0.95rem 1.1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  color: var(--gray-100);
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.mobile-menu-link:hover,
.mobile-menu-link:focus-visible {
  background: rgba(96, 165, 250, 0.1);
  border-color: rgba(96, 165, 250, 0.35);
  color: var(--white);
}
.mobile-menu-link.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(96, 165, 250, 0.45);
  color: var(--white);
}
.mobile-menu-link.mobile-menu-cta {
  margin-top: 0.5rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  border-color: transparent;
  color: var(--white);
  font-weight: 600;
  text-align: center;
}

/* Nav mode switch — desktop horizontal nav vs. hamburger menu.
   Boundary at 1024px because real-device testing showed phone landscape
   (~788px) and compressed desktop windows below ~1024px don't have room
   for all eight nav items in the horizontal layout. iPad landscape
   (1024px exactly) lands on the hamburger side of the boundary. */
@media (max-width: 1024px) {
  /* Shrink the desktop logo so it fits the header bar alongside the hamburger button */
  .sirius-logo-img { width: auto; height: 44px; }
  nav.scrolled .sirius-logo-img { width: auto; height: 40px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .mobile-menu { display: block; }
  body.menu-open { overflow: hidden; }
}

/* Compressed-desktop transition zone — between the hamburger boundary (1024px)
   and the width where the full nav comfortably fits (~1200px), the GET IN TOUCH
   button gets clipped at the right edge and reads as broken. Hide it cleanly
   in that band; CONTACT remains visible as the path to the contact page.
   Scoped to .nav-tab.nav-cta so the mobile-menu and any in-page GET IN TOUCH
   CTAs are unaffected. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .nav-tab.nav-cta { display: none; }
}

/* Tap-target sizing — stays at 768px because these are touch-device-specific
   ergonomic adjustments, not nav-mode toggles. Touch-sized phones/tablets at
   ≤768px get the 44px min-height; pointer-driven laptops at 769-1024 (now
   showing the hamburger menu) don't need the larger tap targets. */
@media (max-width: 768px) {
  .btn-primary, .btn-ghost { min-height: 44px; }
  .footer-links a { padding: 0.4rem 0; display: inline-block; }
}

/* Pillars-specific overrides below the HUD-on/off boundary. The contrast
   scrim moved to the base VIDEO BACKGROUND LAYER block (all widths) in
   Batch 2 (see docs/FIX_ROUND_BATCH2.md); only the reduced-motion video
   override and tap-target rules remain here. */
@media (max-width: 1199.98px) {
  /* Video stays visible at these widths (deliberately overrides the earlier
     `display: none` in prefers-reduced-motion, for visual continuity).
     Opacity now comes from the base rule (0.7 at all widths). The
     reduced-motion override is audit finding B-4, currently unassigned. */
  .pillars-video { display: block; }

  /* Tap-target sizing for the pillar CTA on touch-friendly viewports */
  .pillar-slide-link { padding: 0.5rem 0; min-height: 44px; }
}

/* Smallest phones — iPhone SE / older Androids */
@media (max-width: 480px) {
  nav { padding: 0.7rem 1rem; }
  .sirius-logo-img { height: 36px; }
  nav.scrolled .sirius-logo-img { height: 32px; }
  .nav-hamburger { width: 40px; height: 40px; }

  /* Tighten section padding on the smallest viewports */
  .hero { padding: 5rem 1rem 2.5rem; }
  .pillar-hero, .geo-hero { padding: 5.5rem 1rem 2.5rem; }
  .competencies > .section-inner { padding: 5rem 1rem 2.5rem; }
  .competencies-header .section-title { font-size: 1.45rem; }
  .pillar-slide-content h3 { font-size: 1.35rem; }
  .pillar-slide-content p { font-size: 0.95rem; }
  .pillar-slide-icon { width: 70px; height: 70px; font-size: 1.75rem; }

  /* Capability statement, hero, footer — keep content readable, drop extra padding */
  .cap-hero { padding: 5.5rem 1rem 2rem; }
  .cap-main { padding: 2rem 1rem 3rem; }
  .footer-inner, footer { padding-left: 1rem; padding-right: 1rem; }
  .footer-info { font-size: 0.72rem; }

  /* Contact map: keep aspect reasonable on small phones */
  .contact-map { height: 280px; }
}