/**
 * KOG · Rest Tech™ landing page
 * -----------------------------------------------------------------------------
 * Scoped to the Rest Tech page family. Everything here is namespaced `.kog-rtp-*`
 * ("Rest Tech page") — note the shorter `.kog-rt-*` prefix is already taken by
 * the homepage Rest Tech teaser in section-animations.css, so this file
 * deliberately avoids it rather than risk colliding with a live section.
 *
 * Colour, type and spacing all come from theme.json presets; nothing here
 * hard-codes a near-duplicate brand value. Entrance animation is the site's
 * shared `.kog-fade dN` stagger (defined in blocks.css, which already carries
 * the prefers-reduced-motion override).
 */

/* ==========================================================================
   Shared section shells
   ========================================================================== */

.kog-rtp-hero,
.kog-rtp-why,
.kog-rtp-video,
.kog-rtp-steps,
.kog-rtp-connect,
.kog-rtp-cases,
.kog-rtp-includes,
.kog-rtp-data,
.kog-rtp-creator,
.kog-rtp-cta {
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.kog-rtp-why,
.kog-rtp-connect,
.kog-rtp-includes {
	background: var(--wp--preset--color--cream);
}

.kog-rtp-hero,
.kog-rtp-steps,
.kog-rtp-cases,
.kog-rtp-creator {
	background: var(--wp--preset--color--warm-white);
}

/* Left-aligned sections: put every child on the content column's left edge.
 *
 * These three sections are constrained groups, so WordPress caps each child
 * at the 1200px content size and centres it with auto margins. A child that
 * then sets a margin of its own — a headline pinned left, a statement pushed
 * right — drops those auto margins and falls back to the section's padding
 * edge, roughly 72px outboard of where its siblings sit. One section ended up
 * with three different left edges.
 *
 * `--kog-rtp-column-inset` is that gap. The percentage inside it is resolved
 * where the variable is USED, so it must only be applied to a section's direct
 * children, whose containing block is the section's content box. Below the
 * content size it collapses to 0 and the sections go full-bleed-to-gutter as
 * they already did on tablet and phone.
 */
.kog-rtp-why,
.kog-rtp-cases,
.kog-rtp-creator {
	--kog-rtp-column-inset: max(
		0px,
		calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)
	);
}

/* Screen-reader utility — the theme only defines this scoped to the opt-in
   form, so the page carries its own copy rather than assuming it exists. */
.kog-rtp-data .screen-reader-text,
.kog-rtp-carousel .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   1. Hero
   ========================================================================== */

.kog-rtp-hero {
	/* Clears the floating transparent header, then breathes. */
	padding-top: calc(var(--wp--preset--spacing--80) + clamp(4rem, 7vw, 6rem));
	padding-bottom: var(--wp--preset--spacing--80);
}
.kog-rtp-hero__cols {
	gap: clamp(2rem, 5vw, 4rem) !important;
	align-items: center;
}
.kog-rtp-hero__headline {
	font-size: clamp(2.25rem, 4.6vw, 3.75rem) !important;
	line-height: 1.08 !important;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0.75rem 0 0 !important;
	text-wrap: balance;
}
.kog-rtp-hero__lead {
	font-size: 1.0625rem !important;
	line-height: 1.75 !important;
	color: var(--wp--preset--color--gray) !important;
	max-width: 46ch;
	margin: 1.5rem 0 0 !important;
}

/* --- Carousel ----------------------------------------------------------- */

.kog-rtp-carousel {
	position: relative;
}
.kog-rtp-carousel__viewport {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
	background: var(--wp--preset--color--cream);
	box-shadow: 0 24px 60px -28px rgba(28, 28, 26, 0.45);
}
.kog-rtp-carousel__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 600ms cubic-bezier(0.4, 0.01, 0.2, 1);
	transform: translateX(calc(var(--rtp-index, 0) * -100%));
}
.kog-rtp-carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	aspect-ratio: 3 / 2;
}
.kog-rtp-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kog-rtp-carousel__controls {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
}
.kog-rtp-carousel__btn {
	width: 2.25rem;
	height: 2.25rem;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--wp--preset--color--gold-border);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--charcoal);
	font-size: 0.9375rem;
	line-height: 1;
	cursor: pointer;
	transition: background 200ms ease-out, border-color 200ms ease-out;
}
.kog-rtp-carousel__btn:hover {
	background: var(--wp--preset--color--gold-pale);
	border-color: var(--wp--preset--color--gold);
}
.kog-rtp-carousel__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}
.kog-rtp-carousel__btn--play { margin-left: auto; }

/* Pause / play glyphs, drawn in CSS so there's no icon dependency. */
.kog-rtp-carousel__icon-pause {
	width: 9px;
	height: 11px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}
.kog-rtp-carousel__btn--play.is-paused .kog-rtp-carousel__icon-pause {
	width: 0;
	height: 0;
	border-left: 9px solid currentColor;
	border-right: 0;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	margin-left: 2px;
}

.kog-rtp-carousel__dots {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-inline: 0.35rem;
}
.kog-rtp-carousel__dot {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.kog-rtp-carousel__dot span {
	display: block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold-border);
	transition: background 200ms ease-out, transform 200ms ease-out;
}
.kog-rtp-carousel__dot:hover span { background: var(--wp--preset--color--gold); }
.kog-rtp-carousel__dot.is-current span {
	background: var(--wp--preset--color--gold);
	transform: scale(1.45);
}
.kog-rtp-carousel__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 1px;
	border-radius: 50%;
}

/* ==========================================================================
   2. Why Rest Tech — typographic, no photography
   ========================================================================== */

.kog-rtp-why {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
.kog-rtp-why__headline {
	font-size: clamp(2rem, 4.4vw, 3.5rem) !important;
	line-height: 1.1 !important;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--charcoal) !important;
	max-width: 20ch;
	margin: 0.75rem 0 0 var(--kog-rtp-column-inset) !important;
	text-wrap: balance;
}
/* Two things this group has to say out loud.
   `font-size` because `ch` is measured against the element's OWN font, and
   this wrapper inherits the child theme's 36px display face — 54ch resolved
   to ~1198px and the copy ran the full column instead of holding a measure.
   `!important` on the width and the left margin because WordPress's
   constrained-layout rule sets both `max-width` and `margin-inline: auto` at
   equal specificity, and its styles print after ours — left unqualified, the
   group kept the content size and centred itself in the section. */
.kog-rtp-why__body {
	font-size: 1rem;
	max-width: 54ch !important;
	margin-top: var(--wp--preset--spacing--60);
	margin-left: var(--kog-rtp-column-inset) !important;
}
.kog-rtp-why__lead {
	font-size: 1.25rem !important;
	line-height: 1.6 !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 !important;
}
.kog-rtp-why__copy {
	font-size: 1rem !important;
	line-height: 1.8 !important;
	color: var(--wp--preset--color--gray) !important;
	margin: 1.25rem 0 0 !important;
}
/* The closing line is the section's payoff — oversized, gold, given room. */
.kog-rtp-why__statement {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(1.75rem, 3.6vw, 2.875rem) !important;
	line-height: 1.22 !important;
	font-style: italic;
	color: var(--wp--preset--color--gold) !important;
	max-width: 24ch;
	margin: var(--wp--preset--spacing--80) var(--kog-rtp-column-inset) 0 auto !important;
	text-align: right;
	text-wrap: balance;
}

/* ==========================================================================
   3. See It In Action — dark band, video facade, participant quotes
   ========================================================================== */

.kog-rtp-video {
	background: var(--wp--preset--color--dark);
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
.kog-rtp-video__headline {
	font-size: clamp(2rem, 4.2vw, 3.25rem) !important;
	line-height: 1.12 !important;
	color: var(--wp--preset--color--warm-white) !important;
	margin: 0.75rem auto 0 !important;
	text-wrap: balance;
}
.kog-rtp-video__sub {
	font-size: 1rem !important;
	line-height: 1.75 !important;
	color: rgba(250, 248, 243, 0.78) !important;
	max-width: 52ch;
	margin: 1.25rem auto 0 !important;
}

/* Click-to-load facade: the YouTube player is never requested until the
   visitor asks for it, so the page carries no third-party weight on load. */
.kog-rtp-player {
	position: relative;
	width: min(980px, 100%);
	margin: var(--wp--preset--spacing--60) auto 0;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.7);
}
.kog-rtp-player__poster,
.kog-rtp-player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.kog-rtp-player__poster { object-fit: cover; }
.kog-rtp-player__btn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.875rem;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: linear-gradient(rgba(10, 18, 12, 0.35), rgba(10, 18, 12, 0.55));
	transition: background 250ms ease-out;
}
.kog-rtp-player__btn:hover { background: linear-gradient(rgba(10, 18, 12, 0.25), rgba(10, 18, 12, 0.45)); }
.kog-rtp-player__btn:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold);
	outline-offset: -3px;
}
.kog-rtp-player__icon {
	width: clamp(4rem, 8vw, 5.5rem);
	height: clamp(4rem, 8vw, 5.5rem);
	display: block;
	filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45));
	transition: transform 220ms ease-out;
}
.kog-rtp-player__icon svg { width: 100%; height: 100%; display: block; }
.kog-rtp-player__icon circle { fill: var(--wp--preset--color--gold); transition: fill 220ms ease-out; }
.kog-rtp-player__btn:hover .kog-rtp-player__icon { transform: scale(1.06); }
.kog-rtp-player__btn:hover .kog-rtp-player__icon circle { fill: var(--wp--preset--color--gold-light); }
.kog-rtp-player__label {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--warm-white);
}
.kog-rtp-player.is-playing .kog-rtp-player__btn,
.kog-rtp-player.is-playing .kog-rtp-player__poster { display: none; }

.kog-rtp-quotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	width: min(1100px, 100%);
	margin: var(--wp--preset--spacing--70) auto 0;
	padding: 0;
	list-style: none;
	background: rgba(196, 151, 58, 0.22);
	border-block: 1px solid rgba(196, 151, 58, 0.22);
}
.kog-rtp-quote {
	background: var(--wp--preset--color--dark);
	padding: 2rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.kog-rtp-quote__text { margin: 0; border: 0; padding: 0; }
.kog-rtp-quote__text p {
	font-family: var(--wp--preset--font-family--playfair);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--warm-white);
	margin: 0;
}
.kog-rtp-quote__cite {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: auto 0 0;
}

/* ==========================================================================
   4. The Experience — four sequenced steps
   ========================================================================== */

.kog-rtp-steps {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
.kog-rtp-steps__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	list-style: none;
	background: var(--wp--preset--color--gold-border);
	border-block: 1px solid var(--wp--preset--color--gold-border);
}
.kog-rtp-step {
	position: relative;
	overflow: hidden;
	background: var(--wp--preset--color--warm-white);
	padding: 2.5rem 1.75rem 2.25rem;
	transition: background 260ms ease-out;
}
.kog-rtp-step:hover { background: var(--wp--preset--color--cream); }
.kog-rtp-step__num {
	position: absolute;
	top: -0.5rem;
	right: 0.75rem;
	font-family: var(--wp--preset--font-family--playfair);
	font-size: 5.5rem;
	font-weight: 700;
	line-height: 1;
	color: rgba(196, 151, 58, 0.13);
	pointer-events: none;
	user-select: none;
}
.kog-rtp-step__label {
	position: relative;
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold) !important;
	margin: 0 0 0.875rem !important;
}
.kog-rtp-step__body {
	position: relative;
	font-size: 0.9375rem !important;
	line-height: 1.7 !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 !important;
}

/* ==========================================================================
   5. Performance Rehab × Rest Tech brand moment
   ========================================================================== */

.kog-rtp-connect {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
.kog-rtp-connect__pair {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	width: min(1100px, 100%);
	margin-inline: auto;
}
.kog-rtp-connect__side { text-align: right; }
.kog-rtp-connect__side--accent { text-align: left; }
.kog-rtp-connect__mark {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin: 0 0 0.75rem;
}
.kog-rtp-connect__line {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: clamp(1.5rem, 3vw, 2.375rem);
	line-height: 1.2;
	color: var(--wp--preset--color--charcoal);
	margin: 0;
	text-wrap: balance;
}
.kog-rtp-connect__side--accent .kog-rtp-connect__line { color: var(--wp--preset--color--gold); }
.kog-rtp-connect__line em { font-style: italic; }

/* Gold hairline + diamond node — the site's existing divider vocabulary,
   not a new diagram language. */
.kog-rtp-connect__link {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.kog-rtp-connect__rule {
	display: block;
	width: clamp(1.5rem, 4vw, 3.5rem);
	height: 1px;
	background: var(--wp--preset--color--gold);
}
.kog-rtp-connect__node {
	display: block;
	width: 9px;
	height: 9px;
	background: var(--wp--preset--color--gold);
	transform: rotate(45deg);
	flex: 0 0 auto;
}
.kog-rtp-connect__sub {
	font-size: 1rem !important;
	line-height: 1.75 !important;
	color: var(--wp--preset--color--gray) !important;
	max-width: 56ch;
	margin: var(--wp--preset--spacing--60) auto 0 !important;
}

/* ==========================================================================
   6. Use cases
   ========================================================================== */

.kog-rtp-cases {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
.kog-rtp-cases__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	margin: var(--wp--preset--spacing--60) 0 0;
	padding: 0;
	list-style: none;
	background: var(--wp--preset--color--gold-border);
	border-block: 1px solid var(--wp--preset--color--gold-border);
}
.kog-rtp-case {
	position: relative;
	background: var(--wp--preset--color--warm-white);
	padding: 2.25rem 1.75rem;
	overflow: hidden;
	transition: background 260ms ease-out;
}
.kog-rtp-case::after {
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 400ms ease-out;
}
.kog-rtp-case:hover { background: var(--wp--preset--color--gold-pale); }
.kog-rtp-case:hover::after { transform: scaleX(1); }
.kog-rtp-case__title {
	font-family: var(--wp--preset--font-family--dm-sans) !important;
	font-size: 0.6875rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold) !important;
	margin: 0 0 0.75rem !important;
	line-height: 1.5 !important;
}
.kog-rtp-case__body {
	font-size: 0.9375rem !important;
	line-height: 1.7 !important;
	color: var(--wp--preset--color--charcoal) !important;
	margin: 0 !important;
}
.kog-rtp-cases__statement {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(1.5rem, 3.2vw, 2.5rem) !important;
	line-height: 1.25 !important;
	color: var(--wp--preset--color--charcoal) !important;
	max-width: 30ch;
	margin: var(--wp--preset--spacing--70) 0 0 var(--kog-rtp-column-inset) !important;
	text-wrap: balance;
}

/* ==========================================================================
   7. What the experience can include
   ========================================================================== */

.kog-rtp-includes {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
.kog-rtp-includes__cols { gap: clamp(2rem, 5vw, 4rem) !important; }
.kog-rtp-includes__intro {
	font-size: 1rem !important;
	line-height: 1.75 !important;
	color: var(--wp--preset--color--gray) !important;
	margin: 1.25rem 0 0 !important;
}
.kog-rtp-includes__list {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0;
}
.kog-rtp-includes__item {
	position: relative;
	padding: 0.875rem 0 0.875rem 1.75rem;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--wp--preset--color--charcoal);
	border-bottom: 1px solid var(--wp--preset--color--gold-border);
}
.kog-rtp-includes__item:first-child { border-top: 1px solid var(--wp--preset--color--gold-border); }
/* Gold check, drawn as a rotated border so there's no icon font or SVG
   round-trip for eight list rows. */
.kog-rtp-includes__item::before {
	content: '';
	position: absolute;
	left: 0.25rem;
	top: 1.15rem;
	width: 5px;
	height: 9px;
	border-right: 2px solid var(--wp--preset--color--gold);
	border-bottom: 2px solid var(--wp--preset--color--gold);
	transform: rotate(45deg);
}
.kog-rtp-includes__figure {
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 24px 60px -30px rgba(28, 28, 26, 0.5);
}
.kog-rtp-includes__figure img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* ==========================================================================
   8. The data behind the work — dark band
   ========================================================================== */

.kog-rtp-data {
	background: var(--wp--preset--color--forest);
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
.kog-rtp-data__headline {
	font-size: clamp(2rem, 4.2vw, 3.25rem) !important;
	line-height: 1.12 !important;
	color: var(--wp--preset--color--warm-white) !important;
	margin: 0.75rem auto 0 !important;
	text-wrap: balance;
}
.kog-rtp-data__intro {
	font-size: 1rem !important;
	line-height: 1.8 !important;
	color: rgba(250, 248, 243, 0.8) !important;
	max-width: 62ch;
	margin: 1.5rem auto 0 !important;
}
.kog-rtp-data__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);
	width: min(1000px, 100%);
	margin: var(--wp--preset--spacing--70) auto 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.kog-rtp-stat__figure {
	font-family: var(--wp--preset--font-family--playfair);
	font-size: clamp(3.25rem, 7vw, 5.5rem);
	font-weight: 900;
	line-height: 1;
	color: var(--wp--preset--color--gold);
	margin: 0;
}
.kog-rtp-stat__label {
	font-size: 0.9375rem;
	line-height: 1.65;
	color: rgba(250, 248, 243, 0.85);
	margin: 1rem auto 0;
	max-width: 26ch;
}
.kog-rtp-stat__ref {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	padding-left: 0.15rem;
}
.kog-rtp-stat__ref:hover { text-decoration: underline; }
.kog-rtp-stat__ref:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 2px;
}
.kog-rtp-data__transition {
	font-family: var(--wp--preset--font-family--playfair) !important;
	font-size: clamp(1.375rem, 2.8vw, 2rem) !important;
	line-height: 1.3 !important;
	color: var(--wp--preset--color--warm-white) !important;
	max-width: 34ch;
	margin: var(--wp--preset--spacing--70) auto 0 !important;
	text-wrap: balance;
}
/* The five reported outcomes are set as plain text, each sitting on one of
   the hand-drawn underline marks in assets/images/marks/ — the same swooshes
   the alt homepage hero runs under Khaliah's credentials, so the gesture is
   already the site's own. Five marks, five outcomes, one each.

   The marks are gold on transparent, which is why they read on this section's
   forest ground without a recolour. Stroke height is fixed rather than left
   at the artwork's natural aspect: stretched to a long label's width, a
   proportional mark climbs into its own descenders. */
.kog-rtp-data__outcomes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Column gap carries the weight here — the swooshes run the full width of
	   their label, so neighbours need real air or the strokes read as one. */
	gap: 0.75rem 2.5rem;
	margin: var(--wp--preset--spacing--60) auto 0;
	padding: 0;
	list-style: none;
	/* No max-width of its own: the constrained layout already caps this at the
	   1200px content column, which is where the eyebrow and headline above it
	   sit. A `ch` cap here would be measured against the display face this
	   <ul> inherits, not the label text, and would land nowhere near 64
	   characters. */
}
.kog-rtp-outcome {
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: clamp(1rem, 1.4vw, 1.1875rem);
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1.3;
	/* One label, one stroke: a phrase that broke over two lines would leave
	   the mark under the second half only. */
	white-space: nowrap;
	color: var(--wp--preset--color--warm-white);
	padding: 0 0.25rem 1.05rem;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100% 0.8rem;
}
.kog-rtp-outcome--1 { background-image: url('../images/marks/underline-1.png'); }
.kog-rtp-outcome--2 { background-image: url('../images/marks/underline-2.png'); }
.kog-rtp-outcome--3 { background-image: url('../images/marks/underline-3.png'); }
.kog-rtp-outcome--4 { background-image: url('../images/marks/underline-4.png'); }
.kog-rtp-outcome--5 { background-image: url('../images/marks/underline-5.png'); }
.kog-rtp-data__closing {
	font-size: 1rem !important;
	line-height: 1.8 !important;
	color: rgba(250, 248, 243, 0.8) !important;
	max-width: 56ch;
	margin: var(--wp--preset--spacing--60) auto 0 !important;
}
/* Source stays readable — 0.8125rem, not a hairline disclaimer. */
.kog-rtp-data__source {
	font-size: 0.8125rem;
	line-height: 1.6;
	color: rgba(250, 248, 243, 0.62);
	text-align: center;
	max-width: 60ch;
	margin: var(--wp--preset--spacing--50) auto 0;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid rgba(196, 151, 58, 0.25);
}

/* ==========================================================================
   9. Meet the founder
   ========================================================================== */

.kog-rtp-creator {
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
.kog-rtp-creator__headline {
	font-size: clamp(1.875rem, 3.8vw, 3rem) !important;
	line-height: 1.15 !important;
	color: var(--wp--preset--color--charcoal) !important;
	max-width: 22ch;
	margin: 0.75rem 0 0 var(--kog-rtp-column-inset) !important;
	text-wrap: balance;
}
.kog-rtp-creator__copy {
	font-size: 1rem !important;
	line-height: 1.8 !important;
	color: var(--wp--preset--color--gray) !important;
	max-width: 58ch;
	margin: 1.5rem 0 0 var(--kog-rtp-column-inset) !important;
}
/* The line that hands off to the question — same voice as the body copy,
   just pulled away from it so the question doesn't read as its third
   sentence. */
.kog-rtp-creator__lead {
	font-size: 1rem !important;
	line-height: 1.8 !important;
	color: var(--wp--preset--color--gray) !important;
	max-width: 58ch;
	margin: var(--wp--preset--spacing--50) 0 0 var(--kog-rtp-column-inset) !important;
}
/* The question is the close of the section, so it gets display scale, the
   editorial serif, and a gold rule holding it off the left margin. */
.kog-rtp-creator__question {
	font-size: clamp(1.625rem, 3.4vw, 2.75rem) !important;
	font-style: italic;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--charcoal) !important;
	max-width: 22ch;
	margin: var(--wp--preset--spacing--30) 0 0 var(--kog-rtp-column-inset) !important;
	padding-left: clamp(1.125rem, 2.5vw, 1.75rem);
	border-left: 3px solid var(--wp--preset--color--gold);
	text-wrap: balance;
}
/* The shared ghost button is built for dark sections — cream on cream is
   invisible here. Restate it for the light band: charcoal on the hairline,
   filling gold on hover. */
.kog-rtp-creator .kog-abb-btn-ghost > .wp-block-button__link {
	color: var(--wp--preset--color--charcoal);
	border-color: var(--wp--preset--color--gold-border);
}
.kog-rtp-creator .kog-abb-btn-ghost > .wp-block-button__link:hover,
.kog-rtp-creator .kog-abb-btn-ghost > .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--gold);
	border-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--forest);
}

/* ==========================================================================
   10. Final inquiry CTA — gold band
   ========================================================================== */

.kog-rtp-cta {
	background: var(--wp--preset--color--gold);
	padding-top: var(--wp--preset--spacing--80);
	padding-bottom: var(--wp--preset--spacing--80);
}
.kog-rtp-cta .is-style-kog-eyebrow { color: var(--wp--preset--color--forest) !important; }
.kog-rtp-cta__headline {
	font-size: clamp(2rem, 4.4vw, 3.5rem) !important;
	line-height: 1.12 !important;
	color: var(--wp--preset--color--forest) !important;
	margin: 0.75rem auto 0 !important;
	text-wrap: balance;
}
.kog-rtp-cta__copy {
	font-size: 1.0625rem !important;
	line-height: 1.75 !important;
	color: rgba(26, 58, 42, 0.86) !important;
	max-width: 54ch;
	margin: 1.25rem auto 0 !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.kog-rtp-steps__grid { grid-template-columns: repeat(2, 1fr); }
	.kog-rtp-quotes { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
	.kog-rtp-cases__grid { grid-template-columns: repeat(2, 1fr); }
	.kog-rtp-data__stats { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); }

	/* Stack the brand pair and turn the connector upright. */
	.kog-rtp-connect__pair { grid-template-columns: 1fr; gap: 1.25rem; }
	.kog-rtp-connect__side,
	.kog-rtp-connect__side--accent { text-align: center; }
	.kog-rtp-connect__link { flex-direction: column; justify-self: center; }
	.kog-rtp-connect__rule { width: 1px; height: clamp(1.25rem, 4vw, 2rem); }
}

@media (max-width: 781px) {
	.kog-rtp-hero { padding-top: calc(var(--wp--preset--spacing--70) + clamp(3.5rem, 12vw, 5rem)); }
	.kog-rtp-hero__lead { max-width: none; }
	/* Carousel leads on mobile — the copy has already made its point. */
	.kog-rtp-hero__cols { flex-direction: column; }
	.kog-rtp-why__statement {
		text-align: left;
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: none;
	}
	.kog-rtp-why__headline { max-width: none; }
	.kog-rtp-cases__statement { max-width: none; }
	.kog-rtp-creator__headline { max-width: none; }
	.kog-rtp-creator__question { max-width: none; }
	.kog-rtp-includes__figure img { aspect-ratio: 3 / 2; }
}

@media (max-width: 600px) {
	.kog-rtp-steps__grid,
	.kog-rtp-cases__grid { grid-template-columns: 1fr; }
	.kog-rtp-carousel__controls { flex-wrap: wrap; }
}

/* Touch tap targets. At desktop sizes the carousel controls are mouse-sized
   (36px arrows, 24px dots — the bare WCAG 2.5.8 minimum). On a phone, or on
   any coarse pointer at any width, grow the hit areas well clear of that
   minimum. The visible dot stays 7px; only the button around it grows, so
   the design is unchanged — this is hit area, not visual weight. Sizes are
   tuned to still fit one row at 390px without wrapping. */
@media (max-width: 781px), (pointer: coarse) {
	.kog-rtp-carousel__controls { gap: 0.35rem; }
	.kog-rtp-carousel__btn {
		width: 44px;
		height: 44px;
	}
	.kog-rtp-carousel__dots {
		gap: 0.15rem;
		margin-inline: 0.25rem;
	}
	.kog-rtp-carousel__dot {
		width: 34px;
		height: 34px;
	}
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.kog-rtp-carousel__track { transition: none; }
	.kog-rtp-case::after,
	.kog-rtp-step,
	.kog-rtp-case,
	.kog-rtp-player__icon,
	.kog-rtp-player__btn,
	.kog-rtp-carousel__btn,
	.kog-rtp-carousel__dot span { transition: none; }
}