/* ========================================
   HERO BANNER COMPONENT
   ======================================== */

.hero-section {
  position: relative;
  width: 100%;
  min-height: 15.625rem;
  overflow: visible;
  background: var(--bs-body-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Hero Background Image */
.hero-bg-image {
  position: relative;
  width: 100%;
  height: auto;
}

.hero-bg-image .hero-desktop-banner {
  width: 100%;
  height: auto;
  min-height: 24.375rem;
  object-fit: cover;
  object-position: center center;
  display: none;
}

.hero-bg-image .hero-mobile-banner {
  width: 100%;
  height: auto;
  min-height: 24.375rem;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Hero Video Background */
.hero-video-container {
  inset: 0;
  z-index: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.hero-video-container .video-wrapper {
  width: 100%;
  height: 0;
  padding-block-end: 56.25%;
  position: relative;
}

.hero-video-container .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: var(--bs-black);
}

/* Bottom → top gradient */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    360deg,
    var(--bs-primary-800) 0.98%,
    rgba(var(--bs-primary-800-rgb), 0) 125.62%
  );
}

/* Hero Content Container */
.hero-content {
  position: relative;
  z-index: 2;
  width: calc(100% + 1.5rem);
  text-align: center;
  padding: 0;
  margin: 0 -0.75rem;
}

/* ========================================
   HERO PANEL (non-overlay / inner pages)
   ======================================== */

.hero-panel {
  background: rgba(var(--bs-primary-800-rgb), 0.9);
  border-radius: var(--radius-2xl);
  padding: var(--space-20) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  color: var(--bs-success-100);
  box-shadow: none;
}

.hero-panel .hero-company-image {
  display: flex;
  justify-content: center;
}

.hero-panel .hero-company-logo {
  max-height: 3.5rem;
  width: auto;
  object-fit: contain;
}

.hero-content-single-mobile-service .hero-panel {
  box-shadow: none;
}

.hero-panel h1 br,
.hero-panel h2 br,
.hero-panel h3 br {
  content: "";
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
}

.hero-desc {
  line-height: var(--line-height-tight);
  font-size: var(--font-size-18);
}

.hero-desc ul,
.hero-desc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hero-desc li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

.hero-desc li::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='11' stroke='%23DBFFF6' stroke-width='2'/%3E%3Cpath d='M7.5 12L10.5 15L16.5 9' stroke='%23DBFFF6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.hero-btn-section {
  margin-top: var(--space-2);
  display: flex;
  justify-content: center;
}

/* ========================================
   OVERLAY HERO (landing)
   Full-bleed media + bottom-left copy, no card
   ======================================== */

.hero-section-overlay {
  min-height: 28rem;
  height: auto;
  overflow: hidden;
  justify-content: flex-end;
  align-items: stretch;
  background: var(--bs-primary-800);
}

.hero-section-overlay .hero-bg-image,
.hero-section-overlay .hero-video-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.hero-section-overlay .hero-bg-image .hero-desktop-banner,
.hero-section-overlay .hero-bg-image .hero-mobile-banner {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
}

.hero-section-overlay .hero-video-container .video-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.hero-section-overlay .hero-video-container .video-wrapper iframe {
  top: 50%;
  left: 50%;
  width: max(100%, 177.78vh);
  height: max(100%, 56.25vw);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.hero-section-overlay > .container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: clamp(var(--space-11), 4vw, var(--space-16));
  margin: 0 auto;
}

.hero-section-overlay .hero-content {
  width: 100%;
  max-width: 43.5625rem;
  margin: 0;
  padding: 0;
  text-align: left;
}

.hero-section-overlay .hero-panel {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  gap: var(--space-12);
  color: var(--bs-white);
  align-items: flex-start;
}

.hero-section-overlay .hero-panel .hero-company-image {
  justify-content: flex-start;
}

.hero-section-overlay .hero-title {
  color: var(--bs-white);
  font-weight: var(--font-weight-normal);
  line-height: 1.2;
  font-size: var(--font-size-5xl);
}

.hero-section-overlay .hero-title strong,
.hero-section-overlay .hero-title b {
  color: var(--bs-success);
  font-weight: var(--font-weight-bold);
}

.hero-section-overlay .hero-panel h1 br,
.hero-section-overlay .hero-panel h2 br,
.hero-section-overlay .hero-panel h3 br {
  content: normal;
  display: inline;
  height: auto;
}

.hero-section-overlay .hero-desc {
  color: var(--bs-white);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-tight);
  font-weight: var(--font-weight-normal);
  max-width: 43.5625rem;
}

.hero-section-overlay .hero-desc p {
  margin: 0;
  color: inherit;
}

.hero-section-overlay .hero-desc li::before {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='11' stroke='%23FFFFFF' stroke-width='2'/%3E%3Cpath d='M7.5 12L10.5 15L16.5 9' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.hero-section-overlay .hero-btn-section {
  margin-top: 0;
  justify-content: flex-start;
}

.hero-section-overlay .hero-btn-section .btn-hero {
  height: var(--space-17);
  padding: var(--space-1) var(--space-7);
  border-radius: var(--radius-2xl);
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (min-width: 576px) {
  .hero-section:not(.hero-section-overlay) {
    min-height: 26.25rem;
  }

  .hero-section:not(.hero-section-overlay) .hero-panel {
    padding: var(--space-11);
    gap: var(--space-11);
  }

  .hero-section:not(.hero-section-overlay) .hero-desc {
    font-size: var(--font-size-18);
  }
}

@media (min-width: 768px) {
  .hero-section:not(.hero-section-overlay) {
    min-height: 31.25rem;
  }

  .hero-section:not(.hero-section-overlay) .hero-content {
    padding: 0 var(--space-7);
  }

  .hero-section:not(.hero-section-overlay) .hero-desc {
    font-size: var(--font-size-20);
  }

  .hero-panel {
    box-shadow: var(--shadow-lg);
  }

  .hero-content-single-mobile-service .hero-panel {
    box-shadow: none;
  }

  .hero-section-overlay {
    min-height: 36rem;
  }

  .hero-section-overlay > .container {
    padding-bottom: var(--space-16);
  }
}

@media (min-width: 992px) {
  .hero-bg-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }

  .hero-bg-image .hero-desktop-banner {
    display: block;
    height: 100%;
    min-height: auto;
  }

  .hero-bg-image .hero-mobile-banner {
    display: none;
  }

  .hero-section:not(.hero-section-overlay) {
    min-height: 37.5rem;
    overflow: hidden;
  }

  .hero-section:not(.hero-section-overlay) .hero-panel .hero-company-image {
    justify-content: flex-start;
  }

  .hero-section:not(.hero-section-overlay) .hero-content {
    margin-top: var(--space-8);
    margin-bottom: var(--space-8);
    width: 100%;
    text-align: left;
    padding: 0 var(--space-11);
  }

  .hero-section:not(.hero-section-overlay) .hero-panel {
    padding: var(--space-11);
    gap: var(--space-11);
    background: rgba(var(--bs-primary-800-rgb), 0.8);
  }

  .hero-section:not(.hero-section-overlay) .hero-desc {
    font-size: 1.375rem;
    line-height: 1.3;
  }

  .hero-section:not(.hero-section-overlay) .hero-btn-section {
    justify-content: flex-start;
  }

  /* Fill the first screen on every resolution. Fixed heights derived from
     viewport width overshot short laptop screens (copy cropped) and fell short
     of tall ones (next section peeking above the fold). */
  .hero-section-overlay {
    min-height: max(36rem, calc(100vh - var(--site-header-height, 5rem)));
    min-height: max(36rem, calc(100svh - var(--site-header-height, 5rem)));
  }

  .hero-section-overlay > .container {
    padding-bottom: var(--space-20);
  }
}

@media (min-width: 1200px) {
  .hero-section:not(.hero-section-overlay) {
    min-height: 42.5rem;
  }

  .hero-section:not(.hero-section-overlay) .hero-content {
    width: 38.75rem;
    margin-top: var(--space-9);
    margin-bottom: var(--space-9);
    padding: 0;
  }
}

@media (min-width: 1400px) {
  .hero-section:not(.hero-section-overlay) {
    min-height: 45.5rem;
  }

  .hero-section-overlay > .container {
    padding-bottom: var(--space-22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-section,
  .hero-content {
    transition: none;
  }
}