/* ============================================================
   Phyterra Design System - site-wide stylesheet
   "Forest Command" palette · Deep forest base + electric
   lime primary + cyan data accents. High-fidelity technical feel.
   ============================================================ */

:root {
  /* Neutral base - Forest Command surfaces */
  --p-surface: #0e2620; /* Deep forest near-black */
  --p-surface-dim: #0a1d18; /* Darker forest */
  --p-surface-bright: #143c30; /* Brighter forest */
  --p-surface-container-lowest: #081512;
  --p-surface-container-low: #0f2922;
  --p-surface-container: #142e28;
  --p-surface-container-high: #1a3a32;
  --p-surface-container-highest: #20453c;

  /* Text on dark surfaces */
  --p-on-surface: #e8f2ed; /* Light cream-white */
  --p-on-surface-variant: #c8d4ce; /* Muted forest grey */
  --p-outline: #8a9a91;
  --p-outline-variant: #4a5a52;
  --p-inverse-surface: #e8f2ed;
  --p-inverse-on-surface: #0d241f;

  /* Primary (Electric Lime Green) */
  --p-primary: #a8d700; /* Electric Lime Green - primary accent */
  --p-primary-container: #8bc700; /* Lime green container */
  --p-on-primary-container: #2e4600;
  --p-primary-fixed: #c4ff00; /* Bright lime */
  --p-primary-fixed-dim: #a8d700; /* Electric lime */

  /* Secondary (Forest Green) */
  --p-secondary: #a8d4b8; /* Soft sage green */
  --p-secondary-container: #2a6b55; /* Forest green container */
  --p-secondary-fixed: #c4e8d8; /* Pale forest */

  /* Tertiary (Cyan / Turquoise) */
  --p-tertiary: #4dd0e1; /* Bright cyan */
  --p-tertiary-container: #00897b; /* Teal */
  --p-tertiary-fixed: #80deea; /* Pale cyan */
}

html {
  scroll-behavior: smooth;
  background: var(--p-surface);
  overflow-x: hidden;
  max-width: 100%;
}

body {
  font-family: "Geist", "Inter", system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 8%, rgba(168, 215, 0, 0.14), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(42, 107, 85, 0.22), transparent 34rem),
    radial-gradient(circle at 50% 100%, rgba(77, 208, 225, 0.12), transparent 30rem),
    var(--p-surface);
  color: var(--p-on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100%;
  min-height: 100vh;
  position: relative;
}

/* Justify body paragraphs site-wide.
   Element selector (0,0,1) yields to any Tailwind text-* alignment
   class (0,1,0), so explicit text-center/right/left stay intact. */
p {
  text-align: justify;
  text-justify: inter-word;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(168, 215, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 215, 0, 0.045) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 82%);
}

body::after {
  content: "";
  position: fixed;
  inset: auto -8rem -12rem auto;
  z-index: -1;
  width: min(44vw, 34rem);
  aspect-ratio: 1;
  border-radius: 9999px;
  pointer-events: none;
  background: rgba(77, 208, 225, 0.12);
  filter: blur(96px);
}

/* ============================================================
   Dark-mode rescue rules
   Body files were authored against a light palette
   (bg-white cards, bg-on-surface for dark inverted blocks,
   text-on-surface for slate text). Now that the global surface
   is dark forest and on-surface is soft white, those
   utilities would render the wrong way around. These overrides
   flip them so every existing section reads cleanly.
   ============================================================ */

/* ---- bg-white → dark forest card ---- */
body .bg-white {
  background-color: #0f2922 !important;
  color: #e8f2ed;
  border-color: rgba(255, 255, 255, 0.08);
}
body .bg-white\/95,
body .bg-white\/92,
body .bg-white\/90,
body .bg-white\/85,
body .bg-white\/75,
body .bg-white\/70,
body .bg-white\/60 {
  background-color: rgba(14, 38, 32, 0.7) !important;
  color: #e8f2ed;
}

/* ---- bg-on-surface - was DARK in the light theme, used for inverted
       blocks (footer, CTAs, testimonials, GLOBAL HQ, etc.).
       Since on-surface is now cream-white, force these to deep forest. ---- */
body .bg-on-surface,
body .bg-on-surface\/95,
body .bg-on-surface\/90,
body .bg-on-surface\/80,
body footer.bg-on-surface {
  background-color: #040e1f !important;
  color: #d8e3fb !important;
}
body .text-on-surface,
body .text-slate-900,
body .text-slate-800 {
  color: #e8f2ed !important;
}

body .text-on-surface-variant,
body .text-slate-600,
body .text-slate-500,
body .text-slate-400 {
  color: #c8d4ce !important;
}

/* ---- Old hardcoded slate / green hexes that survived the migration ---- */
body [class*="bg-[#0a2540]"],
body [class*="bg-[#171c21]"],
body [class*="bg-[#2c3136]"],
body [class*="bg-[#466800]"] {
  background-color: #081512 !important;
}
body [class*="bg-[#466800]/10"],
body [class*="bg-[#466800]/15"],
body [class*="bg-[#466800]/20"] {
  background-color: rgba(168, 215, 0, 0.08) !important; /* electric lime tint */
}

/* ---- Glass cards with author-supplied accent tints - keep them as
       forest-tinted dark glass. ---- */
body .glass-card[class*="bg-[#"],
body .glass-card[class*="bg-primary"],
body .glass-card[class*="bg-secondary"] {
  background-color: rgba(20, 46, 40, 0.7) !important;
}

/* ---- Inputs / selects / textareas: dark surface, light text ---- */
body input[type="text"],
body input[type="email"],
body input[type="search"],
body input[type="number"],
body input[type="tel"],
body input[type="url"],
body select,
body textarea {
  background-color: #081512;
  color: #e8f2ed;
  border-color: rgba(255, 255, 255, 0.15);
}
body input::placeholder,
body textarea::placeholder {
  color: rgba(194, 202, 176, 0.6);
}

/* ---- Borders authored against the light palette ---- */
body .border-outline-variant\/40,
body .border-outline-variant\/30,
body .border-slate-200,
body .border-slate-100 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ---- Section dividers / subtle dividers ---- */
body .divide-outline-variant\/40 > * + *,
body .divide-outline-variant\/30 > * + * {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ---- Industry-card photo cards still need their inline image bg
       to override these rules. ---- */
body .industry-card,
body .industry-card * {
  /* no override here - inline styles handle it */
}

/* ----- Glassmorphism - DARK mode ----- */
.glass-card {
  background: rgba(14, 38, 32, 0.55); /* dark forest glass */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e8f2ed;
}

.glass-strong {
  background: rgba(4, 14, 31, 0.85);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #d8e3fb;
}

.glass-dark {
  background: rgba(5, 13, 11, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(168, 215, 0, 0.18);
  color: #e8f2ed;
}

/* ----- Shining accents - Electric Lime Green + Cyan ----- */
.shining-accent {
  box-shadow: 0 0 24px rgba(168, 215, 0, 0.45); /* electric lime halo */
}

.shining-accent-blue {
  box-shadow: 0 0 24px rgba(77, 208, 225, 0.45); /* cyan halo */
}

.glow-on-hover {
  transition:
    box-shadow 0.4s ease,
    transform 0.4s ease;
}
.glow-on-hover:hover {
  box-shadow: 0 18px 50px -12px rgba(168, 215, 0, 0.45);
  transform: translateY(-4px);
}

/* ----- Hero gradient text - Electric Lime → Cyan
        Matches the high-fidelity "forest command" aesthetic ----- */
.gradient-text {
  background: linear-gradient(120deg, #a8d700 0%, #4dd0e1 60%, #00897b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ----- Animated grid backdrop (AI / data feeling) - lime tint on dark ----- */
.bg-grid {
  background-image:
    linear-gradient(rgba(168, 215, 0, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 215, 0, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
}

.bg-grid-dark {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ----- Animated decorative blobs ----- */
.deco-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(96px);
  opacity: 0.55;
  pointer-events: none;
  animation: blobFloat 18s ease-in-out infinite alternate;
}

@keyframes blobFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -30px) scale(1.06);
  }
  100% {
    transform: translate(-25px, 20px) scale(0.95);
  }
}

/* ----- Marquee for stat ticker ----- */
.marquee {
  display: flex;
  gap: 3rem;
  animation: marquee 28s linear infinite;
  width: max-content;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ----- Material Symbols default weight ----- */
.material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}
.material-symbols-outlined.filled {
  font-variation-settings:
    "FILL" 1,
    "wght" 500,
    "GRAD" 0,
    "opsz" 24;
}

/* ----- Reveal-on-scroll ----- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s ease,
    transform 0.9s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Mega-dropdown ----- */
.mega-trigger {
  position: relative;
}
.mega-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0s linear 0.25s;
  z-index: 60;

  /* Solid non-transparent surface for dropdowns */
  background: #1b2a40;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}
.mega-trigger:hover .mega-panel,
.mega-trigger:focus-within .mega-panel,
.mega-panel:hover {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0s linear 0s;
}

.dropdown-trigger {
  position: relative;
}
.dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0.2s;
  z-index: 60;

  /* Solid non-transparent surface for dropdowns */
  background: #1b2a40;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
}
.dropdown-trigger:hover .dropdown-panel,
.dropdown-trigger:focus-within .dropdown-panel,
.dropdown-panel:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0s linear 0s;
}

/* ----- Dropdown menu items — hover feedback ----- */
.dropdown-item {
  position: relative;
  padding: 8px 14px 8px 18px;
  border-radius: 8px;
  color: #d8e3fb;
  font-weight: 500;
  border-left: 2px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease,
    padding-left 0.18s ease;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
  background: #1b2a40; /* solid surface, no glass/transparency */
  color: #b7f64a;
  border-left-color: #9cd92d;
  padding-left: 22px;
  outline: none;
}

.dropdown-item::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #9cd92d, #7cd0ff);
  opacity: 0;
  transform: translate(-4px, -50%) scale(0.6);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.dropdown-item:hover::before,
.dropdown-item:focus-visible::before {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

/* ----- Mobile drawer items — same highlight + slide + accent bar ----- */
.drawer-item,
.drawer-subitem {
  position: relative;
  border-radius: 8px;
  border-left: 2px solid transparent;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    padding-left 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.drawer-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  padding: 8px 14px 8px 18px;
  color: #d8e3fb;
}
.drawer-subitem {
  display: block !important;
  width: 100% !important;
  padding: 8px 14px 8px 18px !important;
  font-size: 14px !important;
  color: #c2cab0 !important;
  line-height: 1.5 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  text-decoration: none !important;
  margin: 0 !important;
}

/* ----- Drawer submenu container - ensure proper list stacking ----- */
[data-mobile-drawer] .ml-md {
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  margin-left: 12px !important;
}

.drawer-item::before,
.drawer-subitem::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #9cd92d, #7cd0ff);
  opacity: 0;
  transform: translate(-4px, -50%) scale(0.6);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.drawer-item:hover,
.drawer-item:focus-visible,
.drawer-item:active,
.drawer-subitem:hover,
.drawer-subitem:focus-visible,
.drawer-subitem:active {
  background: linear-gradient(
    90deg,
    rgba(156, 217, 45, 0.14),
    rgba(124, 208, 255, 0.06)
  );
  color: #b7f64a;
  border-left-color: #9cd92d;
  padding-left: 22px;
  outline: none;
}
.drawer-item:hover::before,
.drawer-item:focus-visible::before,
.drawer-item:active::before,
.drawer-subitem:hover::before,
.drawer-subitem:focus-visible::before,
.drawer-subitem:active::before {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

/* ----- Mega-menu (multi-column dropdown) positioning ----- */
.dropdown-panel--center {
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(8px);
}
.dropdown-trigger:hover .dropdown-panel--center,
.dropdown-trigger:focus-within .dropdown-panel--center,
.dropdown-panel--center:hover {
  transform: translateX(-50%) translateY(0);
}

/* ----- Mega-menu category sub-title ----- */
.mega-title {
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mega-title.tone-green {
  color: #9cd92d;
}
.mega-title.tone-blue {
  color: #bec6e0;
}
.mega-title.tone-cyan {
  color: #7cd0ff;
}

/* ----- Mega-menu CTA panel ----- */
.mega-cta {
  background: linear-gradient(
    160deg,
    rgba(130, 188, 0, 0.18),
    rgba(45, 183, 242, 0.1)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
}

/* ----- Custom scrollbar - Electric Green gradient ----- */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--p-surface-dim);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a8d700, #8bc700);
  border-radius: 8px;
}

/* ----- Selection ----- */
::selection {
  background: #a8d700; /* Electric Green */
  color: #1b2c00; /* on-primary dark */
}

/* ----- Buttons ----- */
/* Primary CTA - electric green gradient. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(135deg, #b7f64a 0%, #a8d700 50%, #8bc700 100%);
  color: #1b2c00;
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 24px -8px rgba(168, 215, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}
.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.06);
  box-shadow:
    0 14px 32px -8px rgba(168, 215, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:active {
  transform: scale(0.97);
}

/* Secondary CTA - outlined-white pill on dark surfaces. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #e8f2ed;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    background 0.2s ease,
    transform 0.25s ease,
    border-color 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}
.btn-ghost:hover {
  background: rgba(168, 215, 0, 0.12);
  border-color: rgba(168, 215, 0, 0.6);
  transform: translateY(-1px);
}

/* ----- Tag pill ----- */
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ----- Mobile nav drawer ----- */
.mobile-drawer {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-drawer.is-open {
  transform: translateX(0);
}

/* ----- Helper utilities ----- */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ----- Pulse dot - Electric Green ----- */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #a8d700;
  box-shadow: 0 0 0 0 rgba(168, 215, 0, 0.65);
  animation: pulseDot 1.6s infinite;
}
@keyframes pulseDot {
  0% {
    box-shadow: 0 0 0 0 rgba(168, 215, 0, 0.6);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(168, 215, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(168, 215, 0, 0);
  }
}

/* ----- Flowing line accent (engineering schematics) - Electric Green underline ----- */
.flow-line {
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    #a8d700 20%,
    #b7f64a 50%,
    #a8d700 80%,
    transparent
  );
  border-radius: 2px;
}

/* ----- Card hover lift ----- */
.lift {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.lift:hover {
  transform: translateY(-6px);
  box-shadow:
    0 22px 48px -18px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(168, 215, 0, 0.25);
}

/* ============================================================
   Industry bento cards - bulletproof rendering
   Backgrounds + text colors are also set via inline `style` in
   industries.html so we never depend on Tailwind JIT or CSS
   cascade timing. These rules add the polish (overlays, layout).
   ============================================================ */
.industry-card {
  display: block !important;
  position: relative;
  overflow: hidden;
  color: #ffffff !important;
  isolation: isolate;
  min-height: 420px;
}

/* Force every text descendant to inherit white - defeats body's
   text-on-background color and Tailwind's preflight resets. */
.industry-card,
.industry-card h1,
.industry-card h2,
.industry-card h3,
.industry-card h4,
.industry-card h5,
.industry-card p,
.industry-card span,
.industry-card li,
.industry-card strong {
  color: #ffffff;
}

.industry-card .industry-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.industry-card .industry-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px;
  min-height: 420px;
  height: 100%;
}
.industry-card .industry-content--row {
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 32px;
}
@media (min-width: 768px) {
  .industry-card .industry-content--row {
    flex-direction: row;
    align-items: center;
  }
}

.industry-overlay-left {
  background: linear-gradient(
    90deg,
    rgba(8, 21, 18, 0.92) 0%,
    rgba(8, 21, 18, 0.55) 45%,
    rgba(8, 21, 18, 0.18) 100%
  );
}
.industry-overlay-bot {
  background: linear-gradient(
    180deg,
    rgba(8, 21, 18, 0.05) 0%,
    rgba(8, 21, 18, 0.65) 50%,
    rgba(8, 21, 18, 0.96) 100%
  );
}
.industry-overlay-photo {
  background: linear-gradient(
    180deg,
    rgba(8, 21, 18, 0.25) 0%,
    rgba(8, 21, 18, 0.65) 55%,
    rgba(8, 21, 18, 0.95) 100%
  );
}

/* Photo-backed industry card */
.industry-photo {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* ----- Industry horizontal scroll rail ----- */
.industry-rail {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #a8d700 #0a1d18;
  padding: 8px 32px 32px 32px;
  margin: 0 -32px;
  -webkit-overflow-scrolling: touch;
}
.industry-rail::-webkit-scrollbar {
  height: 8px;
}
.industry-rail::-webkit-scrollbar-track {
  background: #0a1d18;
  border-radius: 999px;
}
.industry-rail::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #a8d700, #8bc700);
  border-radius: 999px;
}

.industry-rail .industry-card {
  flex: 0 0 auto;
  width: 380px;
  scroll-snap-align: start;
  min-height: 460px;
}

@media (min-width: 768px) {
  .industry-rail .industry-card {
    width: 420px;
    min-height: 500px;
  }
}
@media (min-width: 1280px) {
  .industry-rail .industry-card {
    width: 460px;
    min-height: 540px;
  }
}

/* When inside the rail, force every card's content back to a column layout
   even if it had the row modifier elsewhere. */
.industry-rail .industry-card .industry-content,
.industry-rail .industry-card .industry-content--row {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0;
  padding: 32px;
  min-height: inherit;
}

/* Scroll-rail navigation buttons - outlined on dark navy */
.rail-nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #e8f2ed;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rail-nav-btn:hover {
  background: #a8d700;
  border-color: #a8d700;
  color: #1b2c00;
  transform: translateY(-2px);
}
.rail-nav-btn:active {
  transform: scale(0.96);
}
.rail-nav-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   Back-to-Top button
   Fixed bottom-right, fades in once scrolled past ~400px.
   Uses opacity + pointer-events for reliable show/hide.
   ============================================================ */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  margin: 0;
  padding: 0;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #b7f64a 0%, #a8d700 55%, #8bc700 100%);
  color: #1b2c00;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 12px 32px -10px rgba(8, 20, 37, 0.7),
    0 0 0 1px rgba(168, 215, 0, 0.35);
  cursor: pointer;
  z-index: 45;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;

  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.85);
  transition:
    opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s ease;
}

.back-to-top .material-symbols-outlined {
  font-variation-settings:
    "FILL" 0,
    "wght" 600,
    "GRAD" 0,
    "opsz" 24;
  font-size: 24px;
  color: #1b2c00;
  transition: transform 0.25s ease;
  pointer-events: none;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow:
    0 18px 40px -12px rgba(35, 54, 0, 0.7),
    0 0 0 1px rgba(168, 215, 0, 0.45),
    0 0 24px rgba(168, 215, 0, 0.4);
}
.back-to-top:hover .material-symbols-outlined {
  transform: translateY(-2px);
}
.back-to-top:active {
  transform: translateY(-1px) scale(0.96);
}
.back-to-top:focus-visible {
  outline: 2px solid #b7f64a;
  outline-offset: 3px;
}

/* Hide the button while the mobile drawer is open. */
[data-mobile-drawer].is-open ~ .back-to-top {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Subtle engineering grid sheen */
.industry-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* ============================================================
   NAVBAR TYPOGRAPHY IMPROVEMENTS
   Enhanced font size and weight for better readability and
   premium professional visual hierarchy across all breakpoints
   ============================================================ */

/* Desktop navbar items - 18-20px for professional scale */
@media (min-width: 1280px) {
  nav ul {
    font-size: 18px !important;
    font-weight: 600 !important;
  }

  .dropdown-item {
    font-size: 15px !important;
    font-weight: 500 !important;
  }
}

/* Mobile drawer items - responsive scaling */
@media (max-width: 767px) {
  .drawer-item {
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  .drawer-subitem {
    font-size: 14px !important;
    font-weight: 500 !important;
  }
}

/* Featured services cards - keep the icon row readable on narrower viewports */
@media (max-width: 1279px) {
  #featured-services .glass-card > div.mt-auto {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px 12px;
  }

  #featured-services .glass-card > div.mt-auto > div {
    flex: 1 1 calc(50% - 12px);
    min-width: 120px;
  }
}

@media (max-width: 767px) {
  #featured-services .glass-card {
    padding: 18px !important;
  }

  #featured-services .glass-card > div.mt-auto {
    gap: 14px 10px;
  }

  #featured-services .glass-card > div.mt-auto > div {
    flex: 1 1 calc(33.333% - 10px);
    min-width: 0;
  }

  #featured-services .glass-card > div.mt-auto .w-14 {
    width: 44px;
    height: 44px;
  }

  #featured-services .glass-card > div.mt-auto p {
    font-size: 10px;
  }
}

/* ============================================================
   MARQUEE OVERFLOW FIX
   Ensure marquee doesn't cause horizontal scrollbar
   ============================================================ */

section.w-full {
  overflow-x: hidden;
}

.marquee {
  overflow-x: hidden;
}