/* =============================================
   HERO SECTION — luxury centered text block
   ============================================= */

.section-hero {
  position:   relative;
  height:     100svh;
  min-height: 600px;
  display:    flex;
  align-items: flex-end;
  overflow:   hidden;
}

/* Background image */
.hero__bg {
  position:         absolute;
  inset:            0;
  background-color: #111;
  overflow:         hidden;
}

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

/* Gradient overlay */
.hero__overlay {
  content:        "";
  position:       absolute;
  inset:          0;
  background:     linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.32) 38%, rgba(0,0,0,.08) 65%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index:        1;
}

/* Content block */
.hero__content {
  position:        relative;
  z-index:         2;
  max-width:       660px;
  width:           100%;
  margin-inline:   auto !important;
  margin-left:     auto !important;
  margin-right:    auto !important;
  text-align:      center !important;
  padding:         0 24px 40px !important;
  padding-inline:  24px !important;
  display:         flex;
  flex-direction:  column;
  align-items:     center !important;
  float:           none !important;
}

/* force all hero children to center regardless of RTL/container */
.hero__content > * {
  text-align: center !important;
  margin-left:  auto !important;
  margin-right: auto !important;
  width: 100%;
}

/* 1. MAIN HEADLINE */
.hero__headline {
  color:          #fff !important;
  font-size:      clamp(34px, 10vw, 64px) !important;
  line-height:    1.08 !important;
  font-weight:    700 !important;
  letter-spacing: -0.02em !important;
  text-align:     center !important;
  margin:         0 auto 18px !important;
  text-shadow:    0 4px 18px rgba(0,0,0,.50) !important;
}

/* 2. GOLD DIVIDER + ICON */
.hero__divider {
  display:       flex;
  align-items:   center;
  gap:           10px;
  width:         min(260px, 65%);
  margin:        0 auto 18px;
}

.hero__divider-line {
  flex:       1;
  height:     1px;
  background: rgba(212,176,106,.75);
}

.hero__divider-icon {
  color:       #d4b06a;
  flex-shrink: 0;
  filter:      drop-shadow(0 0 4px rgba(212,176,106,.55));
}

/* 3a. STRONGER SUBHEADLINE */
.hero__lead {
  color:          rgba(255,255,255,.98) !important;
  font-size:      clamp(18px, 2.4vw, 28px) !important;
  line-height:    1.35 !important;
  font-weight:    500 !important;
  text-align:     center !important;
  margin:         0 0 10px !important;
  text-shadow:    0 2px 12px rgba(0,0,0,.40) !important;
}

/* 3b. SMALLER DESCRIPTIVE LINE */
.hero__subtitle {
  color:          rgba(255,255,255,.90) !important;
  font-size:      clamp(14px, 1.4vw, 18px) !important;
  line-height:    1.55 !important;
  font-weight:    400 !important;
  text-align:     center !important;
  margin:         0 0 12px !important;
  text-shadow:    0 2px 12px rgba(0,0,0,.38) !important;
}

/* 4. DATE LINE — gold (same as button) */
.hero__date {
  color:          #d6b06a !important;
  font-size:      clamp(13px, 1.2vw, 17px) !important;
  font-weight:    600 !important;
  letter-spacing: .03em !important;
  text-align:     center !important;
  margin:         8px 0 22px !important;
  text-shadow:    0 2px 10px rgba(0,0,0,.30) !important;
}

/* 5. CTA BUTTON */
.hero__actions {
  display:         flex !important;
  justify-content: center !important;
  width:           100%;
  margin-top:      20px !important;
  margin-bottom:   14px !important;
}

.hero__cta-btn {
  display:         inline-flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             10px;
  background:      linear-gradient(180deg, #d6b06a 0%, #b98d43 100%) !important;
  color:           #fff !important;
  border:          none !important;
  border-radius:   999px !important;
  padding:         15px 34px !important;
  font-size:       16px !important;
  font-weight:     700 !important;
  letter-spacing:  .02em !important;
  box-shadow:      0 10px 24px rgba(0,0,0,.28) !important;
  text-decoration: none !important;
  min-width:       260px !important;
  text-align:      center !important;
  transition:      transform 0.18s ease, box-shadow 0.22s ease !important;
}
.hero__cta-btn:hover {
  transform:  translateY(-2px) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.34) !important;
  color:      #fff !important;
}

.hero__cta-icon {
  flex-shrink: 0;
  opacity:     0.88;
}

/* 6. TRUST LINE */
.hero__trust {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             8px;
  color:           rgba(255,255,255,.94) !important;
  font-size:       14px !important;
  font-weight:     600 !important;
  line-height:     1.5 !important;
  text-align:      center !important;
  text-shadow:     0 2px 10px rgba(0,0,0,.30) !important;
  margin-top:      10px !important;
}

.hero__trust-icon {
  flex-shrink: 0;
  color:       rgba(255,255,255,.75);
}

/* SR-ONLY */
.sr-only {
  position:    absolute;
  width: 1px;  height: 1px;
  padding: 0;  margin: -1px;
  overflow:    hidden;
  clip:        rect(0,0,0,0);
  white-space: nowrap;
  border:      0;
}

/* SCROLL CUE */
.hero__scroll-cue {
  position:  absolute;
  bottom:    22px;
  left:      50%;
  transform: translateX(-50%);
  z-index:   3;
  color:     rgba(255,255,255,.40);
  animation: scrollBounce 2s ease-in-out infinite 4s;
  transition: color 0.18s;
}
.hero__scroll-cue:hover { color: rgba(255,255,255,.85); }

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(8px); }
}

/* =============================================
   MOBILE ≤ 767px
   ============================================= */
@media (max-width: 767px) {

  .section-hero {
    min-height: 100svh;
  }

  .hero__overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.75)  0%,
      rgba(0, 0, 0, 0.50) 25%,
      rgba(0, 0, 0, 0.22) 52%,
      rgba(0, 0, 0, 0.05) 72%,
      transparent         100%
    );
  }

  .hero__content {
    padding: 0 20px 48px !important;
    padding-inline: 20px !important;
    max-width: 100% !important;
  }

  .hero__headline {
    font-size:     clamp(2rem, 9vw, 2.8rem) !important;
    line-height:   1.08 !important;
    margin-bottom: 16px !important;
  }

  .hero__divider {
    width: min(220px, 72%);
    margin-bottom: 16px !important;
  }

  .hero__lead {
    font-size:     clamp(0.95rem, 4vw, 1.15rem) !important;
    margin-bottom: 8px !important;
  }

  .hero__subtitle {
    font-size:     clamp(0.9rem, 4vw, 1.1rem) !important;
    margin-bottom: 12px !important;
  }

  .hero__date {
    font-size:     clamp(0.9rem, 4vw, 1.05rem) !important;
    margin-bottom: 24px !important;
  }

  .hero__cta-btn {
    width:      min(340px, 90%) !important;
    min-width:  unset !important;
    padding:    16px 28px !important;
    font-size:  1.05rem !important;
  }

  .hero__trust {
    font-size: 0.95rem !important;
  }
}