.service-carousel {
    --services-ink: #2b2220;
    --services-muted: #665651;
    --services-accent: #75233b;
    --services-paper: #fffdf9;
    --services-line: #dcd0c6;
    margin-block: clamp(32px, 6vw, 80px);
    color: var(--services-ink);
}
.service-carousel__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 22px;
    margin-bottom: 14px;
}
.service-carousel__head h2 {
    font: 400 clamp(1.65rem, 4.1vw, 3.4rem)/1.08 var(--type-display, Georgia, serif);
    letter-spacing: -.035em;
}
.service-carousel__all, .service-carousel__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    width: fit-content;
    color: var(--services-accent);
    font-weight: 700;
    text-underline-offset: 4px;
}
.service-carousel__all:hover, .service-carousel__link:hover { text-decoration: underline }
.service-carousel__all .icon, .service-carousel__link .icon { width: 16px; height: 16px }
.service-carousel__frame {
    border: 1px solid var(--services-line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--services-paper);
}
.service-carousel__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    touch-action: pan-y pinch-zoom;
}
.service-carousel__slide {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
    padding: clamp(16px, 2.3vw, 32px);
    gap: clamp(22px, 4.2vw, 62px);
    align-items: center;
}
.service-carousel__stage > .service-carousel__slide[hidden] {
    display: grid !important;
    visibility: hidden;
    pointer-events: none;
}
.service-carousel__copy {
    display: grid;
    justify-items: start;
    min-width: 0;
    gap: 12px;
    padding-inline-start: clamp(0px, 1.2vw, 18px);
}
.service-carousel__copy h3 {
    font: 400 clamp(1.7rem, 3.65vw, 3.25rem)/1.04 var(--type-display, Georgia, serif);
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.service-carousel__copy p {
    max-width: 44ch;
    color: var(--services-muted);
    font-size: clamp(.94rem, 1.3vw, 1.08rem);
    line-height: 1.55;
}
.service-carousel__media {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 6px;
    overflow: hidden;
    background: #f1eae3;
}
.service-carousel__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.service-carousel__toolbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 18px;
    padding: 10px clamp(14px, 2.3vw, 32px);
    border-top: 1px solid var(--services-line);
}
.service-carousel__toolbar[hidden] { display: none }
.service-carousel__position {
    color: var(--services-muted);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.service-carousel__position [data-service-current] {
    color: var(--services-ink);
    font-weight: 700;
}
.service-carousel__select { min-width: 0 }
.service-carousel__select select {
    display: block;
    width: min(100%, 22rem);
    min-height: 44px;
    padding: 8px;
    border: 1px solid var(--services-line);
    border-radius: 5px;
    background: var(--services-paper);
    color: var(--services-ink);
    font-size: 1rem;
}
.service-carousel__buttons { display: flex; gap: 6px }
.service-carousel__buttons button {
    display: grid;
    place-items: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--services-line);
    border-radius: 50%;
    background: var(--services-paper);
    color: var(--services-accent);
}
.service-carousel__buttons button:hover { background: #f4e9e3 }
.service-carousel__previous { transform: rotate(180deg) }
.service-carousel__frame :focus-visible { outline: 2px solid var(--services-accent); outline-offset: 2px }
.service-carousel__fallback { columns: 240px; padding-inline-start: 22px }
.service-carousel__fallback li { margin-bottom: 7px }
.service-carousel__fallback a:hover { text-decoration: underline }
@media (max-width: 759px) {
    .service-carousel__slide {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        gap: 14px;
        align-items: start;
    }
    .service-carousel__media { grid-row: 1; max-height: 240px }
    .service-carousel__copy { gap: 6px; padding-inline: 0 }
    .service-carousel__copy h3 { font-size: clamp(1.7rem, 6.5vw, 2.45rem) }
}
@media (max-width: 500px) {
    .service-carousel__head { align-items: center }
    .service-carousel__head h2 { flex: 1 1 10rem }
    .service-carousel__all { font-size: .875rem }
    .service-carousel__toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 6px 10px;
    }
    .service-carousel__select { grid-column: 1 / -1; grid-row: 2 }
    .service-carousel__buttons { grid-column: 2; grid-row: 1 }
}
@media (max-height: 500px) and (min-width: 580px) and (max-width: 759px) and (orientation: landscape) {
    .service-carousel__slide {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto;
        align-items: center;
    }
    .service-carousel__media { grid-column: 2 }
    .service-carousel__copy { grid-column: 1; grid-row: 1 }
}
@media (prefers-reduced-motion: no-preference) {
    .service-carousel__slide.is-entering :is(.service-carousel__copy, .service-carousel__media) {
        animation: cm360-service-fade 220ms ease-out both;
    }
    @keyframes cm360-service-fade { from { opacity: .5 } to { opacity: 1 } }
}