/*
 * Public typography contract.
 * Keep this stylesheet last so legacy page CSS cannot restore Oswald.
 */
body {
  font-family: "Inter", Arial, sans-serif;
}

body h1,
body h1 :where(span, strong, b, em) {
  font-family: "DMF", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal;
  text-transform: uppercase !important;
}

body :where(p, li, dd, blockquote, figcaption) {
  font-family: "Inter", Arial, sans-serif !important;
  text-transform: none !important;
}

.diagnosis-bottom {
  font-family: "Inter", Arial, sans-serif !important;
  text-transform: none !important;
}

/* Shared public header geometry contract. This file is loaded last on every
 * public route so page-specific styles cannot shift the global navigation. */
body {
  padding-top: calc(var(--top-strip-height) + var(--main-nav-height) + env(safe-area-inset-top, 0px)) !important;
}

body.hero-chrome-hidden {
  padding-top: calc(var(--top-strip-height) + var(--main-nav-height) + env(safe-area-inset-top, 0px)) !important;
}

.top-strip,
body.hero-chrome-hidden .top-strip {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--top-strip-height) !important;
  min-height: var(--top-strip-height) !important;
  margin: 0 !important;
  transform: none !important;
}

.main-nav,
body.hero-chrome-hidden .main-nav,
body.solution-template .main-nav {
  position: fixed !important;
  top: calc(var(--top-strip-height) + env(safe-area-inset-top, 0px)) !important;
  right: 0 !important;
  left: 0 !important;
  display: flex !important;
  width: 100% !important;
  height: var(--main-nav-height) !important;
  min-height: var(--main-nav-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

.main-nav > .container,
body.solution-template .main-nav > .container {
  width: min(var(--content-max), calc(100% - (var(--site-gutter) * 2))) !important;
  max-width: none !important;
  height: var(--main-nav-height) !important;
  min-height: var(--main-nav-height) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
  align-items: center !important;
}

.main-nav .navbar-brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
  padding: 0;
}

.main-nav .brand-logo-header,
body.solution-template .brand-logo-header {
  display: block;
  width: auto;
  height: clamp(40px, 3.5vw, 58px);
  max-width: 360px;
  object-fit: contain;
}

.main-nav .navbar-collapse {
  align-items: center;
}

.main-nav .navbar-nav,
body.solution-template .navbar-nav {
  align-items: center;
  gap: clamp(34px, 3.6vw, 70px) !important;
}

.main-nav .nav-link,
body.solution-template .main-nav .nav-link {
  padding: 0 clamp(14px, 1.2vw, 22px);
  line-height: var(--main-nav-height);
}

@media (min-width: 992px) {
  body.hero-chrome-hidden {
    padding-top: 0 !important;
  }

  body.hero-chrome-hidden .top-strip,
  body.hero-chrome-hidden .main-nav {
    transform: translateY(-100%) !important;
  }
}

/* Solution hero copy follows the exact same horizontal grid as the header
 * logo. Legacy solution styles used viewport padding, which drifted at
 * different desktop widths. */
body.solution-redo-template .contact-page.solution-page .solution-hero {
  width: min(var(--content-max), calc(100% - (var(--site-gutter) * 2))) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

@media (max-width: 991.98px) {
  .main-nav .brand-logo-header,
  body.solution-template .brand-logo-header {
    height: 34px;
    max-width: min(230px, calc(100vw - 130px));
  }

  .main-nav .navbar-collapse {
    top: 100%;
  }

  .main-nav .navbar-nav,
  body.solution-template .navbar-nav {
    align-items: stretch;
    gap: 0 !important;
  }

  .main-nav .nav-link,
  body.solution-template .main-nav .nav-link {
    padding: 13px 0;
    line-height: 1.2;
  }
}

@media (max-width: 600px) {
  body.solution-redo-template .contact-page.solution-page .solution-hero {
    width: calc(100% - (var(--site-gutter) * 2)) !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 575.98px) {
  .main-nav .brand-logo-header,
  body.solution-template .brand-logo-header {
    height: 27px;
    max-width: min(190px, calc(100vw - 120px));
  }
}