@import url('./case-study-reference.css');
/* Popup styles for the final selected case study layout. */
.cs-stat{display:block;min-width:0}.cs-stat strong{display:block;font:600 40px/1 var(--display);white-space:nowrap}.cs-stat>span{display:block;font:9px/1.7 var(--mono);margin-top:10px;color:#a6b098}
.case-study-dialog{width:min(1160px,95vw);padding:30px 4%;background:#171a14;max-height:94dvh}
.case-study-dialog .dialog-top{position:sticky;top:-30px;z-index:3;padding:20px 0;background:#171a14;border-bottom:1px solid #414735;margin-bottom:38px}
.cs-detail-hero .eyebrow{color:var(--accent);font-size:10px}
.case-study-dialog .cs-detail-hero h2{font:700 clamp(48px,7vw,100px)/.92 var(--display);letter-spacing:-1px;max-width:800px;margin:24px 0}
.cs-detail-hero>p{font:italic clamp(20px,3vw,35px)/1.35 Georgia,serif;color:#c4c9b6;margin:0}
.cs-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:36px 0 50px;border-top:1px solid #414735;border-bottom:1px solid #414735;padding:28px 0}
.cs-detail-stats .cs-stat strong{font-size:clamp(30px,5vw,65px);color:var(--accent)}
.cs-detail-stats .cs-stat>span{font-size:10px}
.cs-story{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.cs-story article{display:flex;gap:22px;padding:30px 0;border-top:1px solid #414735}
.cs-story-number{font:11px var(--mono);color:#7f8b68;padding-top:4px}
.cs-story h3{font:11px var(--mono);letter-spacing:1px;color:var(--accent);margin:0 0 18px}
.cs-story p{font:16px/1.8 var(--body);color:#d1d4c9;margin:0}
.cs-story .cs-result{background:var(--accent);color:var(--black);padding:28px 24px;margin:0 0 10px;border:0}
.cs-story .cs-result h3,.cs-story .cs-result p,.cs-story .cs-result .cs-story-number{color:var(--black)}
.case-study-dialog .cs-detail-cta{display:flex;justify-content:space-between;gap:20px;font:12px var(--mono);padding:25px 0;color:var(--paper)}
.case-study-dialog .cs-detail-cta span{font-size:26px}

@media(max-width:700px){.cs-pin-stage{gap:24px}.cs-intro{align-items:flex-start}.cs-intro h2{font-size:11vw;max-width:230px;line-height:1.04}.cs-intro h2 em{display:block;margin-top:5px}.cs-scroll-cue{font-size:7px;white-space:normal;max-width:65px;text-align:right;margin-top:8px}.cs-scroll-cue>span{display:block;margin-top:8px}.cs-intro .eyebrow{font-size:8px}.cs-grid{height:clamp(360px,50svh,460px)}.cs-card{width:91%;height:59%;padding:20px}.cs-card-1{left:0;top:0}.cs-card-2{right:0;top:41%}.cs-card-meta{top:20px;left:20px;font-size:8px}.cs-card-action{top:14px;right:14px;width:42px;height:42px}.cs-arrow-roll{inset:7px;font-size:24px;line-height:28px}.cs-card-copy{left:20px;right:14px;bottom:48px}.cs-name{font-size:24px;max-width:92%;letter-spacing:-.8px}.cs-category{font-size:7px;margin-bottom:7px;max-width:85%;letter-spacing:.5px}.cs-statement{font-size:10px;margin-top:7px;max-width:88%}.cs-card-footer{bottom:18px;left:20px;font-size:7px}.cs-section-note{font-size:7px}.cs-section-note>span:last-child{white-space:nowrap}.case-study-dialog{padding:20px;max-height:94dvh}.case-study-dialog .dialog-top{top:-20px;margin-bottom:25px}.cs-detail-stats{gap:12px;margin-bottom:30px;grid-template-columns:1.5fr .8fr 1fr}.cs-detail-stats .cs-stat strong{font-size:30px}.cs-detail-stats .cs-stat:first-child strong{font-size:26px}.cs-detail-stats .cs-stat>span{font-size:8px}.cs-story{grid-template-columns:1fr;gap:0}.cs-story article{padding:24px 0;gap:16px}.cs-story p{font-size:15px}.cs-story .cs-result{padding:24px 18px}.case-study-dialog .cs-detail-hero h2{font-size:52px}.cs-detail-cta{font-size:10px!important}}
@media(max-width:360px){.cs-name{font-size:21px}.cs-detail-stats .cs-stat strong{font-size:25px}.cs-detail-stats .cs-stat:first-child strong{font-size:22px}}
@media(max-height:680px) and (min-width:701px){.cs-pin-stage{gap:18px}.cs-intro h2{font-size:42px}.cs-grid{height:320px}.cs-name{font-size:26px}.cs-card-copy{bottom:53px}.cs-statement{margin-top:8px}}
@media(max-height:700px) and (max-width:700px){.cs-pin-stage{gap:16px}.cs-grid{height:340px}.cs-intro h2{font-size:32px}.cs-card-copy{bottom:40px}.cs-name{font-size:21px}.cs-statement{font-size:9px}.cs-card-footer{bottom:14px}}

@media(max-width:700px){.cs-card-1 .cs-card-copy{bottom:100px}.cs-card-1 .cs-card-footer{display:none}}
@media(max-height:700px) and (max-width:700px){.cs-card-1 .cs-card-copy{bottom:80px}}