/**
 * Terovania KAWAI USP Section — shared styles (editor + frontend).
 *
 * All theming flows through CSS custom properties on .kwusp-section. Host
 * themes can override them in their own stylesheet without modifying this
 * file. No global selectors, no customer-specific branding defaults baked in.
 */

.kwusp-section {
	--kwusp-section-bg: transparent;
	--kwusp-section-fg: currentColor;
	--kwusp-section-muted: rgba(0, 0, 0, 0.66);
	--kwusp-section-accent: #d62828;
	--kwusp-section-radius: 0.5rem;
	--kwusp-section-gap: clamp(1.5rem, 4vw, 3rem);
	--kwusp-section-pad-block: clamp(2rem, 6vw, 4rem);
	--kwusp-section-pad-inline: clamp(1rem, 4vw, 3rem);
	--kwusp-section-number-size: clamp(1rem, 1.2vw, 1.25rem);
	--kwusp-section-title-size: clamp(1.5rem, 2.4vw, 2.25rem);
	--kwusp-section-subtitle-size: clamp(1.05rem, 1.5vw, 1.25rem);
	--kwusp-section-body-size: 1rem;
	--kwusp-section-tile-size: clamp(96px, 14vw, 168px);
	--kwusp-section-transition: 200ms ease;

	background: var(--kwusp-section-bg);
	color: var(--kwusp-section-fg);
	padding: var(--kwusp-section-pad-block) var(--kwusp-section-pad-inline);
	box-sizing: border-box;
	scroll-margin-top: var(--kwusp-section-scroll-margin, 80px);
}

.kwusp-section *,
.kwusp-section *::before,
.kwusp-section *::after {
	box-sizing: inherit;
}

.kwusp-section__inner {
	display: grid;
	gap: var(--kwusp-section-gap);
	grid-template-columns: 1fr;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

@media (min-width: 768px) {
	.kwusp-section--default .kwusp-section__inner,
	.kwusp-section--media-left .kwusp-section__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: center;
	}
	.kwusp-section--default .kwusp-section__copy {
		order: 1;
	}
	.kwusp-section--default .kwusp-section__hero {
		order: 2;
	}
	.kwusp-section--media-left .kwusp-section__copy {
		order: 2;
	}
	.kwusp-section--media-left .kwusp-section__hero {
		order: 1;
	}
}

.kwusp-section--stacked .kwusp-section__inner {
	grid-template-columns: 1fr;
}

.kwusp-section--stacked .kwusp-section__hero {
	order: -1;
}

.kwusp-section--compact .kwusp-section__inner {
	grid-template-columns: 1fr;
	max-width: 800px;
}

.kwusp-section__copy {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
}

.kwusp-section__number {
	display: inline-block;
	font-size: var(--kwusp-section-number-size);
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--kwusp-section-accent);
}

.kwusp-section__title {
	margin: 0;
	font-size: var(--kwusp-section-title-size);
	line-height: 1.15;
	font-weight: 700;
	/* #124: the page language supplies the dictionary; allow browsers to use it
	 * when a long section title has to wrap on narrower viewports. */
	-webkit-hyphens: auto;
	hyphens: auto;
}

.kwusp-section__subtitle {
	margin: 0;
	font-size: var(--kwusp-section-subtitle-size);
	color: var(--kwusp-section-muted);
	font-weight: 500;
}

.kwusp-section__body {
	font-size: var(--kwusp-section-body-size);
	line-height: 1.6;
}

.kwusp-section__body p {
	margin: 0 0 0.85em;
}

.kwusp-section__body p:last-child {
	margin-bottom: 0;
}

.kwusp-section__cta {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.1rem;
	border-radius: 999px;
	background: var(--kwusp-section-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	transition: opacity var(--kwusp-section-transition), transform var(--kwusp-section-transition);
}

.kwusp-section__cta:hover,
.kwusp-section__cta:focus-visible {
	opacity: 0.92;
	transform: translateY(-1px);
	outline: none;
}

.kwusp-section__cta--preview {
	cursor: default;
	opacity: 0.85;
}

.kwusp-section__hero {
	min-width: 0;
}

.kwusp-section__hero-image {
	max-width: 100%;
	height: auto;
	border-radius: var(--kwusp-section-radius);
	display: block;
	object-fit: cover;
}

.kwusp-section__hero-placeholder {
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: var(--kwusp-section-radius);
	padding: 2.5rem 1rem;
	text-align: center;
	color: var(--kwusp-section-muted);
	font-style: italic;
}

.kwusp-section__tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--kwusp-section-tile-size), 1fr));
	gap: 0.75rem;
	margin-top: 0.75rem;
}

.kwusp-section__tile-wrap {
	margin: 0;
	padding: 0;
}

.kwusp-section__tile {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: calc(var(--kwusp-section-radius) * 0.85);
	border: 0;
	padding: 0;
	background: rgba(0, 0, 0, 0.04);
	cursor: pointer;
	overflow: hidden;
	display: block;
}

.kwusp-section__tile::after {
	content: '';
	position: absolute;
	inset: auto 0 0;
	height: 55%;
	background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.58) 100%);
	pointer-events: none;
	z-index: 1;
}

.kwusp-section__tile:hover,
.kwusp-section__tile:focus-visible {
	outline: none;
}

.kwusp-section__tile-thumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease-in-out;
}

/* Reference parity (#86): the original zooms the thumb (scale 1.05, 300ms
   ease-in-out) on hover/focus instead of lifting the tile. */
.kwusp-section__tile:hover .kwusp-section__tile-thumb,
.kwusp-section__tile:focus-visible .kwusp-section__tile-thumb {
	transform: scale(1.05);
}

.kwusp-section__tile-thumb--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255, 255, 255, 0.72);
	background: linear-gradient(135deg, #6b6f76 0%, #2f3338 100%);
}

.kwusp-section__tile-icon {
	position: absolute;
	bottom: 0.4rem;
	right: 0.4rem;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	z-index: 2;
}

.kwusp-section__tile-title {
	position: absolute;
	left: 0.5rem;
	bottom: 0.5rem;
	right: 2.5rem;
	color: #fff;
	font-size: 0.78rem;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 2;
}

/* Issue #86: reference-style dark hover overlay with the per-section CTA
   word ("Ansehen"). Shown on hover AND keyboard focus. Measured original
   (kawai.eu/de/usp): black 0.5, opacity 0.3s cubic-bezier(0.4,0,0.2,1),
   label 12.8px/600/0.05em uppercase. We keep 0.65 black instead of 0.5 —
   the only deliberate deviation — so the white label stays at ≥4.5:1
   contrast over any thumbnail. */
.kwusp-section__tile-cta {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	background: rgba(0, 0, 0, 0.65);
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: none;
}

.kwusp-section__tile:hover .kwusp-section__tile-cta,
.kwusp-section__tile:focus-visible .kwusp-section__tile-cta {
	opacity: 1;
}

.kwusp-section__tile-cta-text {
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.kwusp-section__tile,
	.kwusp-section__tile-cta,
	.kwusp-section__tile-thumb,
	.kwusp-section__cta {
		transition: none;
	}

	.kwusp-section__tile:hover .kwusp-section__tile-thumb,
	.kwusp-section__tile:focus-visible .kwusp-section__tile-thumb {
		transform: none;
	}
}

/* Reference parity: video/media sits in the left column on desktop; text and tiles sit right. */
@media (min-width: 768px) {
	.kwusp-section--default .kwusp-section__copy {
		order: 2;
	}
	.kwusp-section--default .kwusp-section__hero {
		order: 1;
	}
	.kwusp-section--media-left .kwusp-section__copy {
		order: 1;
	}
	.kwusp-section--media-left .kwusp-section__hero {
		order: 2;
	}
}

.kwusp-section__hero-video {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--kwusp-section-radius);
	background: #000;
	display: block;
	object-fit: cover;
}

.kwusp-section__hero-video::-webkit-media-controls-panel {
	background: rgba(0, 0, 0, 0.78);
}

.kwusp-section__tiles {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.kwusp-section__tile {
	aspect-ratio: 16 / 9;
}

.kwusp-section__tile-icon,
.kwusp-section__tile-title {
	display: none;
}

.kwusp-section__cta {
	border-radius: 0.35rem;
	background: #6f6f6f;
	color: #fff;
}

/* KAWAI USP staging/reference skin. Kept in kwusp scope so it does not affect unrelated pages. */
.kwusp-page {
	background: #050505;
	color: #f4f0ea;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.kwusp-page .kwusp-hero {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(5rem, 12vw, 9rem) 1.5rem;
	background:
		radial-gradient(circle at 50% 44%, rgba(155, 0, 0, 0.55), rgba(5, 5, 5, 0) 34rem),
		linear-gradient(180deg, #070707 0%, #110202 48%, #050505 100%);
	text-transform: uppercase;
}

.kwusp-page .kwusp-hero h1 {
	font-size: clamp(2.5rem, 8vw, 7.5rem);
	line-height: 0.95;
	letter-spacing: 0.08em;
	font-weight: 800;
	color: #fff;
}

.kwusp-page .kwusp-hero p {
	max-width: 42rem;
	margin-inline: auto;
	color: rgba(255, 255, 255, 0.76);
	font-size: clamp(1rem, 1.4vw, 1.35rem);
	text-transform: none;
}

.kwusp-page .tsnav {
	--tsnav-bg: transparent;
	--tsnav-color: rgba(255, 255, 255, 0.45);
	--tsnav-active-color: #fff;
	--tsnav-active-indicator-color: #c8102e;
}

.kwusp-page .tsnav--topbar {
	position: fixed;
	top: 50%;
	right: clamp(0.75rem, 2vw, 2rem);
	left: auto;
	z-index: 40;
	width: auto;
	padding: 0;
	transform: translateY(-50%);
}

.kwusp-page .tsnav--topbar .tsnav__list {
	flex-direction: column;
	align-items: flex-end;
	gap: 0.85rem;
}

.kwusp-page .tsnav--topbar .tsnav__item {
	padding: 0;
	border: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	font-variant-numeric: tabular-nums;
}

.kwusp-page .tsnav--topbar .tsnav__label {
	font-size: 0;
}

.kwusp-page .tsnav--topbar .tsnav__item::before {
	content: attr(data-target);
	display: none;
}

.kwusp-page .tsnav--topbar .tsnav__label {
	visibility: hidden;
	position: relative;
}

.kwusp-page .tsnav--topbar .tsnav__label::after {
	content: counter(item, decimal-leading-zero);
	counter-increment: item;
	visibility: visible;
	font-size: 0.78rem;
}

.kwusp-page .tsnav--topbar .tsnav__list {
	counter-reset: item;
}

.kwusp-page .kwusp-section {
	--kwusp-section-bg: #050505;
	--kwusp-section-fg: #f4f0ea;
	--kwusp-section-muted: rgba(244, 240, 234, 0.72);
	--kwusp-section-accent: #c8102e;
	--kwusp-section-radius: 0;
	--kwusp-section-gap: clamp(2rem, 5vw, 5rem);
	--kwusp-section-pad-block: clamp(5rem, 10vw, 9rem);
	--kwusp-section-title-size: clamp(2rem, 4.5vw, 5.25rem);
	--kwusp-section-subtitle-size: clamp(1.1rem, 1.7vw, 1.55rem);
	background: #050505;
}

.kwusp-page .kwusp-section__inner {
	max-width: 1280px;
}

.kwusp-page .kwusp-section__title {
	text-transform: uppercase;
	letter-spacing: 0.025em;
	font-weight: 800;
}

.kwusp-page .kwusp-section__body {
	color: rgba(244, 240, 234, 0.78);
}

/* Reference pass 2: match the live USP section proportions more closely. */
@media (min-width: 900px) {
	.kwusp-page .kwusp-section {
		min-height: 100vh;
		display: flex;
		align-items: center;
		padding: clamp(4rem, 7vw, 6rem) clamp(3rem, 5vw, 5rem);
	}

	.kwusp-page .kwusp-section__inner {
		grid-template-columns: minmax(0, 1.42fr) minmax(360px, 0.86fr);
		align-items: center;
		gap: clamp(2rem, 3vw, 3.5rem);
	}

	.kwusp-page .kwusp-section__copy {
		gap: 0.7rem;
	}

	.kwusp-page .kwusp-section__hero {
		align-self: center;
	}

	.kwusp-page .kwusp-section__hero-video,
	.kwusp-page .kwusp-section__hero-image {
		width: 100%;
		min-height: clamp(520px, 58vw, 720px);
		aspect-ratio: 0.94 / 1;
		border-radius: 1.35rem;
		object-fit: cover;
	}
}

.kwusp-page .kwusp-section__number {
	font-size: clamp(1.8rem, 2.35vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: #fff;
}

.kwusp-page .kwusp-section__title {
	font-size: clamp(1.8rem, 2.35vw, 2.35rem);
	line-height: 1.03;
	letter-spacing: -0.035em;
	text-transform: none;
	color: #fff;
}

.kwusp-page .kwusp-section__subtitle {
	font-size: clamp(1rem, 1.15vw, 1.18rem);
	font-weight: 600;
	color: rgba(255, 255, 255, 0.8);
}

.kwusp-page .kwusp-section__body {
	font-size: 0.98rem;
	line-height: 1.62;
	max-width: 38rem;
}

.kwusp-page .kwusp-section__cta {
	margin-top: 1rem;
	padding: 0.85rem 1.2rem;
	font-size: 0.95rem;
	font-weight: 800;
	background: #606060;
	border-radius: 0.4rem;
}

.kwusp-page .kwusp-section__tiles {
	margin-top: 1.15rem;
	gap: 0.95rem;
}

.kwusp-page .kwusp-section__tile {
	border-radius: 0.7rem;
	aspect-ratio: 1.32 / 1;
	background: #111;
}

.kwusp-page .tsnav--topbar {
	background: #fff;
	border-radius: 0.55rem;
	padding: 0.75rem 0.65rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.kwusp-page .tsnav--topbar .tsnav__item {
	color: #111;
	padding: 0.35rem 0.55rem;
	border-radius: 0.3rem;
}

.kwusp-page .tsnav--topbar .tsnav__item--active,
.kwusp-page .tsnav--topbar .tsnav__item:hover,
.kwusp-page .tsnav--topbar .tsnav__item:focus-visible {
	background: #ff001d;
	color: #fff;
}

/* Reference pass 3: navigator sizing, section media ratio, animated hero glow. */
.kwusp-page .kwusp-hero {
	background:
		radial-gradient(circle at var(--kwusp-hero-x, 50%) var(--kwusp-hero-y, 42%), rgba(174, 0, 0, 0.72), rgba(95, 0, 0, 0.34) 22rem, rgba(5, 5, 5, 0) 42rem),
		linear-gradient(180deg, #080303 0%, #140202 48%, #050505 100%);
	animation: kwusp-hero-glow 11s ease-in-out infinite alternate;
}

@keyframes kwusp-hero-glow {
	0% {
		--kwusp-hero-x: 44%;
		--kwusp-hero-y: 38%;
		filter: saturate(0.95) brightness(0.92);
	}
	45% {
		--kwusp-hero-x: 55%;
		--kwusp-hero-y: 44%;
		filter: saturate(1.12) brightness(1.04);
	}
	100% {
		--kwusp-hero-x: 50%;
		--kwusp-hero-y: 34%;
		filter: saturate(1.02) brightness(0.98);
	}
}

@media (min-width: 900px) {
	.kwusp-page .kwusp-section__inner {
		grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
	}

	.kwusp-page .kwusp-section__hero-video,
	.kwusp-page .kwusp-section__hero-image {
		min-height: auto;
		aspect-ratio: 16 / 9;
		max-height: min(62vh, 620px);
		object-fit: cover;
	}
}

.kwusp-page .kwusp-section__hero {
	overflow: hidden;
	border-radius: 1.1rem;
}

.kwusp-page .kwusp-section__subtitle,
.kwusp-page .kwusp-section__body,
.kwusp-page .kwusp-section__title {
	overflow-wrap: normal;
	word-break: normal;
}

.kwusp-page .tsnav--topbar {
	right: clamp(1rem, 1.45vw, 1.6rem);
	padding: 0.45rem 0.42rem;
	border-radius: 0.42rem;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10px);
	transition: transform 240ms ease, background 240ms ease, box-shadow 240ms ease;
}

.kwusp-page .tsnav--topbar .tsnav__list {
	gap: 0.46rem;
}

.kwusp-page .tsnav--topbar .tsnav__item {
	min-width: 3.95rem;
	justify-content: center;
	padding: 0.44rem 0.5rem;
	font-size: 0.76rem;
}

.kwusp-page .tsnav--topbar .tsnav__item--active {
	box-shadow: 0 0.45rem 1.2rem rgba(255, 0, 29, 0.22);
}

@media (prefers-reduced-motion: reduce) {
	.kwusp-page .kwusp-hero {
		animation: none;
	}
}

/* Reference pass 4: real intro video, mobile hero height, navigator visibility window. */
.kwusp-page .kwusp-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	min-height: 56vh;
}

.kwusp-page .kwusp-hero__video {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.42;
	filter: brightness(0.48) saturate(1.12);
}

.kwusp-page .kwusp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 50% 40%, rgba(170, 0, 0, 0.55), transparent 34rem),
		linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.7));
	pointer-events: none;
}

.kwusp-page .kwusp-hero__arrow {
	display: block;
	font-size: clamp(2.6rem, 5vw, 4.2rem);
	line-height: 1;
	margin-top: 0.8rem;
	font-weight: 700;
	color: #fff;
}

.kwusp-page .tsnav--topbar {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) translateX(0.75rem);
}

.kwusp-page .tsnav--topbar.tsnav--is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-50%) translateX(0);
}

@media (max-width: 767px) {
	.kwusp-page .kwusp-hero {
		min-height: 50vh;
		padding: 5.5rem 1.25rem 3.25rem;
	}

	.kwusp-page .kwusp-hero h1 {
		font-size: clamp(3rem, 15vw, 4.6rem);
		line-height: 0.93;
	}

	.kwusp-page .kwusp-hero p {
		font-size: clamp(1.45rem, 6vw, 2rem);
		line-height: 1.42;
	}

	.kwusp-page .tsnav {
		display: none !important;
	}
}

/* Reference pass 5: align USP section layout with live page and tighten navigator. */
.kwusp-page .wp-block-video,
.kwusp-page .wp-block-video video,
.kwusp-page #intro video {
	border-radius: 1rem;
	overflow: hidden;
}

@media (min-width: 900px) {
	.kwusp-page .kwusp-section {
		min-height: 100vh;
		padding: clamp(3rem, 5vw, 5.25rem) clamp(1.8rem, 3.4vw, 3.5rem);
		align-items: center;
	}

	.kwusp-page .kwusp-section__inner {
		max-width: 1420px;
		grid-template-columns: minmax(520px, 1.52fr) minmax(430px, 0.98fr);
		gap: clamp(1.25rem, 2vw, 2rem);
		align-items: center;
	}

	.kwusp-page .kwusp-section--default .kwusp-section__copy,
	.kwusp-page .kwusp-section--media-left .kwusp-section__copy {
		grid-column: 2;
		grid-row: 1;
	}

	.kwusp-page .kwusp-section--default .kwusp-section__hero,
	.kwusp-page .kwusp-section--media-left .kwusp-section__hero {
		grid-column: 1;
		grid-row: 1;
	}

	.kwusp-page .kwusp-section__hero-video,
	.kwusp-page .kwusp-section__hero-image {
		width: 100%;
		aspect-ratio: 16 / 9;
		max-height: none;
		min-height: 0;
		border-radius: 1rem;
		object-fit: cover;
	}

	.kwusp-page .kwusp-section__copy {
		display: block;
		align-self: center;
	}

	.kwusp-page .kwusp-section__number {
		display: inline;
		margin-right: 0.35rem;
		font-size: clamp(1.3rem, 1.8vw, 1.8rem);
		line-height: 1.05;
	}

	.kwusp-page .kwusp-section__title {
		display: inline;
		font-size: clamp(1.3rem, 1.8vw, 1.8rem);
		line-height: 1.05;
	}

	.kwusp-page .kwusp-section__subtitle {
		margin-top: 0.18rem;
		font-size: 0.95rem;
	}

	.kwusp-page .kwusp-section__body {
		margin-top: 1rem;
		max-width: 100%;
		font-size: clamp(0.72rem, 0.72vw, 0.86rem);
		line-height: 1.58;
	}

	.kwusp-page .kwusp-section__cta {
		margin-top: 1rem;
		padding: 0.65rem 0.9rem;
		font-size: 0.74rem;
	}

	.kwusp-page .kwusp-section__tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.72rem;
		margin-top: 0.9rem;
	}

	.kwusp-page .kwusp-section__tile {
		aspect-ratio: 1.58 / 1;
		border-radius: 0.62rem;
	}
}

.kwusp-page .tsnav--topbar {
	right: clamp(0.75rem, 1.1vw, 1.15rem);
	padding: 0.5rem 0.42rem;
	border-radius: 0.46rem;
}

.kwusp-page .tsnav--topbar .tsnav__list {
	gap: 0.28rem;
}

.kwusp-page .tsnav--topbar .tsnav__item {
	min-width: 2.45rem;
	padding: 0.38rem 0.45rem;
	font-size: 0.7rem;
}

.kwusp-page .tsnav--topbar .tsnav__label::after {
	font-size: 0.7rem;
}

/* Reference pass 6: keep navigator as compact number rail, not label-width rail. */
.kwusp-page .tsnav--topbar {
	width: auto;
	max-width: 4.8rem;
}

.kwusp-page .tsnav--topbar .tsnav__item {
	width: 2.35rem;
	min-width: 0;
	max-width: 2.35rem;
}

.kwusp-page .tsnav--topbar .tsnav__label {
	display: block;
	width: 1.35rem;
	height: 1em;
	overflow: visible;
	white-space: nowrap;
}

.kwusp-page .tsnav--topbar .tsnav__label::after {
	display: block;
	width: 1.35rem;
	text-align: center;
}

/* Reference pass 7: CTA icon + hover parity. */
.kwusp-page .kwusp-section__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	background: #5f5f5f;
	color: #fff;
	text-decoration: none;
}

/* #86 round 3: external-link icon as a currentColor mask (no uploads
   dependency — the former Customizer rule pointed at a 404 SVG). The icon
   inherits the CTA text color, so the hover state recolors it for free. */
.kwusp-page .kwusp-section__cta::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") no-repeat center / contain;
}

.kwusp-page .kwusp-section__cta:hover,
.kwusp-page .kwusp-section__cta:focus-visible {
	background: #f2f2f2;
	color: #050505;
	opacity: 1;
	transform: none;
}

/* Reference pass 8: section media should match right-column height; repair compact navigator. */
@media (min-width: 900px) {
	.kwusp-page .kwusp-section__inner {
		grid-template-columns: minmax(660px, 1.5fr) minmax(420px, 0.95fr);
		align-items: stretch;
	}

	.kwusp-page .kwusp-section__hero {
		height: 100%;
		align-self: stretch;
		min-height: clamp(520px, 52vw, 680px);
		display: flex;
		align-items: stretch;
	}

	.kwusp-page .kwusp-section__hero-video,
	.kwusp-page .kwusp-section__hero-image {
		height: 100%;
		min-height: inherit;
		aspect-ratio: auto;
		object-fit: cover;
	}

	.kwusp-page .kwusp-section__copy {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.kwusp-page .kwusp-section__tiles {
		grid-auto-rows: minmax(0, 1fr);
		flex: 0 0 auto;
	}

	.kwusp-page .kwusp-section__tile {
		aspect-ratio: 1.48 / 1;
	}
}

.kwusp-page .tsnav--topbar {
	width: 3.85rem;
	max-width: 3.85rem;
	padding: 0.78rem 0.42rem;
	border-radius: 0.48rem;
	overflow: hidden;
}

.kwusp-page .tsnav--topbar .tsnav__list {
	align-items: center;
	gap: 0.52rem;
}

.kwusp-page .tsnav--topbar .tsnav__item {
	width: 2.6rem;
	max-width: 2.6rem;
	min-width: 2.6rem;
	height: 1.2rem;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
}

.kwusp-page .tsnav--topbar .tsnav__label {
	display: block;
	width: 2.6rem;
	height: 1.2rem;
	line-height: 1.2rem;
	overflow: hidden;
	text-align: center;
}

.kwusp-page .tsnav--topbar .tsnav__label::after {
	display: block;
	width: 2.6rem;
	font-size: 0.72rem;
	line-height: 1.2rem;
	text-align: center;
}

.kwusp-page .tsnav--topbar .tsnav__item--active {
	box-shadow: 0 0.45rem 1.2rem rgba(255, 0, 29, 0.36);
}

/* Reference pass 9: remove browser/theme list indentation from tile galleries. */
.kwusp-page .kwusp-section__tiles {
	padding-left: 0;
	padding-inline-start: 0;
}

/* Reference pass 10: wide USP canvas, non-cropped subtitles, repaired compact nav labels. */
.kwusp-page .kwusp-section {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

@media (min-width: 900px) {
	.kwusp-page .kwusp-section {
		padding-inline: clamp(1rem, 1.9vw, 2rem);
	}

	.kwusp-page .kwusp-section__inner {
		max-width: min(1880px, calc(100vw - 4rem));
		grid-template-columns: minmax(760px, 1.62fr) minmax(430px, 0.88fr);
		gap: clamp(1rem, 1.5vw, 1.5rem);
	}

	.kwusp-page .kwusp-section__hero-video {
		object-fit: contain;
		background: #000;
	}
}

.kwusp-page .tsnav--topbar {
	width: 3.8rem;
	max-width: 3.8rem;
	padding: 0.72rem 0.35rem;
}

.kwusp-page .tsnav--topbar .tsnav__label {
	visibility: visible;
	font-size: 0;
	color: transparent;
	width: 2.55rem;
}

.kwusp-page .tsnav--topbar .tsnav__label::after {
	content: attr(data-short-label);
	visibility: visible;
	color: currentColor;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.kwusp-page .tsnav--topbar .tsnav__label::after {
	color: #111;
}

.kwusp-page .tsnav--topbar .tsnav__item--active .tsnav__label::after,
.kwusp-page .tsnav--topbar .tsnav__item:hover .tsnav__label::after,
.kwusp-page .tsnav--topbar .tsnav__item:focus-visible .tsnav__label::after {
	color: #fff;
}

/* Reference pass 11: tighten right-copy rhythm and make compact nav numbers visible. */
@media (min-width: 900px) {
	.kwusp-page .kwusp-section__copy {
		display: block;
	}

	.kwusp-page .kwusp-section__number {
		display: inline-block;
		vertical-align: baseline;
		margin: 0 0.42rem 0 0;
	}

	.kwusp-page .kwusp-section__title {
		display: inline;
		vertical-align: baseline;
		margin: 0;
	}

	.kwusp-page .kwusp-section__subtitle {
		margin: 0.38rem 0 0;
		line-height: 1.35;
	}

	.kwusp-page .kwusp-section__body {
		margin-top: 1.05rem;
		line-height: 1.55;
	}

	.kwusp-page .kwusp-section__body p {
		margin-top: 0;
	}
}

.kwusp-page .tsnav--topbar {
	width: 2.9rem;
	max-width: 2.9rem;
	padding: 0.68rem 0.28rem;
}

.kwusp-page .tsnav--topbar .tsnav__item {
	width: 2.1rem;
	min-width: 2.1rem;
	max-width: 2.1rem;
}

.kwusp-page .tsnav--topbar .tsnav__label,
.kwusp-page .tsnav--topbar .tsnav__label::after {
	width: 2.1rem;
}

/* Reference pass 12: render navigator numbers from real text; dock to scrollbar edge. */
.kwusp-page .tsnav--topbar {
	right: 0;
	width: 3.05rem;
	max-width: 3.05rem;
	border-radius: 0.46rem 0 0 0.46rem;
	padding: 0.72rem 0.32rem;
	overflow: hidden;
}

.kwusp-page .tsnav--topbar .tsnav__item {
	width: 2.25rem;
	min-width: 2.25rem;
	max-width: 2.25rem;
	height: 1.24rem;
	padding: 0;
	border-radius: 999px;
}

.kwusp-page .tsnav--topbar .tsnav__label {
	visibility: visible;
	display: block;
	width: 2ch;
	height: 1.24rem;
	line-height: 1.24rem;
	overflow: hidden;
	white-space: nowrap;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #111;
	text-align: left;
}

.kwusp-page .tsnav--topbar .tsnav__label::after {
	content: none !important;
}

.kwusp-page .tsnav--topbar .tsnav__item--active .tsnav__label,
.kwusp-page .tsnav--topbar .tsnav__item:hover .tsnav__label,
.kwusp-page .tsnav--topbar .tsnav__item:focus-visible .tsnav__label {
	color: #fff;
}

/* Reference pass 13: active number stays black; red marker sits to its right. */
.kwusp-page .tsnav--topbar .tsnav__item,
.kwusp-page .tsnav--topbar .tsnav__item:hover,
.kwusp-page .tsnav--topbar .tsnav__item:focus-visible,
.kwusp-page .tsnav--topbar .tsnav__item--active {
	position: relative;
	background: transparent;
	box-shadow: none;
	color: #111;
}

.kwusp-page .tsnav--topbar .tsnav__item::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -1.05rem;
	width: 1.65rem;
	height: 1.15rem;
	border-radius: 999px 0 0 999px;
	background: #ff001d;
	transform: translateY(-50%) scaleX(0);
	transform-origin: right center;
	transition: transform 180ms ease;
}

.kwusp-page .tsnav--topbar .tsnav__item--active::after {
	transform: translateY(-50%) scaleX(1);
}

.kwusp-page .tsnav--topbar .tsnav__item--active .tsnav__label,
.kwusp-page .tsnav--topbar .tsnav__item:hover .tsnav__label,
.kwusp-page .tsnav--topbar .tsnav__item:focus-visible .tsnav__label {
	color: #111;
	font-weight: 800;
}

/* Reference pass 14: make active marker deterministic (no scale transform clipping). */
.kwusp-page .tsnav--topbar .tsnav__item::after {
	right: -0.95rem;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 160ms ease;
}

.kwusp-page .tsnav--topbar .tsnav__item--active::after {
	transform: translateY(-50%);
	opacity: 1;
}

/* Reference pass 16: keep the active marker visible as a pill inside the rail. */
.kwusp-page .tsnav--topbar .tsnav__item {
	width: 2.65rem;
	min-width: 2.65rem;
	max-width: 2.65rem;
}

.kwusp-page .tsnav--topbar .tsnav__item::after {
	right: -0.18rem;
	width: 1.28rem;
	height: 1.08rem;
	border-radius: 999px 0 0 999px;
}

.kwusp-page .tsnav--topbar .tsnav__label {
	position: relative;
	z-index: 1;
}

.kwusp-page .tsnav--topbar .tsnav__item--active::after {
	opacity: 1;
}

/* Reference pass 17: reset compact navigator geometry; captions closer to live. */
.kwusp-page .tsnav--topbar {
	right: 0 !important;
	width: 3.6rem !important;
	max-width: 3.6rem !important;
	padding: 0.74rem 0.36rem !important;
	border-radius: 0.5rem 0 0 0.5rem !important;
	overflow: hidden !important;
}

.kwusp-page .tsnav--topbar .tsnav__item {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	width: 2.88rem !important;
	min-width: 2.88rem !important;
	max-width: 2.88rem !important;
	height: 1.24rem !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: #111 !important;
}

.kwusp-page .tsnav--topbar .tsnav__label {
	position: relative !important;
	z-index: 2 !important;
	display: block !important;
	width: 2ch !important;
	height: 1.24rem !important;
	line-height: 1.24rem !important;
	overflow: hidden !important;
	white-space: nowrap !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.035em !important;
	color: #111 !important;
	text-align: left !important;
}

.kwusp-page .tsnav--topbar .tsnav__item::after {
	content: "" !important;
	position: absolute !important;
	z-index: 1 !important;
	top: 50% !important;
	right: -0.02rem !important;
	width: 1.28rem !important;
	height: 1.08rem !important;
	border-radius: 999px 0 0 999px !important;
	background: #ff001d !important;
	opacity: 0 !important;
	transform: translateY(-50%) !important;
}

.kwusp-page .tsnav--topbar .tsnav__item--active::after {
	opacity: 1 !important;
}

.kwusp-page .tsnav--topbar .tsnav__item--active .tsnav__label,
.kwusp-page .tsnav--topbar .tsnav__item:hover .tsnav__label,
.kwusp-page .tsnav--topbar .tsnav__item:focus-visible .tsnav__label {
	color: #111 !important;
	font-weight: 800 !important;
}

.kwusp-lightbox__caption {
	max-width: min(66rem, 88vw);
	margin-top: 1.25rem;
	font-size: 18px;
	line-height: 26px;
	text-align: center;
}

/* Reference pass 18: override base nav transform and active-marker specificity. */
.kwusp-page .tsnav--topbar {
	transform: translateY(-50%) !important;
}

.kwusp-page .tsnav--topbar .tsnav__item.tsnav__item--active::after {
	opacity: 1 !important;
}

/* Reference pass 19: draw active marker as deterministic background slice. */
.kwusp-page .tsnav--topbar .tsnav__item.tsnav__item--active {
	background: linear-gradient(to right, transparent 0, transparent 54%, #ff001d 54%, #ff001d 100%) !important;
	border-radius: 999px 0 0 999px !important;
}

.kwusp-page .tsnav--topbar .tsnav__item.tsnav__item--active::after {
	content: none !important;
}

/* Reference pass 20: render only two-digit navigator labels, never truncated long text. */
.kwusp-page .tsnav--topbar .tsnav__label {
	font-size: 0 !important;
	letter-spacing: 0 !important;
	color: transparent !important;
	width: 2.2rem !important;
	min-width: 2.2rem !important;
	max-width: 2.2rem !important;
	overflow: visible !important;
}

.kwusp-page .tsnav--topbar .tsnav__label::before {
	content: attr(data-short-label) !important;
	display: block !important;
	font-family: Roboto, Arial, sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	color: #111 !important;
	text-align: left !important;
}

.kwusp-page .tsnav--topbar .tsnav__item--active .tsnav__label::before,
.kwusp-page .tsnav--topbar .tsnav__item:hover .tsnav__label::before,
.kwusp-page .tsnav--topbar .tsnav__item:focus-visible .tsnav__label::before {
	font-weight: 700 !important;
	color: #111 !important;
}

.kwusp-page .tsnav--topbar .tsnav__item.tsnav__item--active {
	background: linear-gradient(to right, transparent 0, transparent 58%, #ff001d 58%, #ff001d 100%) !important;
}

/* Reference pass 21: narrow rail again and force visible right-side active marker. */
.kwusp-page .tsnav--topbar {
	width: 2.55rem !important;
	max-width: 2.55rem !important;
	padding: 0.72rem 0.24rem !important;
}

.kwusp-page .tsnav--topbar .tsnav__item {
	width: 2.07rem !important;
	min-width: 2.07rem !important;
	max-width: 2.07rem !important;
	background: transparent !important;
}

.kwusp-page .tsnav--topbar .tsnav__label {
	width: 1.25rem !important;
	min-width: 1.25rem !important;
	max-width: 1.25rem !important;
	margin-left: 0.08rem !important;
}

.kwusp-page .tsnav--topbar .tsnav__item.tsnav__item--active {
	background: linear-gradient(to right, transparent 0, transparent 1.32rem, #ff001d 1.32rem, #ff001d 100%) !important;
	border-radius: 999px 0 0 999px !important;
}

/* Reference pass 22: render active marker as its own visible in-rail element. */
.kwusp-page .tsnav--topbar .tsnav__item {
	overflow: visible !important;
}

.kwusp-page .tsnav--topbar .tsnav__item::before {
	content: none !important;
}

.kwusp-page .tsnav--topbar .tsnav__item.tsnav__item--active::before {
	content: "" !important;
	position: absolute !important;
	z-index: 1 !important;
	top: 50% !important;
	right: 0 !important;
	width: 1.08rem !important;
	height: 1.08rem !important;
	border-radius: 999px 0 0 999px !important;
	background: #ff001d !important;
	transform: translateY(-50%) !important;
	opacity: 1 !important;
	display: block !important;
}

.kwusp-page .tsnav--topbar .tsnav__item.tsnav__item--active {
	background: transparent !important;
}

.kwusp-page .tsnav--topbar .tsnav__label {
	position: relative !important;
	z-index: 2 !important;
}

/* Reference pass 23: left-anchored active marker beside the number. */
.kwusp-page .tsnav--topbar {
	width: 2.8rem !important;
	max-width: 2.8rem !important;
	padding: 0.72rem 0.22rem !important;
}

.kwusp-page .tsnav--topbar .tsnav__item {
	width: 2.36rem !important;
	min-width: 2.36rem !important;
	max-width: 2.36rem !important;
	height: 1.28rem !important;
	position: relative !important;
	background: transparent !important;
	border-radius: 0 !important;
	overflow: hidden !important;
}

.kwusp-page .tsnav--topbar .tsnav__label {
	width: 1.08rem !important;
	min-width: 1.08rem !important;
	max-width: 1.08rem !important;
	margin-left: 0.04rem !important;
	z-index: 3 !important;
}

.kwusp-page .tsnav--topbar .tsnav__item.tsnav__item--active::before {
	content: "" !important;
	position: absolute !important;
	z-index: 1 !important;
	top: 50% !important;
	left: 1.22rem !important;
	right: auto !important;
	width: 1.05rem !important;
	height: 1.08rem !important;
	border-radius: 999px 0 0 999px !important;
	background: #ff001d !important;
	transform: translateY(-50%) !important;
	opacity: 1 !important;
	display: block !important;
}

/* Reference pass 24: undo inherited topbar row alignment; keep items inside rail. */
.kwusp-page .tsnav--topbar .tsnav__list {
	align-items: flex-start !important;
	justify-content: flex-start !important;
	width: 2.36rem !important;
	min-width: 2.36rem !important;
	max-width: 2.36rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

.kwusp-page .tsnav--topbar .tsnav__item-wrap {
	width: 2.36rem !important;
	min-width: 2.36rem !important;
	max-width: 2.36rem !important;
	margin: 0 !important;
	padding: 0 !important;
}

.kwusp-page .tsnav--topbar .tsnav__item {
	left: 0 !important;
	right: auto !important;
	margin: 0 !important;
	transform: none !important;
}

/* Reference pass 25: custom bottom-centered USP video playback bar. */
.kwusp-page .kwusp-section__hero {
	position: relative;
}

.kwusp-page .kwusp-video-controls {
	position: absolute;
	left: 50%;
	bottom: clamp(0.75rem, 1.5vw, 1.35rem);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 0.62rem;
	width: min(33rem, calc(100% - 2rem));
	padding: 0.5rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(8, 8, 8, 0.62);
	box-shadow: 0 0.65rem 2rem rgba(0, 0, 0, 0.38);
	backdrop-filter: blur(12px);
	transform: translateX(-50%);
	color: #fff;
}

.kwusp-page .kwusp-video-controls__button {
	appearance: none;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	width: 2rem;
	height: 2rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.82rem;
	line-height: 1;
	cursor: pointer;
}

.kwusp-page .kwusp-video-controls__button:hover,
.kwusp-page .kwusp-video-controls__button:focus-visible {
	background: rgba(255, 255, 255, 0.24);
	outline: 2px solid rgba(255, 255, 255, 0.55);
	outline-offset: 2px;
}

.kwusp-page .kwusp-video-controls__progress {
	flex: 1 1 auto;
	min-width: 5rem;
	accent-color: #ff001d;
}

.kwusp-page .kwusp-video-controls__time {
	font-size: 0.72rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: rgba(255, 255, 255, 0.84);
}

@media (max-width: 699px) {
	.kwusp-page .kwusp-video-controls {
		width: min(24rem, calc(100% - 1rem));
		gap: 0.45rem;
		padding: 0.42rem 0.55rem;
	}

	.kwusp-page .kwusp-video-controls__time {
		display: none;
	}
}

/* Reference pass 26: place playback bar below the video like the live page. */
.kwusp-page .kwusp-section__hero {
	padding-bottom: 3.35rem;
}

.kwusp-page .kwusp-video-controls {
	bottom: 0.35rem !important;
	width: min(18rem, calc(100% - 2rem));
	min-height: 2.05rem;
	padding: 0.32rem 0.45rem;
	gap: 0.42rem;
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 999px;
	background: rgba(8, 8, 8, 0.86);
	box-shadow: 0 0.35rem 1.1rem rgba(0, 0, 0, 0.42);
}

.kwusp-page .kwusp-video-controls__button {
	width: 1.45rem;
	height: 1.45rem;
	font-size: 0.62rem;
	background: rgba(255, 255, 255, 0.08);
}

.kwusp-page .kwusp-video-controls__progress {
	min-width: 4.5rem;
	height: 0.32rem;
}

.kwusp-page .kwusp-video-controls__time {
	font-size: 0.56rem;
	color: rgba(255, 255, 255, 0.9);
}

@media (min-width: 900px) {
	.kwusp-page .kwusp-section__hero-video,
	.kwusp-page .kwusp-section__hero-image {
		height: calc(100% - 3.35rem);
	}
}

/* Reference pass 27: center video controls against the full section block. */
.kwusp-page .kwusp-section__inner {
	position: relative;
	padding-bottom: 3.35rem;
}

.kwusp-page .kwusp-section__hero {
	padding-bottom: 0;
}

.kwusp-page .kwusp-video-controls {
	left: 50% !important;
	bottom: 0.35rem !important;
	transform: translateX(-50%) !important;
}

@media (min-width: 900px) {
	.kwusp-page .kwusp-section__hero-video,
	.kwusp-page .kwusp-section__hero-image {
		height: 100%;
	}
}

/* Reference pass 28: live-like compact black playback pill. */
.kwusp-page .kwusp-video-controls {
	width: min(27.5rem, calc(100% - 2rem));
	min-height: 2.85rem;
	padding: 0.5rem 1rem;
	gap: 0.62rem;
	border: 1.5px solid rgba(255, 255, 255, 0.78);
	background: rgba(0, 0, 0, 0.92);
	box-shadow: none;
	backdrop-filter: none;
}

.kwusp-page .kwusp-video-controls__button {
	width: 1.45rem;
	height: 1.45rem;
	background: transparent;
	font-size: 0.82rem;
	font-weight: 700;
	color: #fff;
}

.kwusp-page .kwusp-video-controls__button:hover,
.kwusp-page .kwusp-video-controls__button:focus-visible {
	background: transparent;
	outline: 1px solid rgba(255, 255, 255, 0.55);
}

.kwusp-page .kwusp-video-controls__progress,
.kwusp-page .kwusp-video-controls__volume {
	appearance: none;
	height: 0.42rem;
	border-radius: 999px;
	background: linear-gradient(to right, #ff001d 0, #ff001d var(--kwusp-range-value, 0%), #fff var(--kwusp-range-value, 0%), #fff 100%);
	accent-color: #ff001d;
	cursor: pointer;
}

.kwusp-page .kwusp-video-controls__progress {
	flex: 1 1 auto;
	min-width: 9rem;
}

.kwusp-page .kwusp-video-controls__volume {
	flex: 0 0 4.2rem;
	min-width: 4.2rem;
}

.kwusp-page .kwusp-video-controls__progress::-webkit-slider-thumb,
.kwusp-page .kwusp-video-controls__volume::-webkit-slider-thumb {
	appearance: none;
	width: 1rem;
	height: 1rem;
	border: 0;
	border-radius: 999px;
	background: #ff001d;
	box-shadow: 0 0 0 1px #ff001d;
}

.kwusp-page .kwusp-video-controls__progress::-moz-range-thumb,
.kwusp-page .kwusp-video-controls__volume::-moz-range-thumb {
	width: 1rem;
	height: 1rem;
	border: 0;
	border-radius: 999px;
	background: #ff001d;
}

.kwusp-page .kwusp-video-controls__time {
	font-size: 0.62rem;
	font-weight: 600;
	color: #fff;
}

@media (max-width: 699px) {
	.kwusp-page .kwusp-video-controls {
		width: min(22rem, calc(100% - 1rem));
	}

	.kwusp-page .kwusp-video-controls__volume {
		flex-basis: 3.2rem;
		min-width: 3.2rem;
	}
}

/* Reference pass 29: speaker icon, thinner tracks, larger gap above controls. */
.kwusp-page .kwusp-section__inner {
	padding-bottom: 4.35rem;
}

.kwusp-page .kwusp-video-controls {
	bottom: 0.55rem !important;
	min-height: 2.65rem;
	padding-block: 0.42rem;
}

.kwusp-page .kwusp-video-controls__button svg {
	width: 1rem;
	height: 1rem;
	display: block;
}

.kwusp-page .kwusp-video-controls__mute svg {
	width: 1.05rem;
	height: 1.05rem;
}

.kwusp-page .kwusp-video-controls__progress,
.kwusp-page .kwusp-video-controls__volume {
	height: 0.22rem;
}

.kwusp-page .kwusp-video-controls__progress::-webkit-slider-thumb,
.kwusp-page .kwusp-video-controls__volume::-webkit-slider-thumb {
	width: 0.88rem;
	height: 0.88rem;
}

.kwusp-page .kwusp-video-controls__progress::-moz-range-thumb,
.kwusp-page .kwusp-video-controls__volume::-moz-range-thumb {
	width: 0.88rem;
	height: 0.88rem;
}

@media (min-width: 900px) {
	.kwusp-page .kwusp-section__hero-video,
	.kwusp-page .kwusp-section__hero-image {
		height: calc(100% - 4.35rem);
	}
}

/* Reference pass 30: stronger icons, narrower pill, progress fill tucked under thumb. */
.kwusp-page .kwusp-video-controls {
	width: min(24.5rem, calc(100% - 2rem));
	gap: 0.55rem;
	padding-inline: 0.9rem;
}

.kwusp-page .kwusp-video-controls__button {
	font-size: 0.96rem;
}

.kwusp-page .kwusp-video-controls__button svg {
	width: 1.18rem;
	height: 1.18rem;
}

.kwusp-page .kwusp-video-controls__mute svg {
	width: 1.2rem;
	height: 1.2rem;
}

.kwusp-page .kwusp-video-controls__progress,
.kwusp-page .kwusp-video-controls__volume {
	background: linear-gradient(to right, #ff001d 0, #ff001d calc(var(--kwusp-range-value, 0%) + 0.42rem), #fff calc(var(--kwusp-range-value, 0%) + 0.42rem), #fff 100%);
}

.kwusp-page .kwusp-video-controls__progress {
	min-width: 8rem;
}

.kwusp-page .kwusp-video-controls__volume {
	flex-basis: 3.7rem;
	min-width: 3.7rem;
}

/* Reference pass 31: reduce empty space and keep muted volume visually usable. */
.kwusp-page .kwusp-video-controls {
	width: min(22.75rem, calc(100% - 2rem));
	gap: 0.48rem;
	padding-inline: 0.82rem;
}

.kwusp-page .kwusp-video-controls__progress {
	min-width: 7.25rem;
}

.kwusp-page .kwusp-video-controls__volume {
	flex-basis: 3.25rem;
	min-width: 3.25rem;
}

/* Reference pass 33: keep controls outside column-height math; thin slider tracks safely. */
.kwusp-page .kwusp-section {
	padding-bottom: clamp(5.25rem, 7vw, 7rem);
}

.kwusp-page .kwusp-section__inner {
	padding-bottom: 0;
}

.kwusp-page .kwusp-video-controls {
	bottom: -3.45rem !important;
}

@media (min-width: 900px) {
	.kwusp-page .kwusp-section__hero-video,
	.kwusp-page .kwusp-section__hero-image {
		height: 100%;
	}
}

.kwusp-page .kwusp-video-controls__progress,
.kwusp-page .kwusp-video-controls__volume {
	-webkit-appearance: none;
	appearance: none;
	height: 1rem;
	background: transparent !important;
}

.kwusp-page .kwusp-video-controls__progress::-webkit-slider-runnable-track,
.kwusp-page .kwusp-video-controls__volume::-webkit-slider-runnable-track {
	height: 0.12rem;
	border-radius: 999px;
	background: linear-gradient(to right, #ff001d 0, #ff001d calc(var(--kwusp-range-value, 0%) + 0.42rem), #fff calc(var(--kwusp-range-value, 0%) + 0.42rem), #fff 100%);
}

.kwusp-page .kwusp-video-controls__progress::-webkit-slider-thumb,
.kwusp-page .kwusp-video-controls__volume::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: calc((0.12rem - 0.88rem) / 2);
}

.kwusp-page .kwusp-video-controls__progress::-moz-range-track,
.kwusp-page .kwusp-video-controls__volume::-moz-range-track {
	height: 0.12rem;
	border-radius: 999px;
	background: linear-gradient(to right, #ff001d 0, #ff001d calc(var(--kwusp-range-value, 0%) + 0.42rem), #fff calc(var(--kwusp-range-value, 0%) + 0.42rem), #fff 100%);
}

/* Reference pass 34: override theme input borders on custom range controls. */
.kwusp-page .kwusp-video-controls input[type="range"].kwusp-video-controls__progress,
.kwusp-page .kwusp-video-controls input[type="range"].kwusp-video-controls__volume {
	-webkit-appearance: none !important;
	appearance: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: 0;
	padding: 0 !important;
	background: transparent !important;
}

.kwusp-page .kwusp-video-controls input[type="range"].kwusp-video-controls__progress::-webkit-slider-runnable-track,
.kwusp-page .kwusp-video-controls input[type="range"].kwusp-video-controls__volume::-webkit-slider-runnable-track {
	-webkit-appearance: none !important;
	height: 0.12rem !important;
	border: 0 !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	background: linear-gradient(to right, #ff001d 0, #ff001d calc(var(--kwusp-range-value, 0%) + 0.42rem), #fff calc(var(--kwusp-range-value, 0%) + 0.42rem), #fff 100%) !important;
}

.kwusp-page .kwusp-video-controls input[type="range"].kwusp-video-controls__progress::-webkit-slider-thumb,
.kwusp-page .kwusp-video-controls input[type="range"].kwusp-video-controls__volume::-webkit-slider-thumb {
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 0.88rem !important;
	height: 0.88rem !important;
	margin-top: calc((0.12rem - 0.88rem) / 2) !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #ff001d !important;
	box-shadow: none !important;
}

/* Reference pass 35: keep play/pause icon neutral in all button states. */
.kwusp-page .kwusp-video-controls__button,
.kwusp-page .kwusp-video-controls__button:hover,
.kwusp-page .kwusp-video-controls__button:active,
.kwusp-page .kwusp-video-controls__button:focus,
.kwusp-page .kwusp-video-controls__button:focus-visible {
	appearance: none;
	-webkit-appearance: none;
	border: 0 !important;
	background: transparent !important;
	color: #fff !important;
	box-shadow: none !important;
	outline: 0 !important;
}

.kwusp-page .kwusp-video-controls__play svg {
	width: 0.95rem;
	height: 0.95rem;
}

/* Reference pass 36: live-like WebGL shader background for the Kadence hero. */
.kwusp-page .kwusp-hero--shader {
	position: relative;
	overflow: hidden;
	background: #161616 !important;
}

.kwusp-page .kwusp-hero-shader {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

.kwusp-page .kwusp-hero--shader::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: rgba(18, 6, 6, 0.45);
	pointer-events: none;
}

.kwusp-page .kwusp-hero--shader > :not(.kwusp-hero-shader) {
	position: relative;
	z-index: 2;
}

/* Reference pass 37: keep mobile Safari video fallbacks visible before playback. */
.kwusp-page video[poster] {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Reference pass 38: remove the mobile video element frame around black chapter slates. */
@media (max-width: 899px) {
	.kwusp-page .kwusp-section__hero-video {
		border: 0;
		box-shadow: none;
	}
}

/* Reference pass 39: match live mobile order — copy/CTA, then video controls, then tiles. */
@media (max-width: 899px) {
	.kwusp-page .kwusp-section__inner {
		display: flex;
		flex-direction: column;
	}

	.kwusp-page .kwusp-section__copy {
		display: contents;
	}

	.kwusp-page .kwusp-section__number {
		order: 1;
	}

	.kwusp-page .kwusp-section__title {
		order: 2;
	}

	.kwusp-page .kwusp-section__subtitle {
		order: 3;
	}

	.kwusp-page .kwusp-section__body {
		order: 4;
	}

	.kwusp-page .kwusp-section__cta {
		order: 5;
	}

	.kwusp-page .kwusp-section__hero {
		order: 6;
		width: 100%;
	}

	.kwusp-page .kwusp-section__tiles {
		order: 7;
		width: 100%;
	}
}

/* Reference pass 40: keep custom controls attached below the mobile video after copy. */
@media (max-width: 899px) {
	.kwusp-page .kwusp-video-controls {
		order: 7;
		width: 100%;
	}

	.kwusp-page .kwusp-section__tiles {
		order: 8;
	}
}

/* Reference pass 41: mobile USP uses explicit grid areas so controls sit below video and number/title stay on one line. */
@media (max-width: 899px) {
	.kwusp-page .kwusp-section__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 0.45rem;
		row-gap: 0.5rem;
		align-items: baseline;
	}

	.kwusp-page .kwusp-section__number {
		grid-column: 1;
		grid-row: 1;
		align-self: baseline;
		white-space: nowrap;
	}

	.kwusp-page .kwusp-section__title {
		grid-column: 2;
		grid-row: 1;
		align-self: baseline;
		/* #86 round 3: long chapter titles must wrap instead of running out of
		   the viewport; the clamp() font-size from pass 42 stays in charge. */
		white-space: normal;
	}

	.kwusp-page .kwusp-section__subtitle {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 0;
	}

	.kwusp-page .kwusp-section__body {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 0.8rem;
	}

	.kwusp-page .kwusp-section__cta {
		grid-column: 1 / -1;
		grid-row: 4;
		margin-top: 0.8rem;
		/* #86 round 3: the CTA hugs its label instead of stretching across the
		   full grid width like a block button. Original mobile button metrics:
		   Roboto 600 16px, 12px/20px padding, 345x48, single line. */
		width: fit-content;
		justify-self: start;
		padding: 0.75rem 1.25rem;
		gap: 0.5rem;
		font-family: Roboto, Arial, sans-serif !important;
		font-weight: 600 !important;
	}

	.kwusp-page .kwusp-section__hero {
		grid-column: 1 / -1;
		grid-row: 5;
		margin-top: 1.15rem;
	}

	.kwusp-page .kwusp-video-controls {
		grid-column: 1 / -1;
		grid-row: 6;
		margin-top: -0.2rem;
	}

	.kwusp-page .kwusp-section__tiles {
		grid-column: 1 / -1;
		grid-row: 7;
		margin-top: 1.2rem;
	}
}

/* Reference pass 42: keep the mobile number/title row compact without overflowing narrow screens. */
@media (max-width: 899px) {
	.kwusp-page .kwusp-section__number,
	.kwusp-page .kwusp-section__title {
		font-size: clamp(1.45rem, 6vw, 1.95rem);
		line-height: 1.04;
	}

	.kwusp-page .kwusp-section__inner {
		column-gap: 0.36rem;
	}
}

/* Reference pass 43: mobile controls are in-flow below the video, not absolutely over the gallery. */
@media (max-width: 899px) {
	.kwusp-page .kwusp-video-controls {
		position: static !important;
		left: auto !important;
		bottom: auto !important;
		transform: none !important;
		justify-self: center;
	}
}

/* Reference pass 44: Christian review fixes — neutral hero arrow, full-section scroll stops, black video letterboxing. */
.kwusp-page .kwusp-hero .kt-svg-icon-link,
.kwusp-page .kwusp-hero .kt-svg-icon-link:visited,
.kwusp-page .kwusp-hero .kadence-dynamic-icon,
.kwusp-page .kwusp-hero .kadence-dynamic-icon svg {
	color: #fff !important;
	stroke: #fff !important;
	fill: none !important;
	transition: color 180ms ease, stroke 180ms ease;
}

.kwusp-page .kwusp-hero .kt-svg-icon-link:hover,
.kwusp-page .kwusp-hero .kt-svg-icon-link:focus-visible,
.kwusp-page .kwusp-hero .kt-svg-icon-link:hover .kadence-dynamic-icon,
.kwusp-page .kwusp-hero .kt-svg-icon-link:focus-visible .kadence-dynamic-icon,
.kwusp-page .kwusp-hero .kt-svg-icon-link:hover svg,
.kwusp-page .kwusp-hero .kt-svg-icon-link:focus-visible svg {
	color: #ff001d !important;
	stroke: #ff001d !important;
}

.kwusp-page .kwusp-section__hero {
	background: #000;
}

.kwusp-page .kwusp-section__hero-video {
	background-color: #000 !important;
	background-image: none !important;
	object-fit: contain;
}

@media (min-width: 900px) {
	.kwusp-page .kwusp-section {
		padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
		padding-bottom: clamp(5.25rem, 7vw, 7rem);
	}
}

/* Reference pass 45: desktop fold parity — preserve original title scale, tighten only hero spacing. */
@media (min-width: 900px) {
	.kwusp-page .kwusp-hero {
		min-height: auto;
		padding: clamp(2.25rem, 3vw, 2.7rem) 1.5rem 0;
	}

	.kwusp-page .kwusp-hero h1 {
		font-size: clamp(2.5rem, 8vw, 7.5rem);
		line-height: 0.95;
		margin-bottom: 0.75rem;
	}

	.kwusp-page .kwusp-hero p {
		margin-bottom: 0.75rem;
	}

	.kwusp-page .kwusp-hero .kt-svg-icon-wrap svg,
	.kwusp-page .kwusp-hero .kadence-dynamic-icon svg {
		width: 2.25rem !important;
		height: 2.25rem !important;
	}
}

@keyframes kwusp-scroll-indicator-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(0.75rem);
	}
}

.kw-scroll-indicator-arrow,
.kw-scroll-indicator-arrow .kt-svg-icon-link,
.kw-scroll-indicator-arrow.kt-svg-icon-link,
.kt-svg-item-169_bcfee4-b8 .kt-svg-icon-link {
	animation: kwusp-scroll-indicator-bounce 1.5s ease-in-out infinite;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.kw-scroll-indicator-arrow,
	.kw-scroll-indicator-arrow .kt-svg-icon-link,
	.kw-scroll-indicator-arrow.kt-svg-icon-link,
	.kt-svg-item-169_bcfee4-b8 .kt-svg-icon-link {
		animation: none;
	}
}

/* Reference pass 46: restore red hero shader tone and dock navigator marker flush to viewport scrollbar edge. */
.kwusp-page .tsnav--topbar {
	right: 0 !important;
	padding-right: 0 !important;
	width: 2.58rem !important;
	max-width: 2.58rem !important;
	border-radius: 0.5rem 0 0 0.5rem !important;
}

.kwusp-page .tsnav--topbar .tsnav__list,
.kwusp-page .tsnav--topbar .tsnav__item-wrap,
.kwusp-page .tsnav--topbar .tsnav__item {
	width: 2.36rem !important;
	min-width: 2.36rem !important;
	max-width: 2.36rem !important;
}

.kwusp-page .tsnav--topbar .tsnav__item.tsnav__item--active::before {
	left: auto !important;
	right: 0 !important;
	width: 1.08rem !important;
}

/* Reference pass 47: Christian feedback — remove static center ball and bias shader to diffuse red/orange shimmer. */
.kwusp-page .kwusp-hero--shader,
.kwusp-page .kwusp-hero--shader.kwusp-hero {
	background: #070202 !important;
	animation: none !important;
	filter: none !important;
}

.kwusp-page .kwusp-hero--shader::before {
	background: none !important;
	display: none !important;
}

/* #135 follow-up: the original hero renders the red shader without a neutral
   scrim. The earlier charcoal layer desaturated the red into grey/brown.
   Keep the pseudo-element out of the paint stack so the shader's original
   colour output is visible while the text remains above it at z-index: 2. */
.kwusp-page .kwusp-hero--shader::after {
	background: none !important;
	display: none !important;
}

.kwusp-page .kwusp-hero-shader {
	opacity: 1;
	filter: none;
}

/* Reference pass 48: center desktop scroll stops and keep each section within laptop viewports. */
@media (min-width: 900px) {
	.kwusp-page .kwusp-section {
		min-height: 100svh;
		scroll-margin-top: clamp(96px, 8svh, 112px);
		padding-top: clamp(3.1rem, 4.1vw, 4.15rem);
		padding-bottom: clamp(1.45rem, 2.2vw, 2.25rem);
		align-items: center;
	}

	.kwusp-page .kwusp-section__inner {
		grid-template-columns: minmax(620px, 1.48fr) minmax(380px, 0.9fr);
		grid-template-rows: auto;
		align-items: stretch;
		padding-bottom: clamp(2.65rem, 3.2vw, 3.2rem);
	}

	.kwusp-page .kwusp-section--default .kwusp-section__copy,
	.kwusp-page .kwusp-section--media-left .kwusp-section__copy {
		grid-column: 2;
		grid-row: 1;
		align-self: center;
	}

	.kwusp-page .kwusp-section--default .kwusp-section__hero,
	.kwusp-page .kwusp-section--media-left .kwusp-section__hero {
		grid-column: 1;
		grid-row: 1;
		align-self: stretch;
		height: 100%;
		min-height: 0;
		display: flex;
		align-items: stretch;
	}

	.kwusp-page .kwusp-section__hero-video,
	.kwusp-page .kwusp-section__hero-image {
		height: 100%;
		min-height: 0;
		max-height: none;
		aspect-ratio: auto;
		object-fit: contain;
	}

	.kwusp-page .kwusp-video-controls {
		position: absolute !important;
		left: 50% !important;
		bottom: 0 !important;
		justify-self: auto;
		align-self: auto;
		margin-top: 0;
		transform: translateX(-50%) !important;
	}

	.kwusp-page .usp-section .kwusp-section__number,
	.kwusp-page .usp-section .kwusp-section__title {
		font-size: clamp(1.55rem, 1.65vw, 2rem) !important;
		line-height: 1.04;
	}

	.kwusp-page .usp-section .kwusp-section__subtitle {
		font-size: clamp(0.92rem, 0.95vw, 1.08rem) !important;
		line-height: 1.32;
	}

	.kwusp-page .usp-section .kwusp-section__body {
		font-size: 16px !important;
		line-height: 1.52;
	}

	.kwusp-page .usp-section .kwusp-section__cta {
		margin-block-start: 1.05rem !important;
		font-size: 16px !important;
		font-weight: 600 !important;
	}
}

/* Reference pass 49: align USP intro tile grid vertically with the intro video. */
@media (min-width: 900px) {
	.kwusp-page .kb-row-layout-id146_26396d-7a .kadence-column146_822d46-1f > .kt-inside-inner-col {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.kwusp-page .kb-row-layout-id146_26396d-7a .kadence-column146_822d46-1f > .kt-inside-inner-col > .wp-block-kadence-rowlayout {
		width: 100%;
	}
}

/* Reference pass 50: Kadence inner column is a flex row; center intro tile grid on the main axis. */
@media (min-width: 900px) {
	.kwusp-page .kb-row-layout-id146_26396d-7a .kadence-column146_822d46-1f > .kt-inside-inner-col {
		justify-content: center;
	}
}

/* Reference pass 49: mobile USP hero should stay compact and keep the WebGL shader visible (#49, #50). */
@media (max-width: 767px) {
	.kwusp-page .kwusp-hero,
	.kwusp-page .kwusp-hero.kwusp-hero--shader {
		min-height: clamp(10rem, 25svh, 13.5rem) !important;
		padding-block-start: clamp(2.4rem, 8svh, 3.25rem) !important;
		padding-block-end: clamp(1.8rem, 6svh, 2.5rem) !important;
		background: #050202 !important;
	}

	.kwusp-page .kwusp-hero--shader::before,
	.kwusp-page .kwusp-hero .kt-row-layout-overlay {
		background: none !important;
		display: none !important;
	}

	.kwusp-page .kwusp-hero-shader {
		display: block !important;
		opacity: 1 !important;
		filter: none !important;
	}

	.kwusp-page .kwusp-hero h1,
	.kwusp-page .kwusp-hero .wp-block-kadence-advancedheading {
		font-size: clamp(2rem, 10.5vw, 3.05rem) !important;
		line-height: 0.92 !important;
		letter-spacing: -0.035em !important;
		max-width: min(90vw, 20rem) !important;
		margin-inline: auto !important;
	}

	.kwusp-page .kwusp-hero p,
	.kwusp-page .kwusp-hero .usp-underline {
		font-size: clamp(0.82rem, 3.3vw, 1rem) !important;
		line-height: 1.28 !important;
		max-width: min(84vw, 18rem) !important;
		margin-block-end: 0.9rem !important;
		margin-inline: auto !important;
	}
}

/* Reference pass 51: final desktop USP fit for MacBook-size viewports (#86/#98). */
@media (min-width: 900px) {
	.kwusp-page .kwusp-section {
		min-height: calc(100vh - var(--kwusp-fixed-header-height, 80px)) !important;
		scroll-margin-top: var(--kwusp-fixed-header-height, 80px) !important;
		padding:
			clamp(2.15rem, 3.2vw, 3.65rem)
			clamp(1rem, 1.8vw, 2rem)
			clamp(1.35rem, 2.1vw, 2.25rem) !important;
	}

	.kwusp-page .kwusp-section__inner {
		max-width: min(1900px, calc(100vw - 4rem)) !important;
		grid-template-columns: minmax(720px, 1.58fr) minmax(420px, 0.92fr) !important;
		gap: clamp(1.1rem, 1.55vw, 1.7rem) !important;
		align-items: center !important;
	}

	.kwusp-page .kwusp-section__hero {
		min-height: 0 !important;
		height: auto !important;
		align-self: center !important;
	}

	.kwusp-page .kwusp-section__hero-video,
	.kwusp-page .kwusp-section__hero-image {
		width: 100% !important;
		height: auto !important;
		max-height: min(54vh, 560px) !important;
		min-height: 0 !important;
		aspect-ratio: 16 / 9 !important;
		object-fit: contain !important;
	}

	.kwusp-page .kwusp-section__copy {
		align-self: center !important;
	}

	.kwusp-page .kwusp-section__number,
	.kwusp-page .kwusp-section__title {
		font-size: clamp(1.18rem, 1.55vw, 1.6rem) !important;
		line-height: 1.08 !important;
	}

	.kwusp-page .kwusp-section__subtitle {
		font-size: clamp(0.78rem, 0.86vw, 0.95rem) !important;
		line-height: 1.24 !important;
	}

	.kwusp-page .kwusp-section__body {
		margin-top: 0.78rem !important;
		font-size: clamp(0.68rem, 0.7vw, 0.8rem) !important;
		line-height: 1.48 !important;
	}

	.kwusp-page .kwusp-section__cta {
		margin-top: 0.82rem !important;
		padding: 0.56rem 0.82rem !important;
		font-size: 0.7rem !important;
	}

	.kwusp-page .kwusp-section__tiles {
		margin-top: 0.78rem !important;
		gap: 0.6rem !important;
	}

	.kwusp-page .kwusp-section__tile {
		aspect-ratio: 1.62 / 1 !important;
	}
}

.kwusp-page .tsnav--topbar {
	width: 3.25rem !important;
	max-width: 3.25rem !important;
	padding: 0.62rem 0.32rem !important;
}

.kwusp-page .tsnav--topbar .tsnav__list {
	gap: 0.38rem !important;
}

.kwusp-page .tsnav--topbar .tsnav__item {
	width: 2.55rem !important;
	min-width: 2.55rem !important;
	max-width: 2.55rem !important;
	height: 1.08rem !important;
}

.kwusp-page .tsnav--topbar .tsnav__item.tsnav__item--active {
	background: transparent !important;
}

.kwusp-page .tsnav--topbar .tsnav__label {
	width: 2ch !important;
	min-width: 2ch !important;
	max-width: 2ch !important;
	height: 1.08rem !important;
	line-height: 1.08rem !important;
	margin-left: 0 !important;
	font-size: 0 !important;
	letter-spacing: 0 !important;
	color: transparent !important;
	overflow: visible !important;
	text-align: left !important;
}

.kwusp-page .tsnav--topbar .tsnav__label::before,
.kwusp-page .tsnav--topbar .tsnav__label::after {
	content: attr(data-short-label) !important;
	display: block !important;
	width: 2ch !important;
	height: 1.08rem !important;
	line-height: 1.08rem !important;
	font-family: Roboto, Arial, sans-serif !important;
	font-size: 0.66rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	color: #111 !important;
	text-align: left !important;
}

.kwusp-page .tsnav--topbar .tsnav__label::after {
	content: none !important;
}

.kwusp-page .tsnav--topbar .tsnav__item--active .tsnav__label::before,
.kwusp-page .tsnav--topbar .tsnav__item:hover .tsnav__label::before,
.kwusp-page .tsnav--topbar .tsnav__item:focus-visible .tsnav__label::before {
	color: #111 !important;
	font-weight: 800 !important;
}

.kwusp-page .tsnav--topbar .tsnav__item.tsnav__item--active::before {
	left: 1.32rem !important;
	width: 1.02rem !important;
	height: 0.96rem !important;
}

/* Reference pass 52: two-digit rail labels must not collapse when source text is hidden. */
.kwusp-page .tsnav--topbar .tsnav__label {
	position: static !important;
	width: 2rem !important;
	min-width: 2rem !important;
	max-width: none !important;
	height: auto !important;
	line-height: 1.08rem !important;
	margin-left: 0 !important;
	padding-left: 0.42rem !important;
	transform: none !important;
	font-size: 0.66rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.02em !important;
	color: #111 !important;
	overflow: visible !important;
	white-space: nowrap !important;
	text-align: left !important;
}

.kwusp-page .tsnav--topbar .tsnav__label::before,
.kwusp-page .tsnav--topbar .tsnav__label::after {
	content: none !important;
}

/* Reference pass 53: accordion panels stay square below rounded headers; embedded YouTube players inherit the reference radius. */
.accordeon-element .kt-accordion-panel,
.accordeon-element .kt-accordion-panel-inner,
.kwusp-page .accordeon-element .kt-accordion-panel,
.kwusp-page .accordeon-element .kt-accordion-panel-inner {
	border-radius: 0 !important;
}

.accordeon-element .kt-blocks-accordion-header,
.kwusp-page .accordeon-element .kt-blocks-accordion-header {
	border-radius: 0.65rem !important;
}

.accordeon-element .wp-block-embed-youtube,
.accordeon-element .wp-block-embed-youtube .wp-block-embed__wrapper,
.accordeon-element .wp-block-embed-youtube iframe,
.kwusp-page .accordeon-element .wp-block-embed-youtube,
.kwusp-page .accordeon-element .wp-block-embed-youtube .wp-block-embed__wrapper,
.kwusp-page .accordeon-element .wp-block-embed-youtube iframe {
	border-radius: 0.5rem !important;
}

.accordeon-element .wp-block-embed-youtube,
.accordeon-element .wp-block-embed-youtube .wp-block-embed__wrapper,
.kwusp-page .accordeon-element .wp-block-embed-youtube,
.kwusp-page .accordeon-element .wp-block-embed-youtube .wp-block-embed__wrapper {
	overflow: hidden !important;
}

.accordeon-element .wp-block-embed-youtube iframe,
.kwusp-page .accordeon-element .wp-block-embed-youtube iframe {
	display: block;
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Issue #86 round 2b: desktop chapter stage (kawai.eu/de/usp parity).
 *
 * JS progressively wraps the six independent Gutenberg USP Section blocks
 * into one sticky frontend stage. Without JS, in the editor, and on mobile,
 * the original stacked section flow remains intact.
 * ------------------------------------------------------------------ */

.kwusp-page .kwusp-chapters {
	position: relative;
	margin: 0;
}

/* The block-gap of the group layout would break the exact one-viewport
   pitch per chapter that the navigator math relies on. */
.kwusp-page .kwusp-chapters > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

@media (min-width: 900px) and (orientation: landscape) {
	.kwusp-page .kwusp-chapters--stage-enhanced {
		/* Keep one full sticky viewport after the last chapter becomes active.
		 * Without that trailing pitch, the stage releases at the exact scroll
		 * position where chapter six starts, so it is immediately skipped when
		 * scrolling in either direction. */
		height: calc((var(--kwusp-chapter-count, 6) + 1) * 100vh);
		height: calc((var(--kwusp-chapter-count, 6) + 1) * 100svh);
		background: #0a0a0a;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-chapters__stage {
		position: sticky;
		top: 0 !important;
		height: 100vh !important;
		height: 100svh !important;
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		overflow: hidden !important;
		background: #0a0a0a;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section {
		position: absolute !important;
		inset: 0 !important;
		top: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: 100vh !important;
		height: 100svh !important;
		min-height: 0 !important;
		max-height: none !important;
		margin: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		scroll-margin-top: 0 !important;
		padding-top: calc(var(--kwusp-fixed-header-height, 80px) + 1.25rem) !important;
		padding-bottom: 3.75rem !important;
		padding-right: clamp(6.25rem, 7vw, 8rem) !important;
		display: flex !important;
		align-items: center !important;
		background: #0a0a0a !important;
		transform: translateY(100%) !important;
		transition: transform 500ms ease;
		will-change: transform;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced:not(.kwusp-chapters--stage-ready) .kwusp-section {
		transition: none;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section.kwusp-section--stage-active {
		transform: none !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section.kwusp-section--stage-revealed {
		transform: none !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__inner {
		max-width: min(1900px, calc(100vw - 8rem)) !important;
		margin-inline: auto !important;
	}

	/* The player bar anchors to the staged section itself (bottom overlap
	   inside the panel), so the inner grid no longer reserves space for it. */
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__inner {
		position: static !important;
		padding-bottom: 0 !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-video-controls {
		position: absolute !important;
		left: 50% !important;
		bottom: 0.75rem !important;
		transform: translateX(-50%) !important;
	}

	@media (prefers-reduced-motion: reduce) {
		.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section {
			transition: none !important;
		}
	}
}

/* ------------------------------------------------------------------ *
 * Issue #86: section navigator rail — reference optics.
 *
 * White box docked flush to the right viewport edge, rounded on the left
 * (8px), two-digit Roboto numbers, red indicator pill on the active row.
 * Replaces the pixel-hunting passes above and the former Customizer
 * .section-nav overrides (removed alongside this change).
 * ------------------------------------------------------------------ */

.kwusp-page nav.tsnav--topbar {
	top: 50% !important;
	right: 0 !important;
	left: auto !important;
	width: 56px !important;
	min-width: 0 !important;
	max-width: 56px !important;
	padding: 16px 0 16px 16px !important;
	border: 2px solid #bebebe !important;
	border-right: 0 !important;
	border-radius: 16px 0 0 16px !important;
	background: #f5f5f5 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
	overflow: visible !important;
}

.kwusp-page nav.tsnav--topbar .tsnav__list {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 12px !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.kwusp-page nav.tsnav--topbar .tsnav__item-wrap {
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.kwusp-page nav.tsnav--topbar .tsnav__item {
	position: relative !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: 32px !important;
	padding: 0 20px 0 0 !important;
	background: transparent !important;
	border-radius: 6px !important;
	box-shadow: none !important;
	opacity: 1 !important;
	overflow: visible !important;
	left: auto !important;
	transform: none !important;
}

.kwusp-page nav.tsnav--topbar .tsnav__label {
	position: static !important;
	display: block !important;
	visibility: visible !important;
	width: auto !important;
	min-width: 2ch !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: visible !important;
	white-space: nowrap !important;
	font-family: Roboto, Arial, sans-serif !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 26px !important;
	letter-spacing: 0 !important;
	color: #111 !important;
	text-align: right !important;
	transform: none !important;
}

.kwusp-page nav.tsnav--topbar .tsnav__label::before,
.kwusp-page nav.tsnav--topbar .tsnav__label::after {
	content: none !important;
}

/* Guard against legacy first-letter shrink hacks hiding the leading zero. */
.kwusp-page nav.tsnav--topbar .tsnav__label::first-letter {
	font-size: inherit !important;
	color: inherit !important;
}

.kwusp-page nav.tsnav--topbar .tsnav__item::after {
	content: none !important;
}

.kwusp-page nav.tsnav--topbar .tsnav__item::before {
	content: none !important;
}

/* Red indicator pill, flush with the right viewport edge on the active row. */
.kwusp-page nav.tsnav--topbar .tsnav__item.tsnav__item--active::before {
	content: "" !important;
	position: absolute !important;
	top: 50% !important;
	right: 0 !important;
	left: auto !important;
	width: 12px !important;
	height: 32px !important;
	border-radius: 6px 0 0 6px !important;
	background: #fe0b19 !important;
	transform: translateY(-50%) !important;
	opacity: 1 !important;
	display: block !important;
}

.kwusp-page nav.tsnav--topbar .tsnav__item,
.kwusp-page nav.tsnav--topbar .tsnav__item:hover,
.kwusp-page nav.tsnav--topbar .tsnav__item:focus-visible,
.kwusp-page nav.tsnav--topbar .tsnav__item.tsnav__item--active {
	color: #111 !important;
}

.kwusp-page nav.tsnav--topbar .tsnav__item:hover .tsnav__label,
.kwusp-page nav.tsnav--topbar .tsnav__item:focus-visible .tsnav__label,
.kwusp-page nav.tsnav--topbar .tsnav__item.tsnav__item--active .tsnav__label {
	color: #111 !important;
	font-weight: 700 !important;
}

/* ------------------------------------------------------------------ *
 * Issue #86 round 3: video panel parity with kawai.eu/de/usp.
 *
 * Measured original at 1512x860: the chapter grid keeps 2rem block
 * padding, the video column fills the full row height (100svh - header
 * offsets - padding) with object-fit: cover, and the player pill
 * straddles the panel's bottom edge (~10px inside, ~36px hanging out).
 * At shorter viewports (e.g. 738px) that same fill yields the ~5/3
 * panel Christian measured — so the fill, not a fixed ratio, is what
 * the original actually does.
 * ------------------------------------------------------------------ */

@media (min-width: 900px) and (orientation: landscape) {
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__inner {
		height: 100%;
		align-items: stretch !important;
		padding-block: 2rem !important;
		gap: 2rem !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__hero {
		align-self: stretch !important;
		height: 100% !important;
		min-height: 0 !important;
		align-items: stretch !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__hero-video,
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__hero-image {
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: auto !important;
		object-fit: cover !important;
	}

	/* Copy column stays vertically centered against the stretched row. */
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__copy {
		align-self: center !important;
	}

	/* Player pill: original is 448px wide, 46px tall, bottom edge 24px
	   above the viewport bottom — straddling the panel's lower edge. */
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-video-controls {
		bottom: 1.5rem !important;
		width: min(28rem, calc(100% - 2rem));
		min-height: 2.75rem;
	}
}

/* ------------------------------------------------------------------ *
 * Issue #86 final polish: adaptive tile height inside the 100svh stage.
 *
 * Chapter 04's two-line heading grows the copy column beyond the pinned
 * stage row; the stage clips overflow, so tiles and the player pill
 * vanished below the fold on shorter desktop viewports. Cap the column
 * at the panel height and let the tile grid absorb the surplus.
 *
 * The copy column is display: block in stage mode (pass 11 renders the
 * number inline with the title), and block children can never shrink —
 * so the column becomes a two-column grid instead: number and title
 * share row 1 (keeping the inline-heading optic), everything else spans
 * both columns. Because the tile list's minimum contribution is 0, grid
 * track sizing hands its row exactly the space the heading left over;
 * the tiles drop their fixed aspect ratio only while squeezed and the
 * thumbs crop via object-fit: cover.
 * ------------------------------------------------------------------ */

@media (min-width: 900px) and (orientation: landscape) {
	/* Pin the single grid row to the panel height. The pass-48 `auto` row
	   grows with an overlong copy column, so the column's max-height: 100%
	   would resolve against its own overflow (circular) and never bind. */
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__inner {
		grid-template-rows: 100%;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__copy {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		/* Spacing comes from the existing element margins, exactly as in the
		   block flow this replaces; a grid gap would add ~12px per child. */
		gap: 0;
		/* Definite height, not max-height: Chromium sizes auto rows against
		   the content when the block size is indefinite and only clips the
		   box afterwards — the squeeze never happens under max-height. */
		height: 100%;
		min-height: 0 !important;
		align-content: center;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__copy > * {
		grid-column: 1 / -1;
		min-width: 0;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__number {
		grid-column: 1;
		grid-row: 1;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__title {
		grid-column: 2;
		grid-row: 1;
	}

	/* Blockified grid item would stretch to full column width otherwise. */
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__cta {
		justify-self: start;
	}

	/* min contribution 0 → the tile list's grid row soaks up the shrink;
	   its own min-height keeps at least a slim, recognizable tile band.
	   Rows stay plain `auto` (not pass-8's minmax(0, 1fr)): fr rows report
	   a zero max-content contribution in Chromium, which would freeze the
	   list at its min-height even when the panel has room. Auto rows still
	   compress because the row minimum is the li's min-height: 0. */
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__tiles {
		min-height: 3.75rem;
		grid-auto-rows: auto;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__tile-wrap {
		display: flex;
		min-height: 0;
	}

	/* Both axes definite → the pass-51 aspect-ratio is ignored while
	   squeezed and takes over again as soon as space allows. */
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__tile {
		height: 100%;
		min-height: 0;
	}
}

/* Wide desktop: do not stretch the video panel beyond the active text,
   CTA and tile gallery. The JavaScript runtime supplies the measured cap. */
@media (min-width: 1440px) and (min-height: 800px) and (orientation: landscape) {
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__inner {
		grid-template-rows: auto !important;
		align-content: center !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__copy {
		height: auto !important;
		align-self: center !important;
		align-content: initial;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__hero {
		align-self: center !important;
		height: var(--kwusp-stage-copy-height, auto) !important;
		max-height: 100% !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__hero-video,
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__hero-image {
		height: 100% !important;
	}
}

/* #131 / #132: an iPad in landscape has room for the chapter rail, while
 * portrait needs the readable one-column/mobile composition. The desktop
 * sticky stage is deliberately landscape-only in the runtime; these rules
 * complete the portrait fallback above the base 768px two-column layout. */
@media (min-width: 768px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
	.kwusp-page .kwusp-section {
		padding-block: clamp(2rem, 5vw, 3.5rem);
	}

	.kwusp-page .kwusp-section__inner {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) !important;
		column-gap: 0.36rem;
		row-gap: 0.5rem;
		align-items: baseline !important;
		padding-bottom: 0;
	}

	/* Override the desktop variant selector, which otherwise places the
	 * media back into row one and makes the copy appear centred beside it. */
	.kwusp-page .kwusp-section--default .kwusp-section__hero,
	.kwusp-page .kwusp-section--media-left .kwusp-section__hero {
		grid-column: 1 / -1 !important;
		grid-row: 5 !important;
		order: 0 !important;
	}

	.kwusp-page .kwusp-section__copy {
		display: contents;
	}

	/* Match the mobile grid exactly: number/title share the first row and
	 * every following element spans the readable content width. */
	.kwusp-page .kwusp-section__number {
		grid-column: 1;
		grid-row: 1;
		align-self: baseline;
		white-space: nowrap;
		text-align: left !important;
	}
	.kwusp-page .kwusp-section__title {
		grid-column: 2;
		grid-row: 1;
		align-self: baseline;
		white-space: normal;
		text-align: left !important;
	}
	.kwusp-page .kwusp-section__subtitle {
		grid-column: 1 / -1;
		grid-row: 2;
		margin-top: 0;
		text-align: left !important;
	}
	.kwusp-page .kwusp-section__body {
		grid-column: 1 / -1;
		grid-row: 3;
		margin-top: 0.8rem;
		text-align: left !important;
	}
	.kwusp-page .kwusp-section__cta {
		grid-column: 1 / -1;
		grid-row: 4;
		width: fit-content;
		justify-self: start;
		margin-top: 0.8rem;
	}

	.kwusp-page .kwusp-section__hero {
		grid-column: 1 / -1;
		grid-row: 5;
		margin-top: 1.15rem;
		width: 100%;
		padding-bottom: 0;
	}

	.kwusp-page .kwusp-section__hero-video,
	.kwusp-page .kwusp-section__hero-image {
		width: 100%;
		height: auto !important;
		max-height: none !important;
		aspect-ratio: 16 / 9;
		object-fit: contain;
	}

	.kwusp-page .kwusp-video-controls {
		grid-column: 1 / -1;
		grid-row: 6;
		margin-top: -0.2rem;
		position: static !important;
		left: auto !important;
		bottom: auto !important;
		transform: none !important;
		align-self: center;
		width: min(28rem, 100%);
	}

	.kwusp-page .kwusp-section__tiles {
		grid-column: 1 / -1;
		grid-row: 7;
		margin-top: 1.2rem;
		width: 100%;
	}

	.kwusp-page nav.tsnav--topbar {
		display: none !important;
	}
}

/* A saved block can enqueue an older runtime alongside the current one.
 * On touch devices that older runtime may already have moved the chapters
 * into a stage before the current runtime runs.  Make that stale enhancement
 * harmless: tablets always retain the reference page's normal scroll flow.
 * The current desktop-only stage remains unaffected. */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) {
	.kwusp-page .kwusp-chapters--stage-enhanced {
		height: auto !important;
		background: transparent !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-chapters__stage {
		position: static !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		margin-inline: 0 !important;
		overflow: visible !important;
		background: transparent !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section {
		position: relative !important;
		inset: auto !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding-right: initial !important;
		transform: none !important;
		will-change: auto;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-video-controls {
		position: static !important;
		left: auto !important;
		bottom: auto !important;
		transform: none !important;
	}
}

/* #131: the chapter runtime starts the rail transparent until its
 * IntersectionObserver sees the wrapper. Safari can miss that first callback
 * after the sticky stage is enhanced. Landscape tablets have the same rail as
 * desktop, so keep it available throughout the staged chapter range. */
@media (min-width: 900px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
	.kwusp-page nav.tsnav--topbar.tsnav--chapters {
		display: block !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		transform: translateY(-50%) !important;
	}
}

/* Reference pass 54: #86 customer final polish — number/title vertical
 * alignment, header + CTA breathing room, and tighter right-side gutter.
 * Values are nudges layered on top of reference pass 51 (desktop copy) and the
 * stage-enhanced desktop right padding (line ~2646). Desktop-only; the mobile
 * and tablet copy rhythm from passes 39-42 stays untouched. */
@media (min-width: 900px) {
	/* 1. Keep number and headline on the exact shared line. Both use the same
	 *    computed font metrics, so an optical offset introduced a real mismatch
	 *    when the text was selected. */
	.kwusp-page .kwusp-section__number {
		position: relative !important;
		top: 0 !important;
	}

	/* 2. ~5px more air above the section heading ("Das Herz des Pianos"). The
	 *    copy column is vertically centered, so nudge the whole block down
	 *    rather than fighting align-self with padding. */
	.kwusp-page .kwusp-section__copy {
		transform: translateY(5px) !important;
	}

	/* 3. Match the original KAWAI desktop text rhythm. The reference uses Roboto
	 *    for the entire copy stack; mixing the site defaults here changed both
	 *    visual weight and the body line breaks. Keep the selectors as specific
	 *    as the stage rules so the values survive the enhanced desktop mode. */
	.kwusp-page .usp-section .kwusp-section__number,
	.kwusp-page .usp-section .kwusp-section__title {
		font-family: Roboto, Arial, sans-serif !important;
		font-size: 39.0625px !important;
		font-weight: 900 !important;
		line-height: 39.0625px !important;
		letter-spacing: normal !important;
	}

	.kwusp-page .usp-section .kwusp-section__subtitle {
		font-family: Roboto, Arial, sans-serif !important;
		font-size: 20px !important;
		font-weight: 700 !important;
		line-height: 20px !important;
		margin-top: 8px !important;
		/* The live reference uses Tailwind gray-300, not translucent white. */
		color: #a3a3a3 !important;
	}

	.kwusp-page .usp-section .kwusp-section__body {
		font-family: Roboto, Arial, sans-serif !important;
		font-size: 16px !important;
		font-weight: 400 !important;
		line-height: 26px !important;
		margin-top: 24px !important;
	}

	.kwusp-page .usp-section .kwusp-section__cta {
		font-family: Roboto, Arial, sans-serif !important;
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 24px !important;
		margin-top: 32px !important;
		padding: 12px 20px !important;
	}

	.kwusp-page .usp-section .kwusp-section__tiles {
		margin-top: 16px !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__copy {
		padding-right: 0 !important;
	}
}

/* 4. Reduce the right-side gutter of the staged desktop chapters by ~25px so
 *    the copy column sits closer to the navigator rail. Base value is the
 *    stage padding-right clamp(6.25rem, 7vw, 8rem). */
@media (min-width: 900px) and (orientation: landscape) {
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section {
		padding-right: calc(clamp(6.25rem, 7vw, 8rem) - 25px) !important;
	}
}

/* Reference pass 55: #86 media cadence. Keep the gallery rhythm equal to the
 * CTA-to-gallery gap. When a compact desktop viewport cannot accommodate the
 * full grid, the gallery is the flexible/cropped element—not the copy and not
 * the player clearance. The original player uses a 46px, 2px-framed control
 * bar with 18px glyphs. */
@media (min-width: 900px) and (orientation: landscape) {
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__tiles {
		gap: 16px !important;
		min-height: 0 !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-video-controls {
		height: 46px !important;
		min-height: 46px !important;
		padding: 12px 20px !important;
		gap: 12px !important;
		border-width: 2px !important;
		/* Keep the pill entirely inside the stage with the same 24px lower
		 * breathing room as the original chapter frame. */
		bottom: 24px !important;
	}

	.kwusp-page .kwusp-video-controls__button svg,
	.kwusp-page .kwusp-video-controls__play svg,
	.kwusp-page .kwusp-video-controls__mute svg {
		/* Our inline SVG paths occupy only part of their 24px viewbox.  A 22px
		 * box produces the reference's visual (and touch) size. */
		width: 22px !important;
		height: 22px !important;
	}

	.kwusp-page .kwusp-video-controls input[type="range"]::-webkit-slider-runnable-track {
		height: 4px !important;
	}

	.kwusp-page .kwusp-video-controls input[type="range"]::-moz-range-track {
		height: 4px !important;
	}
}

/* Reference pass 56: reserve a real vertical safe frame for every pinned
 * chapter. The player is absolutely positioned, so merely giving it a
 * viewport-bottom offset did not reserve any room in the media grid. On a
 * long Chapter 04 the video/gallery could therefore extend behind the player;
 * at the same time the flexible row could drift up into the fixed header.
 *
 * The original keeps three independent minimum clearances: header → chapter
 * content, media → player, and player → viewport edge. Make those dimensions
 * part of the section's content box. The gallery remains the only flexible
 * (and therefore crop-able) item when a short viewport needs to yield space.
 */
@media (min-width: 900px) and (orientation: landscape) {
	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section {
		/* Some header breakpoints expose the compact 56px variable while the
		 * visible desktop header is taller. 112px is the reference-safe floor
		 * (header plus 32px air), independent of that implementation detail. */
		--kwusp-stage-top-safe: max(7rem, calc(var(--kwusp-fixed-header-height, 80px) + 2rem));
		--kwusp-stage-player-height: 46px;
		--kwusp-stage-player-bottom-safe: 24px;
		--kwusp-stage-media-player-gap: 24px;
		--kwusp-stage-bottom-safe: calc(
			var(--kwusp-stage-player-height) +
			var(--kwusp-stage-player-bottom-safe) +
			var(--kwusp-stage-media-player-gap)
		);
		padding-top: var(--kwusp-stage-top-safe) !important;
		padding-bottom: var(--kwusp-stage-bottom-safe) !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__inner {
		/* Definite available height prevents both media/player overlap and the
		 * old wide-desktop copy-height override from bypassing the safe frame. */
		height: calc(100svh - var(--kwusp-stage-top-safe) - var(--kwusp-stage-bottom-safe)) !important;
		grid-template-rows: 100% !important;
		padding-block: 0 !important;
		min-height: 0 !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__hero {
		height: 100% !important;
		max-height: 100% !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__copy {
		/* The roomy-desktop rule used to restore `height:auto`, which lets
		 * Chapter 04's long copy escape upward through the header. Keep the
		 * copy inside the same definite frame as the media. `safe center`
		 * preserves the original centred composition when it fits and falls
		 * back to the top safe edge when it does not. */
		height: 100% !important;
		min-height: 0 !important;
		align-self: stretch !important;
		align-content: safe center !important;
	}

	.kwusp-page .kwusp-chapters--stage-enhanced .kwusp-video-controls {
		bottom: var(--kwusp-stage-player-bottom-safe) !important;
		height: var(--kwusp-stage-player-height) !important;
		min-height: var(--kwusp-stage-player-height) !important;
	}
}

/* The Polish Chapter 04 localisation is materially longer than the approved
 * German reference. On short desktop viewports keep the same safe frame and
 * preserve the CTA by tightening only its text rhythm; the gallery is still
 * the crop-able element. */
@media (min-width: 900px) and (orientation: landscape) and (max-height: 800px) {
	html[lang^="pl"] .kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__number,
	html[lang^="pl"] .kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__title {
		font-size: 32px !important;
		line-height: 32px !important;
	}

	html[lang^="pl"] .kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__subtitle {
		font-size: 16px !important;
		line-height: 18px !important;
	}

	html[lang^="pl"] .kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__body {
		font-size: 14px !important;
		line-height: 20px !important;
		margin-top: 12px !important;
	}

	html[lang^="pl"] .kwusp-page .kwusp-chapters--stage-enhanced .kwusp-section__cta {
		font-size: 14px !important;
		line-height: 20px !important;
		margin-top: 8px !important;
		padding: 8px 12px !important;
	}
}