.hgh-hero {

  position: relative;

  isolation: isolate;

  width: 100%;

  max-width: 100%;

  min-width: 100%;

  height: 100vh;

  min-height: 100vh;

  height: 100svh;

  min-height: 100svh;

  margin: 0;

  padding: 0;

  overflow: hidden;

  background: #050807;

  color: #ffffff;

}



.hgh-hero *,

.hgh-hero *::before,

.hgh-hero *::after {

  box-sizing: border-box;

}



.hgh-hero__slides,

.hgh-hero__slide,

.hgh-hero__media {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

}



.hgh-hero__slide {

  z-index: 1;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:

    opacity 900ms ease,

    visibility 900ms linear;

}



.hgh-hero__slide.is-active {

  z-index: 2;

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

}



.hgh-hero__media {

  z-index: 1;

  background: #050807;

}



.hgh-hero__media::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 5;

  background:

    linear-gradient(180deg, rgba(5, 8, 7, 0.2) 0%, rgba(5, 8, 7, 0.38) 68%, rgba(5, 8, 7, 0.52) 100%),

    rgba(0, 0, 0, 0.16);

  pointer-events: none;

}



.hgh-hero__media img,

.hgh-hero__media video {

  position: absolute;

  inset: 0;

  display: block;

  width: 100%;

  height: 100%;

  min-width: 100%;

  min-height: 100%;

  max-width: none;

  object-fit: cover;

  object-position: center center;

  border: 0;

}



.hgh-hero__media video {

  pointer-events: none;

  user-select: none;

  -webkit-user-select: none;

}



.hgh-hero__media video::-webkit-media-controls,

.hgh-hero__media video::-webkit-media-controls-enclosure,

.hgh-hero__media video::-webkit-media-controls-panel,

.hgh-hero__media video::-webkit-media-controls-play-button,

.hgh-hero__media video::-webkit-media-controls-start-playback-button,

.hgh-hero__media video::-webkit-media-controls-overlay-play-button,

.hgh-hero__media video::-webkit-media-controls-timeline,

.hgh-hero__media video::-webkit-media-controls-current-time-display,

.hgh-hero__media video::-webkit-media-controls-time-remaining-display,

.hgh-hero__media video::-webkit-media-controls-mute-button,

.hgh-hero__media video::-webkit-media-controls-volume-slider,

.hgh-hero__media video::-webkit-media-controls-fullscreen-button {

  display: none !important;

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;

}



.hgh-hero__youtube,

.hgh-hero__youtube iframe {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 100vw;

  height: 56.25vw;

  min-width: 177.78vh;

  min-height: 100vh;

  max-width: none;

  transform: translate(-50%, -50%) scale(1.08);

  border: 0;

  pointer-events: none;

  user-select: none;

  -webkit-user-select: none;

}



.hgh-hero__content {

  position: absolute;

  left: 50%;

  top: 50%;

  z-index: 20;

  width: min(86vw, 1100px);

  color: #ffffff;

  text-align: center;

  transform: translate(-50%, -50%);

  pointer-events: none;

}



.hgh-hero__subtitle {

  margin: 0 0 14px;

  font-family: var(--horoh-font-title, serif);

  font-size: clamp(13px, 1.4vw, 18px);

  line-height: 1.25;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  color: var(--horoh-gold, #d4b06a);

}



.hgh-hero__title {

  margin: 0;

  font-family: var(--horoh-font-title, serif);

  font-size: clamp(36px, 6.6vw, 76px);

  font-weight: 400;

  line-height: 1.04;

  letter-spacing: 0;

  text-wrap: balance;

}



.hgh-hero__text {

  width: min(100%, 760px);

  margin: 18px auto 0;

  font-family: var(--horoh-font-body, Arial, sans-serif);

  font-size: clamp(15px, 1.45vw, 20px);

  line-height: 1.6;

  color: rgba(255, 255, 255, 0.9);

}



.hgh-hero__text p {

  margin: 0 0 0.8em;

}



.hgh-hero__text p:last-child {

  margin-bottom: 0;

}



.hgh-hero__button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 42px;

  margin-top: 28px;

  padding: 0 22px;

  border: 1px solid rgba(255, 255, 255, 0.72);

  color: #ffffff;

  font-family: var(--horoh-font-body, Arial, sans-serif);

  font-size: 12px;

  line-height: 1;

  letter-spacing: 0.14em;

  text-decoration: none;

  text-transform: uppercase;

  background: rgba(5, 8, 7, 0.08);

  pointer-events: auto;

  transition:

    background 180ms ease,

    border-color 180ms ease,

    color 180ms ease;

}



.hgh-hero__button:hover,

.hgh-hero__button:focus {

  color: #ffffff;

  border-color: rgba(255, 255, 255, 0.94);

  background: rgba(255, 255, 255, 0.12);

  outline: none;

}



.hgh-hero__next {

  position: absolute;

  top: 50%;

  right: clamp(14px, 2.2vw, 34px);

  z-index: 40;

  display: inline-grid;

  place-items: center;

  width: 44px;

  height: 68px;

  padding: 0;

  border: 0;

  color: rgba(255, 255, 255, 0.48);

  background: transparent;

  cursor: pointer;

  transform: translateY(-50%);

  pointer-events: auto;

  transition:

    color 180ms ease,

    opacity 180ms ease;

}



.hgh-hero__next:hover,

.hgh-hero__next:focus {

  color: rgba(255, 255, 255, 0.88);

  outline: none;

}



.hgh-hero__next svg {

  display: block;

  width: 24px;

  height: 48px;

}



.hgh-hero__next path {

  fill: none;

  stroke: currentColor;

  stroke-width: 1.6;

  stroke-linecap: round;

  stroke-linejoin: round;

}



.hgh-hero__progress {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 45;

  width: 100%;

  height: 3px;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.24);

  pointer-events: none;

}



.hgh-hero__progress-bar {

  width: 100%;

  height: 100%;

  background: var(--horoh-gold, #d4b06a);

  transform: scaleX(0);

  transform-origin: left center;

  will-change: transform;

}



@media (max-width: 767px) {

  .hgh-hero__content {

    width: min(88vw, 620px);

  }



  .hgh-hero__title {

    font-size: clamp(34px, 11vw, 54px);

  }



  .hgh-hero__text {

    margin-top: 14px;

    font-size: 15px;

    line-height: 1.5;

  }



  .hgh-hero__button {

    min-height: 40px;

    margin-top: 22px;

    padding-inline: 18px;

    font-size: 11px;

  }



  .hgh-hero__next {

    right: 8px;

    width: 38px;

    height: 58px;

  }



  .hgh-hero__next svg {

    width: 20px;

    height: 42px;

  }

}