/* V120 / V11 — browser-fit safeguard
   Keeps every page inside the visible browser viewport without right-side gaps
   or horizontal overflow in Chrome, Edge, Firefox and Safari. */

html {
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 320px;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* All primary page bands must span the complete browser width. */
body > .utility,
body > header,
body > main,
body > footer,
.site-header,
.header-promo,
main,
main > section,
.hero,
.site-footer {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Prevent wide grid/flex children from forcing the document beyond the viewport. */
header,
.site-header,
main,
footer,
.site-footer,
.container,
.header-inner,
.hero-copy,
.hero-art,
.hero-grid,
.v96-section,
.v100-page,
.pkg115,
.pkg115-hero__grid,
.pkg115-split,
.footer-top,
.footer-col,
.footer-brand {
  min-width: 0 !important;
}

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

/* Long addresses, URLs and labels may wrap, but never widen the page. */
a,
p,
span,
strong,
small,
li {
  overflow-wrap: break-word;
}

/* Keep normal desktop content centred while outer backgrounds remain edge-to-edge. */
.container {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Browser-safe responsive containment. */
@media (max-width: 900px) {
  body > .utility,
  body > header,
  body > main,
  body > footer,
  main > section {
    max-width: 100% !important;
  }
}