/* ═══════════════════════════════════════════════════════════════
   JOB RECRUITMENT US ENTERPRISE DESIGN SYSTEM (assets/us-theme.css)
   Aesthetic: Executive Obsidian & Warm Minimalist Canvas
   Inspiration: Korn Ferry, Robert Half, Toptal, Spencer Stuart
   Palette: Obsidian (#0F172A), Crisp White (#FFFFFF), Pearl Slate (#F8FAFC),
            Executive Navy (#0A2540), Refined Crimson (#BE123C)
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Canvas & Backgrounds */
  --us-canvas: #ffffff;
  --us-canvas-subtle: #f8fafc;
  --us-canvas-card: #ffffff;
  --us-canvas-elevated: #f1f5f9;

  /* Typography Hierarchy */
  --us-text-headline: #0f172a;
  --us-text-body: #334155;
  --us-text-muted: #64748b;
  --us-text-subtle: #94a3b8;

  /* Executive Brand Colors */
  --us-navy: #0a2540;
  --us-navy-dark: #071526;
  --us-navy-light: #16385c;
  --us-navy-soft: #f0f5fa;

  --us-crimson: #be123c;
  --us-crimson-hover: #9f1239;
  --us-crimson-soft: #fff1f2;
  --us-crimson-border: #fecdd3;

  /* Structural Hairlines & Borders */
  --us-border-subtle: #e2e8f0;
  --us-border-medium: #cbd5e1;
  --us-border-focus: #0a2540;

  /* Accent & Indicators */
  --us-emerald: #059669;
  --us-emerald-soft: #ecfdf5;
  --us-emerald-border: #a7f3d0;

  /* Font Stack */
  --us-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Modern Refined Shadows */
  --shadow-subtle: 0 1px 3px 0 rgba(15, 23, 42, 0.04), 0 1px 2px -1px rgba(15, 23, 42, 0.02);
  --shadow-card: 0 4px 6px -1px rgba(15, 23, 42, 0.04), 0 2px 4px -2px rgba(15, 23, 42, 0.03);
  --shadow-hover: 0 12px 20px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
  --shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}

/* ── Base Reset & Body ── */
body {
  font-family: var(--us-font-sans);
  background-color: var(--us-canvas-subtle) !important;
  color: var(--us-text-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* ── Global Typography Scaling ── */
h1, h2, h3, h4, h5, h6 {
  color: var(--us-text-headline);
  font-weight: 700;
  letter-spacing: -0.02em;
}

p {
  color: var(--us-text-body);
}

/* ═══════════════════════════════════════════════════════════════
   1. HARMONIOUS BUTTON SYSTEM (Disciplined, High-End)
   ═══════════════════════════════════════════════════════════════ */

/* Primary Executive Navy CTA */
.btn-us-navy, .btn-executive-navy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--us-navy) !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.6875rem 1.25rem;
  border-radius: 0.625rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 4px rgba(10, 37, 64, 0.15);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn-us-navy:hover, .btn-executive-navy:hover {
  background-color: var(--us-navy-light) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(10, 37, 64, 0.2);
  color: #ffffff !important;
}

/* Refined Crimson CTA (For high-conversion actions) */
.btn-us-primary, .btn-executive-crimson {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--us-crimson) !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.6875rem 1.25rem;
  border-radius: 0.625rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(190, 18, 60, 0.25);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn-us-primary:hover, .btn-executive-crimson:hover {
  background-color: var(--us-crimson-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(190, 18, 60, 0.32);
  color: #ffffff !important;
}

/* Elegant Outline Button */
.btn-us-outline, .btn-executive-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #ffffff !important;
  color: var(--us-text-headline) !important;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.6875rem 1.25rem;
  border-radius: 0.625rem;
  border: 1px solid var(--us-border-medium) !important;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-us-outline:hover, .btn-executive-outline:hover {
  border-color: var(--us-text-headline) !important;
  background-color: var(--us-canvas-subtle) !important;
  color: var(--us-text-headline) !important;
}

/* ═══════════════════════════════════════════════════════════════
   2. REFINED BADGES & CHIPS (Zero Neon Clutter)
   ═══════════════════════════════════════════════════════════════ */

/* Clean Neutral Executive Chip */
.badge-executive, .tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: #f1f5f9;
  color: #334155;
  border: 1px solid #e2e8f0;
}

/* Verified Badge (Subtle Emerald) */
.badge-us-verified, .badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--us-emerald-soft);
  color: var(--us-emerald);
  border: 1px solid var(--us-emerald-border);
}

/* Subtle Crimson Indicator (Used strictly for Urgent mandates) */
.badge-us-red {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--us-crimson-soft);
  color: var(--us-crimson);
  border: 1px solid var(--us-crimson-border);
}

/* Subtle Navy Indicator */
.badge-us-blue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: var(--us-navy-soft);
  color: var(--us-navy);
  border: 1px solid rgba(10, 37, 64, 0.15);
}

/* ═══════════════════════════════════════════════════════════════
   3. CLEAN EXECUTIVE CARD ARCHITECTURE
   ═══════════════════════════════════════════════════════════════ */

.card-executive, .card-us-clean, .card-us-hover {
  background-color: #ffffff;
  border: 1px solid var(--us-border-subtle);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-subtle);
  transition: all 0.25s ease;
}
.card-executive:hover, .card-us-clean:hover, .card-us-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
  border-color: var(--us-border-medium);
}

/* Job Listing Modern Card (Executive Spacious Layout) */
.card-job-modern {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1.125rem;
  padding: 1.35rem 1.25rem 1.2rem;
  box-shadow: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.03);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
}
.card-job-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -4px rgba(15, 23, 42, 0.09), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  border-color: #94a3b8;
}

/* Card Typography & Clamping Utilities */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.min-h-\[2\.6rem\] {
  min-height: 2.6rem;
}
.min-h-\[1\.75rem\] {
  min-height: 1.75rem;
}
.shadow-2xs {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Metric Display Blocks */
.metric-card-us {
  background-color: #ffffff;
  border: 1px solid var(--us-border-subtle);
  border-radius: 0.875rem;
  padding: 1.25rem 1rem;
  text-align: center;
  box-shadow: var(--shadow-subtle);
}
.metric-number-us {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--us-text-headline);
  line-height: 1.1;
}
.metric-label-us {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--us-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.35rem;
}

/* ═══════════════════════════════════════════════════════════════
   4. HERO SECTIONS (Calm, Confident & Spacious)
   ═══════════════════════════════════════════════════════════════ */

.hero-enterprise-light, .hero-slate-light {
  background-color: #ffffff !important;
  background-image: radial-gradient(at 100% 0%, rgba(10, 37, 64, 0.03) 0px, transparent 50%),
                    radial-gradient(at 0% 100%, rgba(190, 18, 60, 0.02) 0px, transparent 50%) !important;
  border-bottom: 1px solid var(--us-border-subtle) !important;
}

/* ═══════════════════════════════════════════════════════════════
   5. UNIFIED SEARCH TOOLBAR (Segmented Horizontal Bar)
   ═══════════════════════════════════════════════════════════════ */

.search-toolbar-segmented {
  background-color: #ffffff;
  border: 1px solid var(--us-border-subtle);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  padding: 0.5rem;
}

.search-segment {
  display: flex;
  align-items: center;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  transition: background-color 0.2s ease;
}
.search-segment:focus-within {
  background-color: #f8fafc;
}

/* ═══════════════════════════════════════════════════════════════
   6. TOP NAVIGATION & ACCORDION DRAWER
   ═══════════════════════════════════════════════════════════════ */

#main-nav {
  background-color: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--us-border-subtle);
  transition: all 0.25s ease;
}

.nav-link-executive {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--us-text-body);
  text-decoration: none;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  transition: all 0.15s ease;
}
.nav-link-executive:hover {
  color: var(--us-text-headline);
  background-color: #f1f5f9;
}
.nav-link-executive.active {
  color: var(--us-navy);
  font-weight: 600;
}

/* Recruiter Availability Pulse */
.radar-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #10b981;
  position: relative;
}
.radar-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid #10b981;
  opacity: 0.7;
  animation: pulse-ring 2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
@keyframes pulse-ring {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* Fallback utilities to gracefully style any older markup */
.text-on-surface, .text-primary { color: var(--us-text-headline) !important; }
.text-on-surface-variant { color: var(--us-text-muted) !important; }
.bg-surface { background-color: var(--us-canvas) !important; }
.bg-surface-container-low { background-color: #f8fafc !important; }
.border-outline-variant { border-color: var(--us-border-subtle) !important; }

/* ═══════════════════════════════════════════════════════════════
   7. MOBILE NAVIGATION DRAWER & BACKDROP (Off-Canvas)
   ═══════════════════════════════════════════════════════════════ */
#us-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#us-sidebar-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

#us-sidebar-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 320px;
  max-width: 85vw;
  background-color: #0F172A;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}

#us-sidebar-drawer.open {
  transform: translateX(0);
}

.us-side-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  color: #94a3b8;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.15s ease;
}

.us-side-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
}

.us-side-link.active {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

.us-side-link .material-symbols-outlined {
  font-size: 1.25rem;
  color: #64748b;
  transition: color 0.15s ease;
}

.us-side-link:hover .material-symbols-outlined,
.us-side-link.active .material-symbols-outlined {
  color: #38bdf8;
}

.live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: live-pulse-ring 2s infinite;
}

@keyframes live-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* ═══════════════════════════════════════════════════════════════
   8. SECTION BACKGROUND SYSTEM (Rich Contrast & Visual Rhythm)
   ═══════════════════════════════════════════════════════════════ */

/* Deep Executive Midnight Navy Section (High-Contrast Break) */
.section-dark-navy, .bg-executive-navy, .bg-\[\#0b192c\], .bg-\[\#0A192F\], .bg-\[\#071526\], .bg-\[\#0b1329\], .bg-\[\#0A2540\] {
  background-color: #0A192F !important;
  color: #CBD5E1 !important;
  position: relative;
}
.section-dark-navy h1, .section-dark-navy h2, .section-dark-navy h3, .section-dark-navy h4,
.bg-executive-navy h1, .bg-executive-navy h2, .bg-executive-navy h3, .bg-executive-navy h4,
.bg-\[\#0b192c\] h1, .bg-\[\#0b192c\] h2, .bg-\[\#0b192c\] h3, .bg-\[\#0b192c\] h4,
.bg-\[\#0A2540\] h1, .bg-\[\#0A2540\] h2, .bg-\[\#0A2540\] h3, .bg-\[\#0A2540\] h4 {
  color: #FFFFFF !important;
}
.section-dark-navy p, .bg-executive-navy p, .bg-\[\#0b192c\] p, .bg-\[\#0A2540\] p {
  color: #CBD5E1 !important;
}

/* Deep Obsidian Slate Section */
.section-obsidian, .bg-executive-obsidian, .bg-\[\#0f172a\], .bg-\[\#0F172A\] {
  background-color: #0F172A !important;
  color: #CBD5E1 !important;
  position: relative;
}
.section-obsidian h1, .section-obsidian h2, .section-obsidian h3, .section-obsidian h4,
.bg-executive-obsidian h1, .bg-executive-obsidian h2, .bg-executive-obsidian h3, .bg-executive-obsidian h4,
.bg-\[\#0f172a\] h1, .bg-\[\#0f172a\] h2, .bg-\[\#0f172a\] h3, .bg-\[\#0f172a\] h4 {
  color: #FFFFFF !important;
}
.section-obsidian p, .bg-executive-obsidian p, .bg-\[\#0f172a\] p {
  color: #CBD5E1 !important;
}

/* Distinct Pearl Slate Section (Cool Gray Contrast to elevate white cards) */
.section-slate-contrast, .bg-slate-contrast, .bg-slate-100-contrast, .bg-\[\#F1F5F9\], .bg-\[\#EEF2F6\], .bg-\[\#eef2f6\] {
  background-color: #EEF2F6 !important;
  border-top: 1px solid #CBD5E1 !important;
  border-bottom: 1px solid #CBD5E1 !important;
}

/* Elevated White Cards on Slate Contrast Sections */
.section-slate-contrast .card-job-modern,
.section-slate-contrast .card-us-hover,
.section-slate-contrast .card-us-clean,
.section-slate-contrast .blog-card,
.section-slate-contrast .faq-item,
.section-slate-contrast .faq-question,
.section-slate-contrast .metric-card-us {
  background-color: #FFFFFF !important;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04) !important;
  border: 1px solid #CBD5E1 !important;
}

.section-slate-contrast .card-job-modern:hover,
.section-slate-contrast .card-us-hover:hover,
.section-slate-contrast .card-us-clean:hover,
.section-slate-contrast .blog-card:hover {
  box-shadow: 0 14px 28px -4px rgba(15, 23, 42, 0.12), 0 6px 10px -2px rgba(15, 23, 42, 0.06) !important;
  border-color: #64748B !important;
}

/* Corporate Soft Blue Ribbon Section */
.section-blue-ribbon, .bg-blue-ribbon {
  background-color: #EBF3FB !important;
  border-top: 1px solid #D0E1F9 !important;
  border-bottom: 1px solid #D0E1F9 !important;
}

/* Soft Slate Subtle Canvas */
.section-slate-soft, .bg-slate-soft, .bg-\[\#f8fafc\], .bg-\[\#F8FAFC\] {
  background-color: #F8FAFC !important;
}

/* Crisp Pure White Section */
.section-white-canvas, .bg-white-canvas {
  background-color: #FFFFFF !important;
}

/* High-Contrast Dark Card (e.g. Employer box in Dual Track) */
.card-dark-navy {
  background-color: #0F172A !important;
  border: 1px solid #334155 !important;
  color: #CBD5E1 !important;
  box-shadow: 0 12px 30px -5px rgba(15, 23, 42, 0.35) !important;
  border-radius: 1.5rem !important;
}
.card-dark-navy h2, .card-dark-navy h3, .card-dark-navy h4 {
  color: #FFFFFF !important;
}
.card-dark-navy p {
  color: #CBD5E1 !important;
}
.card-dark-navy li {
  color: #E2E8F0 !important;
}
.card-dark-navy .text-slate-400 {
  color: #94A3B8 !important;
}

/* Outline Button on Dark Card (100% Guaranteed High Contrast) */
.btn-outline-white-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.6875rem 1.25rem;
  border-radius: 0.625rem;
  transition: all 0.2s ease;
  text-decoration: none;
  cursor: pointer;
}
.btn-outline-white-dark:hover {
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   9. UNIVERSAL FOOTER (100% Guaranteed Dark Midnight Navy Canvas)
   ═══════════════════════════════════════════════════════════════ */
#site-footer, footer#site-footer, .bg-\[\#070e1b\], .footer-executive-dark {
  background-color: #070E1B !important;
  color: #94A3B8 !important;
  border-top: 1px solid #1E293B !important;
  position: relative;
  z-index: 10;
  display: block;
  width: 100%;
}
#site-footer h1, #site-footer h2, #site-footer h3, #site-footer h4,
#site-footer strong, #site-footer .text-white, .bg-\[\#070e1b\] .text-white {
  color: #FFFFFF !important;
}
#site-footer p, #site-footer span, #site-footer li, .bg-\[\#070e1b\] p {
  color: #94A3B8 !important;
}
#site-footer a, .bg-\[\#070e1b\] a {
  color: #94A3B8 !important;
  transition: color 0.15s ease;
  text-decoration: none;
}
#site-footer a:hover, .bg-\[\#070e1b\] a:hover {
  color: #FFFFFF !important;
}

/* ═══════════════════════════════════════════════════════════════
   10. DARK SECTION COMPONENT ENHANCEMENTS
   ═══════════════════════════════════════════════════════════════ */
.card-navy-glass {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 1rem !important;
  transition: all 0.25s ease !important;
  color: #CBD5E1 !important;
}
.card-navy-glass:hover {
  background-color: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px);
}
.card-navy-glass h3, .card-navy-glass h4 {
  color: #FFFFFF !important;
}
.card-navy-glass p {
  color: #94A3B8 !important;
}



/* ═══════════════════════════════════════════════════════════════
   11. HERO CAROUSEL SYSTEM (Executive Full-Width & Split Slider)
   ═══════════════════════════════════════════════════════════════ */
.hero-slider-wrapper {
  position: relative;
  width: 100%;
  height: 520px;
  overflow: hidden;
  background-color: #0A192F;
}
@media (min-width: 768px) {
  .hero-slider-wrapper {
    height: 580px;
  }
}
@media (min-width: 1280px) {
  .hero-slider-wrapper {
    height: 620px;
  }
}

.hero-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s;
  z-index: 0;
}
.hero-carousel-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}
.hero-carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 25;
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-carousel-nav-btn:hover {
  background-color: rgba(15, 23, 42, 0.9);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-50%) scale(1.08);
}
.hero-carousel-prev {
  left: 1.25rem;
}
.hero-carousel-next {
  right: 1.25rem;
}

.hero-carousel-dots-wrap {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 0.375rem 0.875rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 25;
}
.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s ease;
}
.hero-dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.hero-dot.active {
  width: 28px;
  background-color: #E11D48;
}

/* ═══════════════════════════════════════════════════════════════
   12. DEFENSIVE UTILITY FALLBACKS (Guarantees layout across all builds)
   ═══════════════════════════════════════════════════════════════ */
.mb-2\.5 { margin-bottom: 0.625rem !important; }
.mb-14 { margin-bottom: 3.5rem !important; }
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.875rem !important; }
.text-\[11px\] { font-size: 11px !important; line-height: 1rem !important; }
.bg-rose-100 { background-color: #ffe4e6 !important; }
.bg-rose-600 { background-color: #e11d48 !important; }
.bg-emerald-600 { background-color: #059669 !important; }
.shadow-xs, .shadow-2xs { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important; }
/* Employer Page Hero Showcase Card */
.employer-hero-card {
  position: relative;
  width: 100%;
  min-height: 440px;
  aspect-ratio: 4 / 3;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
  border: 1px solid #cbd5e1;
  background-color: #0f172a;
}
@media (max-width: 640px) {
  .employer-hero-card {
    min-height: 340px;
    aspect-ratio: 16 / 11;
  }
}

/* ═══════════════════════════════════════════════════════════════
   13. COMPREHENSIVE MOBILE RESPONSIVE ENGINE (Fluid, Touch-Optimized)
   ═══════════════════════════════════════════════════════════════ */

/* Global Anti-Overflow & Smooth Touch */
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative;
  -webkit-text-size-adjust: 100%;
}

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

img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* Prevent iOS Safari Auto-Zoom On Input Focus (< 768px) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="file"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Touch Targets & Micro-Interactions */
@media (max-width: 768px) {
  button, 
  a.btn-executive-navy, 
  a.btn-executive-crimson, 
  a.btn-executive-outline, 
  .btn-us-navy, 
  .btn-us-primary, 
  .btn-us-outline {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* Fluid Mobile Typography & Headings */
@media (max-width: 640px) {
  h1, .hero-title {
    font-size: clamp(1.75rem, 6.5vw, 2.35rem) !important;
    line-height: 1.2 !important;
  }
  h2 {
    font-size: clamp(1.35rem, 5vw, 1.85rem) !important;
    line-height: 1.25 !important;
  }
  h3 {
    font-size: clamp(1.1rem, 4.2vw, 1.4rem) !important;
    line-height: 1.3 !important;
  }
  p {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
  }
}

/* Mobile Spacing & Clean Container Padding */
@media (max-width: 640px) {
  .-mt-8, .-mt-12, .-mt-16 {
    margin-top: 0.75rem !important;
  }
  .px-4, .px-6, .px-8, .px-gutter {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .py-16, .py-20 {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
  }
  .py-12 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Mobile Hero Carousels & Controls */
@media (max-width: 640px) {
  .hero-slider-wrapper {
    height: 490px !important;
  }
  .hero-carousel-nav-btn {
    width: 36px !important;
    height: 36px !important;
  }
  .hero-carousel-prev {
    left: 0.5rem !important;
  }
  .hero-carousel-next {
    right: 0.5rem !important;
  }
  .hero-carousel-dots-wrap {
    bottom: 0.875rem !important;
    padding: 0.25rem 0.625rem !important;
  }
  .hero-dot {
    width: 6px !important;
    height: 6px !important;
  }
  .hero-dot.active {
    width: 22px !important;
  }
}

/* Mobile Job Cards & Filter Panel */
@media (max-width: 640px) {
  .card-job-modern {
    padding: 1.125rem 1rem !important;
    border-radius: 1rem !important;
  }
  .search-toolbar-segmented, .card-executive {
    padding: 1rem !important;
    border-radius: 1rem !important;
  }
  #standard-dropzone, #photo-dropzone {
    min-height: 130px !important;
    padding: 1.25rem 0.875rem !important;
    border-radius: 1rem !important;
  }
}