/**
 * Wag'n Tails 2026  -  reusable component library
 *
 * All visual values reference theme.json design tokens.
 * Class prefix: wnt-
 *
 * @package Wagntails_2026
 */

/* ==========================================================================
   Shared primitives
   ========================================================================== */

.wnt-section {
	position: relative;
	isolation: isolate;
	padding-block: var(--wp--preset--spacing--section);
	padding-inline: var(--wp--custom--page-gutter);
}

.wnt-section--tight {
	padding-block: var(--wp--preset--spacing--section-tight);
}

.wnt-section__inner {
	width: min(100%, var(--wp--style--global--wide-size, 1120px));
	margin-inline: auto;
}

.wnt-section__inner--narrow {
	width: min(100%, var(--wp--style--global--content-size, 720px));
}

.wnt-section__inner--wide {
	width: min(100%, var(--wp--custom--container-wide, 1280px));
}

.wnt-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--aqua-deep);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
}

.wnt-lede {
	margin: 0;
	max-width: var(--wp--custom--measure);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.55;
}

.wnt-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
	margin-top: var(--wp--preset--spacing--lg);
}

.wnt-media {
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--xl);
	background: var(--wp--preset--color--mist);
}

.wnt-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wnt-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   1–3. Heroes
   ========================================================================== */

.wnt-hero {
	position: relative;
	overflow: clip;
	padding-block: clamp(4rem, 10vw, 7.5rem);
	padding-inline: var(--wp--custom--page-gutter);
	background: var(--wp--preset--gradient--horizon);
	color: var(--wp--preset--color--ink);
}

.wnt-hero__glow {
	pointer-events: none;
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		var(--wp--preset--gradient--glow-aqua),
		var(--wp--preset--gradient--glow-purple);
}

.wnt-hero__inner {
	position: relative;
	z-index: 1;
	width: min(100%, var(--wp--style--global--wide-size, 1120px));
	margin-inline: auto;
}

.wnt-hero__brand {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--purple);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.wnt-hero__title {
	margin: 0 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--purple-deep);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.02;
	max-width: 18ch;
}

.wnt-hero--editorial .wnt-hero__title {
	font-size: var(--wp--preset--font-size--display-xl);
}

.wnt-hero--editorial .wnt-hero__inner {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.wnt-hero--editorial .wnt-hero__title,
.wnt-hero--editorial .wnt-lede {
	max-width: 22ch;
	text-align: center;
}

.wnt-hero--editorial .wnt-lede {
	max-width: 42ch;
}

.wnt-hero--vehicle .wnt-hero__grid {
	display: grid;
	gap: var(--wp--preset--spacing--2xl);
	align-items: center;
}

@media (min-width: 1024px) {
	.wnt-hero--vehicle .wnt-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	}

	.wnt-hero--vehicle .wnt-hero__media {
		justify-self: end;
		width: min(100%, 34rem);
		aspect-ratio: 4 / 3;
		transform: translateX(4%);
	}
}

.wnt-hero--campaign {
	background: var(--wp--preset--gradient--dusk);
	color: var(--wp--preset--color--on-dark);
}

.wnt-hero--campaign .wnt-hero__brand,
.wnt-hero--campaign .wnt-hero__title {
	color: var(--wp--preset--color--on-dark);
}

.wnt-hero--campaign .wnt-eyebrow {
	color: var(--wp--preset--color--aqua-bright);
}

.wnt-hero--campaign .wnt-lede {
	color: color-mix(in srgb, var(--wp--preset--color--on-dark) 82%, transparent);
}

.wnt-hero--campaign .wnt-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--2xs);
	margin-bottom: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--3xs) var(--wp--preset--spacing--sm);
	border: 1px solid var(--wp--custom--line--on-dark);
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (max-width: 767px) {
	.wnt-hero--vehicle .wnt-hero__media {
		transform: none;
		aspect-ratio: 16 / 10;
	}
}

/* ==========================================================================
   4. Gradient CTA band
   ========================================================================== */

.wnt-cta-band {
	padding-block: var(--wp--preset--spacing--2xl);
	padding-inline: var(--wp--custom--page-gutter);
	background: var(--wp--custom--gradient--cta, var(--wp--preset--gradient--dusk));
	color: var(--wp--preset--color--on-dark);
}

.wnt-cta-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--lg);
	width: min(100%, var(--wp--style--global--wide-size, 1120px));
	margin-inline: auto;
}

.wnt-cta-band__copy {
	flex: 1 1 18rem;
	max-width: 40rem;
}

.wnt-cta-band__title {
	margin: 0 0 var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--on-dark);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
}

.wnt-cta-band__text {
	margin: 0;
	color: color-mix(in srgb, var(--wp--preset--color--on-dark) 80%, transparent);
	font-size: var(--wp--preset--font-size--body);
}

.wnt-cta-band .wnt-actions {
	margin-top: 0;
}

/* ==========================================================================
   Cards shared
   ========================================================================== */

.wnt-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--sm);
	height: 100%;
	padding: var(--wp--preset--spacing--md);
	border: 1px solid var(--wp--custom--line--default);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition:
		border-color var(--wp--custom--motion-button) var(--wp--custom--ease),
		box-shadow var(--wp--custom--motion-button) var(--wp--custom--ease),
		transform var(--wp--custom--motion-button) var(--wp--custom--ease);
}

a.wnt-card:hover,
a.wnt-card:focus-visible {
	border-color: var(--wp--custom--line--strong);
	box-shadow: var(--wp--preset--shadow--md);
	transform: translateY(-3px);
	text-decoration: none;
	color: inherit;
}

.wnt-card__media {
	aspect-ratio: 16 / 10;
	margin: calc(var(--wp--preset--spacing--md) * -1);
	margin-bottom: 0;
	border-radius: var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0 0;
	overflow: hidden;
	background: var(--wp--preset--color--lavender);
}

.wnt-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wnt-card__meta {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 500;
	letter-spacing: 0.02em;
}

.wnt-card__title {
	margin: 0;
	color: var(--wp--preset--color--purple-deep);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.wnt-card__text {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.55;
}

.wnt-card__link {
	margin-top: auto;
	color: var(--wp--preset--color--purple);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
}

/* ==========================================================================
   5–6. Vehicle cards
   ========================================================================== */

.wnt-vehicle-card {
	padding: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--lg);
}

.wnt-vehicle-card .wnt-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--md);
	flex: 1;
}

.wnt-vehicle-card__chassis {
	display: inline-flex;
	align-self: flex-start;
	padding: var(--wp--preset--spacing--3xs) var(--wp--preset--spacing--xs);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--aqua-deep);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.wnt-vehicle-card--compare {
	border-width: 1px;
}

.wnt-vehicle-card--compare.is-featured {
	border-color: var(--wp--preset--color--purple);
	box-shadow: var(--wp--preset--shadow--sm);
}

.wnt-vehicle-card__specs {
	display: grid;
	gap: var(--wp--preset--spacing--2xs);
	margin: var(--wp--preset--spacing--xs) 0 0;
	padding: 0;
	list-style: none;
}

.wnt-vehicle-card__specs li {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--sm);
	padding-block: var(--wp--preset--spacing--2xs);
	border-bottom: 1px solid var(--wp--custom--line--default);
	font-size: var(--wp--preset--font-size--body-sm);
}

.wnt-vehicle-card__specs li:last-child {
	border-bottom: 0;
}

.wnt-vehicle-card__specs span:last-child {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-align: right;
}

/* ==========================================================================
   7. Feature card
   ========================================================================== */

.wnt-feature-card {
	padding: var(--wp--preset--spacing--lg);
	background: var(--wp--preset--color--cream-warm);
	border-color: transparent;
}

.wnt-feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: var(--wp--preset--spacing--xs);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--lavender);
	color: var(--wp--preset--color--purple);
	font-size: 1.25rem;
	line-height: 1;
}

/* ==========================================================================
   8. Testimonial
   ========================================================================== */

.wnt-testimonial {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--lg);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--line--default);
	box-shadow: var(--wp--preset--shadow--sm);
}

.wnt-testimonial__quote {
	margin: 0;
	color: var(--wp--preset--color--purple-deep);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	line-height: 1.45;
}

.wnt-testimonial__quote p {
	margin: 0;
}

.wnt-testimonial__person {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
}

.wnt-testimonial__avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--mint);
	flex-shrink: 0;
}

.wnt-testimonial__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wnt-testimonial__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.wnt-testimonial__role {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-muted);
}

.wnt-testimonial--featured {
	background: var(--wp--preset--color--lavender);
	border-color: transparent;
}

/* ==========================================================================
   9. Stat callout
   ========================================================================== */

.wnt-stat {
	display: grid;
	gap: var(--wp--preset--spacing--2xs);
	padding: var(--wp--preset--spacing--lg);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--line--default);
}

.wnt-stat__value {
	margin: 0;
	color: var(--wp--preset--color--purple);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
}

.wnt-stat__label {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body-sm);
}

.wnt-stat--accent .wnt-stat__value {
	color: var(--wp--preset--color--coral);
}

.wnt-stat--on-dark {
	background: transparent;
	border-color: var(--wp--custom--line--on-dark);
}

.wnt-stat--on-dark .wnt-stat__value {
	color: var(--wp--preset--color--aqua-bright);
}

.wnt-stat--on-dark .wnt-stat__label {
	color: color-mix(in srgb, var(--wp--preset--color--on-dark) 78%, transparent);
}

.wnt-stat-row {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

/* ==========================================================================
   10. Step / process card
   ========================================================================== */

.wnt-step {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	padding: var(--wp--preset--spacing--lg);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--line--default);
	height: 100%;
}

.wnt-step__index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--gradient--road);
	color: var(--wp--preset--color--on-brand);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 800;
}

.wnt-step__title {
	margin: 0;
	color: var(--wp--preset--color--purple-deep);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 600;
}

.wnt-step__text {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body-sm);
}

.wnt-step-grid {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

/* ==========================================================================
   11. Editorial content split
   ========================================================================== */

.wnt-split {
	display: grid;
	gap: var(--wp--preset--spacing--2xl);
	align-items: center;
}

@media (min-width: 900px) {
	.wnt-split {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.wnt-split--media-end .wnt-split__media {
		order: 2;
	}
}

.wnt-split__title {
	margin: 0 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--purple-deep);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	max-width: 16ch;
}

.wnt-split__text {
	margin: 0 0 var(--wp--preset--spacing--md);
	max-width: var(--wp--custom--measure);
	color: var(--wp--preset--color--ink-muted);
}

/* ==========================================================================
   12. Image + content overlap
   ========================================================================== */

.wnt-overlap {
	display: grid;
	gap: 0;
	align-items: center;
}

.wnt-overlap__media {
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
	min-height: 18rem;
	background: var(--wp--preset--color--mist);
}

.wnt-overlap__panel {
	position: relative;
	z-index: 1;
	padding: var(--wp--preset--spacing--lg);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--line--default);
	box-shadow: var(--wp--preset--shadow--md);
}

@media (min-width: 900px) {
	.wnt-overlap {
		grid-template-columns: 1.15fr 0.85fr;
	}

	.wnt-overlap__panel {
		margin-left: calc(var(--wp--preset--spacing--2xl) * -1);
	}

	.wnt-overlap--panel-start {
		grid-template-columns: 0.85fr 1.15fr;
	}

	.wnt-overlap--panel-start .wnt-overlap__panel {
		order: -1;
		margin-left: 0;
		margin-right: calc(var(--wp--preset--spacing--2xl) * -1);
	}
}

@media (max-width: 899px) {
	.wnt-overlap__panel {
		margin-top: calc(var(--wp--preset--spacing--lg) * -1);
		margin-inline: var(--wp--preset--spacing--sm);
	}
}

/* ==========================================================================
   13. Scrolling strip
   ========================================================================== */

.wnt-marquee {
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--lg);
	background: var(--wp--preset--color--mist);
	border-block: 1px solid var(--wp--custom--line--default);
}

.wnt-marquee__viewport {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.wnt-marquee__track {
	display: flex;
	width: max-content;
	gap: var(--wp--preset--spacing--2xl);
	animation: wnt-marquee-x 40s linear infinite;
}

.wnt-marquee:hover .wnt-marquee__track,
.wnt-marquee:focus-within .wnt-marquee__track,
.wnt-marquee.is-paused .wnt-marquee__track {
	animation-play-state: paused;
}

.wnt-marquee__item {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--ink-muted);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	white-space: nowrap;
}

.wnt-marquee__mark {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--lavender);
}

@keyframes wnt-marquee-x {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.wnt-marquee__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
		row-gap: var(--wp--preset--spacing--sm);
	}
}

/* ==========================================================================
   14. Sticker / badge cluster
   ========================================================================== */

.wnt-sticker-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--md);
	align-items: center;
	justify-content: center;
}

.wnt-sticker {
	display: inline-grid;
	place-items: center;
	width: 6rem;
	height: 6rem;
	padding: var(--wp--preset--spacing--xs);
	border: 2px solid currentColor;
	border-radius: 50%;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--purple-deep);
	box-shadow: var(--wp--preset--shadow--sticker);
	text-align: center;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.15;
	text-transform: uppercase;
	transition: transform var(--wp--custom--motion-button) var(--wp--custom--ease);
}

.wnt-sticker:hover,
.wnt-sticker:focus-visible {
	transform: rotate(-3deg) translateY(-2px);
}

.wnt-sticker--crest {
	border-radius: 40% 40% 46% 46% / 12% 12% 55% 55%;
	background: var(--wp--preset--color--mint);
	color: var(--wp--preset--color--aqua-deep);
}

.wnt-sticker--patch {
	width: 7.5rem;
	height: 4.75rem;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--lavender);
}

.wnt-sticker--sun {
	background: color-mix(in srgb, var(--wp--preset--color--sun) 28%, var(--wp--preset--color--cream));
	color: var(--wp--preset--color--sun-deep);
}

.wnt-sticker--coral {
	background: color-mix(in srgb, var(--wp--preset--color--coral) 18%, var(--wp--preset--color--cream));
	color: var(--wp--preset--color--coral-deep);
}

.wnt-sticker--lg {
	width: 8rem;
	height: 8rem;
	font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.wnt-sticker:hover,
	.wnt-sticker:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   15. Section heading
   ========================================================================== */

.wnt-section-heading {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	margin-bottom: var(--wp--preset--spacing--xl);
	max-width: 40rem;
}

.wnt-section-heading--center {
	margin-inline: auto;
	text-align: center;
	justify-items: center;
}

.wnt-section-heading__title {
	margin: 0;
	color: var(--wp--preset--color--purple-deep);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.wnt-section-heading__text {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--lead);
	max-width: 36ch;
}

.wnt-section-heading--center .wnt-section-heading__text {
	max-width: 42ch;
}

/* ==========================================================================
   16–18. Resource / blog / event cards
   ========================================================================== */

.wnt-resource-card .wnt-card__media {
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--mint);
}

.wnt-blog-card .wnt-card__media {
	aspect-ratio: 16 / 10;
}

.wnt-event-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--md);
	align-items: start;
}

.wnt-event-card__date {
	display: grid;
	place-items: center;
	min-width: 4.25rem;
	padding: var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--on-brand);
	text-align: center;
}

.wnt-event-card__month {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.9;
}

.wnt-event-card__day {
	margin: 0;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 800;
	line-height: 1;
}

.wnt-event-card__where {
	margin: var(--wp--preset--spacing--3xs) 0 0;
	color: var(--wp--preset--color--ink-faint);
	font-size: var(--wp--preset--font-size--caption);
}

.wnt-card-grid {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* ==========================================================================
   19. FAQ accordion
   ========================================================================== */

.wnt-faq {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	width: min(100%, 46rem);
}

.wnt-faq__item {
	border: 1px solid var(--wp--custom--line--default);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	padding: 0;
	overflow: clip;
}

.wnt-faq__item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--md);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	color: var(--wp--preset--color--purple-deep);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: 1.35;
}

.wnt-faq__item summary::-webkit-details-marker {
	display: none;
}

.wnt-faq__item summary::after {
	content: "";
	flex: 0 0 0.65rem;
	width: 0.65rem;
	height: 0.65rem;
	border-right: 2px solid var(--wp--preset--color--purple);
	border-bottom: 2px solid var(--wp--preset--color--purple);
	transform: rotate(45deg);
	transition: transform var(--wp--custom--motion-button) var(--wp--custom--ease);
}

.wnt-faq__item[open] summary::after {
	transform: rotate(225deg);
}

.wnt-faq__item summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: -2px;
}

.wnt-faq__panel {
	padding: 0 var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.6;
}

.wnt-faq__panel > *:first-child {
	margin-top: 0;
}

.wnt-faq__panel > *:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   20. Form / lead capture panel
   ========================================================================== */

.wnt-lead {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
	padding: var(--wp--preset--spacing--xl);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--line--default);
	box-shadow: var(--wp--preset--shadow--sm);
}

@media (min-width: 900px) {
	.wnt-lead {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		align-items: start;
	}
}

.wnt-lead__title {
	margin: 0 0 var(--wp--preset--spacing--sm);
	color: var(--wp--preset--color--purple-deep);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 700;
}

.wnt-lead__text {
	margin: 0 0 var(--wp--preset--spacing--md);
	color: var(--wp--preset--color--ink-muted);
}

.wnt-lead__trust {
	display: grid;
	gap: var(--wp--preset--spacing--2xs);
	padding: 0;
	margin: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--ink-muted);
}

.wnt-lead__trust li {
	display: flex;
	gap: var(--wp--preset--spacing--xs);
	align-items: flex-start;
}

.wnt-lead__trust li::before {
	content: "";
	flex: 0 0 0.55rem;
	width: 0.55rem;
	height: 0.55rem;
	margin-top: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--aqua);
}

.wnt-lead__form-slot {
	padding: var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--cream-warm);
	border: 1px dashed var(--wp--custom--line--strong);
	min-height: 12rem;
}

.wnt-lead__form-slot > *:first-child {
	margin-top: 0;
}

.wnt-lead--compact {
	grid-template-columns: 1fr;
	padding: var(--wp--preset--spacing--lg);
}

/* ==========================================================================
   21. Full-width lifestyle section
   ========================================================================== */

.wnt-lifestyle {
	position: relative;
	min-height: clamp(22rem, 55vw, 36rem);
	display: grid;
	align-items: end;
	overflow: clip;
	color: var(--wp--preset--color--on-dark);
	background: var(--wp--preset--color--navy);
}

.wnt-lifestyle__media {
	position: absolute;
	inset: 0;
}

.wnt-lifestyle__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wnt-lifestyle__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(43, 33, 64, 0.05), rgba(43, 33, 64, 0.62));
}

.wnt-lifestyle__content {
	position: relative;
	z-index: 1;
	width: min(100%, var(--wp--style--global--wide-size, 1120px));
	margin-inline: auto;
	padding: var(--wp--preset--spacing--3xl) var(--wp--custom--page-gutter);
}

.wnt-lifestyle__title {
	margin: 0 0 var(--wp--preset--spacing--sm);
	max-width: 16ch;
	color: var(--wp--preset--color--on-dark);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.02;
}

.wnt-lifestyle__text {
	margin: 0;
	max-width: 36ch;
	color: color-mix(in srgb, var(--wp--preset--color--on-dark) 86%, transparent);
	font-size: var(--wp--preset--font-size--lead);
}

/* ==========================================================================
   22. Road / journey divider
   ========================================================================== */

.wnt-road {
	position: relative;
	padding-block: var(--wp--preset--spacing--xl);
	padding-inline: var(--wp--custom--page-gutter);
	overflow: clip;
}

.wnt-road__inner {
	width: min(100%, var(--wp--style--global--wide-size, 1120px));
	margin-inline: auto;
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	justify-items: center;
	text-align: center;
}

.wnt-road__label {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.wnt-road__svg {
	display: block;
	width: min(100%, 42rem);
	height: auto;
	color: var(--wp--preset--color--purple);
}

.wnt-road__path {
	fill: none;
	stroke: currentColor;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.wnt-road.is-drawn .wnt-road__path {
	animation: wnt-draw-road 1.4s var(--wp--custom--ease-editorial) forwards;
}

@keyframes wnt-draw-road {
	to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wnt-road__path,
	.wnt-road.is-drawn .wnt-road__path {
		stroke-dashoffset: 0;
		animation: none;
	}
}

/* ==========================================================================
   23. Horizontal vehicle showcase
   ========================================================================== */

.wnt-showcase {
	display: grid;
	gap: var(--wp--preset--spacing--lg);
}

.wnt-showcase__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(16rem, 20rem);
	gap: var(--wp--preset--spacing--md);
	overflow-x: auto;
	padding-bottom: var(--wp--preset--spacing--sm);
	scroll-snap-type: x mandatory;
	scrollbar-color: var(--wp--preset--color--purple) var(--wp--preset--color--mist);
}

.wnt-showcase__rail > * {
	scroll-snap-align: start;
}

.wnt-showcase__rail:focus-visible {
	outline: 2px solid var(--wp--preset--color--focus);
	outline-offset: 4px;
}

/* ==========================================================================
   24. Comparison table
   ========================================================================== */

.wnt-compare {
	width: 100%;
	overflow-x: auto;
	border-radius: var(--wp--custom--radius--lg);
	border: 1px solid var(--wp--custom--line--default);
	background: var(--wp--preset--color--white);
}

.wnt-compare table {
	width: 100%;
	border-collapse: collapse;
	min-width: 36rem;
	font-size: var(--wp--preset--font-size--body-sm);
}

.wnt-compare th,
.wnt-compare td {
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	text-align: left;
	border-bottom: 1px solid var(--wp--custom--line--default);
	vertical-align: top;
}

.wnt-compare thead th {
	background: var(--wp--preset--color--lavender);
	color: var(--wp--preset--color--purple-deep);
	font-family: var(--wp--preset--font-family--outfit);
	font-weight: 700;
}

.wnt-compare tbody th {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	background: var(--wp--preset--color--cream-warm);
	width: 28%;
}

.wnt-compare tr:last-child th,
.wnt-compare tr:last-child td {
	border-bottom: 0;
}

.wnt-compare td[data-highlight="true"] {
	color: var(--wp--preset--color--aqua-deep);
	font-weight: 700;
}

/* ==========================================================================
   25. Floating CTA
   ========================================================================== */

.wnt-float-cta {
	position: fixed;
	right: var(--wp--custom--page-gutter);
	bottom: calc(var(--wp--preset--spacing--lg) + env(safe-area-inset-bottom, 0px));
	z-index: 95;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--sm);
	max-width: min(22rem, calc(100vw - 2 * var(--wp--custom--page-gutter)));
	padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--on-brand);
	box-shadow: var(--wp--preset--shadow--lg);
}

.wnt-float-cta[hidden] {
	display: none !important;
}

.wnt-float-cta__text {
	margin: 0;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
	line-height: 1.3;
}

.wnt-float-cta__link {
	flex-shrink: 0;
	padding: var(--wp--preset--spacing--2xs) var(--wp--preset--spacing--sm);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--purple);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 800;
	text-decoration: none;
}

.wnt-float-cta__link:hover,
.wnt-float-cta__link:focus-visible {
	color: var(--wp--preset--color--purple-dark);
}

.wnt-float-cta__dismiss {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--on-brand);
	cursor: pointer;
	font-size: 1.25rem;
	line-height: 1;
}

.wnt-float-cta__dismiss:focus-visible {
	outline: 2px solid var(--wp--preset--color--aqua-bright);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.wnt-float-cta {
		display: none;
	}
}

/* ==========================================================================
   26. Mobile sticky CTA
   ========================================================================== */

.wnt-sticky-cta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 94;
	display: none;
	padding: var(--wp--preset--spacing--sm) var(--wp--custom--page-gutter);
	padding-bottom: calc(var(--wp--preset--spacing--sm) + env(safe-area-inset-bottom, 0px));
	background: color-mix(in srgb, var(--wp--preset--color--white) 92%, transparent);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--wp--custom--line--default);
	box-shadow: var(--wp--preset--shadow--md);
}

.wnt-sticky-cta[hidden] {
	display: none !important;
}

.wnt-sticky-cta__inner {
	display: flex;
	gap: var(--wp--preset--spacing--sm);
	width: min(100%, var(--wp--style--global--wide-size, 1120px));
	margin-inline: auto;
}

.wnt-sticky-cta__inner .wp-block-button,
.wnt-sticky-cta__inner .wp-block-button__link {
	flex: 1 1 auto;
	width: 100%;
	justify-content: center;
	text-align: center;
}

@media (max-width: 767px) {
	.wnt-sticky-cta {
		display: block;
	}

	body:has(.wnt-sticky-cta:not([hidden])) {
		padding-bottom: 5.5rem;
	}
}

@media (min-width: 768px) {
	.wnt-sticky-cta {
		display: none !important;
	}
}

/* ==========================================================================
   Homepage composition helpers
   ========================================================================== */

.wnt-home-hero {
	min-height: min(88vh, 52rem);
	display: grid;
	align-content: center;
	padding-bottom: var(--wp--preset--spacing--xl);
}

.wnt-home-hero .wnt-hero__title {
	max-width: 14ch;
}

.wnt-home-hero .wnt-hero__road {
	width: min(100%, 28rem);
	margin: var(--wp--preset--spacing--xl) auto 0;
}

.wnt-home-hero .wnt-road {
	padding-block: 0;
	padding-inline: 0;
}

.wnt-path {
	display: grid;
	gap: var(--wp--preset--spacing--md);
}

@media (min-width: 768px) {
	.wnt-path {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--lg);
	}
}

.wnt-path__card {
	display: grid;
	gap: var(--wp--preset--spacing--sm);
	align-content: end;
	min-height: 18rem;
	padding: var(--wp--preset--spacing--xl);
	border-radius: var(--wp--custom--radius--xl);
	text-decoration: none;
	color: var(--wp--preset--color--on-dark);
	background:
		linear-gradient(180deg, rgba(43, 33, 64, 0.15), rgba(43, 33, 64, 0.72)),
		var(--wp--preset--color--navy);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	transition:
		transform var(--wp--custom--motion-card, 0.32s) var(--wp--custom--ease),
		box-shadow var(--wp--custom--motion-card, 0.32s) var(--wp--custom--ease);
}

.wnt-path__card:hover,
.wnt-path__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--lg);
	color: var(--wp--preset--color--on-dark);
	text-decoration: none;
}

.wnt-path__card--groom {
	background-color: var(--wp--preset--color--purple-dark);
}

.wnt-path__card--vet {
	background-color: var(--wp--preset--color--aqua-deep);
}

.wnt-path__kicker {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.85;
}

.wnt-path__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--h-1);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.wnt-path__text {
	margin: 0;
	max-width: 28ch;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	opacity: 0.92;
}

.wnt-path__cta {
	margin-top: var(--wp--preset--spacing--sm);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 700;
}

.wnt-life {
	display: grid;
	gap: var(--wp--preset--spacing--md);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.wnt-life {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wnt-life__item {
	display: grid;
	gap: var(--wp--preset--spacing--xs);
	padding: var(--wp--preset--spacing--lg);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--line--default);
}

.wnt-life__word {
	margin: 0;
	color: var(--wp--preset--color--purple);
	font-family: var(--wp--preset--font-family--outfit);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.wnt-life__text {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
}

.wnt-home-fleet .wnt-showcase__rail {
	grid-auto-columns: minmax(18rem, 26rem);
	gap: var(--wp--preset--spacing--lg);
	padding-block: var(--wp--preset--spacing--sm);
}

.wnt-home-fleet .wnt-vehicle-card {
	min-height: 100%;
}

.wnt-home-fleet .wnt-card__media {
	aspect-ratio: 16 / 11;
	min-height: 14rem;
}

.wnt-whats-new {
	display: grid;
	gap: var(--wp--preset--spacing--md);
}

@media (min-width: 900px) {
	.wnt-whats-new {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.wnt-whats-new .wnt-card {
	background: var(--wp--preset--color--cream-warm);
	border-color: transparent;
}

.wnt-stories {
	display: grid;
	gap: var(--wp--preset--spacing--md);
}

@media (min-width: 900px) {
	.wnt-stories {
		grid-template-columns: 1.2fr 0.8fr;
		align-items: stretch;
	}

	.wnt-stories .wnt-testimonial--featured {
		grid-row: span 2;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wnt-path__card:hover,
	.wnt-path__card:focus-visible {
		transform: none;
	}
}