/* Shared responsive safeguards for every page that uses the site header. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  max-width: 100%;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body :is(main, section, article, aside, form, fieldset, .e-con, .e-con-inner) {
  min-width: 0;
}

body :is(img, video, iframe, embed, object, svg) {
  max-width: 100%;
}

body img,
body video {
  height: auto;
}

body :is(h1, h2, h3, h4, p, a, button, label, li, strong) {
  overflow-wrap: anywhere;
}

body :is(input, select, textarea, button) {
  max-width: 100%;
}

body main [style*="width:"] {
  max-width: 100%;
}

body main table {
  width: 100%;
  max-width: 100%;
}

@media (min-width: 640px) and (max-width: 1023px) {
  /* Keep service and feature cards readable before desktop breakpoints kick in. */
  body main .grid:is(
    .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-7, .grid-cols-8, .grid-cols-9, .grid-cols-10, .grid-cols-11, .grid-cols-12,
    [class~="md:grid-cols-3"], [class~="md:grid-cols-4"], [class~="md:grid-cols-5"], [class~="md:grid-cols-6"], [class~="md:grid-cols-7"], [class~="md:grid-cols-8"], [class~="md:grid-cols-9"], [class~="md:grid-cols-10"], [class~="md:grid-cols-11"], [class~="md:grid-cols-12"]
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body main :is(.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl) {
    max-width: 100%;
  }
}

@media (max-width: 767px) {
  body #masthead #header-sticky > .e-con-inner {
    width: calc(100% - 24px) !important;
  }

  body main {
    width: 100%;
    max-width: 100%;
  }

  body main h1 {
    font-size: clamp(2rem, 7.2vw, 3rem) !important;
    line-height: 1.12 !important;
  }

  body main h2 {
    font-size: clamp(1.55rem, 5.4vw, 2.35rem) !important;
    line-height: 1.2 !important;
  }

  body main :is(
    .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-7, .grid-cols-8, .grid-cols-9, .grid-cols-10, .grid-cols-11, .grid-cols-12,
    [class~="sm:grid-cols-3"], [class~="sm:grid-cols-4"], [class~="sm:grid-cols-5"], [class~="sm:grid-cols-6"], [class~="sm:grid-cols-7"], [class~="sm:grid-cols-8"], [class~="sm:grid-cols-9"], [class~="sm:grid-cols-10"], [class~="sm:grid-cols-11"], [class~="sm:grid-cols-12"]
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body main :is(.flex-row, .flex-nowrap) {
    min-width: 0;
  }

  body main :is(button, input[type="submit"], a[class*="btn"], button[class*="btn"]) {
    white-space: normal;
  }

  body main table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  body main :is(.rounded-3xl, .rounded-2xl)[class*="p-12"],
  body main :is(.rounded-3xl, .rounded-2xl)[class*="p-10"] {
    padding: 1.25rem !important;
  }
}

@media (max-width: 420px) {
  body #masthead #header-sticky > .e-con-inner {
    width: calc(100% - 16px) !important;
  }

  body main .grid.grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body main :is(.gap-10, .gap-12, .gap-14, .gap-16) {
    gap: 1.25rem !important;
  }

  body main :is(.p-8, .p-9, .p-10, .p-12, .p-16) {
    padding: 1rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}