.page-grouped-carousel { margin-bottom: 0; }
.page-grouped-carousel .sec-hero { margin-top: 0; }
.grouped-carousel { position: relative; min-height: 100vh; padding: 100px 0; overflow: hidden; background: #fbfbfb; }
.grouped-carousel:before { position: absolute; z-index: 0; inset: 0; content: ''; background-image: var(--grouped-carousel-background, none); background-position: center; background-repeat: no-repeat; background-size: cover; pointer-events: none; }
.grouped-carousel > .wrapper { position: relative; z-index: 1; display: flex; flex-direction: column; max-width: 940px; }
.grouped-carousel__header { max-width: 560px; margin: 0 auto 78px; text-align: center; }
.grouped-carousel__eyebrow { display: block; margin-bottom: 8px; color: var(--mt-primary); font-family: var(--mt-font-secondary); font-size: 14px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.grouped-carousel__title { margin-bottom: 12px; color: #575757; }
.grouped-carousel__subtitle { max-width: 520px; margin: 0 auto; color: var(--mt-gray-700); }
.grouped-carousel__subtitle p { font-size: 16px; }
.grouped-carousel__slider { width: 100%; order: 2; margin: 0 auto; }
.grouped-carousel__slide-grid { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); align-items: stretch; min-height: 250px; overflow: hidden; border-radius: 10px; column-gap: 52px; }
.grouped-carousel__media { position: relative; min-width: 0; min-height: 250px; overflow: hidden; border-radius: 10px; }
.grouped-carousel__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.grouped-carousel__content { align-self: start; padding: 20px 20px 20px 0; }
.grouped-carousel__item-title { margin-bottom: 7px; color: #ec7000; font-size: 26px; font-weight: 400; }
.grouped-carousel__text p { line-height: 1.3; }
.grouped-carousel__controls { display: flex; align-items: center; justify-content: center; order: 4; gap: 20px; margin-top: 26px; }
.grouped-carousel__arrow { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; border: 2px solid var(--mt-primary); border-radius: 50%; color: var(--mt-primary); background: transparent; font-size: 23px; line-height: 1; transition: background-color .2s ease, color .2s ease, opacity .2s ease; }
.grouped-carousel__arrow:disabled { cursor: not-allowed; opacity: .32; }
.grouped-carousel__arrow:not(:disabled):hover { color: var(--mt-white); background: var(--mt-primary); }
.grouped-carousel__counter { min-width: 58px; color: var(--mt-gray); font-family: var(--mt-font-secondary); font-size: 16px; text-align: center; }
.grouped-carousel__counter-current { color: var(--mt-primary); font-weight: 700; }
.grouped-carousel__progress-scroll { order: 3; margin-top: 50px; overflow: hidden; }
.grouped-carousel__progress { position: relative; display: flex; min-height: calc(66px + var(--group-label-extra-space, 0px)); }
.grouped-carousel__progress-line { position: absolute; top: 10px; right: 0; left: 0; height: 3px; background: #d7d7d7; }
.grouped-carousel__progress-fill { display: block; width: 0; height: 100%; background: var(--mt-primary); transition: width .45s ease; }
.grouped-carousel__group { position: absolute; top: 0; left: var(--group-position); display: flex; flex-direction: column; align-items: center; width: max-content; max-width: 135px; padding: 0; border: 0; color: #a7a7a7; background: transparent; font-family: var(--mt-font-secondary); text-align: center; transform: translateX(-50%); }
.grouped-carousel__group:first-of-type { transform: none; }
.grouped-carousel__marker { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-bottom: 8px; border: 2px solid #d7d7d7; border-radius: 50%; background: var(--mt-white); transition: border-color .2s ease, background-color .2s ease; }
.grouped-carousel__marker-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.grouped-carousel__marker-image { display: block; width: 12px; height: 12px; object-fit: contain; }
.grouped-carousel__group-name { font-size: 11px; font-weight: 600; line-height: 1.25; text-transform: uppercase; transform: translateY(var(--group-label-offset, 0px)); transition: transform .2s ease; }
.grouped-carousel__group.is-active { color: var(--mt-primary); }
.grouped-carousel__group.is-active .grouped-carousel__marker { border-color: var(--mt-primary); background: var(--mt-primary); }
.grouped-carousel__group.is-active .grouped-carousel__marker-dot { background: var(--mt-white); }
.grouped-carousel__group:focus-visible, .grouped-carousel__arrow:focus-visible { outline: 3px solid var(--mt-black); outline-offset: 3px; }
@media (min-width: 768px) { .grouped-carousel { display: flex; align-items: center; } .grouped-carousel > .wrapper { width: 100%; } }
@media (max-width: 767.98px) { .grouped-carousel { min-height: auto; padding: 80px 0; } .grouped-carousel__header { margin-bottom: 50px; } .grouped-carousel__slide-grid { grid-template-columns: 1fr; min-height: 0; row-gap: 22px; } .grouped-carousel__media { width: min(100%, 280px); min-height: 0; height: 185px; margin: 0 auto; } .grouped-carousel__content { max-width: 380px; padding: 0 24px 30px; margin: 0 auto; } .grouped-carousel__progress-scroll { margin-top: 42px; } .grouped-carousel__progress { min-height: 92px; } .grouped-carousel__group-name { display: none; } .grouped-carousel__group.is-active .grouped-carousel__group-name { display: block; position: absolute; top: 30px; left: 50%; width: 130px; transform: translateX(-50%); } .grouped-carousel__group:first-of-type.is-active .grouped-carousel__group-name { left: 0; transform: none; text-align: left; } .grouped-carousel__group:last-of-type.is-active .grouped-carousel__group-name { right: 0; left: auto; transform: none; text-align: right; } }
@media (prefers-reduced-motion: reduce) { .grouped-carousel__arrow, .grouped-carousel__marker, .grouped-carousel__progress-fill { transition: none; } }