/* Vector contours from the selected concept, with independent motion layers. */
.brand{display:flex;flex:0 0 auto;gap:0;text-decoration:none;user-select:none;-webkit-user-select:none;color:var(--ink)}
.brand .brand-lockup{display:block;width:166px;height:auto;aspect-ratio:1260/497;overflow:visible;fill:currentColor;flex:none}
.brand:focus-visible{outline:2px solid var(--accent-ink);outline-offset:7px;border-radius:4px}
.brand:active .brand-lockup{scale:.98}
.header-identity{display:flex;align-items:center;gap:20px;flex:0 0 auto}
.brand-mascot,.brand-lettering{transform-origin:280px 440px}
.brand-tail{transform-origin:475px 265px}
.brand-tail-dot{transform-origin:440px 290px}
.footer .brand .brand-lockup{width:166px}
/* A single 760ms signature on initial render; hover uses an independent layer. */
@media(prefers-reduced-motion:no-preference){
 .header .brand-mascot{animation:brand-arrive .7s cubic-bezier(.16,1,.3,1) both}
 .header .brand-tail{animation:brand-tail-settle .65s .08s both}
 .header .brand-tail-dot{animation:brand-dot-arrive .5s .1s both}
 .header .brand-lettering{animation:brand-write .6s .16s cubic-bezier(.16,1,.3,1) both}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.brand:hover .brand-lockup{animation:brand-jelly .55s both}}
@keyframes brand-arrive{0%{transform:translateY(14px) scale(.94,1.03);opacity:.45}40%{transform:translateY(0) scale(1.055,.95);opacity:1}65%{transform:scale(.98,1.025)}84%{transform:scale(1.01,.99)}100%{transform:none;opacity:1}}
@keyframes brand-tail-settle{0%{transform:rotate(-12deg)}48%{transform:rotate(6deg)}72%{transform:rotate(-2deg)}100%{transform:none}}
@keyframes brand-dot-arrive{0%{transform:scale(.7)}50%{transform:scale(1.12,.88)}100%{transform:none}}
@keyframes brand-write{0%{clip-path:inset(0 65% 0 0);transform:translateX(-18px);opacity:.3}100%{clip-path:inset(0);transform:none;opacity:1}}
@keyframes brand-jelly{0%,100%{transform:none}28%{transform:scale(1.035,.96)}52%{transform:scale(.985,1.02)}76%{transform:scale(1.008,.99)}}
/* One label, three two-tone swatches; names remain available to assistive tech. */
.color-choices{display:flex;align-items:center;gap:8px;user-select:none;-webkit-user-select:none}
.color-choices-desktop{flex-direction:column;gap:1px}
.color-caption{font:500 11px/1.4 Plex,sans-serif;color:var(--muted)}
.color-swatches{display:flex;align-items:center;gap:1px}
.color-swatch{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:transparent;border-radius:8px;cursor:pointer}
.color-swatch>span{display:block;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,var(--swatch-color) 50%,var(--swatch-base) 50%);box-shadow:inset 0 0 0 1px #ffffff30;transition:transform .18s cubic-bezier(.16,1,.3,1),outline-color .18s;outline:2px solid transparent;outline-offset:3px}
.color-swatch[data-palette-choice=rose]{--swatch-color:#d82d78;--swatch-base:#20222b}
.color-swatch[data-palette-choice=cobalt]{--swatch-color:#3566e3;--swatch-base:#20222b}
.color-swatch[data-palette-choice=violet]{--swatch-color:#8944e6;--swatch-base:#09070d}
.color-swatch[aria-pressed=true]>span{outline-color:var(--accent-ink)}
.color-swatch:hover>span{transform:scale(1.1)}
.color-swatch:active>span{transform:scale(.9)}
.color-swatch:focus-visible{outline:2px solid var(--accent-ink);outline-offset:1px}
.color-choices-mobile{justify-content:flex-end;margin-top:14px;gap:12px}
.color-choices-mobile .color-caption{font-size:12px}
.color-choices-mobile .color-swatch{width:44px;height:44px}
.color-choices-mobile .color-swatch>span{width:24px;height:24px}
/* Menu takes over before navigation, logo and swatches compete for space. */
@media(max-width:1100px){
 .color-choices-desktop{display:none}
 .header .desktop-nav{display:none}
 .header .menu-toggle{display:inline-flex}
 .header{height:72px}
 .header .brand .brand-lockup{width:150px}
 .mobile-shortcuts{display:flex;height:44px;align-items:center;justify-content:center;gap:40px;border-top:1px solid var(--line);font:600 11px/1.4 Plex,sans-serif}
 :root{--header-height:116px}
}
@media(max-width:767px){.header .brand .brand-lockup{width:145px}.header .header-identity{min-width:0}}
@media(max-width:360px){.header .brand .brand-lockup{width:128px}}
@media(prefers-reduced-motion:reduce){.brand *, .color-swatch>span{animation:none;transition:none}.brand:active .brand-lockup{scale:1}}