@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

:root { --gold: #d7ca70; --black: #090909; --ink: #151515; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); font-family: Montserrat, Arial, sans-serif; font-weight: 400; }
a { color: inherit; text-decoration: none; }

.header { position: relative; z-index: 20; display: flex; align-items: center; width: 100%; height: 80px; padding: 0 24px; overflow: hidden; color: #fff; background: #050505; }
.brand { flex: 0 0 335px; white-space: nowrap; font-size: 20px; font-weight: 400; letter-spacing: .1px; }
.nav { display: flex; flex: 0 1 auto; align-items: center; justify-content: center; gap: 16px; font-size: 13px; font-weight: 600; line-height: 1.2; text-align: center; }
.nav a { position: static; white-space: nowrap; }
.hire-link { flex: 0 0 175px; margin-left: 20px; padding: 9px 12px; border: 3px solid var(--gold); border-radius: 11px; color: var(--gold); font-size: 12px; font-weight: 600; text-align: center; white-space: nowrap; }
.languages { display: flex; flex: 0 0 48px; justify-content: flex-end; gap: 10px; margin-left: 14px; color: #aaa; font-size: 12px; }
.menu-toggle { display: none; }

.hero { position: relative; height: 973px; overflow: hidden; color: #fff; background: #000; }
.hero::before { position: absolute; inset: 0 0 auto; height: 580px; content: ""; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.37)), url('/assets/hero.webp') center 52% / cover no-repeat; }
.hero-copy { position: absolute; z-index: 2; top: 52px; left: 12%; width: 510px; text-align: center; }
.hero h1 { margin: 0 0 19px; font-size: 22px; font-weight: 600; }
.hero-copy a { display: block; margin: 17px 0; font-size: 21px; font-weight: 600; }
.booking-form { position: absolute; z-index: 3; top: 44px; right: 3.55%; display: flex; flex-direction: column; gap: 20px; width: 360px; min-height: 805px; padding: 34px; color: #111; background: rgba(246,246,246,.56); }
.booking-form h2 { margin: 0 0 2px; font-size: 18px; font-weight: 600; text-align: center; }
.booking-form input, .booking-form select, .booking-form textarea, .contact-form input, .contact-form textarea { min-height: 49px; padding: 14px 18px; border: 1px solid #c8bd70; border-radius: 0; color: #333; background: rgba(255,255,255,.75); font: 400 16px Montserrat, sans-serif; }
.booking-form textarea { height: 104px; resize: vertical; }
.booking-form button { min-height: 49px; border: 3px solid var(--gold); color: var(--gold); background: transparent; box-shadow: 0 0 8px #847b45; font-size: 16px; font-weight: 600; cursor: pointer; }
.booking-form p { margin: 0 5px; font-size: 14px; line-height: 1.3; text-align: center; }

.categories { padding: 92px 4.2% 487px; background: #fff; }
.categories h2, .contacts h2 { margin: 0 0 90px; font-size: 42px; font-weight: 500; text-align: center; }
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; width: 100%; }
.category { display: grid; place-items: center; height: 186px; padding: 0 10px; color: #fff; background-position: center; background-size: cover; font-size: 20px; font-weight: 600; line-height: 1.35; text-align: center; }
.high-fashion { background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.8)), url('/assets/high-fashion.webp'); }
.fitness { background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.8)), url('/assets/fitness.webp'); }
.events { background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.8)), url('/assets/events.webp'); }
.promo { background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.8)), url('/assets/promo.webp'); }
.runway { background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.8)), url('/assets/runway.jpg'); }
.lingerie { background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.8)), url('/assets/lingerie.png'); }
.commercial { background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.8)), url('/assets/commercial.jpg'); }
.hair { background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.8)), url('/assets/hair.jpg'); }
.ambassador { background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.8)), url('/assets/ambassador.jpg'); }
.lifestyle { background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.8)), url('/assets/lifestyle.jpeg'); }
.music-video { background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.8)), url('/assets/music-video.jpg'); }
.influencers { background-image: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.8)), url('/assets/influencers.jpg'); }

.contacts { padding: 0 11% 105px; }
.contacts h2 { margin-bottom: 38px; }
.contacts h3 { margin: 0 0 5px; font-size: 25px; font-weight: 400; text-align: center; }
.intro { margin: 0 auto 86px; font-size: 22px; line-height: 1.45; text-align: center; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 100px; }
.details { display: flex; flex-direction: column; gap: 11px; font-size: 22px; line-height: 1.3; }
.details address { margin-top: 31px; font-style: normal; }
.socials { display: flex; gap: 10px; margin-top: 10px; }
.socials a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: #080808; font-size: 16px; font-weight: 600; }
.contact-form { display: flex; flex-direction: column; gap: 25px; }
.contact-form input, .contact-form textarea { border-color: #ccc; background: #fff; }
.contact-form textarea { height: 111px; resize: vertical; }
.contact-form button { width: 167px; height: 60px; border: 0; border-radius: 11px; background: var(--gold); font: 600 16px Montserrat; cursor: pointer; }

footer { padding: 60px 4.7% 55px; color: #ccc; background: #111; }
.footer-top { display: grid; grid-template-columns: 1.35fr 1.35fr 1.35fr 1.3fr; gap: 55px; padding-bottom: 50px; }
.footer-top strong { color: #ddd; font-size: 21px; font-weight: 600; }
.footer-top p, .footer-top small { display: block; margin-top: 32px; color: #777; font-size: 12px; line-height: 1.5; }
.footer-top h3, .locations h3 { margin: 0 0 19px; color: #777; font-size: 16px; font-weight: 600; letter-spacing: .6px; }
.footer-top a { display: block; margin-bottom: 16px; font-size: 15px; line-height: 1.2; }
.locations { display: grid; grid-template-columns: 1.3fr 1.3fr 1.3fr 1.3fr; gap: 30px; padding-top: 45px; border-top: 1px solid #444; font-size: 15px; line-height: 2.6; }

.toast { position: fixed; z-index: 100; right: 24px; bottom: 24px; left: auto; max-width: 360px; padding: 16px 22px; border-radius: 5px; color: #fff; background: #151515; opacity: 0; visibility: hidden; transform: translateY(30px); transition: .25s; pointer-events: none; }
.toast.show { opacity: 1; visibility: visible; transform: translateY(0); }

@media (max-width: 1100px) {
  .header { padding: 0 22px; justify-content: space-between; overflow: visible; }
  .brand { flex: 0 1 auto; font-size: 18px; }
  .menu-toggle { display: block; order: 2; padding: 0; border: 0; color: #fff; background: none; font-size: 24px; }
  .languages { order: 3; flex: 0 0 auto; margin: 0; gap: 10px; }
  .nav { position: absolute; top: 80px; right: 0; left: 0; display: none; flex-direction: column; gap: 16px; width: auto; padding: 22px; background: #080808; font-size: 13px; }
  .nav.is-open { display: flex; }
  .hire-link { display: none; }
  .hero-copy { left: 6%; width: 50%; }
  .booking-form { right: 30px; width: 330px; }
  .category-grid { gap: 20px; }
  .contact-grid { gap: 50px; }
}

@media (max-width: 700px) {
  .header { height: 65px; padding: 0 20px; justify-content: space-between; overflow: visible; }
  .brand { flex: 0 1 auto; font-size: 15px; }
  .menu-toggle { display: block; order: 2; padding: 0; border: 0; color: #fff; background: none; font-size: 24px; }
  .languages { order: 3; flex: 0 0 auto; margin: 0; gap: 10px; font-size: 12px; }
  .nav { position: absolute; top: 65px; right: 0; left: 0; display: none; grid-template-columns: 1fr; gap: 16px; width: auto; height: auto; padding: 22px; background: #080808; font-size: 13px; }
  .nav a { position: static; }
  .nav.is-open { display: grid; }
  .hire-link { display: none; }
  .hero { height: auto; min-height: 973px; padding: 48px 20px 35px; }
  .hero::before { height: 973px; background-position: center 34%; }
  .hero-copy { position: relative; top: auto; left: auto; width: 100%; text-align: left; }
  .hero h1 { font-size: 20px; line-height: 1.2; }
  .hero-copy a { font-size: 17px; }
  .booking-form { position: relative; top: auto; right: auto; width: 100%; min-height: 0; margin-top: 38px; padding: 26px 20px; gap: 14px; }
  .categories { min-height: 0; padding: 65px 20px 100px; }
  .categories h2, .contacts h2 { margin-bottom: 45px; font-size: 32px; font-weight: 600; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .category { height: 128px; font-size: 14px; }
  .contacts { padding: 0 25px 70px; }
  .contacts h3 { font-size: 19px; }
  .intro { margin-bottom: 45px; font-size: 17px; }
  .contact-grid { grid-template-columns: 1fr; gap: 45px; }
  .details { font-size: 17px; }
  .footer-top, .locations { grid-template-columns: 1fr 1fr; gap: 35px; }
  .footer-top { padding-bottom: 35px; }
  .footer-top > div:first-child { grid-column: span 2; }
  .locations h3 { grid-column: span 2; }
  .footer-top a { font-size: 13px; }
  .locations { font-size: 12px; line-height: 2.4; }
}