/* Internal content pages only. Home and contact retain their existing banners. */
body .page-hero.unified-page-banner{min-height:340px;padding:48px 0;display:flex;align-items:center;text-align:left;background:#645849 url('../assets/img/subpage-massage-banner.webp') center 15%/cover no-repeat}
body .page-hero.unified-page-banner::after{background:linear-gradient(90deg,rgba(21,64,139,.78) 0%,rgba(21,64,139,.55) 30%,rgba(21,64,139,.12) 58%,rgba(21,64,139,0) 80%)}
body .unified-page-banner > .container{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
body .unified-page-banner h1{margin:0;max-width:620px;font-size:44px;line-height:1.35;color:#fff}
body .page-hero.unified-page-banner p{margin:0;max-width:540px;font-size:16px;line-height:1.8;letter-spacing:.12em;color:rgba(255,255,255,.88)}
body .page-hero.unified-page-banner .crumb{margin-top:7px;font-size:14px;letter-spacing:.08em}
body .unified-page-banner .crumb a{color:inherit}
@media(max-width:760px){
 body .page-hero.unified-page-banner{min-height:280px;padding:42px 0;background-position:58% 18%}
 body .page-hero.unified-page-banner::after{background:linear-gradient(90deg,rgba(21,64,139,.8),rgba(21,64,139,.45) 65%,rgba(21,64,139,.18))}
 body .unified-page-banner h1{font-size:34px}
 body .page-hero.unified-page-banner p{font-size:14px;letter-spacing:.06em;max-width:90%}
 body .page-hero.unified-page-banner .crumb{font-size:12px}
 body .unified-page-banner > .container{gap:12px}
}

/* Desktop crop: show the hands and massage action in the lower part of the source. */
@media (min-width: 761px) {
 body .page-hero.unified-page-banner { background-position: center 45%; }
}

@media (min-width: 1401px) {
 body .page-hero.unified-page-banner { background-position: center 70%; }
}

@media (min-width: 761px) { body .page-hero.original-banner-crop { background-position: center 15%; } }

/* Taller desktop banners retain both the face and hands in the scene. */
@media (min-width: 761px) {
 body .page-hero.unified-page-banner:not(.original-banner-crop) {
  min-height: clamp(307px, 25.333vw, 560px);
  background-position: center 30%;
 }
}

/* Supplied bamboo-forest image for culture, products and OEM banners only. */
body .page-hero.unified-page-banner.herbal-picking-banner{background-image:url('../assets/img/subpage-herbal-picking-v2-20261102.webp');background-position:center top}
@media(max-width:760px){body .page-hero.unified-page-banner.herbal-picking-banner{background-position:75% top}}

/* Retain the full picking action, including hands and collected herbs. */
@media(min-width:761px){
 body .page-hero.unified-page-banner.herbal-picking-banner{aspect-ratio:1914/822;min-height:0;padding:40px 0;background-position:center;background-size:cover}
}
@media(max-width:760px){
 body .page-hero.unified-page-banner.herbal-picking-banner{min-height:320px;background-position:75% center}
}

/* Short full-width banner: intact picking scene at right, bamboo fills the rest. */
@media(min-width:761px){
 body .page-hero.unified-page-banner.herbal-picking-banner{position:relative;isolation:isolate;aspect-ratio:auto;min-height:0;height:clamp(310px,24vw,520px);padding:36px 0;background-size:250% auto;background-position:left center}
 body .page-hero.unified-page-banner.herbal-picking-banner::before{content:"";position:absolute;inset:0 0 0 auto;z-index:0;width:calc(clamp(310px,24vw,520px) * 2.32725);max-width:100%;background:url('../assets/img/subpage-herbal-picking-v2-20261102.webp') right center/auto 100% no-repeat;mask-image:linear-gradient(90deg,transparent,#000 18%);pointer-events:none}
 body .page-hero.unified-page-banner.herbal-picking-banner::after{z-index:1}
 body .page-hero.unified-page-banner.herbal-picking-banner>.container{z-index:2}
}

/* Match bamboo scale and soften the image extension without enlarging the left forest. */
@media(min-width:761px){
 body .page-hero.unified-page-banner.herbal-picking-banner{background-image:url('../assets/img/subpage-bamboo-extension-20261102.webp');background-size:100% 100%;background-position:left center;background-repeat:no-repeat}
 body .page-hero.unified-page-banner.herbal-picking-banner::before{mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 12%,rgba(0,0,0,.7) 26%,#000 40%)}
}