@property --services-glow { syntax: "<color>"; inherits: false; initial-value: transparent; }
.services { --services-surface: var(--color-services-background); --services-glow: var(--color-services-glow); --color-button-hover-copy: var(--color-background); position: relative; overflow: clip; padding-block: 0; background-color: var(--services-surface); background-image: radial-gradient(ellipse at 14% 33%, var(--services-glow) 0, transparent 56%); color: var(--color-on-accent); --color-focus: var(--color-focus-inverse); transition: color var(--dur-panel) var(--ease-standard), background-color var(--dur-panel) var(--ease-standard), --services-glow var(--dur-panel) var(--ease-standard); }
.services[data-service-theme="dark"] { --services-surface: var(--color-inverse-background); --services-glow: var(--color-services-glow-dark); --color-orbit: var(--color-inverse-caption); }
.services[data-service-theme="light"] { --services-surface: var(--color-hero-surface); --services-glow: var(--color-background); --color-on-accent: var(--color-text); --color-service-copy: var(--color-text); --color-orbit: var(--color-text); --color-focus: var(--color-brand-emphasis); }
.services__layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 27.5rem; gap: var(--space-10); min-block-size: 60.6875rem; }
.services__content { padding-block: var(--space-16) 9.125rem; }
.services__offerings { position: relative; display: grid; margin-block-start: 10.1875rem; }
.services[data-service-ready] .services__offerings { grid-template-rows: minmax(16.25rem, auto) auto auto; }
.services__orbit { position: absolute; inline-size: 62.25rem; inset-inline-start: -20.75rem; inset-block-start: 0.1875rem; opacity: 0.85; }
.services__gallery { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-10); position: absolute; inset-block: 0; inset-inline-end: 5.6875rem; inline-size: 27.5rem; }
@media (width < 75rem) {
    .services__layout { grid-template-columns: minmax(0, 1fr) 20rem; min-block-size: 52rem; gap: var(--space-8); }
    .services__gallery { inline-size: 20rem; inset-inline-end: var(--container-gutter); gap: var(--space-6); }
    .services__offerings { margin-block-start: var(--space-12); }
    .services[data-service-ready] .services__offerings { grid-template-rows: minmax(12rem, auto) auto auto; }
}
@media (width < 48rem) {
    .services__layout { display: block; min-block-size: 0; }
    .services__content { padding-block: var(--space-12); }
    .services__offerings { margin-block-start: var(--space-16); }
    .services[data-service-ready] .services__offerings { grid-template-rows: minmax(8rem, auto) auto auto; }
    .services__orbit { inline-size: 42rem; inset-block-start: -3rem; inset-inline-start: -20rem; }
    .services__gallery { position: relative; inset: auto; inline-size: 100%; block-size: 28rem; gap: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) { .services { transition: none; } }