.wp-block-crunchr-logo-story-header.crunchr-logo-story-header {
	--crunchr-logo-story-gutter: max(
		var(--wp--style--root--padding-right, 20px),
		calc((100cqw - 1440px) / 2)
	);
	position: relative;
	left: 50%;
	isolation: isolate;
	box-sizing: border-box;
	width: 100cqw;
	max-width: 100cqw !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	overflow: hidden;
	background:
		radial-gradient(ellipse 58% 88% at 79% 48%, #fff 0%, rgba(255, 255, 255, .72) 38%, transparent 74%),
		var(--wp--preset--color--neutral-50, #f2f4f7);
	transform: translateX(-50%);
}

.crunchr-logo-story-header__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: min(calc(100% - (2 * var(--crunchr-logo-story-gutter))), 1440px);
	margin-inline: auto;
	padding-top: max(160px, calc(var(--crunchr-header-height, 80px) + 72px));
	padding-bottom: var(--wp--preset--spacing--110, 80px);
}

.crunchr-logo-story-header__columns {
	align-items: center !important;
	gap: clamp(48px, 6vw, 96px) !important;
	margin: 0;
}

.crunchr-logo-story-header__columns > .wp-block-column:last-child {
	min-width: 0;
}

.crunchr-logo-story-grid {
	--crunchr-story-grid-gap: clamp(10px, 1.4vw, 20px);
	position: relative;
	width: min(calc(100% - 10px), 700px);
	margin-right: 10px;
	margin-left: auto;
}

.crunchr-logo-story-grid__eyebrow {
	display: flex;
	align-items: center;
	gap: 7px;
	min-height: 16px;
	margin: 0 0 12px;
	color: var(--wp--preset--color--neutral-900, #171d26);
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.crunchr-logo-story-grid__eyebrow::after {
	flex: 0 0 auto;
	width: 2px;
	height: 14px;
	background: var(--wp--preset--color--orange-500, #ff7518);
	content: "";
	animation: crunchr-logo-story-caret 1.05s steps(1, end) infinite;
}

@keyframes crunchr-logo-story-caret {
	0%, 48% { opacity: 1; }
	49%, 100% { opacity: 0; }
}

.crunchr-logo-story-grid__cards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(3, minmax(0, 1fr));
	gap: var(--crunchr-story-grid-gap);
	aspect-ratio: 35 / 26;
}

.crunchr-logo-story-grid__cards::before {
	position: absolute;
	z-index: 0;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(
			to bottom,
			transparent 0%,
			rgba(125, 140, 163, .25) 35%,
			rgba(125, 140, 163, .25) 100%
		) calc(25% - (var(--crunchr-story-grid-gap) / 4)) 0 / .75px 33.333% no-repeat,
		linear-gradient(
			to bottom,
			rgba(125, 140, 163, .25) 0%,
			rgba(125, 140, 163, .25) 65%,
			transparent 100%
		) calc(75% + (var(--crunchr-story-grid-gap) / 4)) 100% / .75px 33.333% no-repeat;
	content: "";
}

.crunchr-logo-story-grid__cards::after {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	content: "";
}

.crunchr-logo-story-grid__cards::after {
	top: -15.19%;
	left: -19.86%;
	width: 132.86%;
	height: 127.5%;
	background: url("../../icons/logo-story-header-lines.svg") center / 100% 100% no-repeat;
}

.crunchr-logo-story-card {
	position: relative;
	z-index: 1;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	border: .75px solid rgba(15, 94, 213, .62);
	border-radius: clamp(8px, 1.1vw, 16px);
	background: rgba(242, 247, 255, .78);
	box-shadow:
		0 4px 4px rgba(5, 25, 59, .07),
		inset -3px -4px 13.6px rgba(15, 94, 213, .24),
		inset 4px 4px 26px rgba(15, 94, 213, .08);
}

@property --crunchr-card-radial-width {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 62%;
}

@property --crunchr-card-radial-height {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 48%;
}

.crunchr-logo-story-card.is-type-logo {
	border-color: transparent;
	background:
		radial-gradient(
			circle at center,
			rgba(15, 94, 213, 0) 0%,
			rgba(15, 94, 213, .12) 100%
		) padding-box,
		linear-gradient(
			rgba(255, 255, 255, .78),
			rgba(255, 255, 255, .78)
		) padding-box,
		linear-gradient(
			135deg,
			rgba(15, 94, 213, .58) 0%,
			rgba(15, 94, 213, .24) 38%,
			rgba(15, 94, 213, .11) 50%,
			rgba(15, 94, 213, .27) 62%,
			rgba(15, 94, 213, .64) 100%
		) border-box;
	box-shadow:
		0 4px 4px rgba(5, 25, 59, .07),
		inset -3px -4px 13.6px rgba(15, 94, 213, .31),
		inset 4px 4px 26px rgba(15, 94, 213, .05);
}

.crunchr-logo-story-card.is-type-story {
	border-color: transparent;
	box-shadow: 0 4px 4px rgba(5, 25, 59, .07);
}

.crunchr-logo-story-card::before {
	--crunchr-card-radial-width: 62%;
	--crunchr-card-radial-height: 48%;

	position: absolute;
	z-index: 3;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	background: radial-gradient(
		ellipse var(--crunchr-card-radial-width) var(--crunchr-card-radial-height) at 50% 0%,
		rgba(108, 172, 247, .2) 0%,
		rgba(15, 94, 213, .08) 42%,
		transparent 76%
	);
	content: "";
	opacity: 0;
	transition:
		--crunchr-card-radial-width 560ms cubic-bezier(.16, 1, .3, 1),
		--crunchr-card-radial-height 560ms cubic-bezier(.16, 1, .3, 1),
		opacity 260ms ease-out;
}

.crunchr-logo-story-card:hover::before,
.crunchr-logo-story-card:focus-within::before {
	--crunchr-card-radial-width: 145%;
	--crunchr-card-radial-height: 155%;
	opacity: 1;
}

.crunchr-logo-story-card:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.crunchr-logo-story-card:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.crunchr-logo-story-card:nth-child(3) { grid-area: 1 / 3 / 3 / 5; }
.crunchr-logo-story-card:nth-child(4) { grid-area: 2 / 1 / 4 / 3; }
.crunchr-logo-story-card:nth-child(5) { grid-area: 3 / 3 / 4 / 4; }
.crunchr-logo-story-card:nth-child(6) { grid-area: 3 / 4 / 4 / 5; }

.crunchr-logo-story-card__image,
.crunchr-logo-story-card__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 650ms cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.crunchr-logo-story-card__video {
	z-index: 1;
}

.crunchr-logo-story-card__shade {
	position: absolute;
	z-index: 2;
	inset: 0;
	pointer-events: none;
}

.crunchr-logo-story-card.is-type-story .crunchr-logo-story-card__shade {
	background: linear-gradient(to bottom, rgba(5, 25, 59, .04) 32%, rgba(5, 25, 59, .62));
}

.crunchr-logo-story-card__logo {
	position: absolute;
	z-index: 4;
	top: 50%;
	left: 50%;
	width: auto;
	max-width: 58%;
	height: auto;
	max-height: 24%;
	object-fit: contain;
	transform: translate(-50%, -50%);
	transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.crunchr-logo-story-card.is-type-logo:hover .crunchr-logo-story-card__logo,
.crunchr-logo-story-card.is-type-logo:focus-within .crunchr-logo-story-card__logo {
	transform: translate(-50%, -50%) scale(1.09);
}

.crunchr-logo-story-card.is-type-story:hover .crunchr-logo-story-card__image,
.crunchr-logo-story-card.is-type-story:hover .crunchr-logo-story-card__video,
.crunchr-logo-story-card.is-type-story:focus-within .crunchr-logo-story-card__image,
.crunchr-logo-story-card.is-type-story:focus-within .crunchr-logo-story-card__video {
	transform: scale(1.065);
}

.crunchr-logo-story-card.is-type-story:hover .crunchr-logo-story-card__text,
.crunchr-logo-story-card.is-type-story:focus-within .crunchr-logo-story-card__text {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.crunchr-logo-story-card.is-type-story .crunchr-logo-story-card__logo {
	top: clamp(16px, 2.2vw, 32px);
	left: clamp(16px, 2.2vw, 32px);
	max-width: 42%;
	max-height: 10%;
	filter: brightness(0) invert(1);
	transform: none;
}

.crunchr-logo-story-card__text {
	position: absolute;
	z-index: 4;
	right: clamp(16px, 2.2vw, 32px);
	bottom: clamp(16px, 2.2vw, 32px);
	left: clamp(16px, 2.2vw, 32px);
	margin: 0;
	color: #fff;
	font-size: clamp(var(--wp--preset--font-size--eyebrow-small), .9vw, var(--wp--preset--font-size--caption));
	font-weight: 500;
	line-height: 1.5;
}

.crunchr-logo-story-card.has-play .crunchr-logo-story-card__text,
.crunchr-logo-story-card:has(.crunchr-logo-story-card__play) .crunchr-logo-story-card__text {
	right: auto !important;
	box-sizing: border-box;
	width: calc(100% - 132px) !important;
	max-width: none;
	overflow-wrap: anywhere;
	word-break: normal;
}

.crunchr-logo-story-card__link {
	position: absolute;
	z-index: 5;
	inset: 0;
	border-radius: inherit;
}

.crunchr-logo-story-card__link:focus-visible {
	outline: 3px solid #ff7518;
	outline-offset: -4px;
}

.crunchr-logo-story-card__play {
	position: absolute;
	z-index: 6;
	right: 16px;
	bottom: 20px;
	display: grid;
	width: 46px;
	height: 46px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .42);
	color: #fff;
	font-size: 0;
	line-height: 0;
	-webkit-appearance: none;
	appearance: none;
	-webkit-text-size-adjust: 100%;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
	transition: transform 160ms ease-out;
}

.crunchr-logo-story-card__play::before {
	width: 0;
	height: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid currentColor;
	content: "";
	transform: translateX(2px);
}

.crunchr-logo-story-card__play span { display: none; }
.crunchr-logo-story-card__play:hover { transform: scale(1.06); }
.crunchr-logo-story-card.is-playing .crunchr-logo-story-card__image,
.crunchr-logo-story-card.is-playing .crunchr-logo-story-card__shade,
.crunchr-logo-story-card.is-playing .crunchr-logo-story-card__logo,
.crunchr-logo-story-card.is-playing .crunchr-logo-story-card__text,
.crunchr-logo-story-card.is-playing .crunchr-logo-story-card__link,
.crunchr-logo-story-card.is-playing .crunchr-logo-story-card__play { opacity: 0; visibility: hidden; }

.editor-styles-wrapper .crunchr-logo-story-card__link { pointer-events: none; }
.editor-styles-wrapper .crunchr-logo-story-card__text { z-index: 7; }
.editor-styles-wrapper .crunchr-logo-story-grid__cards > .block-editor-block-list__block {
	min-width: 0;
	min-height: 0;
	margin: 0;
}
.editor-styles-wrapper .crunchr-logo-story-grid__cards > .block-editor-block-list__block:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
.editor-styles-wrapper .crunchr-logo-story-grid__cards > .block-editor-block-list__block:nth-child(2) { grid-area: 1 / 2 / 2 / 3; }
.editor-styles-wrapper .crunchr-logo-story-grid__cards > .block-editor-block-list__block:nth-child(3) { grid-area: 1 / 3 / 3 / 5; }
.editor-styles-wrapper .crunchr-logo-story-grid__cards > .block-editor-block-list__block:nth-child(4) { grid-area: 2 / 1 / 4 / 3; }
.editor-styles-wrapper .crunchr-logo-story-grid__cards > .block-editor-block-list__block:nth-child(5) { grid-area: 3 / 3 / 4 / 4; }
.editor-styles-wrapper .crunchr-logo-story-grid__cards > .block-editor-block-list__block:nth-child(6) { grid-area: 3 / 4 / 4 / 5; }
.editor-styles-wrapper .crunchr-logo-story-grid__cards > .block-editor-block-list__block > .crunchr-logo-story-card {
	height: 100%;
}

@media (max-width: 900px) {
	.wp-block-crunchr-logo-story-header.crunchr-logo-story-header {
		--crunchr-logo-story-gutter: var(--wp--style--root--padding-right, 20px);
	}

	.crunchr-logo-story-header__inner {
		padding-top: max(144px, calc(var(--crunchr-header-height, 64px) + 56px));
	}

	.crunchr-logo-story-header__columns {
		flex-wrap: wrap !important;
	}

	.crunchr-logo-story-header__columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.crunchr-logo-story-grid {
		width: min(100%, 700px);
		margin: 0 auto;
	}
}

@media (max-width: 480px) {
	.crunchr-logo-story-card__text {
		right: 12px;
		bottom: 12px;
		left: 12px;
		font-size: var(--wp--preset--font-size--eyebrow-small);
		line-height: 1.35;
	}

	.crunchr-logo-story-card.has-play .crunchr-logo-story-card__text,
	.crunchr-logo-story-card:has(.crunchr-logo-story-card__play) .crunchr-logo-story-card__text {
		right: auto !important;
		width: calc(100% - 84px) !important;
	}

	.crunchr-logo-story-card__play {
		right: 10px;
		bottom: 10px;
		width: 36px;
		height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.crunchr-logo-story-grid__eyebrow::after { animation: none; }
	.crunchr-logo-story-card::before { transition: none; }
	.crunchr-logo-story-card__image,
	.crunchr-logo-story-card__video,
	.crunchr-logo-story-card__logo { transition: none; }
}