/* Home hero on phones / tablets (900px and below), after hermanmiller.com: the picture first, then a solid colour block with the heading,
   the text and the button, dots underneath. Replaces the old photo-with-text-on-top slider, whose text could not be read on light pictures.
   (The desktop slider is untouched; the old phone slider is only hidden: js/index.js still looks for its elements.) */
.hm-hero { display: none; }
@media (max-width: 900px) {
    .slider_new_mobile { display: none !important; }
    .hm-hero { display: block; padding: 88px 0 0; background: #fff; }
    .hm-hero-track { display: flex; align-items: stretch; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .hm-hero-track::-webkit-scrollbar { display: none; }
    .hm-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
    .hm-slide-img { display: block; flex: none; aspect-ratio: 6 / 5; overflow: hidden; background: #eee; }
    .hm-slide-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
    .hm-slide-body { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; padding: 36px 24px 44px; background: #c43030; text-align: center; }
    .hm-slide--dark .hm-slide-body { background: #222222; }      /* slides 1, 2 and 5 */
    .hm-hero .hm-slide-body h2 { margin: 0 0 16px !important; padding: 0 !important; font-family: 'Geomanist', sans-serif; font-size: 30px !important; line-height: 1.2 !important; font-weight: normal; letter-spacing: -0.01em; text-transform: none; text-align: center; color: #fff !important; }
    .hm-hero .hm-slide-body p { margin: 0 0 28px !important; padding: 0 !important; max-width: 34em; font-family: 'Geomanist_r', sans-serif; font-size: 17px !important; line-height: 1.55 !important; text-align: center; color: #fff !important; }
    .hm-hero .hm-slide-body .hm-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 34px; border: 0; border-radius: 999px; background: #fff; font-family: 'Geomanist', sans-serif; font-size: 16px; line-height: 24px; text-decoration: none; color: #c43030 !important; }
    .hm-hero .hm-slide-body .hm-btn:hover, .hm-hero .hm-slide-body .hm-btn:focus-visible { background: #f4f4f4; }
    .hm-dots { display: flex; justify-content: center; gap: 14px; padding: 22px 0 26px; }
    .hm-dots button { width: 14px; height: 14px; padding: 0; border: 0; border-radius: 50%; background: #cfcfcf; cursor: pointer; transition: background-color .2s ease; }
    .hm-dots button.is-active { background: #1a1a1a; }
}
@media (min-width: 600px) and (max-width: 900px) {
    .hm-slide-body { padding: 48px 64px 56px; }
    .hm-hero .hm-slide-body h2 { font-size: 36px !important; }
}