/* ================================================
   MILO SERVICES CARDS
   File: /assets/css/services.css
   Shortcode: [milo_services target="Text Service"]
   ================================================ */

.milo-services-shortcode {
	--milo-services-card-width: 351px; /* 10% narrower than 390px */
	--milo-services-card-min-height: 0px;
	--milo-services-card-fixed-height: auto;
	--milo-services-hero-height: 187px;
	--milo-services-grid-gap: 28px;
	--milo-services-grid-max-width: calc((var(--milo-services-card-width) * 5) + (var(--milo-services-grid-gap) * 4));
	--milo-services-card-border: #2d2d2daa;
	--milo-services-card-border-width: 2px;
	--milo-services-card-hover: #00aaff;
	--milo-services-card-glow-shadow: 0 0 12px rgba(0, 170, 255, 0.42), 0 0 2px rgba(0, 170, 255, 0.50);
	--milo-services-text: #ffffff;
	--milo-services-muted: rgba(255, 255, 255, 0.72);
	--milo-services-accent: #75dfff;
	--milo-services-bg-image: url("https://milomassacci.com/wp-content/uploads/2026/05/Bg-AbstractWaves_000.jpg");
	--milo-services-bg-overlay: linear-gradient(to bottom, #111111 0%, rgba(17,17,17,0.82) 25%, rgba(17,17,17,0.54) 50%, rgba(17,17,17,0.82) 72%, #111111 100%);
	--milo-services-expand-duration: 1.2s;

	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	color: var(--milo-services-text);
	font-family: "Futura PT", "FuturaPT", Futura, system-ui, sans-serif;
	padding: 100px 18px;
	overflow: hidden;
	isolation: isolate;
	background-color: #111111;
}

.milo-services-shortcode,
.milo-services-shortcode * {
	box-sizing: border-box;
}

.milo-services-background {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--milo-services-bg-image);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	pointer-events: none;
}

.milo-services-shortcode::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--milo-services-bg-overlay);
	pointer-events: none;
}

/* Desktop cap: max-width equals 5 cards + 4 gaps. When a card opens, flex-basis animates the layout. */
.milo-services-grid {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--milo-services-grid-max-width);
	min-height: 0;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: var(--milo-services-grid-gap);
	overflow: visible;
}

.milo-service-card {
	position: relative;
	align-self: flex-start;
	flex: 0 0 var(--milo-services-card-width);
	width: auto;
	max-width: none;
	min-width: 0;
	height: auto;
	min-height: var(--milo-services-card-min-height, 0px);
	overflow: hidden;

	display: flex;
	flex-direction: column;

	background: var(--milo-service-bg, linear-gradient(to bottom right, rgb(1 1 1 / 69%), rgb(35 43 59 / 74%))) !important;
	backdrop-filter: blur(30px);
	-webkit-backdrop-filter: blur(30px);

	padding: 50px;
	border-radius: 10px;
	border-style: solid;
	border-color: var(--milo-services-card-border);
	border-width: var(--milo-services-card-border-width);
	box-shadow: var(--milo-service-shadow, 3px 5px 8px #00000085, inset 1px 1px 1px 1px rgba(255, 255, 255, 0.10));

	transform: scale(1);
	transform-origin: center center;
	transition:
		flex-basis var(--milo-services-expand-duration) cubic-bezier(0.22, 1, 0.36, 1),
		flex-grow var(--milo-services-expand-duration) cubic-bezier(0.22, 1, 0.36, 1),
		transform var(--milo-services-expand-duration) cubic-bezier(0.22, 1, 0.36, 1),
		border-color 0.35s ease,
		box-shadow 0.35s ease,
		filter 0.35s ease;
	will-change: transform, flex-basis;
	z-index: 1;
}

.milo-service-card:hover,
.milo-service-card:focus-within,
.milo-service-card.is-expanded {
	border-color: var(--milo-services-card-hover);
	box-shadow:
		var(--milo-services-card-glow-shadow),
		var(--milo-service-shadow, 3px 5px 8px #00000085, inset 1px 1px 1px 1px rgba(255, 255, 255, 0.10));
	z-index: 20;
}

.milo-service-card:hover:not(.is-expanded),
.milo-service-card:focus-within:not(.is-expanded) {
	transform: scale(1.02);
}

.milo-services-grid.has-expanded-service .milo-service-card {
	flex: 1 1 0;
	min-width: 0;
	height: auto;
	min-height: var(--milo-services-card-min-height, 0px);
	max-height: none;
}

.milo-services-grid.has-expanded-service .milo-service-card.is-shrunk {
	flex: 1 1 0;
	padding: 0;
	filter: brightness(0.72);
	overflow: hidden;
}

.milo-services-grid.has-expanded-service .milo-service-card.is-shrunk .milo-service-card-body {
	display: none;
}

.milo-services-grid.has-expanded-service .milo-service-card.is-shrunk .milo-service-card-hero {
	width: 100%;
	height: 100% !important;
	min-height: 100% !important;
	margin: 0;
	border-radius: 8px;
}

.milo-services-grid.has-expanded-service .milo-service-card.is-shrunk .milo-service-card-hero img {
	height: 100%;
	object-fit: cover;
}

.milo-services-grid.has-expanded-service .milo-service-card.is-expanded {
	flex: 0 0 85%;
	height: auto;
	min-height: var(--milo-services-card-min-height, 0px);
	max-height: none;
	overflow: hidden;
	z-index: 100;
}

.milo-service-card.is-expanded .milo-service-card-body {
	min-height: 0;
	overflow: visible;
}

.milo-service-card-hero {
	position: relative;
	width: calc(100% + 100px);
	height: var(--milo-services-hero-height);
	min-height: var(--milo-services-hero-height);
	margin: -50px -50px 28px;
	overflow: hidden;
	background:
		linear-gradient(to bottom, rgba(255,255,255,0.06), transparent),
		rgba(255,255,255,0.04);
	border-radius: 8px 8px 0 0;
}

.milo-service-card-hero img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	transform: scale(1);
	transition: transform 0.55s ease, filter 0.55s ease;
	pointer-events: none;
	user-select: none;
}

.milo-service-card:hover .milo-service-card-hero img,
.milo-service-card:focus-within .milo-service-card-hero img,
.milo-service-card.is-expanded .milo-service-card-hero img {
	transform: scale(1.06);
	filter: brightness(1.05);
}

.milo-service-card-hero-empty {
	background:
		radial-gradient(circle at 20% 10%, rgba(0,170,255,0.22), transparent 36%),
		linear-gradient(to bottom right, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}

.milo-service-card-body {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding-bottom: 42px;
}

.milo-service-card-title {
	margin: 0;
	color: #ffffff;
	font-size: 33px;
	font-weight: 450;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-wrap: balance;
}

.milo-service-card-subtitle {
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: 0.03em;
}

.milo-service-card-text {
	margin: 18px 0 0;
	color: var(--milo-services-muted);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.6;
	letter-spacing: 0.06em;
}

.milo-service-card-text-full {
	display: none;
}

.milo-service-card .milo-service-card-text-preview {
	display: none;
}

.milo-service-card .milo-service-card-text-full {
	display: inline;
}

.milo-service-card:not(.is-expanded) .milo-service-card-text {
	display: block;
	overflow: visible;
}

.milo-service-card.is-readmore-open:not(.is-expanded) {
	height: auto !important;
	min-height: var(--milo-services-card-min-height, 0px);
	max-height: none !important;
	overflow: hidden;
}

.milo-service-card-readmore {
	display: none;
	align-self: flex-start;
	margin-top: 12px;
	border: 0;
	padding: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.72);
	font-size: 9px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: lowercase;
	cursor: pointer;
	box-shadow: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.milo-service-card.has-overflow-text:not(.is-expanded) .milo-service-card-readmore {
	display: none;
}

.milo-service-card-readmore:hover,
.milo-service-card-readmore:focus-visible {
	transform: translateX(2px);
	opacity: 1;
	outline: none;
}

.milo-service-card.is-readmore-open .milo-service-card-readmore .milo-service-readmore-more,
.milo-service-card:not(.is-readmore-open) .milo-service-card-readmore .milo-service-readmore-less {
	display: none;
}

.milo-service-card:not(.is-expanded) .milo-service-card-tools,
.milo-service-card:not(.is-expanded) .milo-service-card-video,
.milo-service-card:not(.is-expanded) .milo-service-card-buttons {
	display: none;
}

.milo-service-card-bullets {
	margin: 18px 0 0;
	padding-left: 1.1em;
	color: var(--milo-services-muted);
	font-size: 14px;
	font-weight: 300;
	line-height: 1.65;
	letter-spacing: 0.05em;
}

.milo-service-card-bullets li {
	margin: 4px 0;
	padding-left: 0.25em;
}

.milo-service-card-bullets li::marker {
	color: var(--milo-services-accent);
	font-size: 0.9em;
}

.milo-service-card-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 18px;
}

.milo-service-card-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.12);
	box-shadow: 3px 5px 8px #00000055, inset 1px 1px 1px rgba(255,255,255,0.14);
	color: #ffffff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.milo-service-card-button:hover,
.milo-service-card-button:focus-visible {
	transform: scale(0.94);
	background-color: #648e97;
	border-color: rgba(117, 223, 255, 0.65);
	outline: none;
}

.milo-service-card-toggle {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 999px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;

	background-color: rgba(255, 255, 255, 0.16);
	background-image: url("https://milomassacci.com/wp-content/uploads/2026/02/we-plus.svg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;

	box-shadow:
		3px 5px 8px #00000085,
		inset 1px 1px 1px 1px rgba(255, 255, 255, 0.20);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	transition:
		transform 0.25s ease,
		background-color 0.25s ease,
		box-shadow 0.25s ease;
}

.milo-service-card-toggle:hover,
.milo-service-card-toggle:focus-visible {
	transform: scale(0.92);
	background-color: #648e97;
	box-shadow:
		0 0 8px rgba(0, 170, 255, 0.30),
		3px 5px 8px #00000085,
		inset 1px 1px 1px 1px rgba(255, 255, 255, 0.20);
	outline: none;
}

.milo-service-card.is-expanded .milo-service-card-toggle,
.milo-service-card-toggle[aria-expanded="true"] {
	background-image: url("https://milomassacci.com/wp-content/uploads/2026/02/we-minus.svg");
	background-color: #648e97;
}

.milo-service-card-toggle-icon {
	display: none;
}

@media (max-width: 1600px) {
	.milo-services-shortcode {
		--milo-services-card-width: 320px;
		--milo-services-card-min-height: 0px;
		--milo-services-hero-height: 176px;
		--milo-services-grid-gap: 24px;
	}

	.milo-service-card {
		padding: 42px;
	}

	.milo-service-card-hero {
		width: calc(100% + 84px);
		height: var(--milo-services-hero-height);
		min-height: var(--milo-services-hero-height);
		margin: -42px -42px 24px;
	}

	.milo-service-card-title { font-size: 29px; }
	.milo-service-card-subtitle { font-size: 18px; }
	.milo-service-card-text { font-size: 15px; }
}

@media (max-width: 1200px) {
	.milo-services-shortcode {
		--milo-services-card-width: 300px;
		--milo-services-card-min-height: 0px;
		--milo-services-grid-gap: 22px;
	}

	.milo-service-card:hover:not(.is-expanded),
	.milo-service-card:focus-within:not(.is-expanded) {
		transform: scale(1.04);
	}
}

@media (max-width: 768px) {
	.milo-services-shortcode {
		--milo-services-hero-height: 170px;
		padding: 70px 14px;
	}

	.milo-services-background {
		background-attachment: scroll;
	}

	.milo-services-grid {
		display: grid;
		grid-template-columns: minmax(0, min(351px, 100%));
		min-height: auto;
	}

	.milo-service-card,
	.milo-service-card.is-expanded,
	.milo-services-grid.has-expanded-service .milo-service-card,
	.milo-services-grid.has-expanded-service .milo-service-card.is-expanded {
		flex: none;
		width: 100%;
		max-width: 100%;
		min-height: auto;
		padding: 34px;
		transform: none !important;
		filter: none;
	}

	.milo-service-card-hero {
		width: calc(100% + 68px);
		height: var(--milo-services-hero-height);
		min-height: var(--milo-services-hero-height);
		margin: -34px -34px 24px;
	}

	.milo-service-card-title { font-size: 27px; }
	.milo-service-card-subtitle { font-size: 18px; }
	.milo-service-card-text { font-size: 14px; }
	.milo-service-card-bullets { font-size: 13px; }
}

@media (max-width: 430px) {
	.milo-services-shortcode {
		--milo-services-hero-height: 150px;
		padding: 56px 10px;
	}

	.milo-service-card,
	.milo-service-card.is-expanded,
	.milo-services-grid.has-expanded-service .milo-service-card,
	.milo-services-grid.has-expanded-service .milo-service-card.is-expanded {
		padding: 26px;
		border-radius: 9px;
	}

	.milo-service-card-hero {
		width: calc(100% + 52px);
		height: var(--milo-services-hero-height);
		min-height: var(--milo-services-hero-height);
		margin: -26px -26px 22px;
	}

	.milo-service-card-title { font-size: 23px; }
	.milo-service-card-subtitle { font-size: 16px; }
	.milo-service-card-text,
	.milo-service-card-bullets {
		font-size: 12px;
		letter-spacing: 0.04em;
	}
}

/* ==================================================
   Expanded service card layout - no browser scrollbar
   ================================================== */
.milo-service-card.is-expanded .milo-service-card-hero {
	opacity: 0;
	height: 0 !important;
	min-height: 0 !important;
	margin-top: -50px;
	margin-bottom: 0;
	pointer-events: none;
	transition: opacity 0.45s ease, height 0.75s cubic-bezier(0.22, 1, 0.36, 1), min-height 0.75s cubic-bezier(0.22, 1, 0.36, 1), margin 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.milo-service-card.is-expanded .milo-service-card-body {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr) minmax(260px, 1.05fr);
	grid-template-areas:
		"title bullets video"
		"subtitle bullets video"
		"text bullets video"
		"tools buttons video";
	gap: 14px 34px;
	align-content: center;
	align-items: center;
	padding: 18px 10px 18px 0;
	overflow: hidden;
}

.milo-service-card.is-expanded .milo-service-card-title { grid-area: title; }
.milo-service-card.is-expanded .milo-service-card-subtitle { grid-area: subtitle; }
.milo-service-card.is-expanded .milo-service-card-text { grid-area: text; }
.milo-service-card.is-expanded .milo-service-card-tools { grid-area: tools; }
.milo-service-card.is-expanded .milo-service-card-bullets { grid-area: bullets; }
.milo-service-card.is-expanded .milo-service-card-buttons { grid-area: buttons; }
.milo-service-card.is-expanded .milo-service-card-video { grid-area: video; }

.milo-service-card-tools {
	margin-top: 22px;
}

.milo-service-card-tools-label {
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #ffffff;
	margin-bottom: 10px;
}

.milo-service-card-tools-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.milo-service-card-tools-icons img {
	width: 50px;
	height: 50px;
	object-fit: contain;
	display: block;
}

.milo-service-card.is-expanded .milo-service-card-bullet-item {
	list-style: none;
	padding-left: 0 !important;
}


.milo-service-card:not(.is-expanded) .milo-service-card-bullet-item {
	list-style-position: outside;
}

.milo-service-card:not(.is-expanded) .milo-service-card-progress {
	display: none;
}

.milo-service-card.is-expanded .milo-service-card-bullet-item::marker {
	content: "";
}

.milo-service-card-bullet-label {
	display: block;
}

.milo-service-card-progress {
	display: block;
	height: 12px;
	width: 100%;
	margin-top: 6px;
	border-radius: 999px;
	background: #2D2D2D;
	overflow: hidden;
	opacity: 0;
	max-height: 0;
	transform: translateY(-8px);
	transition: opacity 0.45s ease, max-height 0.55s ease, transform 0.55s ease;
}

.milo-service-card-progress span {
	display: block;
	height: 100%;
	width: 0;
	border-radius: inherit;
	background: var(--milo-service-progress-color, #5ecfda);
	transition: width 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.milo-service-card.is-expanded .milo-service-card-progress {
	opacity: 1;
	max-height: 18px;
	transform: translateY(0);
}

.milo-service-card.is-expanded .milo-service-card-progress span {
	width: var(--milo-service-progress, 0%);
}

.milo-service-card-video {
	display: none;
	width: 100%;
	align-self: start;
}

.milo-service-card.is-expanded .milo-service-card-video {
	display: block;
}

.milo-service-card.is-expanded .milo-service-card-readmore {
	display: none !important;
}

.milo-service-card-video video {
	width: 100%;
	max-height: calc(var(--milo-service-locked-height, var(--milo-services-card-height)) - 105px);
	border-radius: 8px;
	object-fit: cover;
	box-shadow: 0 0 24px rgba(117, 223, 255, 0.24);
	background: #000;
}

.milo-services-shortcode.is-static .milo-service-card,
.milo-services-shortcode.is-static .milo-services-grid .milo-service-card {
	height: auto;
	max-height: none;
	min-height: var(--milo-services-card-height);
	overflow: visible;
}

.milo-services-shortcode.is-static .milo-services-grid {
	align-items: stretch;
}

.milo-services-shortcode.is-static .milo-service-card-toggle {
	display: none !important;
}

@media (max-width: 1200px) {
	.milo-service-card.is-expanded .milo-service-card-body {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"title title"
			"subtitle subtitle"
			"text bullets"
			"tools bullets"
			"buttons video";
	}
}

@media (max-width: 768px) {
	.milo-service-card.is-expanded .milo-service-card-body {
		display: flex;
		flex-direction: column;
		overflow: visible;
	}

	.milo-service-card.is-expanded .milo-service-card-hero {
		margin-top: -34px;
	}

	.milo-service-card-video video {
		max-height: none;
	}
}

@media (max-width: 430px) {
	.milo-service-card.is-expanded .milo-service-card-hero {
		margin-top: -26px;
	}
}


/* ==================================================
   Natural height reset
   Cards now grow to fit Hero + Title + Subtitle + Text + Bullets.
   Buttons/tools/video remain excluded until expanded.
   ================================================== */
.milo-services-grid:not(.has-expanded-service) {
	align-items: flex-start;
	min-height: 0;
}

.milo-services-grid:not(.has-expanded-service) .milo-service-card {
	height: auto !important;
	min-height: var(--milo-services-card-min-height, 0px) !important;
	max-height: none !important;
}

.milo-services-grid:not(.has-expanded-service) .milo-service-card-body {
	overflow: visible;
	min-height: 0;
}

.milo-services-grid:not(.has-expanded-service) .milo-service-card-text {
	display: block;
	overflow: visible;
}

.milo-services-grid:not(.has-expanded-service) .milo-service-card-readmore {
	display: none !important;
}

.milo-services-grid:not(.has-expanded-service) .milo-service-card-buttons,
.milo-services-grid:not(.has-expanded-service) .milo-service-card-tools,
.milo-services-grid:not(.has-expanded-service) .milo-service-card-video {
	display: none !important;
}

.milo-services-grid.has-expanded-service {
	align-items: stretch;
}

.milo-services-grid.has-expanded-service .milo-service-card {
	align-self: stretch;
}

/* ==================================================
   Equal-height closed cards
   In the default/non-expanded state, every card stretches
   to match the tallest card in the current row.
   ================================================== */
@media (min-width: 769px) {
	.milo-services-grid:not(.has-expanded-service) {
		align-items: stretch;
	}

	.milo-services-grid:not(.has-expanded-service) .milo-service-card {
		align-self: stretch;
		height: auto !important;
	}

	.milo-services-grid:not(.has-expanded-service) .milo-service-card-body {
		flex: 1 1 auto;
	}
}

/* ==================================================
   Service fixes - static buttons, card scale, locked expanded height,
   visible sibling toggles, expanded alignment and tool labels.
   ================================================== */
.milo-services-shortcode {
	--milo-services-card-scale: 1;
}

.milo-service-card {
	transform: scale(var(--milo-services-card-scale, 1));
	transform-origin: center top;
}

.milo-service-card:hover:not(.is-expanded),
.milo-service-card:focus-within:not(.is-expanded) {
	transform: scale(calc(var(--milo-services-card-scale, 1) * 1.02));
}

.milo-services-grid.has-expanded-service .milo-service-card,
.milo-services-grid.has-expanded-service .milo-service-card.is-expanded,
.milo-services-grid.has-expanded-service .milo-service-card.is-shrunk {
	height: var(--milo-service-locked-height, auto) !important;
	min-height: var(--milo-service-locked-height, var(--milo-services-card-min-height, 0px)) !important;
	max-height: var(--milo-service-locked-height, none) !important;
}

.milo-services-grid.has-expanded-service .milo-service-card.is-shrunk .milo-service-card-body {
	display: flex !important;
	position: absolute;
	inset: 0;
	min-height: 100%;
	padding: 0;
	pointer-events: none;
}

.milo-services-grid.has-expanded-service .milo-service-card.is-shrunk .milo-service-card-body > :not(.milo-service-card-toggle) {
	display: none !important;
}

.milo-services-grid.has-expanded-service .milo-service-card.is-shrunk .milo-service-card-toggle {
	display: block !important;
	right: 14px;
	bottom: 14px;
	z-index: 40;
	pointer-events: auto;
}

.milo-services-grid.has-expanded-service .milo-service-card.is-shrunk .milo-service-card-hero {
	height: 100% !important;
	min-height: 100% !important;
}

.milo-services-shortcode.is-static .milo-service-card-buttons {
	display: flex !important;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: auto;
	padding-top: 22px;
	padding-bottom: 0;
}

.milo-services-shortcode.is-static .milo-service-card-tools {
	display: block !important;
}

.milo-services-shortcode.is-expandable .milo-services-grid:not(.has-expanded-service) .milo-service-card-buttons,
.milo-services-shortcode.is-expandable .milo-services-grid:not(.has-expanded-service) .milo-service-card-tools,
.milo-services-shortcode.is-expandable .milo-services-grid:not(.has-expanded-service) .milo-service-card-video {
	display: none !important;
}

.milo-service-card.is-expanded .milo-service-card-body {
	height: 100%;
	grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr) minmax(260px, 1.05fr);
	grid-template-rows: auto auto minmax(0, 1fr) auto;
	grid-template-areas:
		"title title title"
		"subtitle subtitle subtitle"
		"text bullets video"
		"tools buttons video";
	align-content: stretch;
	align-items: start;
	padding: 18px 10px 26px 0;
}

.milo-service-card.is-expanded .milo-service-card-text,
.milo-service-card.is-expanded .milo-service-card-bullets,
.milo-service-card.is-expanded .milo-service-card-video {
	align-self: start;
}

.milo-service-card.is-expanded .milo-service-card-buttons {
	justify-content: center;
	align-self: end;
	justify-self: center;
	width: 100%;
	margin-top: auto;
	padding-bottom: 10px;
}

.milo-service-card-tools-icons {
	align-items: flex-start;
}

.milo-service-card-tool {
	display: grid;
	justify-items: center;
	gap: 6px;
	text-align: center;
}

.milo-service-card-tools-icons img {
	mix-blend-mode: saturation;
}

.milo-service-card-tool-label {
	display: block;
	max-width: 70px;
	font-size: 9px;
	line-height: 1.15;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.68);
}

@media (max-width: 1200px) {
	.milo-service-card.is-expanded .milo-service-card-body {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"title title"
			"subtitle subtitle"
			"text bullets"
			"video video"
			"tools buttons";
	}
}

@media (max-width: 768px) {
	.milo-service-card.is-expanded .milo-service-card-body {
		height: auto;
	}
}

/* ==================================================
   Service expanded layout refinement - text stack + 60% video
   ================================================== */
.milo-service-card.is-expanded {
	position: relative;
}

.milo-service-card.is-expanded .milo-service-card-body {
	position: static;
	display: grid;
	grid-template-columns: minmax(0, 40%) minmax(360px, 60%);
	grid-template-rows: auto auto auto auto 1fr auto;
	grid-template-areas:
		"title video"
		"subtitle video"
		"text video"
		"bullets video"
		"tools video"
		"buttons video";
	gap: 14px 44px;
	height: 100%;
	min-height: 100%;
	padding: 7%;
	align-content: stretch;
	align-items: start;
	overflow: hidden;
}

.milo-service-card.is-expanded .milo-service-card-title {
	grid-area: title;
	align-self: end;
}

.milo-service-card.is-expanded .milo-service-card-subtitle {
	grid-area: subtitle;
	align-self: start;
}

.milo-service-card.is-expanded .milo-service-card-text {
	grid-area: text;
	align-self: start;
	margin-top: 16px;
	margin-bottom: 0;
}

.milo-service-card.is-expanded .milo-service-card-bullets {
	grid-area: bullets;
	align-self: start;
	width: 100%;
	margin-top: 8px;
	margin-bottom: 0;
}

.milo-service-card.is-expanded .milo-service-card-tools {
	grid-area: tools;
	align-self: start;
	margin-top: 18px;
}

.milo-service-card.is-expanded .milo-service-card-buttons {
	grid-area: buttons;
	justify-self: center;
	align-self: end;
	justify-content: center;
	width: 100%;
	margin-top: 26px;
	padding-bottom: 0;
}

.milo-service-card.is-expanded .milo-service-card-video {
	grid-area: video;
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	align-self: stretch;
	justify-self: stretch;
	overflow: hidden;
	border-radius: 10px;
}

.milo-service-card.is-expanded .milo-service-card-video video,
.milo-service-card.is-expanded .milo-service-card-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	max-height: none;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border: 0;
	border-radius: inherit;
	box-shadow: 0 0 24px rgba(117, 223, 255, 0.24);
	background: #000;
}

.milo-service-card.is-expanded .milo-service-card-toggle {
	position: absolute;
	right: 18px;
	bottom: 18px;
	z-index: 999;
}

.milo-services-grid.has-expanded-service .milo-service-card:hover:not(.is-expanded),
.milo-services-grid.has-expanded-service .milo-service-card:focus-within:not(.is-expanded) {
	transform: scale(var(--milo-services-card-scale, 1)) !important;
}

@media (max-width: 1200px) {
	.milo-service-card.is-expanded .milo-service-card-body {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto auto auto;
		grid-template-areas:
			"title"
			"subtitle"
			"text"
			"bullets"
			"tools"
			"video"
			"buttons";
		padding: 7%;
		overflow: visible;
	}

	.milo-service-card.is-expanded .milo-service-card-video {
		height: auto;
		min-height: 0;
	}

	.milo-service-card.is-expanded .milo-service-card-video video,
	.milo-service-card.is-expanded .milo-service-card-video iframe {
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 768px) {
	.milo-service-card.is-expanded .milo-service-card-body {
		display: flex;
		flex-direction: column;
		padding: 7%;
	}

	.milo-service-card.is-expanded .milo-service-card-video {
		width: 100%;
	}
}


/* ==================================================
   Text cap + mobile expanded ordering refinement
   ================================================== */
.milo-service-card .milo-service-card-text-preview {
	display: inline;
}

.milo-service-card .milo-service-card-text-full {
	display: none;
}

.milo-service-card.is-expanded .milo-service-card-text-preview,
.milo-services-shortcode.is-static .milo-service-card .milo-service-card-text-preview {
	display: none;
}

.milo-service-card.is-expanded .milo-service-card-text-full,
.milo-services-shortcode.is-static .milo-service-card .milo-service-card-text-full {
	display: inline;
}

@media (max-width: 768px) {
	.milo-services-grid.has-expanded-service,
	.milo-services-grid.has-expanded-service .milo-service-card.is-expanded {
		align-items: flex-start;
	}

	.milo-services-grid.has-expanded-service .milo-service-card.is-expanded {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible;
	}

	.milo-service-card.is-expanded .milo-service-card-body {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 0;
		overflow: visible;
		padding: 7%;
	}

	.milo-service-card.is-expanded .milo-service-card-title,
	.milo-service-card.is-expanded .milo-service-card-subtitle,
	.milo-service-card.is-expanded .milo-service-card-text,
	.milo-service-card.is-expanded .milo-service-card-bullets,
	.milo-service-card.is-expanded .milo-service-card-video,
	.milo-service-card.is-expanded .milo-service-card-tools,
	.milo-service-card.is-expanded .milo-service-card-buttons {
		width: 100%;
		align-self: stretch;
		text-align: left;
	}

	.milo-service-card.is-expanded .milo-service-card-title { order: 1; }
	.milo-service-card.is-expanded .milo-service-card-subtitle { order: 2; }
	.milo-service-card.is-expanded .milo-service-card-text { order: 3; }
	.milo-service-card.is-expanded .milo-service-card-bullets { order: 4; }
	.milo-service-card.is-expanded .milo-service-card-video { order: 5; }
	.milo-service-card.is-expanded .milo-service-card-tools { order: 6; }
	.milo-service-card.is-expanded .milo-service-card-buttons { order: 7; text-align: center; }

	.milo-service-card.is-expanded .milo-service-card-video {
		display: block;
		height: auto;
		min-height: 0;
		margin-top: 18px;
		overflow: visible;
	}

	.milo-service-card.is-expanded .milo-service-card-video video,
	.milo-service-card.is-expanded .milo-service-card-video iframe {
		width: 100%;
		height: auto;
		min-height: 0;
		max-height: none;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}

	.milo-service-card.is-expanded .milo-service-card-tools {
		margin-top: 22px;
	}

	.milo-service-card.is-expanded .milo-service-card-buttons {
		justify-content: center;
		margin-top: 24px;
	}
}

/* ==================================================
   Service controls refinement: hover color, tools, media aspect, mobile width
   ================================================== */
.milo-service-card-tools-icons img {
	width: var(--milo-services-tool-icon-size, 50px);
	height: var(--milo-services-tool-icon-size, 50px);
}

.milo-service-card.is-expanded .milo-service-card-video {
	aspect-ratio: var(--milo-services-expanded-video-aspect-ratio, 16 / 9);
	height: auto;
	min-height: 0;
}

.milo-service-card.is-expanded .milo-service-card-video video,
.milo-service-card.is-expanded .milo-service-card-video iframe,
.milo-service-card.is-expanded .milo-service-card-video img,
.milo-service-card.is-expanded .milo-service-card-shortcode-media,
.milo-service-card.is-expanded .milo-service-card-shortcode-media > * {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	aspect-ratio: var(--milo-services-expanded-video-aspect-ratio, 16 / 9);
	object-fit: cover;
	border: 0;
	border-radius: inherit;
}

.milo-service-card.is-expanded .milo-service-card-shortcode-media .image-wipe {
	--image-wipe-aspect-ratio: var(--milo-services-expanded-video-aspect-ratio, 16 / 9);
}

@media (max-width: 768px) {
	.milo-services-grid.has-expanded-service {
		grid-template-columns: minmax(0, min(421px, calc(100vw - 20px)));
		max-width: calc(100vw - 20px);
		justify-content: center;
	}

	.milo-services-grid.has-expanded-service .milo-service-card.is-expanded {
		width: 100%;
		max-width: 100%;
		justify-self: center;
	}

	.milo-service-card.is-expanded .milo-service-card-body {
		padding: calc(7% + 12px) 7% 7%;
	}

	.milo-service-card.is-expanded .milo-service-card-title {
		padding-top: 20px;
	}

	.milo-service-card.is-expanded .milo-service-card-video {
		width: calc(100% + 12%);
		margin-left: -6%;
		margin-right: -6%;
		aspect-ratio: var(--milo-services-expanded-video-aspect-ratio, 16 / 9);
	}

	.milo-service-card.is-expanded .milo-service-card-video video,
	.milo-service-card.is-expanded .milo-service-card-video iframe,
	.milo-service-card.is-expanded .milo-service-card-video img,
	.milo-service-card.is-expanded .milo-service-card-shortcode-media,
	.milo-service-card.is-expanded .milo-service-card-shortcode-media > * {
		height: auto;
		min-height: 0;
		aspect-ratio: var(--milo-services-expanded-video-aspect-ratio, 16 / 9);
	}
}

@media (max-width: 430px) {
	.milo-services-grid.has-expanded-service {
		grid-template-columns: minmax(0, calc(100vw - 20px));
		max-width: calc(100vw - 20px);
	}
}


/* ==================================================
   Request 5 refinements: tablet expanded height, no wrapper border, shortcode media, mobile video edge width
   ================================================== */
.milo-services-shortcode {
	border: 0 !important;
	outline: 0 !important;
}

.milo-services-shortcode::before {
	border: 0 !important;
	outline: 0 !important;
}

.milo-service-card {
	outline: 0;
}

@media (min-width: 769px) and (max-width: 1200px) {
	.milo-services-grid.has-expanded-service {
		align-items: flex-start;
	}

	.milo-services-grid.has-expanded-service .milo-service-card.is-expanded {
		height: auto !important;
		min-height: var(--milo-services-card-min-height, 0px) !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.milo-services-grid.has-expanded-service .milo-service-card.is-expanded .milo-service-card-body {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto auto auto auto auto auto;
		grid-template-areas:
			"title"
			"subtitle"
			"text"
			"bullets"
			"video"
			"tools"
			"buttons";
	}

	.milo-services-grid.has-expanded-service .milo-service-card.is-expanded .milo-service-card-video {
		width: 100%;
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: var(--milo-services-expanded-video-aspect-ratio, 16 / 9);
		align-self: stretch;
		justify-self: stretch;
		overflow: visible;
	}

	.milo-services-grid.has-expanded-service .milo-service-card.is-expanded .milo-service-card-video video,
	.milo-services-grid.has-expanded-service .milo-service-card.is-expanded .milo-service-card-video iframe,
	.milo-services-grid.has-expanded-service .milo-service-card.is-expanded .milo-service-card-video img {
		width: 100%;
		height: 100%;
		aspect-ratio: var(--milo-services-expanded-video-aspect-ratio, 16 / 9);
		object-fit: cover;
	}
}

.milo-service-card.is-expanded .milo-service-card-shortcode-media {
	width: 100%;
	height: auto;
	min-height: 0;
	max-height: none;
	aspect-ratio: auto;
	overflow: visible;
}

.milo-service-card.is-expanded .milo-service-card-shortcode-media > .image-wipe {
	height: auto;
	min-height: 0;
	max-height: none;
	aspect-ratio: auto;
	overflow: visible;
}

.milo-service-card.is-expanded .milo-service-card-shortcode-media .image-wipe-frame {
	aspect-ratio: var(--milo-services-expanded-video-aspect-ratio, 16 / 9);
}

@media (max-width: 768px) {
	.milo-service-card.is-expanded .milo-service-card-video {
		width: calc(100% + 10%);
		max-width: none;
		margin-left: -5%;
		margin-right: -5%;
	}

	.milo-service-card.is-expanded .milo-service-card-shortcode-media,
	.milo-service-card.is-expanded .milo-service-card-shortcode-media > .image-wipe {
		width: 100%;
	}
}

/* ==================================================
   Active-click border fix
   Overrides the global *:active reset in style.css, which can remove
   borders/shadows while the mouse is pressed inside an expanded card.
   ================================================== */
.milo-services-shortcode .milo-service-card:active,
.milo-services-shortcode .milo-service-card.is-expanded:active,
.milo-services-shortcode .milo-service-card:focus,
.milo-services-shortcode .milo-service-card:focus-within {
	border-style: solid !important;
	border-width: var(--milo-services-card-border-width) !important;
	border-color: var(--milo-services-card-hover) !important;
	outline: 0 !important;
}

.milo-services-shortcode .milo-service-card:active,
.milo-services-shortcode .milo-service-card.is-expanded:active,
.milo-services-shortcode .milo-service-card.is-expanded:focus,
.milo-services-shortcode .milo-service-card.is-expanded:focus-within {
	box-shadow:
		var(--milo-services-card-glow-shadow),
		var(--milo-service-shadow, 3px 5px 8px #00000085, inset 1px 1px 1px 1px rgba(255, 255, 255, 0.10)) !important;
}

.milo-services-shortcode .milo-services-grid.has-expanded-service .milo-service-card.is-shrunk:active,
.milo-services-shortcode .milo-services-grid.has-expanded-service .milo-service-card.is-shrunk:focus,
.milo-services-shortcode .milo-services-grid.has-expanded-service .milo-service-card.is-shrunk:focus-within {
	border-style: solid !important;
	border-width: var(--milo-services-card-border-width) !important;
	border-color: var(--milo-services-card-border) !important;
	box-shadow: var(--milo-service-shadow, 3px 5px 8px #00000085, inset 1px 1px 1px 1px rgba(255, 255, 255, 0.10)) !important;
}

.milo-services-shortcode .milo-service-card-button:active,
.milo-services-shortcode .milo-service-card-toggle:active,
.milo-services-shortcode .milo-service-card-readmore:active {
	border-style: solid !important;
	outline: 0 !important;
	box-shadow: inherit;
}