/* Preview: reduce hero footprint without altering source image pixels. */
@media(min-width:761px){
 #ruike-home-hero .hero{height:clamp(540px,43vw,660px);min-height:0}
 #ruike-home-hero .hero-image{width:100%;height:100%;min-height:0;aspect-ratio:auto;object-fit:contain;object-position:right center}
 #ruike-home-hero .hero-carousel-frame:not(:first-of-type){width:65%;height:100%;object-fit:contain;object-position:center;background:transparent}
 #ruike-home-hero .hero-carousel-frame.hero-carousel-full{width:78%}
 #ruike-home-hero .hero-copy{top:50%;transform:translateY(-50%);left:6%;width:40%}
 #ruike-home-hero .eyebrow{margin-bottom:12px}
 #ruike-home-hero .description{margin-top:14px;font-size:15px;line-height:1.65}
 #ruike-home-hero .services{margin-top:14px}
 #ruike-home-hero .actions{margin-top:12px}
 #ruike-home-hero .hero-slide-controls{margin-top:12px}
 #ruike-home-hero .motion-bar{height:60px;padding-block:8px}
 html[lang=en] #ruike-home-hero h1{font-size:clamp(48px,4.4vw,66px);line-height:.98}
 html[lang=en] #ruike-home-hero .description{max-width:360px;font-size:14px}
 html[lang=zh-CN] #ruike-home-hero h1{font-size:clamp(32px,2.8vw,43px)}
}
@media(max-width:760px){
 #ruike-home-hero .hero-copy{padding:24px 6% 16px}
 #ruike-home-hero .eyebrow{margin-bottom:12px}
 #ruike-home-hero .description{margin-top:12px;font-size:14px;line-height:1.65}
 #ruike-home-hero .services{margin-top:12px}
 #ruike-home-hero .actions{margin-top:10px}
 #ruike-home-hero .hero-slide-controls{margin-top:10px}
 #ruike-home-hero .hero-image{height:clamp(190px,50vw,270px);width:100%;aspect-ratio:auto;object-fit:contain;background:#d9dddf}
 #ruike-home-hero .hero-carousel-frame:not(:first-of-type){height:var(--hero-photo-height);width:100%;right:0;object-fit:contain;object-position:center}
 html[lang=en] #ruike-home-hero h1{font-size:48px}
 html[lang=zh-CN] #ruike-home-hero h1{font-size:30px}
}

/* Keep the approved hero height and artwork; bound the composition on wide screens. */
@media(min-width:761px){
 #ruike-home-hero .hero{
  --hero-content-width:min(88%,1720px);
  --hero-content-inset:calc((100% - var(--hero-content-width))/2);
  --hero-media-width:calc(var(--hero-content-width)*.65);
  --hero-media-center:calc(50% + var(--hero-content-width)*.175);
 }
 #ruike-home-hero .hero-copy{
  left:var(--hero-content-inset);
  width:calc(var(--hero-content-width)*.34);
  max-width:560px;
 }
 #ruike-home-hero .hero-image,
 #ruike-home-hero .hero-carousel-frame:first-of-type,
 #ruike-home-hero .hero-carousel-frame:not(:first-of-type),
 #ruike-home-hero .hero-carousel-frame.hero-carousel-full{
  position:absolute;top:50%;left:var(--hero-media-center);right:auto;bottom:auto;z-index:1;
  transform:translate(-50%,-50%);
  width:auto;height:auto;min-height:0;
  max-width:var(--hero-media-width);max-height:calc(100% - 24px);
  aspect-ratio:auto;object-fit:contain;object-position:center;background:transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(0deg,transparent,#000 1.5%,#000 98.5%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 1.5%,#000 98.5%,transparent),linear-gradient(0deg,transparent,#000 1.5%,#000 98.5%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
 }
 #ruike-home-hero .shade{
  z-index:0;
  background:linear-gradient(90deg,#15241b 0%,#15241b calc(var(--hero-content-inset) + var(--hero-content-width)*.34),#15241b00 calc(var(--hero-content-inset) + var(--hero-content-width)*.43));
 }
 html[lang=zh-CN] #ruike-home-hero .hero{background:#e9ebeb}
 html[lang=zh-CN] #ruike-home-hero .shade{
  z-index:0;
  background:linear-gradient(90deg,#f1f0ee 0%,#f1f0ee calc(var(--hero-content-inset) + var(--hero-content-width)*.29),#f1f0ee00 calc(var(--hero-content-inset) + var(--hero-content-width)*.35));
 }
}
@media(min-width:761px) and (max-width:1100px){
 #ruike-home-hero .hero{
  --hero-content-width:92%;
  --hero-media-width:calc(var(--hero-content-width)*.60);
  --hero-media-center:calc(50% + var(--hero-content-width)*.20);
 }
 #ruike-home-hero .hero-copy{width:calc(var(--hero-content-width)*.38)}
 #ruike-home-hero .shade{
  background:linear-gradient(90deg,#15241b 0%,#15241b calc(var(--hero-content-inset) + var(--hero-content-width)*.38),#15241b00 calc(var(--hero-content-inset) + var(--hero-content-width)*.46));
 }
 html[lang=zh-CN] #ruike-home-hero .shade{
  background:linear-gradient(90deg,#f1f0ee 0%,#f1f0ee calc(var(--hero-content-inset) + var(--hero-content-width)*.34),#f1f0ee00 calc(var(--hero-content-inset) + var(--hero-content-width)*.40));
 }
}