/* ===== Home hero: premium thumbnail slider ===== */
.hero {
  min-height: 920px;
  min-height: max(100vh, 760px);
  min-height: max(100svh, 760px);
  touch-action: pan-y
}

/* banners */
.hs-stage {
  position: absolute;
  inset: -10% 0;
  z-index: 0;
  will-change: transform
}

.hs-slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  z-index: 1
}

.hs-slide.is-active,
.hs-slide.is-next {
  visibility: visible
}

.hs-slide.is-active {
  z-index: 2
}

.hs-slide.is-next {
  z-index: 3
}

.hs-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--forest)
}

.hs-clip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  will-change: transform
}

.hs-dim {
  position: absolute;
  inset: 0;
  background: var(--forest);
  opacity: 0;
  pointer-events: none
}

/* soft film grain: adds depth and hides upscaling on smaller photos */
.hs-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

/* extra shade so cards + counter stay legible on any photo */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8, 32, 19, .7), rgba(8, 32, 19, 0))
}

/* copy: all slides share one grid cell so the layout never jumps */
.hero > .wrap {
  /* equal top/bottom space (header above, cards below) keeps the copy in the true vertical middle */
  padding-top: 190px;
  padding-bottom: 190px
}

.hero-copy {
  display: grid;
  max-width: 700px
}

.hs-text {
  grid-area: 1 / 1;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  visibility: hidden
}

.hs-text.is-active {
  visibility: visible
}

.hero .hs-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(42px, 5.4vw, 72px);
  line-height: 1.1;
  letter-spacing: -.02em;
  color: #fff
}

.hero .hs-h em {
  color: var(--gold)
}

.hs-act {
  margin-top: 8px
}

.hs-act .btn {
  margin-top: 0
}

/* bottom UI */
.hs-ui {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  z-index: 5;
  pointer-events: none
}

.hs-ui .wrap {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-top: 0;
  padding-bottom: 0
}

.hs-ui .wrap>* {
  pointer-events: auto
}

.hs-count {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--cream);
  padding-bottom: 6px
}

.hs-num {
  position: relative;
  width: 48px;
  height: 40px;
  overflow: hidden;
  font: 400 36px/40px var(--serif)
}

.hs-num span {
  position: absolute;
  left: 0;
  top: 0;
  display: block
}

.hs-bar {
  position: relative;
  display: block;
  width: 120px;
  height: 1px;
  background: rgba(253, 249, 242, .3);
  overflow: hidden
}

.hs-bar b {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0)
}

.hs-tot {
  font: 13px/1 var(--sans);
  letter-spacing: 2px;
  opacity: .65
}

.hs-right {
  display: flex;
  align-items: flex-end;
  gap: 24px
}

.hs-nav {
  display: flex;
  gap: 8px;
  padding-bottom: 2px
}

.hs-nav button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(253, 249, 242, .4);
  background: rgba(8, 32, 19, .28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--cream);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .4s, color .4s, border-color .4s, transform .5s cubic-bezier(.2, .7, .2, 1)
}

.hs-nav button:hover {
  background: var(--gold);
  color: var(--forest);
  border-color: var(--gold)
}

.hs-nav button:active {
  transform: scale(.92)
}

.hs-nav svg {
  fill: none
}

.hs-rail {
  display: flex;
  align-items: flex-end;
  gap: 12px
}

.hs-thumb {
  position: relative;
  flex: none;
  width: 92px;
  height: 128px;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(253, 249, 242, .28);
  background: var(--moss);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: width .9s cubic-bezier(.7, 0, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1), border-color .5s, box-shadow .6s
}

.hs-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.6) saturate(.9);
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s
}

.hs-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 32, 19, .85), rgba(8, 32, 19, 0) 62%)
}

.hs-thumb:hover {
  transform: translateY(-6px);
  border-color: rgba(253, 249, 242, .6)
}

.hs-thumb:hover img {
  filter: brightness(.88);
  transform: scale(1.08)
}

.hs-thumb:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px
}

.hs-thumb.is-active {
  width: 176px;
  border-color: rgba(253, 221, 185, .85);
  box-shadow: 0 24px 40px -14px rgba(0, 0, 0, .6)
}

.hs-thumb.is-active img {
  filter: none
}

.hs-n {
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 2;
  font: italic 400 15px/1 var(--serif);
  color: var(--gold)
}

.hs-l {
  position: absolute;
  left: 12px;
  right: 8px;
  bottom: 16px;
  z-index: 2;
  overflow: hidden;
  white-space: nowrap;
  font: 11px/1.2 var(--sans);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s, transform .6s cubic-bezier(.2, .7, .2, 1)
}

.hs-thumb:hover .hs-l {
  opacity: 1;
  transform: none
}

.hs-thumb.is-active .hs-l {
  opacity: 1;
  transform: none;
  transition-delay: .35s
}

.hs-pg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 3;
  background: rgba(253, 249, 242, .22);
  opacity: 0;
  transition: opacity .4s
}

.hs-thumb.is-active .hs-pg {
  opacity: 1
}

.hs-pg b {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0)
}

/* ---- no-GSAP / reduced-motion fallback: simple cross-fade ---- */
.hero:not(.hs-fx) .hs-slide {
  opacity: 0;
  visibility: visible;
  transition: opacity 1.2s ease
}

.hero:not(.hs-fx) .hs-slide.is-active {
  opacity: 1
}

.hero:not(.hs-fx) .hs-text {
  opacity: 0;
  visibility: visible;
  transition: opacity .8s ease
}

.hero:not(.hs-fx) .hs-text.is-active {
  opacity: 1
}

.hero:not(.hs-fx) .hs-text:not(.is-active) {
  pointer-events: none
}

/* ---- responsive ---- */
@media(max-width:1000px) {
  .hero > .wrap {
    padding-top: 170px;
    padding-bottom: 170px
  }

  .hs-thumb {
    width: 72px;
    height: 104px
  }

  .hs-thumb.is-active {
    width: 140px
  }

  .hs-bar {
    width: 70px
  }
}

@media(max-width:700px) {
  .hero {
    min-height: max(100svh, 680px)
  }

  .hero > .wrap {
    padding-top: 130px;
    padding-bottom: 130px
  }

  .hero .hs-h {
    font-size: 40px
  }

  .hero .hs-p {
    font-size: 16px;
    line-height: 26px
  }

  .hs-ui {
    bottom: 22px
  }

  .hs-ui .wrap {
    justify-content: flex-end
  }

  .hs-count,
  .hs-nav {
    display: none
  }

  .hs-rail {
    gap: 8px
  }

  .hs-thumb {
    width: 52px;
    height: 76px;
    border-radius: 10px
  }

  .hs-thumb.is-active {
    width: 104px
  }

  .hs-n {
    left: 8px;
    top: 7px;
    font-size: 12px
  }

  .hs-l {
    left: 8px;
    bottom: 10px;
    font-size: 9px;
    letter-spacing: 1.2px
  }
}

@media(prefers-reduced-motion:reduce) {

  .hs-thumb,
  .hs-thumb img {
    transition: none
  }
}

/* mid-size screens: keep the whole card rail inside the viewport */
@media(max-width:1100px) and (min-width:701px) {
  .hs-nav { display: none }
  .hs-ui .wrap { gap: 12px }
  .hs-bar { width: 48px }
}