.case-study{--cs-accent:#f35112;max-width:1480px;margin:auto;padding:150px clamp(22px,5vw,80px) 0;color:#e3e0dc}.case-study *{box-sizing:border-box}.cs-editorial{--cs-accent:#7fd5cc}.cs-spatial{--cs-accent:#7cd4e5}.cs-system{--cs-accent:#a8d5ba}.cs-opening-title{padding:24px 0 46px}.case-study h1{font-size:clamp(44px,7.8vw,112px);line-height:1;letter-spacing:-.055em;margin:18px 0;text-transform:uppercase;font-weight:750;overflow-wrap:normal}.cs-subtitle{font-size:clamp(18px,2.5vw,30px);margin:0;color:#b8b7b4}.cs-micro,.cs-label,.cs-facts dt,.cs-figure figcaption,.cs-next small{font-family:monospace;font-size:12px;letter-spacing:.05em;text-transform:uppercase}.cs-micro{color:var(--cs-accent)}.cs-figure{margin:0;min-width:0}.cs-figure button{display:block;width:100%;padding:0;border:0;background:#252525;overflow:hidden;border-radius:6px;cursor:zoom-in}.cs-figure img{display:block;width:100%;height:auto;max-width:none;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.cs-figure figcaption{display:flex;align-items:baseline;gap:16px;padding:15px 0;color:#a8a7a4;line-height:1.5}.cs-figure figcaption span:nth-child(2){flex:1}.cs-figure figcaption span:last-child{color:var(--cs-accent)}.cs-hero button{border-radius:18px}.cs-hero img{max-height:78vh;object-fit:cover}.cs-system .cs-hero img{object-fit:contain;background:#17231f}.cs-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:28px;padding:30px 0;margin:10px 0;border-top:1px solid #ffffff25;border-bottom:1px solid #ffffff25}.cs-facts dt{color:#888;margin-bottom:12px}.cs-facts dd{font-size:14px;line-height:1.6;margin:0}.cs-label{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff25;padding-top:18px;color:var(--cs-accent);margin-bottom:46px}.cs-label span:last-child{color:#888}.cs-premise{padding:65px 0 40px}.cs-premise .cs-label{border-top:0}.cs-caption-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,7vw,120px);align-items:start;margin-bottom:55px}.case-study h2{font-size:clamp(28px,3.7vw,54px);line-height:1.08;letter-spacing:-.035em;margin:0;font-weight:650;text-wrap:balance}.case-study p{line-height:1.7}.cs-caption-pair p,.cs-note p{font-size:17px;color:#bfbcb7;margin:0;max-width:48ch}.cs-moment{padding:65px 0}.cs-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}.cs-note{padding:25px 0}.cs-note p{margin:25px 0}.cs-detail button{aspect-ratio:1;position:relative}.cs-detail img{height:100%;object-fit:cover;object-position:var(--crop-position);width:100%}.cs-editorial .cs-detail img{transform:scale(1.5);transform-origin:15% 48%}.cs-system .cs-detail img{width:200%;height:100%;object-fit:fill;max-width:none}.cs-wide{margin:30px 0 40px}.cs-wide img{max-height:850px;object-fit:contain}.cs-contact,.cs-sequence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:35px;margin-top:45px}.cs-contact{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-contact img{aspect-ratio:1.45;object-fit:contain}.cs-contact figcaption{font-size:11px}.cs-contact figcaption span:last-child{display:none}.cs-spread-reveal{perspective:1200px}.cs-editorial .cs-spread-reveal .cs-figure{transition:transform 1.1s ease;transform:rotateX(0)}.cs-editorial .cs-reveal:not(.cs-entered) .cs-spread-reveal .cs-figure{transform:rotateX(12deg) translateY(25px)}.cs-offset{grid-template-columns:1.2fr .8fr}.cs-offset-reverse{margin-top:90px;grid-template-columns:.8fr 1.2fr;align-items:end}.cs-atmosphere{background:radial-gradient(ellipse at 20% 45%,#7cd4e512,transparent 65%)}.cs-strip{display:flex;gap:25px;overflow-x:auto;scroll-snap-type:x proximity;padding:12px 0 28px;scrollbar-color:var(--cs-accent) #222}.cs-strip .cs-figure{flex:0 0 68%;scroll-snap-align:center}.cs-strip img{aspect-ratio:1.55;object-fit:contain}.cs-midl-field{background:linear-gradient(140deg,#71b79010,transparent 60%)}.cs-archive{margin:40px 0;padding:24px 0;border-block:1px solid #ffffff25}.cs-archive summary{cursor:pointer;display:flex;justify-content:space-between;font-size:18px}.cs-archive summary span{font-family:monospace;font-size:13px;color:var(--cs-accent)}.cs-ending{padding:70px 0 40px;border-top:1px solid #ffffff25}.cs-ending a{font-size:14px;color:#aaa;text-underline-offset:5px}.cs-credit{font-size:14px;color:#aaa}.cs-next{display:flex;align-items:center;gap:28px;width:100%;padding:28px 0;background:none;color:inherit;border:0;text-align:left;cursor:pointer}.cs-next img{width:150px;aspect-ratio:1.4;object-fit:cover;border-radius:8px}.cs-next span{flex:1;min-width:0}.cs-next small{display:block;color:var(--cs-accent);margin-bottom:12px}.cs-next strong{font-size:clamp(24px,3vw,44px);line-height:1.1}.cs-next svg{width:32px}.cs-reveal{opacity:.25;transform:translateY(24px);transition:opacity .85s,transform .85s}.cs-entered{opacity:1;transform:none}.case-study~.project-tcg-section{margin-top:40px!important}.cs-video-tile{margin:30px auto;max-width:1400px;width:100%;position:relative;display:block;border:1px solid #ffffff30;padding:0;background:#171717;color:white;border-radius:18px;overflow:hidden;cursor:pointer}.cs-video-tile img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;opacity:.7}.cs-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #ffffff80;border-radius:50%;width:70px;height:70px;display:grid;place-items:center;background:#2229}.cs-play svg{width:25px;height:25px}.cs-video-tile .image-index{position:absolute;top:18px;left:18px}.cs-video-tile figcaption{position:absolute;bottom:20px;left:25px;font-family:monospace}.cs-video-view{position:absolute;inset:15% 8% 20%;display:grid;place-items:center}.cs-video-view iframe{width:100%;height:100%;max-height:70vh;aspect-ratio:16/9;border:0}.cs-video-view button{width:100%;aspect-ratio:16/9;max-height:65vh;position:relative;border:0;padding:0;background:#111;color:white;cursor:pointer}.cs-video-view img{height:100%;width:100%;object-fit:contain}#lightbox-image[hidden]{display:none!important}#lightbox{touch-action:pan-y}.cs-lightbox-caption{position:absolute;bottom:120px;left:10%;right:10%;text-align:center;font-family:monospace;font-size:13px;pointer-events:none}.cs-video-view[hidden]{display:none}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.cs-figure:not(.cs-detail) button:hover img{transform:scale(1.018)}.cs-next:hover strong{color:var(--cs-accent)}}
@media(max-width:700px){.case-study{padding:110px 22px 0}.cs-opening-title{padding:15px 0 28px}.case-study h1{font-size:clamp(38px,10vw,68px);letter-spacing:-.04em}.cs-hero img{max-height:none;object-fit:contain}.cs-facts{grid-template-columns:1fr 1fr;gap:22px 18px;padding:24px 0}.cs-facts dd{font-size:13px}.cs-caption-pair,.cs-two,.cs-offset,.cs-offset-reverse{grid-template-columns:1fr;gap:26px}.cs-caption-pair{margin-bottom:30px}.cs-note p,.cs-caption-pair p{font-size:16px}.cs-moment{padding:38px 0}.cs-label{margin-bottom:28px;font-size:11px}.cs-premise{padding:30px 0 0}.cs-sequence{grid-template-columns:1fr;gap:22px}.cs-contact{grid-template-columns:1fr 1fr;gap:18px}.cs-contact figcaption span:first-child{display:none}.cs-offset-reverse{margin-top:30px}.cs-strip .cs-figure{flex-basis:88%}.cs-strip{gap:15px}.cs-next{gap:16px}.cs-next img{width:90px}.cs-ending{padding:35px 0}.cs-video-view{inset:18% 4% 23%}.cs-lightbox-caption{bottom:110px;font-size:12px}.cs-figure figcaption{font-size:11px}.cs-reveal{transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){.cs-reveal{opacity:1;transform:none}.case-study *{transition:none!important;animation:none!important}}
#project-detail:has(.case-study){padding-top:0}.case-study .cs-opening{display:block;position:relative;inset:auto;height:auto;width:auto;margin:0;padding:0;border:0;z-index:auto;transform:none;background:none}.case-study .cs-ending{position:relative;inset:auto;width:auto;height:auto;margin:0;padding:70px 0 40px;background:none;color:inherit;display:block;transform:none}.case-study .cs-opening-title h1{position:relative;inset:auto;transform:none}.case-study .cs-moment{scroll-margin-top:110px}

.cs-system .cs-detail button{aspect-ratio:calc(var(--image-ratio) / 2)}

/* Blue Light alone uses a click-to-play film as the project cover. */
#project-dialog .project-hero-film{height:auto;min-height:0;position:relative;aspect-ratio:auto}
.hero-film{width:100%;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#111;position:relative}
.hero-film-poster{display:block;width:100%;height:100%;padding:0;border:0;position:relative;background:#111;color:#eee}
.hero-film-poster>img{width:100%;height:100%;object-fit:cover;display:block}
.hero-film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hero-film .image-index{position:absolute;top:18px;left:18px;bottom:auto}
.project-hero-film #story-origin{position:static}
@media(max-width:700px){.hero-film{border-radius:18px}.hero-film .cs-play{width:52px;height:52px}.hero-film .image-index{font-size:10px;top:12px;left:12px}}