/* Project stories: editorial case study sections shared by both locales. */
body.case-reference #main-content .case-story{color:#080d10;background:#fff}
body.case-reference #main-content .case-story__overview{padding:clamp(96px,10.4vw,200px) clamp(16px,2.222vw,43px)}
body.case-reference #main-content .case-story__overview .project-overview{margin:0}
body.case-reference #main-content .case-story__reveal{position:relative;isolation:isolate}
body.case-reference #main-content .case-story__review{position:relative;z-index:1;min-height:clamp(510px,50vw,780px);padding:clamp(80px,8.33vw,160px) clamp(16px,2.222vw,43px);border-radius:80px;background:#080d10;color:#fff}
body.case-reference #main-content .case-story__review-label,body.case-reference #main-content .case-story__label{margin:0 0 18px;color:#697074;font:600 12px/1.3 Matter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase}
body.case-reference #main-content .case-story__review-label{color:#afb6b8}
body.case-reference #main-content .case-story__review h2,body.case-reference #main-content .case-story__section h2{margin:0;max-width:1200px;font:400 clamp(36px,4.72vw,90px)/1.12 'LER Case Display',Matter,Arial,sans-serif;letter-spacing:-.025em}
body.case-reference #main-content .case-story__review h2{color:#fff}
body.case-reference #main-content .case-story__review-body{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:clamp(56px,6vw,115px)}
body.case-reference #main-content .case-story__review-person{font:400 clamp(19px,1.6vw,30px)/1.35 'LER Case Body',Matter,Arial,sans-serif}
body.case-reference #main-content .case-story__review-person strong{display:block;color:#fff;font-weight:500}
body.case-reference #main-content .case-story__review-person span{color:#b1b8ba}
body.case-reference #main-content .case-story__review blockquote{margin:0;color:#fff;font:400 clamp(25px,2.4vw,46px)/1.3 'LER Case Body',Matter,Arial,sans-serif;letter-spacing:-.025em}
body.case-reference #main-content .case-story__review blockquote p{margin:0}
body.case-reference #main-content .case-story__review a{display:inline-block;margin-top:24px;color:#fff;font:600 12px/1.4 Matter,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;text-underline-offset:5px}
body.case-reference #main-content .case-story__section{position:relative;z-index:2;padding:clamp(96px,10.4vw,200px) clamp(16px,2.222vw,43px);background:#fff}
body.case-reference #main-content .case-story__body{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:clamp(48px,5vw,96px);padding-top:28px;border-top:1px solid #e1e3e3}
body.case-reference #main-content .case-story__text{grid-column:2;font:400 clamp(20px,1.6vw,31px)/1.4 'LER Case Body',Matter,Arial,sans-serif;letter-spacing:-.02em}
body.case-reference #main-content .case-story__text p{margin:0 0 16px}
body.case-reference #main-content .case-story__text p:last-child{margin:0}
body.case-reference #main-content .case-story__gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 clamp(16px,2.222vw,43px);background:#fff}
body.case-reference #main-content .case-story__gallery figure{position:relative;overflow:hidden;min-width:0;margin:0;border-radius:12px;background:#f1f1f1;aspect-ratio:4/3}
body.case-reference #main-content .case-story__gallery figure:nth-child(3n+1){grid-column:1/-1;aspect-ratio:16/9}
body.case-reference #main-content .case-story__gallery img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
body.case-reference #main-content .case-story__feature{padding-top:0}
body.case-reference #main-content .case-story__feature figure{grid-column:1/-1;aspect-ratio:16/9}
body.case-reference #main-content .case-story__challenge-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:clamp(48px,5vw,96px) 0 0;padding:0;list-style:none}
body.case-reference #main-content .case-story__challenge-list li{display:flex;flex-direction:column;gap:28px;min-width:0;min-height:270px;padding:clamp(20px,2.2vw,42px);border-radius:12px;background:#f3f3f3}
body.case-reference #main-content .case-story__challenge-list h3{margin:0;font:400 clamp(22px,1.7vw,32px)/1.25 'LER Case Body',Matter,Arial,sans-serif}
body.case-reference #main-content .case-story__challenge-list p{margin:auto 0 0;font:400 clamp(17px,1.25vw,24px)/1.45 'LER Case Body',Matter,Arial,sans-serif}
body.case-reference #main-content .case-story__technologies{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(48px,5vw,96px) 0 0;padding:0;list-style:none}
body.case-reference #main-content .case-story__technologies li{display:flex;align-items:center;gap:12px;padding:18px 22px;border:1px solid #e4e5e5;border-radius:10px;font:500 16px/1.3 Matter,Arial,sans-serif}
body.case-reference #main-content .case-story__technologies img{width:28px;height:28px;object-fit:contain}
@media(min-width:993px) and (prefers-reduced-motion:no-preference){body.case-reference #main-content .case-story__review{position:sticky;top:0}}
@media(max-width:992px){body.case-reference #main-content .case-story__review{border-radius:32px;min-height:0}body.case-reference #main-content .case-story__review-body,body.case-reference #main-content .case-story__body{grid-template-columns:1fr}body.case-reference #main-content .case-story__text{grid-column:1}body.case-reference #main-content .case-story__challenge-list{grid-template-columns:1fr}body.case-reference #main-content .case-story__challenge-list li{min-height:220px}}
@media(max-width:600px){body.case-reference #main-content .case-story__gallery{grid-template-columns:1fr}body.case-reference #main-content .case-story__gallery figure,body.case-reference #main-content .case-story__gallery figure:nth-child(3n+1){grid-column:1;aspect-ratio:4/3}body.case-reference #main-content .case-story__feature figure{aspect-ratio:16/10}}
body.case-reference #main-content .case-story__review-person span{display:block}
body.case-reference #main-content .case-story__review-person a{display:block;width:fit-content}
body.case-reference #main-content .case-story__challenge-list li{gap:18px}
body.case-reference #main-content .case-story__challenge-list p{margin:0}
body.case-reference #main-content .case-story__challenge-label{display:block;margin-top:12px;color:#6e7476;font:600 11px/1.3 Matter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
@media(min-width:601px){body.case-reference #main-content .case-story__gallery:last-child figure:nth-child(n){grid-column:auto;aspect-ratio:4/3}body.case-reference #main-content .case-story__gallery:last-child figure:nth-child(3){grid-column:1/-1;aspect-ratio:16/9}}
@media(prefers-reduced-motion:no-preference){body.case-reference #main-content .case-story__review{position:sticky;top:0}}
body.case-reference #main-content .case-story__review:focus-within{z-index:3}
body.case-reference #main-content .case-story__challenge-list{grid-template-columns:repeat(2,minmax(0,1fr))}
body.case-reference #main-content .case-story__challenge-list li{min-height:clamp(240px,18vw,345px);gap:64px;justify-content:space-between;border:1px solid rgba(8,13,16,.08);background:transparent}
body.case-reference #main-content .case-story__challenge-list li.case-story__solution{border-color:transparent;background:rgba(8,13,16,.04)}
body.case-reference #main-content .case-story__challenge-list h3{font-size:clamp(22px,1.7vw,32px)}
body.case-reference #main-content .case-story__challenge-list p{margin:0}
@media(max-width:767px){body.case-reference #main-content .case-story__challenge-list{grid-template-columns:1fr}body.case-reference #main-content .case-story__challenge-list li{min-height:200px;gap:48px}}

/* Give each project image a visible frame and leave breathing room before the conclusion. */
body.case-reference #main-content .case-story{padding-bottom:clamp(100px,10.4167vw,200px)}
body.case-reference #main-content .case-story__gallery figure{box-sizing:border-box;padding:clamp(10px,1.111vw,20px);border:1px solid #dfe2e3;background:#eef0f1}
body.case-reference #main-content .case-story__gallery img{object-fit:contain;border-radius:5px}

/* Project typography follows the reference scale while retaining LER's fonts. */
body.case-reference #main-content{
 --project-caption-size:14px;--project-tag-size:12px;--project-hero-size:40px;
 --project-title-size:34px;--project-title-leading:1.25;--project-body-size:20px;
 --project-body-leading:1.45;--project-small-body-size:18px;--project-small-title-size:24px;
 --project-quote-size:24px;--project-author-size:18px;--project-role-size:16px;
}
body.case-reference #main-content .case-reference__breadcrumbs,
body.case-reference #main-content :is(.project-overview__eyebrow,.case-story__label,.case-story__review-label,.project-conclusion__eyebrow,.project-cases__eyebrow,.project-case__tags,.project-case__focus-label,.project-case__details dt){font-size:var(--project-caption-size);line-height:1.15;letter-spacing:.15em;font-weight:600}
body.case-reference #main-content .case-reference__breadcrumbs{overflow-wrap:anywhere}
body.case-reference #main-content :is(.cs-hero__eyebrow,.case-reference__simple .showcase-eyebrow,.mc-case__eyebrow){font-size:var(--project-tag-size);line-height:1.15;letter-spacing:.15em;font-weight:600}
body.case-reference #main-content :is(.cs-hero__title,.case-reference__simple .showcase-title,.mc-case__hero h1){max-width:none;font-size:var(--project-hero-size);line-height:1.2;letter-spacing:-.02em;overflow-wrap:break-word}
body.case-reference #main-content :is(.cs-hero,.mc-case__hero) .case-reference__button{font-size:var(--project-caption-size);line-height:1.15;letter-spacing:.15em;font-weight:600}
body.case-reference #main-content :is(.project-overview__title,.case-story__section h2,.case-story__review h2,.project-conclusion__title,.project-cases__title){font-size:var(--project-title-size);line-height:var(--project-title-leading)}
body.case-reference #main-content :is(.project-overview__description,.case-story__text,.project-conclusion__copy p){font-size:var(--project-body-size);line-height:var(--project-body-leading)}
body.case-reference #main-content :is(.project-overview__group dt,.case-story__challenge-list h3,.project-conclusion__card h3){font-size:var(--project-small-title-size);line-height:1.2}
body.case-reference #main-content :is(.project-overview__tags li,.project-case__badge){font-size:var(--project-tag-size);line-height:1.15;letter-spacing:.15em}
body.case-reference #main-content :is(.case-story__challenge-list p,.project-conclusion__card p,.project-case__details dd,.project-case__focus li){font-size:var(--project-small-body-size);line-height:1.45}
body.case-reference #main-content .case-story__review-person{font-size:var(--project-author-size);line-height:1.45}
body.case-reference #main-content .case-story__review-person span{font-size:var(--project-role-size);line-height:1.45}
body.case-reference #main-content .case-story__review blockquote{font-size:var(--project-quote-size);line-height:1.35}
@media(min-width:993px) and (max-width:1180px){body.case-reference #main-content{--project-body-size:23px;--project-body-leading:1.35;--project-quote-size:32px}}
@media(min-width:1181px){
 body.case-reference #main-content{--project-caption-size:.972222vw;--project-tag-size:.833333vw;--project-hero-size:5.555556vw;--project-title-size:4.722222vw;--project-title-leading:1.2;--project-body-size:1.597222vw;--project-body-leading:1.35;--project-small-body-size:1.25vw;--project-small-title-size:1.666667vw;--project-quote-size:2.222222vw;--project-author-size:1.25vw;--project-role-size:1.111111vw}
 body.case-reference #main-content :is(.cs-hero__title,.case-reference__simple .showcase-title,.mc-case__hero h1){line-height:1.1;letter-spacing:-.8px}
 body.case-reference #main-content :is(.project-overview__title,.case-story__section h2,.case-story__review h2,.project-conclusion__title,.project-cases__title){max-width:72.222222vw}
}
body.case-reference #main-content :is(.cs-hero__eyebrow,.case-reference__simple .showcase-eyebrow,.mc-case__eyebrow){box-sizing:border-box;display:inline-flex;align-items:center;max-width:100%;min-height:38px;padding:0 16px}
body.case-reference #main-content :is(.cs-hero,.mc-case__hero) .case-reference__button{min-height:72px;padding-inline:24px;gap:12px}
@media(min-width:1181px){
 body.case-reference #main-content :is(.cs-hero__eyebrow,.case-reference__simple .showcase-eyebrow,.mc-case__eyebrow){min-height:2.638889vw;padding-inline:1.111111vw}
 body.case-reference #main-content :is(.cs-hero,.mc-case__hero) .case-reference__button{min-height:5vw;padding-inline:2.638889vw;gap:1.111111vw}
 body.case-reference #main-content .cs-hero > .page-inner{padding-inline:2.222222vw}
 body.case-reference #main-content .page-section.case-reference__simple{padding-inline:2.222222vw}
 body.case-reference #main-content .mc-case__hero .mc-case__inner{width:calc(100% - 4.444444vw)}
}
@media(max-width:420px){body.case-reference #main-content :is(.cs-hero,.mc-case__hero) .case-reference__button{padding-inline:8px;gap:6px;text-align:center}}
body.case-reference #main-content :is(.project-case__tags,.project-case__focus-label,.project-case__details dt){font-size:var(--project-tag-size);line-height:1.15;letter-spacing:.15em}
body.case-reference #main-content :is(.case-story__review a,.project-case__link,.project-conclusion__live){font-size:var(--project-caption-size);line-height:1.15;letter-spacing:.15em}
body.case-reference #main-content .project-case__heading{font-size:28px}
@media(min-width:1181px){body.case-reference #main-content .project-case__heading{font-size:2.777778vw}}
/* Keep the case hero's spacing proportional to its responsive type. */
@media(max-width:992px){
 body.case-reference #main-content :is(.cs-hero,.page-section.case-reference__simple,.mc-case__hero){padding-top:113px}
 body.case-reference #main-content .case-reference__breadcrumbs{margin-bottom:48px}
}
@media(min-width:993px) and (max-width:1180px){
 body.case-reference #main-content :is(.cs-hero,.page-section.case-reference__simple,.mc-case__hero){padding-top:209px}
 body.case-reference #main-content .case-reference__breadcrumbs{margin-bottom:48px}
}
@media(min-width:1181px){
 body.case-reference #main-content :is(.cs-hero,.page-section.case-reference__simple,.mc-case__hero){padding-top:14.513889vw}
 body.case-reference #main-content .case-reference__breadcrumbs{margin-bottom:3.333333vw}
 body.case-reference #main-content :is(.cs-hero__title,.case-reference__simple .showcase-title,.mc-case__hero h1){margin-top:1.666667vw}
 body.case-reference #main-content :is(.cs-hero,.mc-case__hero) .case-reference__button{margin-top:2.222222vw}
}
@media(max-width:1180px){
 body.case-reference #main-content .case-reference__breadcrumbs{flex-wrap:nowrap;min-width:0;max-width:100%}
 body.case-reference #main-content .case-reference__breadcrumbs > :not([aria-current]){flex-shrink:0}
 body.case-reference #main-content .case-reference__breadcrumbs > [aria-current]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:992px){body.case-reference #main-content :is(.cs-hero__title,.case-reference__simple .showcase-title,.mc-case__hero h1){margin-top:16px}}

/* Three project-specific highlights precede the overview. */
body.case-reference #main-content .case-highlights{padding-inline:clamp(16px,2.222222vw,43px)}
body.case-reference #main-content .case-highlights__list{display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:0;list-style:none}
body.case-reference #main-content .case-highlights__card{display:flex;flex-direction:column;box-sizing:border-box;min-width:0;min-height:240px;padding:20px;border-radius:12px;background:rgba(8,13,16,.04);color:#080d10}
body.case-reference #main-content .case-highlights__card h2{margin:0;color:#080d10;font-size:var(--project-small-title-size,24px);line-height:1.2;letter-spacing:-.025em;font-weight:400;overflow-wrap:break-word}
body.case-reference #main-content .case-highlights__card p{margin:auto 0 0;padding-top:20px;color:#080d10;font:400 var(--project-small-body-size,18px)/1.45 'LER Case Body',Matter,Arial,sans-serif;overflow-wrap:break-word}
@media(min-width:993px){
 body.case-reference #main-content .case-highlights__list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 body.case-reference #main-content .case-highlights__card{min-height:320px;padding:32px}
 body.case-reference #main-content .case-highlights__card p{padding-top:32px}
}
@media(min-width:1181px){
 body.case-reference #main-content .case-highlights__list{gap:.555556vw}
 body.case-reference #main-content .case-highlights__card{min-height:22.222222vw;padding:2.222222vw;border-radius:.833333vw}
 body.case-reference #main-content .case-highlights__card p{padding-top:2.222222vw}
}
/* Match the reference spacing between the hero, highlights and overview. */
body.case-reference #main-content :is(.cs-hero,.page-section.case-reference__simple,.mc-case__hero){padding-bottom:12px}
body.case-reference #main-content .case-story__overview{padding-top:100px}
@media(min-width:993px){
 body.case-reference #main-content :is(.cs-hero,.page-section.case-reference__simple,.mc-case__hero){padding-bottom:60px}
 body.case-reference #main-content .case-story__overview{padding-top:200px}
}
@media(min-width:1181px){
 body.case-reference #main-content :is(.cs-hero,.page-section.case-reference__simple,.mc-case__hero){padding-bottom:4.166667vw}
 body.case-reference #main-content .case-story__overview{padding-top:13.888889vw}
}

/* Full-width multi-device artwork within project galleries. */
body.case-reference #main-content .case-story__gallery figure.case-story__montage{grid-column:1/-1;aspect-ratio:auto;padding:0}
body.case-reference #main-content .case-story__gallery figure.case-story__montage img{width:100%;height:auto;border-radius:0}

/* The review scrolls above the next section; the next section is revealed behind it. */
@media (prefers-reduced-motion:no-preference) {
 body.case-reference #main-content .case-story__reveal::after { content:""; display:block; height:100vh; }
 body.case-reference #main-content .case-story__reveal:focus-within::after { display:none; }
 body.case-reference #main-content .case-story__reveal > .case-story__review {
  position:relative; z-index:2; margin-bottom:-100vh;
 }
 body.case-reference #main-content .case-story__reveal > .case-story__section {
  position:sticky; top:0; z-index:1; margin-bottom:0;
 }
 body.case-reference #main-content .case-story__reveal:focus-within > .case-story__review {
  margin-bottom:0;
 }
 body.case-reference #main-content .case-story__reveal:focus-within > .case-story__section {
  position:relative; margin-bottom:0;
 }
}



/* Avoid creating an unintended sticky scroll container on project pages. */
@media (prefers-reduced-motion:no-preference) {
 html:has(body.case-reference):not(.mobile-nav-open):not(.search-open), body.case-reference:not(.nav-open):not(.search-open) {overflow-x:clip;overflow-y:visible}
 body.case-reference .page-shell.case-page {overflow-x:clip;overflow-y:visible}
}



/* Let the project artwork fill the feature image instead of sitting in a gray mat. */
body.case-reference #main-content .case-story__gallery.case-story__feature figure:nth-child(n) {
 padding:0; border:0; aspect-ratio:auto; background:#101416;
}
body.case-reference #main-content .case-story__gallery.case-story__feature figure > img {
 display:block; width:100%; height:auto; border-radius:0; object-fit:contain;
}
body.case-reference #main-content .case-story__gallery.case-story__feature figure.milam-feature-laptop {
 position:relative; overflow:hidden;
}
body.case-reference #main-content .case-story__gallery.case-story__feature figure.milam-feature-laptop > img.milam-feature-laptop__screen {
 position:absolute; left:12.8%; top:5.1%; width:74.45%; height:74.2%;
 object-fit:cover; object-position:center top; border-radius:0;
}

/* Laptop mockups pair authentic project screens with a reusable, quiet setting. */
body.case-reference #main-content figure.project-laptop {position:relative;overflow:hidden;isolation:isolate}
body.case-reference #main-content figure.project-laptop > img.project-laptop__frame {display:block;width:100%;height:auto;border-radius:0}
body.case-reference #main-content .case-story__feature figure.project-laptop > img.project-laptop__screen,
body.case-reference #main-content figure.case-reference__cover.project-laptop > img.project-laptop__screen {
 position:absolute;left:12.8%;top:5.1%;width:74.45%;height:74.2%;border-radius:0;object-fit:cover;object-position:center top;
}
body.case-reference #main-content figure.project-laptop--warm > img.project-laptop__frame {transform:scale(1.12)}
body.case-reference #main-content .case-story__feature figure.project-laptop--warm > img.project-laptop__screen,
body.case-reference #main-content figure.case-reference__cover.project-laptop--warm > img.project-laptop__screen {
 left:17.1%;top:6.5%;width:65.85%;height:69.4%;
}
body.case-reference #main-content .mc-case__hero figure.mc-case__visual--mockup {padding:0;overflow:hidden}
body.case-reference #main-content .mc-case__hero figure.mc-case__visual--mockup::before {display:none}
body.case-reference #main-content .mc-case__hero figure.mc-case__visual--mockup img {display:block;width:100%;height:auto}
body.case-reference #main-content figure.cs-cover.project-laptop > img.project-laptop__screen {
 position:absolute;left:12.8%;top:5.1%;width:74.45%;height:74.2%;border-radius:0;object-fit:cover;object-position:center top;
}
body.case-reference #main-content figure.cs-cover.project-laptop--warm > img.project-laptop__screen {left:17.1%;top:6.5%;width:65.85%;height:69.4%}