@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-0.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-1.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('../fonts/montserrat-2.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Rubik'; src: url('../fonts/rubik-300.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face {
  font-family: 'BOWLER';
  src: url('../fonts/bowler.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* First screen. Background: original photo from wp-content/uploads. */
:root { --hero-image: url('../uploads/2025/01/special-forces-soldier-holding-assault-rifle-with-laser-sight-aims-target-studio-photo-against-dark-textured-wall-2048x1320.webp'); }
.header { background: transparent; }
.header .wrap, .hero .wrap { width: min(1200px, calc(100% - 40px)); }
.nav { min-height: 124px; gap: 0; justify-content: space-between; }
.logo { display: block; width: 72px; height: 72px; flex-shrink: 0; }
.logo img { display: block; width: 100%; height: 100%; }
.nav-max { display: none; }
.social-link img { display: block; width: 20px; height: 20px; }
.menu { gap: 30px; margin: 0 24px; font: 600 20px/1.2 'Montserrat', Arial, sans-serif; text-transform: none; line-height: 1.2; white-space: nowrap; }
.header-contacts { align-self: flex-start; padding-top: 20px; }
.nav-phone { display: block; font: 400 22px/1 'BOWLER', Arial, sans-serif; white-space: nowrap; }
.socials { display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px; }
.social-link { width: 50px; height: 50px; display: grid; place-items: center; color: white; border: 1px solid #ed201b; border-radius: 6px; background: #0008; transition: background .2s; }
.social-link svg { width: 28px; height: 28px; }
.social-link:hover { background: #d91b16; }
/* Values from strike161.ru Elementor CSS: min-height 100vh (80vh on mobile), overlay gradient. */
.hero { min-height: max(600px, 100vh); display: flex; align-items: center; background-color: #000; background-image: linear-gradient(180deg, #02010161 0%, #000 100%), var(--hero-image); background-size: cover; background-position: center; }
.hero-inner { padding-top: 110px; padding-bottom: 110px; }
.hero h1 { max-width: 1000px; margin: 0 auto; font-size: 67px; font-family: 'BOWLER', Arial, sans-serif; font-weight: 600; letter-spacing: 2px; line-height: 1.3; }
.hero-title-main { display: inline; position: relative; font-size: 110px; line-height: 1.2; white-space: nowrap; }
.hero-title-city { display: inline; margin-top: 0; font-size: 67px; line-height: inherit; white-space: nowrap; }
.hero .hero-price { margin: 0 auto; color: #dc281e; font: 400 20px/1.5 'BOWLER', Arial, sans-serif; text-transform: uppercase; }
.hero .hero-booking { margin: 23px auto 0; font: 700 20px/1.2 'Montserrat', Arial, sans-serif; text-transform: uppercase; }
.hero .actions { gap: 20px; margin-top: 64px; }
.hero .btn { min-height: 60px; padding: 20px 50px; border: 1px solid #dc281e; border-radius: 30px; background: linear-gradient(#e62016, #f00000); font: 300 18px/1 'Rubik', Arial, sans-serif; letter-spacing: 1px; }
.hero .btn:first-child { min-width: 0; padding-inline: 70px; }
.hero .btn:last-child { min-width: 0; }
.hero .btn:hover { background: #ca1811; }
.hit-marks { position: absolute; width: 70px; height: auto; top: -8px; left: -72px; }
@media (min-width: 1101px) {
  .hero-title-city { width: fit-content; margin-left: auto; margin-right: auto; }
}
:focus-visible { outline: 3px solid white; outline-offset: 5px; }
.step { min-width: 0; overflow-wrap: anywhere; }
.step .btn { max-width: 100%; padding-left: 12px; padding-right: 12px; }
.social-dialog { max-width: min(440px, calc(100% - 32px)); padding: 40px 28px 28px; border: 1px solid #e62016; border-radius: 14px; color: white; background: #14191d; }
.social-dialog::backdrop { background: #000b; }
.social-dialog h2 { font-size: 24px; }
.dialog-close { position: absolute; right: 12px; top: 4px; border: 0; background: none; color: white; font-size: 30px; }
@media (max-width: 1240px) and (min-width: 1101px) {
  .header .wrap { width: calc(100% - 48px); }
  .menu { margin: 0 18px; gap: 18px; font-size: 16px; }
  .nav-phone { font-size: 20px; }
  .social-link { width: 48px; height: 48px; }

}
@media (max-width: 1100px) {
  .header .wrap, .hero .wrap { width: calc(100% - 40px); }
  .nav { min-height: 112px; }
  .header-contacts { margin-left: auto; margin-right: 24px; padding-top: 14px; }
  .nav-phone { display: block; font-size: 21px; }
  .socials { gap: 8px; margin-top: 8px; }
  .social-link { width: 36px; height: 36px; }
  .social-link svg { width: 25px; height: 25px; }
  .menu-toggle { display: grid; place-items: center; order: 3; width: 50px; height: 50px; margin: 0; padding: 0; background: #dc281e; }
  .menu-toggle img { display: block; width: 24px; height: auto; }
  .menu-toggle[aria-expanded="true"] { background: #fff; }
  .menu-toggle[aria-expanded="true"] img { filter: brightness(0); }
  .menu { display: none; position: absolute; top: 112px; left: 0; right: 0; margin: 0; padding: 24px; background: #0b1015; flex-direction: column; align-items: flex-start; gap: 20px; font-size: 20px; white-space: normal; }
  .menu.open { display: flex; }
  .hero { min-height: max(640px, 100svh); }
  .hero-inner { padding-top: 200px; padding-bottom: 90px; }
  .hero h1 { font-size: 40px; }
  .hero-title-main { font-size: min(80px, 8.4vw); }
  .hero-title-city { font-size: 40px; margin-top: 0; }
  .hit-marks { transform: scale(.65); transform-origin: right top; left: -70px; top: -24px; }
  .hero .hero-price { margin-top: 25px; }
  .hero .hero-booking { max-width: 640px; }
  .hero .actions { margin-top: 55px; gap: 16px; }
  .hero .btn { font-size: 18px; min-height: 64px; padding: 18px 28px; }
  .hero .btn:first-child { min-width: 300px; }
  .hero .btn:last-child { min-width: 240px; }
}
@media (max-width: 600px) {
  /* Mobile header from the reference: #191919 bar, phone + MAX link, red menu button. */
  .header { background: #191919; }
  .header .wrap, .hero .wrap { width: calc(100% - 40px); }
  .nav { min-height: 78px; }
  .logo { width: 60px; height: 60px; }
  .header-contacts { margin: 0 auto; padding-top: 0; align-self: center; text-align: center; }
  .nav-phone { font-size: clamp(14px, 4.3vw, 17px); }
  .socials { display: none; }
  .nav-max { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 0; border: 0; background: none; color: #fff; font: 400 13px/1.3 'Montserrat', Arial, sans-serif; }
  .nav-max img { width: 18px; height: 18px; }
  .menu-toggle { width: 40px; height: 40px; }
  .menu-toggle img { width: 20px; }
  .menu { top: 78px; }
  .hero { min-height: 80vh; }
  .hero-inner { padding-top: 92px; padding-bottom: 40px; }
  .hero h1 { font-size: 18px; }
  .hero-title-main { font-size: min(33px, 9vw); }
  .hero-title-city { font-size: 18px; margin-top: 0; }
  .hit-marks { display: none; }
  .hero .hero-price { max-width: 330px; font-size: 13px; margin-top: 28px; }
  .hero .hero-booking { font-size: 22px; line-height: 1.3; margin-top: 25px; text-align: left; }
  .hero .actions { flex-direction: column; align-items: center; margin-top: 38px; gap: 14px; }
  .hero .btn:first-child, .hero .btn:last-child { width: 100%; min-width: 0; min-height: 54px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .social-link { transition: none; }
}