/* Responsive refinements shared by the main site and training page. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

img,
video,
svg {
  max-width: 100%;
}

.container,
.hero-grid > *,
.about-layout > *,
.about-highlights > *,
.section-head > *,
.services-grid > *,
.methodology-layout > *,
.sectors-top > *,
.sector-card-grid > *,
.technology-layout > *,
.training-shell > *,
.contact-shell > *,
.footer-grid > * {
  min-width: 0;
}

section[id] {
  scroll-margin-top: 96px;
}

.top .nav img {
  display: block;
  width: auto;
  max-width: 230px;
  max-height: 72px;
  object-fit: contain;
}

@media (max-width: 980px) {
  .about-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

  .about-intro {
    max-width: none;
  }

  .site-header .nav {
    min-height: 82px;
    padding-block: 6px;
  }

  .menu-btn {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
  }

  .menu.open {
    max-height: calc(100dvh - 88px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .menu.open > a,
  .menu.open .menu-lang,
  .menu.open .nav-cta {
    width: 100%;
  }

  .hero {
    min-height: auto;
    padding: 126px 0 64px;
  }

  .hero-grid {
    gap: 38px;
  }

  .hero-reference {
    width: min(100%, 620px);
    margin-inline: auto;
  }

  .section-head {
    gap: 22px;
  }

  .footer-commercial-inner {
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .container {
    width: min(100% - 28px, 1220px);
  }

  .section {
    padding: 58px 0;
  }

  .hero {
    padding: 112px 0 54px;
  }

  .hero h1 {
    font-size: clamp(38px, 10.8vw, 52px);
    letter-spacing: -.05em;
  }

  .hero-actions,
  .contact-actions,
  .footer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .hero-actions .btn,
  .contact-actions .btn,
  .footer-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .hero-reference img,
  .hero-reference video {
    border-radius: 22px;
  }

  .about-layout {
    gap: 30px;
  }

  .about-highlights {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .about-card {
    min-height: auto;
    padding: 20px;
  }

  .about-band {
    min-width: 0;
    padding: 16px;
  }

  .services-grid {
    gap: 16px;
  }

  .media-frame {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .service-text {
    padding: 22px 18px 18px;
  }

  .service-text h3 {
    font-size: clamp(20px, 6.2vw, 28px);
  }

  .service-body {
    padding: 20px 18px 22px;
  }

  .methodology-layout,
  .technology-layout,
  .training-shell,
  .contact-shell {
    gap: 28px;
  }

  .method-benefits {
    overflow: hidden;
  }

  .technology-visual {
    height: auto !important;
    min-height: 0;
  }

  .technology-visual img,
  .technology-visual video {
    width: 100%;
    height: auto;
    min-height: 0;
    object-fit: cover;
  }

  .training-shell,
  .contact-shell {
    padding: 24px 18px;
    border-radius: 24px;
  }

  .training-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .training-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .certificate-code b,
  .contact-card a,
  .contact-card p {
    overflow-wrap: anywhere;
  }

  .contact-card {
    padding: 22px 18px;
  }

  .contact-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-grid {
    gap: 30px;
    padding-top: 42px;
  }

  .footer-commercial {
    padding: 30px 0;
  }

  .wa-direct {
    left: 12px;
    bottom: 12px;
    width: 56px;
    height: 56px;
  }

  .chat-wrap {
    right: 12px;
    bottom: 12px;
  }

  .chat-fab {
    width: 56px;
    height: 56px;
  }

  .chat-widget {
    right: 0;
    width: min(340px, calc(100vw - 24px));
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
  }

  /* Training / certificate page */
  .top .nav {
    height: 78px;
  }

  .top .nav img {
    width: auto;
    max-width: 155px;
    max-height: 58px;
    object-fit: contain;
  }

  .courses {
    grid-template-columns: minmax(0, 1fr);
  }

  .search-box,
  .hero-card {
    padding: 22px 18px;
  }

  .field {
    flex-direction: column;
  }

  .field button {
    width: 100%;
  }

  .result-body {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px;
  }
}

@media (max-width: 480px) {
  .container {
    width: min(100% - 24px, 1220px);
  }

  .section {
    padding: 52px 0;
  }

  .hero h1,
  .about-copy h2,
  .section-head h2,
  .technology-copy h2,
  .contact-copy h2,
  .verify-copy h2 {
    font-size: clamp(32px, 10vw, 42px);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .about-card {
    padding: 18px;
  }

  .about-band {
    align-items: center;
    gap: 12px;
  }

  .about-band-mark {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
    font-size: 18px;
  }

  .sector-card-grid,
  .contact-points {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-badge {
    font-size: 9px;
    padding: 6px 8px;
  }

  .certificate-preview {
    padding: 18px;
  }

  .footer-commercial {
    border-radius: 0 0 22px 22px;
  }

  .top .back {
    width: 44px;
    height: 44px;
    padding: 0;
    justify-content: center;
  }
}