/* Full-width media strip; only its navigation returns to the shared site rails. */
.sj-service-media { position: relative; margin: 0; border-block: 1px solid var(--sj-rule-ink); background: var(--color-white); color: var(--color-navy); }
.sj-service-media-inner { box-sizing: border-box; width: 100%; margin: 0; }
.sj-service-media-carousel {
	--sj-service-slide-width: clamp(320px, 43vw, 660px);
	--sj-service-gap: 32px;
	box-sizing: border-box; position: relative; width: 100%; max-width: none;
	padding: 32px var(--sj-page-pad) 16px;
	overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity;
}
.sj-service-media-track { display: flex; align-items: stretch; gap: var(--sj-service-gap); width: 100%; transform: translate3d(var(--sj-service-offset, 0px), 0, 0); }
.sj-service-media-slide { box-sizing: border-box; display: flex; flex-direction: column; flex: 0 0 max(var(--sj-service-slide-width), var(--sj-service-loop-min-width, 0px)); width: max(var(--sj-service-slide-width), var(--sj-service-loop-min-width, 0px)); min-width: 0; max-width: none; margin: 0; scroll-snap-align: start; }
.sj-service-media-stage { position: relative; display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1.44; overflow: hidden; background: var(--color-white); }
.sj-service-media-stage > :is(img, video) { display: block; width: 100%; max-width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: contain; }
.sj-service-media-stage > img { object-fit: cover; object-position: center top; }
.sj-service-media-stage > video { background: var(--color-navy); }
.sj-service-media-slide[data-sj-media-kind="audio"] .sj-service-media-stage { background: var(--color-navy); }
.sj-service-audio-visual { position: absolute; inset: 0; display: block; width: 100%; height: 100%; color: var(--color-lime); font: 400 10px var(--font-body); pointer-events: none; }
.sj-service-media-stage > audio { position: absolute; z-index: 1; left: var(--sj-page-pad, 40px); bottom: 24px; display: block; width: calc(100% - var(--sj-page-pad, 40px) * 2); max-width: none; min-height: 44px; }
.sj-service-media-slide > figcaption { flex: 1 1 auto; margin: 24px 0 0; padding: 0 8px 0 0; color: var(--color-navy); font-family: var(--font-body); font-style: normal; line-height: 1.7; text-align: left; overflow-wrap: anywhere; }
.sj-service-media-slide > figcaption > :first-child { margin-top: 0; }
.sj-service-media-slide > figcaption > :last-child { margin-bottom: 0; }
.sj-service-media-slide > figcaption h3 { margin-block: 0 12px; color: inherit; font-size: clamp(22px, 2.4vw, 30px); font-style: normal; line-height: 1.25; }
.sj-service-media-slide > figcaption p { margin-block: 0 16px; }
.sj-service-media-slide > figcaption details { margin-top: 20px; }
.sj-service-media-slide > figcaption summary { width: fit-content; padding-block: 8px; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }
.sj-service-media-slide > figcaption a { color: inherit; text-underline-offset: .2em; }
.sj-service-media-carousel[data-sj-service-enhanced] { overflow: hidden; scroll-snap-type: none; touch-action: pan-y pinch-zoom; }
@supports (overflow: clip) { .sj-service-media-carousel[data-sj-service-enhanced] { overflow: clip; } }
.sj-service-media-carousel[data-sj-service-dragging] { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.sj-service-media-carousel:focus-visible { outline: 2px solid var(--color-navy); outline-offset: -4px; }
.sj-service-media:has(.sj-service-media-controls:not([hidden]))::after { position: absolute; left: 0; right: 0; bottom: 64px; height: 1px; background: var(--sj-rule-ink); pointer-events: none; content: ''; }
.sj-service-media-controls { box-sizing: border-box; position: relative; display: flex; align-items: stretch; gap: 0; width: min(calc(100% - var(--sj-site-gutter) * 2), var(--sj-site-width)); min-height: 65px; margin: 0 auto; padding: 0; border-top: 1px solid transparent; border-inline: 1px solid var(--sj-rule-ink); }
.sj-service-media-controls[hidden], .sj-service-media-controls [hidden] { display: none !important; }
.sj-service-media-position { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; margin: 0; padding: 12px var(--sj-page-pad, 40px); color: var(--color-navy); font: 12px/1.5 var(--font-body); }
body .sj-service-media-controls button.sj-service-media-control,
body .sj-service-media-controls button.sj-service-media-control:is(:hover, :focus, :focus-visible, :active) {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 64px;
	width: 64px; height: 64px; min-height: 64px; margin: 0; padding: 0;
	border: 0; border-left: 1px solid var(--sj-rule-ink); border-radius: 0;
	background: transparent; color: var(--color-navy); box-shadow: none; transform: none;
}
body .sj-service-media-controls button.sj-service-media-control:is(:hover, :active) { background: color-mix(in srgb, var(--color-navy) 7%, var(--color-offwhite)); }
body .sj-service-media-controls button.sj-service-media-control:focus-visible { outline: 2px solid var(--color-navy); outline-offset: -4px; }
.sj-service-media-control .sj-icon { font-size: 24px; }
.sj-service-media-status { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sj-service-media-error { position: absolute; z-index: 2; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 20px 20px 86px; background: var(--color-navy); color: var(--color-white); text-align: center; font: 13px/1.7 var(--font-body); }
.sj-service-media-error a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 767px) {
	.sj-service-media-carousel { --sj-service-slide-width: calc(100vw - 64px); --sj-service-gap: 24px; padding-inline: 20px; }
	.sj-service-media-stage > audio { left: 20px; bottom: 16px; width: calc(100% - 40px); }
	.sj-service-media-position { padding-inline: 20px; }
	.sj-service-media-controls { width: 100%; min-height: 57px; border-inline: 0; }
	.sj-service-media:has(.sj-service-media-controls:not([hidden]))::after { bottom: 56px; }
	body .sj-service-media-controls button.sj-service-media-control,
	body .sj-service-media-controls button.sj-service-media-control:is(:hover, :focus, :focus-visible, :active) { flex-basis: 56px; width: 56px; height: 56px; min-height: 56px; }
}
@media (forced-colors: active) { .sj-service-audio-visual { display: none; } }