/* Existing commissioned cover art, matched to the subject of each example. */
.case-visual{--case-art:url('../images/residential-home-cover.webp');--case-art-position:right center;--case-art-filter:grayscale(.55) invert(.88);--case-art-opacity:.42;--case-vignette-filter:grayscale(.55) invert(.88);--case-vignette-opacity:.72;--case-frame:#9c804b70}
.case-visual[data-case-theme=protection]{--case-art:url('../images/protection-shield-cover.webp')}
.case-visual[data-case-theme=portfolio]{--case-art:url('../images/btl-portfolio-cover.webp')}
.case-visual[data-case-theme=finance]{--case-art:url('../images/property-finance-blueprint.webp')}
.case-visual[data-case-theme=international]{--case-art:url('../images/international-passport-cover.webp');--case-art-position:center 62%}
.case-visual[data-case-theme=business]{--case-art:url('../images/consultancy-folio-cover.webp')}
[data-theme=dark] .case-visual{--case-art-filter:none;--case-art-opacity:.94;--case-vignette-filter:brightness(1.2);--case-vignette-opacity:1;--case-frame:#d8be8070}
.case-visual-hero,.case-visual-body,.case-visual-teaser{position:relative;isolation:isolate;background:var(--soft)}
.case-visual-hero>.container,.case-visual-body>.container,.case-visual-teaser>.container{position:relative;z-index:1}
.case-visual-hero:before,.case-visual-body:before,.case-visual-teaser:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--case-art) var(--case-art-position)/cover no-repeat;filter:var(--case-art-filter);opacity:var(--case-art-opacity);mask-image:linear-gradient(90deg,transparent 10%,#0003 44%,#000 85%)}
.page-hero.case-visual-hero{padding-block:36px 52px;border-bottom:1px solid var(--case-frame);box-shadow:inset 0 -2px var(--surface)}
.case-visual-hero:after{content:"";position:absolute;inset:13px 18px;z-index:0;pointer-events:none;border:1px solid var(--case-frame);border-radius:14px;box-shadow:inset 0 0 0 5px #aebdcc10,inset 0 0 0 6px #aebdcc30}
.case-visual-hero .breadcrumbs{margin-bottom:32px}
.case-visual-hero .page-hero-grid{gap:clamp(30px,5vw,72px)}
.case-visual-hero .kicker{color:var(--gold)}
.case-visual-hero .at-glance{background:var(--card);border-color:var(--case-frame);box-shadow:0 14px 35px var(--panel-shade);overflow:hidden}
.case-visual-hero .case-preparation{padding:32px}
.case-cover-vignette{position:relative;isolation:isolate;overflow:hidden;background:var(--soft);height:160px;margin:-32px -32px 26px;border-bottom:1px solid var(--case-frame)}
.case-cover-vignette:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--case-art) var(--case-art-position)/auto 255px no-repeat;filter:var(--case-vignette-filter);opacity:var(--case-vignette-opacity)}
.case-cover-vignette:after{content:"";position:absolute;inset:10px;border:1px solid var(--case-frame);border-radius:5px;pointer-events:none}
.case-visual[data-case-theme=international] .case-cover-vignette:before{background-size:cover;background-position:center 52%}
.case-visual-body{background:var(--surface);padding-top:48px}
.case-visual-body:before{width:min(38%,600px);height:850px;max-height:100%;background-size:auto 650px;background-position:right top;mask-image:linear-gradient(180deg,#0009,transparent 94%);opacity:.16}
[data-theme=dark] .case-visual-body:before{opacity:.34}
.case-visual-body .scenario-shell>.notice{background:var(--card);border-color:var(--case-frame)}
.case-visual-body .scenario-content>.scenario{border-top:2px solid var(--case-frame);box-shadow:0 10px 28px var(--panel-shade)}
.case-visual-body .scenario:target{border-color:var(--gold)}
.case-visual-body .scenario-content{background:var(--surface);border-radius:12px}
.case-visual-teaser{border-block:1px solid var(--case-frame)}
.case-visual-teaser:before{height:430px;max-height:100%;background-position:right top;mask-image:linear-gradient(90deg,transparent 20%,#0007 75%,#000)}
.case-visual-teaser .section-heading{padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--case-frame)}
.case-visual-teaser .section-heading>p{padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:10px}
.case-visual-teaser .card{background:var(--card);border-top-color:var(--case-frame)}
.case-visual-category .case-disclosure{border-color:var(--case-frame)}
.case-visual-category .case-disclosure>summary{position:relative;isolation:isolate;background:var(--card);overflow:hidden}
.case-visual-category .case-disclosure>summary:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--case-art) right center/auto 500px no-repeat;filter:var(--case-art-filter);opacity:.12;mask-image:linear-gradient(90deg,transparent 55%,#000)}
[data-theme=dark] .case-visual-category .case-disclosure>summary:before{opacity:.46}
.case-visual-category .category-thumb{border:1px solid var(--case-frame);box-shadow:0 5px 20px var(--panel-shade)}
.case-visual-category .case-disclosure[open]>summary{border-bottom:1px solid var(--case-frame)}
.case-visual-outcome{overflow:hidden;border-color:var(--case-frame)}
.case-visual-outcome .case-cover-vignette{height:105px;margin:-30px -30px 26px}
.case-visual-outcome .case-cover-vignette:before{background-size:auto 260px;background-position:right 68%}
.case-visual-outcome .story-number{top:120px}
@media(max-width:900px){.case-visual-hero .case-cover-vignette{height:140px}.case-visual-hero:before{background-position:70% center}.case-visual-teaser .section-heading>p{max-width:55ch}}
@media(max-width:760px){.case-visual-outcome .case-cover-vignette{margin:-24px -24px 23px}.case-visual-outcome .story-number{top:118px}}
@media(max-width:650px){
 .page-hero.case-visual-hero{padding-block:26px 32px}
 .case-visual-hero:after{inset:8px;border-radius:10px}
 .case-visual-hero:before{mask-image:linear-gradient(180deg,transparent 10%,#0003 48%,#0009);background-size:auto 100%;background-position:right bottom}
 .case-visual-hero .breadcrumbs{margin-bottom:26px}
 .case-visual-hero .at-glance{padding:24px}
 .case-visual-hero .case-cover-vignette{height:145px;margin:-24px -24px 22px}
 .case-visual-body{padding-top:30px}
 .case-visual-body:before{height:600px;background-size:auto 600px;opacity:.12}
 .case-visual-teaser:before{height:310px;opacity:.2;mask-image:linear-gradient(180deg,transparent,#000)}
 .case-visual-teaser .section-heading>p{margin-top:18px;padding:16px}
}
@media print{
 .case-visual-hero,.case-visual-body,.case-visual-teaser{background:#fff!important;border:0;box-shadow:none}
 .case-visual:before,.case-visual:after,.case-cover-vignette,.case-visual-category summary:before{display:none!important}
 .case-visual-outcome .story-number{top:27px}
}