.spacer-band {
  height: clamp(48px, 6vw, 120px);
  padding: 0 !important;
  margin: 0 !important;
}

.footer-shadow-top {
  box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}

/* Body/content links only (inside <main>): no underline, use Theme tab link vars */

main a, main a:visited {
  text-decoration: var(--bs-link-decoration, none) !important;
  color: var(--bs-link-color, var(--bs-primary, inherit)) !important;
}

main a:hover, main a:focus {
  text-decoration: var(--bs-link-hover-decoration, none) !important;
  color: var(--bs-link-hover-color, var(--bs-primary, inherit)) !important;
}

/* 1. Hero match — subtle purple-gray tint */

/* Hero match — subtle horizontal gradient (left→right) */

.bg-hero-gradient {
  background: linear-gradient( 90deg, rgba(220, 217, 247, 0.25) 0%, rgba(249, 248, 255, 0.25) 100% );
}

/* Neutral band — soft right→left gradient */

.bg-neutral-gradient {
  background: linear-gradient( 180deg, rgba(245, 246, 248, 0.35) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(245, 246, 248, 0.35) 100% );
}

/* Updates band: vertical "center glow", perfectly symmetric on white */

.bg-neutral-centerglow {
  background: linear-gradient( 180deg, #f5f6f8 0%, #ffffff 50%, #f5f6f8 100% );
}

html, body {
  height: 100%;
}

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

/* Make icon links feel like btn-primary without the pill */

.icon-cta {
  color: var(--bs-primary);
  transition: color .15s ease-in-out, transform .15s ease-in-out;
}

.icon-cta:hover {
  color: var(--bs-primary-hover, #0b5ed7);
  transform: translateY(-1px) scale(1.03);
}

.icon-cta:hover, .icon-cta:focus {
  color: var(--bs-primary-hover, #0b5ed7);
}

.icon-cta:active {
  transform: scale(.96);
}

/* Logo scales down on small screens, but never exceeds 64×64 */

.brand-logo {
  height: auto;
  width: auto;
  max-width: 64px;
  max-height: 64px;
}

/* Let it shrink smoothly on very small viewports */

@media (max-width: 576px) {
  .brand-logo {
    width: clamp(48px, 10vw, 64px);
  }
}

/* Brand text scales down a bit on XS but stays normal elsewhere */

.navbar .navbar-brand {
  font-size: clamp(1.05rem, 4.5vw, 1.15rem);
}

.fs-7 {
  font-size: 0.8rem !important;
  line-height: 1.2;
}

/* Ensure same font family & weight as body/link text (footer) */

.font-body-weight-heavy {
  font-family: var(--bs-body-font-family, inherit) !important;
  font-weight: 800 !important;
  font-variation-settings: "wght" 800;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  --bs-text-opacity: .45;
  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
}

/* Make the hero Pulse faster */

.pulse.animated {
  -webkit-animation-duration: 0.6s !important;
  animation-duration: 0.6s !important;
}

/* optional: even snappier on phones */

@media (max-width: 575.98px) {
  .pulse.animated {
    -webkit-animation-duration: 0.5s !important;
    animation-duration: 0.5s !important;
  }
}

/* Extra-small button for the sound toggle */

.btn-xs {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
}

/* Make video + poster behave like background-size: cover in the square box */

video.fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Ensure video wrapper positions overlays correctly */

.video-wrapper {
  position: relative;
  overflow: hidden;
}

@media (max-width: 767.98px) {
  #wb-sound-toggle {
    display: none !important;
  }
}

/* Video preview placeholder image (mobile) */

.video-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  cursor: pointer;
  z-index: 1;
}