.brand { gap: 10px; }
.brand-symbol { width: 40px; height: 26px; flex: none; overflow: hidden; border-radius: 6px; background: #fff; }
.brand-lettering { width: 77px; height: 25px; flex: none; overflow: hidden; mix-blend-mode: multiply; }
.brand svg { display: block; pointer-events: none; }
.brand .beta { margin-left: 2px; }
.site-footer .brand-symbol { width: 33px; height: 23px; }
.site-footer .brand-lettering { width: 63px; height: 22px; }
.brand-tile { display: grid; place-items: center; width: 66px; height: 66px; background: #fff; }
.brand-tile .brand-symbol { width: 53px; height: 35px; }
.island-brand { display: flex; flex: none; pointer-events: none; }
.island-brand .brand-symbol { width: 25px; height: 17px; border-radius: 4px; animation: brand-breathe 3.2s ease-in-out infinite; }
@keyframes brand-breathe { 0%, 100% { transform: scale(.95); opacity: .85; } 50% { transform: scale(1); opacity: 1; } }
.brand-scene { margin-top: 64px; }
.brand-scene-frame { position: relative; overflow: hidden; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.brand-scene-image { display: block; width: 100%; height: auto; }
.brand-reveal { position: absolute; inset: 0; display: grid; place-items: center; background: #fff; }
.brand-reveal img { width: min(60%, 510px); height: 100%; object-fit: contain; }
.brand-scene figcaption { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; font-size: 16px; color: var(--ink); }
.brand-scene figcaption small { display: block; color: #687584; font-size: 12px; margin-top: 3px; }
.brand-reveal-toggle { display: inline-flex; gap: 9px; align-items: center; min-height: 44px; border: 1px solid #ced8e5; border-radius: 8px; padding: 10px 14px; background: #fff; color: #25497e; font: inherit; font-size: 14px; cursor: pointer; }
.brand-reveal-toggle:hover { background: #eaf0fa; }
.brand-reveal-toggle:focus-visible { outline: 3px solid #315fd5; outline-offset: 3px; }
.brand-reveal-toggle small { margin: 0!important; }
.brand-scene .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) { .brand-scene { margin-top: 38px; } .brand-scene figcaption { align-items: flex-start; flex-direction: column; gap: 12px; } .brand-scene-frame { border-radius: 12px; } .brand-symbol { width: 34px; height: 23px; } .brand-lettering { width: 65px; height: 22px; } }
@media (prefers-reduced-motion: reduce) { .island-brand .brand-symbol { animation: none; } }