:root {
  --red: #f21f14;
  --paper: #ffffff;
  --frame-width: 100%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overscroll-behavior-y: none; }
body { margin: 0; background: #000; color: var(--red); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; overflow-x: hidden; overscroll-behavior-y: none; }
a { color: inherit; text-decoration: none; }
.preloader { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--paper); opacity: 1; visibility: visible; transition: opacity .75s ease, visibility .75s ease; }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-dots { display: flex; gap: 7px; align-items: center; }
.loader-dots span { width: 7px; height: 7px; display: block; border-radius: 50%; background: var(--red); opacity: .16; transform: scale(.72); animation: dot-pulse 1.15s ease-in-out infinite; }
.loader-dots span:nth-child(1) { animation-delay: 0s; }
.loader-dots span:nth-child(2) { animation-delay: .08s; }
.loader-dots span:nth-child(3) { animation-delay: .16s; }
.loader-dots span:nth-child(4) { animation-delay: .24s; }
.loader-dots span:nth-child(5) { animation-delay: .32s; }
.loader-dots span:nth-child(6) { animation-delay: .40s; }
.loader-dots span:nth-child(7) { animation-delay: .48s; }
.loader-dots span:nth-child(8) { animation-delay: .56s; }
.loader-dots span:nth-child(9) { animation-delay: .64s; }
.loader-dots span:nth-child(10) { animation-delay: .72s; }
@keyframes dot-pulse { 0%, 100% { opacity: .16; transform: scale(.72); } 35% { opacity: 1; transform: scale(1); } }
.site-frame { width: var(--frame-width); margin: 0 auto; position: relative; }
.site-header { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; padding: 28px 36px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; font-size: 16px; line-height: 1; }
.site-header a:nth-child(2) { text-align: center; }
.site-header a:nth-child(3) { text-align: right; }
.site-header a { transition: opacity .2s ease; }
.site-header a:hover { opacity: .55; }
.hero-media, .about-media, .contact-media { position: relative; overflow: hidden; background: #d5d5d5; }
.hero-media { height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; }
.hero-video, .hero-media > img, .about-media > img, .contact-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-video { z-index: 1; }
.media-placeholder { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; color: rgba(0, 0, 0, .32); font-size: 13px; letter-spacing: .08em; }
.hero-media .media-placeholder { background: linear-gradient(145deg, #d8d8d8, #9c9c9c 52%, #c9c9c9); color: rgba(0, 0, 0, .48); }
.about-media { height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; background: #8b5d2c; }
.about-media > img, .contact-media > img { z-index: 1; }
.about-media .media-placeholder { background: linear-gradient(135deg, #6a341b, #bd7b27 45%, #282b27); color: rgba(255, 255, 255, .55); }
.contact-media { height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; background: #484848; }
.contact-media .media-placeholder { background: linear-gradient(180deg, #343434, #969696 50%, #171717); color: rgba(255, 255, 255, .45); }
.about-copy { position: absolute; z-index: 2; top: 7%; right: 7%; width: min(31%, 390px); margin: 0; color: var(--red); font-size: 17px; line-height: 1.12; text-shadow: 0 1px 10px rgba(0,0,0,.22); }
.contact-links { position: absolute; inset: 0; z-index: 2; font-size: 16px; line-height: 1; }
.contact-links a { position: absolute; text-shadow: 0 1px 8px rgba(0,0,0,.28); transition: opacity .2s ease; }
.contact-links a:hover { opacity: .55; }
.contact-links a:nth-child(1) { top: 20%; left: 15%; }
.contact-links a:nth-child(2) { top: 31%; right: 14%; }
.contact-links a:nth-child(3) { top: 58%; left: 17%; }
.contact-links a:nth-child(4) { top: 68%; right: 29%; }
@media (max-width: 700px) {
  :root { --frame-width: 100%; }
  .site-header { padding: 18px 14px; font-size: 12px; }
  .hero-media, .about-media, .contact-media { height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; }
  .about-copy { top: auto; right: 7%; bottom: 8%; width: 43%; font-size: 13px; }
  .contact-links { font-size: 12px; }
  .contact-links a:nth-child(1) { top: 20%; left: 11%; }
  .contact-links a:nth-child(2) { top: 31%; right: 10%; }
  .contact-links a:nth-child(3) { top: 58%; left: 13%; }
  .contact-links a:nth-child(4) { top: 68%; right: 24%; }
}