.wordmark{display:inline-flex;align-items:center;gap:9px;flex-shrink:0}
.wordmark .brand-name{font:inherit;letter-spacing:inherit}
.wordmark .brand-domain{font-size:14px;letter-spacing:-.4px;font-weight:500}
.brand-gyroid{position:relative;display:block;width:48px;height:48px;flex:0 0 48px;color:inherit;letter-spacing:normal}
.brand-gyroid::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url('/gyroid-brand-still.svg') center/contain no-repeat;mask:url('/gyroid-brand-still.svg') center/contain no-repeat}
.brand-gyroid.is-ready::before{display:none}
.brand-gyroid canvas{display:block;width:100%;height:100%;pointer-events:none}
.site-header .header-cta{white-space:nowrap}
/* Phones: .eleven-home .site-header{gap:25px} (site-main.css, max-width:1000px) outranks the generic 10px phone gap, and the
   wordmark and header actions cannot shrink, so the header needs 16+156+25+203+16 = 416px. Restore the phone gap below 520px
   and use the compact header up to 400px (it needs about 359px), so 381-415px phones no longer overflow. */
@media(max-width:1100px){.site-header{gap:20px}.site-header nav{gap:18px}}
@media(max-width:520px){.site-header,.eleven-home .site-header{gap:10px}.site-header .wordmark{gap:6px;font-size:17px}.wordmark .brand-domain{font-size:11px}.brand-gyroid{width:34px;height:34px;flex-basis:34px}.site-header .header-cta{font-size:10px;padding-inline:9px;gap:5px}}
@media(max-width:400px){.site-header,.eleven-home .site-header{gap:8px;padding-inline:12px}.site-header .wordmark{font-size:15px;letter-spacing:-.65px;gap:5px}.wordmark .brand-domain{font-size:10px}.brand-gyroid{width:28px;height:28px;flex-basis:28px}.site-header .header-cta{padding-inline:7px}.site-header .header-cta>span{display:none}.site-header .theme-toggle{width:28px}.site-header .mobile-toggle{width:25px}}