/* Homepage service bento overrides loaded after the legacy stylesheet. */
.service-overview {
  scroll-margin-top: 128px;
}

.service-overview .overview-link-grid.bento-container {
  width: min(calc(100vw - clamp(24px, 4vw, 64px)), 1460px) !important;
  max-width: none !important;
  height: clamp(500px, calc(100svh - 132px), 780px) !important;
  margin-top: clamp(18px, 3.2vw, 44px) !important;
  scroll-margin-top: 128px;
  position: relative;
  z-index: 140;
}

.service-overview .bento-container.rows-3-1-1 { grid-template-rows: 2.2fr 1.35fr 1.35fr !important; }
.service-overview .bento-container.rows-1-3-1 { grid-template-rows: 1.35fr 2.2fr 1.35fr !important; }
.service-overview .bento-container.rows-1-1-3 { grid-template-rows: 1.35fr 1.35fr 2.2fr !important; }
.service-overview .bento-container.cols-3-1-1 { grid-template-columns: 2.2fr 1.35fr 1.35fr !important; }
.service-overview .bento-container.cols-1-3-1 { grid-template-columns: 1.35fr 2.2fr 1.35fr !important; }
.service-overview .bento-container.cols-1-1-3 { grid-template-columns: 1.35fr 1.35fr 2.2fr !important; }

body.home-page .cookie-settings-control {
  z-index: 40 !important;
}

body.home-page.is-service-bento-visible .cookie-settings-control {
  opacity: 0;
  pointer-events: none !important;
  transform: translateY(12px) scale(0.88);
}

.service-overview .hub-card.bento-item.center-piece strong,
.service-overview .hub-card.bento-item.is-urgent strong {
  font-size: clamp(1.08rem, 1.45vw, 1.85rem) !important;
  line-height: 1.02 !important;
  width: 12ch !important;
  max-width: 12ch !important;
}

.service-overview .bento-container.cols-1-3-1.rows-1-3-1 .bento-item.center-piece strong,
.service-overview .bento-container.cols-1-3-1.rows-1-1-3 .bento-item.is-urgent strong {
  font-size: clamp(2rem, 3.15vw, 4.5rem) !important;
  width: 13ch !important;
  max-width: 13ch !important;
}

.service-overview .hub-card.bento-item small {
  display: block !important;
  width: 32ch !important;
  max-width: 32ch !important;
  font-size: clamp(0.68rem, 0.78vw, 0.94rem) !important;
  line-height: 1.28 !important;
  font-weight: 760 !important;
}

@media (min-width: 901px) {
  .service-overview .hub-card.bento-item:not(.is-urgent) {
    min-width: 0;
  }

  .service-overview .hub-card.bento-item strong {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .service-overview .hub-card.bento-item:not(.center-piece):not(.is-urgent) strong {
    font-size: clamp(1rem, 1.45vw, 1.85rem) !important;
    line-height: 1.08 !important;
    width: 12ch !important;
    max-width: 12ch !important;
  }

  .service-overview .hub-card.bento-item {
    padding: clamp(16px, 1.8vw, 28px) !important;
    gap: clamp(6px, 0.75vw, 10px) !important;
  }

  .cookie-settings-control {
    right: max(18px, env(safe-area-inset-right)) !important;
    bottom: max(18px, env(safe-area-inset-bottom)) !important;
    transform: scale(0.88);
    transform-origin: right bottom;
  }
}

@media (max-width: 900px) {
  .service-overview .overview-link-grid.bento-container,
  .service-overview .bento-container.cols-3-1-1,
  .service-overview .bento-container.cols-1-3-1,
  .service-overview .bento-container.cols-1-1-3 {
    width: 100% !important;
    height: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    gap: clamp(14px, 3.2vw, 22px) !important;
  }

  .service-overview .bento-container.rows-3-1-1,
  .service-overview .bento-container.rows-1-3-1,
  .service-overview .bento-container.rows-1-1-3 {
    grid-template-rows: none !important;
  }

  .service-overview .bento-item,
  .service-overview .bento-item.is-urgent {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 260px !important;
  }

  .service-overview .hub-card.bento-item,
  .service-overview .hub-card.bento-item.center-piece,
  .service-overview .hub-card.bento-item.is-urgent {
    padding: clamp(18px, 3.6vw, 26px) !important;
    justify-content: flex-end !important;
    align-content: end !important;
  }

  .service-overview .hub-card.bento-item small,
  .service-overview .hub-card.bento-item:not(.center-piece):not(.is-urgent) small {
    display: block !important;
    max-width: min(31ch, 100%) !important;
    font-size: clamp(0.82rem, 2.2vw, 0.95rem) !important;
    line-height: 1.34 !important;
  }

  .service-overview .hub-card.bento-item strong,
  .service-overview .hub-card.bento-item.center-piece strong,
  .service-overview .hub-card.bento-item.is-urgent strong,
  .service-overview .hub-card.bento-item:not(.center-piece):not(.is-urgent) strong,
  .service-overview .bento-container.cols-1-3-1.rows-1-3-1 .bento-item.center-piece strong,
  .service-overview .bento-container.cols-1-3-1.rows-1-1-3 .bento-item.is-urgent strong {
    display: block !important;
    max-width: min(12ch, 100%) !important;
    font-size: clamp(1.65rem, 5vw, 2.55rem) !important;
    line-height: 1.08 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .service-overview .hub-card.bento-item > span:not(.hub-card-image):not(.image-overlay) {
    max-width: 100% !important;
    font-size: 0.7rem !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 720px) {
  .service-overview {
    scroll-margin-top: 104px;
  }

  .service-overview .overview-link-grid.bento-container,
  .service-overview .bento-container.cols-3-1-1,
  .service-overview .bento-container.cols-1-3-1,
  .service-overview .bento-container.cols-1-1-3 {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 24px !important;
  }

  .service-overview .bento-item,
  .service-overview .bento-item.is-urgent {
    min-height: min(380px, calc(100svh - 156px)) !important;
  }

  .service-overview .hub-card.bento-item,
  .service-overview .hub-card.bento-item.center-piece,
  .service-overview .hub-card.bento-item.is-urgent {
    min-height: min(380px, calc(100svh - 156px)) !important;
    padding: 24px !important;
    border-radius: 18px !important;
  }

  .service-overview .hub-card.bento-item .image-overlay {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.32) 42%, rgba(0, 0, 0, 0.82) 100%),
      linear-gradient(90deg, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.05) 72%) !important;
  }

  .service-overview .hub-card.bento-item strong,
  .service-overview .hub-card.bento-item.center-piece strong,
  .service-overview .hub-card.bento-item.is-urgent strong,
  .service-overview .hub-card.bento-item:not(.center-piece):not(.is-urgent) strong,
  .service-overview .bento-container.cols-1-3-1.rows-1-3-1 .bento-item.center-piece strong,
  .service-overview .bento-container.cols-1-3-1.rows-1-1-3 .bento-item.is-urgent strong {
    max-width: min(14ch, 100%) !important;
    font-size: clamp(1.9rem, 9.2vw, 2.75rem) !important;
    line-height: 1.08 !important;
  }

  .service-overview .hub-card.bento-item small,
  .service-overview .hub-card.bento-item:not(.center-piece):not(.is-urgent) small {
    max-width: min(34ch, 100%) !important;
    font-size: clamp(0.94rem, 4vw, 1.08rem) !important;
    line-height: 1.36 !important;
  }
}