/* Bareeq layout stability: preserve current art direction; cap desktop content growth. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin-inline: 0; max-width: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, svg { max-width: 100%; }
/* Keep the visual sections full-bleed; constrain only their internal layout. */
.site-header { width: 100%; }
.hero { width: 100%; }
.hero-copy { max-width: 590px; }
.stats { max-width: 1600px; }
.service-grid { width: min(100%, 1240px); }
.feature-grid { width: min(100%, 1200px); }
/* Wide CSS viewports (often caused by browser zoom-out) should not keep enlarging content. */
@media (min-width: 1600px) {
  .site-header { padding-left: max(92px, calc((100vw - 1440px) / 2)); padding-right: max(92px, calc((100vw - 1440px) / 2)); }
  .hero { min-height: 700px; }
  .hero-copy { width: min(590px, 54%); }
  .hero h1 { font-size: 64px; }
  .hero-description { font-size: 17px; }
  .section { padding-left: max(75px, calc((100vw - 1290px) / 2)); padding-right: max(75px, calc((100vw - 1290px) / 2)); }
  .section-heading h2, .about h2, .portfolio h2, .contact h2 { font-size: 42px; }
  .portfolio-copy { padding-left: max(100px, calc((100vw - 1440px) / 2)); padding-right: max(100px, calc((100vw - 1440px) / 2)); }
  .contact { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 950px) {
  body { overflow-x: hidden; }
  .hero-copy { max-width: 620px; }
  .stats { max-width: none; }
}