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

body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  overflow-x: hidden; /* чтобы орнамент не вылезал по горизонтали */
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: url('img/ornament.svg') left top / auto 180% no-repeat,
              url('img/ornament_mirror.svg') right top / auto 180% no-repeat;
  opacity: 0.08;
  pointer-events: none;
  z-index: -1;
}


/* Размеры логотипов */
.logo_h {
  height: 3.5rem;
}

.text_h {
  height: 3.5rem;
}
.img_w{
  width: 35rem;
}
.work_w {
  width: 82%;
  margin: 0 auto; /* Центрируем секцию */
}





/* Hero Section */
.hero-container {
  display: flex;
  justify-content: center;
  overflow: visible;
  background: #1B1A05;
  width: 85%;
  height: 600px;
  margin: 0 auto;
  position: relative;
}

/* Общие стили для градиентных слоёв */
.hero-container::before,
.hero-container::after,
.hero-container .fade-bottom {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 5;
}

/* Слои слева и справа */
.hero-container::before {
  top: 0;
  left: 0;
  width: 5%;
  height: 100%;
  background: linear-gradient(to right, #1B1A05 0%, rgba(27,26,5,0) 100%);
}
.hero-container::after {
  top: 0;
  right: 0;
  width: 5%;
  height: 100%;
  background: linear-gradient(to left, #1B1A05 0%, rgba(27,26,5,0) 100%);
}

/* Слой снизу */
.hero-container .fade-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15%;
  background: linear-gradient(to top, #1B1A05 10%, rgba(27,26,5,0) 100%);
}


.hero-card {
  position: relative;
  margin-left: -5%; /* overlap */
  transition: margin 0.3s ease;
}

.hero-card:first-child {
  margin-left: 0;
}

.hero-img {
  width: 110%;
  height: 100%;
  object-fit: cover;
  display: block;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0% 100%);
}

.hero-overlay {
  width: 90%;
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(220,173,67,0.3) 14%, transparent 28%);
  pointer-events: none;
}

.hero-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #FFFFFF;
  z-index: 10;
}

.hero-caption h3 {
  font-size: 1rem;
  margin: 0;
}

.hero-caption h1 {
  font-size: 1.5rem;
  margin: 4px 0 0;
}

/* Hover: neighbors move aside */
.hero-card:hover {
  z-index: 10;
}

.hero-container:hover .hero-card:not(:hover) {
  margin-left: -2%;
  margin-right: -2%;
}

@media screen and (max-width: 1024px) {
  .hero-container {
    flex-direction: column;
    height: auto;
  }
  .hero-card {
    width: 100%;
    margin: 0;
  }
  .hero-img {
    clip-path: none;
    height: 400px;
  }
  .hero-overlay {
    background: rgba(0,0,0,0.5);
  }
}
@media screen and (max-width: 640px) {
  .logo_h { height: 2.5rem; }
  .text_h { height: 2.5rem; }
  .img_w { width: 100%; }
  .work_w { width: 95%; }
  .hero-container { width: 100%; height: auto; flex-direction: column; }
  .hero-card { margin-left: 0; width: 100%; }
  .hero-img { clip-path: none; height: auto; }
}

/* === Accessibility & UX enhancements === */
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
a, button { transition: transform .15s ease, opacity .15s ease; }
a:hover, button:hover { transform: translateY(-1px); }

/* Fluid type */
html { font-size: clamp(14px, 1.5vw, 18px); }

/* Touch targets */
button, .btn, .tap { min-height: 44px; min-width: 44px; }

/* Responsive helpers */
@media (max-width: 375px) { /* small phones */ }
@media (max-width: 640px) { /* phones */ }
@media (max-width: 768px) { /* phablets */ }
@media (max-width: 1024px){ /* tablets */ }
@media (min-width: 1280px){ /* desktop+ */ }