/* Components on top of theme.json, which owns the palette, type scale and spacing. */

/* Padding is part of the width. Without this an `alignwide` section that also
   has padding of its own ends up wider than the container it is aligned to —
   which is how three sections on the front page came out 1200, 1296 and 1160. */
*,
*::before,
*::after { box-sizing: border-box; }

:root {
	--vr-shadow-sm: 0 1px 2px rgba(11, 26, 43, .06), 0 2px 8px rgba(11, 26, 43, .05);
	--vr-shadow-md: 0 2px 6px rgba(11, 26, 43, .07), 0 14px 32px rgba(11, 26, 43, .09);
	--vr-shadow-lg: 0 6px 14px rgba(11, 26, 43, .10), 0 34px 70px rgba(11, 26, 43, .22);
	--vr-radius: 16px;
	--vr-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Header --------------------------------------------------------------- */

.vr-site-header {
	position: sticky;
	top: 0;
	z-index: 80;
	border-bottom: 1px solid var(--wp--preset--color--border);
	isolation: isolate;
}

/* The blur lives on a pseudo-element, not on the header itself. A
   backdrop-filter makes its element a containing block for `position: fixed`
   descendants, which pinned the mobile menu overlay inside the header strip
   instead of over the page. */
.vr-site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: saturate(180%) blur(12px);
}

/* The label sits in its own span, which otherwise keeps the body colour and
   fails contrast against the accent fill. */
.vr-nav-cta a,
.vr-nav-cta a * {
	color: #fff;
}

.vr-nav-cta a {
	background: var(--wp--preset--color--accent);
	text-decoration: none;
	padding: .7rem 1.25rem;
	border-radius: 999px;
	font-weight: 600;
	box-shadow: var(--vr-shadow-sm);
	transition: transform .18s var(--vr-ease), background .18s var(--vr-ease);
	display: inline-block;
}

.vr-nav-cta a:hover { background: var(--wp--preset--color--navy); transform: translateY(-1px); }

/* --- Hero ----------------------------------------------------------------- */

.vr-hero {
	position: relative;
	padding-inline: clamp(1rem, 4vw, 2rem);
	overflow: hidden;
	background: var(--wp--preset--gradient--hero, linear-gradient(135deg, #071321 0%, #122c47 48%, #1b4a78 100%));
	color: #eaf1f8;
	isolation: isolate;
}

/* The backdrop is drawn, not photographed: no stock imagery, no licence to
   worry about, and it stays sharp at any width. */
.vr-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("backdrop.svg");
	background-size: cover;
	background-position: center right;
	opacity: .85;
}

.vr-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(90rem 40rem at 78% 18%, rgba(227, 178, 60, .16), transparent 62%);
}

.vr-hero h1,
.vr-hero h2 { color: #fff; }

.vr-hero p { color: #c6d6e6; }

.vr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--highlight);
	margin-bottom: 1rem;
}

.vr-eyebrow::before {
	content: "";
	width: 2rem;
	height: 2px;
	background: var(--wp--preset--color--highlight);
}

.vr-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1.75rem;
	padding: 0;
	list-style: none;
}

.vr-hero-meta li {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(255, 255, 255, .09);
	border: 1px solid rgba(255, 255, 255, .16);
	color: #eaf1f8;
	border-radius: 999px;
	padding: .5rem 1rem;
	font-size: var(--wp--preset--font-size--small);
}

.vr-hero-meta svg { width: 1rem; height: 1rem; flex: none; color: var(--wp--preset--color--highlight); }

/* --- Cards ---------------------------------------------------------------- */

.vr-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--vr-radius);
	padding: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
	box-shadow: var(--vr-shadow-sm);
}

.vr-hero .vr-card {
	border-color: transparent;
	box-shadow: var(--vr-shadow-lg);
	color: var(--wp--preset--color--ink);
}

.vr-hero .vr-card h2,
.vr-hero .vr-card p,
.vr-hero .vr-card label,
.vr-hero .vr-card legend { color: var(--wp--preset--color--ink); }

.vr-hero .vr-card .has-small-font-size { color: var(--wp--preset--color--muted); }

/* --- Steps ---------------------------------------------------------------- */

.vr-steps { counter-reset: vr-step; }

.vr-steps > .wp-block-column { position: relative; padding-top: 3.25rem; }

.vr-steps > .wp-block-column::before {
	counter-increment: vr-step;
	content: counter(vr-step);
	position: absolute;
	top: 0;
	left: 0;
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-weight: 700;
	box-shadow: var(--vr-shadow-sm);
}

/* A hairline joining the steps, so they read as a sequence rather than a row. */
@media (min-width: 782px) {
	.vr-steps > .wp-block-column:not(:last-child)::after {
		content: "";
		position: absolute;
		top: 1.25rem;
		left: 3.1rem;
		right: -1.25rem;
		height: 1px;
		background: linear-gradient(90deg, var(--wp--preset--color--border), transparent);
	}
}

/* --- Notes and placeholders ---------------------------------------------- */

.vr-note {
	border-left: 4px solid var(--wp--preset--color--highlight);
	background: var(--wp--preset--color--surface);
	padding: 1.15rem 1.4rem;
	border-radius: 0 12px 12px 0;
	box-shadow: var(--vr-shadow-sm);
}

.vr-error { color: var(--wp--preset--color--danger); font-weight: 600; }

.vr-pending {
	background: #fff6dc;
	border-bottom: 1px dashed #c9a227;
	padding: 0 .25rem;
	font-style: normal;
}

/* No block treatment for a lone placeholder: `:only-child` counts elements
   and ignores text, so a placeholder sitting mid-sentence matched it too and
   broke the sentence in half, leaving its full stop on a line of its own. */

.vr-draft-notice { border-left-color: var(--wp--preset--color--danger); }

.vr-draft-notice p { margin: 0; }

/* --- Order form ----------------------------------------------------------- */

.vr-order-form h2 { margin-top: 0; }

/* The identifier choice is a segmented control: two radios, one track. */
.vr-identifier-choice {
	border: 0;
	margin: 0 0 1.25rem;
	padding: 0;
}

.vr-identifier-choice legend { padding: 0; margin-bottom: .6rem; }

.vr-identifier-choice > label {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--background);
	border-radius: 999px;
	padding: .5rem 1rem;
	margin-right: .5rem;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	transition: border-color .18s var(--vr-ease), background .18s var(--vr-ease);
}

.vr-identifier-choice > label:has(input:checked) {
	border-color: var(--wp--preset--color--accent);
	background: #e9f2fa;
}

.vr-identifier-choice > label:has(input:focus-visible) {
	outline: 3px solid rgba(27, 111, 179, .35);
	outline-offset: 2px;
}

/* The registration box is a number plate, because that is what the visitor is
   copying from. Yellow ground, black characters, blue band down the left. */
.vr-registration-plate input[type="text"]#vr-registration {
	font-size: 1.45rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 800;
	padding: .95rem 1rem .95rem 2.6rem;
	border: 2px solid #1a1a1a;
	border-radius: 10px;
	box-sizing: border-box;
	width: 100%;
	max-width: 23rem;
	color: #111;
	background-color: #f5d130;
	background-image: linear-gradient(90deg, #0b3a8f 0 1.9rem, transparent 1.9rem);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}

.vr-registration-plate input[type="text"]#vr-registration::placeholder { color: rgba(0, 0, 0, .45); }

.vr-registration-plate input[type="text"] {
	font-size: 1.05rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	padding: .85rem 1rem;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 10px;
	/* Without border-box the padding and border are added to the 100%, which
	   pushes the field past the edge of its card on a narrow screen. */
	box-sizing: border-box;
	width: 100%;
	max-width: 23rem;
	background: #fff;
}

.vr-registration-plate input[type="text"]:focus,
.vr-order-form select:focus,
.vr-contact-form input:focus,
.vr-contact-form textarea:focus {
	outline: 3px solid rgba(27, 111, 179, .35);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}

.vr-order-form .vr-identifier-field span {
	display: block;
	margin-top: .4rem;
	color: var(--wp--preset--color--muted);
}

.vr-order-form select {
	padding: .75rem .85rem;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 10px;
	box-sizing: border-box;
	width: 100%;
	max-width: 23rem;
	background: #fff;
	font-size: 1rem;
}

.vr-order-form button[type="submit"] { width: 100%; max-width: 23rem; }

/* --- Packages ------------------------------------------------------------- */

.vr-package-grid,
.vr-check-grid,
.vr-review-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	margin: 2rem 0;
}

.vr-package-card {
	display: flex;
	flex-direction: column;
	transition: transform .22s var(--vr-ease), box-shadow .22s var(--vr-ease);
}

.vr-package-card:hover { transform: translateY(-4px); box-shadow: var(--vr-shadow-md); }

.vr-package-featured {
	border-color: var(--wp--preset--color--accent);
	box-shadow: var(--vr-shadow-md);
	position: relative;
}

.vr-package-flag {
	position: absolute;
	top: -.85rem;
	left: clamp(1.4rem, 1rem + 1.2vw, 2.1rem);
	margin: 0;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .35rem .85rem;
	border-radius: 999px;
	box-shadow: var(--vr-shadow-sm);
}

.vr-package-card h3 {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.vr-package-price {
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
	margin: .35rem 0 1.25rem;
	color: var(--wp--preset--color--ink);
}

.vr-package-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	flex: 1;
}

.vr-package-list li {
	display: flex;
	gap: .65rem;
	align-items: flex-start;
	padding: .45rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
}

.vr-package-list li:last-child { border-bottom: 0; }

.vr-package-list .vr-included span[aria-hidden] { color: var(--wp--preset--color--success); font-weight: 800; }

.vr-package-list .vr-excluded { color: var(--wp--preset--color--muted); }

.vr-package-list .vr-excluded span[aria-hidden] { color: var(--wp--preset--color--border); }

.vr-package-note { color: var(--wp--preset--color--muted); }

/* --- Checks --------------------------------------------------------------- */

.vr-check-card {
	transition: transform .22s var(--vr-ease), box-shadow .22s var(--vr-ease);
}

.vr-check-card:hover { transform: translateY(-3px); box-shadow: var(--vr-shadow-md); }

.vr-check-icon {
	width: 2.75rem;
	height: 2.75rem;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: #e9f2fa;
	color: var(--wp--preset--color--accent);
	margin-bottom: 1rem;
}

.vr-check-icon svg { width: 1.45rem; height: 1.45rem; }

.vr-check-card h3 { margin: 0 0 .5rem; font-size: 1.1rem; }

.vr-check-limit { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

.vr-package-checks ul { list-style: none; margin: .5rem 0; padding: 0; }

.vr-package-checks li { padding: .55rem 0; border-bottom: 1px solid var(--wp--preset--color--border); }

/* --- Delivery record ------------------------------------------------------ */

.vr-stats { padding-block: 2.5rem; }

.vr-stat-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin: 0;
}

.vr-stat {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--vr-radius);
	padding: 1.35rem 1.5rem;
	box-shadow: var(--vr-shadow-sm);
}

.vr-stat dt { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

.vr-stat dd {
	margin: .35rem 0 0;
	font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -.02em;
}

/* --- Reviews -------------------------------------------------------------- */

.vr-review blockquote { margin: 0; border: 0; padding: 0; }

.vr-review blockquote p { font-size: 1.05rem; }

.vr-review figcaption { margin-top: 1rem; font-size: var(--wp--preset--font-size--small); }

.vr-review-date { color: var(--wp--preset--color--muted); margin-left: .5rem; }

/* --- Logos ---------------------------------------------------------------- */

.vr-trust { padding-block: 2.5rem; }

.vr-trust-heading {
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 1rem;
}

.vr-trust-logos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem 2.5rem;
}

.vr-trust-logos img { display: block; max-height: 2.75rem; width: auto; }

/* --- Contact -------------------------------------------------------------- */

.vr-contact-details { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.vr-contact-details li { padding: .7rem 0; border-bottom: 1px solid var(--wp--preset--color--border); }

.vr-contact-details li:last-child { border-bottom: 0; }

/* The label sits above its value; run inline it reads as one odd sentence. */
.vr-contact-details strong {
	display: block;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: .15rem;
	font-weight: 700;
}

.vr-contact-form input[type="text"],
.vr-contact-form input[type="email"],
.vr-contact-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .8rem .95rem;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: #fff;
	font-size: 1rem;
	font-family: inherit;
}

/* The honeypot is for bots, so it must not be reachable or visible to anyone
   using the page, including with a screen reader. */
.vr-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Footer --------------------------------------------------------------- */

.vr-footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; }

.vr-footer-nav a { color: inherit; }

/* --- Support channels ----------------------------------------------------- */

.vr-support { margin: 0; }

.vr-whatsapp {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	background: var(--wp--preset--color--navy);
	color: #fff;
	text-decoration: none;
	padding: .8rem 1.15rem;
	border-radius: 999px;
	box-shadow: var(--vr-shadow-md);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	transition: transform .18s var(--vr-ease);
}

.vr-whatsapp:hover { transform: translateY(-2px); }

.vr-whatsapp:focus-visible { outline: 3px solid var(--wp--preset--color--highlight); outline-offset: 3px; }

@media (max-width: 600px) {
	.vr-whatsapp-label { position: absolute; left: -9999px; }
	.vr-whatsapp { padding: .95rem; }
}

/* --- Assurance band ------------------------------------------------------- */

/* --- Full-width section stack --------------------------------------------- */

/* The front page is a stack of bands, each carrying its own vertical padding.
   The theme's block gap put 20px of page background between them, which showed
   as a pale seam wherever a coloured band met its neighbour. Only the front
   page lays out this way (`is-layout-flow`); inner pages keep their rhythm. */
.wp-block-post-content.is-layout-flow > * { margin-block: 0; }

.vr-assurances {
	background: var(--wp--preset--color--ink);
	color: #e7eef6;
	padding-block: 1.75rem;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.vr-assurance-grid {
	display: grid;
	gap: 1.25rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.vr-assurance { border-left: 2px solid rgba(227, 178, 60, .7); padding-left: 1rem; }

.vr-assurance dt { font-weight: 700; }

.vr-assurance dd { margin: .2rem 0 0; color: #a9bdd1; font-size: var(--wp--preset--font-size--small); }

/* --- Checks grid --------------------------------------------------------- */

.vr-checks { margin: 3rem auto; }

.vr-section-intro {
	color: var(--wp--preset--color--muted);
	max-width: 46rem;
	font-size: var(--wp--preset--font-size--large);
}

.vr-check-grid {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	margin: 1.75rem 0 0;
}

.vr-check-card {
	transition: transform .22s var(--vr-ease), box-shadow .22s var(--vr-ease);
	padding: 1.5rem;
}

.vr-check-card:hover { transform: translateY(-3px); box-shadow: var(--vr-shadow-md); }

.vr-check-card h3 { margin: 0 0 .45rem; font-size: 1.05rem; }

.vr-check-card p { margin: 0 0 .6rem; font-size: var(--wp--preset--font-size--small); }

.vr-check-card .vr-check-limit {
	margin: 0;
	padding-top: .6rem;
	border-top: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
	font-size: .82rem;
}

.vr-check-icon {
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	border-radius: 10px;
	background: #e9f2fa;
	color: var(--wp--preset--color--accent);
	margin-bottom: .85rem;
}

.vr-check-icon svg { width: 1.2rem; height: 1.2rem; }

/* --- The three outcomes --------------------------------------------------- */

.vr-outcomes {
	margin: 3.5rem auto;
	background: var(--wp--preset--color--ink);
	color: #dce8f4;
	border-radius: var(--vr-radius);
	padding: clamp(1.75rem, 1.25rem + 2vw, 3rem);
}

.vr-outcomes h2 { color: #fff; margin-top: 0; }

.vr-outcomes .vr-section-intro { color: #a9bdd1; }

.vr-outcome-grid {
	list-style: none;
	padding: 0;
	counter-reset: vr-outcome;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	margin: 1.75rem 0 0;
}

.vr-outcome {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	box-shadow: none;
	padding: 1.4rem;
}

.vr-outcome p { margin: .9rem 0 0; color: #c6d6e6; font-size: var(--wp--preset--font-size--small); }

.vr-outcome-foot {
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, .14);
	color: #a9bdd1;
	font-size: var(--wp--preset--font-size--small);
}

.vr-chip {
	display: inline-block;
	border-radius: 999px;
	padding: .3rem .85rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
}

.vr-chip-found { background: #dff0e6; color: #0f5d3b; }

.vr-chip-none { background: #e7edf4; color: #35485c; }

.vr-chip-unavailable { background: #fdeede; color: #8a4f12; }

.vr-package-checks ul { list-style: none; margin: .5rem 0; padding: 0; }

.vr-package-checks li { padding: .55rem 0; border-bottom: 1px solid var(--wp--preset--color--border); }

/* --- Footer --------------------------------------------------------------- */

.vr-footer-nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; list-style: none; padding: 0; }

.vr-footer-nav a { color: inherit; }

/* --- Support channels ----------------------------------------------------- */

.vr-support { margin: 0; }

.vr-whatsapp {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 90;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	background: var(--wp--preset--color--navy);
	color: #fff;
	text-decoration: none;
	padding: .8rem 1.15rem;
	border-radius: 999px;
	box-shadow: var(--vr-shadow-md);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	transition: transform .18s var(--vr-ease);
}

.vr-whatsapp:hover { transform: translateY(-2px); }

.vr-whatsapp:focus-visible { outline: 3px solid var(--wp--preset--color--highlight); outline-offset: 3px; }

@media (max-width: 600px) {
	.vr-whatsapp-label { position: absolute; left: -9999px; }
	.vr-whatsapp { padding: .95rem; }
}

/* --- Assurance band ------------------------------------------------------- */

.vr-assurances {
	background: var(--wp--preset--color--ink);
	color: #e7eef6;
	padding-block: 1.75rem;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.vr-assurance-grid {
	display: grid;
	gap: 1.25rem 2.5rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	margin: 0 auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.vr-assurance { border-left: 2px solid rgba(227, 178, 60, .7); padding-left: 1rem; }

.vr-assurance dt { font-weight: 700; }

.vr-assurance dd { margin: .2rem 0 0; color: #a9bdd1; font-size: var(--wp--preset--font-size--small); }

/* --- Full-width check rows ------------------------------------------------ */

.vr-check-rows { margin: 3rem auto; }

.vr-section-intro {
	color: var(--wp--preset--color--muted);
	max-width: 46rem;
	font-size: var(--wp--preset--font-size--large);
}

.vr-check-row {
	display: grid;
	gap: clamp(1.5rem, 1rem + 3vw, 4rem);
	grid-template-columns: 1fr 1fr;
	align-items: center;
	padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	border-top: 1px solid var(--wp--preset--color--border);
}

.vr-check-row:first-of-type { border-top: 0; }

.vr-check-row-flipped .vr-check-row-copy { order: 2; }

.vr-check-row-copy h3 { margin: .85rem 0 .6rem; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); }

.vr-text-cta {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 650;
	text-decoration: none;
	border-bottom: 2px solid currentColor;
	padding-bottom: 2px;
}

.vr-text-cta span { transition: transform .18s var(--vr-ease); }

.vr-text-cta:hover span { transform: translateX(3px); }

/* The figure beside each row: the report's own wording, never a vehicle. */
.vr-sheet {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--vr-radius);
	padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
	box-shadow: var(--vr-shadow-md);
}

.vr-sheet-title {
	margin: 0 0 1rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-bottom: .75rem;
}

.vr-sheet-rows { list-style: none; margin: 0; padding: 0; }

.vr-sheet-rows li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .75rem;
	align-items: center;
	padding: .6rem 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.vr-chip {
	display: inline-block;
	border-radius: 999px;
	padding: .25rem .7rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	white-space: nowrap;
}

.vr-chip-found { background: #dff0e6; color: #0f5d3b; }

.vr-chip-none { background: #eef1f5; color: #44576b; }

.vr-chip-unavailable { background: #fdeede; color: #8a4f12; }

.vr-sheet-foot {
	margin: 1rem 0 0;
	padding-top: .9rem;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

@media (max-width: 781px) {
	.vr-check-row { grid-template-columns: 1fr; }
	.vr-check-row-flipped .vr-check-row-copy { order: 0; }
}

/* --- Footer --------------------------------------------------------------- */

.vr-site-footer {
	background: var(--wp--preset--color--ink);
	color: #b9cadb;
}

.vr-site-footer h2,
.vr-site-footer h3,
.vr-site-footer strong { color: #fff; }

.vr-site-footer a { color: #dce8f4; }

.vr-site-footer .vr-contact-details li { border-bottom-color: rgba(255, 255, 255, .12); }

/* --- Inner page header ---------------------------------------------------- */

/* No block gap under the sticky header: the page background showed through it
   as a pale line above every masthead. */
.wp-site-blocks > main { margin-block-start: 0; }

.wp-site-blocks > main > .vr-page-head:first-child { margin-block-start: 0; }

.wp-block-post-content > *:first-child { margin-block-start: 0; }

.vr-page-head {
	position: relative;
	background: linear-gradient(135deg, #071321 0%, #122c47 55%, #1b4a78 115%);
	color: #fff;
	padding-inline: clamp(1rem, 4vw, 2rem);
	overflow: hidden;
}

.vr-page-head::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(60rem 26rem at 88% 10%, rgba(227, 178, 60, .18), transparent 62%);
	pointer-events: none;
}

.vr-page-head .wp-block-post-title {
	color: #fff;
	margin: 0;
	position: relative;
}

/* A gold rule under the title, so the band reads as a masthead. */
.vr-page-head .wp-block-post-title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3px;
	margin-top: 1.1rem;
	background: var(--wp--preset--color--highlight);
	border-radius: 2px;
}

/* --- Reading column ------------------------------------------------------- */

.vr-page-body { background: var(--wp--preset--color--background); }

/* The page now has one left edge at 1200px, so prose is capped rather than
   centred in a narrower column — otherwise the title and the sections below it
   start at two different places. */
.vr-page-body .entry-content > p,
.vr-page-body .entry-content > h2,
.vr-page-body .entry-content > h3,
.vr-page-body .entry-content > h4,
.vr-page-body .entry-content > ul,
.vr-page-body .entry-content > ol,
.vr-page-body .entry-content > figure,
.vr-page-body .entry-content > .vr-note,
.vr-page-body .entry-content > .vr-faq,
.vr-page-body .entry-content > .vr-cta-band,
.vr-page-head .wp-block-post-title,
.vr-page-head h1 {
	max-width: 48rem;
	/* Capped, and pinned to the same left edge the wide sections start at, so
	   the page has one edge rather than two. `max()` keeps it flush once the
	   viewport is narrower than the wide container. The constrained layout's
	   own auto margins are printed after this stylesheet, hence !important. */
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2)) !important;
	margin-inline-end: auto !important;
}

/* The opening paragraph carries the page, so it is set larger than the rest. */
.vr-page-body .entry-content > p:first-child {
	font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem);
	line-height: 1.6;
	color: var(--wp--preset--color--navy);
}

.vr-page-body .entry-content > h2:first-child,
.vr-page-body .entry-content > h3:first-child { margin-top: 0; }

/* Every prose list on the site, wherever it sits — page body, home page
   section, or the data-source list the plugin prints. */
.entry-content ul.wp-block-list,
.entry-content ol.wp-block-list,
.vr-sources {
	padding-left: 0;
	list-style: none;
	margin-block: 1.25rem;
}

.entry-content ul.wp-block-list > li,
.entry-content ol.wp-block-list > li,
.vr-sources > li {
	position: relative;
	padding-left: 1.9rem;
	margin-bottom: .7rem;
}

.entry-content ul.wp-block-list > li::before,
.vr-sources > li::before {
	content: "";
	position: absolute;
	left: .35rem;
	top: .62em;
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--highlight);
}

.entry-content ol.wp-block-list { counter-reset: vr-li; }

.entry-content ol.wp-block-list > li::before {
	counter-increment: vr-li;
	content: counter(vr-li);
	position: absolute;
	left: 0;
	top: .1em;
	width: 1.4rem;
	height: 1.4rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: #fff;
	font-size: .78rem;
	font-weight: 700;
}

/* --- FAQ accordion -------------------------------------------------------- */

.vr-faq { margin: 1.5rem 0; }

.vr-faq details {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	margin-bottom: .75rem;
	box-shadow: var(--vr-shadow-sm);
}

.vr-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1.1rem 3rem 1.1rem 1.35rem;
	font-weight: 650;
	font-size: 1.08rem;
	position: relative;
}

.vr-faq summary::-webkit-details-marker { display: none; }

.vr-faq summary::after {
	content: "";
	position: absolute;
	right: 1.4rem;
	top: 1.5rem;
	width: .6rem;
	height: .6rem;
	border-right: 2px solid var(--wp--preset--color--accent);
	border-bottom: 2px solid var(--wp--preset--color--accent);
	transform: rotate(45deg);
	transition: transform .2s var(--vr-ease);
}

.vr-faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }

.vr-faq summary:focus-visible { outline: 3px solid rgba(27, 111, 179, .35); outline-offset: 2px; border-radius: 12px; }

.vr-faq .vr-faq-answer { padding: 0 1.35rem 1.25rem; margin: 0; color: var(--wp--preset--color--muted); }

/* --- Closing call to action ----------------------------------------------- */

.vr-cta-band {
	background: var(--wp--preset--color--navy);
	color: #fff;
	border-radius: var(--vr-radius);
	padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem 2rem;
	align-items: center;
	justify-content: space-between;
	margin: 3rem 0 0;
}

.vr-cta-band p { margin: 0; color: #cbdcec; }

.vr-cta-band strong { display: block; color: #fff; font-size: 1.2rem; margin-bottom: .25rem; }

.vr-cta-band .wp-element-button,
.vr-cta-band a.vr-cta-button {
	background: var(--wp--preset--color--highlight);
	color: #1a1205;
	text-decoration: none;
	font-weight: 700;
	padding: .9rem 1.8rem;
	border-radius: 12px;
	white-space: nowrap;
	transition: transform .18s var(--vr-ease);
	display: inline-block;
}

.vr-cta-band a.vr-cta-button:hover { transform: translateY(-2px); }

/* --- Footer contact list -------------------------------------------------- */

.vr-site-footer .vr-contact-details li {
	border-bottom: 0;
	padding: .15rem 0 .65rem;
	font-size: var(--wp--preset--font-size--small);
}

.vr-site-footer .vr-contact-details strong {
	display: block;
	font-size: .72rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8fa6bd;
	margin-bottom: .15rem;
}

.vr-footer-nav-stacked { gap: .5rem; }

/* --- Package page --------------------------------------------------------- */

/* The product has no photograph, so the summary takes the whole column
   instead of floating beside an empty frame. (Removing WooCommerce's own
   content wrapper also removed the `.woocommerce` class these used to hang
   off, so they are matched on the product itself.) */
.vr-product-body div.product div.summary,
.vr-product-body div.product .entry-summary {
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

.vr-product-body div.product { display: block; }

.vr-product-body div.product::after { content: ""; display: table; clear: both; }

.vr-product-body .product_title { display: none; }

.vr-product-body .woocommerce-breadcrumb {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin-bottom: 1.5rem;
}

.vr-product-body p.price {
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--ink);
	margin: 0 0 1.5rem;
}

.vr-product-body .woocommerce-product-details__short-description {
	color: var(--wp--preset--color--muted);
	max-width: 46rem;
}

.vr-package-checks {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--vr-radius);
	padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
	box-shadow: var(--vr-shadow-sm);
	margin: 2rem 0;
}

.vr-package-checks h2 { margin-top: 0; }

.vr-product-body .product_meta { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); }

/* --- Short pages ---------------------------------------------------------- */

/* Without this a short page — 404, an empty cart — leaves a strip of
   background below the footer. */
html, body { height: auto; }

body.wp-site-blocks,
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main { flex: 1 0 auto; }

.wp-site-blocks > footer { flex: none; margin-block-start: 0 !important; }

.vr-site-footer { margin-top: 0; }

/* --- Mobile menu overlay -------------------------------------------------- */

/* The header aligns its nav right; in the full-screen overlay that pushes the
   items against the edge and clips the call-to-action pill. */
.wp-block-navigation__responsive-container.is-menu-open {
	padding: clamp(3rem, 8vw, 4.5rem) clamp(1.25rem, 6vw, 2.5rem) !important;
}

/* In the overlay the list turns vertical, so the header's right alignment
   becomes `align-items` — and it is set on a generated container class, which
   outranks a plain class selector. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list {
	align-items: center !important;
	justify-content: flex-start !important;
	width: 100%;
	gap: .35rem;
}

/* The list item is a column in the overlay, so horizontal placement is
   `align-items`, not `justify-content`. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	display: flex;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding: .85rem 0;
	font-size: 1.15rem;
}

.wp-block-navigation__responsive-container.is-menu-open .vr-nav-cta { margin-top: 1rem; }

/* WordPress zeroes the padding on nav links inside the overlay, which left the
   call-to-action's text touching the edge of its own pill. */
.wp-block-navigation__responsive-container.is-menu-open .vr-nav-cta a {
	padding: .9rem 2.2rem !important;
	font-size: 1.05rem;
}

/* --- Cart and checkout line items ----------------------------------------- */

/* These blocks read the image through the Store API, so the PHP filters that
   drop it elsewhere never reach them and WooCommerce's grey placeholder comes
   back. A report has no photograph; the name and price carry the row. */
.wc-block-cart-item__image,
.wc-block-components-order-summary-item__image {
	display: none !important;
}

/* The row is a table row, so the freed-up column has to be reclaimed by the
   cells rather than by a grid template — otherwise the product name collapses
   into an 84px column while the total takes 608. */
.wc-block-cart-items__row .wc-block-cart-item__product { width: 100%; }

.wc-block-cart-items__row .wc-block-cart-item__total { width: 1%; white-space: nowrap; }

.wc-block-components-order-summary-item { padding-left: 0; }