/*
 * Products index (page 34)
 * A Deep Mullion family jump bar that sticks below the site header, five
 * white family bands (compact header beside the family animation, then the
 * product cards) and a Soft Daylight closing band with resource links.
 * Cards are Soft Daylight panels under a Deep Mullion top rule; the whole
 * card is one link and lifts slightly on hover.
 */

.cardinal-products,
.cardinal-products-resources,
.cardinal-products-closing,
.cardinal-products-hero {
	--cardinal-color-red: #ed1c24;
	--cardinal-color-red-dark: #b91218;
	--cardinal-color-red-active: #ff6267;
	--cardinal-color-ink-strong: #121010;
	--cardinal-color-ink: #191919;
	--cardinal-color-muted: #5f6161;
	--cardinal-color-rule: #d8d8d5;
	--cardinal-color-daylight: #f7f7f7;
	--cardinal-color-paper: #fff;
	--cardinal-font-body: "Mulish", "muli", Arial, sans-serif;
	--cardinal-font-control: "din-2014", "Arial Narrow", Arial, sans-serif;
	--cardinal-focus: 0 0 0 3px var(--cardinal-color-paper), 0 0 0 6px var(--cardinal-color-red-dark);
	--cardinal-gutter: clamp(1.25rem, 4vw, 3rem);
	--cardinal-products-header: 85px;
	--cardinal-products-jump: 3rem;
	--cardinal-ease-out: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 767px) {
	.cardinal-products { --cardinal-products-header: 75px; }
}

.cardinal-products *,
.cardinal-products *::before,
.cardinal-products *::after,
.cardinal-products-resources *,
.cardinal-products-resources *::before,
.cardinal-products-resources *::after { box-sizing: border-box; }

.cardinal-products,
.cardinal-products-resources {
	color: var(--cardinal-color-ink);
	font-family: var(--cardinal-font-body);
	font-size: 1rem;
	line-height: 1.5;
}

.cardinal-products ::selection,
.cardinal-products-resources ::selection {
	background: var(--cardinal-color-ink-strong);
	color: var(--cardinal-color-paper);
}

.cardinal-products .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cardinal-products .cardinal-products__shell,
.cardinal-products-resources .cardinal-products__shell {
	width: 100%;
	max-width: calc(71.25rem + 2 * var(--cardinal-gutter));
	margin: 0 auto;
	padding: 0 var(--cardinal-gutter);
}

.cardinal-products ul,
.cardinal-products-resources ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cardinal-products li,
.cardinal-products-resources li { margin: 0; }

/* Smooth in-page jumps for visitors who have not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	html:has(.cardinal-products) { scroll-behavior: smooth; }
}

/* ---------- Family jump bar ---------- */

.cardinal-products .cardinal-products__jump {
	position: sticky;
	top: var(--cardinal-products-header);
	z-index: 11;
	background: var(--cardinal-color-ink-strong);
}

.cardinal-products .cardinal-products__jump-list {
	display: flex;
	justify-content: center;
	max-width: calc(71.25rem + 2 * var(--cardinal-gutter));
	margin: 0 auto;
	padding: 0 var(--cardinal-gutter);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding: 0 var(--cardinal-gutter);
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.cardinal-products .cardinal-products__jump-list li { scroll-snap-align: start; }

/* Set by the script only while more links sit past the right edge. */
.cardinal-products .cardinal-products__jump-list[data-overflow] {
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 3rem), transparent);
}

.cardinal-products .cardinal-products__jump-list::-webkit-scrollbar { display: none; }

.cardinal-products .cardinal-products__jump-list li { flex: none; }

.cardinal-products .cardinal-products__jump-link,
.cardinal-products .cardinal-products__jump-link:visited {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--cardinal-products-jump);
	padding: 0 1.25rem;
	color: var(--cardinal-color-paper);
	font-family: var(--cardinal-font-control);
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: .08em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	transition: color .2s ease-out;
}

.cardinal-products .cardinal-products__jump-link::after {
	position: absolute;
	right: 1.25rem;
	bottom: 0;
	left: 1.25rem;
	height: 3px;
	background: currentColor;
	content: "";
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .3s var(--cardinal-ease-out);
}

.cardinal-products .cardinal-products__jump-link:hover::after { transform: scaleX(1); }

.cardinal-products .cardinal-products__jump-link[aria-current="true"] {
	color: var(--cardinal-color-red-active);
	font-weight: 700;
}

.cardinal-products .cardinal-products__jump-link[aria-current="true"]::after { transform: scaleX(1); }

.cardinal-products .cardinal-products__jump-link:focus-visible {
	outline: none;
	/* DESIGN.md Accessible Focus, drawn inside because the list clips overflow. */
	box-shadow: inset 0 0 0 3px var(--cardinal-color-paper), inset 0 0 0 6px var(--cardinal-color-red-dark);
}

/* ---------- Family band ---------- */

.cardinal-products .cardinal-products__family {
	padding: clamp(3rem, 7vw, 6rem) 0;
	scroll-margin-top: calc(var(--cardinal-products-header) + var(--cardinal-products-jump));
	background: var(--cardinal-color-paper);
}

.cardinal-products .cardinal-products__family + .cardinal-products__family { border-top: 1px solid var(--cardinal-color-rule); }

.cardinal-products .cardinal-products__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
	gap: clamp(1.5rem, 4vw, 4rem);
	align-items: center;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}

.cardinal-products .cardinal-products__brand {
	display: block;
	width: auto;
	max-width: 100%;
	height: 1.375rem;
	margin: 0 0 1.5rem;
}

.cardinal-products h2.cardinal-products__title {
	margin: 0 0 1rem;
	padding: 0;
	color: var(--cardinal-color-ink-strong);
	font-family: var(--cardinal-font-body);
	font-size: clamp(1.75rem, 2.4vw, 2.5rem);
	font-weight: 200;
	letter-spacing: normal;
	line-height: 1.2;
	text-transform: none;
	text-wrap: balance;
}

.cardinal-products .cardinal-products__lead {
	max-width: 34rem;
	margin: 0;
	color: var(--cardinal-color-muted);
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: 1.5;
	text-wrap: pretty;
}

/* The animation: the video is placed so only the crop holding the glass shows. */
.cardinal-products .cardinal-products__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--cardinal-products-ratio, 4 / 3);
	background: #fafafa;
}

.cardinal-products .cardinal-products__family--insulating .cardinal-products__media { background: #f5f5f5; }

.cardinal-products .cardinal-products__video,
.cardinal-products .cardinal-products__poster {
	position: absolute;
	top: var(--cardinal-products-video-y);
	left: var(--cardinal-products-video-x);
	display: block;
	width: var(--cardinal-products-video-w);
	max-width: none;
	height: var(--cardinal-products-video-h);
	margin: 0;
	border-radius: 0;
	object-fit: fill;
	pointer-events: none;
}

/* The video stays clear of the still frame until it first plays. */
.cardinal-products .cardinal-products__video { opacity: 0; }

.cardinal-products [data-started] .cardinal-products__video { opacity: 1; }

.cardinal-products .cardinal-products__toggle {
	position: absolute;
	right: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--cardinal-color-ink-strong);
	color: var(--cardinal-color-paper);
	cursor: pointer;
	transition: background-color .2s ease-out;
}

.cardinal-products .cardinal-products__toggle[hidden] { display: none; }

.cardinal-products .cardinal-products__toggle:hover { background: var(--cardinal-color-red-dark); }

.cardinal-products .cardinal-products__toggle:focus-visible {
	outline: none;
	box-shadow: inset var(--cardinal-focus);
}

.cardinal-products .cardinal-products__icon-pause { display: none; }

.cardinal-products [data-state="playing"] .cardinal-products__icon-pause { display: block; }

.cardinal-products [data-state="playing"] .cardinal-products__icon-play { display: none; }

/* ---------- Product cards ---------- */

.cardinal-products .cardinal-products__family--single .cardinal-products__head { margin-bottom: 0; }

.cardinal-products .cardinal-products__cards.cardinal-products__cards--single {
	--cardinal-products-columns: 1;
	max-width: 22rem;
	margin-top: 2rem;
}

.cardinal-products .cardinal-products__cards {
	display: grid;
	grid-template-columns: repeat(var(--cardinal-products-columns, 4), minmax(0, 1fr));
	gap: 1.5rem;
}

.cardinal-products .cardinal-products__groups {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem 1.5rem;
}

.cardinal-products .cardinal-products__group { min-width: 0; }

.cardinal-products .cardinal-products__group--span-2 { grid-column: span 2; }

.cardinal-products .cardinal-products__group--span-3 { grid-column: span 3; }

.cardinal-products .cardinal-products__group--span-4 { grid-column: span 4; }

.cardinal-products .cardinal-products__group .cardinal-products__cards { --cardinal-products-columns: 1; }

.cardinal-products .cardinal-products__group--span-2 .cardinal-products__cards { --cardinal-products-columns: 2; }

.cardinal-products .cardinal-products__group--span-3 .cardinal-products__cards { --cardinal-products-columns: 3; }

.cardinal-products .cardinal-products__group--span-4 .cardinal-products__cards { --cardinal-products-columns: 4; }

.cardinal-products .cardinal-products__group-label {
	margin: 0 0 .75rem;
	color: var(--cardinal-color-ink-strong);
	font-family: var(--cardinal-font-control);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cardinal-products .cardinal-products__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 1.25rem 1.25rem 1.25rem;
	border-top: 2px solid var(--cardinal-color-ink-strong);
	background: var(--cardinal-color-daylight);
	transition:
		background-color .25s ease-out,
		box-shadow .35s var(--cardinal-ease-out),
		transform .35s var(--cardinal-ease-out);
}

.cardinal-products .cardinal-products__card:hover {
	background: var(--cardinal-color-paper);
	box-shadow: 0 3px 20px rgba(0, 0, 0, .16);
	transform: translateY(-2px);
}

.cardinal-products h3.cardinal-products__name {
	margin: 0;
	padding: 0 1.75rem 0 0;
	color: var(--cardinal-color-ink-strong);
	font-family: var(--cardinal-font-body);
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.3;
	text-transform: none;
	text-wrap: balance;
}

.cardinal-products .cardinal-products__card--external h3.cardinal-products__name { padding-right: 7.5rem; }

/* Market mark (Canada): the header menu's maple leaf after the name, in
 * Cardinal Red, cap height tall and standing on the baseline. */
.cardinal-products .cardinal-products__market {
	white-space: nowrap;
}

.cardinal-products .cardinal-products__market-icon {
	display: inline-block;
	fill: var(--cardinal-color-red);
	height: 0.7em;
	margin-left: 0.05em;
	overflow: visible;
	vertical-align: baseline;
	width: 0.65em;
}

.cardinal-products .cardinal-products__link,
.cardinal-products .cardinal-products__link:visited,
.cardinal-products .cardinal-products__link:hover {
	color: inherit;
	text-decoration: none;
}

/* The link's hit area covers the whole card. */
.cardinal-products .cardinal-products__link::after {
	position: absolute;
	inset: -2px 0 0;
	z-index: 1;
	content: "";
}

.cardinal-products .cardinal-products__link:focus { outline: none; }

.cardinal-products .cardinal-products__link:focus-visible::after { box-shadow: var(--cardinal-focus); }

.cardinal-products .cardinal-products__nowrap { white-space: nowrap; }

.cardinal-products .cardinal-products__line {
	margin: .5rem 0 0;
	color: var(--cardinal-color-muted);
	font-size: 1rem;
	line-height: 1.45;
	text-wrap: pretty;
}

.cardinal-products .cardinal-products__data,
.cardinal-products .cardinal-products__facts {
	margin-top: auto;
	padding-top: 1.25rem;
}

.cardinal-products .cardinal-products__data-note {
	margin: 0 0 .25rem;
	color: var(--cardinal-color-muted);
	font-family: var(--cardinal-font-control);
	font-size: .72rem;
	font-weight: 400;
	letter-spacing: .07em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cardinal-products .cardinal-products__data-note,
.cardinal-products .cardinal-products__values,
.cardinal-products .cardinal-products__facts li { font-variant-numeric: tabular-nums lining-nums; }

.cardinal-products .cardinal-products__values {
	/* A value never breaks; in a narrow card the last pair moves to a second row. */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .375rem .75rem;
	margin: 0;
	padding: .625rem 0 0;
	border-top: 1px solid var(--cardinal-color-rule);
}

.cardinal-products .cardinal-products__values div { flex: none; }

.cardinal-products .cardinal-products__values dt {
	margin: 0;
	color: var(--cardinal-color-muted);
	font-family: var(--cardinal-font-control);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
}

.cardinal-products .cardinal-products__values abbr {
	border: 0;
	text-decoration: none;
	cursor: inherit;
}

.cardinal-products .cardinal-products__values dd {
	margin: 0;
	color: var(--cardinal-color-ink-strong);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.cardinal-products .cardinal-products__facts {
	display: grid;
	gap: .375rem;
}

.cardinal-products .cardinal-products__facts li {
	padding: .5rem 0 0;
	border-top: 1px solid var(--cardinal-color-rule);
	color: var(--cardinal-color-ink);
	font-size: .875rem;
	line-height: 1.45;
	text-wrap: pretty;
}

.cardinal-products .cardinal-products__facts li + li {
	padding-top: .375rem;
	border-top: 0;
}

.cardinal-products .cardinal-products__cue {
	position: absolute;
	top: 1.4rem;
	right: 1.25rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--cardinal-color-ink-strong);
	transition: color .2s ease-out, transform .35s var(--cardinal-ease-out);
}

.cardinal-products .cardinal-products__cue svg { display: block; flex: none; }

.cardinal-products .cardinal-products__cue-text {
	font-family: var(--cardinal-font-control);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1;
	text-transform: lowercase;
}

.cardinal-products .cardinal-products__card:hover .cardinal-products__cue {
	color: var(--cardinal-color-red-dark);
	transform: translateX(3px);
}

.cardinal-products .cardinal-products__card--external:hover .cardinal-products__cue { transform: translate(2px, -2px); }

.cardinal-products .cardinal-products__footnote {
	max-width: 31rem;
	margin: 2rem 0 0;
	color: var(--cardinal-color-muted);
	font-size: .875rem;
	line-height: 1.6;
	text-wrap: pretty;
}

.cardinal-products .cardinal-products__terms + .cardinal-products__footnote { margin-top: .5rem; }

.cardinal-products .cardinal-products__terms a,
.cardinal-products .cardinal-products__terms a:visited {
	color: var(--cardinal-color-ink-strong);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .2em;
}

.cardinal-products .cardinal-products__terms a:hover {
	color: var(--cardinal-color-red-dark);
	text-decoration-color: var(--cardinal-color-red);
}

/* ---------- Closing statement (Elementor section) and resources ---------- */

.cardinal-products-closing.elementor-section {
	margin: 0 !important;
	padding: clamp(3rem, 7vw, 6rem) 0 0 !important;
	background: var(--cardinal-color-daylight);
}

.cardinal-products-closing.elementor-section > .elementor-container,
.cardinal-products-closing .elementor-inner-section > .elementor-container {
	max-width: calc(71.25rem + 2 * var(--cardinal-gutter)) !important;
	padding: 0 var(--cardinal-gutter);
}

.cardinal-products-closing .elementor-inner-section > .elementor-container { padding: 0; }

.cardinal-products-closing .elementor-column > .elementor-widget-wrap { padding: 0 !important; }

.cardinal-products-closing .elementor-heading-title {
	max-width: 40rem;
	margin: 0 0 1rem !important;
	color: var(--cardinal-color-ink-strong) !important;
	font-family: var(--cardinal-font-body) !important;
	font-size: clamp(1.75rem, 2.4vw, 2.5rem) !important;
	font-weight: 200 !important;
	line-height: 1.2 !important;
	text-align: left !important;
	text-wrap: balance;
}

.cardinal-products-closing .elementor-widget-text-editor {
	max-width: 46rem;
	color: var(--cardinal-color-muted) !important;
	font-family: var(--cardinal-font-body) !important;
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem) !important;
	line-height: 1.5 !important;
	text-align: left !important;
	text-wrap: pretty;
}

.cardinal-products-closing .elementor-widget-text-editor p { margin: 0; }

.cardinal-products-resources {
	padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 6rem);
	background: var(--cardinal-color-daylight);
}

.cardinal-products-resources h2.cardinal-products-resources__title {
	margin: 0 0 1.25rem;
	padding: 0;
	color: var(--cardinal-color-ink-strong);
	font-family: var(--cardinal-font-control);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	line-height: 1.5;
	text-transform: uppercase;
}

.cardinal-products-resources .cardinal-products-resources__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.5rem;
}

.cardinal-products-resources .cardinal-products-resources__item {
	position: relative;
	padding: 1rem 0 0;
	border-top: 2px solid var(--cardinal-color-ink-strong);
}

.cardinal-products-resources .cardinal-products-resources__link,
.cardinal-products-resources .cardinal-products-resources__link:visited {
	color: var(--cardinal-color-ink-strong);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: .3em;
	transition: color .2s ease-out, text-decoration-color .2s ease-out;
}

.cardinal-products-resources .cardinal-products-resources__link::after {
	position: absolute;
	inset: -2px 0 0;
	content: "";
}

.cardinal-products-resources .cardinal-products-resources__link:hover {
	color: var(--cardinal-color-red-dark);
	text-decoration-color: var(--cardinal-color-red);
}

.cardinal-products-resources .cardinal-products-resources__link:focus { outline: none; }

.cardinal-products-resources .cardinal-products-resources__link:focus-visible::after { box-shadow: var(--cardinal-focus); }

.cardinal-products-resources .cardinal-products-resources__line {
	margin: .375rem 0 0;
	color: var(--cardinal-color-muted);
	font-size: .9375rem;
	line-height: 1.45;
	text-wrap: pretty;
}

/* ---------- Hero (Elementor section): display weight and a legible field ---------- */

.cardinal-products-hero .primary-headline .elementor-heading-title {
	font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	text-shadow: 0 1px 16px rgba(0, 0, 0, .35);
	text-wrap: balance;
}

.cardinal-products-hero .innerPage_banner > .elementor-widget-wrap > .elementor-background-overlay {
	background-image:
		radial-gradient(ellipse 60% 42% at 50% 56%, rgba(13, 13, 13, .64) 0%, rgba(13, 13, 13, .42) 50%, rgba(13, 13, 13, 0) 100%),
		linear-gradient(180deg, rgba(13, 13, 13, .12) 0%, rgba(13, 13, 13, .2) 55%, rgba(13, 13, 13, .55) 100%) !important;
	opacity: 1 !important;
}

/*
 * Hero height: about 80-84% of the viewport, short enough that the family
 * jump bar shows in the first view (1440 x 900, 1024 x 768). Elementor sizes
 * the section at 100vh, the inner section at 90vh and the overlay at 100vh
 * (Microthemer), which left a band of overlay without photo below the image;
 * every layer now fills the same box and the photo covers it.
 */
.cardinal-products-hero {
	--cardinal-products-hero-height: min(84svh, calc(100svh - var(--cardinal-products-hero-header, 85px) - 4.5rem));
}

@media (max-width: 767px) {
	.cardinal-products-hero { --cardinal-products-hero-header: 75px; }
}

.cardinal-products-hero.elementor-section {
	height: var(--cardinal-products-hero-height) !important;
	min-height: 22.5rem !important;
}

.cardinal-products-hero > .elementor-container,
.cardinal-products-hero .innerPage_banner,
.cardinal-products-hero .innerPage_banner > .elementor-widget-wrap {
	height: 100% !important;
	min-height: 0 !important;
}

.cardinal-products-hero .innerPage_banner > .elementor-widget-wrap {
	background-position: center 70% !important;
	background-size: cover !important;
}

.cardinal-products-hero .innerPage_banner .elementor-inner-section,
.cardinal-products-hero .innerPage_banner .elementor-inner-section > .elementor-container {
	height: 100% !important;
	min-height: 0 !important;
}

.cardinal-products-hero .innerPage_banner > .elementor-widget-wrap > .elementor-background-overlay { height: 100% !important; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	/* The calculator is desktop-only (as in the site nav), leaving four links. */
	.cardinal-products-resources .cardinal-products-resources__item--desktop { display: none; }

	.cardinal-products-resources .cardinal-products-resources__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 62rem) {
	.cardinal-products .cardinal-products__cards { --cardinal-products-columns: 2; }

	.cardinal-products .cardinal-products__head { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

	.cardinal-products .cardinal-products__groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.cardinal-products .cardinal-products__group--span-3,
	.cardinal-products .cardinal-products__group--span-4 { grid-column: span 2; }

	.cardinal-products .cardinal-products__group--span-3 .cardinal-products__cards,
	.cardinal-products .cardinal-products__group--span-4 .cardinal-products__cards { --cardinal-products-columns: 2; }

	.cardinal-products-resources .cardinal-products-resources__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 46rem) {
	.cardinal-products .cardinal-products__jump-list {
		justify-content: flex-start;
		padding: 0 .5rem;
	}

	.cardinal-products .cardinal-products__jump-link {
		padding: 0 .625rem;
		font-size: .75rem;
		letter-spacing: .04em;
	}

	.cardinal-products .cardinal-products__jump-link::after {
		right: .625rem;
		left: .625rem;
	}

	.cardinal-products .cardinal-products__head {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		margin-bottom: 1.5rem;
	}

	/* Stacked order: logo, heading, intro, animation, then a lone card. */
	.cardinal-products .cardinal-products__intro { display: contents; }

	.cardinal-products .cardinal-products__head .cardinal-products__media {
		order: 1;
		margin-top: 1.5rem;
	}

	.cardinal-products .cardinal-products__cards.cardinal-products__cards--single {
		order: 2;
		max-width: none;
		margin-top: 1.5rem;
	}

	/* A 16:9 crop of the same animation keeps the stacked band short. */
	.cardinal-products .cardinal-products__media { aspect-ratio: var(--cardinal-products-ratio-wide, 16 / 9); }

	.cardinal-products .cardinal-products__video,
	.cardinal-products .cardinal-products__poster {
		top: var(--cardinal-products-video-y-wide);
		left: var(--cardinal-products-video-x-wide);
		width: var(--cardinal-products-video-w-wide);
		height: var(--cardinal-products-video-h-wide);
	}

	.cardinal-products .cardinal-products__brand {
		height: 1.125rem;
		margin-bottom: 1rem;
	}

	.cardinal-products .cardinal-products__cards,
	.cardinal-products .cardinal-products__group[class] .cardinal-products__cards { --cardinal-products-columns: 1; }

	.cardinal-products .cardinal-products__cards { gap: .75rem; }

	.cardinal-products .cardinal-products__groups {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.75rem;
	}

	.cardinal-products .cardinal-products__group[class] { grid-column: auto; }

	.cardinal-products .cardinal-products__card { padding: 1rem 1rem 1.125rem; }

	.cardinal-products .cardinal-products__cue {
		top: 1.1rem;
		right: 1rem;
	}

	.cardinal-products .cardinal-products__data,
	.cardinal-products .cardinal-products__facts { padding-top: .875rem; }

	.cardinal-products-resources .cardinal-products-resources__list {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cardinal-products .cardinal-products__card,
	.cardinal-products .cardinal-products__cue,
	.cardinal-products .cardinal-products__jump-link::after { transition: none; }

	.cardinal-products .cardinal-products__card:hover,
	.cardinal-products .cardinal-products__card:hover .cardinal-products__cue { transform: none; }
}

@media (forced-colors: active) {
	.cardinal-products .cardinal-products__card { border: 1px solid CanvasText; }

	.cardinal-products .cardinal-products__link:focus-visible::after { outline: 3px solid Highlight; }

	.cardinal-products .cardinal-products__jump-link[aria-current="true"] { text-decoration: underline; }
}