/* acf/card-grid — child block (ported from S&H Steel).
   Base grid and Slider in Shop OV colours; the two Home looks and Why's
   deck are block styles further down: is-style-sov-hero-slides,
   is-style-sov-duotone and is-style-sov-stacked-deck.
   S&H's Projects mosaic and Button-beside-intro styles are not ported. */

.sov-card-grid {
	position: relative;
	padding: var(--margin-vertical-normal) 4vw;
}

.sov-card-grid .block-contents {
	max-width: 1152px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sov-card-grid__intro {
	max-width: 760px;
}

.sov-card-grid .sov-card-grid__header {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: 30px;
	font-weight: 700;
	line-height: 36px;
	color: var(--neutral-400);
}

.sov-card-grid .sov-card-grid__sub-header {
	margin: 4px 0 0;
	font-family: var(--font-family-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 23px;
	color: var(--neutral-400);
}

.sov-card-grid__cta {
	margin: 0;
}

/* ---- Grid ------------------------------------------------------------ */

.sov-card-grid__grid {
	display: grid;
	grid-template-columns: repeat(var(--sov-cols, 2), minmax(0, 1fr));
	gap: 20px;
}

.sov-card-grid--cols-3 { --sov-cols: 3; }
.sov-card-grid--cols-4 { --sov-cols: 4; }

.sov-card {
	position: relative;
	display: block;
	min-height: 180px;
	overflow: hidden;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
}

.sov-card__img,
.sov-card .lp-editor-media-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 180px;
	object-fit: cover;
	border-radius: 0;
}

.sov-card__label {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	padding: 8px 20px;
	border-bottom-right-radius: 10px;
	background: var(--primary-400);
	color: var(--white);
	font-family: var(--font-family-heading);
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
}

a.sov-card:hover .sov-card__label {
	background: var(--primary-300);
}

a.sov-card:focus-visible {
	outline: 3px solid var(--accent-400);
	outline-offset: 3px;
}

@media screen and (max-width: 600px) {
	.sov-card-grid__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- Layout: Slider ---------------------------------------------------
   One card at a time: the image beside title, location, description and
   button; dots under it. card-grid.js moves between cards. */

.sov-slider {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.sov-slider__track {
	display: grid;
	touch-action: pan-y;
}

.sov-slide {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	gap: 45px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease, visibility .5s;
}

.sov-slide.is-active {
	opacity: 1;
	visibility: visible;
}

.sov-slide__media {
	flex: 0 0 min(460px, 45%);
}

.sov-slide__img,
.sov-slide__media .lp-editor-media-placeholder {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
}

.sov-slide__content {
	flex: 1 1 0;
	min-width: 0;
}

.sov-slide .sov-slide__title {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: 30px;
	font-weight: 700;
	line-height: 36px;
	color: var(--neutral-400);
	text-wrap: balance;
}

.sov-slide .sov-slide__location {
	margin: 4px 0 0;
	font-family: var(--font-family-heading);
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	color: var(--neutral-400);
}

.sov-slide__body {
	margin-top: 12px;
	font-family: var(--font-family-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24.8px;
	color: var(--neutral-400);
}

.sov-slide__body p {
	margin: 0 0 1em;
	font: inherit;
	color: inherit;
}

.sov-slide__body p:last-child {
	margin-bottom: 0;
}

.sov-slide__cta {
	margin: 20px 0 0;
}

.sov-slider__controls {
	position: relative;
	display: flex;
	justify-content: center;
}

.sov-slider__dots {
	display: flex;
	justify-content: center;
}

/* 24px targets (WCAG 2.5.8) around 10px dots. */
.sov-slider .sov-slider__dot {
	position: relative;
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	cursor: pointer;
}

.sov-slider .sov-slider__dot::before {
	content: "";
	position: absolute;
	inset: 7px;
	box-sizing: border-box;
	border: 1px solid var(--primary-400);
	border-radius: 50%;
	background: transparent;
	transition: transform .2s ease, background-color .2s ease;
}

.sov-slider .sov-slider__dot.is-active::before {
	background: var(--primary-400);
}

.sov-slider .sov-slider__dot:hover::before {
	transform: scale(1.2);
}

.sov-slider .sov-slider__dot:focus-visible {
	outline: 2px solid var(--accent-400);
	outline-offset: 0;
}

/* Pause / play (hero autoplay only; card-grid.js shows it). */
.sov-slider .sov-slider__pause {
	position: absolute;
	top: 0;
	left: calc(100% + 4px);
	width: 24px;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--primary-400);
	cursor: pointer;
}

.sov-slider .sov-slider__pause[hidden] {
	display: none;
}

.sov-slider .sov-slider__pause::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 8px;
	width: 3px;
	height: 10px;
	background: currentColor;
	box-shadow: 5px 0 0 currentColor;
}

.sov-slider .sov-slider__pause.is-paused::before {
	top: 7px;
	left: 9px;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 9px solid currentColor;
	background: none;
	box-shadow: none;
}

.sov-slider .sov-slider__pause:focus-visible {
	outline: 2px solid var(--accent-400);
	outline-offset: 0;
}

@media screen and (max-width: 765px) {
	.sov-slide {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
	}

	.sov-slide__media {
		flex-basis: auto;
	}
}

/* ---- Style: Hero slides (is-style-sov-hero-slides) --------------------
   Figma Hero Slider (6008:1525) as placed on Home: full bleed, 1440x500;
   the photo under linear-gradient(to right, rgba(0,0,0,.6),
   rgba(102,102,102,0)); copy 564 wide at x 144 (the 1152 container),
   top 159 for a two-line title and 179 for one (= padding 95/64,
   centred); title Sofia Sans 700 40/40 white, body Roboto 400 16/24.8
   white, button, 20 apart. White logo 142x142, 34 from the right and 16
   from the bottom, drop shadow 0 4 44 #183451. Dots 10px, 5 apart, white
   with the current one navy, centred 16 from the bottom. */

.sov-card-grid.is-style-sov-hero-slides {
	padding: 0;
	background: var(--primary-400);
}

.sov-card-grid.is-style-sov-hero-slides .block-contents {
	max-width: none;
	gap: 0;
}

.is-style-sov-hero-slides .sov-card-grid__intro,
.is-style-sov-hero-slides .sov-card-grid__cta {
	width: min(1152px, 100% - 8vw);
	margin: 32px auto;
}

.is-style-sov-hero-slides .sov-card-grid__header,
.is-style-sov-hero-slides .sov-card-grid__sub-header {
	color: var(--white);
}

.is-style-sov-hero-slides .sov-slider {
	position: relative;
	gap: 0;
}

.is-style-sov-hero-slides .sov-slide {
	position: relative;
	align-items: center;
	gap: 0;
	min-height: 500px;
	overflow: hidden;
	isolation: isolate;
	background: var(--primary-400);
	transition: opacity .6s ease, visibility .6s;
}

.is-style-sov-hero-slides .sov-slide__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	flex: none;
}

.is-style-sov-hero-slides .sov-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(102, 102, 102, 0));
	pointer-events: none;
}

.is-style-sov-hero-slides .sov-slide__img,
.is-style-sov-hero-slides .sov-slide__media .lp-editor-media-placeholder {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
}

.is-style-sov-hero-slides .sov-slide__content {
	flex: none;
	width: min(1152px, 100% - 8vw);
	margin-inline: auto;
	padding-block: 95px 64px;
}

.is-style-sov-hero-slides .sov-slide__copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	max-width: 564px;
}

.is-style-sov-hero-slides .sov-slide .sov-slide__title {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: 40px;
	font-weight: 700;
	line-height: 40px;
	color: var(--white);
	text-wrap: balance;
}

.is-style-sov-hero-slides .sov-slide .sov-slide__location {
	margin: -12px 0 0;
	color: var(--white);
}

.is-style-sov-hero-slides .sov-slide__body {
	margin: 0;
	color: var(--white);
}

.is-style-sov-hero-slides .sov-slide__body p {
	margin-bottom: .75em;
}

.is-style-sov-hero-slides .sov-slide__body p:last-child {
	margin-bottom: 0;
}

.is-style-sov-hero-slides .sov-slide__cta {
	margin: 0;
}

/* Editor only: the empty-slide hint on the navy slide. */
.is-style-sov-hero-slides .sov-slide .lp-editor-placeholder {
	color: var(--white);
}

.is-style-sov-hero-slides .sov-slide__icon {
	position: absolute;
	right: clamp(16px, 2.36vw, 34px);
	bottom: 16px;
	z-index: 1;
	width: clamp(88px, 9.86vw, 142px);
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	filter: drop-shadow(0 4px 44px var(--primary-400));
	pointer-events: none;
}

.is-style-sov-hero-slides .sov-slider__controls {
	position: absolute;
	left: 50%;
	bottom: 9px;
	z-index: 2;
	transform: translateX(-50%);
}

.is-style-sov-hero-slides .sov-slider__dot::before {
	border: 0;
	background: var(--white);
}

.is-style-sov-hero-slides .sov-slider__dot.is-active::before {
	background: var(--primary-400);
}

.is-style-sov-hero-slides .sov-slider .sov-slider__dot:focus-visible,
.is-style-sov-hero-slides .sov-slider .sov-slider__pause:focus-visible {
	outline: 2px solid var(--white);
	outline-offset: -1px;
	box-shadow: 0 0 0 3px var(--primary-400);
}

.is-style-sov-hero-slides .sov-slider .sov-slider__pause {
	color: var(--white);
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6));
}

@media screen and (max-width: 1024px) {
	.is-style-sov-hero-slides .sov-slide {
		min-height: 460px;
	}

	.is-style-sov-hero-slides .sov-slide__content {
		padding-block: 64px 72px;
	}

	.is-style-sov-hero-slides .sov-slide .sov-slide__title {
		font-size: 36px;
		line-height: 38px;
	}

	.is-style-sov-hero-slides .sov-slide__copy {
		max-width: min(564px, 70%);
	}
}

@media screen and (max-width: 600px) {
	.is-style-sov-hero-slides .sov-slide {
		align-items: flex-start;
		min-height: 520px;
	}

	.is-style-sov-hero-slides .sov-slide__media::after {
		background: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, .3));
	}

	.is-style-sov-hero-slides .sov-slide__content {
		padding-block: 48px 128px;
	}

	.is-style-sov-hero-slides .sov-slide__copy {
		max-width: none;
		gap: 16px;
	}

	.is-style-sov-hero-slides .sov-slide .sov-slide__title {
		font-size: 30px;
		line-height: 32px;
	}

	.is-style-sov-hero-slides .sov-slide .sov-slide__location {
		margin-top: -8px;
	}
}

/* ---- Style: Duotone reveal (is-style-sov-duotone) ---------------------
   Figma Home "three photos" (Community Impact 6013:1464, Participate
   6013:1461, Live Local 6013:1458): full bleed, one row 524 / 392 / 524,
   600 tall at 1440, no gaps. Default: the photo in grayscale under a
   colour layer: 1st pink multiply with the photo at exposure +0.58
   (brightness 1.5), 2nd navy overlay, 3rd gold multiply (Live Local, pink
   until the client's edits, Figma 2026-10-15). Hover (Variant2): a solid
   pink / navy / gold panel with the white icon (100 wide), the
   title Sofia Sans 700 30/36 and the caption Roboto 400 16, bottom left
   (35 from the bottom, ~34 from the left; icon 18 above the title).
   Keyboard focus and a tap (focus) reveal it too. */

.sov-card-grid.is-style-sov-duotone {
	padding: 0;
}

.sov-card-grid.is-style-sov-duotone .block-contents {
	max-width: none;
	gap: 0;
}

.is-style-sov-duotone .sov-card-grid__intro,
.is-style-sov-duotone .sov-card-grid__cta {
	width: min(1152px, 100% - 8vw);
	margin: 32px auto;
}

.sov-card-grid.is-style-sov-duotone .sov-card-grid__grid {
	gap: 0;
	container-type: inline-size;
}

.sov-card-grid.is-style-sov-duotone.sov-card-grid--cols-3 .sov-card-grid__grid,
.sov-card-grid.is-style-sov-duotone.sov-card-grid--items-3 .sov-card-grid__grid,
.sov-card-grid.is-style-sov-duotone.sov-card-grid--items-0 .sov-card-grid__grid {
	grid-template-columns: minmax(0, 524fr) minmax(0, 392fr) minmax(0, 524fr);
}

.is-style-sov-duotone .sov-card {
	--sov-duo: var(--secondary-400);
	--sov-duo-blend: multiply;
	--sov-duo-panel: var(--secondary-400);
	--sov-duo-photo: grayscale(1);

	position: relative;
	display: block;
	/* 600 tall at the 1440 frame, scaling down below it; no taller on
	   wider screens (WebMO, 2026-10-15: 1667 tall at 4000). */
	height: min(41.667vw, 600px);
	height: min(41.667cqw, 600px);
	min-height: 0;
	overflow: hidden;
	isolation: isolate;
	border-radius: 0;
	background: var(--neutral-200);
	color: var(--white);
	text-decoration: none;
}

.is-style-sov-duotone .sov-card:nth-child(3n+1) {
	--sov-duo-photo: grayscale(1) brightness(1.5);
}

.is-style-sov-duotone .sov-card:nth-child(3n+2) {
	--sov-duo: var(--primary-400);
	--sov-duo-blend: overlay;
	--sov-duo-panel: var(--primary-400);
}

.is-style-sov-duotone .sov-card:nth-child(3n) {
	--sov-duo: var(--accent-300);
	--sov-duo-panel: var(--accent-300);
}

.is-style-sov-duotone .sov-card__img,
.is-style-sov-duotone .sov-card .lp-editor-media-placeholder {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	aspect-ratio: auto;
	object-fit: cover;
	border-radius: 0;
	filter: var(--sov-duo-photo);
}

/* Wider than 1440 the row stops at 600 tall, so the photos crop top and
   bottom: aim at the faces, about a third down; the narrower middle
   card's faces sit lower (the slide). */
@media screen and (min-width: 1441px) {
	.is-style-sov-duotone .sov-card__img {
		object-position: 50% 35%;
	}

	.is-style-sov-duotone .sov-card:nth-child(3n+2) .sov-card__img {
		object-position: 50% 60%;
	}
}

.is-style-sov-duotone .sov-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--sov-duo);
	mix-blend-mode: var(--sov-duo-blend);
	pointer-events: none;
}

.is-style-sov-duotone .sov-card__panel {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	padding: 24px clamp(20px, 2.36vw, 34px) 35px;
	background: var(--sov-duo-panel);
	opacity: 0;
	transition: opacity .35s ease;
}

.is-style-sov-duotone .sov-card:hover .sov-card__panel,
.is-style-sov-duotone .sov-card:focus-within .sov-card__panel {
	opacity: 1;
}

.is-style-sov-duotone .sov-card:focus-visible {
	outline: 3px solid var(--white);
	outline-offset: -8px;
}

.is-style-sov-duotone .sov-card__icon {
	display: block;
	width: 100px;
	height: auto;
	max-height: 102px;
	margin-bottom: 18px;
	object-fit: contain;
	object-position: left bottom;
}

.is-style-sov-duotone .sov-card .sov-card__title {
	max-width: 420px;
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: 30px;
	font-weight: 700;
	line-height: 36px;
	color: var(--white);
}

.is-style-sov-duotone .sov-card__body {
	max-width: 420px;
	font-family: var(--font-family-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--white);
}

.is-style-sov-duotone .sov-card__body p {
	margin: 0;
	font: inherit;
	color: inherit;
}

.is-style-sov-duotone .sov-card__body p + p {
	margin-top: .5em;
}

@media screen and (max-width: 1024px) {
	.is-style-sov-duotone .sov-card__icon {
		width: 64px;
		max-height: 66px;
		margin-bottom: 12px;
	}

	.is-style-sov-duotone .sov-card .sov-card__title {
		font-size: 24px;
		line-height: 30px;
	}

	.is-style-sov-duotone .sov-card__body {
		font-size: 15px;
		line-height: 22px;
	}
}

/* Phones: stacked, the caption always over the bottom of the photo. */
@media screen and (max-width: 767px) {
	.sov-card-grid.is-style-sov-duotone .sov-card-grid__grid,
	.sov-card-grid.is-style-sov-duotone.sov-card-grid--cols-3 .sov-card-grid__grid,
	.sov-card-grid.is-style-sov-duotone.sov-card-grid--items-3 .sov-card-grid__grid,
	.sov-card-grid.is-style-sov-duotone.sov-card-grid--items-0 .sov-card-grid__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.is-style-sov-duotone .sov-card {
		height: auto;
		aspect-ratio: 4 / 3;
	}

	.is-style-sov-duotone .sov-card__panel {
		padding: 20px;
		background: linear-gradient(
			to top,
			color-mix(in srgb, var(--sov-duo-panel) 92%, transparent) 0%,
			color-mix(in srgb, var(--sov-duo-panel) 70%, transparent) 40%,
			transparent 80%
		);
		opacity: 1;
	}

	.is-style-sov-duotone .sov-card__icon {
		width: 56px;
		max-height: 58px;
		margin-bottom: 10px;
	}
}

/* ---- Style: Stacked deck (is-style-sov-stacked-deck) ------------------
   Why "Big Impact Starts with Small Shifts": Figma's mint card with a pink
   and an orange card peeking above it, as a slider (WebMO, 2026-10-14).
   Each slide is a card in its own colour, mint, red, orange, then again
   (WebMO), so the cards peeking above the front one are the next slides.
   data-pos (card-grid.js) places a card: 0 the front; 1 14 above it and
   16 in from each side; 2 21 above and 36 in; "prev" the card just left,
   which flips forward off the deck (folds down about its bottom edge);
   any other number out of sight, waiting transparent in place 2. Between
   places a card slides and narrows or widens; its copy shows only at the
   front. A deck of one or two slides gets the missing edges drawn on the
   track. Sizes are the static card's at 1440 (Figma's 1152 card at the
   site's 1200): padding 28 / 60 / 24, icon 115, title column 320, text
   columns 247 with 64 between. */

/* Mid-flip, perspective draws the falling card wider than the page on a
   phone: clip sideways so the page never scrolls across. */
.sov-card-grid.is-style-sov-stacked-deck {
	overflow-x: clip;
}

.sov-card-grid.is-style-sov-stacked-deck .block-contents {
	max-width: var(--content-max-width);
	gap: var(--sov-space-stack);
}

/* The intro as the site's other section intros: centred, navy heading. */
.is-style-sov-stacked-deck .sov-card-grid__intro {
	max-width: 900px;
	margin-inline: auto;
	text-align: center;
}

.sov-card-grid.is-style-sov-stacked-deck .sov-card-grid__header {
	font-size: var(--font-size-h2);
	line-height: 1.2;
	color: var(--color-heading);
}

.sov-card-grid.is-style-sov-stacked-deck .sov-card-grid__sub-header {
	margin-top: 6px;
	font-size: var(--font-size-body);
	line-height: 1.2;
}

.is-style-sov-stacked-deck .sov-slider {
	gap: 20px;
}

/* The controls as wide as the dots, so the pause button follows them. */
.is-style-sov-stacked-deck .sov-slider__controls {
	align-self: center;
}

.is-style-sov-stacked-deck .sov-slider__track {
	position: relative;
	isolation: isolate;
	padding-top: 21px;
	perspective: 1400px;
}

/* Fewer than three slides: the edges the deck can't fill (the card
   behind, when there is one, covers the red edge). */
.is-style-sov-stacked-deck:is(.sov-card-grid--items-0, .sov-card-grid--items-1, .sov-card-grid--items-2) .sov-slider__track::before,
.is-style-sov-stacked-deck:is(.sov-card-grid--items-0, .sov-card-grid--items-1, .sov-card-grid--items-2) .sov-slider__track::after {
	content: "";
	position: absolute;
	height: 60px;
	border-radius: 15px;
}

.is-style-sov-stacked-deck:is(.sov-card-grid--items-0, .sov-card-grid--items-1, .sov-card-grid--items-2) .sov-slider__track::before {
	top: 0;
	inset-inline: 36px;
	z-index: 0;
	background: var(--accent-400);
}

.is-style-sov-stacked-deck:is(.sov-card-grid--items-0, .sov-card-grid--items-1, .sov-card-grid--items-2) .sov-slider__track::after {
	top: 7px;
	inset-inline: 16px;
	z-index: 1;
	background: var(--secondary-400);
}

/* Out of sight: in place 2, transparent. */
.is-style-sov-stacked-deck .sov-slide {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 115px minmax(0, 1fr);
	align-items: center;
	gap: 24px;
	padding: 28px 60px 24px;
	border-radius: 15px;
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-21px);
	transform-origin: 50% 100%;
	clip-path: inset(0 36px round 15px);
	transition: transform .6s ease, clip-path .6s ease, opacity .45s ease, visibility .6s;
}

/* Each card's colour: mint, red, orange, then again. */
.is-style-sov-stacked-deck .sov-slide:nth-child(3n + 1) {
	background: var(--primary-200);
}

.is-style-sov-stacked-deck .sov-slide:nth-child(3n + 2) {
	background: var(--secondary-400);
}

.is-style-sov-stacked-deck .sov-slide:nth-child(3n) {
	background: var(--accent-400);
}

/* The front card's clip clears its shadow. */
.is-style-sov-stacked-deck .sov-slide[data-pos="0"] {
	z-index: 5;
	opacity: 1;
	visibility: visible;
	transform: none;
	clip-path: inset(-10px round 25px);
}

.is-style-sov-stacked-deck .sov-slide[data-pos="1"] {
	z-index: 4;
	opacity: 1;
	visibility: visible;
	transform: translateY(-14px);
	clip-path: inset(0 16px round 15px);
}

/* Shows at once: it waited here, behind the card moving forward. */
.is-style-sov-stacked-deck .sov-slide[data-pos="2"] {
	z-index: 3;
	opacity: 1;
	visibility: visible;
	transition: transform .6s ease, clip-path .6s ease, opacity 0s, visibility 0s;
}

/* Falls toward the viewer until edge-on, then goes. */
.is-style-sov-stacked-deck .sov-slide[data-pos="prev"] {
	z-index: 6;
	transform: rotateX(-90deg);
	clip-path: inset(-10px round 25px);
	transition: transform .6s cubic-bezier(.55, .05, .7, .2), opacity 0s linear .6s, visibility 0s linear .6s;
}

/* The copy shows on the front card, and stays on the card leaving. */
.is-style-sov-stacked-deck .sov-slide > * {
	opacity: 0;
	transition: opacity .2s ease;
}

.is-style-sov-stacked-deck .sov-slide:is([data-pos="0"], [data-pos="prev"]) > * {
	opacity: 1;
}

.is-style-sov-stacked-deck .sov-slide[data-pos="0"] > * {
	transition: opacity .35s ease .3s;
}

.is-style-sov-stacked-deck .sov-slide__media {
	width: 115px;
}

.is-style-sov-stacked-deck .sov-slide__icon {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
}

/* Title, then the body's two columns. */
.is-style-sov-stacked-deck .sov-slide__copy {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.87fr);
	align-items: center;
	gap: 24px;
}

.sov-card-grid.is-style-sov-stacked-deck .sov-slide .sov-slide__title {
	font-size: var(--font-size-h2);
	font-weight: 600;
	line-height: 1.2;
	color: var(--primary-400);
}

.is-style-sov-stacked-deck .sov-slide__body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 64px;
	margin: 0;
	padding-inline: 20px;
	font-size: var(--font-size-small);
	line-height: 19px;
	color: var(--primary-400);
}

.is-style-sov-stacked-deck .sov-slide__body p {
	margin: 0;
}

/* Each column opens with its label in bold ("Instead of...", "You can
   Try"), on its own line whether or not a line break follows it. */
.is-style-sov-stacked-deck .sov-slide__body p > strong:first-child {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-h3);
	font-weight: 600;
	line-height: 1.2;
}

.is-style-sov-stacked-deck .sov-slide__body p > strong:first-child + br {
	display: none;
}

@media screen and (max-width: 1000px) {
	.is-style-sov-stacked-deck .sov-slide {
		grid-template-columns: 90px minmax(0, 1fr);
		padding: 28px 32px 24px;
	}

	.is-style-sov-stacked-deck .sov-slide__media {
		width: 90px;
	}

	.is-style-sov-stacked-deck .sov-slide__copy {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.is-style-sov-stacked-deck .sov-slide__body {
		column-gap: 32px;
		padding-inline: 0;
	}
}

@media screen and (max-width: 600px) {
	.is-style-sov-stacked-deck .sov-slide {
		grid-template-columns: 64px minmax(0, 1fr);
		align-items: start;
		gap: 16px;
		padding: 24px 20px 20px;
	}

	.is-style-sov-stacked-deck .sov-slide__media {
		width: 64px;
	}

	.is-style-sov-stacked-deck .sov-slide__body {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sov-slide,
	.is-style-sov-hero-slides .sov-slide,
	.is-style-sov-stacked-deck .sov-slide,
	.is-style-sov-stacked-deck .sov-slide:is([data-pos="2"], [data-pos="prev"]),
	.is-style-sov-stacked-deck .sov-slide > *,
	.is-style-sov-stacked-deck .sov-slide[data-pos="0"] > * {
		transition: none;
	}

	.sov-slider .sov-slider__dot::before,
	.is-style-sov-duotone .sov-card__panel {
		transition: none;
	}
}