.featured-cases{padding:65px clamp(90px,calc((100vw - 900px)/2),350px) 75px;background:white}.cases-heading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:52px}.featured-cases .cases-heading h2{font-family:Arial,'Noto Sans TC',sans-serif;font-size:26px;font-weight:600;letter-spacing:1px;line-height:1.4;margin:0}.cases-heading>span{font-size:10px;color:#777;letter-spacing:1.5px}.cases-waterfall{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:5%}.cases-column{display:flex;flex-direction:column;gap:30px}.cases-column:nth-child(2){padding-top:115px}.case-item{min-width:0}.featured-cases .project{margin:0;will-change:transform}.featured-cases .project-image{height:auto;max-height:none;aspect-ratio:4/5;background:#f7f7f7}.featured-cases .case-2 .project-image{aspect-ratio:5/4}.featured-cases .case-3 .project-image{aspect-ratio:4/3}.featured-cases .case-4 .project-image{aspect-ratio:4/5}.featured-cases .project-image img{display:block;width:100%;height:100%;object-fit:cover}.featured-cases .project-caption{border:0;display:flex;flex-direction:column;align-items:center;gap:7px;padding:20px 0 0;text-align:center}.featured-cases .project-caption strong{font-size:15px;font-weight:500}.featured-cases .project-caption>span{font-size:10px;color:#777;text-align:center;letter-spacing:.6px}.featured-cases .open-icon{width:38px;height:38px;font-size:24px;opacity:0;transition:opacity .2s}.featured-cases .project:hover .open-icon,.featured-cases .project:focus-visible .open-icon{opacity:1}.cases-more{display:table;margin:65px auto 0;border-bottom:1px solid #f76200;padding:12px 0;color:#f76200;font-size:14px}@media(max-width:760px){.featured-cases{padding:40px 5% 45px}.cases-heading{margin-bottom:32px}.featured-cases .cases-heading h2{font-size:23px}.cases-heading>span{font-size:8px}.cases-waterfall{grid-template-columns:minmax(0,1fr);gap:10px}.cases-column{display:contents}.case-item{order:var(--case-order)}.featured-cases .open-icon{opacity:1}.cases-more{margin-top:40px}}@media(prefers-reduced-motion:reduce){.featured-cases .project{transform:none!important;will-change:auto}.featured-cases .project-image img{transition:none}}

/* The second section slides over the pinned banner in normal scroll flow. */
.hero-cover-stack{position:relative;isolation:isolate}
.hero-cover-stack>.banner-pin{position:sticky;top:var(--banner-pin-top,96px);z-index:0}
.hero-cover-stack>.featured-cases{position:relative;z-index:1;isolation:isolate;background:#fff;box-shadow:none}
@media(prefers-reduced-motion:reduce){.hero-cover-stack>.banner-pin{position:relative;top:auto}}
/* Reduce each work card to 80% while preserving its image aspect ratio. */
.featured-cases .case-item{width:80%;margin-inline:auto}

/* Work cards retain their layout over the full-width white section. */
.featured-cases .case-5 .project-image{aspect-ratio:4/3}
.featured-cases .case-6 .project-image{aspect-ratio:5/4}
.featured-cases .project{position:relative;isolation:isolate;overflow:visible}

.banner-pinned>.hero{position:relative}.banner-pinned>.ticker{position:relative;background:#fff}

/* The section background now covers the full viewport width. */
/* Bring the two case columns 25px closer together without resizing the cards. */
@media(min-width:761px){
 .cases-column:first-child{transform:translateX(12.5px)}
 .cases-column:nth-child(2){transform:translateX(-12.5px)}
}

/* Image-only featured cases. */
.featured-cases .project-caption{display:none}

/* Keep a white breathing space below the pinned orange panel before the next section covers it. */
.hero-cover-stack>.banner-pin{padding-bottom:64px;background:#fff}
@media(max-width:760px){.hero-cover-stack>.banner-pin{padding-bottom:36px}}

/* Give the pinned statistics 200px more scroll travel before cases cover them. */
.hero-cover-stack>.featured-cases{margin-top:200px}