/* One fixed composition scales as a group; mobile uses natural document flow. */
.hero{position:relative;height:100dvh;min-height:0;padding:0;overflow:hidden;isolation:auto;background:transparent;font-family:HealingSans,'Microsoft YaHei',sans-serif;border:0}
.hero::before,.hero::after{display:none}
#top .hero .hero-mountain-backdrop{position:absolute;inset:-25px;overflow:hidden;opacity:.10;pointer-events:none;z-index:0;mask-image:linear-gradient(transparent,#000 18%,#000 68%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 68%,transparent)}
.mountain-layer{position:absolute;max-width:none;object-fit:cover;filter:grayscale(1) blur(2px);mask-image:linear-gradient(transparent,#000 28%,#000 65%,transparent),linear-gradient(to right,transparent,#000 16%,#000 84%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(transparent,#000 28%,#000 65%,transparent),linear-gradient(to right,transparent,#000 16%,#000 84%,transparent);-webkit-mask-composite:source-in}
.mountain-layer.far{left:-12%;top:-12%;width:125%;height:85%;object-position:center 42%}
.mountain-layer.middle{left:7%;top:15%;width:120%;height:78%;object-position:40% 65%}
.mountain-layer.near{left:-8%;top:47%;width:117%;height:70%;object-position:60% bottom}
.hero-stage{position:absolute;left:50%;top:50%;width:1672px;height:941px;transform:translate(-50%,-50%) scale(var(--hero-stage-scale,1));transform-origin:center;z-index:1}
.hero-inner{position:relative;z-index:1;display:block;max-width:none;width:100%;height:100%;padding:0;margin:0}
.hero-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;padding:0;background:transparent;pointer-events:none}
.hero .hero-photo{position:absolute;left:122px;top:83px;width:533px;height:665px;aspect-ratio:auto;border:0;border-radius:0;margin:0;box-shadow:0 0 calc(22 * var(--spa-glow-unit,1px)) calc(7 * var(--spa-glow-unit,1px)) #fffffff2,0 0 calc(52 * var(--spa-glow-unit,1px)) calc(16 * var(--spa-glow-unit,1px)) #ffffffb3!important;background:#e3e3d8;pointer-events:auto;overflow:hidden;z-index:1;isolation:isolate}
.hero .hero-photo>.hero-cover-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:saturate(.65) sepia(.12) brightness(1.07) contrast(.94);animation:none}
.hero .hero-photo::after{display:none}
.hero-copy{position:absolute;left:910px;top:415.5px;width:528px;height:auto;max-width:none;transform:translateY(-50%);padding:0;text-align:center;z-index:2;display:flex;flex-direction:column;align-items:center}
.hero-main-brand{display:flex;flex-direction:column;align-items:center;margin:0;width:100%}
.hero-main-brand .hero-main-symbol{position:static;width:180px;margin:0 0 24px;color:#26372d;filter:none!important}
.hero-main-brand h1{position:static;font:300 50px/1.25 HealingSans,'Microsoft YaHei',sans-serif;letter-spacing:.18em;margin:0;white-space:nowrap;color:#25352d;transform:none}
.hero-main-brand>small{position:static;font:17px/1.46 TTCommons,Arial,sans-serif;letter-spacing:.17em;margin:14px 0 0;color:#303d34}
#top .hero-copy .hero-subtitle{position:relative;inset:auto;width:100%;font:400 32px/1.45 'SPA Calligraphy','KaiTi',serif;letter-spacing:.11em;margin:18px 0 0;padding-top:18px;color:#354035}
.hero-subtitle::before,.hero-location::before{content:'';position:absolute;left:calc(50% - 15px);top:0;width:30px;height:1px;background:#7e8276}
.hero-copy .hero-caption{position:relative;inset:auto;width:596px;max-width:none;font:300 20px/1.8 HealingSans,'Microsoft YaHei',sans-serif;letter-spacing:.025em;color:#384034;margin:30px 0 0;text-align:center}
.hero-caption p{margin:0}
#top .hero .hero-location{display:flex;position:relative;inset:auto;width:100%;justify-content:center;align-items:center;gap:9px;margin:24px 0 0;padding-top:19px;color:#535747;font:300 20px/1.5 HealingSans,'Microsoft YaHei',sans-serif;letter-spacing:.1em}
.hero-location img{display:block;opacity:.72}
.hero .hero-photo-detail.hero-video-trigger{position:absolute;left:480px;top:596px;right:auto;bottom:auto;width:374px;height:auto;aspect-ratio:16/9;padding:0;margin:0;min-height:0;border:2px solid #fff;border-radius:0;overflow:hidden;background:transparent;box-shadow:none;z-index:3;transform:none;pointer-events:auto}
.hero .hero-video-cover{display:block;position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;box-shadow:none!important}
.hero .hero-video-cover>img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center;filter:none}
.hero .hero-play-icon{width:48px;height:48px;border:1.5px solid #f8f6ec;background:#282e2726;color:#fff;box-shadow:none}
.hero .hero-play-icon svg{width:21px;height:21px;fill:#fff;display:block;margin:0}
.hero .hero-video-trigger:hover .hero-play-icon{background:#334a3b70}
#top .hero .hero-waves,.hero-waves-fit .hero-waves{display:block;width:100%;height:53.238px;bottom:26.619px;background:#858585;opacity:.2;z-index:0;mask-size:80px 53.238px;-webkit-mask-size:80px 53.238px}
#top .identity-waves{background:#858585}
.hero button:focus-visible{outline:2px solid #5e715b;outline-offset:5px}
@media(max-width:700px){
 .hero{height:auto;min-height:100dvh;padding:64px 24px 64px;overflow:hidden}
 .hero-stage{position:static;width:100%;height:auto;transform:none}
 .hero-inner{height:auto;display:flex;flex-direction:column;gap:36px}
 .hero-copy{position:relative;inset:auto;width:100%;height:auto;max-width:450px;margin:0 auto;order:1;transform:none}
 .hero-main-brand .hero-main-symbol{width:130px;margin:0 0 20px}
 .hero-main-brand h1{font-size:34px;letter-spacing:.13em}
 .hero-main-brand>small{font-size:11px;letter-spacing:.17em;margin-top:14px}
 #top .hero-copy .hero-subtitle{font-size:22px;letter-spacing:.1em;margin-top:20px;padding-top:14px}
 .hero-copy .hero-caption{width:100%;font-size:13px;line-height:1.9;margin:22px 0 0;letter-spacing:.02em}.hero-caption br{display:initial}
 #top .hero .hero-location{font-size:14px;margin-top:20px;padding-top:15px}.hero-location img{width:21px;height:21px}
 .hero-media{position:relative;inset:auto;order:2;height:390px;width:100%;max-width:460px;margin:0 auto}
 .hero .hero-photo{left:0;top:0;width:73%;height:345px}
 .hero .hero-photo-detail.hero-video-trigger{position:absolute;left:auto;right:0;top:260px;bottom:auto;width:53%;height:auto;aspect-ratio:16/9;margin:0;border-radius:0}
 .hero .hero-play-icon{width:34px;height:34px}.hero .hero-play-icon svg{width:16px;height:16px}
}
@media(prefers-reduced-motion:reduce){.hero *{scroll-behavior:auto}}

/* Transparent original: https://www.pngkit.com/view/u2a9o0i1e6i1y3e6_png-bamboo-vector-freeuse-green-bamboo-png/ */
#top .hero .hero-leaf-foreground{position:absolute;left:-10px;top:0;width:clamp(340px,30vw,550px);height:100%;z-index:4;pointer-events:none;opacity:.86;filter:blur(8px) brightness(.56) saturate(.42);overflow:hidden;mask-image:linear-gradient(to right,#000 62%,transparent 100%),linear-gradient(transparent,#000 6%,#000 94%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,#000 62%,transparent 100%),linear-gradient(transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in}
.hero-leaf-foreground img{position:absolute;display:block;left:-240px;top:-100px;width:1040px;height:auto;max-width:none;transform:rotate(12deg);transform-origin:20% 20%;filter:none!important;mask-image:url('assets/bamboo-branch-base-mask.svg');-webkit-mask-image:url('assets/bamboo-branch-base-mask.svg');mask-mode:luminance;mask-size:100% 100%;-webkit-mask-size:100% 100%}#top .hero .hero-copy :is(h1,p,small,span){text-shadow:0 0 calc(2 * var(--spa-glow-unit,1px)) #fff,0 0 calc(4 * var(--spa-glow-unit,1px)) #fffffff2,0 0 calc(12 * var(--spa-glow-unit,1px)) #fff,0 0 calc(28 * var(--spa-glow-unit,1px)) #ffffffd9}
.hero-leaf-turn{position:absolute;inset:0;transform:translateX(calc(-90px * var(--hero-stage-scale,1))) rotate(-90deg);transform-origin:calc(50px * var(--hero-stage-scale,1)) calc(655px * var(--hero-stage-scale,1))}
#top .hero .hero-leaf-turn>img{mask-image:url('assets/bamboo-branch-turn-mask.svg');-webkit-mask-image:url('assets/bamboo-branch-turn-mask.svg')}
/* Keep the complete original leaf group in the same proportion to the hero photo. */
@media(min-width:701px){
 #top .hero .hero-leaf-foreground{left:calc(-10.228px * var(--hero-stage-scale,1));width:calc(562.56px * var(--hero-stage-scale,1))}
 #top .hero .hero-leaf-foreground img{left:calc(-306.85px * var(--hero-stage-scale,1));top:calc(-102.28px * var(--hero-stage-scale,1));width:calc(1329.67px * var(--hero-stage-scale,1))}
}
#top .hero .hero-main-symbol{filter:drop-shadow(0 0 calc(2 * var(--spa-glow-unit,1px)) #fff) drop-shadow(0 0 calc(6 * var(--spa-glow-unit,1px)) #fff) drop-shadow(0 0 calc(12 * var(--spa-glow-unit,1px)) #fff) drop-shadow(0 0 calc(24 * var(--spa-glow-unit,1px)) #ffffffb3)!important}
#top .hero .hero-video-trigger{box-shadow:none!important}
.hero-media::before{content:'';position:absolute;left:480px;top:596px;width:374px;aspect-ratio:16/9;z-index:0;pointer-events:none;box-shadow:0 0 calc(15 * var(--spa-glow-unit,1px)) calc(4 * var(--spa-glow-unit,1px)) #ffffffb3,0 0 calc(34 * var(--spa-glow-unit,1px)) calc(8 * var(--spa-glow-unit,1px)) #ffffff80}
@media(max-width:700px){#top .hero .hero-leaf-foreground{left:-30px;top:505px;width:245px;height:calc(100% - 505px);opacity:.7}.hero-leaf-foreground img{width:720px;left:-175px;top:-70px}.hero-media::before{left:auto;right:0;top:260px;width:53%}}/* The original ending waves define the geometry of both locations. */
#top{--spa-wave-width:102.921412px;--spa-wave-height:68.491976px}
#top .hero .hero-waves,#top .identity-waves{height:var(--spa-wave-height);background:#858585;opacity:.2;mask-image:url('assets/brand-waves-ending.svg?v=spa-42');-webkit-mask-image:url('assets/brand-waves-ending.svg?v=spa-42');mask-size:var(--spa-wave-width) var(--spa-wave-height);-webkit-mask-size:var(--spa-wave-width) var(--spa-wave-height);mask-position:left top;-webkit-mask-position:left top}
#top .hero .hero-waves{bottom:34.245988px}
#top .identity-waves{transform:none}
@media(max-width:700px){#top{--spa-wave-width:80px;--spa-wave-height:53.238271px}#top .hero .hero-waves{bottom:26.619px}}
@media(max-width:700px){.hero-leaf-turn{transform:translateX(-40px) rotate(-90deg);transform-origin:18px 340px}}

/* Retain the lower two rows in the same footer canvas, leaving the top row empty. */
#top .identity-waves{height:calc(var(--spa-wave-width) * .993439);mask-image:url("assets/brand-waves-footer.svg?v=2");-webkit-mask-image:url("assets/brand-waves-footer.svg?v=2");mask-size:var(--spa-wave-width) calc(var(--spa-wave-width) * .993439);-webkit-mask-size:var(--spa-wave-width) calc(var(--spa-wave-width) * .993439)}

/* Draw decorative lines above photo and type halos without changing their geometry. */
#top .hero .hero-waves,#top .identity-waves{z-index:2;isolation:isolate;text-shadow:none;box-shadow:none;filter:none}