/* Horizontal navigation for iPad and tablet widths. */
@media (min-width: 701px) and (max-width: 1100px) {
  .page, .header, .navWrap, .nav, main, section, footer { min-width: 0; max-width: 100%; }
  .page { width: 100%; margin-inline: 0; padding-left: 28px; padding-right: 28px; background: #fff; }
  .header { grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: start; }
  .header > *, main > *, section > * { min-width: 0; }
  .logo { display: flex; align-items: center; justify-self: start; align-self: center; margin-top: 0; }
  .logo img { display: block; width: 104px; }
  .navBtn, .navBackdrop { display: none; }
  .navWrap { position: static; justify-self: end; width: max-content; min-width: 0; max-width: 100%; max-height: none; padding: 2px 0 0; align-items: flex-end; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
  .nav { width: max-content !important; max-width: 100%; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: clamp(6px, 1.2vw, 12px); }
  .navLink { display: block; min-height: 0; padding: 8px 0; border-radius: 0; background: transparent; font-size: clamp(9px, 1.42vw, 11px); letter-spacing: 0; }
  .navLink::after { display: block; }
  .navLink--quote { padding: 8px 10px; border: 1px solid rgba(22, 163, 74, .42); border-radius: 999px; }
  .navLine { display: block; width: 100%; min-width: 0; max-width: 100%; align-self: flex-end; margin-top: 8px; }
  .navSub { display: block; width: 100%; min-width: 0; max-width: 100%; margin-top: 7px; padding-bottom: 12px; font-size: 13px; text-align: right; }
  .navDropdownItem { position: relative; width: auto; display: flex; }
  .navDropdownTop { width: auto; gap: 5px; }
  .navDropdownTop .navLink { flex: none; }
  .navDropdownBtn { width: 18px; height: 18px; border: 0; border-radius: 0; background: transparent; }
  .navDropdownMenu { position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px; max-height: none; margin: 0; padding: 10px; border: 1px solid rgba(17, 17, 17, .08); border-radius: 16px; background: rgba(255, 255, 255, .97); box-shadow: 0 18px 50px rgba(0, 0, 0, .10); overflow: visible; opacity: 0; visibility: hidden; transform: translateY(8px); }
  .navDropdownMenu::before { display: block; }
  .navDropdownItem:hover .navDropdownMenu, .navDropdownToggle:checked + .navDropdownTop + .navDropdownMenu { opacity: 1; visibility: visible; transform: translateY(0); }
  .navDropdownLink { padding: 11px 14px; background: transparent; }

  main h1, main h2, main h3, main p,
  section h1, section h2, section h3, section p,
  footer a, footer p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  img {
    max-width: 100%;
  }

  .aboutImage,
  .feature__media,
  .wsInfo__media,
  .techSection__media,
  .glassCard,
  .infoMedia,
  .infoRight {
    width: 100%;
    margin-inline: auto;
  }

  .heroCopy,
  .heroText,
  .heroCtas,
  .aboutContent,
  .wsInfo__content,
  .glassServicesInner,
  .techSection__content,
  .infoLeft,
  .mattersInner,
  .needInner,
  .dangerInner,
  .faqInner {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  main p,
  section p {
    width: 100%;
  }

  .aboutImage { max-width: 560px; }
  .feature__media, .wsInfo__media, .techSection__media, .glassCard { max-width: 640px; }
  .infoMedia { max-width: 600px; }
  .infoRight { max-width: 540px; }
}

/* Mobile media and overflow guardrails shared by every page. */
@media (max-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .page,
  .header,
  main,
  section,
  footer,
  .heroInner,
  .bannerInner,
  .aboutInner,
  .infoInner,
  .wsInfo__inner,
  .techSection__inner,
  .quoteGrid {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  main > *,
  section > *,
  .heroInner > *,
  .aboutInner > *,
  .infoInner > *,
  .wsInfo__inner > *,
  .techSection__inner > *,
  .quoteGrid > * {
    min-width: 0;
    max-width: 100%;
  }

  main h1,
  main h2,
  main h3,
  main p,
  section h1,
  section h2,
  section h3,
  section p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  img {
    max-width: 100%;
  }

  .aboutImage,
  .feature__media,
  .wsInfo__media,
  .techSection__media,
  .infoMedia,
  .infoRight {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
  }

  .aboutImage {
    display: none;
  }

  .aboutImage img,
  .wsInfo__img,
  .techSection__img,
  .infoMediaImg,
  .infoImg {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
  }

  .infoMedia {
    max-width: 360px;
  }

  .infoRight {
    max-width: 340px;
    display: none;
  }

  .glassCardMedia img,
  .feature__img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
  }

  .heroImage {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 10;
  }

  .heroImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .featureAlt {
    background: radial-gradient(520px 320px at 50% 45%, rgba(34, 197, 94, 0.055), transparent 72%);
  }
}