/* Responsive — 4-tier system: 1199.98 / 991.98 / 767.98 / 575.98
   Ported verbatim from the approved slice (assets/css/responsive.css).
   See references/responsive-breakpoints.md. Selector changes from the
   slice: .nav-toggle -> .mobile-nav-toggle (this theme's own off-canvas
   toggle, not mmenu — see header.css). */

/* ───── Tablet landscape ≤ 1199.98px ───── */
@media (max-width: 1199.98px) {
  :root { --skin-gutter: 40px; }

  .site-header__nav { gap: 28px; }
  .site-header__nav .menu-item > a { font-size: 15px; }

  .hero { height: auto; min-height: 780px; }
  .hero__inner { padding-top: 140px; padding-bottom: 80px; max-width: 640px; }

  .about__row { gap: 60px; }
  .about__heading { flex-basis: 320px; }

  .materials__row { flex-direction: column; }
  .materials__row .material-card { width: 100%; height: 620px; }
  .materials__row .material-card--text-outside { height: auto; }
  .materials__row--slider { flex-direction: row; }
  /* Bento layout needs real horizontal room for its 2-row-tall first card —
     collapse back to a plain stacked column below tablet-landscape; the
     rule above then applies to it same as any other grid-mode card. */
  .materials__row--featured { display: flex; }

  .sustainable__cards--cols-3 .sustainable-card,
  .sustainable__cards--cols-4 .sustainable-card { width: calc(50% - 16px); }
  /* Bento layout needs real horizontal room for its 2-row-tall first card —
     collapse back to a plain wrapping row below tablet-landscape; the width
     rule above then applies to it same as any other grid-mode card. */
  .sustainable__cards--featured { display: flex; flex-wrap: wrap; }

  .news__grid { flex-wrap: wrap; }
  .news__grid--cols-3 .news-card,
  .news__grid--cols-4 .news-card { width: calc(50% - 15px); }

  .trusted-contact__cols { flex-direction: column; }
  .trusted-contact__col { padding: 70px 40px; }

  .showcase__row { height: 420px; }
  .showcase-card { clip-path: polygon(30px 0, 100% 0, calc(100% - 30px) 100%, 0 100%); }
  .showcase-card + .showcase-card { margin-left: -30px; }
}

/* ───── Tablet portrait ≤ 991.98px — off-canvas nav kicks in ───── */
@media (max-width: 991.98px) {
  .site-header__nav,
  .site-header__actions .lang-pill,
  .site-header__actions .skin-btn { display: none !important; }
  .mobile-nav-toggle { display: flex; }
  .site-header .skin-inner { padding-top: 18px; padding-bottom: 18px; }
  .has-fixed-header { padding-top: 102px; } /* 18 + 18 padding + 66 logo, matches this tier's shorter header */

  .hero { min-height: 640px; }
  .hero__inner { padding-top: 120px; gap: 32px; }
  .hero__title { font-size: 44px; line-height: 50px; }

  .about { padding-top: 70px; }
  .about__row { flex-direction: column; gap: 32px; }
  .about__heading { flex-basis: auto; }
  .about__image-wrap { margin-top: 48px; margin-bottom: -60px; height: 420px; }

  .why-choose-us { padding-top: 60px; padding-bottom: 60px; }
  .pillar.is-open { height: auto; min-height: 320px; }
  .pillar__content { padding: 40px 32px; }

  .materials__row { gap: 16px; }
  .material-card { height: 520px; }
  .material-card--text-outside { height: auto; }
  .material-card__content { padding: 56px 32px 0; }
  .material-card--text-outside .material-card__content { padding: 24px 8px 0; }

  .sustainable { padding-top: 70px; padding-bottom: 70px; }
  .sustainable__cards--cols-3 .sustainable-card,
  .sustainable__cards--cols-4 .sustainable-card { width: 100%; }

  .news { padding-top: 60px; padding-bottom: 60px; }
  .news__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .news__grid--cols-2 .news-card,
  .news__grid--cols-3 .news-card,
  .news__grid--cols-4 .news-card { width: 100%; }
  .news-card__media { height: 380px; }

  .trusted-contact__col { padding: 56px 24px; }

  .logo-wall__cell { width: 220px; height: 200px; padding: 0 24px; }

  /* The interlocking diagonal cut needs real horizontal room per card —
     stack into a plain column and drop the clip-path/overlap below tablet
     landscape rather than let the angle get crushed on narrow cards. */
  .showcase__row { flex-direction: column; height: auto; }
  .showcase-card { clip-path: none; height: 320px; }
  .showcase-card + .showcase-card { margin-left: 0; margin-top: 4px; }

  .site-footer__row1 { flex-wrap: wrap; }
  .site-footer__nav { order: 3; width: 100%; justify-content: flex-start; gap: 24px; flex-wrap: wrap; }
}

/* ───── Mobile ≤ 767.98px ───── */
@media (max-width: 767.98px) {
  :root { --skin-gutter: 24px; }

  .site-header__logo img { width: 150px; height: auto; }
  .has-fixed-header { padding-top: 84px; } /* 18 + 18 padding + 48 logo, matches this tier's shorter header */

  .hero { min-height: 560px; }
  .hero__inner { padding-top: 100px; max-width: 100%; padding-left: 8px; padding-right: 8px; }
  .hero__buttons { flex-direction: column; width: 100%; }
  .hero__buttons .skin-btn { justify-content: center; }

  .about__copy { font-size: 16px; line-height: 26px; }
  .about__copy em { font-size: 19px; line-height: 27px; }
  .about__image-wrap { height: 280px; margin-bottom: -40px; }

  .pillar__content { gap: 24px; padding: 32px 20px; }
  .pillar__body { font-size: 15px; }

  .material-card { height: 460px; }
  .material-card--text-outside { height: auto; }
  .material-card__content { gap: 24px; }
  .materials__row--slider.materials__row--cols-1 .material-card,
  .materials__row--slider.materials__row--cols-2 .material-card,
  .materials__row--slider.materials__row--cols-3 .material-card,
  .materials__row--slider.materials__row--cols-4 .material-card { width: 86%; }

  .sustainable-card { height: auto; padding: 24px; gap: 20px; }
  .sustainable__cards--slider.sustainable__cards--cols-3 .sustainable-card,
  .sustainable__cards--slider.sustainable__cards--cols-4 .sustainable-card { width: 86%; }

  .news-card__media { height: 260px; }

  .showcase-card { height: 260px; }
  .showcase-card__title { bottom: 24px; padding: 0 24px; font-size: 20px; line-height: 27px; }

  .quote-form, .offices { max-width: 100%; }

  .logo-wall__cell { width: 160px; height: 150px; padding: 0 16px; }

  .site-footer__row1 { flex-direction: column; align-items: flex-start; gap: 20px; }
  .site-footer__row2 { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ───── Small mobile ≤ 575.98px ───── */
@media (max-width: 575.98px) {
  .site-header .skin-inner { padding-top: 14px; padding-bottom: 14px; }
  .site-header__logo img { width: 120px; height: auto; }

  .hero__title { font-size: 30px; line-height: 36px; }

  .sustainable__cards { gap: 16px; }

  .site-footer__row2 { font-size: 12px; }
}