/* ==========================================================================
   Apollo Growth Strategies — custom.css
   Paste into WordPress Customizer → Additional CSS (or enqueue as a stylesheet)
   after the Elementor conversion is complete.

   Design language: Apple-grade minimalism (photography-first, single accent,
   near-invisible chrome) fused with an Alaska-winter / aurora-borealis motif
   (deep night navy, drifting aurora gradients, snowfall, mountain silhouettes).
   ========================================================================== */

/* Google Fonts — the static build loaded these via a link tag in the page
   head, which WordPress has no way to know about. Loading them here via
   @import means the whole design (Inter body copy, Playfair Display
   headings) shows up correctly without editing theme enqueue code. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Night / surface */
  --agx-void: #060a13;
  --agx-navy: #0a1830;
  --agx-navy-2: #0d2038;
  --agx-navy-3: #071122;
  --agx-navy-soft: #12233f;

  /* Light surfaces */
  --agx-snow: #ffffff;
  --agx-frost: #f4f7fb;
  --agx-frost-2: #eaf0f7;
  --agx-pearl: #fbfcfe;
  --agx-hairline: #e2e8f1;
  --agx-hairline-dark: rgba(255, 255, 255, 0.12);

  /* Text */
  --agx-ink: #0c1524;
  --agx-ink-muted: #4a5872;
  --agx-ink-faint: #7c879b;
  --agx-white-muted: #c6d2e3;
  --agx-white-faint: #8fa0bb;

  /* Brand accent (from Apollo logo) */
  --agx-blue: #1f63ac;
  --agx-blue-bright: #2f7fd6;
  --agx-blue-deep: #143f6e;
  --agx-blue-sky: #5aa9f0;
  --agx-slate: #55677f;
  --agx-slate-light: #7c8ba3;

  /* Aurora accents */
  --agx-aurora-teal: #2dd4bf;
  --agx-aurora-green: #46e08a;
  --agx-aurora-violet: #8b7cf6;
  --agx-aurora-pink: #c084fc;

  /* Radii */
  --agx-radius-sm: 8px;
  --agx-radius-md: 14px;
  --agx-radius-lg: 22px;
  --agx-radius-xl: 30px;
  --agx-radius-pill: 999px;

  /* Elevation */
  --agx-shadow-card: 0 1px 2px rgba(10, 20, 40, 0.04), 0 12px 32px -16px rgba(10, 20, 40, 0.12);
  --agx-shadow-card-hover: 0 18px 48px -18px rgba(10, 20, 40, 0.22);
  --agx-shadow-product: 3px 10px 40px 0 rgba(6, 10, 19, 0.35);
  --agx-shadow-glow-blue: 0 0 0 1px rgba(31, 99, 172, 0.18), 0 18px 40px -16px rgba(31, 99, 172, 0.35);
  --agx-shadow-glow-aurora: 0 0 0 1px rgba(45, 212, 191, 0.18), 0 18px 44px -16px rgba(139, 124, 246, 0.35);

  /* Motion */
  --agx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --agx-duration: 0.6s;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--agx-ink);
  background: var(--agx-snow);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.font-display {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.03em;
}

::selection {
  background: var(--agx-blue);
  color: #ffffff;
}

/* Focus visibility everywhere — accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--agx-blue-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -60px;
  background: var(--agx-navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--agx-radius-sm);
  z-index: 999;
  transition: top 0.25s var(--agx-ease);
  font-weight: 600;
  font-size: 0.875rem;
}
.skip-link:focus {
  top: 1rem;
}

/* Custom scrollbar (progressive enhancement) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--agx-frost); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--agx-blue), var(--agx-aurora-teal));
  border-radius: 999px;
  border: 3px solid var(--agx-frost);
}

/* --------------------------------------------------------------------------
   3. SITE HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: 84px;
  display: flex;
  align-items: center;
  /* A light, permanent frosted-glass tint (not just after scroll) so the
     logo and nav text stay legible from the first frame, regardless of
     how bright the photo/video behind them happens to be at that moment. */
  background: rgba(6, 10, 19, 0.24);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.4s var(--agx-ease), border-color 0.4s var(--agx-ease), height 0.4s var(--agx-ease), box-shadow .4s var(--agx-ease);
}

.site-header.is-scrolled {
  height: 68px;
  /* Most of the site's content past the hero is white/frost, so once
     scrolled the header reads as a solid light bar (near-opaque, same
     "don't depend on what's behind it" logic as before — just flipped
     from dark to light) with dark navy text/logo for contrast, instead
     of a dark bar with white text. */
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--agx-hairline);
  box-shadow: 0 12px 32px -20px rgba(10, 20, 40, 0.22);
}
.site-header.is-scrolled .nav-link:not(.is-active) {
  color: var(--agx-navy);
}
.site-header.is-scrolled .mobile-menu-toggle span {
  background: var(--agx-navy);
}
.site-header.is-scrolled .logo-mark img {
  filter: none;
}

/* On light interior pages (non-video-hero) the header should be readable
   against a light banner immediately, so a page-level class flips the
   default text/logo treatment before scroll. */
.site-header.header-on-light:not(.is-scrolled) {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(10, 20, 40, 0.06);
}
.site-header.header-on-light:not(.is-scrolled) .nav-link,
.site-header.header-on-light:not(.is-scrolled) .mobile-menu-toggle span {
  color: var(--agx-ink);
}
.site-header.header-on-light:not(.is-scrolled) .nav-link::after {
  background: var(--agx-blue);
}

.nav-link {
  position: relative;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 0.5rem 0;
  transition: color 0.25s var(--agx-ease);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--agx-blue-sky), var(--agx-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--agx-ease);
  border-radius: 2px;
}
.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}
.nav-link.is-active {
  background: linear-gradient(90deg, var(--agx-blue-sky), var(--agx-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.logo-mark img {
  display: block;
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: opacity .3s;
}

/* Mobile menu */
.mobile-menu-toggle {
  width: 40px;
  height: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
}
.mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.3s var(--agx-ease), opacity 0.2s var(--agx-ease), background-color .3s;
}
.mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--agx-ease);
  background: rgba(6, 10, 19, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.mobile-menu-panel.is-open {
  max-height: 640px;
}

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  border-radius: var(--agx-radius-pill);
  padding: 0.9rem 1.75rem;
  transition: transform 0.2s var(--agx-ease), box-shadow 0.3s var(--agx-ease), background-color 0.3s var(--agx-ease), color .3s var(--agx-ease), border-color .3s var(--agx-ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); }

.btn-primary-pill {
  background: linear-gradient(135deg, var(--agx-blue) 0%, var(--agx-blue-deep) 100%);
  color: #fff;
  box-shadow: var(--agx-shadow-glow-blue);
}
.btn-primary-pill:hover {
  box-shadow: 0 0 0 1px rgba(31,99,172,.25), 0 22px 48px -14px rgba(31,99,172,.55);
  transform: translateY(-2px);
}

.btn-aurora-pill {
  background: linear-gradient(135deg, var(--agx-aurora-teal) 0%, var(--agx-aurora-violet) 100%);
  color: var(--agx-void);
  box-shadow: var(--agx-shadow-glow-aurora);
}
.btn-aurora-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(139,124,246,.25), 0 22px 48px -14px rgba(139,124,246,.6);
}

.btn-ghost-pill {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.btn-ghost-pill:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.btn-outline-pill {
  background: transparent;
  color: var(--agx-blue);
  border: 1.5px solid var(--agx-blue);
}
.btn-outline-pill:hover {
  background: var(--agx-blue);
  color: #fff;
  transform: translateY(-2px);
}

.btn-dark-utility {
  background: var(--agx-ink);
  color: #fff;
  border-radius: var(--agx-radius-sm);
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
}
.btn-dark-utility:hover { background: #000; }

.btn-text-link {
  color: var(--agx-blue);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}
.btn-text-link .arrow { transition: transform 0.3s var(--agx-ease); }
.btn-text-link:hover .arrow { transform: translateX(5px); }

.btn-text-link-on-dark { color: var(--agx-blue-sky); }

.btn[disabled], .btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. AURORA DECORATIVE SYSTEM
   -------------------------------------------------------------------------- */
.aurora-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
  mix-blend-mode: screen;
}
.aurora-blob--1 {
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  top: -12%; left: -8%;
  background: radial-gradient(circle at 30% 30%, var(--agx-aurora-teal), transparent 70%);
  animation: aurora-drift-1 22s ease-in-out infinite;
}
.aurora-blob--2 {
  width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
  top: 10%; right: -10%;
  background: radial-gradient(circle at 60% 40%, var(--agx-aurora-violet), transparent 70%);
  animation: aurora-drift-2 26s ease-in-out infinite;
}
.aurora-blob--3 {
  width: 34vw; height: 34vw; max-width: 480px; max-height: 480px;
  bottom: -14%; left: 30%;
  background: radial-gradient(circle at 50% 50%, var(--agx-aurora-green), transparent 70%);
  animation: aurora-drift-3 30s ease-in-out infinite;
}

@keyframes aurora-drift-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6%, 8%) scale(1.12); }
}
@keyframes aurora-drift-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8%, 6%) scale(1.08); }
}
@keyframes aurora-drift-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(5%, -6%) scale(1.15); }
}

/* Soft-light blend variant for aurora blobs sitting on bright/snow
   backgrounds — reads as a pastel color wash instead of a saturated glow,
   so light sections still feel like part of the aurora world. */
.aurora-blob-light {
  mix-blend-mode: soft-light;
}

/* Mouse-parallax layer (translated via JS custom properties) */
.aurora-parallax {
  transform: translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
  transition: transform 0.4s var(--agx-ease);
}

/* Starfield canvas used for snow/aurora particles */
.particle-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Full-viewport canvas the cursor-aurora-trail effect paints onto.
   Sits above all page content, never intercepts clicks. */
.cursor-trail-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 200;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Mountain silhouette divider — sits at the base of dark/hero sections */
.mountain-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 90px;
  z-index: 2;
  color: var(--agx-snow);
  pointer-events: none;
}
.mountain-divider.divider-frost { color: var(--agx-frost); }
.mountain-divider.divider-navy { color: var(--agx-navy); }
.mountain-divider svg { display: block; width: 100%; height: 100%; }

/* Grain / vignette overlay for photographic depth on dark tiles */
.vignette-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 20%, transparent 40%, rgba(6,10,19,0.55) 100%);
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. HERO (VIDEO)
   -------------------------------------------------------------------------- */
.hero-video-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--agx-void);
  /* Guarantees clearance under the fixed 84px header regardless of
     viewport height. Without this, a short/wide viewport can vertically
     center the hero copy close enough to the top that a tall multi-line
     heading collides with the fixed nav sitting on top of it. */
  padding-top: 110px;
  padding-bottom: 40px;
  box-sizing: border-box;
}

.hero-video-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(1.08) brightness(1.02) contrast(1.02);
}

/* A light, directional scrim — darkest at the top (nav legibility) and on
   the left where the hero copy sits, clearing toward the right so the
   mountain photography stays bright and visible across most of the frame. */
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(6,12,24,0.62) 0%, rgba(6,12,24,0.32) 32%, rgba(6,12,24,0.06) 58%, rgba(6,12,24,0) 72%),
    linear-gradient(180deg, rgba(6,12,24,0.55) 0%, rgba(6,12,24,0) 22%, rgba(6,12,24,0) 68%, rgba(6,12,24,0.3) 100%);
}

.hero-content { position: relative; z-index: 3; }

/* Hero copy sits directly over the photograph — a soft, layered
   text-shadow does the legibility work instead of a glass panel or box,
   so the copy stays easy to read without calling attention to itself. */
.hero-copy h1,
.hero-copy p,
.hero-eyebrow {
  text-shadow: 0 1px 2px rgba(6, 12, 24, 0.55), 0 4px 16px rgba(6, 12, 24, 0.4), 0 12px 36px rgba(6, 12, 24, 0.35);
}
.hero-copy p {
  text-shadow: 0 1px 2px rgba(6, 12, 24, 0.6), 0 3px 12px rgba(6, 12, 24, 0.45);
}

.font-serif-display {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

.text-hero-accent {
  color: var(--agx-blue-sky);
}

/* Small rule between the hero title and lead line — a quiet Apollo-blue
   accent that gives the shorter subcopy a finished, intentional feel. */
.hero-lead-divider {
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--agx-blue-sky), var(--agx-aurora-teal));
  box-shadow: 0 0 14px rgba(90, 169, 240, 0.55);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: var(--agx-radius-pill);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Light "frosted" secondary pill button — used where a button needs to
   read clearly over photography without competing with the primary CTA. */
.btn-frost-pill {
  background: rgba(255, 255, 255, 0.88);
  color: var(--agx-ink);
  border: 1px solid rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.btn-frost-pill:hover {
  background: #ffffff;
  transform: translateY(-2px);
}

.hero-scroll-cue {
  position: absolute;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  text-shadow: 0 1px 10px rgba(6,12,24,0.5);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-scroll-cue .cue-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, #ffffff, transparent);
  animation: cue-pulse 2s ease-in-out infinite;
}

/* Smooth, modern base transition out of the hero — a color/blur fade
   rather than a literal mountain silhouette shape. */
.hero-base-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 220px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(244,247,251,0) 0%, rgba(244,247,251,0.55) 55%, var(--agx-frost) 100%);
}
@keyframes cue-pulse {
  0%, 100% { opacity: 0.35; transform: scaleY(0.7); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* --------------------------------------------------------------------------
   7. PAGE BANNER (interior pages)
   -------------------------------------------------------------------------- */
.page-banner {
  position: relative;
  overflow: hidden;
  background: var(--agx-navy);
  padding-top: 168px;
  /* Must stay taller than .page-banner-fade's height (130px) below, with
     some buffer — otherwise the fade/mountain-divider zone rides up into
     the title text above it instead of sitting cleanly beneath it. Since
     the breadcrumb row was removed, the banner is shorter overall (less
     content pushing it tall), so this buffer matters more than it used to. */
  padding-bottom: 168px;
}
.page-banner-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  z-index: 0;
  /* Zoomed in tight — same idea as the homepage video hero, which reads
     clean because there's solid, textured photo (not flat sky/water)
     right where the fade happens. A wide, barely-zoomed landscape crop
     doesn't give the fade below anything to hold onto. */
  transform: scale(var(--banner-zoom, 1.55));
  transform-origin: center var(--banner-focus, 40%);
}
/* Bottom fade — same technique as the homepage hero's .hero-base-fade:
   transparent, easing through a semi-opaque middle, into the solid
   color of whatever section actually follows the banner (set via
   --fade-target inline per page: white or frost). This only reads
   clean with a tight zoom (above) putting real photo detail in this
   zone instead of flat, low-contrast sky or water. */
.page-banner-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 130px;
  z-index: 2;
  pointer-events: none;
  /* --fade-mid is the same color as --fade-target at ~55% alpha, passed
     in directly as rgba() per page rather than derived with color-mix()
     — color-mix() isn't supported in every browser yet, and an
     unsupported value here would drop the whole gradient. */
  --fade-mid: rgba(255,255,255,0.55);
  --fade-target: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0) 0%,
    var(--fade-mid) 55%,
    var(--fade-target) 100%
  );
}

/* A jagged mountain-silhouette shape divider sits on top of the gradient
   fade above, so the banner photo doesn't just fade to a flat edge, it
   resolves into a ridgeline that hands off to the page content below.
   Two layers: a lighter, hazier back ridge (reads like a distant range
   through the fade) and a solid front ridge in the exact color of the
   section that follows, so the cut is seamless. Scales to any width via
   preserveAspectRatio="none"; height set here rather than on the SVG
   itself so it can grow on larger screens. */
.page-banner-shape-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}
.page-banner-shape-divider svg {
  display: block;
  width: 100%;
  height: 44px;
}
@media (min-width: 768px) {
  .page-banner-shape-divider svg { height: 68px; }
}
@media (min-width: 1024px) {
  .page-banner-shape-divider svg { height: 90px; }
}

/* The shared .vignette-overlay reaches almost all the way to the bottom
   of the banner (its radial gradient is centered near the top but sized
   90% tall), which was dark-tinting the lower portion of the photo
   before the bottom fade even started. That's barely visible on a
   high-contrast photo but turns into an obvious gray haze on a naturally
   pale, low-contrast one (e.g. ice/water). Pulled in tighter here so it
   only does its actual job — darkening behind the breadcrumb/heading —
   and leaves the rest of the photo, plus the fade zone below it, alone. */
.page-banner .vignette-overlay {
  background: radial-gradient(120% 55% at 38% 4%, transparent 42%, rgba(6,10,19,0.42) 100%);
}
.page-banner .breadcrumb-trail a { color: var(--agx-white-faint); transition: color .25s; }
.page-banner .breadcrumb-trail a:hover { color: var(--agx-aurora-teal); }
/* Text legibility safety net — several of the new banner photos (snow,
   ice, bright sky) are much lighter than the old low-opacity placeholder
   treatment was designed for, so the heading/breadcrumb need their own
   shadow rather than relying solely on the vignette underneath. */
.page-banner h1,
.page-banner .breadcrumb-trail {
  text-shadow: 0 1px 3px rgba(6, 12, 24, 0.55), 0 6px 20px rgba(6, 12, 24, 0.45);
}

/* --------------------------------------------------------------------------
   8. CARDS
   -------------------------------------------------------------------------- */

/* Discipline intro cards (The Numbers / The Narrative) — light "ice glass"
   cards so the homepage reads bright and snowy rather than as a dark tile. */
.intro-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  height: 100%;
  border-radius: var(--agx-radius-xl);
  padding: 2.75rem;
  background: linear-gradient(165deg, #ffffff 0%, var(--agx-frost-2) 100%);
  border: 1px solid var(--agx-hairline);
  overflow: hidden;
  transition: transform 0.45s var(--agx-ease), box-shadow 0.45s var(--agx-ease), border-color .45s;
}
/* Pins the "Explore..." link to the same baseline in every card,
   regardless of how much copy sits above it. */
.intro-card > .btn-text-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 1.75rem;
}
.intro-card::before {
  content: '';
  position: absolute;
  inset: -40% -40% auto auto;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, var(--agx-aurora-teal), transparent 70%);
  opacity: 0.16;
  filter: blur(50px);
  transition: opacity 0.45s var(--agx-ease);
}
.intro-card--narrative::before {
  background: radial-gradient(circle, var(--agx-slate-light), transparent 70%);
}
.intro-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--agx-shadow-card-hover);
  border-color: rgba(31,99,172,0.3);
}
.intro-card:hover::before { opacity: 0.3; }

.intro-card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--agx-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--agx-aurora-teal), var(--agx-blue));
  color: #ffffff;
}
.intro-card--narrative .intro-card-icon {
  background: linear-gradient(135deg, var(--agx-slate), var(--agx-blue-deep));
}

.intro-card-list li {
  position: relative;
  padding-left: 1.5rem;
}
.intro-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--agx-aurora-teal), var(--agx-blue-sky));
}
.intro-card--narrative .intro-card-list li::before {
  background: linear-gradient(135deg, var(--agx-slate), var(--agx-blue-deep));
}

/* Value prop icon cards */
.value-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--agx-radius-lg);
  padding: 2.5rem 2.25rem;
  background: linear-gradient(165deg, #ffffff 0%, var(--agx-pearl) 100%);
  border: 1px solid var(--agx-hairline);
  transition: transform 0.4s var(--agx-ease), box-shadow 0.4s var(--agx-ease), border-color 0.4s var(--agx-ease);
}
.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--agx-shadow-card-hover);
  border-color: rgba(31, 99, 172, 0.28);
}

/* Large ghost numeral behind the copy — quiet editorial detail that
   replaces the icon without adding visual noise. */
.value-card-index {
  position: absolute;
  top: -0.75rem;
  right: 1rem;
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 5.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--agx-blue);
  opacity: 0.06;
  pointer-events: none;
  transition: opacity 0.4s var(--agx-ease), transform 0.4s var(--agx-ease);
}
.value-card:hover .value-card-index {
  opacity: 0.1;
  transform: translateY(-4px);
}
.value-card--slate .value-card-index { color: var(--agx-slate); }
.value-card--teal .value-card-index { color: var(--agx-aurora-teal); }

/* Small gradient rule above the heading — same accent-line language used
   in the eyebrow tags and hero divider, giving each card a distinct hue. */
.value-card-accent {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  margin-bottom: 1.25rem;
  background: linear-gradient(90deg, var(--agx-blue), var(--agx-aurora-teal));
}
.value-card--slate .value-card-accent {
  background: linear-gradient(90deg, var(--agx-slate), var(--agx-blue-deep));
}
.value-card--teal .value-card-accent {
  background: linear-gradient(90deg, var(--agx-aurora-teal), var(--agx-aurora-green));
}
.value-card-kicker {
  position: relative;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--agx-blue);
}
.value-card--slate .value-card-kicker { color: var(--agx-slate); }
.value-card--teal .value-card-kicker { color: var(--agx-aurora-teal); }

/* Who-we-help cards */
.audience-card {
  border-radius: var(--agx-radius-lg);
  padding: 2rem;
  background: var(--agx-snow);
  border: 1px solid var(--agx-hairline);
  transition: transform 0.4s var(--agx-ease), box-shadow 0.4s var(--agx-ease), border-color .4s;
  height: 100%;
}
.audience-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--agx-shadow-card-hover);
  border-color: rgba(31,99,172,0.35);
}
.audience-fit-tag {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--agx-radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--agx-blue);
  background: rgba(31,99,172,0.08);
}

/* Generic frosted-glass card for dark/aurora sections (e.g. Quiz callout
   on The Numbers page) — same treatment as .stat-card. */
.glass-card-dark {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--agx-hairline-dark);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Light counterpart — icy glass card with a soft blue-glow shadow instead
   of a solid frost fill, used for callouts inside .aurora-light-section. */
.glass-card-light {
  background: linear-gradient(165deg, #ffffff 0%, var(--agx-frost-2) 100%);
  border: 1px solid var(--agx-hairline);
  box-shadow: 0 30px 60px -32px rgba(31,99,172,0.22);
}

/* Tier / plan cards */
.tier-card {
  position: relative;
  border-radius: var(--agx-radius-xl);
  padding: 2.5rem;
  background: var(--agx-snow);
  border: 1px solid var(--agx-hairline);
  transition: transform 0.45s var(--agx-ease), box-shadow 0.45s var(--agx-ease), border-color .45s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tier-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--agx-shadow-card-hover);
}
.tier-card--featured {
  background: linear-gradient(170deg, var(--agx-navy) 0%, var(--agx-navy-3) 100%);
  border-color: rgba(255,255,255,0.14);
  color: #fff;
  box-shadow: var(--agx-shadow-glow-blue);
  transform: scale(1.03);
}
.tier-card--featured:hover { transform: scale(1.03) translateY(-6px); }
.tier-card--featured .tier-card-list li { color: var(--agx-white-muted); }
.tier-card--featured .tier-card-list li::before { background: var(--agx-aurora-teal); }

.tier-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.35rem 1rem;
  border-radius: var(--agx-radius-pill);
  background: linear-gradient(135deg, var(--agx-aurora-teal), var(--agx-aurora-violet));
  color: var(--agx-void);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px -6px rgba(139,124,246,0.55);
}

.tier-card-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--agx-ink-muted);
}
.tier-card-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--agx-blue);
}

/* Resource / guide cards */
.resource-card {
  border-radius: var(--agx-radius-lg);
  padding: 2rem;
  background: var(--agx-pearl);
  border: 1px solid var(--agx-hairline);
  transition: transform 0.4s var(--agx-ease), box-shadow 0.4s var(--agx-ease);
  height: 100%;
}
.resource-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--agx-shadow-card-hover);
}
.resource-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--agx-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--agx-blue), var(--agx-aurora-teal));
  color: #fff;
}
.resource-card-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--agx-ink-faint);
  background: var(--agx-frost-2);
  padding: 0.25rem 0.6rem;
  border-radius: var(--agx-radius-pill);
}

/* A la carte cards */
.a-la-carte-card {
  border-radius: var(--agx-radius-md);
  padding: 1.75rem;
  background: var(--agx-snow);
  border: 1px solid var(--agx-hairline);
  transition: transform .35s var(--agx-ease), box-shadow .35s var(--agx-ease);
}
.a-la-carte-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--agx-shadow-card);
}

/* Founder profile cards */
.founder-card {
  border-radius: var(--agx-radius-xl);
  overflow: hidden;
  background: var(--agx-snow);
  border: 1px solid var(--agx-hairline);
  transition: transform .45s var(--agx-ease), box-shadow .45s var(--agx-ease);
}
.founder-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--agx-shadow-card-hover);
}
.founder-photo-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.founder-photo-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s var(--agx-ease);
}
.founder-card:hover .founder-photo-wrap img { transform: scale(1.05); }
.founder-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(6,10,19,0.75) 0%, transparent 45%);
}
.founder-role-tag {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 2;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 0.35rem 0.8rem;
  border-radius: var(--agx-radius-pill);
}
.founder-linkedin-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  color: var(--agx-blue);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .25s;
}
.founder-linkedin-link:hover {
  color: var(--agx-blue-deep);
  text-decoration: underline;
}
.founder-linkedin-link svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.founder-credentials li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  color: var(--agx-ink-muted);
}
.founder-credentials li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--agx-blue);
}

/* Photo collage (Home / Who We Are) */
.collage-frame {
  position: relative;
  border-radius: var(--agx-radius-lg);
  overflow: hidden;
  box-shadow: var(--agx-shadow-product);
}
.collage-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage-tile-float {
  position: absolute;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   9. PULL QUOTE
   -------------------------------------------------------------------------- */
.pull-quote-section {
  position: relative;
  overflow: hidden;
  background: var(--agx-void);
}
.pull-quote-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.pull-quote-text {
  position: relative;
  z-index: 2;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.02em;
}
.pull-quote-text::before {
  content: '\201C';
  display: block;
  font-size: 5rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--agx-aurora-teal), var(--agx-aurora-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   10. STATS / COUNT-UP (The Launchpad)
   -------------------------------------------------------------------------- */
.stats-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--agx-navy-3) 0%, var(--agx-void) 100%);
}

/* Bright "snow-lit" section background — used for content sections that
   sit between the dark page-banner/Launchpad/footer bookends, keeping the
   page light while the aurora-blob-light wash above it still ties the
   whole page together. Flat (not gradient) so consecutive light sections
   sit flush against each other with no visible seam between them. */
.aurora-light-section {
  position: relative;
  overflow: hidden;
  background: var(--agx-frost);
}

.stat-card {
  border-radius: var(--agx-radius-lg);
  padding: 2.25rem 1.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--agx-hairline-dark);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  text-align: center;
  transition: transform .4s var(--agx-ease), background-color .4s var(--agx-ease), border-color .4s;
}
.stat-card:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.25);
}
.stat-number {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #ffffff 0%, var(--agx-aurora-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1;
}

/* --------------------------------------------------------------------------
   11. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq-item {
  border-bottom: 1px solid var(--agx-hairline);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  text-align: left;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--agx-ink);
}
.faq-icon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--agx-hairline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s var(--agx-ease), background-color .3s, border-color .3s;
  position: relative;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--agx-ink);
  transition: transform .3s var(--agx-ease), opacity .3s;
}
.faq-icon::before { width: 10px; height: 1.5px; }
.faq-icon::after { width: 1.5px; height: 10px; }
.faq-item.is-open .faq-icon { background: var(--agx-blue); border-color: var(--agx-blue); }
.faq-item.is-open .faq-icon::before, .faq-item.is-open .faq-icon::after { background: #fff; }
.faq-item.is-open .faq-icon::after { transform: scaleY(0); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s var(--agx-ease);
}
.faq-answer-inner {
  padding-bottom: 1.5rem;
  color: var(--agx-ink-muted);
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   12. FORMS (static / non-functional preview markup)
   -------------------------------------------------------------------------- */
.form-preview-notice {
  border: 1px dashed rgba(31,99,172,0.35);
  background: rgba(31,99,172,0.06);
  border-radius: var(--agx-radius-md);
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: var(--agx-blue-deep);
}
.form-field-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--agx-ink-muted);
  margin-bottom: 0.4rem;
}
.form-field-static {
  width: 100%;
  border: 1px solid var(--agx-hairline);
  border-radius: var(--agx-radius-sm);
  padding: 0.85rem 1rem;
  background: var(--agx-pearl);
  color: var(--agx-ink);
  font-size: 0.95rem;
  transition: border-color .3s, box-shadow .3s;
}
.form-field-static::placeholder {
  color: var(--agx-ink-faint);
}
.form-field-static:focus {
  border-color: var(--agx-blue);
  box-shadow: 0 0 0 4px rgba(31,99,172,0.12);
  outline: none;
}
.form-field-static:disabled {
  color: var(--agx-ink-faint);
  cursor: not-allowed;
}
.radio-pill-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.radio-pill {
  position: relative;
  border: 1px solid var(--agx-hairline);
  border-radius: var(--agx-radius-pill);
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--agx-ink-muted);
  cursor: pointer;
  transition: border-color .3s, color .3s, background-color .3s;
}
.radio-pill:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}
.radio-pill:has(input:focus-visible) {
  outline: 2px solid var(--agx-blue);
  outline-offset: 2px;
}
.radio-pill.is-selected-preview {
  border-color: var(--agx-blue);
  color: var(--agx-blue);
  background: rgba(31,99,172,0.06);
}
.btn.is-submitted {
  opacity: 0.85;
  cursor: default;
  pointer-events: none;
}
.form-error-text {
  color: #dc2626;
}
.consult-step {
  position: relative;
  padding-left: 3.25rem;
}
.consult-step-number {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--agx-blue), var(--agx-aurora-teal));
}

/* --------------------------------------------------------------------------
   13. FOOTER (carries the "Get growth insight" newsletter panel at its top)
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--agx-navy) 0%, var(--agx-navy-3) 65%, var(--agx-void) 100%);
  color: var(--agx-white-faint);
}
.site-footer .aurora-stage { opacity: 1; }
.site-footer a { position: relative; z-index: 1; transition: color .25s var(--agx-ease); }
.site-footer a:hover { color: var(--agx-aurora-teal); }
.site-footer > .max-w-7xl { position: relative; z-index: 1; }

/* Newsletter panel sits inside the footer, set off by a hairline so the
   link columns below still read as a distinct row. */
.footer-newsletter-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.footer-col-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--agx-white-muted);
}

/* --------------------------------------------------------------------------
   14. SCROLL REVEAL
   -------------------------------------------------------------------------- */
/* Progressive enhancement: .reveal elements are visible by default. The
   fade-up animation only activates once an early inline script confirms
   JavaScript actually ran by adding "js-ready" to <html> — this is
   scoped behind that class specifically so that if the script gets
   stripped or blocked (which has happened with content saved through
   this WordPress install), content simply displays normally instead of
   staying permanently invisible at opacity:0 with no way to reveal it. */
html.js-ready .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--agx-ease), transform 0.8s var(--agx-ease);
}
html.js-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger.is-visible > * {
  transition-delay: calc(var(--stagger-index, 0) * 90ms);
}

/* --------------------------------------------------------------------------
   15. FLOATING CONSULTATION CTA
   -------------------------------------------------------------------------- */
.floating-cta {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  opacity: 0;
  transform: translateY(16px) scale(0.94);
  pointer-events: none;
  transition: opacity 0.4s var(--agx-ease), transform 0.4s var(--agx-ease);
}
.floating-cta.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   16. MISC UTILITIES
   -------------------------------------------------------------------------- */
.text-gradient-aurora {
  background: linear-gradient(120deg, var(--agx-aurora-teal) 0%, var(--agx-blue-sky) 50%, var(--agx-aurora-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--agx-blue);
}
.eyebrow-tag::before,
.eyebrow-tag::after {
  content: '';
  width: 22px;
  height: 2px;
  background: linear-gradient(90deg, var(--agx-blue), var(--agx-aurora-teal));
  border-radius: 2px;
}
.eyebrow-tag::after {
  background: linear-gradient(90deg, var(--agx-aurora-teal), var(--agx-blue));
}
.eyebrow-tag.eyebrow-on-dark { color: var(--agx-aurora-teal); }

.section-divider-hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--agx-hairline), transparent);
}

/* Marker used in the pointer-glow interaction on hero sections */
.pointer-glow {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,212,191,0.18), transparent 70%);
  left: var(--pointer-x, 50%);
  top: var(--pointer-y, 50%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: left 0.3s linear, top 0.3s linear;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   17. RESPONSIVE TWEAKS
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .tier-card--featured { transform: none; }
  .tier-card--featured:hover { transform: translateY(-6px); }
}

@media (max-width: 767px) {
  .hero-video-section { min-height: 92vh; }
  .site-header { height: 72px; }
  .page-banner { padding-top: 128px; padding-bottom: 148px; }
  .aurora-blob { opacity: 0.4; }
  .floating-cta { padding-left: 1.1rem; padding-right: 1.1rem; }
}

@media (max-width: 480px) {
  .stat-number { font-size: 2rem; }
}

/* ==========================================================================
   18. ELEMENTOR COMPATIBILITY PATCH
   --------------------------------------------------------------------------
   IMPORTANT: when a CSS class is entered in a widget's Advanced > CSS
   Classes field, Elementor adds it to that widget's OUTER wrapper div
   (.elementor-widget-{type}) — NOT to the actual element inside it that
   Elementor renders (the anchor tag with class elementor-button, the nav
   link with class elementor-item, etc). So a rule like ".elementor-button.btn"
   (expecting both classes on the same tag) never matches anything; the
   wrapper gets our box styling AND the untouched inner element keeps
   Elementor's own default chrome underneath it — that's what produced the
   "pill inside a pill" look. Every rule below targets the actual inner
   element as a DESCENDANT of our wrapper class, and reinforces the
   identity-defining properties with !important because Elementor also
   writes its own per-element CSS (scoped by element ID) which otherwise
   out-specifies a plain custom class. Nothing here changes the visual
   design — it only makes the existing rules above actually reach the
   right elements.
   ========================================================================== */

/* --- Typography: .font-display / .font-serif-display land on the heading
   WIDGET WRAPPER (Advanced > CSS Classes), not on the inner .elementor-
   heading-title tag that actually holds the text — target that descendant
   directly so it wins over Elementor's own Kit default typography, which
   is otherwise applied straight to .elementor-heading-title. --- */
.elementor-widget-heading.font-display .elementor-heading-title,
.font-display.elementor-heading-title {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  letter-spacing: -0.03em !important;
}
.elementor-widget-heading.font-serif-display .elementor-heading-title,
.font-serif-display.elementor-heading-title {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif !important;
}
body, .elementor-widget-text-editor, .elementor-widget-icon-list {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.elementor-heading-title {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* --- Buttons: reset Elementor's own inner anchor (class elementor-button)
   chrome, then reapply our pill design to that SAME inner element. --- */
.elementor-widget-button.btn {
  background: none !important;
  display: inline-block;
}
.elementor-widget-button.btn .elementor-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: -0.01em;
  border-radius: var(--agx-radius-pill) !important;
  padding: 0.9rem 1.75rem !important;
  border: none !important;
  box-shadow: none !important;
  white-space: nowrap;
  transition: transform 0.2s var(--agx-ease), box-shadow 0.3s var(--agx-ease), background-color 0.3s var(--agx-ease), color .3s var(--agx-ease), border-color .3s var(--agx-ease);
}
.elementor-widget-button.btn .elementor-button:hover {
  transform: translateY(-2px);
}
.elementor-widget-button.btn .elementor-button-content-wrapper,
.elementor-widget-button.btn .elementor-button-text {
  color: inherit;
}
.elementor-widget-button.btn-primary-pill .elementor-button {
  background: linear-gradient(135deg, var(--agx-blue) 0%, var(--agx-blue-deep) 100%) !important;
  color: #fff !important;
  box-shadow: var(--agx-shadow-glow-blue) !important;
}
.elementor-widget-button.btn-frost-pill .elementor-button {
  background: rgba(255,255,255,0.92) !important;
  color: var(--agx-ink) !important;
}
.elementor-widget-button.btn-outline-pill .elementor-button {
  background: transparent !important;
  color: var(--agx-blue) !important;
  border: 1.5px solid var(--agx-blue) !important;
}
.elementor-widget-button.btn-aurora-pill .elementor-button {
  background: linear-gradient(135deg, var(--agx-aurora-teal) 0%, var(--agx-aurora-violet) 100%) !important;
  color: var(--agx-void) !important;
}
.elementor-widget-button.btn-text-link .elementor-button {
  background: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: var(--agx-blue) !important;
  font-weight: 600 !important;
}
.elementor-widget-button.skip-link {
  position: absolute !important;
  left: 1rem;
  top: -60px;
  z-index: 999;
}
.elementor-widget-button.skip-link .elementor-button {
  background: var(--agx-navy) !important;
  color: #fff !important;
  padding: 0.75rem 1.25rem !important;
  border-radius: var(--agx-radius-sm) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
}
.elementor-widget-button.floating-cta {
  position: fixed !important;
  bottom: 24px;
  right: 24px;
  z-index: 150;
}

/* --- Primary nav: Elementor's Nav Menu widget renders its own markup
   (ul.elementor-nav-menu > li > a.elementor-item), not a.nav-link, so the
   .nav-link rules earlier in this file never reach it. Re-point the same
   look at Elementor's real selectors, reinforced against the Kit's own
   per-instance link-color assignment. --- */
.site-header .elementor-nav-menu a.elementor-item {
  position: relative;
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 0.5rem 0 !important;
  margin: 0 1.1rem;
  background: none !important;
  transition: color 0.25s var(--agx-ease);
}
.site-header .elementor-nav-menu a.elementor-item::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--agx-blue-sky), var(--agx-blue));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--agx-ease);
  border-radius: 2px;
}
.site-header .elementor-nav-menu a.elementor-item:hover::after,
.site-header .elementor-nav-menu a.elementor-item.elementor-item-active::after {
  transform: scaleX(1);
}
.site-header .elementor-nav-menu a.elementor-item.elementor-item-active {
  background: linear-gradient(90deg, var(--agx-blue-sky), var(--agx-blue)) !important;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* --- Icon List: Elementor renders its own icon glyph before each item.
   Recolor/resize it to the small brand-blue dot the design calls for,
   instead of adding a second CSS bullet on top of it. --- */
.intro-card-list .elementor-icon-list-icon,
.footer-col-heading + .elementor-widget-icon-list .elementor-icon-list-icon {
  color: var(--agx-blue) !important;
  font-size: 6px;
  margin-right: 0.75rem;
  align-self: flex-start;
  margin-top: 0.55em;
}
.intro-card-list .elementor-icon-list-text,
.footer-col-heading + .elementor-widget-icon-list .elementor-icon-list-text {
  color: inherit !important;
  font-size: 0.95rem;
}
.elementor-widget-icon-list ul.elementor-icon-list-items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.elementor-widget-icon-list .elementor-icon-list-item {
  padding: 0.35rem 0;
}
.site-footer .elementor-icon-list-icon,
.site-footer .elementor-icon-list-text,
.site-footer .elementor-icon-list-text a {
  color: var(--agx-white-muted) !important;
}
.site-footer .elementor-icon-list-text a:hover {
  color: #fff !important;
}

/* --- Cards: these classes DO land on the correct column element (columns
   don't get an extra widget-wrapper layer the way widgets do), but
   Elementor still writes its own per-column ID-scoped default CSS that can
   out-specify a plain class, so the box-model properties are reinforced
   here too. --- */
.intro-card,
.intro-card.elementor-column {
  padding: 2.75rem !important;
  background: linear-gradient(165deg, #ffffff 0%, var(--agx-frost-2) 100%) !important;
  border: 1px solid var(--agx-hairline) !important;
  border-radius: var(--agx-radius-xl) !important;
}
.value-card,
.value-card.elementor-column {
  border-radius: var(--agx-radius-xl) !important;
}
.audience-card,
.audience-card.elementor-column {
  border-radius: var(--agx-radius-lg) !important;
}
.tier-card,
.tier-card.elementor-column {
  padding: 2.5rem !important;
  background: var(--agx-snow) !important;
  border: 1px solid var(--agx-hairline) !important;
  border-radius: var(--agx-radius-xl) !important;
}
.tier-card--featured,
.tier-card--featured.elementor-column {
  background: linear-gradient(170deg, var(--agx-navy) 0%, var(--agx-navy-3) 100%) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: #fff !important;
}
.glass-card-light,
.glass-card-light.elementor-column {
  background: linear-gradient(165deg, #ffffff 0%, var(--agx-frost-2) 100%) !important;
  border: 1px solid var(--agx-hairline) !important;
}
.glass-card-dark,
.glass-card-dark.elementor-column {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--agx-hairline-dark) !important;
}
.site-footer,
.site-footer.elementor-section {
  background: linear-gradient(120deg, var(--agx-navy) 0%, var(--agx-navy-3) 65%, var(--agx-void) 100%) !important;
}
.site-header,
.site-header.elementor-section {
  background: transparent !important;
}

/* --- Section/column media background placeholders: if a background video
   or image URL hasn't been re-pointed at a real WordPress Media Library
   file yet, Elementor shows its own placeholder graphic instead. Upload
   the real files and re-select them in that section's Background tab —
   this rule just keeps the placeholder from looking broken in the
   meantime. --- */
.hero-video-section .elementor-background-video-container,
.hero-video-section.elementor-section,
.pull-quote-section .elementor-bg,
.pull-quote-section.elementor-section {
  background-color: var(--agx-navy) !important;
}

/* --- Divider widget: Elementor draws its visible line via an inner
   .elementor-divider-separator span using border-top, not via width/
   height/background on the element carrying the class — so our accent-bar
   rules (which assumed the class-carrying element WAS the visible bar)
   need to target that separator directly instead. --- */
.elementor-widget-divider.hero-lead-divider .elementor-divider-separator {
  border-top: none !important;
  width: 56px !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, var(--agx-blue-sky), var(--agx-aurora-teal)) !important;
  box-shadow: 0 0 14px rgba(90, 169, 240, 0.55) !important;
}
.elementor-widget-divider.value-card-accent .elementor-divider-separator {
  border-top: none !important;
  width: 40px !important;
  height: 3px !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, var(--agx-blue), var(--agx-aurora-teal)) !important;
}
.elementor-widget-divider.section-divider-hairline .elementor-divider-separator {
  border-top: none !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--agx-hairline), transparent) !important;
}
.elementor-widget-divider .elementor-divider {
  text-align: left;
}

/* --- Spacer widget (used for the purely-decorative aurora-blob glows):
   the wrapper itself is the right target for position/size here since it
   carries our class directly, but reinforce with !important since
   Elementor's own per-element CSS can still set a default height on
   .elementor-spacer-inner that fights our absolute positioning. --- */
.elementor-widget-spacer.aurora-blob {
  position: absolute !important;
  height: auto !important;
}
.elementor-widget-spacer.aurora-blob .elementor-spacer-inner {
  height: 100% !important;
}

/* --- Testimonial widget (pull quote): our class lands on the wrapper,
   which is fine for position/z-index/font, but the decorative giant quote
   mark should sit above Elementor's own avatar/name layout, not behind
   it. --- */
.elementor-widget-testimonial.pull-quote-text .elementor-testimonial__text {
  font-family: 'Inter', system-ui, sans-serif !important;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Footer newsletter — posts to subscribe.php (same-origin PHP relay to
   the Mailchimp API; see script.js initNewsletterForm). Honeypot field is
   visually hidden but still present/focusable-by-bots in the DOM. */
.hidden-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}