/* V21 — a quieter transition, white print captions, and consistent button states. */
.brand-hero+.hero .portfolio-heading{padding-top:clamp(144px,11vw,192px);padding-bottom:80px}

/* V25: edge-to-edge artwork with a white caption below. More perspectives keeps its V20 styling. */
.roller--detail .roller-item{display:flex;align-items:stretch}
.roller--detail .hero-panel,.roller--detail .work-card>a{display:flex;flex-direction:column;width:100%;height:100%;background:#fff;color:var(--brown);padding:0!important}
.roller--detail .work-card{width:100%;height:100%}
.roller--detail .hero-panel-caption,.roller--detail .card-caption{display:block;flex:1;min-height:112px;padding:18px 20px 22px;background:#fff;color:var(--brown);--muted:#706a63}
.roller--detail .hero-panel-caption>span{display:block;font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.roller--detail .hero-panel-caption b{display:block;font-size:15px;font-weight:500;margin:0 0 3px;line-height:1.5}
.roller--detail .hero-panel-caption>span:last-child{font-size:10px;line-height:1.6;white-space:normal;margin-top:9px;padding:0;color:#706a63}
.roller--detail .card-caption h3{font-size:15px;font-weight:500;line-height:1.5;overflow-wrap:anywhere;transform:none!important}
.roller--detail .card-caption h3>span{font-size:12px;font-weight:400;line-height:1.65;margin-top:3px;color:var(--brown)}
.roller--detail .card-meta{display:block;font-size:10px;line-height:1.6;margin-top:9px;padding:0;color:#706a63;white-space:normal}

/* Larger dots and a fine underline, without moving the label or English subtitle. */
.studio-capability h3::before,.studio-case-link b::before{width:12px;height:12px;left:-25px;top:.43em}
.studio-capability:is(:hover,:focus-visible) .studio-capability-name,.studio-case-link:is(:hover,:focus-visible) b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}

/* One hover color per background context for every outlined pill button. */
:root{--pill-hover-bg:var(--accent-sage)}
body.ink{--pill-hover-bg:var(--accent-sand)}
:is(.light-panel,.svc-page,.brand-hero,.work-index,.page-intro,.contact-layout,.studio-chapter){--pill-hover-bg:var(--accent-sage)}
:is(.dark-zone,.studio-team,.menu,.svc-deliverables){--pill-hover-bg:var(--accent-sand)}
body .pill:is(:hover,:focus-visible),body .light-panel .pill:is(:hover,:focus-visible){background:var(--pill-hover-bg);border-color:var(--pill-hover-bg);color:var(--accent-ink)}

/* Preserve the previous branding layout, including its compact five-logo gallery. */
.brand-example h3{overflow-wrap:anywhere}
@media(min-width:701px) and (max-width:1000px){
 .brand-hero+.hero .portfolio-heading{padding-top:128px;padding-bottom:64px}
}
@media(max-width:700px){
 .brand-hero+.hero .portfolio-heading{padding-top:108px;padding-bottom:50px}
 .roller--detail .hero-panel-caption,.roller--detail .card-caption{padding:16px 16px 20px;min-height:112px}
 .roller--detail .hero-panel-caption b,.roller--detail .card-caption h3{font-size:15px}
 .studio-capability h3::before,.studio-case-link b::before{width:10px;height:10px;left:-17px;top:.49em}
}