:root { color-scheme: dark; --paper: #eae9e3; --stage: #090b0c; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--stage); }
body { font-family: Arial, Helvetica, sans-serif; color: var(--paper); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 1px solid var(--paper); outline-offset: 8px; }
.stage { position: relative; isolation: isolate; min-height: 780px; height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--stage); }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; animation: scene-arrive 2.4s ease-out both; }
.scene-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(9,11,12,.66),rgba(9,11,12,.12) 28%,transparent 50%,rgba(9,11,12,.05) 70%,rgba(9,11,12,.95)),linear-gradient(90deg,rgba(9,11,12,.25),transparent 24%,transparent 76%,rgba(9,11,12,.25)); }
.mist { position: absolute; left: -25%; width: 150%; height: 27%; bottom: 11%; opacity: .27; filter: blur(30px); background: radial-gradient(ellipse at 22% 60%,rgba(181,195,202,.25),transparent 35%),radial-gradient(ellipse at 65% 45%,rgba(183,196,204,.21),transparent 32%); animation: mist-drift 32s ease-in-out infinite alternate; pointer-events: none; }
.mist-two { bottom: 5%; opacity: .16; transform: scaleX(-1); animation-name: mist-return; animation-duration: 43s; }
.grain { position: absolute; inset: 0; opacity: .055; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
/* Canvas only: no blur or blending. Keep real controls and copy above it. */
.comet { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.masthead, .intro, .footer { position: relative; z-index: 5; }
.masthead { display: flex; align-items: flex-start; height: 122px; flex-shrink: 0; padding: 22px 4.4vw 0; animation: content-arrive 1.4s ease-out both; }
.brand { display: block; flex-shrink: 0; }
.brand-logo { display: block; width: 118px; height: auto; filter: drop-shadow(0 5px 14px #0008); }
.intro { text-align: center; margin-top: 38px; padding: 0 20px; animation: content-arrive 1.8s .15s ease-out both; pointer-events: none; }
h1 { font-size: clamp(64px,6.1vw,100px); font-weight: 400; letter-spacing: -.06em; line-height: 1.03; margin: 0; text-wrap: balance; }
h1 em { font-family: Georgia,'Times New Roman',serif; font-weight: 400; letter-spacing: -.055em; color: #e5e5dd; }
.intro-copy { font-size: 12px; font-weight: 400; letter-spacing: .055em; color: #b9bec0; margin: 25px 0 0; }
.footer { margin-top: auto; padding: 34px 4.4vw; display: flex; justify-content: flex-end; animation: content-arrive 1.8s .35s ease-out both; pointer-events: none; }
.motion-toggle { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid #434949; border-radius: 50%; background: #10131477; padding: 12px; color: #abb2b2; cursor: pointer; transition: background .2s,border-color .2s,color .2s; pointer-events: auto; }
.motion-toggle:hover { background: #242a2a99; border-color: #858d8b; color: var(--paper); }
.motion-toggle:disabled { cursor: default; opacity: .5; }
.play-icon { display: none; }
.paused .pause-icon { display: none; }
.paused .play-icon { display: block; }
.paused .mist { animation-play-state: paused; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@keyframes mist-drift { from { transform: translateX(-6%) translateY(0); } to { transform: translateX(7%) translateY(-5%); } }
@keyframes mist-return { from { transform: scaleX(-1) translateX(-5%); } to { transform: scaleX(-1) translateX(8%); } }
@keyframes content-arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scene-arrive { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@media (min-width: 701px) { .hero-image { position: absolute; top: 180px; width: auto; max-width: 100%; height: calc(100% - 180px); left: 50%; translate: -50% 0; object-fit: contain; object-position: 50% 100%; mask-image: linear-gradient(to bottom,transparent,#000 23%,#000),linear-gradient(to right,transparent 6%,#000 18%,#000 82%,transparent 94%); mask-composite: intersect; } }
@media (min-aspect-ratio: 18/10) { .intro { margin-top: 0; } h1 { font-size: clamp(58px,5vw,86px); } .stage { min-height: 680px; } }
@media (min-width: 1700px) { .intro { margin-top: 55px; } }
@media (max-width: 700px) {
  .stage { min-height: 700px; }
  .masthead { height: 104px; padding: 22px 24px 0; }
  .brand-logo { width: 92px; }
  .intro { margin-top: 42px; }
  h1 { font-size: clamp(40px,10.2vw,70px); }
  .intro-copy { font-size: 10px; margin-top: 23px; }
  .hero-image { object-fit: contain; object-position: 50% 65%; width: 150%; max-width: none; position: absolute; left: -25%; height: auto; top: calc(65% - 54.8vw); mask-image: linear-gradient(to bottom,transparent,#000 28%,#000 85%,transparent 100%); }
  .scene-shade { background: linear-gradient(180deg,rgba(9,11,12,.4),transparent 43%,transparent 66%,#090b0c 95%); }
  .mist { bottom: 20%; height: 20%; }
  .footer { padding: 25px 24px; }
}
@media (max-width: 380px) { .masthead { padding: 22px 20px 0; } .brand-logo { width: 88px; } .intro { margin-top: 35px; } .footer { padding: 22px 20px; } }
@media (max-height: 500px) and (orientation: landscape) {
  .stage { min-height: 320px; }
  .masthead { height: 62px; padding: 14px 4.4vw 0; }
  .brand-logo { width: 88px; }
  .intro { margin-top: 0; }
  h1 { font-size: clamp(30px,4.6vw,44px); }
  .intro-copy { margin-top: 12px; font-size: 10px; }
  .hero-image { top: 100px; height: calc(100% - 100px); width: auto; max-width: 100%; left: 50%; translate: -50% 0; object-fit: contain; object-position: 50% 100%; }
  .footer { padding: 12px 4.4vw; }
  .mist { filter: none; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation: none !important; transition: none !important; } .hero-image { opacity: 1; transform: none; } .comet { display: none; } }