/* A deliberate, user-started sequence of cases, with one main card and a next-card preview. */
.risks-page .risk-cases.case-highlights{
 --case-card-width:min(1040px,calc(100vw - 88px));
 --case-side:calc((100vw - var(--case-card-width))/2);
 padding:0 0 160px;
 max-width:none;
 margin:0;
 overflow:hidden;
}
.case-highlights .risk-cases-head{
 width:calc(100% - 160px);
 max-width:1280px;
 min-height:48px;
 padding:0;
 margin:0 auto 36px;
 gap:24px;
}
.case-highlights .risk-cases-head h2{flex:1;min-width:0}
.case-highlights .case-highlight-arrows{display:flex;align-items:center;gap:10px;flex:none}
.case-highlights .case-highlight-count{font:500 12px/1.4 Inter,Arial,sans-serif;color:#72828c;margin-right:10px;white-space:nowrap}
.case-highlights .case-highlight-arrows button{
 display:grid;place-items:center;width:44px;height:44px;padding:10px;
 border:1px solid #c8dce5;border-radius:50%;background:white;color:#405869;
 transition:background .25s,border-color .25s;
}
.case-highlights .case-highlight-arrows svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.case-highlights .case-highlight-arrows button:hover{background:#e6f5fb;border-color:#8ecbdf}
.case-highlights .case-highlight-track{
 position:relative;display:flex;align-items:stretch;gap:24px;
 width:100%;padding:4px var(--case-side) 8px;
 overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
 scroll-snap-type:x mandatory;scroll-padding-inline:var(--case-side);
 overscroll-behavior-x:contain;touch-action:pan-x pan-y;
}
.case-highlights .case-highlight-track::-webkit-scrollbar{display:none}
.case-highlights .case-highlight-card{
 flex:0 0 var(--case-card-width);min-width:0;scroll-snap-align:center;scroll-snap-stop:always;
 border-radius:28px;overflow:hidden;isolation:isolate;
 background:linear-gradient(125deg,#f6fbfd,#e2f2f8);
 border:1px solid #d9edf5;
 /* Reuse the six authored risk colours for each card's background and details. */
 background:linear-gradient(125deg,color-mix(in srgb,var(--risk-color) 8%,white),color-mix(in srgb,var(--risk-color) 20%,white));
 border-color:color-mix(in srgb,var(--risk-color) 24%,white);
}
.case-highlights .case-highlight-link{
 position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
 grid-template-rows:auto 1fr auto;column-gap:40px;row-gap:24px;
 min-height:510px;height:100%;padding:48px 52px;
 color:var(--ink);text-decoration:none;
}
.case-highlights .case-highlight-heading{grid-column:1;grid-row:1;min-width:0}
.case-highlights .case-highlight-kicker{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin:0 0 22px;color:var(--case-ink);font-size:15px;font-weight:600;line-height:1.6}
.case-highlights .case-highlight-kicker>span{font:600 12px/1.6 Inter,Arial,sans-serif;letter-spacing:.12em;white-space:nowrap}
.case-highlights .case-highlight-heading h3{margin:0;font-size:clamp(26px,2.2vw,32px);font-weight:600;line-height:1.6;letter-spacing:.025em;text-wrap:pretty;overflow-wrap:anywhere}
.case-highlights .case-highlight-summary{
 grid-column:1;grid-row:2;min-width:0;align-self:start;margin:0;
 display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
 max-height:5.7em;font-size:16px;line-height:1.9;color:#5b6e7a;
}
.case-highlights .case-highlight-visual{
 position:relative;grid-column:2;grid-row:1/4;align-self:center;display:grid;place-items:center;
 min-width:0;width:100%;aspect-ratio:1/1.05;isolation:isolate;mix-blend-mode:multiply;
}
.case-highlights .case-highlight-number{position:absolute;top:0;right:0;font:500 clamp(70px,8vw,110px)/1 Inter,Arial,sans-serif;letter-spacing:-.06em;color:#cae3ee;opacity:.65;z-index:-1}
.case-highlights .case-highlight-number{color:color-mix(in srgb,var(--risk-color) 25%,white)}
.case-highlights .case-highlight-art{width:100%;height:100%;max-height:300px;object-fit:contain;mix-blend-mode:multiply}
.case-highlights .case-highlight-action{grid-column:1;grid-row:3;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:10px;font-size:15px;font-weight:600;color:var(--case-ink)}
.case-highlights .case-highlight-action small{display:block;margin-top:5px;font-size:11px;line-height:1.6;font-weight:400;color:#71848f}
.case-highlights .case-highlight-summary,.case-highlights .case-highlight-action small{color:#506370}
.case-highlights .case-highlight-plus{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:white;border:1px solid #c6e2ee;font-size:27px;font-weight:400;line-height:1;transition:background .25s,rotate .35s}
.case-highlights .case-highlight-plus{border-color:color-mix(in srgb,var(--risk-color) 30%,white)}
.case-highlights .case-highlight-link:hover .case-highlight-plus{background:color-mix(in srgb,var(--risk-color) 14%,white);rotate:90deg}
.case-highlights .case-highlight-control-wrap{min-height:74px;padding-top:26px;display:flex;justify-content:center}
.case-highlights .case-highlight-controls{display:flex;align-items:center;justify-content:center;gap:12px}
.case-highlights .case-highlight-play{display:grid;place-items:center;width:48px;height:48px;padding:12px;flex:none;border:0;border-radius:50%;background:#e7f1f6;color:#315b72;transition:background .25s}
.case-highlights .case-highlight-play:hover{background:#d4eaf4}
.case-highlights .case-highlight-play svg{width:23px;height:23px}
.case-highlights .case-play-icon{fill:currentColor}
.case-highlights .case-pause-icon{display:none;fill:none;stroke:currentColor;stroke-width:3.1;stroke-linecap:round}
.case-highlights[data-case-playing=true] .case-play-icon{display:none}
.case-highlights[data-case-playing=true] .case-pause-icon{display:block}
.case-highlights .case-highlight-segments{display:flex;align-items:center;gap:4px;padding:2px 12px;border-radius:32px;background:#e7f1f6;min-height:48px}
.case-highlights .case-highlight-segment{display:grid;place-items:center;width:30px;height:40px;min-width:0;padding:0;flex:none;border:0;background:none;color:#007da5;transition:width .35s}
.case-highlights .case-highlight-segment.is-current{width:56px}
.case-highlights .case-segment-track{position:relative;display:block;width:8px;height:8px;overflow:hidden;border-radius:8px;background:#97b0bf;transition:width .35s,background .25s}
.case-highlights .is-current .case-segment-track{width:48px;background:#c2dfe9}
.case-highlights .case-segment-fill{display:block;width:100%;height:100%;border-radius:inherit;background:#007da5;transform:scaleX(0);transform-origin:left}
.case-highlights .is-current .case-segment-fill{transform:scaleX(var(--case-progress,0))}
.case-highlights .case-highlight-segment:not(.is-current):hover .case-segment-track{background:#007da5}
.case-highlights [data-case-controls][hidden]{display:none!important}
.case-highlights .case-highlight-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.case-highlights button:focus-visible{outline:3px solid #087aa3;outline-offset:3px}
.case-highlights .case-highlight-link:focus-visible{outline:3px solid #087aa3;outline-offset:-5px;border-radius:28px}
@media(min-width:1001px){
 .case-highlights .case-highlight-visual{grid-row:1/3}
 .case-highlights .case-highlight-action{grid-column:1/-1;padding-right:60px}
 .case-highlights .case-highlight-plus{position:absolute;right:52px;bottom:48px}
}
@media(max-width:1100px){
 .risks-page .risk-cases.case-highlights{padding-bottom:112px}
 .case-highlights .risk-cases-head{width:calc(100% - 80px)}
 .case-highlights .case-highlight-link{padding:36px;column-gap:28px;min-height:490px}
 .case-highlights .case-highlight-heading h3{font-size:27px}
}
@media(min-width:1001px) and (max-width:1100px){
 .case-highlights .case-highlight-plus{right:36px;bottom:36px}
}
@media(max-width:700px){
 .risks-page .risk-cases.case-highlights{--case-card-width:calc(100vw - 72px);padding-bottom:88px}
 .case-highlights .risk-cases-head{width:calc(100% - 40px);margin-bottom:24px;gap:16px}
 .case-highlights .risk-cases-head h2{font-size:20px}
 .case-highlights .case-highlight-count{display:none}
 .case-highlights .case-highlight-arrows{gap:8px}
 .case-highlights .case-highlight-arrows button{width:38px;height:38px;padding:8px}
 .case-highlights .case-highlight-track{gap:16px}
 .case-highlights .case-highlight-card{border-radius:22px}
 .case-highlights .case-highlight-link{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 150px auto;gap:20px;min-height:490px;padding:28px 24px}
 .case-highlights .case-highlight-heading h3{font-size:24px;line-height:1.65}
 .case-highlights .case-highlight-kicker{font-size:14px;gap:5px 10px;margin-bottom:16px}
 .case-highlights .case-highlight-summary{display:none}
 .case-highlights .case-highlight-visual{grid-column:1;grid-row:2;width:min(100%,250px);height:150px;aspect-ratio:auto;justify-self:center}
 .case-highlights .case-highlight-number{font-size:80px;right:8%;top:-8px}
 .case-highlights .case-highlight-art{width:100%;height:150px}
 .case-highlights .case-highlight-action{grid-column:1;grid-row:3;font-size:14px;gap:8px;padding-top:0}
 .case-highlights .case-highlight-action small{font-size:10px}
 .case-highlights .case-highlight-plus{width:38px;height:38px;font-size:24px}
 .case-highlights .case-highlight-control-wrap{padding-top:22px;min-height:66px}
 .case-highlights .case-highlight-controls{gap:8px}
 .case-highlights .case-highlight-play{width:44px;height:44px;padding:11px}
 .case-highlights .case-highlight-segments{padding-inline:10px;gap:3px;min-height:44px}
 .case-highlights .case-highlight-segment{width:25px;height:38px}
 .case-highlights .case-highlight-segment.is-current{width:48px}
 .case-highlights .is-current .case-segment-track{width:42px}
 .case-highlights .case-highlight-link:focus-visible{border-radius:22px}
}
@media(max-width:359px){
 .case-highlights .case-highlight-link{padding:24px 20px;grid-template-rows:auto 132px auto}
 .case-highlights .case-highlight-heading h3{font-size:22px}
 .case-highlights .case-highlight-visual,.case-highlights .case-highlight-art{height:132px}
}
@media(prefers-reduced-motion:reduce){
 .case-highlights .case-highlight-track{scroll-behavior:auto}
 .case-highlights .case-highlight-plus,.case-highlights .case-highlight-segment,.case-highlights .case-segment-track{transition:none}
}
