:root{--portfolio-media-radius:14px}
/* The same navigation as homepage V2, on the original gray paper texture. */
.detail-site-header{position:relative;width:100%;background:#fff url("assets/paper-texture-2x.jpg") center top/cover no-repeat;color:#161512;font-family:"SF Pro Display","Avenir Next","Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.detail-site-header .hero-nav{box-sizing:border-box;position:relative;width:calc(100% - 40px);max-width:960px;margin:0 auto;padding:28px 0 22px;display:flex;align-items:center;justify-content:space-between;gap:20px;border:0;box-shadow:none}
.detail-site-header a{color:inherit;text-decoration:none;transition:opacity 160ms ease}
.detail-site-header a:hover{opacity:.65}
.detail-site-header a:focus-visible{outline:2px solid #002d29;outline-offset:6px}
.detail-site-header .hero-brand{display:inline-flex;align-items:center;gap:14px;font-family:inherit;font-size:12px;font-weight:700;line-height:normal;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.detail-site-header .hero-mark{display:block;width:28px;height:28px;object-fit:contain;flex:none}
.detail-site-header .hero-nav-links{display:flex;align-items:center;gap:26px;font-size:12px;font-weight:600;line-height:normal;letter-spacing:.07em;text-transform:uppercase}
.detail-site-header .hero-contact{padding:10px 14px;background:#002d29;color:#fff;border-radius:7px}
/* Hide the original Framer navigation including its reserved height, also after hydration. */
.framer-eDqFZ .framer-zhymga-container,
.framer-sKdny .framer-1dupg9u-container,
.framer-4JGOJ .framer-1jrc7tv-container{display:none!important}
@media(max-width:767px){
 .detail-site-header .hero-nav{width:calc(100% - 40px);align-items:flex-start;gap:16px;padding:22px 0 16px}
 .detail-site-header .hero-brand{font-size:10px;gap:8px}
 .detail-site-header .hero-mark{width:22px;height:22px}
 .detail-site-header .hero-nav-links{gap:8px;font-size:10px;flex-wrap:nowrap;justify-content:flex-end;max-width:none}
 .detail-site-header .hero-contact{padding:0;background:transparent;color:inherit;border-radius:0}
}
@media(max-width:767px){
 .detail-site-header .hero-nav{align-items:center;padding-top:14px;padding-bottom:8px}
 .detail-site-header .hero-nav a{display:inline-flex;align-items:center;min-height:44px}
}

/* Keep navigation at identical viewport coordinates on home and case studies. */
.hero-v2{padding-top:0}
.hero-v2 .hero-nav,.detail-site-header .hero-nav{
 box-sizing:border-box;width:min(960px,calc(100vw - 40px));max-width:none;
 display:flex;align-items:center;justify-content:space-between;gap:20px;
 padding:28px 0 22px;font-family:"SF Pro Display","Avenir Next","Segoe UI",sans-serif;line-height:1.25;
}
.hero-v2 .hero-nav{left:50%;transform:translateX(-50%);margin-left:0;margin-right:0}
.hero-v2 .hero-brand,.detail-site-header .hero-brand{gap:14px;font-size:12px;font-weight:700;line-height:1.25;letter-spacing:.07em;white-space:nowrap;min-height:0}
.hero-v2 .hero-mark,.detail-site-header .hero-mark{width:28px;height:28px;flex:none}
.hero-v2 .hero-nav-links,.detail-site-header .hero-nav-links{gap:26px;font-size:12px;font-weight:600;line-height:1.25;letter-spacing:.07em;flex-wrap:nowrap;max-width:none}
.hero-v2 .hero-contact,.detail-site-header .hero-contact{padding:10px 14px;background:#002d29;color:#fff;border-radius:7px}
@media(max-width:900px){
 .hero-v2 .hero-nav,.detail-site-header .hero-nav{padding:14px 0 8px;gap:12px}
 .hero-v2 .hero-brand,.detail-site-header .hero-brand{font-size:10px;gap:8px}
 .hero-v2 .hero-mark,.detail-site-header .hero-mark{width:22px;height:22px}
 .hero-v2 .hero-nav-links,.detail-site-header .hero-nav-links{gap:8px;font-size:10px}
 .hero-v2 .hero-nav a,.detail-site-header .hero-nav a{display:inline-flex;align-items:center;min-height:44px}
 .hero-v2 .hero-contact,.detail-site-header .hero-contact{padding:0;background:transparent;color:inherit;border-radius:0}
}