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

main,
.site-header,
.site-footer {
  max-width: 100%;
  overflow-x: clip;
}

.nav-wrap {
  gap: clamp(14px, 1.7vw, 28px);
}

.brand-logo {
  width: clamp(150px, 12vw, 190px);
  height: 52px;
}

.desktop-nav {
  min-width: 0;
  gap: clamp(8px, 1vw, 18px);
}

.desktop-nav a {
  font-size: clamp(0.72rem, 0.66vw, 0.82rem);
}

.nav-actions {
  flex: 0 0 auto;
}

.nav-actions .btn {
  min-height: 44px;
  padding: 10px 16px;
  font-size: clamp(0.72rem, 0.68vw, 0.82rem);
  line-height: 1.15;
  white-space: nowrap;
}

.mobile-nav .btn {
  white-space: nowrap;
}

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

.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.editorial-grid > *,
.footer-grid > * {
  min-width: 0;
}

@media (max-width: 720px) {
  .eyebrow {
    gap: 9px;
  }

  .eyebrow::before,
  .section-header.center .eyebrow::after {
    width: 24px;
    flex: 0 0 24px;
  }
}