.project-detail-page{position:relative;isolation:isolate;overflow:hidden;margin-top:0}
.project-header{height:auto;min-height:112px;gap:40px;padding-block:28px;align-items:center}
.project-header nav{flex-wrap:wrap;justify-content:flex-end;gap:14px 24px}
.project-header nav a{white-space:nowrap}
@media(max-width:720px){.project-header{min-height:86px;align-items:center;gap:24px;padding-block:24px}.project-header nav{gap:12px 18px}.project-header nav a{font-size:13px}}
.continuous-sage{position:absolute;z-index:-1;top:0;bottom:0;left:70%;width:29%;background:url('assets/project-sage-strip.svg') center / 100% 100% no-repeat}
.detail-project{position:relative;min-height:680px;padding:70px 0;display:grid;grid-template-columns:29% 36% 35%;column-gap:0;align-items:start;border-bottom:1px solid var(--line)}
.detail-project:last-child{border-bottom:0}
.detail-label{grid-column:1;font-size:12px;letter-spacing:.13em;font-weight:700;margin:0;align-self:start}
.detail-project h2{font-family:var(--heading);font-size:34px;line-height:1.25;letter-spacing:-.02em;font-weight:400;margin:0;overflow-wrap:normal}
.detail-project h3{font-family:var(--heading);font-size:22px;line-height:1.35;font-weight:400;letter-spacing:-.02em;margin:0 0 16px}
.detail-description{font-size:16px;line-height:1.4;font-weight:600}
.detail-description p{margin:0 0 22px}.detail-description p:last-child{margin:0}
.detail-project img{display:block;width:100%;height:auto;object-fit:contain}
.detail-project::before{content:"";position:absolute;left:29%;top:70px;bottom:70px;width:8px;background:url('assets/curved-line.svg') center / 100% 100% no-repeat;pointer-events:none}
.detail-project h2::after{content:"";display:block;height:8px;background:url('assets/curved-horizontal-line.svg?v=2') center / 100% 100% no-repeat;margin-top:18px;margin-left:-24px;width:calc(100% + 24px)}
.infographic-layout{min-height:690px;grid-template-rows:135px 1fr}
.infographic-layout h2{grid-column:2;grid-row:1;padding:60px 20px 0 28px}
.infographic-layout .detail-description{position:relative;grid-column:1;grid-row:2;text-align:right;padding:23px 28px 0 40px;margin-top:32px}
.infographic-layout .detail-description::before{content:"";position:absolute;top:0;left:0;width:calc(100% + 3px);height:8px;background:url('assets/curved-horizontal-line.svg?v=2') center / 100% 100% no-repeat;transform:scaleX(-1)}
.infographic-art{grid-column:2 / 4;grid-row:2;width:78%!important;justify-self:end;margin-top:15px;margin-right:2%}
.magazine-layout{min-height:780px;grid-template-rows:1fr}
.magazine-layout .detail-label{position:absolute;top:70px}
.detail-left{grid-column:1;padding-right:28px;text-align:right;align-self:center}
.detail-left h2::after{margin-left:0;width:calc(100% + 31px);transform:scaleX(-1)}
.detail-left .detail-description{margin-top:20px;padding-left:35px}
.magazine-cover{grid-column:2;width:80%!important;margin:55px auto 0}
.magazine-spreads{grid-column:3;display:grid;gap:12px;width:80%;margin:0 auto}
.poster-layout{min-height:750px;grid-template-rows:270px 1fr}
.poster-layout .detail-label,.model-layout .detail-label{position:absolute;top:70px}
.poster-layout .detail-left{grid-row:1;align-self:end}
.poster-layout .detail-description{grid-column:2;grid-row:1;padding:45px 40px 0 30px}
.poster-after{grid-column:3;grid-row:1 / 3;width:95%!important;margin-left:0}
.poster-before{grid-column:1 / 3;grid-row:2;width:49%!important;margin:42px 0 0 10%}
.comparison-arrow{font-family:Arial,sans-serif;font-size:90px;font-weight:400;line-height:1;color:var(--green)}
.poster-layout .comparison-arrow{position:absolute;left:48%;top:65%}
.poster-layout::before{bottom:auto;height:290px}
.model-layout{min-height:740px;grid-template-rows:290px 1fr}
.model-layout .detail-left{grid-row:1;align-self:end}
.model-layout .detail-description{grid-column:2;grid-row:1;padding:45px 40px 0 30px}
.model-wide{grid-column:1 / 3;grid-row:2;width:77%!important;margin:30px auto 0}
.model-top,.model-bottom{grid-column:3;overflow:hidden;aspect-ratio:1.78;width:95%;}
.model-top{grid-row:1;margin-top:30px}.model-bottom{grid-row:2;margin-top:40px}
.model-top img,.model-bottom img{height:100%;object-fit:cover;object-position:top}
.model-bottom img{object-position:bottom}
.model-layout::before{bottom:auto;height:300px}
.photo-layout{min-height:760px;grid-template-rows:130px 1fr}
.photo-layout h2{grid-column:2;grid-row:1;padding:25px 20px 0 28px}
.photo-layout .detail-description{grid-column:1;grid-row:2;text-align:right;align-self:center;padding:0 28px 0 35px}
.photos-before{grid-column:2;grid-row:2;width:75%;justify-self:end;display:grid;gap:24px;margin-top:25px}
.photos-after{grid-column:3;grid-row:1 / 3;width:86%;justify-self:end;display:grid;gap:24px;margin-top:65px;margin-right:1%}
.photo-layout .comparison-arrow{position:absolute;left:65.5%;top:55%;font-size:74px}
.strategy-layout{min-height:720px;grid-template-rows:150px 1fr}
.strategy-layout h2{grid-column:2 / 4;grid-row:1;padding:28px 0 0 28px;width:75%}
.strategy-layout h2::after{width:calc(65% + 24px)}
.strategy-layout::before{height:145px;bottom:auto}
.strategy-text{grid-column:1 / 3;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:24px 34px;padding:20px 65px 0 0}
.strategy-text p{font-size:16px;line-height:1.45;font-weight:600;margin:0}
.strategy-logo{position:absolute;left:84.5%;top:50%;transform:translate(-50%,-50%);width:23%!important;aspect-ratio:1;object-fit:contain}
@media(min-width:1500px){.detail-project{min-height:730px}.magazine-layout{min-height:850px}.photo-layout{min-height:800px}.strategy-layout{min-height:760px}}
@media(max-width:1100px) and (min-width:721px){.detail-project h2{font-size:27px}.detail-project h3{font-size:20px}.detail-description,.strategy-text p{font-size:14px}.detail-label{font-size:11px}.strategy-text{padding-right:35px;gap:22px}.photo-layout .comparison-arrow{font-size:55px}.detail-left .detail-description,.photo-layout .detail-description{padding-left:10px}.poster-layout .detail-description,.model-layout .detail-description{padding-right:20px}.detail-project{min-height:620px}.strategy-layout{min-height:700px}}
@media(max-width:720px){
.project-detail-page{overflow:hidden}.continuous-sage{left:72%;width:28%}
.detail-project{display:flex;flex-direction:column;gap:24px;padding:40px 0;min-height:0!important;align-items:stretch}
.detail-project::before{display:none}.detail-label,.magazine-layout .detail-label,.poster-layout .detail-label,.model-layout .detail-label{position:static;font-size:11px}
.detail-project h2,.infographic-layout h2,.photo-layout h2,.strategy-layout h2{font-size:clamp(24px,5.5vw,36px);padding:0;width:100%}
.detail-project h2::after{width:75%;height:8px;margin-top:12px;margin-left:0;transform:none}.infographic-layout .detail-description::before{display:none}.detail-left{padding:0;text-align:left;align-self:stretch}
.detail-description,.detail-left .detail-description,.infographic-layout .detail-description,.photo-layout .detail-description,.poster-layout .detail-description,.model-layout .detail-description{padding:0;margin:0;text-align:left;font-size:16px;border:0;max-width:100%}
.detail-left .detail-description{margin-top:22px}
.infographic-art,.magazine-cover,.magazine-spreads,.poster-before,.poster-after,.model-wide,.model-top,.model-bottom,.photos-before,.photos-after{width:100%!important;margin:0;max-width:none}
.magazine-cover{width:75%!important;align-self:center}.magazine-spreads{grid-template-columns:1fr 1fr;gap:12px}.poster-before{width:70%!important;align-self:flex-start}.poster-after{width:80%!important;align-self:flex-end}
.comparison-arrow,.poster-layout .comparison-arrow,.photo-layout .comparison-arrow{position:static;align-self:center;font-size:60px;transform:rotate(90deg);margin:0}
.photos-before,.photos-after{grid-template-columns:1fr;gap:16px}.photo-layout .detail-description{align-self:stretch}
.strategy-text{display:flex;flex-direction:column;padding:0;gap:26px}.strategy-text p{font-size:16px;font-weight:500}.strategy-text h3{font-size:22px}.strategy-logo{position:static;transform:none;width:60%!important;align-self:center}
}