/* Project case studies: editorial rhythm shared across the existing case templates. */
@font-face{font-family:'LER Case Body';src:url('/assets/fonts/ler-approach/LERApproach-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'LER Case Display';src:url('/assets/fonts/ler-display-v2/LERDisplay-Regular.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
body.case-reference #main-content :is(h1,h2,h3,.cs-next-name){font-family:'LER Case Display',Matter,Arial,sans-serif}
body.case-reference #main-content :is(.cs-copy p,.cs-facts dd,.cs-card p,.cs-card li,.cs-caption,.mc-case__copy p){font-family:'LER Case Body',Matter,Arial,sans-serif}

/* The overview reads as an editorial introduction with project facts beside it. */
body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px clamp(32px,3vw,58px);margin-top:clamp(100px,13vw,190px);padding-top:32px}
body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts__item{grid-column:2;display:block;min-width:0}
body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts__item--overview{grid-column:1;grid-row:1 / span 4;padding-right:clamp(10px,3vw,55px)}
body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts dt{margin:0 0 12px;color:#080d10;font:400 clamp(20px,1.6vw,25px)/1.25 'LER Case Body',Arial,sans-serif;letter-spacing:-.02em;text-transform:none}
body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts__item--overview dt{margin-bottom:24px;color:#697174;font:600 12px/1.3 Matter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts dd{margin:0 0 24px;color:#080d10;font:400 17px/1.45 'LER Case Body',Arial,sans-serif}
body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts dd:last-child{margin-bottom:0}
body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts__item--overview dd{max-width:18ch;font:400 clamp(30px,3vw,47px)/1.2 'LER Case Display',Matter,Arial,sans-serif;letter-spacing:-.025em}
body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts ul{display:flex;flex-wrap:wrap;gap:8px 18px}
body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts li{line-height:1.45}

/* Project screens should be large enough to read, with a steady image rhythm. */
body.case-reference .cs-band--gallery .cs-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,4vw,64px) 16px;columns:auto}
body.case-reference .cs-band--gallery .cs-gallery-item{min-width:0;margin:0}
body.case-reference .cs-band--gallery .cs-gallery-item:first-child{grid-column:1 / -1}
body.case-reference .cs-band--gallery .cs-gallery-figure{height:100%}
body.case-reference .cs-band--gallery .cs-frame{overflow:hidden;border-radius:12px}
body.case-reference .cs-band--gallery .cs-gallery-item:first-child .cs-frame{aspect-ratio:16 / 9 !important}
body.case-reference .cs-band--gallery .cs-frame img{width:100%;height:100%;object-fit:cover}
body.case-reference .cs-band--gallery .cs-caption{margin-top:12px;line-height:1.45}
body.case-reference .cs-collage{overflow:hidden;border-radius:12px}
body.case-reference .cs-band--details .cs-cards{gap:0 16px}
body.case-reference .cs-band--details .cs-cards > .cs-cards-item:nth-child(-n+3) .cs-card{background:transparent}
body.case-reference .cs-band--details .cs-cards > .cs-cards-item:nth-child(n+4){margin-top:16px}
body.case-reference .cs-band--outcome .cs-intro{clip-path:none}

/* Make the next case a clear, image-led continuation. */
body.case-reference .cs-next{border:0;border-radius:12px;background:#f3f4f4;overflow:hidden}
body.case-reference .cs-next-shot{border-radius:8px}
body.case-reference .cs-next:focus-visible{outline:3px solid var(--orange,#dd3d06);outline-offset:4px}
body.case-reference .mc-case__related:focus-visible{outline:3px solid var(--orange,#dd3d06);outline-offset:4px}
@media (max-width:992px){
 body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts{grid-template-columns:1fr;gap:28px;margin-top:80px}
 body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts__item,body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts__item--overview{grid-column:1;grid-row:auto;padding:0}
 body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts__item--overview{margin-bottom:12px}
 body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts__item--overview dd{max-width:25ch;font-size:clamp(28px,5vw,38px)}
 body.case-reference .cs-band--gallery .cs-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
 body.case-reference .cs-band--gallery .cs-gallery{grid-template-columns:1fr;gap:32px}
 body.case-reference .cs-band--gallery .cs-gallery-item:first-child{grid-column:auto}
 body.case-reference .cs-band--gallery .cs-gallery-item:first-child .cs-frame{aspect-ratio:auto !important}
 body.case-reference .cs-band--gallery .cs-gallery-item:first-child .cs-frame img{height:auto}
 body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts__item--overview dd{font-size:28px;line-height:1.25}
 body.case-reference :is(.cs-hero,.case-reference__simple) .cs-facts dt{font-size:20px}
}
@media (prefers-reduced-motion:reduce){body.case-reference .cs-next,body.case-reference .cs-next-shot img,body.case-reference .cs-next-arrow{transition:none}}
/* The dashboard case has a custom hero; align its introduction with the other cases. */
@media (min-width:993px){
 body.case-reference .mc-case__hero .mc-case__inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,3vw,58px);align-items:start}
 body.case-reference .mc-case__hero .mc-case__inner > :is(.case-reference__breadcrumbs,.mc-case__eyebrow,h1,.case-reference__button,.mc-case__visual){grid-column:1 / -1;justify-self:start}
 body.case-reference .mc-case__hero .mc-case__visual{grid-row:auto;justify-self:stretch}
 body.case-reference .mc-case__hero .mc-case__lead{grid-column:1;margin-top:clamp(100px,13vw,190px);padding-top:32px;border-top:1px solid #daddde;font:400 clamp(30px,3vw,47px)/1.2 'LER Case Display',Matter,Arial,sans-serif;letter-spacing:-.025em;color:#080d10}
 body.case-reference .mc-case__hero .mc-case__facts{grid-column:2;align-content:start;margin-top:clamp(100px,13vw,190px);padding-top:32px;border-top:1px solid #daddde}
}
body.case-reference .mc-case__hero .mc-case__facts li{border:0;padding:0;min-width:0;color:#080d10;font:400 17px/1.45 'LER Case Body',Arial,sans-serif}
@media (max-width:992px){body.case-reference .mc-case__hero .mc-case__lead{margin-top:80px;padding-top:32px;border-top:1px solid #daddde;font:400 clamp(28px,5vw,38px)/1.25 'LER Case Display',Matter,Arial,sans-serif;color:#080d10}body.case-reference .mc-case__hero .mc-case__facts{gap:12px 18px;margin-top:32px}}
/* At tablet and phone widths, keep the primary case action as easy to tap as the reference. */
@media (max-width:992px){
 body.case-reference :is(.cs-hero,.mc-case__hero) .case-reference__button{width:100%;justify-content:center}
 body.case-reference .case-reference__simple .page-actions{width:100%;flex-direction:column;align-items:stretch}
 body.case-reference .case-reference__simple .page-actions a{width:100%;justify-content:center}
 body.case-reference :is(.case-reference__cover,.case-reference__simple .cs-cover,.mc-case__hero .mc-case__visual){margin-top:70px}
}