/* Case stories: own work photography, oversized type and direct client credits. */
.c4e-cases,.case-related{background:var(--ink);color:var(--paper);padding:88px 0 45px}
.cases-heading-row{display:flex;justify-content:space-between;align-items:flex-end;gap:70px;margin-bottom:44px}
.cases-heading-row h2{font-size:clamp(49px,5.1vw,76px);line-height:1.02;flex:1}
.cases-heading-row>div,.cases-heading-row>p{max-width:440px;flex:1}
.cases-heading-row p{font-size:17px;line-height:1.75;color:#d4d3cd}
.cases-heading-row .text-link{color:inherit;border-color:currentColor;margin-top:24px;white-space:nowrap}
.cases-heading-row .text-link:hover{color:var(--orange)}
.case-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.case-tile{min-width:0}
.case-tile>a{display:block;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:4/5.2;background:#30332c;color:white}
.case-tile>a:before{content:'';position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,#11171108 26%,#11171160 51%,#111711ee 100%);pointer-events:none}
.case-tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.case-tile-copy{position:absolute;z-index:2;inset:auto 25px 25px}
.case-tile .case-client{font-family:var(--body);font-size:15px;font-weight:650;line-height:1.4;margin-bottom:12px}
.case-tile h3{font-size:clamp(29px,3.05vw,45px);line-height:1.05;max-width:310px}
.case-tile-bottom{display:flex;gap:14px;justify-content:space-between;align-items:center;border-top:1px solid #ffffff60;margin-top:22px;padding-top:16px}
.case-tile-bottom>span{font-size:13px;line-height:1.45;max-width:210px;color:#eee}
.case-tile-bottom i{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;background:var(--orange);color:var(--ink);transition:background .2s}
.case-tile-bottom svg{width:23px;height:23px;transition:transform .25s}
.case-tile>a:hover img,.case-tile>a:focus-visible img{transform:scale(1.04)}
.case-tile>a:hover .case-tile-bottom svg{transform:translateX(3px)}
.case-tile>a:focus-visible{outline:3px solid var(--orange);outline-offset:6px}
.case-photo-note{font-size:13px;line-height:1.6;color:#c2c3bb;margin-top:20px;max-width:760px}
.section .case-photo-note{color:#615e56}
.is-case-page{background:var(--ink)}
.is-case-page .container{max-width:1320px}
.is-case-page .work-ribbon{display:none}
.cases-overview{background:var(--ink);color:var(--paper);padding:18px 0 65px}
.case-breadcrumbs{margin-bottom:44px;font-size:14px;line-height:1.5;color:#c2c3bb}
.case-breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap}
.case-breadcrumbs li{display:flex;gap:10px;align-items:center}
.case-breadcrumbs li+li:before{content:'/';color:#86877f}
.case-breadcrumbs a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.case-breadcrumbs a:hover{color:white}
.overview-heading{align-items:center;margin-bottom:60px}
.overview-heading h1{font-size:clamp(64px,7.2vw,108px);line-height:1.02;flex:1.15}
.overview-heading>p{font-size:18px;line-height:1.8;max-width:400px}
.case-contact{background:var(--orange);color:var(--ink);padding:75px 0}
.case-contact>.container{display:grid;grid-template-columns:1.25fr .75fr;gap:90px;align-items:center}
.case-contact h2{font-size:clamp(44px,4.6vw,67px);line-height:1.04}
.case-contact p{max-width:530px;font-size:17px;line-height:1.75;margin-top:25px}
.case-contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:19px}
.case-contact-actions>.button{margin-bottom:5px}
.case-contact-actions>a:not(.button){display:flex;gap:18px;align-items:center;font-size:16px;font-weight:650;line-height:1.5;max-width:100%}
.case-contact-actions>a:not(.button):hover{text-decoration:underline;text-underline-offset:5px}
.case-contact-actions svg{width:22px;height:22px;flex-shrink:0}
.case-story-hero{background:var(--ink);color:var(--paper);padding:18px 0 55px}
.case-story-opening{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.case-story-heading{padding-bottom:30px}
.case-story-client{font-size:23px;line-height:1.3;margin-bottom:22px;color:var(--orange);font-weight:650}
.case-story-heading h1{font-size:clamp(66px,6.4vw,96px);line-height:1.02;max-width:600px}
.case-story-intro{font-size:19px;line-height:1.8;margin-top:30px;max-width:520px;color:#e4e3dc}
.case-story-heading .text-link{color:var(--paper);border-color:#b5b7ad;margin-top:30px}
.case-story-heading .text-link:hover{color:var(--orange)}
.case-story-opening figure{margin:0;min-width:0}
.case-story-opening img{width:100%;height:570px;object-fit:cover}
.case-story-opening figcaption{font-size:12px;line-height:1.6;color:#b5b7ad;margin-top:12px}
.case-story{background:var(--paper);color:var(--ink);padding:0 0 80px;scroll-margin-top:120px}
.case-fact-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:36px 0;border-bottom:1px solid #c9bdad;margin:0}
.case-fact-strip dt{font-size:13px;color:#625c51;margin-bottom:9px}
.case-fact-strip dd{font-weight:650;font-size:16px;line-height:1.5;margin:0}
.case-story-text{padding:70px 0 0;max-width:1080px;margin:auto}
.case-story-row{display:grid;grid-template-columns:.9fr 1.3fr;gap:85px;margin-bottom:45px}
.case-story-row h2{font-size:clamp(34px,3.2vw,46px);line-height:1.08;max-width:330px}
.case-story-row p{font-size:17px;line-height:1.85;color:#51534d}
.case-service-links{display:grid;grid-template-columns:1fr 1fr;gap:70px;border-top:1px solid #c9bdad;padding-top:36px;margin-top:66px}
.case-service-links h2{font-size:37px;line-height:1.08}
.case-service-links>div{display:flex;flex-direction:column;align-items:flex-start;gap:17px}
.case-service-links a{display:inline-flex;align-items:center;gap:25px;font-size:17px;line-height:1.5;border-bottom:1px solid #a5a194;padding-bottom:5px}
.case-service-links svg{width:22px;height:22px;flex-shrink:0}
.case-related{padding-top:74px;padding-bottom:50px}
.case-related .case-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
.case-related .case-tile>a{aspect-ratio:1.3}
.case-related .case-tile-copy{inset:auto 32px 28px}
.case-related .case-tile h3{font-size:45px;max-width:none}
.case-related .cases-heading-row>a{flex:none}
@media(min-width:1101px) and (max-width:1270px){.site-header #navigation{gap:15px}.nav-shell{gap:18px;padding-inline:20px}.site-header .header-wordmark{width:180px}.site-header .brand-link{padding-right:18px}}
@media(min-width:701px) and (max-width:1100px){
.c4e-cases{padding-top:65px}.case-gallery{gap:17px}.case-tile>a{aspect-ratio:3/5.2}.case-tile-copy{inset:auto 17px 20px}.case-tile h3{font-size:34px}.case-tile .case-client{font-size:14px}.case-tile-bottom{align-items:flex-end;gap:8px}.case-tile-bottom>span{font-size:12px}.case-tile-bottom i{width:32px;height:32px}.cases-heading-row{gap:50px}.cases-heading-row p{font-size:16px}
.case-story-opening{gap:40px}.case-story-opening img{height:560px}.case-story-intro{font-size:17px}.case-story-heading h1{font-size:65px}.case-contact>.container{gap:45px}.case-contact-actions>a:not(.button){font-size:15px}.case-story-row{gap:45px}.case-fact-strip{gap:20px}.case-fact-strip dd{font-size:14px}
}
@media(max-width:700px){
.is-case-page .container{width:calc(100% - 44px)}
.c4e-cases,.case-related{padding:55px 0 32px}
.cases-heading-row{display:block;margin-bottom:30px}
.cases-heading-row h2{font-size:48px;line-height:1.04}
.cases-heading-row>div,.cases-heading-row>p{margin-top:22px;max-width:490px}
.cases-heading-row p{font-size:15px;line-height:1.75}
.cases-heading-row .text-link{font-size:15px;margin-top:22px}
.case-gallery{grid-template-columns:1fr;gap:23px}
.case-tile>a{aspect-ratio:4/4.7}
.case-tile-copy{inset:auto 24px 23px}.case-tile h3{font-size:39px;max-width:270px}
.case-tile .case-client{font-size:15px;margin-bottom:9px}.case-tile-bottom{margin-top:20px;padding-top:13px}.case-tile-bottom>span{font-size:13px}
.case-photo-note{font-size:12px;margin-top:20px;line-height:1.7}
.cases-overview{padding:4px 0 35px}.case-breadcrumbs{font-size:13px;margin-bottom:29px}
.overview-heading{margin-bottom:33px}.overview-heading h1{font-size:60px;line-height:1.03}.overview-heading>p{font-size:16px;margin-top:23px}
.case-contact{padding:50px 0}.case-contact>.container{grid-template-columns:1fr;gap:28px}.case-contact h2{font-size:45px;line-height:1.06}.case-contact p{font-size:15px;line-height:1.8;margin-top:22px}.case-contact-actions{gap:16px}.case-contact-actions>a:not(.button){font-size:15px}
.case-story-hero{padding:4px 0 30px}.case-story-opening{grid-template-columns:1fr;gap:28px}.case-story-heading{padding:0}.case-story-client{font-size:20px;margin-bottom:16px}.case-story-heading h1{font-size:62px;line-height:1.04}.case-story-intro{font-size:16px;line-height:1.8;margin-top:24px}.case-story-heading .text-link{font-size:15px;margin-top:22px}.case-story-opening img{height:390px}.case-story-opening figcaption{font-size:12px}
.case-story{padding-bottom:50px;scroll-margin-top:105px}.case-fact-strip{grid-template-columns:1fr 1fr;padding:28px 0;gap:25px 20px}.case-fact-strip dt{font-size:12px;margin-bottom:7px}.case-fact-strip dd{font-size:14px}
.case-story-text{padding-top:38px}.case-story-row{grid-template-columns:1fr;gap:17px;margin-bottom:34px}.case-story-row h2{font-size:35px;line-height:1.08;max-width:330px}.case-story-row p{font-size:15px;line-height:1.8}
.case-service-links{grid-template-columns:1fr;gap:23px;padding-top:29px;margin-top:37px}.case-service-links h2{font-size:34px}.case-service-links a{font-size:16px}.case-service-links>div{gap:15px}
.case-related .case-gallery{grid-template-columns:1fr}.case-related .case-tile>a{aspect-ratio:4/4.2}.case-related .case-tile-copy{inset:auto 24px 23px}.case-related .case-tile h3{font-size:39px}
}
@media(max-width:370px){.overview-heading h1{font-size:52px}.case-tile-copy{inset:auto 20px 20px}.case-tile h3,.case-related .case-tile h3{font-size:34px}.case-tile .case-client{font-size:14px}.case-tile-bottom>span{font-size:12px}.case-contact h2{font-size:39px}.case-story-heading h1{font-size:55px}.case-contact-actions>a:not(.button){font-size:14px}}
@media(prefers-reduced-motion:reduce){.case-tile img,.case-tile-bottom svg{transition:none}}

/* Multiple real work frames fade in place, with a separate pause control. */
.case-tile{position:relative}
.case-slides{position:absolute;inset:0;overflow:hidden}
.case-slides img[data-photo-slide]{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease,transform .5s ease}
.case-slides img[data-photo-slide].is-current{opacity:1}
.photo-toggle{position:absolute;top:16px;right:16px;z-index:4;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #ffffff75;border-radius:0;color:#fff;background:#171817a8;cursor:pointer;transition:background .2s}
.photo-toggle[hidden]{display:none}
.photo-toggle:hover{background:var(--ink)}
.photo-toggle:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.photo-toggle svg{width:18px;height:18px}
.photo-toggle .photo-play{display:none}
[data-photo-paused="true"] .photo-toggle .photo-pause{display:none}
[data-photo-paused="true"] .photo-toggle .photo-play{display:block}
.case-detail-photos{position:relative;height:570px;background:#30332c}
.cases-overview .case-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}
.cases-overview .case-tile>a{aspect-ratio:1.3}
.cases-overview .case-tile h3{max-width:440px;font-size:46px}
.cases-overview .case-tile-copy{inset:auto 30px 28px}
.case-gallery .case-tile:has([href*="lockerbox"]) .case-tile-bottom>span{max-width:195px}
@media(min-width:701px) and (max-width:1100px){
.case-detail-photos{height:560px}
.cases-overview .case-gallery{gap:22px}
.cases-overview .case-tile>a{aspect-ratio:4/4.6}
.cases-overview .case-tile h3{font-size:39px}
.cases-overview .case-tile-copy{inset:auto 22px 24px}
}
@media(max-width:700px){
.case-detail-photos{height:390px}
.cases-overview .case-gallery{grid-template-columns:1fr;gap:24px}
.cases-overview .case-tile>a{aspect-ratio:4/4.7}
.cases-overview .case-tile h3{font-size:39px}
.cases-overview .case-tile-copy{inset:auto 24px 23px}
.photo-toggle{top:13px;right:13px;width:36px;height:36px}
}
@media(max-width:370px){.cases-overview .case-tile h3{font-size:34px}.cases-overview .case-tile-copy{inset:auto 20px 20px}}
@media(prefers-reduced-motion:reduce){.case-slides img[data-photo-slide]{transition:none}}

.case-gallery-four{grid-template-columns:repeat(2,minmax(0,1fr))}
.section .case-gallery-four .case-tile>a{aspect-ratio:1.3}
@media(max-width:700px){.case-gallery-four{grid-template-columns:1fr}.section .case-gallery-four .case-tile>a{aspect-ratio:4/4.7}}