/* ============ Case drawer (vaul style) ============ */
.drawer-overlay{
  position:fixed;inset:0;z-index:45;background:rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease-vaul);
}
body.drawer-open .drawer-overlay{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;inset:0;z-index:50;overflow-y:scroll;overscroll-behavior:none;
  touch-action:pan-y;
  transform:translate3d(0,100%,0);
  transition:transform .5s var(--ease-vaul),visibility 0s .5s;
  visibility:hidden;
}
.drawer.open{transform:none;visibility:visible;transition:transform .5s var(--ease-vaul),visibility 0s 0s}
/* mouse users drag the drawers to close; keep that from selecting text */
@media(hover:hover) and (pointer:fine){.drawer,.drawer2{user-select:none}}
.drawer-topgap{display:block;height:1.5rem;width:100%}
@media(min-width:640px){.drawer-topgap{height:2rem}}
@media(min-width:1024px){.drawer-topgap{height:2.5rem}}
.drawer-content{position:relative;background:#fff;border-radius:.75rem .75rem 0 0;min-height:100vh}
@media(min-width:768px){.drawer-content{border-radius:1rem 1rem 0 0}}
.drawer-handle{
  position:absolute;top:0;left:0;right:0;z-index:10;height:2.75rem;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.drawer-handle i{display:block;width:32px;height:5px;border-radius:1rem;background:#e2e2e4;opacity:.7}
/* fixed within the viewport so it never scrolls with the case content */
.drawer-closewrap{position:fixed;top:2.5rem;right:1rem;z-index:20;pointer-events:none}
@media(min-width:640px){.drawer-closewrap{top:3rem}}
@media(min-width:768px){.drawer-closewrap{top:4.25rem;right:2.25rem}}
@media(min-width:1024px){.drawer-closewrap{top:4.75rem}}
.drawer-close{
  pointer-events:auto;width:2.25rem;height:2.25rem;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(247,247,247,.7);backdrop-filter:blur(20px);
  transition:transform .2s,background .2s;
}
.drawer-close:hover{transform:scale(1.1);background:rgba(255,255,255,.6)}
.drawer-close svg{width:9px;height:9px;transition:transform .2s}
.drawer-close:hover svg{transform:scale(.8)}

/* ============ Small info drawer (about cards) ============ */
.drawer2{
  position:fixed;inset:0;z-index:50;margin-inline:auto;width:100%;max-width:53rem;
  display:flex;flex-direction:column;padding-top:1.5rem;
  touch-action:pan-y;
  transform:translate3d(0,100%,0);
  transition:transform .5s var(--ease-vaul),visibility 0s .5s;
  visibility:hidden;
}
@media(min-width:640px){.drawer2{padding-top:2rem}}
@media(min-width:1024px){.drawer2{top:auto;max-height:calc(100vh - 5rem);min-height:65vh;padding-top:0}}
.drawer2.open{transform:none;visibility:visible;transition:transform .5s var(--ease-vaul),visibility 0s 0s}
.drawer2-panel{
  position:relative;flex:1;min-height:0;display:flex;flex-direction:column;
  overflow:hidden;border-radius:.75rem .75rem 0 0;background:#fff;
}
@media(min-width:768px){.drawer2-panel{border-radius:1rem 1rem 0 0}}
.drawer2-head{
  position:absolute;top:0;left:0;right:0;z-index:10;height:2.75rem;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
}
.drawer2-head i{display:block;width:32px;height:5px;border-radius:1rem;background:#e2e2e4;opacity:.7}
.drawer2 .drawer-close{position:absolute;top:2rem;right:2rem;z-index:10}
.drawer2-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0}
.drawer2-media{aspect-ratio:2000/1414}
@media(min-width:640px){.drawer2-media{aspect-ratio:2/1}}
.drawer2-body{display:flex;flex-direction:column;gap:2.5rem;padding:2rem 1rem 3rem}
@media(min-width:640px){.drawer2-body{padding:2.5rem 2rem 5rem}}
@media(min-width:768px){.drawer2-body{padding:3rem 6rem 5rem}}
@media(min-width:1024px){.drawer2-body{padding-inline:9rem}}
.drawer2-body h2{font-size:1.25rem;font-weight:500;line-height:1.3}
.drawer2-body h2 .pre{display:block;color:var(--dark-very-subtle)}
.drawer2-body h2 .main{display:block;margin-top:.25rem}
.drawer2-body h3{font-weight:500;margin-bottom:.5rem}
.drawer2-body p{line-height:1.5}

/* case page inside drawer */
.case-hero{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  height:calc(100svh - 6.75rem);padding:1.75rem 1.25rem;color:#fff;
  border-radius:.75rem .75rem 0 0;overflow:hidden;
}
@media(min-width:640px){.case-hero{padding-inline:2.25rem}}
@media(min-width:768px){
  .case-hero{height:85vh;max-height:60rem;min-height:45rem;flex-direction:row;align-items:center;justify-content:space-between}
}
.case-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(0,0,0,.2)}
.case-hero .cofx{position:absolute;inset:0;z-index:-2}
.case-hero-brand{margin:auto 0;display:flex;align-items:center;gap:.5rem;font-size:clamp(1.5rem,2.6vw,2.25rem);font-weight:700;letter-spacing:-.03em}
.case-hero-brand .plus{font-weight:400;opacity:.8}
.case-hero-meta h1{font-weight:500;font-size:1rem}
@media(min-width:768px){.case-hero-meta{text-align:right}}
.case-hero-meta p{margin-top:-.25rem;color:rgba(255,255,255,.5)}
.case-body{display:flex;flex-direction:column;gap:5rem;padding-block:3.75rem}
@media(min-width:768px){.case-body{gap:8rem;padding-block:5rem}}
.cnarrow{width:100%;max-width:46rem;margin-inline:auto}
.case-label{font-family:var(--font-mono);font-size:.8125rem;color:rgba(19,22,28,.8)}
.case-text{margin-top:1rem;line-height:1.3}
.case-text p+p{margin-top:1.5rem}
.case-services{margin-top:.875rem;display:grid;gap:.5rem}
@media(min-width:640px){.case-services{grid-template-columns:repeat(2,1fr)}}
.case-services li{
  position:relative;display:flex;align-items:baseline;gap:.5rem;
  border-bottom:1px solid rgba(0,0,0,.1);padding:.75rem 0;font-size:.9375rem;
}
.case-services li::before{content:"";width:.5rem;height:.5rem;flex-shrink:0;border-radius:50%;background:var(--dark);transform:translateY(-20%)}
.tiles{margin-top:1rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.375rem;font-size:1.25rem}
@media(min-width:768px){.tiles{grid-template-columns:repeat(3,1fr)}}
.tiles li{
  aspect-ratio:1;background:rgba(19,22,28,.05);border-radius:var(--radius);
  display:flex;flex-direction:column;justify-content:flex-end;padding:1.25rem 1rem;line-height:1.2;
}
.tiles li span{color:rgba(19,22,28,.4)}
.case-asset{border-radius:var(--radius);overflow:hidden;position:relative}
.case-asset .fillg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.case-asset .fillg b{color:rgba(255,255,255,.35);font-weight:700;font-size:clamp(1.2rem,2vw,1.8rem);letter-spacing:-.02em}
.asset-grid{display:grid;gap:.375rem}
@media(min-width:768px){.asset-grid{grid-template-columns:repeat(2,1fr)}}
.case-contact{border-radius:var(--radius);background:var(--gray-100)}
@media(min-width:1024px){.case-contact{display:flex;justify-content:space-between;flex-direction:column}}
.case-contact .contact-head{color:var(--dark)}
.case-contact .contact-head h2 .pre{color:var(--dark-very-subtle)}