/* SAMA V53 — single authoritative layout for the HOME hero.
   Legacy V48-V52 overlays are no longer loaded on the home route. */
#sfHero {
  position: relative !important;
  isolation: isolate !important;
  height: clamp(700px, 94svh, 980px) !important;
  min-height: 700px !important;
  overflow: hidden !important;
}

/* Headline / offer / action: one vertical group confined between
   the fixed header above and the slider tools below. */
html[dir="rtl"] #sfHero .sf-copy,
html[dir="ltr"] #sfHero .sf-copy {
  box-sizing: border-box !important;
  position: absolute !important;
  z-index: 6 !important;
  top: clamp(180px, 20svh, 220px) !important;
  bottom: clamp(160px, 19svh, 205px) !important;
  height: auto !important;
  min-height: 0 !important;
  width: min(610px, 41vw) !important;
  max-width: calc(50% - 34px) !important;
  padding: 0 !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
html[dir="rtl"] #sfHero .sf-copy {
  right: clamp(55px, 7vw, 140px) !important;
  left: auto !important;
  direction: rtl !important;
  text-align: right !important;
}
html[dir="ltr"] #sfHero .sf-copy {
  left: clamp(55px, 7vw, 140px) !important;
  right: auto !important;
  direction: ltr !important;
  text-align: left !important;
}
#sfHero .sf-eyebrow {
  display: block !important;
  width: 100% !important;
  margin: 0 0 13px !important;
  font-size: clamp(10px, .9vw, 13px) !important;
  line-height: 1.5 !important;
  letter-spacing: .13em !important;
  white-space: normal !important;
  text-align: inherit !important;
  opacity: .95 !important;
}
#sfHero .sf-title {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: var(--sf-v53-title-height, 2.24em) !important;
  height: auto !important;
  font-size: clamp(43px, 4.1vw, 68px) !important;
  line-height: 1.16 !important;
  font-weight: 750 !important;
  text-wrap: balance !important;
  white-space: pre-line !important;
  overflow-wrap: normal !important;
}
html[lang="en"] #sfHero .sf-title {
  font-size: clamp(42px, 4vw, 65px) !important;
  line-height: 1.12 !important;
}
#sfHero .sf-description {
  display: block !important;
  width: 100% !important;
  max-width: min(500px, 100%) !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 13px 0 17px !important;
  font-size: clamp(15px, 1.12vw, 19px) !important;
  line-height: 1.62 !important;
  font-weight: 500 !important;
}
#sfHero .sf-cta {
  position: relative !important;
  align-self: flex-start !important;
  margin: 0 !important;
  padding: 12px 22px !important;
  min-height: 49px !important;
  font-size: 14px !important;
  gap: 13px !important;
  border-radius: 13px !important;
  color: #fff !important;
  background: rgba(6, 39, 59, .94) !important;
  box-shadow: 0 12px 30px rgba(4, 21, 39, .22) !important;
}

/* Counter, destination and progress: one small group at the LEFT,
   always outside the main copy. */
html[dir="rtl"] #sfHero .sf-bottom-info,
html[dir="ltr"] #sfHero .sf-bottom-info {
  box-sizing: border-box !important;
  position: absolute !important;
  z-index: 6 !important;
  inset: auto auto 100px clamp(45px, 5vw, 84px) !important;
  width: 190px !important;
  max-width: 190px !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  direction: ltr !important;
  text-align: left !important;
}
html[dir="rtl"] #sfHero .sf-bottom-info .sf-meta-stack,
html[dir="ltr"] #sfHero .sf-bottom-info .sf-meta-stack {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 5px !important;
  direction: ltr !important;
  text-align: left !important;
}
html[dir="rtl"] #sfHero .sf-count,
html[dir="ltr"] #sfHero .sf-count {
  position: static !important;
  order: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  justify-content: flex-start !important;
  display: flex !important;
  margin: 0 0 2px !important;
  gap: 8px !important;
  color: #fff !important;
  font: 700 11px/1.3 'Plus Jakarta Sans', Arial, sans-serif !important;
  direction: ltr !important;
  text-align: left !important;
}
html[dir="rtl"] #sfHero .sf-place-name,
html[dir="ltr"] #sfHero .sf-place-name {
  position: static !important;
  order: 1 !important;
  align-self: flex-start !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 17px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  text-align: left !important;
}
html[dir="rtl"] #sfHero .sf-bottom-note,
html[dir="ltr"] #sfHero .sf-bottom-note {
  position: static !important;
  order: 2 !important;
  align-self: flex-start !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  white-space: normal !important;
}
html[dir="rtl"] #sfHero .sf-place-name,
html[dir="rtl"] #sfHero .sf-bottom-note {
  direction: rtl !important;
}
html[dir="ltr"] #sfHero .sf-place-name,
html[dir="ltr"] #sfHero .sf-bottom-note {
  direction: ltr !important;
}
html[dir="rtl"] #sfHero .sf-slide-progress,
html[dir="ltr"] #sfHero .sf-slide-progress {
  position: relative !important;
  order: 3 !important;
  display: block !important;
  align-self: flex-start !important;
  width: 124px !important;
  max-width: 124px !important;
  height: 3px !important;
  flex: 0 0 3px !important;
  overflow: hidden !important;
  margin: 7px 0 0 !important;
  background: rgba(255,255,255,.37) !important;
}
html[dir="rtl"] #sfHero .sf-slide-progress > i,
html[dir="ltr"] #sfHero .sf-slide-progress > i {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  transform-origin: left center !important;
  transition: none !important;
}
#sfHero .sf-controls {
  z-index: 7 !important;
  position: absolute !important;
  inset: auto auto 80px 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 10px !important;
}
#sfHero .sf-controls button {
  width: 50px !important;
  height: 50px !important;
}

@media (max-width: 1050px) and (min-width: 781px) {
  #sfHero .sf-title {font-size: clamp(39px, 4.2vw, 52px) !important;}
  html[dir="rtl"] #sfHero .sf-copy, html[dir="ltr"] #sfHero .sf-copy {max-width: 48% !important;}
}

/* On phones reserve the area under the fixed header, then center the
   *whole* typewriter + supporting copy + button as a single unit. */
@media (max-width: 780px) {
  #sfHero {
    height: 100svh !important;
    min-height: 680px !important;
    max-height: none !important;
  }
  html[dir="rtl"] #sfHero .sf-copy,
  html[dir="ltr"] #sfHero .sf-copy {
    top: 174px !important;
    bottom: 211px !important;
    left: 22px !important;
    right: 22px !important;
    width: auto !important;
    max-width: calc(100% - 44px) !important;
    min-height: 0 !important;
    height: auto !important;
    justify-content: center !important;
    align-items: flex-start !important;
    transform: none !important;
  }
  #sfHero .sf-eyebrow {
    margin-bottom: 11px !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
  }
  #sfHero .sf-title {
    font-size: clamp(37px, 10vw, 50px) !important;
    line-height: 1.16 !important;
    min-height: var(--sf-v53-title-height, 2.32em) !important;
  }
  html[lang="en"] #sfHero .sf-title {
    font-size: clamp(34px, 9vw, 45px) !important;
    line-height: 1.12 !important;
  }
  #sfHero .sf-description {
    margin: 11px 0 15px !important;
    font-size: clamp(13px, 3.75vw, 15px) !important;
    line-height: 1.65 !important;
  }
  #sfHero .sf-cta {
    min-height: 45px !important;
    padding: 11px 19px !important;
    font-size: 13px !important;
  }
  html[dir="rtl"] #sfHero .sf-bottom-info,
  html[dir="ltr"] #sfHero .sf-bottom-info {
    inset: auto auto 122px 22px !important;
    width: 166px !important;
    max-width: 166px !important;
  }
  #sfHero .sf-place-name {font-size: 15px !important;}
  #sfHero .sf-bottom-note {font-size: 9px !important;}
  html[dir="rtl"] #sfHero .sf-slide-progress,
  html[dir="ltr"] #sfHero .sf-slide-progress {
    width: 116px !important;
    max-width: 116px !important;
  }
  #sfHero .sf-controls {bottom: 60px !important;}
  #sfHero .sf-controls button {
    width: 44px !important;
    height: 44px !important;
  }
}
@media (max-height: 720px) and (max-width: 780px) {
  html[dir="rtl"] #sfHero .sf-copy,
  html[dir="ltr"] #sfHero .sf-copy {top: 156px !important;bottom: 188px !important;}
  #sfHero .sf-title {font-size: clamp(34px, 9vw, 42px) !important;}
}