@media (max-width: 767.98px) {
  .header {
    height: auto;
    min-height: var(--header-height);
  }

  .header__inner > div:first-child {
    display: flex;
    visibility: visible;
    opacity: 1;
  }

  .header__inner > div:first-child img.logo-1,
  .header__inner > div:first-child img.logo-2 {
    display: block;
    visibility: visible;
    opacity: 1;
    width: auto;
    object-fit: contain;
  }
}

.blockquote--leading-quote p {
  padding-left: 0.6em;
  text-indent: -0.6em;
}


@media (max-width: 575.98px) {
  .header__inner > div:first-child {
    width: 100%;
    flex-shrink: 0;
    justify-content: space-between;
  }

  .header__inner > div:first-child > a {
    display: block;
    min-width: 0;
  }

  .header__inner > div:first-child img.logo-1 {
    height: 55px;
    max-width: 48vw;
  }

  .header__inner > div:first-child img.logo-2 {
    height: 45px;
    max-width: 42vw;
  }

  /* Sticky header must stay within its reduced --header-height on mobile too —
     otherwise the fixed bar grows taller than the space reserved for it and
     covers/clips the top of whatever content sits right below it. */
  body.sticky-header .header__inner > div:first-child img.logo-1,
  body.sticky-header .header__inner > div:first-child img.logo-2 {
    height: 45px;
    max-width: 42vw;
  }

  /* Measured actual content height of the sticky mobile header (with the
     logo fix above) is 110px, not the 105px set in header.scss — bump the
     reserved space to match so #main-content's padding-top no longer falls
     short. */
  body.sticky-header {
    --header-height: 110px;
  }
}

.header__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: 1px solid var(--clr-03);
  border-radius: 15px;
  padding: 2px 20px;
}

.header__actions .navbar-toggler {
  border: 0;
  border-radius: 0;
  padding: 0;
}

.header__actions > a {
  color: var(--clr-03);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: bold;
  white-space: nowrap;
}

#footer {
  color: #262626;
}

#footer .footer__menu ul li a,
#footer .footer__menu ul li a:hover,
#footer .footer__menu ul li a:focus-visible {
  color: #000000 !important;
  -webkit-text-fill-color: #000000;
  text-decoration: underline !important;
}

@media (max-width: 767.98px) {
  /* The link row has no flex-wrap, so on narrow screens it just overflows
     past the container's padding instead of breaking onto a second line —
     that's what makes it look glued to both edges. Wrapping keeps it inside
     the existing container padding. */
  #footer .footer__menu ul {
    flex-wrap: wrap;
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .header__actions {
    width: auto;
    justify-content: flex-start;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .header__actions > a {
    font-size: 20px;
  }
}

@media (min-width: 992px) {
  .header__actions > a {
    font-size: 24px;
  }
}

@media (min-width: 1400px) {
  .header__actions > a {
    font-size: 30px;
  }
}

@media (max-width: 767.98px) {
  .teasers-slider .swiper-slide > div {
    aspect-ratio: auto;
    min-height: 0;
    display: block;
  }

  .teasers-slider .swiper-slide picture {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .teasers-slider .swiper-slide picture img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  .teasers-slider .swiper-slide > div > div:not(picture) {
    position: relative;
    z-index: 1;
    margin-top: -4rem;
  }
}