/* Static spatial wordmarks: a continuous solid ring threads around Metropolis. */
.halo-logo{--logo-ink:var(--lumen,#F7F4EE);--logo-muted:var(--stone,#AAB4C0);display:inline-flex;align-items:center;gap:.28em;vertical-align:middle;font:600 1em/1 Metropolis,sans-serif;letter-spacing:-.025em;white-space:nowrap;isolation:isolate;color:var(--logo-ink)}
.halo-logo__name{display:inline-flex;align-items:baseline;gap:.32em}
.halo-logo__halo,.halo-logo__o{display:inline-block}
.halo-logo__retail{display:inline-block;font-weight:400;color:var(--logo-muted)}
.halo-logo .halo-logo__ring{position:static;order:-1;flex:none;display:block;width:1.12em;height:1.12em;max-width:none;max-height:none;transform:none;pointer-events:none;filter:none!important;opacity:1;object-fit:contain}
.halo-logo[data-logo-surface="light"]{--logo-ink:#17212B;--logo-muted:#596571}
.halo-logo[data-logo-surface="dark"]{--logo-ink:#F7F4EE;--logo-muted:#AAB4C0}
.halo-logo.logo-rendered{--logo-full-width:5.28em;position:relative;display:inline-block;width:var(--logo-full-width);height:1.6em;gap:0;vertical-align:middle}
.halo-logo.logo-rendered[data-logo-layout="lo"]{--logo-full-width:5.08em}
.halo-logo.logo-rendered .halo-logo__name{display:none}
.halo-logo.logo-rendered .halo-logo__ring{display:block;width:100%;height:100%;object-fit:contain}
.halo-logo.logo-rendered[data-logo-variant="halo"]{width:2.8em}
.halo-logo.logo-rendered[data-logo-variant="ring"]{width:1.12em;height:1.12em}
/* A single entrance remains available; the mark and its gradient never loop. */
.halo-logo.logo-revealing .halo-logo__ring{animation:halo-logo-enter 1.65s cubic-bezier(.22,1,.36,1) both}
.halo-logo.logo-revealing .halo-logo__halo{animation:halo-logo-name .8s cubic-bezier(.22,1,.36,1) .3s both}
.halo-logo.logo-revealing .halo-logo__retail{animation:halo-logo-name .6s cubic-bezier(.22,1,.36,1) .98s both}
@keyframes halo-logo-enter{0%{opacity:0;transform:translateX(-4px) scale(.96)}50%,100%{opacity:1;transform:none}}
@keyframes halo-logo-name{from{opacity:0;translate:8px 0;clip-path:inset(0 100% 0 -8px)}to{opacity:1;translate:0 0;clip-path:inset(0 -4px 0 -8px)}}
:root .home-refined .mark::before{content:none!important}
.home-refined .mark,.pack-header .pack-wordmark{gap:0}
.home-refined .mark .halo-logo,.pack-header .halo-logo{font-size:34px}
.dock .halo-logo.logo-rendered{overflow:hidden;transition:width .32s cubic-bezier(.22,1,.36,1),font-size .32s cubic-bezier(.22,1,.36,1)}
.dock .halo-logo.logo-rendered .halo-logo__ring{width:var(--logo-full-width)}
.dock .halo-logo.logo-rendered[data-logo-variant="halo"] .halo-logo__ring{width:2.8em}
.dock .halo-logo.logo-rendered[data-logo-compact="true"]{width:2.8em;font-size:28px}
.dock .halo-logo.logo-rendered[data-logo-compact="true"] .halo-logo__ring{width:2.8em}
.foot-brand>.halo-logo{font-size:26px;margin-bottom:12px}
.pack-page .asset-plate .halo-logo{font-size:clamp(30px,3.6vw,48px)}
.pack-page .asset-plate{min-height:220px;padding:40px 24px}
.pack-page .logo-replay{margin-top:24px}
.pack-page .logo-replay:disabled{opacity:.45;cursor:default}
:root[data-halo-motion="paused"] .halo-logo.logo-revealing :is(.halo-logo__ring,.halo-logo__halo,.halo-logo__retail){animation:none}
:root[data-halo-active="false"] .halo-logo.logo-revealing :is(.halo-logo__ring,.halo-logo__halo,.halo-logo__retail){animation-play-state:paused}
.halo-logo[data-logo-variant="ring"]{width:1.12em;height:1.12em;gap:0}
.halo-logo[data-logo-variant="ring"] .halo-logo__name{position:absolute;opacity:0;pointer-events:none}
.pack-page .logo-family-row{padding-block:32px 48px;border-top:1px solid var(--hair)}
.pack-page .logo-family-row:first-child{border-top:0}
.pack-page .logo-family-row>p{color:var(--stone);font-size:17px;margin-top:8px}
.pack-page .logo-family-row .asset-pair{margin-top:24px}
.pack-page .logo-family-row .asset-plate{min-height:220px}
.pack-page .logo-downloads{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:20px;font-size:15px;color:var(--stone)}
.pack-page .asset-plate .halo-logo[data-logo-variant="ring"]{font-size:80px}
.pack-page .logo-archive{padding-block:40px;border-top:1px solid var(--hair)}
.pack-page .logo-archive>summary{cursor:pointer;font:500 24px/1.3 Metropolis,sans-serif}
@media(max-width:760px){
 .home-refined .mark .halo-logo{font-size:22px}
 .pack-header .halo-logo{font-size:28px}
 .dock:not(.pack-header) .halo-logo.logo-rendered[data-logo-compact="true"]{font-size:22px}
 .pack-header .halo-logo.logo-rendered[data-logo-compact="true"]{font-size:24px}
 .home-refined .dock:not(.pack-header) .dock__bar{padding-inline:calc(16px - var(--dock-p,0) * 12px);gap:6px}
}
/* At the narrowest sizes keep the Halo portion large, with Retail beyond the crop. */
@media(max-width:360px){
 .home-refined .dock:not(.pack-header) .halo-logo{font-size:24px;width:2.8em;overflow:hidden}
 .home-refined .dock:not(.pack-header) .halo-logo__ring{width:var(--logo-full-width)}
 .pack-header .halo-logo.logo-rendered{width:2.8em}
}
@media(prefers-reduced-motion:reduce){.halo-logo.logo-revealing :is(.halo-logo__ring,.halo-logo__halo,.halo-logo__retail){animation:none!important}}
@media print{.halo-logo.logo-revealing :is(.halo-logo__ring,.halo-logo__halo,.halo-logo__retail){animation:none!important}}

/* Header trial: the wordmark alone. The ring layers are hidden; the letters keep their place. */
:root[data-header-ring="off"] :is(.dock,.pack-header,.foot-brand) .halo-logo :is([data-layer="back"],[data-layer="front"],[data-layer="glow"]){display:none}
:root[data-header-ring="off"] :is(.dock,.pack-header,.foot-brand) .halo-logo img.halo-logo__ring{visibility:hidden}

/* Minimal header (for now): the logo and Talk to us only. The key is white with a navy label
   over the page, and turns navy with a white label once the header compacts on scroll. */
.dock:not(.event-header):not(.has-anchors) nav .opt,.dock:not(.event-header):not(.has-anchors) .menu-btn,.dock:not(.event-header):not(.has-anchors) .menu-panel{display:none!important}
/* The homepage header carries short links to its key sections (a menu on narrow screens). */
.dock.has-anchors .menu-panel[hidden]{display:none}
.dock:not(.event-header) .key{
  --key-face-top:#FFFFFF;--key-face:#FFFFFF;--key-face-bottom:#F3F5F7;--key-label:#17212B;
  --key-skirt:rgba(23,33,43,.16);--key-highlight:rgba(255,255,255,1);--key-shade:rgba(12,19,26,.18);--key-hover:#FFFFFF;
  box-shadow:0 0 0 1px rgba(23,33,43,.12),inset 0 1px 0 var(--key-highlight),0 2px 0 var(--key-skirt),0 8px 16px -8px var(--key-shade)!important;
}
.dock.is-compact:not(.event-header) .key{
  --key-face-top:#26323D;--key-face:#17212B;--key-face-bottom:#111921;--key-label:#FFFFFF;
  --key-skirt:#05080B;--key-highlight:rgba(255,255,255,.14);--key-shade:rgba(12,19,26,.38);--key-hover:#2A3743;
  box-shadow:inset 0 1px 0 var(--key-highlight),inset 0 -1px 0 rgba(0,0,0,.06),0 2px 0 var(--key-skirt),0 8px 16px -8px var(--key-shade)!important;
}
.dock:not(.event-header) .key:active{box-shadow:inset 0 1px 2px rgba(0,0,0,.22),inset 0 1px 0 var(--key-highlight),0 0 0 var(--key-skirt),0 2px 6px -4px var(--key-shade)!important}
