.loubane-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  color: #fff;
  background: linear-gradient(#061a13c9, #061a1315)
}

.loubane-page {
  background: #fff;
  color: #181c17
}

.loubane-wrap {
  width: calc(100% - 100px);
  max-width: 1200px;
  margin: auto
}

.loubane-hero {
  min-height: 800px;
  padding: 160px 0 70px;
  display: flex;
  align-items: center;
  color: white;
  background: #344729 url('../images/loubane/banner.png') center/cover
}

.loubane-copy {
  width: 47%;
  margin-left: auto
}

.loubane-eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: #ab261c
}

.loubane-hero .loubane-eyebrow,
.loubane-ritual .loubane-eyebrow {
  color: #ecd29b
}

.loubane-copy h1 {
  font-size: clamp(48px, 5.8vw, 80px);
  letter-spacing: -2px;
  line-height: 1.1;
  margin: 10px 0 22px
}

.loubane-copy>p:not(.loubane-eyebrow) {
  font-size: 15px;
  line-height: 1.85;
  text-shadow: 0 1px 8px #0008
}

.loubane-button {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  padding: 14px 24px;
  border-radius: 30px;
  background: linear-gradient(110deg, #c91917, #bd7011);
  color: white;
  font-size: 12px;
  font-weight: 700;
  margin-top: 27px
}

.loubane-button:hover {
  filter: brightness(1.12)
}

.loubane-ritual {
  min-height: 450px;
  display: flex;
  align-items: center;
  padding: 60px 0;
  background: #34261d url('../images/loubane/tea-ritual.png') center/cover;
  color: #fff
}

.loubane-ritual h2 {
  font-size: clamp(32px, 3.5vw, 47px);
  line-height: 1.2;
  letter-spacing: -1px;
  margin: 15px 0 24px
}

.loubane-ritual .loubane-copy {
  background: #21160e35;
  padding: 25px;
  border-radius: 6px
}

.loubane-products {
  padding: 60px 0 75px;
  text-align: center;
  scroll-margin-top: 24px
}

.loubane-products h2 {
  font-size: 38px;
  letter-spacing: -1px;
  margin: 8px 0 20px
}

.loubane-intro {
  max-width: 660px;
  margin: auto;
  font-size: 14px;
  line-height: 1.9;
  color: #60645c
}

.loubane-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px
}

.loubane-product h3 {
  font-size: 14px;
  margin: 16px 0 7px
}

.loubane-product>p {
  font-size: 13px;
  color: #666
}

.loubane-page .asta-flip {
  width: 100%;
  height: 335px;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  perspective: 1200px;
  text-align: center;
  border-radius: 5px
}

.loubane-page .asta-flip-inner {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .65s cubic-bezier(.2, .65, .3, 1)
}

.loubane-page .asta-flip.is-flipped .asta-flip-inner {
  transform: rotateY(180deg)
}

.loubane-page .asta-flip-front,
.loubane-page .asta-flip-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 5px;
  overflow: hidden
}

.loubane-page .asta-flip-front {
  background: #eeede7;
  padding: 20px
}

.loubane-page .asta-flip-front img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply
}

.loubane-page .asta-flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(145deg, #234832, #10251a);
  color: #fff;
  border: 1px solid #c2a668;
  padding: 24px 20px
}

.loubane-page .asta-flip-back .loubane-eyebrow {
  color: #e3c68b;
  font-size: 10px
}

.loubane-note {
  font: 500 26px/1.2 'Playfair Display', Georgia, serif;
  margin-top: 17px
}

.loubane-rule {
  height: 1px;
  width: 38px;
  background: #d9b86f;
  margin: 18px 0
}

.loubane-description {
  font-size: 12px;
  line-height: 1.8;
  color: #edf0e8
}

.loubane-return {
  font-size: 10px;
  color: #bac9b9;
  margin-top: 20px
}

.loubane-page :focus-visible {
  outline: 3px solid #c49344;
  outline-offset: 5px
}

@media(max-width:950px) {
  .loubane-wrap {
    width: calc(100% - 48px)
  }

  .loubane-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .loubane-copy {
    width: 48%
  }

  .loubane-hero {
    min-height: 610px
  }

  .loubane-copy>p:not(.loubane-eyebrow) {
    font-size: 14px
  }
}

@media(max-width:600px) {
  .loubane-wrap {
    width: calc(100% - 36px)
  }

  .loubane-hero {
    min-height: 0;
    display: block;
    padding: 130px 0 0;
    background: linear-gradient(#16332355, #163323), url('../images/loubane/banner.png') center top/cover
  }

  .loubane-copy {
    width: 100%;
    margin: 0
  }

  .loubane-copy h1 {
    font-size: 52px
  }

  .loubane-hero .loubane-copy {
    padding-bottom: 30px
  }

  .loubane-hero:after {
    content: '';
    display: block;
    aspect-ratio: 1348/795;
    background: linear-gradient(#163323, transparent 30%), url('../images/loubane/banner.png') center/100% 100% no-repeat
  }

  .loubane-ritual {
    min-height: 470px;
    align-items: flex-start;
    padding: 34px 0 230px;
    background-position: 30% center
  }

  .loubane-ritual .loubane-copy {
    padding: 20px;
    background: #21160eaa
  }

  .loubane-ritual h2 {
    font-size: 31px;
    margin: 10px 0 18px
  }

  .loubane-products {
    padding: 40px 0 50px
  }

  .loubane-products h2 {
    font-size: 32px
  }

  .loubane-intro {
    font-size: 13px
  }

  .loubane-grid {
    gap: 24px 12px;
    margin-top: 28px
  }

  .loubane-page .asta-flip {
    height: 310px
  }

  .loubane-page .asta-flip-front {
    padding: 10px
  }

  .loubane-page .asta-flip-back {
    padding: 15px 12px
  }

  .loubane-note {
    font-size: 21px;
    margin-top: 12px
  }

  .loubane-rule {
    margin: 12px 0
  }

  .loubane-description {
    font-size: 11px;
    line-height: 1.6
  }

  .loubane-return {
    font-size: 9px;
    margin-top: 12px
  }

  .loubane-product h3 {
    font-size: 12px
  }

  .loubane-product>p {
    font-size: 11px
  }
}

@media(max-width:360px) {
  .loubane-grid {
    grid-template-columns: 1fr;
    max-width: 280px;
    margin-inline: auto
  }

  .loubane-page .asta-flip {
    height: 310px
  }

  .loubane-note {
    font-size: 25px
  }

  .loubane-description {
    font-size: 13px
  }
}

@media(prefers-reduced-motion:reduce) {
  .loubane-page .asta-flip-inner {
    transition: none
  }
}

.loubane-ritual .loubane-copy {
  width: 43%;
  background: #080a0855
}

.loubane-video {
  background: #070b08;
  padding: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden
}

.loubane-video video {
  display: block;
  width: 100%;
  height: 95%;
  max-height: none;
  margin: 0;
  background: #070b08;
  object-fit: cover;
  object-position: center
}

@media(max-width:600px) {
  .loubane-ritual .loubane-copy {
    width: 100%
  }

  .loubane-video video {
    max-height: none
  }
}

/* Preserve the full video frame on phones and tablets. */
@media (max-width: 950px) {
  .loubane-video {
    height: auto;
  }

  .loubane-video video {
    height: auto;
    max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;
  }
}