/* Figma 4146:5830, isolated 1920 x 1304 Hero canvas. */
.page-jd.jd-hero-study{--study-scale:min(1,var(--s,1));--metric-scale:clamp(.8,var(--s,1),1);--metric-ratio:calc(var(--metric-scale) / var(--study-scale));--hero-cover-top:min(67.916667vw,1304px)}
.page-jd.jd-hero-study .case-hero{height:min(67.916667vw,1304px);margin-top:0;overflow:hidden;background:#151515}
.page-jd .jd-study-canvas{position:absolute!important;left:50%!important;top:0!important;width:1920px!important;height:1304px!important;margin:0!important;padding:0!important;transform:translateX(-50%) scale(min(1,var(--s,1)))!important;transform-origin:top center;overflow:hidden}
.page-jd .jd-study-background{position:absolute;inset:0;overflow:hidden;mask:url(assets/jd-hero-study/background-mask.svg) 0 0/1920px 1304px no-repeat;pointer-events:none}
.page-jd .jd-study-base{position:absolute;left:0;top:0;max-width:none}
.page-jd .jd-study-background-image{position:absolute;left:-141px;top:-12px;width:2192px;height:1399px;max-width:none;object-position:bottom;filter:blur(8px)}
.page-jd .jd-study-shade{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.page-jd .jd-study-divider{position:absolute;left:0;bottom:0;width:1920px;height:12px;background:linear-gradient(to right,rgba(235,240,251,.3) 0 calc(1680px - 451px * var(--metric-ratio)),transparent calc(1680px - 451px * var(--metric-ratio)) calc(1680px - 213px * var(--metric-ratio)),rgba(235,240,251,.3) calc(1680px - 213px * var(--metric-ratio)) calc(1680px - 197px * var(--metric-ratio)),transparent calc(1680px - 197px * var(--metric-ratio)) 1680px,rgba(235,240,251,.3) 1680px)}
.page-jd .jd-study-canvas .hero-fixed-copy{left:236px;top:123px;bottom:auto;width:766px;height:357px}
.page-jd .jd-study-canvas .hero-fixed-copy h1{width:935px;margin:0;font-size:80px;line-height:96px;font-weight:700;color:#fff;white-space:nowrap}
.page-jd .jd-study-title-rule{position:absolute;left:0;top:116px;max-width:none}
.page-jd .jd-study-canvas .case-lead{position:absolute;left:0;top:144px;width:max(766px,calc(560px / var(--study-scale)));margin:0;font-size:max(20px,calc(16px / var(--study-scale)));line-height:1.65;color:#fff}
.page-jd .jd-study-tags{position:absolute;left:0;top:317px;display:flex;gap:8px;width:766px}
.page-jd .jd-study-tags span{height:40px;display:flex;align-items:center;justify-content:center;padding:8px 24px;border:1px solid rgba(255,255,255,.7);border-radius:20px;background:rgba(255,255,255,.4);color:#1b1b1a;font-size:16px;line-height:23px;white-space:nowrap}
.page-jd .jd-study-tags span:nth-child(1){width:197px}.page-jd .jd-study-tags span:nth-child(2){width:122px}.page-jd .jd-study-tags span:nth-child(3){width:120px}.page-jd .jd-study-tags span:nth-child(4){width:115px}.page-jd .jd-study-tags span:nth-child(5){width:96px}
.page-jd .jd-study-canvas .jd-study-logo{position:absolute;left:1528px;top:123px;width:148px;height:80px;margin:0;overflow:hidden}
.page-jd .jd-study-logo-part{position:absolute;max-width:none}
.page-jd .jd-study-scenes{position:absolute;left:-374px;top:336px;width:2392px;height:553px;display:flex;align-items:flex-end;gap:12px}
.page-jd .jd-study-scene-slot{position:relative;flex:none;width:300px;height:300px;overflow:hidden;mask:url(assets/jd-hero-study/scene-mask.svg) 0 0/300px 300px no-repeat}
.page-jd .jd-study-scene-slot>img{position:absolute;left:var(--crop-x);top:var(--crop-y);width:var(--crop-w);height:var(--crop-h);max-width:none}
.page-jd .jd-study-product{position:relative;flex:none;width:208px;height:553px}
.page-jd .jd-study-product::before{content:'';position:absolute;inset:0;border:2px solid #fff;background:rgba(255,255,255,.3)}
.page-jd .jd-study-product-crop{position:absolute;left:9px;top:27px;width:191.111114px;height:500px;overflow:hidden}
.page-jd .jd-study-product-crop>img{position:absolute;left:-93.37%;top:-48.51%;width:282.99%;height:173.07%;max-width:none}
.page-jd .jd-study-outputs{position:absolute;left:-14px;top:904px;width:2172px;height:400px;display:flex;gap:12px}
.page-jd .jd-study-output{flex:none;width:300px;height:400px}
.page-jd .jd-study-output>img{display:block;width:300px;height:400px;max-width:none;object-fit:cover}
/* Preserve the shared entrance lifecycle while centering metrics on the divider. */
.page-jd.jd-hero-study .hero-overlap-layer{--metric-half:clamp(64px,4.166667vw,80px);--divider-half:min(.3125vw,6px);height:calc(var(--metric-half) - var(--divider-half));margin:0 auto;width:min(75vw,1440px)}
.page-jd.jd-hero-study .hero-overlap-layer+.case-sec{margin-top:min(1.666667vw,32px)}
.page-jd.jd-hero-study .case-metrics.hero-overlap{position:absolute!important;inset:auto!important;top:calc(0px - var(--metric-half) - var(--divider-half))!important;right:0!important;width:451px;height:160px;gap:16px;transform:scale(var(--metric-scale));transform-origin:top right}
.page-jd.jd-hero-study .metric-chip{height:160px;padding:16px 24px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.page-jd.jd-hero-study .metric-chip--green{width:238px;background:rgba(36,199,137,.5);border:1px solid #24c789}
.page-jd.jd-hero-study .metric-chip--blue{width:197px;background:rgba(105,152,239,.5);border:1px solid #6998ef}
.page-jd.jd-hero-study .case-metrics .num{position:relative;display:block;flex:none;gap:0;font-family:'Snell Roundhand',cursive;font-weight:900;font-style:normal;font-size:120px;line-height:1;color:#fff;white-space:nowrap;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.page-jd.jd-hero-study .case-metrics .num strong,.page-jd.jd-hero-study .case-metrics .num span{font-family:inherit;font-weight:inherit;font-style:normal;line-height:1}
.page-jd.jd-hero-study .case-metrics .num strong{font-size:120px}
.page-jd.jd-hero-study .case-metrics .num span{font-size:68px}
.page-jd.jd-hero-study .case-metrics .lab{flex:none;gap:0;font-family:var(--sans);font-size:20px;line-height:29px;color:#fff;white-space:nowrap}
.page-jd.jd-hero-study .case-metrics .metric-chip--blue .lab{height:20px;color:#f0f0f0}
.page-jd .case-metrics .lab img{flex:none;width:20px;height:20px}

/* Desktop readability: preserve the image composition while giving compact windows readable copy. */
@media (max-width:1439px){
  .page-jd .jd-study-tags span{height:max(40px,calc(28px / var(--study-scale)));padding-inline:16px;font-size:max(16px,calc(12px / var(--study-scale)))}
}
/* Only the decorative background expands beyond the approved 1920px composition. */
@media (min-width:1921px){
  .page-jd.jd-hero-study .case-hero::before{content:'';position:absolute;inset:-16px -16px auto;height:1336px;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(assets/jd-hero-study/background.webp) center/cover;filter:blur(16px);clip-path:inset(0 0 16px);pointer-events:none}
  .page-jd.jd-hero-study .jd-study-background{mask:linear-gradient(to right,transparent,#000 min(160px,calc((100vw - 1920px)/2)),#000 calc(100% - min(160px,calc((100vw - 1920px)/2))),transparent) 0 0/100% 100% no-repeat,url(assets/jd-hero-study/background-mask.svg) 0 0/1920px 1304px no-repeat;mask-composite:intersect}
}