.service-hero { --color-focus: var(--color-focus-inverse); position: relative; isolation: isolate; overflow: clip; padding-block-start: 7.5rem; background: radial-gradient(ellipse at 50% 36%, var(--color-services-glow), transparent 64%), var(--color-services-background); color: var(--color-on-accent); }
.service-hero__content { position: relative; display: grid; justify-items: center; align-content: space-between; gap: 3.5rem; min-block-size: 16.3125rem; text-align: center; }
.service-hero__orbit { position: absolute; z-index: -1; inset-inline-start: 50%; inset-block-start: var(--space-6); inline-size: min(74.107143%, 62.25rem); translate: -50% 0; }
.service-hero__copy { display: grid; justify-items: center; gap: var(--space-6); }
.service-hero__description { margin: 0; max-inline-size: 42.5rem; font-family: var(--font-heading); font-size: var(--fs-label); line-height: var(--line-height-label); overflow-wrap: anywhere; }
.service-hero__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-6); inline-size: 100%; }
.service-hero__gallery { position: relative; display: grid; gap: 1.25rem; margin-block-start: 5.5625rem; }
.service-hero__pause { position: absolute; z-index: 1; inset-inline-end: var(--container-gutter); inset-block-end: var(--space-4); opacity: 0; }
.service-hero__gallery:hover .service-hero__pause, .service-hero__pause:focus-visible, .service-hero__pause[aria-pressed="true"] { opacity: 1; }
@media (width < 75rem) {
    .service-hero__orbit { inline-size: 90%; inset-block-start: var(--space-12); }
    .service-hero__gallery { margin-block-start: var(--space-16); }
}
@media (width < 48rem) {
    .service-hero { padding-block-start: 7rem; }
    .service-hero__content { gap: var(--space-8); min-block-size: 0; }
    .service-hero__copy { gap: var(--space-4); }
    .service-hero__description { font-size: var(--fs-body); line-height: var(--line-height-control); }
    .service-hero__actions { gap: var(--space-3); }
    .service-hero__orbit { inline-size: 150%; inset-block-start: var(--space-12); }
    .service-hero__gallery { margin-block-start: var(--space-12); gap: var(--space-3); }
    .service-hero__pause { opacity: 1; }
}
.service-hero--dark .service-hero__content, .service-hero--light .service-hero__content { gap: 1.875rem; }
.service-hero--dark .service-hero__orbit, .service-hero--light .service-hero__orbit { inset-block-start: 2.2315rem; }
.service-hero--dark { background: var(--color-inverse-background); }
.service-hero__glow { position: absolute; z-index: -1; inset-block-start: -24.625rem; inset-inline-start: 50%; translate: -50% 0; inline-size: 99.25rem; max-inline-size: none; block-size: 81.8775rem; pointer-events: none; }

.service-hero--light { --color-focus: var(--color-brand-action); background: var(--color-hero-surface); color: var(--color-text); }
@media (width < 75rem) {
    /* Keep the decorative ellipse around the full, naturally wrapping content. */
    .service-hero--light .service-hero__orbit { inline-size: 150%; inset-block-start: 0; block-size: calc(100% + var(--space-4)); }
}