/* Targeted fixes layered on top of site.css. Desktop is untouched. */

/* ---------------------------------------------------------------- logo */
.logo-wrapper_13Y {
  overflow: visible;
  max-width: 100%;
}

.logo-wrapper_13Y img,
.logo-image_1FE {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  clip-path: none;
}

@media (max-width: 767px) {
  /* Header row: logo left, burger right, nothing clipped */
  .logo-wrapper_13Y {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
  }

  .logo-wrapper_13Y img,
  .logo-image_1FE {
    width: auto;
    max-width: min(60vw, 190px);
    max-height: 64px;
    height: auto;
  }

  /* ------------------------------------------------------------- hero */
  /* The hero panel's large horizontal padding squeezed the headline into a
     ~230px column, which broke words mid-syllable. */
  .w-grid__item-inner.w-grid__item-panel {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .ui-heroTitle,
  .w-hero-title {
    font-size: clamp(28px, 8.5vw, 38px) !important;
    line-height: 1.15 !important;
    hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .ui-blockTitle,
  .w-title {
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.2 !important;
    hyphens: none;
    word-break: normal;
  }

  .ui-heroSubtitle,
  .ui-text,
  .w-body {
    hyphens: none;
    word-break: normal;
  }

  /* no horizontal scrolling */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
}