:root{
  --site-nav-height:64px;
  --site-nav-bg:#0b1018;
  --site-nav-panel:#11151e;
  --site-nav-line:#1d2738;
  --site-nav-text:#eef4fc;
  --site-nav-muted:#9fb0c0;
  --site-nav-accent:#8fb6ff;
  --site-nav-frost:#bdeeff;
  --site-nav-aqua:#7fcdf0;
  --site-nav-ice:#a6e4ff;
  --site-nav-gradient:linear-gradient(135deg,#a6e4ff 0%,#8fb6ff 50%,#c79bff 100%);
  --site-nav-body:"Inter",system-ui,sans-serif;
  --site-nav-mark:"Syncopate",Arial,sans-serif;
  --site-brand-width:82px;
  --site-brand-footer-width:70px;
  --site-brand-ratio:1289/267;
  --site-nav-ease:cubic-bezier(.2,.8,.25,1);
  --site-type-scale:85%;
  --site-nav-tap:44px;
  --site-nav-edge-left:max(20px,env(safe-area-inset-left));
  --site-nav-edge-right:max(20px,env(safe-area-inset-right));
}
html{font-size:var(--site-type-scale)}
img{-webkit-user-drag:none;user-drag:none;-webkit-user-select:none;user-select:none}
.laptop .screen{box-sizing:content-box}
.laptop .screen img,.phone img,.card .media img.shot{object-fit:cover}
.slide .phone{box-sizing:content-box;width:min(220px,calc(70% - 20px))}
.card .media .phone{box-sizing:content-box;height:calc(90% - 10px)}
.laptop img[src*="portal"],.laptop img[src*="workspace"]{background:#05070c}
.laptop img[src*="cardlock"]{background:#08131f}
.laptop img[src*="sign"]{background:#f3f4f8}
.phone img[src*="beanleaf"]{background:#f7f3fb}
.phone img[src*="booking"]{background:#05070c}
.site-top{position:fixed;inset:0 0 auto;z-index:60;padding:0;border-bottom:1px solid transparent;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background .28s,border-color .28s}
.site-top.scrolled{background:color-mix(in srgb,var(--site-nav-bg) 94%,transparent);border-color:var(--site-nav-line)}
.site-top .site-wrap{box-sizing:border-box;max-width:1180px;margin:0 auto;padding-inline:clamp(20px,5vw,72px);display:flex;align-items:center;gap:clamp(11px,1.7vw,24px);height:var(--site-nav-height)}
.site-brand{flex:none;display:block;width:var(--site-brand-width);line-height:0;text-decoration:none;background:none;color:inherit}
.site-brand img{display:block;width:100%;height:auto;aspect-ratio:var(--site-brand-ratio);object-fit:contain}
.site-brand-footer{width:var(--site-brand-footer-width)}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(11px,1.7vw,24px)}
.site-nav a:not(.site-book){position:relative;color:var(--site-nav-text);text-decoration:none;font:500 .95rem/1.2 var(--site-nav-body)}
.site-nav a:not(.site-book)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:var(--site-nav-accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--site-nav-ease)}
.site-nav a:not(.site-book):hover::after{transform:scaleX(1)}
.site-services{position:relative;color:var(--site-nav-text)}
.site-services>summary{display:flex;align-items:center;justify-content:flex-start;gap:.45em;min-height:var(--site-nav-tap);padding:0;list-style:none;cursor:pointer;user-select:none;font:500 .95rem/normal var(--site-nav-body)}
.site-services>summary::-webkit-details-marker{display:none}
.site-services>summary::after{content:"";width:.42em;height:.42em;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-.12em) rotate(45deg);transition:transform .18s var(--site-nav-ease)}
.site-services[open]>summary::after{transform:translateY(.12em) rotate(225deg)}
.site-menu{box-sizing:border-box;position:absolute;top:calc(100% + 16px);right:0;display:grid;width:min(20rem,calc(100vw - var(--site-nav-edge-left) - var(--site-nav-edge-right)));max-height:calc(100dvh - var(--site-nav-height));overflow-y:auto;overscroll-behavior:contain;padding:8px;background:var(--site-nav-panel);border:1px solid var(--site-nav-line);border-radius:10px}
.site-menu a:not(.site-book){padding:.65em .8em;border-radius:6px;color:var(--site-nav-muted);line-height:1.25}
.site-menu a:not(.site-book)::after{display:none}
.site-menu a:not(.site-book):hover,.site-menu a:not(.site-book):focus-visible{color:var(--site-nav-text);background:color-mix(in srgb,var(--site-nav-accent) 10%,transparent)}
.site-book{display:inline-flex;align-items:center;justify-content:center;min-height:var(--site-nav-tap);padding:.6em 1.05em;border-radius:10px;color:var(--site-nav-bg);font:600 .9rem/1 var(--site-nav-body);text-decoration:none;background:linear-gradient(180deg,var(--site-nav-frost),var(--site-nav-aqua));border:1px solid var(--site-nav-ice);box-shadow:0 8px 20px -12px color-mix(in srgb,var(--site-nav-accent) 80%,transparent)}
.site-nav>a:not(.site-book){display:flex;align-items:center;min-height:var(--site-nav-tap)}
.site-nav a:focus-visible,.site-services>summary:focus-visible,.site-brand:focus-visible{outline:2px solid var(--site-nav-accent);outline-offset:3px;border-radius:6px}
@media(max-width:820px){.site-menu{position:fixed;top:var(--site-nav-height);left:var(--site-nav-edge-left);right:auto}}
@media(max-width:900px){.track{touch-action:pan-x pan-y;overscroll-behavior-inline:contain}.track>.slide{flex-basis:calc(100% - 2.5rem);scroll-snap-align:start;scroll-snap-stop:always}.track .slide>.phone{width:min(170px,calc(55vw - 20px))}.slide .tags{flex-wrap:wrap;overflow:visible;padding-right:0;-webkit-mask-image:none;mask-image:none}}
@media(max-width:640px){.site-nav{gap:14px}.site-nav>a.site-hide{display:none}}
@media(max-width:360px){.site-top .site-wrap{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));gap:10px}.site-nav{gap:10px}.site-nav>a[href="/work/"]{display:none}}
@media(prefers-reduced-transparency:reduce){.site-top.scrolled{background:var(--site-nav-bg)}}
@media(prefers-reduced-motion:reduce){.site-top,.site-nav a::after,.site-services>summary::after{transition:none}}