/* ——— GLOBAL DEVICE OPTIMIZATION ——— */
:is(img, svg, video, canvas, iframe) {
  max-width: 100%;
  height: auto;
}

:is(.hero-title, .section-title, .hero-desc, .mission-text, .val-desc, .why-desc, .contact-value, .faq-question, .faq-answer, .step-desc) {
  overflow-wrap: break-word;
}

@media (max-width: 1200px) {
  :is(.hero, .services, .why, .mission, .values, .team-section, .contacts, .form-section, .cta-section, .steps, .process, .faq, .hours-banner) {
    padding-left: clamp(20px, 4vw, 48px);
    padding-right: clamp(20px, 4vw, 48px);
  }
}

@media (max-width: 560px) {
  .hero {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-cta {
    width: 100%;
    justify-content: center;
  }

  .hero-cta :is(.btn-primary, .btn-outline) {
    width: min(100%, 320px);
    justify-content: center;
  }

  .section-title,
  .hero-title {
    letter-spacing: 1.2px;
  }

  .hero-desc {
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.7;
  }
}

@media (max-width: 360px) {
  .lang-bar {
    padding: 0 10px;
    gap: 6px;
  }

  .lang-bar-logo {
    font-size: 18px;
    letter-spacing: 3px;
  }

  .lang-btn {
    padding: 4px 7px;
    font-size: 10px;
    letter-spacing: 1px;
  }

  .header-nav {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (min-width: 1600px) {
  :is(.hero, .services, .why, .mission, .values, .team-section, .contacts, .form-section, .cta-section, .steps, .process, .faq, .hours-banner) {
    padding-left: clamp(96px, 9vw, 220px);
    padding-right: clamp(96px, 9vw, 220px);
  }

  .hero-desc {
    max-width: 760px;
  }
}

@media (min-width: 2200px) {
  .lang-bar {
    height: 76px;
    padding-left: 56px;
    padding-right: 56px;
  }

  body {
    padding-top: 76px;
    font-size: 18px;
  }

  .hero-title {
    font-size: clamp(34px, 3.3vw, 72px);
  }

  .section-title {
    font-size: clamp(28px, 2.6vw, 58px);
  }
}