:root {
  --bg: #ffffff;
  --bg-2: #f6f6f6;
  --ink: #12110f;
  --ink-soft: #3a372f;
  --line: rgba(18, 17, 15, 0.1);
  --accent: #7a1f1f;
  --paper: #ffffff;
  --font-geist: "Geist", ui-sans-serif, system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { background: var(--bg); color: var(--ink); overflow-x: clip; }
img, video, iframe { max-width: 100%; }
.hero-slide-img { max-width: none; height: 100%; width: 100%; }
.brand-mark {
  position: relative;
  display: block;
  overflow: hidden;
  background: transparent !important;
}
.brand-mark video,
video[data-brand-video] {
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  opacity: 0;
  pointer-events: none;
}
.brand-mark canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: 100%;
  max-width: none;
  transform: translate(-50%, -50%) scale(1.35);
  transform-origin: center center;
  object-fit: contain;
  object-position: center;
  background: transparent !important;
}
.brand-mark--rail canvas {
  transform: translate(-50%, -50%) scale(1.35);
}
body { font-family: var(--font-geist); text-rendering: optimizeLegibility; }
::selection { background: var(--ink); color: var(--bg); }
.font-display { font-family: var(--font-geist); letter-spacing: -0.02em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.marquee { display: flex; overflow: hidden; user-select: none; width: 100%; }
.marquee-track { display: flex; flex-shrink: 0; align-items: center; min-width: max-content; gap: 3rem; animation: marquee 42s linear infinite; }
.logo-marquee .marquee-track { animation-duration: 80s; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.mask-reveal { overflow: hidden; display: block; padding-inline: 0.12em; }
.mask-reveal span { display: block; animation: reveal-up 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes reveal-up { from { transform: translateY(110%); } to { transform: translateY(0); } }
@keyframes hero-kenburns { from { transform: scale(1); } to { transform: scale(1.04); } }
.hero-slide-img { object-position: var(--dfx, 50%) var(--dfy, 50%); }
@media (max-width: 767px) { .hero-slide-img { object-position: var(--mfx, 50%) var(--mfy, 50%); } }
@keyframes splash-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes splash-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes splash-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.splash-logo { animation: splash-in 1s cubic-bezier(0.16, 1, 0.3, 1) both; }
.splash-kicker { animation: splash-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both; }
.splash-line { animation: splash-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both; }
.splash-bar span { animation: splash-bar 3s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .mask-reveal span, .hero-slide-img, .splash-logo, .splash-kicker, .splash-line, .splash-bar span { animation: none !important; }
}