.hero-promo{
  position:absolute;
  z-index:7;
  right:32px;
  bottom:28px;
  width:min(610px,47vw);
  min-height:138px;
  overflow:hidden;
  border:1px solid rgba(201,150,69,.5);
  border-radius:18px;
  background:linear-gradient(112deg,rgba(7,22,17,.88),rgba(18,46,40,.72));
  box-shadow:0 24px 56px rgba(0,0,0,.36),inset 0 1px 0 rgba(243,230,209,.08);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  color:#f3e6d1;
  font-family:Manrope,sans-serif;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.16,1,.3,1),border-color .3s ease;
  touch-action:pan-y;
  overscroll-behavior-x:contain;
}

.hero-promo.is-ready{opacity:1;transform:none}
.hero-promo:hover{border-color:rgba(235,199,107,.8)}
.hero-promo__slide{display:grid;grid-template-columns:162px minmax(0,1fr);min-height:138px}
.hero-promo__media{position:relative;overflow:hidden;background:rgba(5,18,14,.72)}
.hero-promo__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 52%,rgba(7,22,17,.72))}
.hero-promo[data-promo-type="academy"] .hero-promo__media::before{content:"";position:absolute;z-index:1;right:2%;bottom:-2%;left:2%;height:72%;background:url('/assets/img/academy-friends-v1.webp') center bottom/contain no-repeat;filter:drop-shadow(0 18px 22px rgba(0,0,0,.44));pointer-events:none}
.hero-promo[data-promo-type="academy"] .hero-promo__media::after{z-index:2;background:linear-gradient(90deg,rgba(2,12,20,.05) 48%,rgba(7,22,17,.84)),linear-gradient(0deg,rgba(2,12,20,.28),transparent 50%)}
.hero-promo__image{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .18s ease,transform 5.8s ease}
.hero-promo:hover .hero-promo__image{transform:scale(1.045)}
.hero-promo__image.is-contain{object-fit:contain;padding:8px;filter:drop-shadow(0 10px 14px rgba(0,0,0,.34))}
.hero-promo__body{position:relative;display:flex;min-width:0;flex-direction:column;justify-content:center;padding:19px 64px 19px 21px}
.hero-promo__eyebrow{margin-bottom:7px;color:#ebc76b;font-size:10px;font-weight:800;line-height:1.2;letter-spacing:.17em;text-transform:uppercase}
.hero-promo__title{display:-webkit-box;margin:0;overflow:hidden;color:#f3e6d1;font-family:'Cormorant Garamond',serif;font-size:clamp(23px,1.85vw,29px);font-weight:700;line-height:1.02;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.hero-promo__text{display:-webkit-box;margin:7px 0 0;overflow:hidden;color:rgba(243,230,209,.66);font-size:13px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.hero-promo__link{display:inline-flex;width:max-content;margin-top:9px;color:#f3e6d1;font-size:12px;font-weight:700;text-decoration:none}
.hero-promo__link::after{content:" →";margin-left:5px;color:#c99645}
.hero-promo__controls{position:absolute;z-index:2;right:12px;top:12px;display:flex;gap:5px}
.hero-promo__button{display:grid;width:26px;height:26px;padding:0;place-items:center;border:1px solid rgba(243,230,209,.16);border-radius:50%;background:rgba(11,19,15,.3);color:rgba(243,230,209,.76);font:600 14px/1 Manrope,sans-serif;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.hero-promo__button:hover{border-color:#c99645;background:#b63824;color:#fff}
.hero-promo__dots{position:absolute;right:15px;bottom:15px;display:flex;gap:5px}
.hero-promo__dot{width:5px;height:5px;padding:0;border:0;border-radius:50%;background:rgba(243,230,209,.28);cursor:pointer;transition:width .22s ease,background .22s ease}
.hero-promo__dot.is-active{width:17px;border-radius:5px;background:#c99645}
.hero-promo.is-changing .hero-promo__body,.hero-promo.is-changing .hero-promo__image{opacity:.15;transform:translateY(4px)}

@media(max-width:1100px) and (min-width:761px){
  .hero-promo{right:20px;bottom:20px;width:min(520px,52vw)}
  .hero-promo__slide{grid-template-columns:138px minmax(0,1fr)}
  .hero-promo__body{padding-right:56px}
}

@media(max-width:760px){
  #hero{min-height:calc(100dvh + 220px)!important;padding-bottom:230px!important}
  .hero-promo{right:10px;bottom:82px;left:10px;width:auto;min-height:138px;border-radius:15px}
  .hero-promo__slide{grid-template-columns:112px minmax(0,1fr);min-height:138px}
  .hero-promo__body{padding:15px 42px 15px 15px}
  .hero-promo__title{font-size:22px}
  .hero-promo__text{font-size:12px;-webkit-line-clamp:2}
  .hero-promo__controls{right:9px;top:9px;flex-direction:column}
  .hero-promo__button{width:24px;height:24px}
  .hero-promo__dots{right:11px;bottom:10px}
}

@media(prefers-reduced-motion:reduce){
  .hero-promo,.hero-promo__image,.hero-promo__body,.hero-promo__dot{transition:none!important}
}

/* The promo is the primary selling frame of the hero, not a secondary ticker. */
#hero>[data-hero-inner]{display:none!important}

@media(min-width:761px){
  .hero-promo{
    left:50%;
    right:auto;
    top:56%;
    bottom:auto;
    width:78vw;
    max-width:1600px;
    min-width:760px;
    height:clamp(500px,62vh,620px);
    min-height:0;
    border-radius:24px;
    background:rgba(6,20,16,.54);
    box-shadow:0 34px 90px rgba(0,0,0,.42),inset 0 1px 0 rgba(243,230,209,.12);
    backdrop-filter:blur(22px) saturate(132%);
    -webkit-backdrop-filter:blur(22px) saturate(132%);
    transform:translate(-50%,calc(-50% + 14px));
  }
  .hero-promo.is-ready{transform:translate(-50%,-50%)}
  .hero-promo__slide{grid-template-columns:53% minmax(0,1fr);height:100%;min-height:0}
  .hero-promo__media{min-width:0;min-height:0}
  .hero-promo__image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero-promo__media::after{background:linear-gradient(90deg,transparent 62%,rgba(7,22,17,.88))}
  .hero-promo__body{isolation:isolate;justify-content:center;padding:60px 96px 60px 54px;background:rgba(8,39,32,.46);backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%)}
  .hero-promo__body::before{content:"";position:absolute;z-index:-1;inset:0;background:url('/assets/img/green-tea-engraving-v1.png') center/cover no-repeat;opacity:.16;mix-blend-mode:screen;pointer-events:none}
  .hero-promo__eyebrow{width:max-content;margin-bottom:18px;padding:8px 14px;border:1px solid rgba(235,199,107,.56);border-radius:999px;color:#f3e6d1;font-size:11px;letter-spacing:.18em;background:transparent}
  .hero-promo__title{color:#d6a84e;font-size:clamp(46px,3.55vw,70px);line-height:.92;-webkit-line-clamp:3;text-shadow:0 0 30px rgba(214,168,78,.12)}
  .hero-promo__text{margin-top:20px;color:rgba(255,255,255,.82);font-size:clamp(15px,1.05vw,19px);line-height:1.62;-webkit-line-clamp:4}
  .hero-promo__link{margin-top:22px;padding:14px 20px;border-radius:5px;background:#b63824;font-size:14px;transition:background .22s ease,transform .22s ease}
  .hero-promo__link::after{color:#f3e6d1}
  .hero-promo__link:hover{background:#c5412b;transform:translateY(-2px)}
  .hero-promo__controls{right:20px;top:20px;gap:8px}
  .hero-promo__button{width:36px;height:36px;font-size:18px}
  .hero-promo__dots{right:24px;bottom:24px;gap:7px}
  .hero-promo__dot{width:7px;height:7px}
  .hero-promo__dot.is-active{width:25px}
}

@media(max-width:1100px) and (min-width:761px){
  .hero-promo{left:50%;top:56%;width:88vw;min-width:0;height:clamp(460px,60vh,540px);min-height:0}
  .hero-promo__slide{grid-template-columns:48% minmax(0,1fr);height:100%;min-height:0}
  .hero-promo__body{padding:38px 62px 38px 34px}
  .hero-promo__title{font-size:clamp(32px,3.5vw,42px)}
}

@media(max-width:760px){
  #hero{display:block!important;min-height:100dvh!important;padding:94px 10px 88px!important}
  .hero-promo{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    min-height:calc(100dvh - 182px);
    max-height:none;
    border-radius:20px;
    background:linear-gradient(180deg,rgba(7,22,17,.7),rgba(7,22,17,.95));
  }
  .hero-promo__slide{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:minmax(230px,38vh) auto;
    width:100%;
    min-width:0;
    min-height:calc(100dvh - 182px);
  }
  .hero-promo__media{width:100%;height:auto;min-width:0;min-height:230px}
  .hero-promo__media::after{background:linear-gradient(180deg,transparent 45%,rgba(7,22,17,.96))}
  .hero-promo__body{
    width:100%;
    min-width:0;
    min-height:280px;
    justify-content:flex-start;
    padding:28px 28px 54px;
  }
  .hero-promo__eyebrow{font-size:11px;margin-bottom:10px}
  .hero-promo__title{display:block;width:100%;overflow:visible;font-size:clamp(32px,9.6vw,43px);line-height:.98;-webkit-line-clamp:unset;overflow-wrap:normal;word-break:normal;hyphens:none}
  .hero-promo__text{display:block;width:100%;margin-top:13px;overflow:visible;font-size:15px;line-height:1.5;-webkit-line-clamp:unset;overflow-wrap:normal;word-break:normal;hyphens:none}
  .hero-promo__link{margin-top:18px;padding:13px 18px;border-radius:5px;background:#b63824;font-size:14px}
  .hero-promo__link::after{color:#f3e6d1}
  .hero-promo__controls{right:14px;top:14px;flex-direction:row}
  .hero-promo__button{width:34px;height:34px;background:rgba(11,19,15,.58)}
  .hero-promo__dots{right:18px;bottom:18px}
}

@media(max-width:390px){
  #hero{padding-right:8px!important;padding-left:8px!important}
  .hero-promo__body{padding:24px 22px 52px}
  .hero-promo__title{font-size:clamp(30px,9.2vw,38px)}
  .hero-promo__text{font-size:14px;line-height:1.48}
}
