/* Preview only: the same home link wears an expanded tab or compact wordmark. */
header{position:sticky;top:0;z-index:100;height:100px;background:#111216;overflow:visible;transition:box-shadow .3s}
header .logo{position:relative;overflow:visible;height:auto}
header .studio-wordmark{opacity:0;transform:translateY(-9px);transition:opacity .25s ease,transform .35s ease}
.brand-tab{position:absolute;left:0;top:-50px;width:160px;height:185px;display:flex;align-items:center;justify-content:center;background:#111216;border-bottom:5px solid #32dfcf;border-radius:0 0 18px 18px;box-shadow:0 10px 22px #0003;transform-origin:50% 0;transition:transform .4s cubic-bezier(.22,.7,.2,1),opacity .25s;pointer-events:none}
.brand-tab img{width:153px;height:153px;object-fit:contain}
.header-compact header{box-shadow:0 4px 22px #0004}
.header-compact header .studio-wordmark{opacity:1;transform:translateY(0)}
.header-compact .brand-tab{opacity:0;transform:translateY(-65%) scale(.85)}
header .logo:focus-visible{outline:2px solid #32dfcf;outline-offset:7px}
.studio-hero-home .studio-hero-copy{padding-top:105px}
.prototype-note{position:fixed;bottom:12px;right:12px;z-index:101;padding:8px 12px;border:1px solid #ffffff30;border-radius:30px;background:#111216e8;color:#aaa;font:10px Arial,sans-serif;pointer-events:none}
html{scroll-padding-top:110px}
/* Separate destinations, with a gentle grow-in for the revealed home logo. */
header .header-home{display:block;width:100%}
header a.brand-tab{pointer-events:auto;z-index:2}
.header-compact header a.brand-tab{pointer-events:none}
body[data-page=index] header .studio-wordmark{transform:translateY(-9px) scale(.72);transform-origin:center}
.header-compact body[data-page=index] header .studio-wordmark{transform:translateY(0) scale(1)}
header .header-home:focus-visible,header a.brand-tab:focus-visible{outline:2px solid #32dfcf;outline-offset:7px}
@media(max-width:800px){header{height:80px}header nav{top:79px}.brand-tab{top:-40px;width:124px;height:145px;border-radius:0 0 14px 14px;border-bottom-width:4px}.brand-tab img{width:120px;height:120px}.studio-hero-home .studio-hero-copy{padding-top:99px}html{scroll-padding-top:90px}}
@media(prefers-reduced-motion:reduce){header,header .studio-wordmark,.brand-tab{transition:none}}
/* Keep the sticky bar opaque edge to edge. */
header{margin:0;padding:0 5%}.brand-tab{top:calc(50% - 50px)}@media(max-width:800px){.brand-tab{top:calc(50% - 40px)}}