/* Case study pages: compiled from Framer, one tree per breakpoint */
body.case-page{background:rgb(245,245,245);font-family:Poppins,sans-serif;font-weight:300}
.case-page main{overflow-x:clip}
.case-page p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bp{display:none}
@media (min-width:1920px){.bp-d{display:flex}}
@media (min-width:1200px) and (max-width:1919.98px){.bp-l{display:flex}}
@media (min-width:820px) and (max-width:1199.98px){.bp-t{display:flex}}
@media (max-width:819.98px){.bp-p{display:flex}}
.bp img{max-width:none}
.bp a{color:inherit;text-decoration:none}
.anchor{scroll-margin-top:24px}

/* video */
.vid{background:#ddd}
.vid video{display:block}
.vbtn{position:absolute;left:10px;bottom:10px;width:30px;height:30px;border:0;border-radius:50%;background:rgba(255,255,255,.22);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;display:grid;place-items:center;opacity:.85;transition:opacity .2s,background .2s}
.vbtn:hover{opacity:1;background:rgba(255,255,255,.4)}
.vbtn i{display:none}
.vbtn .i-pause{width:10px;height:11px;border-left:3px solid #fff;border-right:3px solid #fff}
.vbtn .i-play{width:0;height:0;border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px}
.vid.playing .i-pause,.vid:not(.playing) .i-play{display:block}

/* header pill (Framer "Work Menu") */
.pill{z-index:30;max-width:350px;background:rgb(230,230,230);border-radius:5px;overflow:hidden;height:50px;transition:height .45s cubic-bezier(.2,.7,.2,1)}
.pill.open{height:330px}
.pill-top{all:unset;box-sizing:border-box;display:flex;align-items:flex-start;width:100%;height:50px;padding:15px 15px 0;cursor:pointer}
.pill-left{display:flex;align-items:center;gap:20px;flex:1;min-width:0}
.logo{color:#231f20;flex:none;display:flex;align-items:center;transition:color .25s}
.logo:hover{color:rgb(64,18,255)}
.logo-svg{display:block;height:17px;width:auto}
.pill-tag{font-weight:300;line-height:1.4;color:rgba(0,0,0,.2);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dots{display:flex;flex-direction:column;justify-content:center;gap:3px;width:18px;height:18px;align-items:center}
.dots i{display:block;width:14px;height:1px;background:rgba(0,0,0,.25);transition:transform .3s,opacity .3s}
.pill.open .dots i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.pill.open .dots i:nth-child(2){opacity:0}
.pill.open .dots i:nth-child(3){transform:translateY(-4px) rotate(-45deg)}
.pill-menu{padding:10px 15px 15px;opacity:0;transition:opacity .3s}
.pill.open .pill-menu{opacity:1}
.pill-menu nav a{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font:300 18px/1.2 Poppins,sans-serif;letter-spacing:-.04em;color:rgba(0,0,0,.8)}
.pill-menu nav em{font:300 11px/1 'Noto Sans',sans-serif;font-style:normal;color:rgba(0,0,0,0);letter-spacing:0;transition:color .2s}
.pill-menu nav a:hover em{color:rgba(0,0,0,.45)}
.pill-menu nav a:hover span{color:rgb(64,18,255)}
.pill-ch{margin-top:14px;padding-top:12px;border-top:1px solid rgba(0,0,0,.06)}
.pill-ch p{font:400 10px/1.4 Poppins,sans-serif;color:rgba(0,0,0,.35);margin-bottom:6px!important;letter-spacing:.04em}
.pill-ch a{display:block;font:400 10px/1.6 Poppins,sans-serif;color:rgba(0,0,0,.7)}
.pill-ch a:hover{color:rgb(64,18,255)}

/* sidebar categories (Framer "Work/Category Selection") */
.cat{display:flex;align-items:center;font-family:'Noto Sans',sans-serif;font-weight:300;letter-spacing:-.06em;line-height:1.2;color:rgba(0,0,0,.5);transition:color .25s}
.cat-i{width:24px;height:24px;display:block;opacity:0;margin-left:-4px;transition:opacity .25s,transform .25s;transform:translateX(-6px)}
.cat-i svg{width:100%;height:100%;padding:5px;box-sizing:border-box}
.cat:hover,.cat.active{color:rgba(0,0,0,.8)}
.cat.active .cat-i,.cat:hover .cat-i{opacity:1;transform:none;color:#000}
.next-case{color:rgba(0,0,0,.8);font:300 30px/1.2 Poppins,sans-serif;letter-spacing:-.06em;transition:opacity .4s}
.next-case:hover{opacity:.5}

/* mobile back button (Framer "Back Work - Mobile") */
.back-m{z-index:30;display:flex;align-items:center;justify-content:center;background:rgb(230,230,230);border-radius:4px;padding:8px;box-sizing:border-box}
.back-m svg{width:100%;height:100%}

/* Case studies: same centered column as the rest of the site */
:root{--col:1280px;--side:max(clamp(20px,5vw,80px),calc((100vw / var(--z,1) - var(--col)) / 2))}
@media (min-width:1920px){:root{--col:1600px}}
@media (min-width:820px){body.case-page:not(.home-f) .bp{padding-left:max(0px,calc(var(--side) - 40px));padding-right:max(0px,calc(var(--side) - 40px));box-sizing:border-box}}

/* Case studies: show every image and video whole, at its own proportions (no cropping) */
body.case-page:not(.home-f) .bp img{position:static!important;width:100%!important;height:auto!important;object-fit:contain!important}
body.case-page:not(.home-f) .bp div:has(> img),
body.case-page:not(.home-f) .bp div:has(img):not(.bp),
body.case-page:not(.home-f) .bp div:has(.vid){height:auto!important;min-height:0!important}
body.case-page:not(.home-f) .bp .vid{height:auto!important;background:none}
body.case-page:not(.home-f) .bp .vid video{position:static!important;display:block;width:100%!important;height:auto!important;object-fit:contain!important}
body.case-page:not(.home-f) .bp .vid video{aspect-ratio:auto}


/* "clip" crops like "hidden" but lets the left column stay fixed (sticky) while the page scrolls */
.bp{overflow:clip!important}