/* Homepage custom styles (extracted from inline blocks) */

/* ── Global: prevent horizontal bleed on mobile ── */
html,
body {
  overflow-x: clip;
  max-width: 100vw;
  background-color: #020617;
}

[data-home-variant='gov'] {
  overflow-x: clip;
  max-width: 100vw;
}

/* ── Mobile layout (< 640px) ── */
@media (max-width: 1023px) {
  .fh {
    overflow: hidden;
  }
}

@media (max-width: 639px) {
  /* Hide desktop-only background layers */
  .home-grid-canvas,
  .env-palm-left-1,
  .env-palm-left-2,
  .env-palm-right-1,
  .env-palm-right-2,
  .env-helicopter,
  .env-mountains {
    display: none !important;
  }

  /* Fully clip off-canvas mobile nav drawers (fixes left-edge bleed) */
  .gov-mobile-drawer {
    width: 100vw;
    max-width: 100vw;
  }

  .gov-mobile-drawer.-translate-x-full,
  .gov-mobile-drawer.opacity-0 {
    transform: translateX(-100vw) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .gov-mobile-drawer.translate-x-0 {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Tighter floating header */
  .fh {
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
  }

  /* Hero: dedicated mobile layout */
  .home-hero {
    padding-top: 5.5rem;
  }

  .home-hero-content {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    width: 100%;
    max-width: 100%;
  }

  .home-hero h1 {
    font-size: clamp(1.75rem, 8.5vw, 2.5rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
    padding: 0 0.25rem;
  }

  .home-hero-sub {
    font-size: 1rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1.5rem !important;
    padding: 0 0.5rem;
  }

  .home-hero-ctas {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.625rem !important;
    width: 100%;
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.5rem;
  }

  .home-hero-ctas > a {
    width: 100% !important;
    justify-content: center;
  }

  /* Immersive scroll: reduce side padding on beats */
  #immersive-scroll [data-beat] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  #immersive-scroll [data-beat='0'] {
    padding-left: 1rem !important;
  }

  #immersive-scroll [data-beat] .relative.z-10 {
    max-width: 92% !important;
  }

  #immersive-scroll [data-silhouette] {
    opacity: 0 !important;
  }

  /* Book demo: single column */
  #book-demo .grid {
    gap: 2rem !important;
  }

  #book-demo .calendly-inline-widget {
    min-height: 520px !important;
    height: 540px !important;
  }

  /* Footer partners: tighter stack */
  footer .flex.flex-col.sm\:flex-row {
    gap: 1.5rem !important;
  }
}

/* Floating header */
.fh {
  position: fixed;
  top: 1.5rem;
  left: 1rem;
  right: 1rem;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0.75rem;
  z-index: 10000;
  overflow: visible;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

@media (min-width: 640px) {
  .fh {
    left: 1.5rem;
    right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .fh {
    left: 2rem;
    right: 2rem;
  }
}

.fh.hero {
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.6),
    0 16px 40px -18px rgba(0, 0, 0, 0.9);
}

.fh.content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(229, 231, 235, 0.3);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.nav-underline::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
}

.nav-underline.hero-active::after {
  background: white;
}

.nav-underline.light-active::after {
  background: #2563eb;
}

/* Hero animations */
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes scrollBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(4px);
    opacity: 0.45;
  }
}

.home-scroll-chevron {
  width: 1.35rem;
  height: 1.35rem;
  color: rgb(148 163 184);
  animation: scrollBounce 1.5s ease-in-out infinite;
}

@media (min-width: 640px) {
  .home-scroll-chevron {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* Footer */
.font-merriweather {
  font-family: 'Merriweather', serif;
}

/* Environment decor (scroll parallax silhouettes) */
.env-palm-left-1 {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  mix-blend-mode: screen;
  transition: visibility 0s 300ms, opacity 200ms ease 0ms,
    transform 700ms cubic-bezier(0.55, 0, 0.8, 1) 60ms;
  visibility: hidden;
  bottom: 0;
  left: -22vw;
  width: 55vw;
  height: auto;
  opacity: 0;
  transform: translateX(-75vw) rotate(-30deg);
  transform-origin: 30% 100%;
}

.env-palm-left-2 {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  mix-blend-mode: screen;
  transition: visibility 0s 380ms, opacity 200ms ease 80ms,
    transform 700ms cubic-bezier(0.55, 0, 0.8, 1) 140ms;
  visibility: hidden;
  bottom: -2vh;
  left: -30vw;
  width: 40vw;
  height: auto;
  opacity: 0;
  transform: translateX(-65vw) rotate(-24deg);
  transform-origin: 25% 100%;
}

.env-palm-right-1 {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  mix-blend-mode: screen;
  transition: visibility 0s 300ms, opacity 200ms ease 0ms,
    transform 700ms cubic-bezier(0.55, 0, 0.8, 1) 60ms;
  visibility: hidden;
  bottom: 0;
  right: -22vw;
  width: 55vw;
  height: auto;
  opacity: 0;
  transform: translateX(75vw) rotate(30deg);
  transform-origin: 70% 100%;
}

.env-palm-right-2 {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  mix-blend-mode: screen;
  transition: visibility 0s 380ms, opacity 200ms ease 80ms,
    transform 700ms cubic-bezier(0.55, 0, 0.8, 1) 140ms;
  visibility: hidden;
  bottom: -2vh;
  right: -30vw;
  width: 40vw;
  height: auto;
  opacity: 0;
  transform: translateX(65vw) rotate(24deg);
  transform-origin: 75% 100%;
}

.env-helicopter {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  mix-blend-mode: screen;
  top: 10vh;
  right: 6vw;
  width: 22vw;
  height: 32vh;
  opacity: 0;
  transform: translateX(130%);
  transition: none;
}

.env-mountains {
  position: fixed;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  max-height: 20vh;
  display: block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.env-silhouette-img {
  display: block;
  filter: contrast(1.8);
  width: 100%;
  height: auto;
}

.env-helicopter-img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: right top;
  filter: contrast(1.8);
}

#immersive-scroll [data-silhouette] img {
  display: block;
}

/* Immersive scroll beats — lock content to mid viewport while pinned */
.immersive-beat,
#immersive-scroll [data-beat] {
  align-items: center !important;
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

.immersive-beat .relative.z-10,
#immersive-scroll [data-beat] .relative.z-10 {
  margin-bottom: 0;
}

.immersive-beat > .absolute.pointer-events-none.select-none[data-silhouette],
.immersive-beat > .absolute.pointer-events-none.select-none.immersive-silhouette,
#immersive-scroll [data-silhouette] {
  height: 30vh !important;
  max-height: 30vh !important;
  top: calc(50% - 15vh) !important;
  bottom: auto !important;
}

/* Immersive soldier silhouettes (React + static HTML) */
.immersive-silhouette {
  height: 30vh !important;
  max-height: 30vh !important;
  top: calc(50% - 15vh) !important;
  bottom: auto !important;
}

.immersive-silhouette--beat0 {
  right: 8% !important;
}

.immersive-silhouette--beat1 {
  height: 28vh !important;
  max-height: 28vh !important;
  top: calc(50% - 14vh) !important;
  left: 0 !important;
}

.immersive-silhouette img {
  height: 100% !important;
  width: auto !important;
  max-height: 100% !important;
  object-fit: contain;
}

#immersive-parachute {
  top: 50% !important;
  bottom: auto !important;
  right: -1vw !important;
  height: 48vh !important;
  max-height: 48vh !important;
  transform: translateY(-50%) !important;
  transition: opacity 320ms ease 60ms, transform 420ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 40ms;
}

#immersive-parachute img {
  height: 100% !important;
  width: auto !important;
  max-height: 100% !important;
  object-fit: contain;
}