:root { color-scheme: dark; font-family: "Helvetica Neue", Arial, sans-serif; background: #172020; color: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; overflow: hidden; display: grid; place-items: center; background: #172020; }
.background, .shade { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.background { object-fit: cover; }
.shade { z-index: -1; background: rgba(0, 0, 0, .25); }
.identity { text-align: center; padding: 2rem 1rem; transform: translateY(7vh); }
h1 { margin: 0; line-height: 1; }
h1 img { display: block; width: min(300px, 65vw); height: auto; margin: auto; }
.identity p { margin: 2rem 0 0; font-size: clamp(1rem, 2vw, 24px); font-weight: 300; text-transform: uppercase; letter-spacing: .18em; }
footer { padding: 1.25rem; text-align: center; font-size: .75rem; color: #d4dada; }
.motion { position: absolute; right: 1rem; bottom: 1rem; color: #fff; border: 1px solid #ffffff70; border-radius: .25rem; background: #172020a0; padding: .5rem .75rem; cursor: pointer; font: inherit; font-size: .75rem; }
.skip-link { position: fixed; top: .5rem; left: .5rem; z-index: 2; padding: .75rem; background: #172020; color: #fff; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 480px) { .identity { transform: none; } }