/* Mobile hero on the home pages (index / indexeng / indexrus) + free-consultation modal.
   Desktop is untouched: everything below lives inside max-width:767px, except the modal,
   which only opens from the mobile button. */
.hm-only { display: none; }

@media (max-width: 767px) {
  .header-banner-place.hm {
    position: relative;
    overflow: hidden;
    background: #0b1640;
    padding: 48px 0 0;
  }
  .header-banner-place.hm::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("../images/hero-mobile.jpg") center / cover no-repeat;
  }
  /* shade over the photo + the team (transparent PNG, people on its right half) standing at the bottom */
  .header-banner-place.hm::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
      url("../upload/slide.png") right -2% bottom / 196% auto no-repeat,
      linear-gradient(180deg, rgba(6, 12, 42, .80) 0%, rgba(6, 12, 42, .68) 45%, rgba(6, 12, 42, .86) 100%);
  }
  .header-banner-place.hm > .container { position: relative; z-index: 1; }
  .header-banner-place.hm > br,
  .header-banner-place.hm > .container > br,
  .header-banner-place.hm a.navbar-brand br { display: none; }
  .header-banner-place.hm a.navbar-brand { margin: 0 auto 18px; padding-top: 0; }
  .header-banner-place.hm a.navbar-brand img { max-width: 78%; margin: 0 auto; }

  .hm-only { display: block; text-align: center; padding-bottom: 66vw; }
  .header-banner-place.hm .hm-phrase {
    color: #fff;
    font-size: 20px;
    line-height: 1.45;
    margin: 0 auto 28px;
    max-width: 320px;
    letter-spacing: .2px;
    text-align: center;
    text-align-last: center;
    word-spacing: normal;
  }
  .hm-btn {
    display: inline-block;
    border: 0;
    border-radius: 40px;
    padding: 15px 30px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1407;
    background: linear-gradient(180deg, #e7c77e 0%, #c49a45 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    animation: hmPulse 2s infinite;
    cursor: pointer;
  }
  .hm-btn:focus { outline: none; }
}
@keyframes hmPulse {
  0% { box-shadow: 0 0 0 0 rgba(231, 199, 126, .75); }
  70% { box-shadow: 0 0 0 18px rgba(231, 199, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(231, 199, 126, 0); }
}

/* Modal */
.hm-modal { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(4, 8, 28, .72); }
.hm-modal.open { display: flex; }
.hm-card { position: relative; width: 100%; max-width: 380px; background: #fff; border-radius: 16px; padding: 28px 22px 22px; box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.hm-card h3 { margin: 0 0 18px; font-size: 20px; color: #0b1640; text-align: center; }
.hm-close { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; border: 0; background: none; font-size: 26px; line-height: 1; color: #888; cursor: pointer; }
.hm-card input[type=text], .hm-card input[type=tel] { display: block; width: 100%; box-sizing: border-box; height: 48px; margin: 0 0 12px; padding: 0 14px; border: 1px solid #d5d8e0; border-radius: 10px; font-size: 16px; color: #111; background: #fff; }
.hm-card input:focus { outline: none; border-color: #c49a45; }
.hm-card .hm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hm-send { display: block; width: 100%; height: 50px; border: 0; border-radius: 10px; font-size: 16px; font-weight: 600; color: #fff; background: #0b1640; cursor: pointer; }
.hm-send[disabled] { opacity: .6; }
.hm-msg { margin: 12px 0 0; font-size: 15px; text-align: center; color: #0b1640; }
.hm-msg.err { color: #c0392b; }