/* ==========================================================================
   Auruvi HMS — Unified Design System, Color Palette & Motion Tokens (v2.4.1)
   100% Self-Hosted Typography · Zero Third-Party Requests
   ========================================================================== */

/* Mirror Tailwind v4 cascade layer order so @layer components/utilities in tokens.css
   participate in the exact same cascade priority zones as css/auruvi.css */
@layer properties, theme, base, components, utilities;

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
}

:root {
  /* Core Surfaces */
  --color-canvas: #ffffff;
  --color-surface: #f8fafc;
  --color-surface-mint: #f0fdf9;
  --color-surface-sky: #f0f9ff;
  --color-surface-warm: #fffbeb;
  --color-surface-indigo: #eef2ff;

  /* Ink & Typography Hierarchy */
  --color-ink-primary: #0a0d14;
  --color-ink-secondary: #1e293b;
  --color-ink-muted: #475569;
  --color-ink-subtle: #64748b;

  /* Signature Clinical Emerald, Medical Teal & Royal Sky Accents */
  --au-emerald-500: #10b981;
  --au-emerald-600: #059669;
  --au-emerald-700: #047857;
  --au-teal-600: #0d9488;
  --au-teal-700: #0f766e;
  --au-sky-500: #0ea5e9;
  --au-sky-600: #0284c7;
  --au-sky-700: #0369a1;
  --au-indigo-600: #4f46e5;
  --au-amber-600: #d97706;
  --au-rose-600: #e11d48;
  --au-navy-900: #0f172a;
  --au-navy-950: #070b14;

  --color-trust-blue: #0284c7;
  --color-medical-teal: #0f766e;
  --color-border-hairline: #e2e8f0;

  /* Font Stacks */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Motion Curves */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Apple-Like Optical Liquid Glass Tokens (v2.4.2) */
  --au-glass-blur-chrome: blur(20px) saturate(180%);
  --au-glass-blur-popover: blur(24px) saturate(190%);
  --au-glass-blur-subtle: blur(14px) saturate(165%);
  --au-glass-fill-popover: linear-gradient(145deg, rgba(255, 255, 255, 0.76) 0%, rgba(244, 249, 255, 0.64) 100%);
  --au-glass-fill-card: linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.80) 55%, rgba(248, 251, 255, 0.90) 100%);
  --au-glass-fill-card-hero: linear-gradient(155deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 255, 255, 0.68) 100%);
  --au-glass-fill-pill-light: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(248, 250, 252, 0.74) 100%);
  --au-glass-fill-pill-dark: linear-gradient(180deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.99) 100%);
  --au-glass-rim-zero:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0),
    0 14px 36px -8px rgba(15, 23, 42, 0),
    0 4px 12px -2px rgba(15, 23, 42, 0);
  --au-glass-rim-chrome:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.55),
    0 16px 38px -10px rgba(15, 23, 42, 0.08),
    0 4px 12px -2px rgba(15, 23, 42, 0.03);
  --au-glass-rim-popover:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.55),
    0 24px 48px -12px rgba(15, 23, 42, 0.14),
    0 8px 16px -4px rgba(15, 23, 42, 0.05);
  --au-glass-rim-card:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.65),
    0 16px 40px -14px rgba(15, 23, 42, 0.05);
  --au-glass-rim-card-hover:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.80),
    0 24px 48px -14px rgba(15, 23, 42, 0.09),
    0 6px 14px -4px rgba(15, 23, 42, 0.03);

  /* Generous Editorial Spacing Rhythm (v2.4.1) — fluid 375px → 1440px */
  --au-space-section: clamp(4rem, 2.5rem + 5vw, 7rem);          /* 64px → 112px total inter-section relief */
  --au-space-section-pad: clamp(2.25rem, 1.4rem + 2.5vw, 3.5rem); /* 36px → 56px per-side section padding (112px between sections) */
  --au-space-section-lead-top: clamp(2rem, 1.25rem + 2vw, 3.25rem); /* 32px → 52px hero top padding */
  --au-space-section-lead-bottom: clamp(3rem, 2rem + 2.75vw, 4.5rem); /* 48px → 72px hero bottom padding */
  --au-space-block: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);        /* 40px → 64px section header ↔ content rows */
  --au-space-grid: clamp(1.25rem, 1rem + 1vw, 1.75rem);          /* 20px → 28px card ↔ card grid gap */
  --au-space-card: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);     /* 28px → 44px card inner padding */
  --au-space-card-sm: clamp(1.25rem, 1rem + 0.75vw, 1.75rem);    /* 20px → 28px compact card padding */
  --au-space-mission-y: clamp(4rem, 2rem + 6vw, 7.5rem);         /* 64px → 120px mission block vertical padding */
  --au-space-mission-x: clamp(1.5rem, 0.5rem + 6vw, 7rem);       /* 24px → 112px mission block horizontal padding */
  --au-space-stack-xs: 0.875rem; /* 14px eyebrow → title */
  --au-space-stack-sm: 1.375rem; /* 22px title → body copy */
  --au-space-stack-md: 2rem;     /* 32px body copy → hairline bar / CTA row */
}

/* ==========================================================================
   1. Viewport, Sticky Header Fix, Hidden Enforcement & Custom Scrollbar
   ========================================================================== */

[hidden] {
  display: none !important;
}

@media (min-width: 768px) {
  [data-mobile-drawer] {
    display: none !important;
  }
}

html {
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;
  scroll-behavior: smooth;
}

body {
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-webkit-scrollbar {
  width: 8px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-left: 1px solid #e2e8f0;
}

::-webkit-scrollbar-thumb {
  background-color: #94a3b8;
  border-radius: 9999px;
  border: 2px solid #f1f5f9;
  transition: background-color 180ms ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #0d9488;
}

::-webkit-scrollbar-thumb:active {
  background-color: #0284c7;
}

/* ==========================================================================
   2. Locked SVG Icon Sizing & Directional Micro-Animations
   ========================================================================== */

.au-icon {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
  transition: transform 200ms var(--ease-spring);
}

.w-3 {
  width: 0.75rem !important;
}
.h-3 {
  height: 0.75rem !important;
}
.w-3\.5 {
  width: 0.875rem !important;
}
.h-3\.5 {
  height: 0.875rem !important;
}
.w-4 {
  width: 1rem !important;
}
.h-4 {
  height: 1rem !important;
}
.w-5 {
  width: 1.25rem !important;
}
.h-5 {
  height: 1.25rem !important;
}
.w-6 {
  width: 1.5rem !important;
}
.h-6 {
  height: 1.5rem !important;
}
.w-auto {
  width: auto;
}
.text-emerald-400 {
  color: #34d399;
}
.text-emerald-700 {
  color: #047857;
}
.hover\:text-emerald-700:hover {
  color: #047857;
}
.hover\:text-emerald-800:hover {
  color: #065f46;
}
.hover\:text-\[\#0f766e\]:hover {
  color: #0f766e;
}
.hover\:border-emerald-300:hover {
  border-color: #6ee7b7;
}
.hover\:border-emerald-600\/40:hover {
  border-color: rgba(5, 150, 105, 0.4);
}
.focus\:ring-emerald-600:focus {
  --tw-ring-color: #059669;
}
.bg-amber-50\/50 {
  background-color: rgba(255, 251, 235, 0.5);
}
.bg-amber-50\/80 {
  background-color: rgba(255, 251, 235, 0.8);
}
.bg-emerald-50\/40 {
  background-color: rgba(236, 253, 245, 0.4);
}
.bg-emerald-50\/70 {
  background-color: rgba(236, 253, 245, 0.7);
}
.bg-slate-50\/90 {
  background-color: rgba(248, 250, 252, 0.9);
}

@media (min-width: 640px) {
  .sm\:h-9 {
    height: 2.25rem;
  }
  .sm\:items-end {
    align-items: flex-end;
  }
  .sm\:text-right {
    text-align: right;
  }
}

/* ==========================================================================
   3. Vibrant Section Backgrounds & Architectural Surface Treatments
   ========================================================================== */

.au-section-hero {
  background-color: #f8fafc;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(16, 185, 129, 0.11) 0%, transparent 42%),
    radial-gradient(circle at 88% 22%, rgba(2, 132, 199, 0.11) 0%, transparent 46%),
    radial-gradient(circle at 52% 92%, rgba(79, 70, 229, 0.06) 0%, transparent 45%),
    linear-gradient(to right, rgba(148, 163, 184, 0.12) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 36px 36px, 36px 36px;
}

.au-section-mint {
  background: linear-gradient(180deg, #f0fdf9 0%, #f8fafc 55%, #ffffff 100%);
}

.au-section-sky {
  background: linear-gradient(180deg, #f0f9ff 0%, #f8fafc 55%, #ffffff 100%);
}

.au-section-warm {
  background: linear-gradient(180deg, #f8fafc 0%, #f0f9ff 50%, #f0fdf9 100%);
}

.au-section-dark {
  background:
    radial-gradient(circle at 85% 15%, rgba(16, 185, 129, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(14, 165, 233, 0.16) 0%, transparent 45%),
    linear-gradient(135deg, #070b14 0%, #0f172a 58%, #062825 100%);
  color: #ffffff;
}

.au-banner-dark {
  background:
    radial-gradient(circle at 90% 20%, rgba(16, 185, 129, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 10% 80%, rgba(14, 165, 233, 0.18) 0%, transparent 50%),
    linear-gradient(135deg, #0b1120 0%, #0f172a 60%, #06322d 100%);
  border: 1px solid rgba(56, 189, 248, 0.22);
  color: #ffffff;
  box-shadow: 0 16px 36px -10px rgba(7, 11, 20, 0.25);
}

.au-text-gradient {
  background: linear-gradient(135deg, #047857 0%, #0d9488 45%, #0284c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   4. Unified Button Design System (.au-btn-*)
   ========================================================================== */

.au-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.6875rem 1.375rem;
  border-radius: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 200ms var(--ease-spring),
    box-shadow 200ms var(--ease-spring),
    background 200ms var(--ease-spring),
    border-color 200ms var(--ease-spring),
    color 200ms var(--ease-spring);
}

.au-btn-sm {
  min-height: 2.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  border-radius: 0.6875rem;
}

.au-btn-lg {
  min-height: 3rem;
  padding: 0.875rem 1.625rem;
  font-size: 0.875rem;
  border-radius: 0.8125rem;
}

.au-btn:focus-visible {
  outline: 2px solid var(--au-sky-600);
  outline-offset: 2px;
}

.au-btn:active {
  transform: translateY(0) scale(0.985) !important;
}

/* Primary Clinical Emerald-Teal Button */
.au-btn-primary {
  background: linear-gradient(135deg, #059669 0%, #0d9488 55%, #0284c7 100%);
  color: #ffffff !important;
  border: 1px solid rgba(4, 120, 87, 0.4);
  box-shadow:
    0 4px 14px -3px rgba(13, 148, 136, 0.35),
    0 1px 3px 0 rgba(15, 23, 42, 0.08),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
}

.au-btn-primary:hover {
  background: linear-gradient(135deg, #047857 0%, #0f766e 55%, #0369a1 100%);
  color: #ffffff !important;
  transform: translateY(-1.5px);
  box-shadow:
    0 10px 22px -4px rgba(13, 148, 136, 0.45),
    0 3px 6px -2px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
}

/* Deep Navy Enterprise Button */
.au-btn-dark {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff !important;
  border: 1px solid #0f172a;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.18);
}

.au-btn-dark:hover {
  background: linear-gradient(135deg, #0d9488 0%, #0284c7 100%);
  border-color: #0d9488;
  color: #ffffff !important;
  transform: translateY(-1.5px);
  box-shadow: 0 8px 20px -4px rgba(2, 132, 199, 0.35);
}

/* Secondary Surface Button */
.au-btn-secondary {
  background-color: #ffffff;
  color: #0f172a !important;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
}

.au-btn-secondary:hover {
  background-color: #f0fdf9;
  color: #047857 !important;
  border-color: #5eead4;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px -4px rgba(13, 148, 136, 0.14);
}

/* Light Button on Dark Backgrounds */
.au-btn-light {
  background-color: #ffffff;
  color: #0f172a !important;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.25);
}

.au-btn-light:hover {
  background-color: #ecfdf5;
  color: #065f46 !important;
  border-color: #6ee7b7;
  transform: translateY(-1.5px);
  box-shadow: 0 8px 20px -3px rgba(16, 185, 129, 0.3);
}

/* Directional Arrow Micro-Animations inside Buttons & Links */
.au-btn:hover .au-icon-arrow-right,
.au-card-interactive:hover .au-icon-arrow-right {
  transform: translateX(3px);
}

.au-btn:hover .au-icon-arrow-left,
.au-card-interactive:hover .au-icon-arrow-left {
  transform: translateX(-3px);
}

.au-btn:hover .au-icon-arrow-ne,
.au-card-interactive:hover .au-icon-arrow-ne {
  transform: translate(2px, -2px);
}

/* ==========================================================================
   5. Unified Navigation, Tabs & Segmented Controls (.au-tab-*)
   ========================================================================== */

.au-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  transition:
    background-color 180ms var(--ease-spring),
    color 180ms var(--ease-spring);
}

.au-nav-link:hover {
  background-color: #f0fdf9;
  color: #047857;
}

.au-nav-link.is-active,
.au-nav-link[aria-current='page'],
.au-nav-link[aria-expanded='true'] {
  background-color: #ecfdf5;
  color: #047857;
  font-weight: 600;
}

/* Pill & Segmented Tab Buttons (Facility Profiles, Hero Blueprint, Hybrid Simulator) */
.au-tab-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.625rem;
  padding: 0.5625rem 1.125rem;
  border-radius: 0.75rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155 !important;
  background-color: #ffffff !important;
  border: 1px solid #ffffff !important;
  box-shadow: 0 6px 16px -6px rgba(15, 23, 42, 0.05);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    background 200ms var(--ease-spring),
    color 200ms var(--ease-spring),
    box-shadow 200ms var(--ease-spring),
    transform 200ms var(--ease-spring);
}

.au-tab-pill:hover:not([aria-selected='true']) {
  background-color: #f0f9ff !important;
  color: #0369a1 !important;
  border-color: #ffffff !important;
  transform: translateY(-1px);
}

.au-tab-pill[aria-selected='true'] {
  background: linear-gradient(135deg, #059669 0%, #0d9488 55%, #0284c7 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.12) !important;
}

.au-tab-pill[aria-selected='true'] .au-icon {
  color: #ffffff !important;
}

/* Segmented Bar Variant (inside dark/tinted tablist containers) */
.au-segmented-bar {
  display: flex;
  padding: 0.375rem;
  gap: 0.375rem;
  border-radius: 0.875rem;
  background-color: #f1f5f9;
  border: 1px solid #ffffff;
}

.au-segmented-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4375rem;
  min-height: 2.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  cursor: pointer;
  white-space: nowrap;
  flex: 1 1 0%;
  transition:
    background 200ms var(--ease-spring),
    color 200ms var(--ease-spring),
    box-shadow 200ms var(--ease-spring);
}

.au-segmented-btn:hover:not([aria-selected='true']) {
  color: #0f172a !important;
  background-color: rgba(255, 255, 255, 0.65) !important;
}

.au-segmented-btn[aria-selected='true'] {
  background: linear-gradient(135deg, #059669 0%, #0d9488 60%, #0284c7 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.12) !important;
}

.au-segmented-btn[aria-selected='true'] .au-icon {
  color: #ffffff !important;
}

/* 6-Module Suite Matrix Selector Cards (Pure Borderless White Rim) */
.au-tab-card {
  position: relative;
  padding: 0.9375rem;
  border-radius: 0.875rem;
  background-color: #ffffff;
  border: 1px solid #ffffff !important;
  box-shadow: 0 8px 20px -8px rgba(15, 23, 42, 0.05);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.625rem;
  overflow: hidden;
  transition:
    transform 220ms var(--ease-spring),
    box-shadow 220ms var(--ease-spring),
    background-color 220ms var(--ease-spring);
}

.au-tab-card:hover:not([aria-selected='true']) {
  transform: translateY(-2px);
  background-color: #f8fafc;
  border-color: #ffffff !important;
  box-shadow: 0 12px 24px -8px rgba(15, 23, 42, 0.08);
}

.au-tab-card[aria-selected='true'] {
  background: linear-gradient(180deg, #ecfdf5 0%, #f0f9ff 100%);
  border-color: #ffffff !important;
  box-shadow: 0 12px 26px -6px rgba(15, 23, 42, 0.09);
  transform: translateY(-2px);
}

/* Contact Form Choice Cards (Topic & Mode Switchers — Pure Borderless White Rim) */
.au-choice-card {
  padding: 1rem;
  border-radius: 0.875rem;
  border: 1px solid #ffffff !important;
  background-color: #f8fafc;
  box-shadow:
    inset 0 1.5px 0 0 #ffffff,
    0 6px 16px -6px rgba(15, 23, 42, 0.045);
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition:
    transform 200ms var(--ease-spring),
    box-shadow 200ms var(--ease-spring),
    background-color 200ms var(--ease-spring);
}

.au-choice-card:hover:not([aria-pressed='true']) {
  background-color: #ffffff;
  border-color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1.5px 0 0 #ffffff,
    0 10px 22px -6px rgba(15, 23, 42, 0.07);
}

.au-choice-card[aria-pressed='true'] {
  background: linear-gradient(180deg, #ecfdf5 0%, #f0f9ff 100%) !important;
  border-color: #ffffff !important;
  box-shadow:
    inset 0 1.5px 0 0 #ffffff,
    0 10px 24px -6px rgba(15, 118, 110, 0.12) !important;
}

/* ==========================================================================
   6. Interactive Cards & Badges (Strict 1px Neutral Perimeter Border)
   ========================================================================== */

.au-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.au-scroll-x::-webkit-scrollbar {
  display: none;
}

.au-card-interactive {
  transition:
    transform 240ms var(--ease-spring),
    box-shadow 240ms var(--ease-spring),
    background-color 240ms var(--ease-spring);
}

.au-card-interactive:hover {
  transform: translateY(-3px);
  box-shadow:
    0 14px 28px -8px rgba(15, 23, 42, 0.08),
    0 4px 10px -3px rgba(15, 23, 42, 0.04);
  border-color: #e2e8f0;
}

.au-icon-box-emerald {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #047857;
  border: 1px solid #a7f3d0;
}

.au-icon-box-sky {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.au-icon-box-teal {
  background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%);
  color: #0f766e;
  border: 1px solid #99f6e4;
}

.au-icon-box-indigo {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  color: #4338ca;
  border: 1px solid #c7d2fe;
}

.au-icon-box-amber {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #b45309;
  border: 1px solid #fde68a;
}

/* ==========================================================================
   7. Form Validation, Copy Pill & Keyframe Animations
   ========================================================================== */

.au-field-group.is-invalid .au-input {
  border-color: #e11d48;
  background-color: rgba(255, 241, 242, 0.35);
}

.au-field-group.is-valid .au-input {
  border-color: #0d9488;
}

.au-field-error {
  font-size: 0.6875rem;
  line-height: 1.35;
  color: #be123c;
  margin-top: 0.25rem;
  font-weight: 500;
}

.au-char-counter {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: #64748b;
  transition: color 150ms ease;
}

.au-char-counter.is-ready {
  color: #0f766e;
  font-weight: 600;
}

.au-copy-pill {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-left: 0.375rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  background-color: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

.au-submit-loading {
  opacity: 0.75;
  cursor: wait;
}

@view-transition {
  navigation: auto;
}

@keyframes auVtFadeOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.992);
  }
}

@keyframes auVtFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

::view-transition-old(root) {
  animation: auVtFadeOut 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: auVtFadeIn 320ms var(--ease-spring) both;
}

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

.au-tab-panel:not([hidden]) {
  animation: auPanelEnter 260ms var(--ease-spring) both;
}

@keyframes auDropdownEnter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.975);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes auDropdownExit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
}

@keyframes auDrawerEnter {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes auDrawerExit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
  }
}

.au-dropdown-panel,
.au-mobile-drawer {
  pointer-events: auto;
}

.au-dropdown-panel[data-closing='true'],
.au-mobile-drawer[data-closing='true'] {
  pointer-events: none;
}

.au-dropdown-panel > .au-glass-popover,
.au-mobile-drawer > .au-glass-popover {
  opacity: 1;
  transform: none;
  transform-origin: top left;
  transition:
    opacity 200ms var(--ease-spring),
    transform 200ms var(--ease-spring);
}

@starting-style {
  .au-dropdown-panel:not([hidden]) > .au-glass-popover,
  .au-mobile-drawer:not([hidden]) > .au-glass-popover {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

.au-dropdown-panel[data-closing='true'] > .au-glass-popover,
.au-mobile-drawer[data-closing='true'] > .au-glass-popover {
  opacity: 0;
  transform: translateY(-6px) scale(0.985);
  transition-duration: 170ms;
  transition-timing-function: var(--ease-smooth);
}

.au-faq-grid {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 280ms var(--ease-spring),
    opacity 220ms var(--ease-spring);
}

.au-faq-grid[data-open='true'] {
  grid-template-rows: 1fr;
  opacity: 1;
}

.au-faq-inner {
  overflow: hidden;
}

/* Bidirectional Section & Staggered Child-Card Entrance + Viewport Exit */
html.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition:
    opacity 540ms var(--ease-spring),
    transform 540ms var(--ease-spring);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js-ready [data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

html.js-ready [data-reveal].is-exiting {
  opacity: 0;
  transform: translateY(-14px) scale(0.99);
  transition-duration: 340ms;
  transition-delay: 0ms;
}

html.js-ready [data-reveal] [data-reveal-child] {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity 520ms var(--ease-spring),
    transform 520ms var(--ease-spring),
    box-shadow 280ms var(--ease-spring),
    border-color 280ms var(--ease-spring),
    background 280ms var(--ease-spring);
  transition-delay: calc(var(--au-stagger-index, 0) * 65ms);
}

html.js-ready [data-reveal].is-revealed [data-reveal-child] {
  opacity: 1;
  transform: translateY(0) scale(1);
}

html.js-ready [data-reveal].is-exiting [data-reveal-child] {
  opacity: 0;
  transform: translateY(-10px) scale(0.99);
  transition-delay: 0ms;
}

html.js-ready [data-reveal].is-revealed [data-reveal-child]:hover {
  transition-delay: 0ms;
}

html.js-ready [data-reveal].is-revealed .au-bento-card-interactive[data-reveal-child]:hover {
  transform: translateY(-4px) scale(1.005);
}

html.js-ready [data-reveal].is-revealed .au-portrait-card[data-reveal-child]:hover {
  transform: translateY(-5px) scale(1.005);
}

html.js-ready [data-reveal].is-revealed .au-tile-minimal[data-reveal-child]:hover {
  transform: translateY(-3px) scale(1.01);
}

@keyframes auPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
}

.au-pulse-dot {
  animation: auPulse 2.4s infinite ease-in-out;
}

/* ==========================================================================
   9. BIOCAD + ABIVAX + SYNORA + Apple Liquid Glass Architecture (v2.4.2)
   ========================================================================== */

.au-canvas-bento {
  background-color: #f3f5f8;
}

.au-hero-abivax {
  background-color: #f3f5f8;
  background-image:
    linear-gradient(180deg, rgba(243, 245, 248, 0) 68%, #f3f5f8 100%),
    radial-gradient(circle at 18% 35%, rgba(16, 185, 129, 0.14) 0%, transparent 45%),
    radial-gradient(circle at 82% 22%, rgba(56, 189, 248, 0.14) 0%, transparent 46%),
    radial-gradient(circle at 52% 65%, rgba(167, 139, 250, 0.09) 0%, transparent 45%),
    linear-gradient(180deg, #f8fafd 0%, #f3f5f8 100%);
}

/* Fixed Header Shell Over Hero & Transparent-to-Liquid-Glass Pill Morph (Zero Hover Shift) */
.au-header-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  width: 100%;
  padding-top: 0.875rem;
  padding-bottom: 0.25rem;
}

.au-header-pill {
  position: relative;
  z-index: 1;
  height: 3.375rem;
  padding-inline-start: 1.25rem;
  padding-inline-end: 0.4375rem;
  border-radius: 9999px;
  background: transparent;
}

@media (min-width: 640px) {
  .au-header-pill {
    padding-inline-end: 0.325rem;
  }
}

.au-header-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  z-index: -1;
  pointer-events: none;
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid rgba(255, 255, 255, 0);
  box-shadow: var(--au-glass-rim-zero);
  backdrop-filter: blur(0px) saturate(100%);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  transition:
    background-color 380ms var(--ease-spring),
    border-color 380ms var(--ease-spring),
    box-shadow 380ms var(--ease-spring),
    backdrop-filter 380ms var(--ease-spring),
    -webkit-backdrop-filter 380ms var(--ease-spring);
}

.au-header-shell[data-scrolled='true'] .au-header-pill::before {
  background-color: rgba(255, 255, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.88);
  box-shadow: var(--au-glass-rim-chrome);
  backdrop-filter: var(--au-glass-blur-chrome);
  -webkit-backdrop-filter: var(--au-glass-blur-chrome);
}

@keyframes auHeaderPillScroll {
  from {
    background-color: rgba(255, 255, 255, 0);
    border-color: rgba(255, 255, 255, 0);
    box-shadow: var(--au-glass-rim-zero);
    backdrop-filter: blur(0px) saturate(100%);
    -webkit-backdrop-filter: blur(0px) saturate(100%);
  }
  to {
    background-color: rgba(255, 255, 255, 0.78);
    border-color: rgba(255, 255, 255, 0.88);
    box-shadow: var(--au-glass-rim-chrome);
    backdrop-filter: var(--au-glass-blur-chrome);
    -webkit-backdrop-filter: var(--au-glass-blur-chrome);
  }
}

@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  .au-header-pill::before {
    animation: auHeaderPillScroll linear both;
    animation-timeline: scroll(block root);
    animation-range: 0px 64px;
  }
}

/* Tier 1 Liquid Glass Popovers (Header Dropdowns & Mobile Drawer) */
.au-glass-popover {
  background: var(--au-glass-fill-popover);
  border: 1px solid #ffffff;
  background-clip: padding-box;
  box-shadow: var(--au-glass-rim-popover);
  backdrop-filter: var(--au-glass-blur-popover);
  -webkit-backdrop-filter: var(--au-glass-blur-popover);
}

/* Tier 1 Liquid Glass Hero Visual Bezel (Pure Borderless White Rim) */
.au-hero-glass-frame {
  padding: 0.375rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.68) 100%);
  border: 1px solid #ffffff;
  background-clip: padding-box;
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.65),
    0 20px 44px -14px rgba(15, 23, 42, 0.065);
  backdrop-filter: var(--au-glass-blur-subtle);
  -webkit-backdrop-filter: var(--au-glass-blur-subtle);
  transition:
    transform 320ms var(--ease-spring),
    box-shadow 320ms var(--ease-spring);
}

.au-hero-glass-frame:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.80),
    0 26px 52px -14px rgba(15, 23, 42, 0.10);
}

.au-hero-portrait {
  aspect-ratio: 4 / 5;
  max-height: min(72dvh, 680px);
  object-position: center 45%;
}

.au-nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.375rem;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #334155;
  background-color: transparent;
  border: none;
  transition:
    transform 200ms var(--ease-spring),
    background 200ms var(--ease-smooth),
    box-shadow 200ms var(--ease-spring),
    color 200ms var(--ease-smooth);
}

.au-nav-pill:hover {
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 1px 0 0 #ffffff,
    0 2px 8px -2px rgba(15, 23, 42, 0.05);
  color: #0a0d14;
  transform: none;
}

.au-nav-pill.is-active {
  background: var(--au-glass-fill-pill-dark);
  border: none;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    0 6px 16px -4px rgba(15, 23, 42, 0.20);
  color: #ffffff;
}

.au-nav-pill.is-active .au-nav-pill-icon {
  color: #34d399;
}

.au-nav-pill.is-active .au-nav-pill-chevron {
  color: #94a3b8;
}

/* Liquid Glass Pill Buttons with Contrasting Circular Arrow Disc */
.au-btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.625rem;
  padding: 0.3125rem 0.3125rem 0.3125rem 1.25rem;
  border-radius: 9999px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 240ms var(--ease-spring),
    background 240ms var(--ease-smooth),
    border-color 240ms var(--ease-smooth),
    box-shadow 240ms var(--ease-spring),
    color 240ms var(--ease-smooth);
}

.au-btn-pill:hover {
  transform: translateY(-2px);
}

.au-header-pill .au-btn-pill:hover {
  transform: none;
}

.au-btn-pill:active {
  transform: translateY(0.5px) scale(0.985);
}

.au-btn-pill-dark {
  background: var(--au-glass-fill-pill-dark);
  color: #ffffff;
  border: none;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.24),
    0 10px 24px -6px rgba(15, 23, 42, 0.24);
}

.au-btn-pill-dark:hover {
  background: linear-gradient(180deg, rgba(13, 148, 136, 0.96) 0%, rgba(15, 118, 110, 0.99) 100%);
  border: none;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.34),
    0 14px 28px -6px rgba(15, 118, 110, 0.32);
  color: #ffffff;
}

.au-btn-pill-white {
  background: var(--au-glass-fill-pill-light);
  color: #0a0d14;
  border: 1px solid #ffffff;
  background-clip: padding-box;
  backdrop-filter: blur(12px) saturate(165%);
  -webkit-backdrop-filter: blur(12px) saturate(165%);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    0 8px 20px -4px rgba(7, 11, 20, 0.18);
}

.au-btn-pill-white:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 253, 249, 0.92) 100%);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    0 12px 26px -4px rgba(7, 11, 20, 0.24);
}

.au-btn-pill-outline {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.92) 100%);
  color: #0a0d14;
  border: 1px solid #ffffff;
  background-clip: padding-box;
  padding: 0.5rem 1.35rem;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    0 8px 20px -6px rgba(15, 23, 42, 0.06);
}

.au-btn-pill-outline:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(240, 253, 249, 0.96) 100%);
  border-color: #ffffff;
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    0 12px 26px -6px rgba(15, 118, 110, 0.11);
  color: #0f766e;
}

.au-btn-disc {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: #ffffff;
  color: #0a0d14;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1), 0 2px 6px -1px rgba(15, 23, 42, 0.12);
  transition:
    transform 240ms var(--ease-spring),
    background-color 240ms var(--ease-smooth),
    color 240ms var(--ease-smooth);
}

.au-btn-pill-white .au-btn-disc {
  background-color: #181a20;
  color: #ffffff;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
}

.au-btn-pill:hover .au-btn-disc {
  transform: scale(1.08);
}

.au-btn-pill:hover .au-btn-disc .au-icon {
  transform: translate(1.5px, -1.5px);
}

/* Tier 2 Compositor-Fast Optical Liquid Glass Bento Cards & Editorial Mission Block */
.au-bento-card {
  position: relative;
  background: var(--au-glass-fill-card);
  border-radius: 1.5rem;
  border: 1px solid #ffffff;
  background-clip: padding-box;
  box-shadow: var(--au-glass-rim-card);
  transition:
    transform 280ms var(--ease-spring),
    box-shadow 280ms var(--ease-spring),
    border-color 280ms var(--ease-spring),
    background 280ms var(--ease-spring);
}

.au-bento-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 15% 0%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 58%);
  opacity: 0.65;
  pointer-events: none;
  transition: opacity 280ms var(--ease-spring);
}

/* Tier 1 Real-Time Backdrop Refraction on Hero Bento Cards */
.au-hero-abivax .au-bento-card {
  background: var(--au-glass-fill-card-hero);
  backdrop-filter: var(--au-glass-blur-subtle);
  -webkit-backdrop-filter: var(--au-glass-blur-subtle);
}

.au-bento-card-interactive:hover {
  transform: translateY(-4px);
  border-color: #ffffff;
  box-shadow: var(--au-glass-rim-card-hover);
}

.au-bento-card-interactive:hover::before {
  opacity: 1;
}

.au-mission-block {
  position: relative;
  background: linear-gradient(145deg, rgba(232, 239, 247, 0.92) 0%, rgba(222, 232, 243, 0.78) 55%, rgba(235, 243, 250, 0.88) 100%);
  border-radius: 1.75rem;
  border: 1px solid #ffffff;
  background-clip: padding-box;
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.55),
    0 16px 36px -14px rgba(15, 23, 42, 0.045);
}

.au-bento-soft-sky {
  position: relative;
  background: linear-gradient(150deg, rgba(235, 245, 255, 0.92) 0%, rgba(224, 238, 252, 0.78) 100%);
  border-radius: 1.5rem;
  border: 1px solid #ffffff;
  background-clip: padding-box;
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 0 rgba(186, 230, 253, 0.45),
    0 14px 32px -12px rgba(2, 132, 199, 0.055);
}

.au-bento-soft-mint {
  position: relative;
  background: linear-gradient(150deg, rgba(232, 248, 243, 0.92) 0%, rgba(219, 242, 235, 0.78) 100%);
  border-radius: 1.5rem;
  border: 1px solid #ffffff;
  background-clip: padding-box;
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 0 rgba(167, 243, 208, 0.45),
    0 14px 32px -12px rgba(5, 150, 105, 0.055);
}

/* BIOCAD Minimalist Dot Eyebrow */
.au-eyebrow-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #475569;
}

.au-eyebrow-dot::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 9999px;
  background-color: #10b981;
  display: inline-block;
  flex-shrink: 0;
}

/* SYNORA Tall Portrait Visual Cards with Bottom Gradient Scrim (Zero Dark Border) */
.au-portrait-card {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  min-height: 23rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: #ffffff;
  border: none;
  box-shadow: 0 16px 36px -12px rgba(15, 23, 42, 0.10);
  text-decoration: none;
  transition:
    transform 280ms var(--ease-spring),
    box-shadow 280ms var(--ease-spring);
}

.au-portrait-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 46px -14px rgba(15, 23, 42, 0.22);
}

.au-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--ease-spring);
}

.au-portrait-card:hover .au-portrait-img {
  transform: scale(1.05);
}

.au-portrait-scrim {
  position: relative;
  z-index: 2;
  padding: 4.5rem 1.5rem 1.75rem;
  background: linear-gradient(
    180deg,
    rgba(10, 13, 20, 0) 0%,
    rgba(10, 19, 34, 0.62) 42%,
    rgba(8, 22, 38, 0.94) 100%
  );
  color: #ffffff;
}

/* SYNORA Minimalist Specialty / Module Tile with Pure Borderless White Rim */
.au-tile-minimal {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.86) 100%);
  border-radius: 1.25rem;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  border: 1px solid #ffffff;
  background-clip: padding-box;
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.60),
    0 10px 26px -10px rgba(15, 23, 42, 0.045);
  transition:
    transform 240ms var(--ease-spring),
    box-shadow 240ms var(--ease-spring),
    border-color 240ms var(--ease-spring);
}

.au-tile-minimal:hover {
  transform: translateY(-3px);
  border-color: #ffffff;
  box-shadow:
    inset 0 1.5px 0 0 rgba(255, 255, 255, 1),
    0 16px 32px -10px rgba(15, 23, 42, 0.085);
}

/* BIOCAD Inset Dark Charcoal Rounded-3xl Footer Card */
.au-footer-dark-card {
  background: linear-gradient(165deg, #1d2028 0%, #14171f 100%);
  color: #ffffff;
  border-radius: 1.75rem;
  border: none;
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.14),
    0 20px 44px -14px rgba(7, 11, 20, 0.28);
}

/* ==========================================================================
   10. Generous Editorial Spacing Rhythm Primitives & Utility Backfill (v2.4.3)
   ========================================================================== */

@layer components {
  .au-section {
    padding-block: var(--au-space-section-pad);
  }

  .au-section-flow {
    padding-block: var(--au-space-section-pad);
  }

  .au-section-snapshot {
    padding-top: clamp(2.5rem, 1.75rem + 2.5vw, 4rem);
    padding-bottom: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  }

  .au-section-lead {
    padding-top: calc(var(--au-space-section-lead-top) + 4.75rem);
    padding-bottom: var(--au-space-section-lead-bottom);
  }

  .au-section-lead-compact {
    padding-top: calc(var(--au-space-section-lead-top) + 4.25rem);
    padding-bottom: clamp(2rem, 3.5dvh, 3rem);
  }

  /* Pure, Breathable 100dvh Stage on Desktop (Zero Internal Padding Compression) */
  @media (min-width: 1024px) {
    .au-section-lead:not(.au-section-lead-compact) {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .au-section-lead:not(.au-section-lead-compact) > .max-w-7xl {
      width: 100%;
    }

    .au-section:not(.au-section-flow) {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .au-section:not(.au-section-flow) > .max-w-7xl {
      width: 100%;
    }
  }

  .au-stack-block {
    display: flex;
    flex-direction: column;
    gap: var(--au-space-block);
  }

  .au-grid-gap {
    gap: var(--au-space-grid);
  }

  .au-card-pad {
    padding: var(--au-space-card);
  }

  .au-card-pad-sm {
    padding: var(--au-space-card-sm);
  }

  .au-mission-pad {
    padding: var(--au-space-mission-y) var(--au-space-mission-x);
  }

  .au-stack-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .au-stack-text > :where(* + *) {
    margin-top: var(--au-space-stack-sm);
  }

  .au-stack-text > :where(.au-eyebrow-dot + *) {
    margin-top: var(--au-space-stack-xs);
  }

  .au-stack-text > :where(.au-hero-splitbar, .au-cta-row) {
    margin-top: var(--au-space-stack-md);
  }

  .au-hero-splitbar {
    width: 100%;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(203, 213, 225, 0.85);
  }

  .au-header-shell {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    width: 100%;
    padding-top: 0.875rem;
    padding-bottom: 0.25rem;
  }

  .au-footer-shell {
    padding-top: 1.5rem;
    padding-bottom: 2.5rem;
  }

  .au-footer-pad {
    padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  }
}

@layer utilities {
  .h-full { height: 100%; }
  .h-auto { height: auto; }
  .h-14 { height: 3.5rem; }
  .w-14 { width: 3.5rem; }
  .min-w-10 { min-width: 2.5rem; }
  .max-w-xs { max-width: 20rem; }
  .max-w-sm { max-width: 24rem; }
  .max-w-lg { max-width: 32rem; }
  .max-h-\[460px\] { max-height: 460px; }
  .object-cover { object-fit: cover; }
  .rounded-3xl { border-radius: 1.5rem; }
  .items-end { align-items: flex-end; }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .leading-\[1\.08\] { line-height: 1.08; }
  .leading-\[1\.1\] { line-height: 1.1; }
  .leading-\[1\.3\] { line-height: 1.3; }
  .text-slate-200 { color: #e2e8f0; }
  .text-sky-300 { color: #7dd3fc; }
  .border-slate-300\/80 { border-color: rgb(203 213 225 / 0.8); }
  .border-slate-700 { border-color: #334155; }
  .border-sky-200\/60 { border-color: rgb(186 230 253 / 0.6); }
  .bg-white\/60 { background-color: rgb(255 255 255 / 0.6); }
  .pl-1 { padding-inline-start: 0.25rem; }
  .mb-3 { margin-bottom: 0.75rem; }
  .pt-5 { padding-top: 1.25rem; }
  .pb-8 { padding-bottom: 2rem; }
  .au-cta-row { display: flex; flex-wrap: wrap; align-items: center; }

  @media (hover: hover) {
    .hover\:text-white:hover { color: #ffffff; }
    .hover\:text-emerald-400:hover { color: #34d399; }
    .hover\:bg-slate-200:hover { background-color: #e2e8f0; }
    .hover\:bg-slate-100\/80:hover { background-color: rgb(241 245 249 / 0.8); }
    .hover\:bg-slate-50\/60:hover { background-color: rgb(248 250 252 / 0.6); }
    .group:hover .group-hover\:scale-105 { scale: 1.05; }
  }

  @media (width >= 40rem) {
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .sm\:col-span-5 { grid-column: span 5 / span 5; }
    .sm\:col-span-7 { grid-column: span 7 / span 7; }
    .sm\:text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    .sm\:text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .sm\:h-8 { height: 2rem; }
  }

  @media (width >= 64rem) {
    .lg\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .lg\:gap-10 { gap: 2.5rem; }
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
  html {
    scroll-behavior: auto;
  }
  .au-header-shell,
  .au-header-pill,
  .au-header-pill::before {
    animation: none !important;
    transition: none !important;
  }
  html.js-ready [data-reveal],
  html.js-ready [data-reveal] [data-reveal-child] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}