.wp-block-kipchakoff-services-reel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3rem, 7vw, 7.5rem);
	padding-inline: var(--kip-page-gutter, clamp(1rem, 3vw, 2.5rem));
}

.wp-block-kipchakoff-services-reel:not(.has-background) {
	background:
		linear-gradient(90deg, color-mix(in srgb, currentColor 7%, transparent) 1px, transparent 1px) 0 0 / 3.5rem 3.5rem,
		linear-gradient(0deg, color-mix(in srgb, currentColor 6%, transparent) 1px, transparent 1px) 0 0 / 3.5rem 3.5rem,
		radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--kip-color-orange, #ff5a1f) 24%, transparent) 0 10rem, transparent 24rem),
		linear-gradient(135deg, #101214 0%, #151a1c 48%, #0c0d0f 100%);
}

.wp-block-kipchakoff-services-reel:not(.has-text-color) {
	color: #fff;
}

.wp-block-kipchakoff-services-reel::before,
.wp-block-kipchakoff-services-reel::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: -1;
}

.wp-block-kipchakoff-services-reel::before {
	inset-inline: clamp(1rem, 5vw, 5rem);
	inset-block-start: clamp(1rem, 4vw, 3rem);
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--kip-color-orange, #ff5a1f) 70%, transparent), transparent);
	opacity: 0.72;
}

.wp-block-kipchakoff-services-reel::after {
	inset-block-end: 8%;
	inset-inline-end: -10rem;
	width: 28rem;
	aspect-ratio: 1;
	border: 1px solid color-mix(in srgb, var(--kip-color-orange, #ff5a1f) 28%, transparent);
	border-radius: 50%;
	opacity: 0.32;
}

.kip-services-reel__layout {
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	margin-inline: auto;
	max-width: var(--kip-wide-width, 1280px);
}

.kip-services-reel__intro {
	position: relative;
	max-width: min(100%, 58rem);
}

.kip-services-reel__intro > * {
	margin-inline: 0;
}

.kip-services-reel__intro::after {
	content: "PRIMARY SIX";
	display: block;
	margin-block-start: 1.5rem;
	color: color-mix(in srgb, currentColor 10%, transparent);
	font-size: clamp(2.5rem, 11vw, 6.25rem);
	font-weight: 900;
	letter-spacing: 0.06em;
	line-height: 0.8;
}

.kip-services-reel__intro h2 {
	max-width: 18ch;
	margin-block: 0.75rem 1rem;
	font-size: clamp(2.25rem, 7vw, 4.25rem);
	line-height: 1;
	letter-spacing: 0;
	text-wrap: balance;
}

.kip-services-reel__lead {
	max-width: 38rem;
	font-size: clamp(1rem, 3vw, 1.16rem);
	line-height: 1.72;
	color: color-mix(in srgb, currentColor 78%, transparent);
}

.kip-services-reel__actions {
	margin-block-start: 1.5rem;
}

.kip-services-reel__actions .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.kip-services-reel__panel-actions .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color) {
	border-color: color-mix(in srgb, currentColor 28%, transparent);
	color: currentColor;
}

.kip-services-reel__actions .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background),
.kip-services-reel__panel-actions .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) {
	background: color-mix(in srgb, var(--kip-color-base, #fff) 10%, transparent);
}

.kip-services-reel__actions .wp-block-button.is-style-outline .wp-block-button__link:hover,
.kip-services-reel__actions .wp-block-button.is-style-outline .wp-block-button__link:focus,
.kip-services-reel__panel-actions .wp-block-button.is-style-outline .wp-block-button__link:hover,
.kip-services-reel__panel-actions .wp-block-button.is-style-outline .wp-block-button__link:focus {
	border-color: color-mix(in srgb, var(--kip-color-orange, #ff5a1f) 65%, currentColor);
	color: #fff;
}

.kip-services-reel__track {
	position: relative;
	display: grid;
	gap: clamp(1rem, 4vw, 1.5rem);
	padding-inline-start: 0;
}

.kip-services-reel__track::before,
.kip-services-reel__track::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-start: -0.8rem;
	height: 2px;
	border-radius: 999px;
}

.kip-services-reel__track::before {
	background: color-mix(in srgb, currentColor 18%, transparent);
}

.kip-services-reel__track::after {
	background: linear-gradient(90deg, var(--kip-color-orange, #ff5a1f), var(--kip-color-gold, #b8862c), transparent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.kip-services-reel.is-in-viewport .kip-services-reel__track::after,
.wp-admin .kip-services-reel__track::after {
	transform: scaleY(1);
}

.kip-services-reel__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	overflow: hidden;
	border: 1px solid color-mix(in srgb, currentColor 13%, transparent);
	border-radius: 8px;
	background: linear-gradient(135deg, color-mix(in srgb, #fff 9%, transparent), color-mix(in srgb, #fff 3%, transparent));
	box-shadow: 0 26px 70px color-mix(in srgb, #000 28%, transparent);
	backdrop-filter: blur(18px);
	transition:
		border-color 0.28s ease,
		box-shadow 0.28s ease,
		transform 0.28s ease;
}

.kip-services-reel__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(90deg, var(--kip-color-orange, #ff5a1f), transparent 18%),
		linear-gradient(180deg, color-mix(in srgb, #fff 12%, transparent), transparent 45%);
	opacity: 0.2;
}

.kip-services-reel__panel::after {
	content: "";
	position: absolute;
	inset-inline: 1rem;
	inset-block-start: 1rem;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 42%, transparent), transparent);
}

.kip-services-reel__panel:hover,
.kip-services-reel__panel:focus-within {
	transform: translateY(-0.3rem);
	border-color: color-mix(in srgb, var(--kip-color-orange, #ff5a1f) 58%, transparent);
	box-shadow: 0 34px 90px color-mix(in srgb, #000 36%, transparent);
}

.kip-services-reel__media {
	position: relative;
	min-height: clamp(14rem, 54vw, 22rem);
	margin: 0;
	overflow: hidden;
	background: color-mix(in srgb, #fff 8%, transparent);
	clip-path: inset(0 round 8px 8px 0 0);
}

.kip-services-reel__media::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background:
		linear-gradient(115deg, transparent 0 36%, color-mix(in srgb, #fff 30%, transparent) 46%, transparent 58%),
		linear-gradient(180deg, transparent 50%, color-mix(in srgb, #000 35%, transparent));
	transform: translateX(-40%);
	opacity: 0;
	transition:
		opacity 0.28s ease,
		transform 0.5s ease;
}

.kip-services-reel__panel:hover .kip-services-reel__media::before,
.kip-services-reel__panel:focus-within .kip-services-reel__media::before {
	opacity: 1;
	transform: translateX(35%);
}

.kip-services-reel__image,
.kip-services-reel__image img {
	width: 100%;
	height: 100%;
	margin: 0;
}

.kip-services-reel__image img {
	display: block;
	min-height: clamp(14rem, 54vw, 22rem);
	object-fit: cover;
	filter: saturate(1.04) contrast(1.04);
	transform: scale(1.02);
	transition:
		filter 0.35s ease,
		transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.kip-services-reel__panel:hover .kip-services-reel__image img,
.kip-services-reel__panel:focus-within .kip-services-reel__image img {
	filter: saturate(1.1) contrast(1.08);
	transform: scale(1.08);
}

.kip-services-reel__panel-body {
	position: relative;
	z-index: 3;
	display: grid;
	align-content: center;
	gap: 0.85rem;
	min-width: 0;
	padding: clamp(1.25rem, 5vw, 2rem);
}

.kip-services-reel__number {
	display: inline-grid;
	place-items: center;
	width: 3.35rem;
	min-height: 3.35rem;
	margin: 0;
	border-radius: 8px;
	background: linear-gradient(135deg, var(--kip-color-orange, #ff5a1f), var(--kip-color-orange-dark, #a8320c));
	box-shadow: 0 16px 34px color-mix(in srgb, var(--kip-color-orange, #ff5a1f) 30%, transparent);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1;
}

.kip-services-reel__panel-body h3 {
	max-width: 16ch;
	margin-block: 0;
	color: currentColor;
	font-size: clamp(1.55rem, 6vw, 2.45rem);
	line-height: 1.03;
	letter-spacing: 0;
	text-wrap: balance;
}

.kip-services-reel__copy,
.kip-services-reel__scope {
	margin-block: 0;
}

.kip-services-reel__copy {
	max-width: 34rem;
	color: color-mix(in srgb, currentColor 78%, transparent);
	font-size: clamp(0.98rem, 2.8vw, 1.08rem);
	line-height: 1.68;
}

.kip-services-reel__scope {
	display: inline-flex;
	width: fit-content;
	max-width: 100%;
	border-block-start: 1px solid color-mix(in srgb, currentColor 16%, transparent);
	padding-block-start: 0.75rem;
	color: color-mix(in srgb, var(--kip-color-orange, #ff5a1f) 82%, #fff 18%);
	font-size: 0.82rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1.45;
	text-transform: uppercase;
}

.kip-services-reel__panel-actions {
	margin-block-start: 0.35rem;
}

.wp-admin .wp-block-kipchakoff-services-reel {
	outline: 1px dashed color-mix(in srgb, var(--kip-color-orange, #ff5a1f) 45%, transparent);
}

@media (min-width: 782px) {
	.kip-services-reel__layout {
		grid-template-columns: 1fr;
		align-items: stretch;
	}

	.kip-services-reel__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}

	.kip-services-reel__panel {
		grid-template-columns: minmax(0, 1fr);
		min-height: 100%;
	}

	.kip-services-reel__media {
		min-height: clamp(17rem, 28vw, 22rem);
		clip-path: inset(0 round 8px 8px 0 0);
	}

	.kip-services-reel__image img {
		min-height: clamp(17rem, 28vw, 22rem);
	}

	.kip-services-reel__number {
		position: absolute;
		inset-block-start: clamp(1rem, 3vw, 1.5rem);
		inset-inline-start: clamp(1rem, 3vw, 1.5rem);
		z-index: 4;
	}

	.kip-services-reel__panel-body {
		align-content: start;
		min-height: 20rem;
	}
}

@media (min-width: 1180px) {
	.kip-services-reel__layout {
		grid-template-columns: 1fr;
	}

	.kip-services-reel__track {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.kip-services-reel__panel {
			animation: kip-services-panel-focus linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 42%;
		}

		.kip-services-reel__image img {
			animation: kip-services-image-drift linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}

@keyframes kip-services-panel-focus {
	from {
		opacity: 0.74;
		clip-path: inset(8% 0 8% 0 round 8px);
		transform: translateY(1rem) scale(0.98);
	}
	to {
		opacity: 1;
		clip-path: inset(0 0 0 0 round 8px);
		transform: translateY(0) scale(1);
	}
}

@keyframes kip-services-image-drift {
	from {
		transform: scale(1.12) translateY(-1.5%);
	}
	to {
		transform: scale(1.03) translateY(1.5%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.kip-services-reel__track::after,
	.kip-services-reel__panel,
	.kip-services-reel__image img,
	.kip-services-reel__media::before {
		animation: none;
		transition: none;
	}
}