/* ============================================================
   JIN PROTEC — responsive
   ============================================================ */

@media (max-width:1080px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap                  : 36px
  }

  .hero-bg::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, .80) 0%, rgba(255, 255, 255, .60) 55%, rgba(255, 255, 255, .30) 100%)
  }

  .hero-cards {
    flex-direction: row;
    flex-wrap     : wrap;
    align-items   : stretch;
    gap           : 12px;
    padding       : 18px 16px
  }

  .hero-cards .note {
    width: 100%
  }

  .hcard {
    flex     : 1;
    min-width: 140px;
    width    : auto
  }

  .svc-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .cases-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .reasons-inner {
    grid-template-columns: 1fr;
    gap                  : 40px
  }

  .reasons-photo .ph {
    height: 340px
  }
}

@media (max-width:920px) {

  .nav,
  .header-cta {
    display: none
  }

  .menu-toggle {
    display    : flex;
    margin-left: auto
  }

  .header-inner {
    padding: 12px 20px
  }

  .site-header.scrolled .header-inner {
    padding: 10px 20px
  }

  /* mobile drawer */
  .nav.open {
    display       : flex;
    flex-direction: column;
    align-items   : stretch;
    gap           : 0;
    position      : absolute;
    top           : 100%;
    left          : 0;
    right         : 0;
    background    : #fff;
    box-shadow    : 0 16px 40px rgba(20, 63, 55, .14);
    padding       : 10px 0;
    margin        : 0
  }

  .nav.open a {
    padding      : 15px 24px;
    border-bottom: 1px solid var(--line)
  }

  .nav.open a::after {
    display: none
  }

  .nav.open .header-cta {
    display        : flex;
    margin         : 14px 24px;
    justify-content: center
  }

  .troubles-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .flow-steps {
    grid-template-columns: repeat(2, 1fr);
    gap                  : 34px 8px
  }

  .fstep:not(:last-child) .circ-wrap::after {
    display: none
  }

  .area-company {
    grid-template-columns: 1fr
  }

  .area {
    padding: 70px 28px
  }

  .company {
    padding: 70px 28px
  }

  .contact-inner {
    grid-template-columns: 1fr;
    gap                  : 34px
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap                  : 32px
  }

  .footer-brand {
    grid-column: 1/-1
  }
}

@media (max-width:640px) {
  .section {
    padding: 64px 0
  }

  .wrap {
    padding-inline: 20px
  }

  .hero {
    padding   : 120px 0 50px;
    min-height: 0
  }

  .hero-copy {
    /* background             : rgba(255, 255, 255, .72); */
    backdrop-filter        : blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius          : 16px;
    padding                : 24px 22px;
  }

  .hero-cards {
    flex-direction: column;
    gap           : 16px;
    padding       : 22px 20px
  }

  .hcard {
    flex : none;
    width: 100%
  }

  .hero-actions {
    flex-direction: column
  }

  .hero-actions .btn-primary,
  .hero-phone {
    width: 100%
  }

  .hero-phone {
    align-items: flex-start
  }

  .hero-stats {
    gap: 12px
  }

  .stat-div {
    display: none
  }

  .stat {
    width: calc(50% - 8px)
  }

  .troubles-grid {
    grid-template-columns: 1fr;
    gap                  : 16px
  }

  .svc-grid {
    grid-template-columns: 1fr
  }

  .svc-cta {
    flex-direction: column;
    text-align    : center;
    padding       : 28px 24px
  }

  .svc-cta .txt b {
    font-size: 19px
  }

  .cases-grid {
    grid-template-columns: 1fr
  }

  .cases-head {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 14px
  }

  .reason-row {
    grid-template-columns: auto 1fr;
    gap                  : 16px;
    padding              : 18px
  }

  .reason-row .thumb {
    display: none
  }

  .reasons-photo .ph {
    height: 240px
  }

  .flow-steps {
    grid-template-columns: 1fr;
    gap                  : 30px
  }

  .staff-box {
    flex-direction: column;
    padding       : 36px 20px
  }

  .staff-box .ph {
    width : 100%;
    height: 200px
  }

  .form-card {
    padding: 26px 22px
  }

  .form-row {
    grid-template-columns: 1fr;
    gap                  : 0
  }

  .contact-mail {
    font-size: 16px;
    padding  : 20px 22px
  }

  .contact-phone .num {
    font-size: 23px
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap                  : 28px
  }

  .footer-bottom .wrap {
    flex-direction: column;
    align-items   : flex-start;
    gap           : 12px
  }

  .section-head .lead span {
    display: inline
  }
}

@media (max-width:380px) {
  .stat {
    width: 100%
  }

  .brand-sub {
    display: none
  }
}

@media (min-width:641px) {
  a[href^="tel:"] {
    pointer-events: none;
    cursor        : default
  }
}