/* Portfolio case study: Figma 140:539. */
.ms-project-detail { background:#fff; color:#000; padding-bottom:clamp(80px,8.54vw,164px); }
.ms-project-detail .ms-wrap { max-width:1280px; width:calc(100% - 48px); }
.ms-project-detail-hero { padding:clamp(64px,5.8854vw,113px) 0 72px; background:#0f0f0f; color:#fff; margin-bottom:64px; }
.ms-project-detail-hero.has-showcase { padding-bottom:clamp(170px,25.52vw,490px); margin-bottom:0; }
.ms-project-detail-hero__meta { display:grid; grid-template-columns:minmax(0,531px) minmax(0,413px); justify-content:space-between; gap:60px; }
.ms-project-detail-hero__title p { margin:0 0 20px; font-size:18px; }
.ms-project-detail-hero__title h1 { margin:0; color:#fff; font-size:clamp(32px,2.7083vw,52px); font-weight:700; line-height:1.22; overflow-wrap:anywhere; }
.ms-project-detail-hero__facts { display:grid; grid-template-columns:86px minmax(0,1fr); gap:22px; align-content:start; margin:0; }
.ms-project-detail-hero__facts dt { font-size:18px; font-weight:500; }
.ms-project-detail-hero__facts dd { margin:0; font-size:clamp(16px,1.1979vw,23px); line-height:1.3; overflow-wrap:anywhere; }
.ms-project-detail-showcase { position:relative; margin-top:clamp(-352px,-18.3333vw,-130px); padding-bottom:clamp(56px,3.49vw,67px); }
.ms-project-detail-showcase__stage { position:relative; width:min(1150px,calc(100% - 48px)); aspect-ratio:1150 / 773; margin:auto; }
.ms-project-detail-showcase__desktop { position:absolute; top:0; left:0; width:90.087%; aspect-ratio:1036 / 710; }
.ms-project-detail-showcase__desktop-device { position:absolute; inset:0; overflow:hidden; }
.ms-project-detail-showcase__desktop-device img { position:absolute; max-width:none; width:131.15%; height:191.19%; left:-10.64%; top:-45.76%; }
.ms-project-detail-showcase__desktop-screen { position:absolute; z-index:2; top:4.0845%; left:2.7992%; width:94.305%; height:91.6901%; overflow:hidden; border-radius:clamp(3px,.573vw,11px); }
.ms-project-detail-showcase__desktop-screen img { display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.ms-project-detail-showcase__desktop-screen.is-figma-crop img { position:absolute; max-width:none; width:300.47%; height:250.57%; left:-129.03%; top:-115.96%; }
.ms-project-detail-showcase__mobile { position:absolute; z-index:3; top:23.5446%; right:0; width:24.9565%; aspect-ratio:287 / 591; }
.ms-project-detail-showcase__mobile-screen { position:absolute; top:1.3536%; left:3.4843%; width:93.7282%; height:97.6311%; object-fit:cover; border-radius:15.33% / 7.62%; }
.ms-project-detail-showcase__mobile-frame { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ms-project-detail-showcase__stage.is-mobile-only { width:min(400px,calc(100% - 48px)); aspect-ratio:287 / 591; }
.ms-project-detail-showcase__stage.is-mobile-only .ms-project-detail-showcase__mobile { top:0; width:100%; }
.ms-project-detail-copy h2 { margin:0 0 30px; color:#000; font-size:clamp(30px,2.7083vw,52px); font-weight:700; line-height:1.22; }
.ms-project-detail-copy__text { color:#484848; font-size:18px; font-weight:500; line-height:1.7778; }
.ms-project-detail-copy__text p { margin:0 0 28px; }
.ms-project-detail-copy__text p:last-child { margin-bottom:0; }
.ms-project-detail-style { display:grid; grid-template-columns:minmax(0,416px) minmax(0,744px); gap:clamp(48px,6.25vw,120px); padding-top:clamp(64px,7.2917vw,140px); }
.ms-project-detail-palette h2,.ms-project-detail-type h2 { margin:0 0 60px; font-size:clamp(28px,1.875vw,36px); font-weight:600; line-height:1.2; }
.ms-project-detail-palette ul { display:grid; gap:24px; list-style:none; margin:0; padding:0; }
.ms-project-detail-palette li { display:grid; grid-template-columns:65px 1fr; column-gap:32px; row-gap:8px; align-items:center; }
.ms-project-detail-palette i { grid-row:span 2; width:65px; height:67px; border-radius:50%; background:var(--swatch); }
.ms-project-detail-palette span { align-self:end; color:#4c4c4c; font-size:20px; }
.ms-project-detail-palette strong { align-self:start; color:#c1c1c1; font-size:20px; font-weight:600; }
.ms-project-detail-type__sample { font-size:clamp(120px,11.2883vw,216.735px); font-weight:600; line-height:1; margin-top:-28px; }
.ms-project-detail-type__body { display:grid; grid-template-columns:115px minmax(0,1fr); gap:36px; margin-top:40px; }
.ms-project-detail-type__body h3 { font-size:32px; margin:0 0 24px; }
.ms-project-detail-type__body p { margin:0 0 14px; font-size:20px; line-height:1.4; }
.ms-project-detail-type__body > div:first-child p:nth-of-type(1) { font-weight:700; }
.ms-project-detail-type__body > div:first-child p:nth-of-type(2) { font-weight:600; }
.ms-project-detail-type__body > div:first-child p:nth-of-type(3) { font-weight:500; }
.ms-project-detail-type__body > div:first-child p:nth-of-type(4) { font-weight:400; }
.ms-project-detail-type__body > div:first-child p:nth-of-type(5) { font-weight:300; }
.ms-project-detail-type__description { padding-top:63px; }
.ms-project-detail-type__description p { color:#3e3e3e; font-size:16px; line-height:1.75; }
.ms-project-detail-did,.ms-project-detail-result { padding-top:clamp(72px,6.25vw,120px); }
.ms-project-detail-did__image { display:block; width:100%; height:auto; aspect-ratio:1280 / 661; object-fit:cover; object-position:50% 3%; margin-top:clamp(40px,4.1667vw,80px); }
.ms-project-detail-before-after { display:grid; grid-template-columns:80px minmax(0,934px) 80px; justify-content:space-between; gap:28px; align-items:center; margin:clamp(64px,7.29vw,140px) auto 0; }
.ms-project-detail-before-after__laptop { position:relative; min-width:0; aspect-ratio:934 / 570; }
.ms-project-detail-before-after__frame { display:block; width:100%; height:100%; pointer-events:none; }
.ms-project-detail-before-after__screens { position:absolute; top:3.6842%; left:9.2077%; width:81.7987%; height:87.193%; overflow:hidden; border-radius:1px; background:#fff; }
.ms-project-detail-before-after__screens > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.ms-comparison-before { clip-path:inset(0 calc(100% - var(--comparison,50%)) 0 0); }
.ms-comparison-divider { position:absolute; top:0; bottom:0; left:var(--comparison,50%); width:1px; background:rgb(255 255 255 / 75%); pointer-events:none; }
.ms-comparison-divider img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:68px; height:68px; max-width:none; }
.ms-comparison-range { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; opacity:0; cursor:ew-resize; touch-action:pan-y; }
.ms-project-detail-before-after__screens:focus-within { outline:3px solid #4632e1; outline-offset:4px; }
.ms-project-detail-before-after__label { justify-self:center; writing-mode:vertical-rl; transform:rotate(180deg); color:transparent; -webkit-text-stroke:1px #6d6d6d; font-size:clamp(40px,4.375vw,84px); font-weight:600; line-height:1; }
.ms-project-detail-visit { display:flex; width:max-content; max-width:100%; align-items:center; gap:0; margin:clamp(60px,10.78vw,207px) auto 0; text-decoration:none; cursor:pointer; }
.ms-project-detail-visit > span:first-child { display:flex; align-items:center; justify-content:center; min-height:62px; padding:16px 44px; border-radius:31px; font-size:20px; font-weight:600; text-transform:uppercase; }
.ms-project-detail-visit__arrow { display:grid; width:62px; height:62px; flex:0 0 62px; place-items:center; border-radius:50%; }
.ms-project-detail-visit > span { background:#000; color:#fff; transition:background-color .25s,color .25s; }
.ms-project-detail-visit__arrow img { width:17px; height:16px; }
.ms-project-detail-visit:hover,.ms-project-detail-visit:focus-visible { transform:none; box-shadow:none; }
.ms-project-detail-visit:hover > span,.ms-project-detail-visit:focus-visible > span { background:#4632e1; color:#fff; }
@media(max-width:900px) {
	.ms-project-detail-hero__meta { grid-template-columns:1fr 1fr; gap:32px; }
	.ms-project-detail-hero__facts { grid-template-columns:65px 1fr; gap:16px; }
	.ms-project-detail-hero__facts dt { font-size:14px; }
	.ms-project-detail-style { grid-template-columns:1fr 1.5fr; gap:36px; }
	.ms-project-detail-type__body { grid-template-columns:1fr; gap:16px; }
	.ms-project-detail-type__description { padding-top:0; }
	.ms-project-detail-before-after { grid-template-columns:36px minmax(0,1fr) 36px; gap:12px; }
	.ms-comparison-divider img { width:68px; height:68px; transform:translate(-50%,-50%) scale(.65); }
}
@media(max-width:600px) {
	.ms-project-detail .ms-wrap { width:calc(100% - 40px); }
	.ms-project-detail-hero__meta { grid-template-columns:1fr; }
	.ms-project-detail-hero.has-showcase { padding-bottom:170px; }
	.ms-project-detail-hero__facts { grid-template-columns:80px 1fr; }
	.ms-project-detail-showcase { margin-top:-130px; }
	.ms-project-detail-showcase__stage { width:calc(100% - 24px); }
	.ms-project-detail-copy__text { font-size:16px; }
	.ms-project-detail-style { grid-template-columns:1fr; gap:56px; }
	.ms-project-detail-palette h2,.ms-project-detail-type h2 { margin-bottom:36px; }
	.ms-project-detail-type__body { grid-template-columns:100px minmax(0,1fr); gap:20px; }
	.ms-project-detail-type__body h3 { font-size:25px; }
	.ms-project-detail-type__body p { font-size:16px; }
	.ms-project-detail-before-after { grid-template-columns:1fr 1fr; gap:16px; }
	.ms-project-detail-before-after__laptop { grid-column:1 / -1; grid-row:1; }
	.ms-project-detail-before-after__label { writing-mode:horizontal-tb; transform:none; font-size:28px; }
	.ms-project-detail-visit > span:first-child { font-size:16px; padding:14px 28px; min-height:54px; }
	.ms-project-detail-visit__arrow { width:54px; height:54px; flex-basis:54px; }
}