* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent !important; }
body { display: grid; place-items: center; font-family: 'Manrope', sans-serif; }
.brand-stage { position: relative; width: min(100vw, 180vh); aspect-ratio: 9 / 5; overflow: hidden; isolation: isolate; }
.brand-stage canvas { display: block; position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* The transparent WebGL foreground naturally masks lettering behind the fish. */
.brand-copy { position: absolute; z-index: 0; inset: 23% 5% 43%; display: grid; place-items: center; text-decoration: none; color: #fff8e9; text-align: center; }
.brand-copy > span {
    grid-area: 1 / 1; max-width: 100%; white-space: nowrap; line-height: 1.12; opacity: 0;
    padding: clamp(8px, 1.3vw, 2.34vh) clamp(12px, 2.3vw, 4.14vh);
    text-shadow: 0 2px 3px rgba(0, 0, 0, .55);
}
.brand-title, .brand-domain, .brand-feature > strong {
    -webkit-text-stroke: clamp(.7px, .18vw, .324vh) #061719;
    paint-order: stroke fill;
}
.brand-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(28px, 9.1111vw, 16.4vh); font-weight: 700; letter-spacing: .005em; }
.brand-title .brand-assistant { color: #e5cfa1; }
.brand-domain { position: relative; display: inline-flex; align-items: center; gap: .22em; color: #f2deb2; font-size: clamp(20px, 6.6667vw, 12vh); font-weight: 600; letter-spacing: .015em; }
.brand-domain > span { color: inherit; }
.brand-copy > .brand-feature {
    display: grid; justify-items: center; white-space: normal;
}
.brand-feature > strong { color: #fff8e9; font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(24px, 7.7778vw, 14vh); line-height: 1.06; font-weight: 700; }
.brand-lettering { position: relative; display: inline-block; perspective: 800px; font-kerning: none; font-variant-ligatures: none; }
.brand-word { display: inline-block; white-space: nowrap; }
.brand-glyph { display: inline-block; transform-origin: 50% 80%; }
.brand-sheen {
    position: absolute; inset: 0; opacity: 0; color: #fffef0; white-space: pre;
    -webkit-text-stroke: 0; text-shadow: none; pointer-events: none;
}
.brand-globe { flex: 0 0 auto; width: .82em; height: .82em; overflow: visible; filter: drop-shadow(0 1px 1px #061719); }
.brand-globe [data-brand-globe-spin] { transform-box: fill-box; transform-origin: center; }
.brand-link-cursor { position: absolute; right: -.25em; bottom: -.22em; width: .5em; height: .65em; opacity: 0; pointer-events: none; transform-origin: 15% 5%; }
.brand-link-pulse { position: absolute; right: .2em; top: 58%; width: .42em; height: .42em; border: 2px solid #ead4a6; border-radius: 50%; opacity: 0; pointer-events: none; }
.brand-domain-text { transition: color .15s ease; }
.brand-copy:hover .brand-domain-text { color: #fff7df; }
.brand-copy:active .brand-domain-text { color: #d8b977; }
.brand-copy:focus-visible { outline: 1px solid #e5cfa1; outline-offset: 6px; border-radius: 4px; }
.brand-stage[data-phase="fallback"] canvas { visibility: hidden; }
.brand-stage[data-phase="fallback"] .brand-copy { z-index: 3; inset: 35% 8% 20%; grid-template-rows: auto auto; align-content: center; gap: 12px; }
.brand-stage[data-phase="fallback"] .brand-title,
.brand-stage[data-phase="fallback"] .brand-domain { grid-area: auto; opacity: 1 !important; transform: none !important; }
.brand-stage[data-phase="fallback"] .brand-domain { font-size: clamp(14px, 3.5556vw, 6.4vh); }
.brand-stage[data-phase="fallback"] .brand-feature { display: none; }
.brand-fallback { position: absolute; inset: 60% 5% 5%; display: grid; place-items: center; color: #fff9e9; text-shadow: 0 2px 4px #001b24; }
@media (prefers-reduced-motion: reduce) {
    .brand-domain-text { transition: none; }
}