.page-template-about_us_main #header {
  --about-admin-bar-offset: 0px;
  top: var(--about-admin-bar-offset);
  background: rgba(26, 24, 22, 0.95);
}

.page-template-about_us_main.admin-bar #header {
  --about-admin-bar-offset: 32px;
}

.page-template-about_us_main #header.header-scrolled {
  top: var(--about-admin-bar-offset);
  background: rgba(26, 24, 22, 0.85);
}

.page-template-about_us_main .mobile-nav-toggle {
  background: transparent;
  border: 0;
  padding: 4px;
}

.about-us-main {
  /* Reuse these responsive font sizes across About Us sections. */
  --about-h2-font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif;
  --about-h2-font-size: clamp(1.2rem, 2.6vw, 2rem);
  --about-h3-font-size: 1.15rem;
  --about-p-font-size: clamp(0.8rem, 1.6vw, 1.2rem);

  padding: 120px 0 60px;
  background: #fff;
  color: #444;
  overflow-wrap: anywhere;
}

.about-us-main__article {
  max-width: 960px;
  margin-inline: auto;
}

.about-us-main h1 {
  margin-bottom: 32px;
  font-size: clamp(1.5rem, 4.5vw, 2.5rem);
  color: #19365D;
}

.about-us-main__content {
  line-height: 1.75;
  display: flow-root;
}

.about-us-main__content :is(h2, h3, h4, h5, h6) {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #262626;
}

.about-us-main__content section[aria-labelledby^="dt-"] {
  padding: 0;
  margin: 0 0 40px;
  color: #000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--about-p-font-size);
  line-height: 1.35;
}

.about-us-main__content h3 {
  font-family: var(--about-h2-font-family);
  font-size: var(--about-h3-font-size);
  color: #19365d;
  font-weight: 700;
  line-height: 1.5;
}

.about-us-main__content h2[id^="dt-"] {
  margin: 0 0 12px;
  font-family: var(--about-h2-font-family);
  /* Also style the previous HTML fragment already pasted into WordPress. */
  color: #365f96 !important;
  font-size: var(--about-h2-font-size) !important;
  line-height: 1.5 !important;
  font-weight: 700;
}

.about-us-main__content section[aria-labelledby^="dt-"] p {
  margin: 0 0 24px;
}

.about-us-main__content section[aria-labelledby^="dt-"] p:last-child {
  margin-bottom: 0;
}

.about-us-main__content :is(img, video) {
  max-width: 100%;
  height: auto;
}

.about-us-main__content :is(figure, iframe) {
  max-width: 100%;
}

.about-us-main__content .droptruck-about-content {
  /* Adjust this value to resize all About Us section images. */
  --about-image-max-width: 640px;
}

.about-us-main__content .droptruck-about-content figure img {
  display: block;
  width: 100%;
  /* Override the inline max-width in HTML already pasted into WordPress. */
  max-width: min(100%, var(--about-image-max-width)) !important;
  height: auto;
  margin-inline: auto;
  border-radius: 12px;
}

.about-us-main__content > :first-child {
  margin-top: 0;
}

.about-us-main__content > :last-child {
  margin-bottom: 0;
}

.about-us-main__content a:not(.wp-element-button) {
  color: #24679e;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.page-template-about_us_main :is(a, button, input, textarea, select):focus-visible {
  outline: 3px solid #448ecb;
  outline-offset: 4px;
}

@media (max-width: 782px) {
  .page-template-about_us_main.admin-bar #header {
    --about-admin-bar-offset: 46px;
  }
}

@media (max-width: 600px) {
  .page-template-about_us_main.admin-bar #header.header-scrolled {
    --about-admin-bar-offset: 0px;
  }

  .about-us-main h1 {
    font-size: clamp(1rem, 4.5vw, 1.5rem);
  }

  .about-us-main {
    padding: 120px 0 40px;
  }

  .about-us-main__content :is(.alignleft, .alignright) {
    float: none;
    margin-inline: 0;
  }
}
