/*
 * Valley National Realty theme styles, layered on top of Bootstrap 5.
 *
 * Brand color variables (--vnr-* and --bs-primary/secondary/dark/danger) are
 * injected inline by inc/enqueue.php :: vnr_inline_brand_css() so they stay
 * Theme-Options-editable. This file holds the Phase 9 brand system: typography
 * (Playfair Display + Inter, self-hosted via fonts.css), the button system, the
 * header/offcanvas, the hero, and the homepage sections.
 */

:root {
	/* Warm Cream, the page background the client approved with the palette. */
	--vnr-cream: #f7f4ec;
	--vnr-cream-rgb: 247, 244, 236;
	--vnr-ink: #26332b;
	--vnr-body: #3d483f;
	--vnr-muted: #646d62;
	--vnr-border: #e6e0d3;
	--vnr-soft-bg: #f0ece1;

	/* Gold dark enough to pass as TEXT on a light band. --vnr-secondary-deep
	   is the lighter hover SURFACE and fails at small text sizes. Overridden
	   inline by vnr_inline_brand_css(); this is the value it derives from the
	   approved gold, kept here so the token exists before the inline block. */
	--vnr-secondary-text: #66532e;

	/*
	 * Sticky-chrome clearance. The sticky block is now the top bar AND the nav
	 * bar together, and the top bar can be switched off in Theme Options, so
	 * the height is not knowable from CSS. assets/js/theme.js measures
	 * #site-chrome and overwrites --vnr-header-h with the real value, which is
	 * why everything downstream reads the token instead of a literal.
	 *
	 * The value below is the no-JS fallback, added up from the nav bar alone:
	 *   .site-nav          padding .8rem x 2 = 25.6px
	 *   .navbar-brand__img max-height        = 52px
	 *   .site-header       border-bottom     =  1px
	 *                                        --------
	 *                                          78.6px  -> round up to 5rem
	 * .site-chrome--scrolled drops the logo to 44px (70.6px), so 5rem clears
	 * both states of the nav bar. 5rem + 1rem optical gutter = 6rem.
	 */
	/* Reading measure. Also set on .vnr-article__layout (which documents the
	   track arithmetic); declared here so archive headers and any future
	   text block can share the same line length. */
	--vnr-measure: 41rem;

	--vnr-header-h: 5rem;
	--vnr-sticky-top: calc(var(--vnr-header-h) + 1rem); /* 6rem / 96px */

	--bs-body-bg: var(--vnr-cream);
	--bs-body-color: var(--vnr-body);
	--bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--bs-heading-color: var(--vnr-primary);
	--bs-link-color: var(--vnr-primary);
	--bs-link-hover-color: var(--vnr-primary-deep);
	--bs-border-color: var(--vnr-border);
	--bs-light: var(--vnr-cream);
	--bs-light-rgb: 247, 244, 236;
}

body {
	color: var(--vnr-body);
	background-color: var(--vnr-cream);
	font-family: var(--bs-body-font-family);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* --- Typography -------------------------------------------------------- */

h1, h2, h3,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--vnr-primary);
}

h4, h5, h6 {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	color: var(--vnr-ink);
}

.vnr-serif {
	font-family: 'Playfair Display', Georgia, serif;
}

.vnr-eyebrow {
	display: inline-block;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--vnr-secondary-text);
}

/* Two-tone headline accent (maroon). */
.vnr-hl-accent {
	color: var(--vnr-accent);
}

/* --- Buttons ----------------------------------------------------------- */

.btn {
	--bs-btn-font-family: 'Inter', sans-serif;
	--bs-btn-font-weight: 600;

	/* Near-square, from the client's design comp. .btn-pill still overrides it
	   for genuine pills, which are a shape rather than a radius. */
	--bs-btn-border-radius: .125rem;
	--bs-btn-padding-x: 1.4rem;
	--bs-btn-padding-y: .7rem;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.btn-lg {
	--bs-btn-padding-x: 1.9rem;
	--bs-btn-padding-y: .85rem;
	--bs-btn-font-size: 1.02rem;
}

.btn-primary {
	--bs-btn-bg: var(--vnr-primary);
	--bs-btn-border-color: var(--vnr-primary);
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: var(--vnr-primary-deep);
	--bs-btn-hover-border-color: var(--vnr-primary-deep);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--vnr-primary-deep);
	--bs-btn-active-border-color: var(--vnr-primary-deep);
}

.btn-accent {
	--bs-btn-bg: var(--vnr-accent);
	--bs-btn-border-color: var(--vnr-accent);
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: var(--vnr-accent-deep);
	--bs-btn-hover-border-color: var(--vnr-accent-deep);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--vnr-accent-deep);
	--bs-btn-active-border-color: var(--vnr-accent-deep);
}

.btn-outline-primary {
	--bs-btn-color: var(--vnr-primary);
	--bs-btn-border-color: var(--vnr-primary);
	--bs-btn-hover-bg: var(--vnr-primary);
	--bs-btn-hover-border-color: var(--vnr-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--vnr-primary);
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(var(--vnr-primary-rgb), .18);
}

.btn-accent:hover {
	box-shadow: 0 10px 24px rgba(var(--vnr-accent-rgb), .24);
}

.btn-pill {
	--bs-btn-border-radius: 50rem;
}

.btn--caps {
	text-transform: uppercase;
	letter-spacing: .12em;
}

.btn .bi-arrow-right {
	transition: transform .18s ease;
}

.btn:hover .bi-arrow-right {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.btn,
	.btn .bi-arrow-right {
		transition: none;
	}

	.btn:hover,
	.btn:hover .bi-arrow-right {
		transform: none;
	}
}

/* --- Utilities --------------------------------------------------------- */

.letter-spaced {
	letter-spacing: .08em;
}

.object-fit-cover {
	object-fit: cover;
}

/* Visually-hidden honeypot field (kept out of the a11y tree, off-canvas). */
.vnr-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Section header ---------------------------------------------------- */

.section-kicker {
	letter-spacing: .18em;
	color: var(--vnr-secondary-text);
}

.section-divider {
	border-radius: 2px;
}

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

.site-footer a.link-light:hover,
.site-footer a.link-light:focus {
	color: var(--vnr-secondary) !important;
}

/* --- Prose (page/post content) ---------------------------------------- */

.vnr-prose {
	font-size: 1.05rem;
	line-height: 1.75;
}

.vnr-prose h2,
.vnr-prose h3 {
	margin-top: 2rem;
	font-weight: 700;
}

.vnr-prose img {
	max-width: 100%;
	height: auto;
	border-radius: .5rem;
}

/* --- Accessibility ----------------------------------------------------- */

a.visually-hidden-focusable:focus {
	z-index: 1080;
}

:focus-visible {
	/* Solid, not .45 alpha: that measured 2.10:1 and SC 1.4.11 needs 3:1. */
	outline: 3px solid var(--vnr-primary);
	outline-offset: 2px;
}

/*
 * Buttons need the rule restating. Bootstrap sets `outline: 0` on
 * .btn:focus-visible at the same specificity as the rule above and leans on a
 * translucent box-shadow instead, which this theme has already rejected once for
 * measuring 2.10:1. On .btn-accent and .btn-gold it is worse than faint: both are
 * theme variants with no --bs-btn-focus-shadow-rgb, so the custom property is
 * undefined, the rgba() is invalid, and the ring is not drawn at all. The header
 * call to action on every page had no focus indicator of any kind.
 *
 * Two rings rather than one, because these buttons sit on the white header and on
 * the dark green bands: the white spacer reads against a dark ground, the forest
 * outline reads against a light one, so one of the two is always visible and
 * SC 2.4.7 holds wherever the button is used.
 */
.btn:focus-visible {
	outline: 3px solid var(--vnr-primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #fff;
}

/* --- Properties (Phase 4 structural; final polish in Phase 9) ---------- */

.property-card {
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.property-card:hover,
.property-card:focus-within {
	transform: translateY(-3px);
}

.property-card:hover {
	box-shadow: 0 12px 30px rgba(22, 32, 43, .12) !important;
}

.property-card__media {
	background: var(--vnr-soft-bg);
}

.property-card__placeholder {
	position: absolute;
	inset: 0;
	font-size: 2.5rem;
}

.property-card__status {
	position: absolute;
	top: .75rem;
	left: .75rem;
	z-index: 2;
}

.property-card__eyebrow {
	letter-spacing: .08em;
}

/* Single property */
.property-single__back {
	color: var(--vnr-muted);
}

.property-single__back:hover,
.property-single__back:focus {
	color: var(--vnr-primary);
	text-decoration: underline;
}

.property-specs dt,
.property-specs dd {
	border-bottom: 1px solid var(--vnr-border);
}

.property-status {
	font-weight: 600;
	letter-spacing: .02em;
}

@media (min-width: 992px) {
	.property-single__panel {
		position: sticky;
		top: var(--vnr-sticky-top, 6rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.property-card {
		transition: none;
	}

	.property-card:hover,
	.property-card:focus-within {
		transform: none;
	}
}

/*
 * Property gallery carousel (0.12.0).
 *
 * The featured image and the gallery are one carousel at the top of a property
 * page. Bootstrap's default controls are white icons meant for a dark photo, so
 * they vanish on a bright exterior shot: both controls and the indicator strip
 * sit on their own scrim here instead of relying on the image behind them.
 */
.property-gallery {
	background: var(--vnr-soft-bg);
}

.property-gallery .carousel-control-prev,
.property-gallery .carousel-control-next {
	width: auto;
	padding: 0 1rem;
	opacity: 1;
}

.property-gallery .carousel-control-prev-icon,
.property-gallery .carousel-control-next-icon {
	width: 2.75rem;
	height: 2.75rem;
	padding: .75rem;
	border-radius: 50%;
	background-color: rgba(var(--vnr-dark-rgb), .55);
	background-size: 1.1rem 1.1rem;
	transition: background-color .18s ease;
}

.property-gallery .carousel-control-prev:hover .carousel-control-prev-icon,
.property-gallery .carousel-control-next:hover .carousel-control-next-icon,
.property-gallery .carousel-control-prev:focus-visible .carousel-control-prev-icon,
.property-gallery .carousel-control-next:focus-visible .carousel-control-next-icon {
	background-color: var(--vnr-primary);
}

/* A visible ring on the control itself, since the icon carries the background. */
.property-gallery .carousel-control-prev:focus-visible,
.property-gallery .carousel-control-next:focus-visible,
.property-gallery .carousel-indicators [data-bs-target]:focus-visible {
	outline: 3px solid var(--vnr-secondary);
	outline-offset: -3px;
}

.property-gallery .carousel-indicators {
	margin-bottom: .75rem;
}

.property-gallery .carousel-indicators [data-bs-target] {
	width: .625rem;
	height: .625rem;
	border: 0;
	border-radius: 50%;
	background-color: #fff;
	box-shadow: 0 1px 4px rgba(22, 32, 43, .45);
	opacity: .55;
}

.property-gallery .carousel-indicators .active {
	background-color: var(--vnr-secondary);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.property-gallery .carousel-control-prev-icon,
	.property-gallery .carousel-control-next-icon {
		transition: none;
	}
}

/*
 * Optional per-property identity: a mark and a link to a standalone site.
 * Hamilton West is the one that has both today. Both render nothing when the
 * fields are empty, so no other property gains a panel section.
 */
.property-single__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .75rem;
}

.property-single__logo {
	max-width: 11rem;
	max-height: 4.5rem;
	width: auto;
	height: auto;
}

.property-single__site {
	color: var(--vnr-primary);
	text-decoration: none;
}

.property-single__site:hover,
.property-single__site:focus-visible {
	color: var(--vnr-primary-deep);
	text-decoration: underline;
}

/* --- Property archive filters ----------------------------------------- */

.property-filters {
	background: var(--vnr-soft-bg);
	border: 1px solid var(--vnr-border);
	border-radius: .5rem;
	padding: 1rem 1.25rem;
}

/* --- Header: top bar + nav ---------------------------------------------- */

.site-topbar {
	background: var(--vnr-dark);
	color: rgba(255, 255, 255, .82);
	font-size: .82rem;
	padding: .5rem 0;
}

.site-topbar__item {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
}

.site-topbar__item i {
	color: var(--vnr-secondary);
	font-size: .9em;
}

.site-topbar__item:hover,
.site-topbar__item:focus {
	color: #fff;
}

.site-topbar__item--address {
	color: rgba(255, 255, 255, .68);
}

.site-header {
	background: #fff;
	border-bottom: 1px solid var(--vnr-border);
}

/* The top bar and the nav bar stick as one block, so the contact details do
   not slide away under the logo. Both children paint an opaque ground of their
   own (--vnr-dark and #fff), so the wrapper needs none. */
.site-chrome--sticky {
	position: sticky;
	top: 0;
	z-index: 1030;
	transition: box-shadow .2s ease;
}

.site-chrome--scrolled {
	box-shadow: 0 6px 24px rgba(22, 32, 43, .08);
}

.site-nav {
	padding: .8rem 0;
}

.navbar-brand__img {
	max-height: 52px;
	width: auto;
	display: block;
	transition: max-height .2s ease;
}

.site-chrome--scrolled .navbar-brand__img {
	max-height: 44px;
}

.navbar-brand__name {
	color: var(--vnr-primary);
	font-family: 'Playfair Display', Georgia, serif;
}

/* Hamburger (left of the logo, all breakpoints) */
.vnr-hamburger {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	min-height: 44px;
	padding: .4rem .55rem .4rem .3rem;
	background: transparent;
	border: 0;
	color: var(--vnr-primary);
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
}

.vnr-hamburger__lines {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 26px;
	height: 18px;
}

.vnr-hamburger__lines span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--vnr-primary);
	border-radius: 2px;
	transition: width .2s ease, background-color .2s ease;
}

.vnr-hamburger:hover .vnr-hamburger__lines span,
.vnr-hamburger:focus-visible .vnr-hamburger__lines span {
	background: var(--vnr-secondary-deep);
}

.vnr-hamburger:hover .vnr-hamburger__lines span:nth-child(2) {
	width: 65%;
}

.site-header__call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--vnr-border);
	border-radius: 50%;
	color: var(--vnr-primary);
	text-decoration: none;
}

.site-header__call:hover {
	background: var(--vnr-primary-soft);
}

/* --- Offcanvas menu ---------------------------------------------------- */

.vnr-offcanvas {
	width: 384px;
	max-width: 86vw;
	background: var(--vnr-cream);
	color: var(--vnr-ink);
	border-right: 4px solid var(--vnr-secondary);
}

.vnr-offcanvas__head {
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid var(--vnr-border);
}

.vnr-offcanvas__logo {
	max-height: 40px;
	width: auto;
}

.vnr-offcanvas__body {
	padding: 1.5rem;
}

/*
 * Offcanvas search. The panel is the primary navigation at every breakpoint, so
 * this is the one control every visitor can reach, and it sits above the nav
 * because searching is what you do when scanning the list has not worked.
 *
 * A single hairline box holding the field and the button, rather than two
 * separate controls: the panel is already a stack of large serif links and a
 * second pair of competing shapes at the top would fight them.
 */
/*
 * Room at the foot of the panel for the cookie notice, which is fixed to the
 * bottom of the viewport and would otherwise cover whatever the panel ends with.
 * Only while the notice is actually asking: it is in the markup of every page,
 * hidden until the browser finds no recorded choice.
 */
body:has(.vnr-consent:not([hidden])) .vnr-offcanvas__body {
	padding-bottom: 13rem;
}

@media (min-width: 768px) {
	body:has(.vnr-consent:not([hidden])) .vnr-offcanvas__body {
		padding-bottom: 8rem;
	}
}

.vnr-offcanvas__search {
	display: flex;
	align-items: stretch;
	margin-bottom: 1.5rem;
	border: 1px solid var(--vnr-border);
	border-radius: .125rem;
	background: #fff;
	transition: border-color .18s ease;
}

.vnr-offcanvas__search:focus-within {
	border-color: var(--vnr-primary);
}

.vnr-offcanvas__search .vnr-offcanvas__search-input.form-control {
	min-height: 44px;
	padding: .6rem .85rem;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--vnr-body);
	font-size: .95rem;
	box-shadow: none;
}

.vnr-offcanvas__search-input.form-control::placeholder {
	color: var(--vnr-muted);
}

/*
 * The field carries the focus ring on the wrapper above, so the input's own
 * outline would draw a second box inside the first.
 */
.vnr-offcanvas__search-input.form-control:focus {
	outline: 0;
	box-shadow: none;
}

.vnr-offcanvas__search-btn.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .85rem;
	border: 0;
	border-radius: 0;
	background: var(--vnr-primary);
	color: #fff;
	transition: background-color .18s ease;
}

.vnr-offcanvas__search-btn.btn:hover {
	background: var(--vnr-primary-deep);
	color: #fff;
	/* The house lift would shear the button out of its shared hairline box. */
	transform: none;
	box-shadow: none;
}

.vnr-offcanvas__item {
	border-bottom: 1px solid rgba(38, 51, 43, .08);
}

.vnr-offcanvas__link {
	position: relative;
	display: block;
	padding: .85rem 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.32rem;
	font-weight: 600;
	color: var(--vnr-primary);
	text-decoration: none;
	transition: color .18s ease, padding-left .18s ease;
}

.vnr-offcanvas__link::before {
	content: "";
	position: absolute;
	left: -1.5rem;
	top: 50%;
	width: 3px;
	height: 58%;
	background: var(--vnr-secondary);
	transform: translateY(-50%) scaleY(0);
	transform-origin: center;
	transition: transform .18s ease;
}

.vnr-offcanvas__link:hover,
.vnr-offcanvas__link:focus-visible,
.vnr-offcanvas__link.is-current {
	color: var(--vnr-accent);
	padding-left: .5rem;
}

.vnr-offcanvas__link:hover::before,
.vnr-offcanvas__link:focus-visible::before,
.vnr-offcanvas__link.is-current::before {
	transform: translateY(-50%) scaleY(1);
}

/*
 * A parent item is a link and a disclosure button on one row. The link keeps the
 * full-width hit area it always had; the button sits to its right and is sized
 * to WCAG 2.2 SC 2.5.8 (44px, comfortably over the 24px floor) because it is the
 * control a thumb reaches for on a phone.
 */
.vnr-offcanvas__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}

.vnr-offcanvas__row .vnr-offcanvas__link {
	flex: 1 1 auto;
}

.vnr-offcanvas__toggle {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* A faint ground, always on. Transparent until hover read as decoration
	   beside the heading rather than as the control that opens the section,
	   and there is no hover at all on the touch screens this drawer is
	   mostly used on. */
	background: rgba(38, 51, 43, .06);
	color: var(--vnr-primary);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}

.vnr-offcanvas__toggle:hover,
.vnr-offcanvas__toggle:focus-visible {
	background: rgba(38, 51, 43, .13);
	color: var(--vnr-accent);
}

.vnr-offcanvas__toggle:focus-visible {
	outline: 2px solid var(--vnr-primary);
	outline-offset: 2px;
}

/* The chevron points down when closed and up when open. */
.vnr-offcanvas__toggle i {
	display: block;
	transition: transform .2s ease;
}

.vnr-offcanvas__toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}

.vnr-offcanvas__submenu {
	padding-left: 1rem;
	margin-bottom: .25rem;
}

@media (prefers-reduced-motion: reduce) {
	.vnr-offcanvas__toggle,
	.vnr-offcanvas__toggle i {
		transition: none;
	}
}

.vnr-offcanvas__item--child .vnr-offcanvas__link {
	font-family: 'Inter', sans-serif;
	font-size: .98rem;
	font-weight: 500;
	padding: .45rem 0;
	color: var(--vnr-body);
}

.vnr-offcanvas__foot {
	padding-top: 1.75rem;
}

.vnr-offcanvas__label {
	margin-bottom: .8rem;
}

.vnr-offcanvas__contact {
	margin-bottom: 1.25rem;
}

.vnr-offcanvas__contact li {
	margin-bottom: .5rem;
}

.vnr-offcanvas__contact a,
.vnr-offcanvas__addr {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	color: var(--vnr-body);
	text-decoration: none;
	font-size: .95rem;
	line-height: 1.4;
}

.vnr-offcanvas__contact a:hover {
	color: var(--vnr-primary);
}

.vnr-offcanvas__contact i {
	color: var(--vnr-secondary-text);
	margin-top: .15rem;
}

/*
 * The mobile route to the tenant portal. The header link is hidden below lg, so
 * on a phone this is the only one. Outlined so it reads as secondary to the
 * maroon CTA directly above it.
 */
.vnr-offcanvas__portal.btn {
	--bs-btn-color: var(--vnr-primary);
	--bs-btn-border-color: var(--vnr-border);
	--bs-btn-bg: transparent;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--vnr-primary);
	--bs-btn-hover-border-color: var(--vnr-primary);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--vnr-primary-deep);
	--bs-btn-active-border-color: var(--vnr-primary-deep);
	--bs-btn-focus-shadow-rgb: var(--vnr-primary-rgb);
	font-weight: 600;
}

.vnr-offcanvas__social.social-links {
	margin-bottom: 1.25rem;
}

.vnr-offcanvas__social .social-link {
	background: transparent !important;
	border: 1px solid var(--vnr-border);
	color: var(--vnr-primary) !important;
}

.vnr-offcanvas__social .social-link:hover {
	background: var(--vnr-primary) !important;
	border-color: var(--vnr-primary);
	color: #fff !important;
}

.vnr-offcanvas__bars {
	display: flex;
	align-items: flex-end;
	gap: 6px;
	height: 32px;
	opacity: .55;
}

.vnr-offcanvas__bars span {
	width: 8px;
	background: linear-gradient(180deg, var(--vnr-secondary), rgba(var(--vnr-secondary-rgb), 0));
	border-radius: 3px 3px 0 0;
}

.vnr-offcanvas__bars span:nth-child(1) { height: 55%; }
.vnr-offcanvas__bars span:nth-child(2) { height: 100%; }
.vnr-offcanvas__bars span:nth-child(3) { height: 72%; }

.offcanvas-backdrop.show {
	opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
	.vnr-hamburger__lines span,
	.navbar-brand__img,
	.vnr-offcanvas__link,
	.vnr-offcanvas__link::before {
		transition: none;
	}
}

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

.vnr-hero {
	background: var(--vnr-cream);
	position: relative;
	overflow: hidden;
}

/* The slide is the positioning context for its full-bleed photo; the inner
   wrapper carries the padding/centering so JS can pin every slide-inner to the
   tallest slide's height (equal heights -> the carousel never jumps). */
.vnr-hero__slide {
	position: relative;
}

.vnr-hero__slide-inner {
	position: relative;
	padding: 3rem 0 5.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	.vnr-hero__carousel .carousel-item {
		transition: transform .8s cubic-bezier(.62, .04, .3, 1);
	}
}

.vnr-hero__content {
	position: relative;
	z-index: 2;
}

.vnr-hero__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	color: var(--vnr-primary);
	font-size: clamp(2rem, 6vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	margin-bottom: 1.25rem;
	overflow-wrap: break-word;
}

.vnr-hero__title .vnr-hl-accent {
	display: inline;
}

.vnr-hero__subtitle {
	font-family: 'Inter', sans-serif;
	font-size: 1.16rem;
	line-height: 1.6;
	color: var(--vnr-body);
	max-width: 38ch;
	margin-bottom: 1.75rem;
}

.vnr-hero__paths {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	margin-bottom: 2rem;
}

.vnr-hero__paths-divider {
	align-self: stretch;
	width: 1px;
	min-height: 48px;
	background: var(--vnr-secondary);
	opacity: .55;
}

.vnr-hero__chip {
	display: flex;
	align-items: center;
	gap: .8rem;
	max-width: 15rem;
	text-decoration: none;
}

.vnr-hero__chip-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 1.2rem;
	transition: transform .18s ease;
}

.vnr-hero__chip-icon--green {
	background: var(--vnr-primary);
	color: #fff;
}

.vnr-hero__chip-icon--gold {
	background: var(--vnr-secondary);
	color: var(--vnr-dark);
}

.vnr-hero__chip-label {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: .92rem;
	line-height: 1.25;
	color: var(--vnr-ink);
}

.vnr-hero__chip:hover .vnr-hero__chip-icon {
	transform: translateY(-2px);
}

.vnr-hero__chip:hover .vnr-hero__chip-label {
	color: var(--vnr-primary);
}

/* Full-bleed hero photo that dissolves into the cream. */
.vnr-hero__photo {
	background-size: cover;
	background-position: 58% center;
	background-repeat: no-repeat;
}

@media (max-width: 991.98px) {
	.vnr-hero__slide-inner {
		min-height: 640px;
		padding: 2.75rem 0 5.5rem;
	}

	/* Full-bleed photo behind the copy, faded into the cream so the headline
	   stays legible up top and the scene warms the lower half. */
	.vnr-hero__photo {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		background-position: 70% center;
	}

	.vnr-hero__photo--commercial {
		background-position: 74% center;
	}

	/* Slide 1 is a 2:1 file in a much taller box, so `cover` crops ~850px of
	   width on a phone. The people occupy the right half, so hold the crop
	   there or the frame is all empty floor. */
	.vnr-hero__photo--brand {
		background-position: 72% center;
	}

	/* Slide 3, daycare. Narrow screens crop hard (~37%-75% of the file at
	   430px), so sit left of the desktop framing to keep the teacher AND the
	   girl in shot rather than a sliver of the boy. */
	.vnr-hero__photo--childcare {
		background-position: 52% center;
	}

	.vnr-hero__photo--leasing {
		background-position: 62% center;
	}

	.vnr-hero__slide::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(
			180deg,
			var(--vnr-cream) 0%,
			rgba(var(--vnr-cream-rgb), .96) 26%,
			rgba(var(--vnr-cream-rgb), .62) 46%,
			rgba(var(--vnr-cream-rgb), .2) 66%,
			rgba(var(--vnr-cream-rgb), 0) 88%
		);
	}
}

@media (min-width: 992px) {
	/* Center the copy vertically inside the wrapper (a non-carousel-item, so it
	   never fights Bootstrap's .carousel-item display toggling). */
	.vnr-hero__slide-inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 40rem;
		padding: 4rem 0 8rem;
	}

	.vnr-hero__photo {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 56%;
		-webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .3) 9%, #000 30%);
		mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .3) 9%, #000 30%);
	}

	.vnr-hero__photo--commercial {
		background-position: 66% center;
	}

	.vnr-hero__photo--brand {
		background-position: 70% center;
	}

	.vnr-hero__photo--childcare {
		background-position: 60% center;
	}

	.vnr-hero__photo--leasing {
		background-position: 58% center;
	}
}

.vnr-hero__curve {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	line-height: 0;
	pointer-events: none;
	z-index: 3;
}

.vnr-hero__curve-svg {
	display: block;
	width: 100%;
	height: 84px;
}

@media (min-width: 992px) {
	.vnr-hero__curve-svg {
		height: 132px;
	}
}

/*
 * The lower half of the wave is the page background continuing under the hero,
 * so it tracks --vnr-cream. It was hardcoded #fff, which left a white band
 * between the wave and the first section on every page that uses the hero.
 */
.vnr-hero__curve-base {
	fill: var(--vnr-cream);
}

.vnr-hero__curve-fill {
	fill: var(--vnr-primary);
}

.vnr-hero__curve-line {
	fill: none;
	stroke: var(--vnr-secondary);
	stroke-width: 3;
	stroke-linecap: round;
}

.vnr-hero__curve-line--soft {
	stroke-width: 2;
	opacity: .5;
}

/*
 * The hero's control cluster: previous, the dots, next, centred as one group
 * above the wave. Bootstrap positions .carousel-indicators as a full-width
 * absolute strip with 15% side margins, which is why it is reset to static
 * here: inside a flex row those margins would shove the two arrows apart.
 */
.vnr-hero__controls {
	position: absolute;
	z-index: 4;
	bottom: 4rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: .35rem;
	/* One pill under the whole cluster. The dots are a 30 percent tint of the
	   brand green, which is legible on the cream half of the hero and almost
	   invisible on the photograph half; the slide that happens to be showing
	   should not decide whether the position indicator can be seen. It also
	   stops the arrows reading as two buttons floating beside three dots. */
	padding: .3rem .55rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .88);
	box-shadow: 0 2px 10px rgba(var(--vnr-dark-rgb), .14);
}

/* Carousel indicator dots: gold pill for the active one. */
.vnr-hero__dots {
	position: static;
	z-index: auto;
	margin: 0;
	padding: 0;
}

.vnr-hero__dots [data-bs-slide-to] {
	box-sizing: border-box;
	width: 11px;
	height: 11px;
	margin: 0 6px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--vnr-primary);
	opacity: .3;
	transition: opacity .25s ease, width .25s ease, background-color .25s ease;
}

.vnr-hero__dots [data-bs-slide-to]:hover {
	opacity: .6;
}

.vnr-hero__dots [data-bs-slide-to].active {
	width: 28px;
	border-radius: 999px;
	background-color: var(--vnr-secondary);
	opacity: 1;
}

.vnr-hero__dots [data-bs-slide-to]:focus-visible {
	outline: 2px solid var(--vnr-primary);
	outline-offset: 3px;
	opacity: 1;
}

/*
 * WCAG 2.2 SC 2.5.8 Target Size. The dot is 11px because that is the design, so
 * the hit area is extended with a centred pseudo-element rather than by padding
 * the button: the target reaches 24x24 and nothing on the page moves. The margin
 * goes to 7px so the pitch is 25px and two neighbouring targets do not overlap,
 * which would let a tap near the edge activate the wrong slide.
 */
.vnr-hero__dots [data-bs-slide-to] {
	position: relative;
	margin: 0 7px;
}

.vnr-hero__dots [data-bs-slide-to]::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	transform: translate(-50%, -50%);
}

@media (min-width: 992px) {
	.vnr-hero__controls {
		bottom: 6.5rem;
	}
}

/*
 * Prev/next. Same size, ground and focus ring as the play/pause button, so the
 * hero's controls read as one family even though they sit in two places.
 */
.vnr-hero__arrow {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* Transparent: the pill behind the cluster is the ground now, and a second
	   white circle on top of it just looked like a smudge. */
	background: transparent;
	color: var(--vnr-primary);
	font-size: .95rem;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.vnr-hero__arrow:hover {
	background: rgba(38, 51, 43, .1);
	color: var(--vnr-accent);
}

.vnr-hero__arrow:focus-visible {
	outline: 2px solid var(--vnr-primary);
	outline-offset: 3px;
}

@media (min-width: 992px) {
	.vnr-hero__arrow {
		width: 34px;
		height: 34px;
		font-size: 1.05rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vnr-hero__arrow {
		transition: none;
	}
}

/* Accessible play/pause toggle, bottom-right, aligned with the dots. */
.vnr-hero__toggle {
	position: absolute;
	z-index: 4;
	bottom: 4rem;
	right: 1.25rem;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .78);
	color: var(--vnr-primary);
	font-size: .9rem;
	box-shadow: 0 2px 8px rgba(var(--vnr-dark-rgb), .16);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.vnr-hero__toggle:hover {
	background: #fff;
	transform: scale(1.06);
}

.vnr-hero__toggle:focus-visible {
	outline: 2px solid var(--vnr-primary);
	outline-offset: 3px;
}

@media (min-width: 992px) {
	.vnr-hero__toggle {
		bottom: 6.5rem;
		right: 2rem;
		width: 38px;
		height: 38px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vnr-hero__chip-icon {
		transition: none;
	}
}

/* --- Section system + gold button ------------------------------------- */

.vnr-section {
	padding: 4rem 0;
}

@media (min-width: 992px) {
	.vnr-section {
		padding: 5.5rem 0;
	}
}

.section-title,
.vnr-section__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	color: var(--vnr-primary);
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	line-height: 1.12;
	/* Zero, not negative: negative tracking pulls the dot of an i into the
	   hook of a preceding f. See .vnr-fi below for the pair itself. */
	letter-spacing: 0;
}

/* Playfair's bold f hangs its hook over the next letter, so in "fi" the dot of
   the i lands under it, ligature or not. vnr_title_html() wraps the f; this
   is the smallest gap that clears the dot at display sizes. */
.vnr-fi {
	margin-right: .12em;
}

.section-divider {
	background: var(--vnr-secondary) !important;
	height: 3px;
	width: 64px;
}

.btn-gold {
	--bs-btn-bg: var(--vnr-secondary);
	--bs-btn-border-color: var(--vnr-secondary);
	--bs-btn-color: var(--vnr-dark);
	--bs-btn-hover-bg: var(--vnr-secondary-deep);
	--bs-btn-hover-border-color: var(--vnr-secondary-deep);
	--bs-btn-hover-color: var(--vnr-dark);
	--bs-btn-active-bg: var(--vnr-secondary-deep);
}

.btn-gold:hover {
	box-shadow: 0 10px 24px rgba(var(--vnr-secondary-rgb), .3);
}

/* --- Audience cards (path selector) ----------------------------------- */

.vnr-path-selector {
	padding: 3.5rem 0 4rem;
}

.vnr-path-card {
	background: #fff;
	border-radius: 1rem;
	box-shadow: 0 12px 34px rgba(22, 32, 43, .07);
	transition: transform .2s ease, box-shadow .2s ease;
}

.vnr-path-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 44px rgba(22, 32, 43, .12);
}

.vnr-path__icon {
	width: 60px;
	height: 60px;
	font-size: 1.5rem;
}

.vnr-path__icon--green {
	background: var(--vnr-primary);
	color: #fff;
}

.vnr-path__icon--gold {
	background: var(--vnr-secondary);
	color: var(--vnr-dark);
}

.vnr-path__title {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--vnr-primary);
}

/* Optional secondary card link (the Childcare card's 45F calculator). Reads as
   secondary to the outline button beside it while keeping a 44px tap target. */
.vnr-path__link2 {
	--bs-btn-color: var(--vnr-primary);
	--bs-btn-hover-color: var(--vnr-primary-deep);
	--bs-btn-font-weight: 600;
	--bs-btn-padding-x: .5rem;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

.vnr-path__link2:hover,
.vnr-path__link2:focus-visible {
	text-decoration: underline;
}

/* --- Features / values cards ------------------------------------------ */

.vnr-section--features .card {
	background: #fff;
	border-radius: .9rem;
	box-shadow: 0 10px 30px rgba(22, 32, 43, .06);
	transition: transform .2s ease, box-shadow .2s ease;
}

.vnr-section--features .card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(22, 32, 43, .1);
}

.vnr-feature__icon {
	background: var(--vnr-primary) !important;
	color: #fff !important;
}

/* --- Featured properties ---------------------------------------------- */

/*
 * Soft, not white. Now Leasing moved below Two Ways We Work in the 2026-09-23
 * round, which put it directly above Space for Every Kind of Business, and that
 * band is white: two white grounds in a row read as one long band with a gap in
 * it. The sequence is cream, soft, white, dark again. This class is only ever
 * the homepage band, so nothing else moves.
 */
.vnr-featured-properties {
	background: var(--vnr-soft-bg);
}

/* --- Section 45F band -------------------------------------------------- */

.vnr-45fband {
	padding: 2.5rem 0;
}

.vnr-45fband__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	background: var(--vnr-primary-soft);
	border: 1px solid rgba(var(--vnr-primary-rgb), .14);
	border-radius: 1.1rem;
	padding: 2rem 2.25rem;
}

.vnr-45fband__icon {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--vnr-primary);
	color: #fff;
	font-size: 1.55rem;
}

.vnr-45fband__text {
	flex: 1 1 320px;
}

.vnr-45fband__title {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--vnr-primary);
	font-size: 1.6rem;
	margin: .15rem 0 .4rem;
}

.vnr-45fband__desc {
	color: var(--vnr-body);
	max-width: 54ch;
	margin: 0;
	font-size: .98rem;
}

.vnr-45fband__cta {
	flex: 0 0 auto;
}

/* --- Insights ---------------------------------------------------------- */

.vnr-insights {
	background: #fff;
}

.vnr-insight {
	background: #fff;
	border-radius: .9rem;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(22, 32, 43, .06);
	transition: transform .2s ease, box-shadow .2s ease;
}

.vnr-insight:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(22, 32, 43, .12);
}

.vnr-insight__media {
	background: var(--vnr-soft-bg);
}

.vnr-insight__ph {
	position: absolute;
	inset: 0;
	color: var(--vnr-secondary);
	font-size: 2rem;
}

.vnr-insight__cat {
	color: var(--vnr-secondary-text);
	margin-bottom: .4rem;
}

.vnr-insight__title {
	font-family: 'Playfair Display', Georgia, serif;
}

.vnr-insight__title a {
	color: var(--vnr-primary);
}

.vnr-insight:hover .vnr-insight__title a {
	color: var(--vnr-accent);
}

/* --- Closing CTA band -------------------------------------------------- */

.vnr-ctaband {
	background: var(--vnr-dark);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.vnr-ctaband__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}

.vnr-ctaband__text {
	flex: 1 1 340px;
}

.vnr-ctaband__title {
	font-family: 'Playfair Display', Georgia, serif;
	color: #fff;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	margin: 0 0 .5rem;
}

.vnr-ctaband__desc {
	color: rgba(255, 255, 255, .75);
	max-width: 54ch;
	margin: 0;
}

.vnr-ctaband__bars {
	position: absolute;
	right: 6%;
	bottom: -8px;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	height: 120px;
	opacity: .14;
	z-index: 1;
}

.vnr-ctaband__bars span {
	width: 16px;
	background: linear-gradient(180deg, var(--vnr-secondary), rgba(var(--vnr-secondary-rgb), 0));
	border-radius: 4px 4px 0 0;
}

.vnr-ctaband__bars span:nth-child(1) { height: 60%; }
.vnr-ctaband__bars span:nth-child(2) { height: 100%; }
.vnr-ctaband__bars span:nth-child(3) { height: 78%; }

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

.site-footer {
	background: var(--vnr-dark);
	color: rgba(255, 255, 255, .72);
	padding: 4.5rem 0 1.5rem;
	font-size: .95rem;
}

.site-footer__main {
	padding-bottom: 2.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.site-footer__wordmark {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	color: #fff;
	font-size: 1.55rem;
}

.site-footer__logo {
	max-height: 48px;
	width: auto;
}

.site-footer__tagline {
	color: rgba(255, 255, 255, .6);
	max-width: 34ch;
}

.site-footer__heading {
	color: var(--vnr-secondary);
	margin-bottom: 1rem;
}

.site-footer__links li {
	margin-bottom: .55rem;
}

.site-footer__links a,
.site-footer__contact a,
.site-footer__addr {
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	transition: color .15s ease;
}

.site-footer__links a:hover,
.site-footer__contact a:hover {
	color: var(--vnr-secondary);
}

.site-footer__contact li {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	margin-bottom: .5rem;
}

.site-footer__contact i {
	color: var(--vnr-secondary);
	margin-top: .15rem;
}

.site-footer__social {
	margin-top: .25rem;
}

.site-footer__social .social-link {
	background: rgba(255, 255, 255, .08) !important;
	color: #fff !important;
}

.site-footer__social .social-link:hover {
	background: var(--vnr-secondary) !important;
	color: var(--vnr-dark) !important;
}

.site-footer__connect-note {
	color: rgba(255, 255, 255, .6);
	max-width: 34ch;
	margin-bottom: 1rem;
}

.site-footer__newsletter-group {
	display: flex;
	gap: .5rem;
}

.site-footer__newsletter .form-control {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .16);
	color: #fff;
}

.site-footer__newsletter .form-control::placeholder {
	color: rgba(255, 255, 255, .45);
}

.site-footer__newsletter .form-control:focus {
	background: rgba(255, 255, 255, .1);
	border-color: var(--vnr-secondary);
	box-shadow: none;
	color: #fff;
}

/*
 * The skip link's target. main only takes focus programmatically, from the skip
 * link, so a ring around the whole page body would be noise: the reader was
 * just sent here deliberately. Every element a visitor can actually tab to
 * keeps its own indicator.
 */
main[tabindex="-1"]:focus {
	outline: none;
}

.site-footer__signup-note {
	font-size: .9rem;
	color: rgba(255, 255, 255, .72);
	margin-bottom: 0;
}

.site-footer__signup-note--error {
	color: #f3c2c2;
}

/*
 * Partner sites. Sits above the legal bar and takes a hairline so it reads as a
 * separate band from the link columns without adding another heading weight.
 */
.site-footer__partners {
	padding-top: 1.75rem;
	margin-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.site-footer__partner-list {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2rem;
	margin: 0;
}

.site-footer__partner-list a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: rgba(255, 255, 255, .72);
	text-decoration: none;
	font-size: .92rem;
	transition: color .15s ease;
}

.site-footer__partner-list a:hover,
.site-footer__partner-list a:focus-visible {
	color: var(--vnr-secondary);
}

.site-footer__partner-list .bi {
	font-size: .78em;
	opacity: .7;
}

.site-footer__bar {
	padding-top: 1.5rem;
	font-size: .86rem;
	color: rgba(255, 255, 255, .55);
}

.site-footer__legal-links a {
	color: rgba(255, 255, 255, .55);
	text-decoration: none;
	margin-left: 1.1rem;
}

.site-footer__legal-links a:hover {
	color: var(--vnr-secondary);
}

.site-footer__disclaimer {
	color: rgba(255, 255, 255, .4);
	font-size: .8rem;
	margin-top: 1rem;
	max-width: 70ch;
}

.site-footer__credit {
	text-align: center;
	padding-top: 1.25rem;
	margin-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .82rem;
	color: rgba(255, 255, 255, .5);
}

/*
 * SC 1.4.1 Use of Color. This sits in a line of plain text, so with the
 * underline removed the only thing marking it as a link was its colour.
 */
.site-footer__credit-link {
	color: rgba(255, 255, 255, .7);
	text-decoration: underline;
	text-underline-offset: .2em;
	text-decoration-thickness: 1px;
}

.site-footer__credit-link:hover {
	color: var(--vnr-secondary);
}

@media (prefers-reduced-motion: reduce) {
	.vnr-path-card,
	.vnr-section--features .card,
	.vnr-insight {
		transition: none;
	}

	.vnr-path-card:hover,
	.vnr-section--features .card:hover,
	.vnr-insight:hover {
		transform: none;
	}
}

/* --- Header contact (phone top-right + compact CTA) ------------------- */

.site-topbar__lead {
	color: rgba(255, 255, 255, .7);
}

.site-topbar__contact {
	color: rgba(255, 255, 255, .82);
}

.site-header__phone {
	gap: .6rem;
	color: var(--vnr-primary);
	text-decoration: none;
}

.site-header__phone-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--vnr-primary-soft);
	color: var(--vnr-primary);
	font-size: .92rem;
	transition: background-color .18s ease, color .18s ease;
}

.site-header__phone-text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.site-header__phone-label {
	font-family: 'Inter', sans-serif;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vnr-muted);
}

.site-header__phone-num {
	font-family: 'Inter', sans-serif;
	font-size: .95rem;
	font-weight: 700;
	color: var(--vnr-primary);
}

.site-header__phone:hover .site-header__phone-icon,
.site-header__phone:focus-visible .site-header__phone-icon {
	background: var(--vnr-primary);
	color: #fff;
}

.site-header__phone:hover .site-header__phone-num {
	color: var(--vnr-primary-deep);
}

.site-header__cta.btn {
	--bs-btn-padding-x: 1rem;
	--bs-btn-padding-y: .44rem;
	--bs-btn-font-size: .8rem;
	font-weight: 600;
}

/*
 * Tenant Portal (0.12.0). An outline companion to the maroon CTA rather than a
 * second solid button, so the header keeps one primary action. Styled through
 * Bootstrap's own button variables rather than by overriding .btn selectors.
 * Forest green on the white header measures 7.1:1.
 */
.site-header__portal.btn {
	--bs-btn-padding-x: 1rem;
	--bs-btn-padding-y: .44rem;
	--bs-btn-font-size: .8rem;
	--bs-btn-color: var(--vnr-primary);
	--bs-btn-border-color: var(--vnr-border);
	--bs-btn-bg: transparent;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--vnr-primary);
	--bs-btn-hover-border-color: var(--vnr-primary);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--vnr-primary-deep);
	--bs-btn-active-border-color: var(--vnr-primary-deep);
	--bs-btn-focus-shadow-rgb: var(--vnr-primary-rgb);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
	.site-header__phone-icon {
		transition: none;
	}
}

/* --- Property types strip --------------------------------------------- */

.vnr-types {
	padding: 3rem 0;
	background: #fff;
}

.vnr-types__title {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--vnr-primary);
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.vnr-types__grid {
	display: grid;
	/*
	 * Intrinsic, not a fixed track count. The strip is built from the Property
	 * Types taxonomy plus Build to Suit, so the item count is whatever the client
	 * has created: at eight items a declared six-up left two pills alone on a
	 * second row with 875px of empty cream beside them. auto-fit fills whatever
	 * a row can hold and never strands a short row against a declared count.
	 */
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1rem;
}

@media (max-width: 767.98px) {
	.vnr-types__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 419.98px) {
	.vnr-types__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.vnr-types__pill {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .6rem;
	padding: 1.25rem .75rem;
	border: 1px solid var(--vnr-border);
	border-radius: .85rem;
	background: var(--vnr-cream);
	text-decoration: none;
	text-align: center;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.vnr-types__pill:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 30px rgba(22, 32, 43, .1);
	border-color: var(--vnr-secondary);
}

.vnr-types__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--vnr-primary-soft);
	color: var(--vnr-primary);
	font-size: 1.3rem;
	transition: background-color .18s ease, color .18s ease;
}

.vnr-types__pill:hover .vnr-types__icon {
	background: var(--vnr-primary);
	color: #fff;
}

.vnr-types__label {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: .92rem;
	color: var(--vnr-ink);
}

/* --- Stats band ------------------------------------------------------- */

.vnr-stats {
	background: var(--vnr-dark);
	color: #fff;
	padding: 3.25rem 0;
}

.vnr-stat {
	position: relative;
}

.vnr-stat__value {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	color: #fff;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	line-height: 1.1;
}

.vnr-stat__label {
	font-family: 'Inter', sans-serif;
	font-size: .85rem;
	letter-spacing: .04em;
	color: var(--vnr-secondary);
	margin-top: .4rem;
}

.vnr-stat:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 15%;
	right: 0;
	width: 1px;
	height: 70%;
	background: rgba(255, 255, 255, .12);
}

@media (max-width: 991.98px) {
	.vnr-stat:nth-child(2)::after {
		display: none;
	}
}

/* --- Featured properties polish --------------------------------------- */

.vnr-featured-properties__head {
	margin-bottom: 3rem;
}

.vnr-featured-properties .property-card__media {
	overflow: hidden;
}

.vnr-featured-properties .property-card__media img {
	transition: transform .4s ease;
}

.vnr-featured-properties .property-card:hover .property-card__media img {
	transform: scale(1.05);
}

/*
 * Compact homepage availabilities (0.12.0).
 *
 * The client asked for the band to stop dominating the homepage. Three levers,
 * all scoped to this section so the property archive keeps the taller card:
 * shallower band padding, a wider 16:9 crop in place of the archive's 4:3, and
 * tighter card padding with a smaller title.
 *
 * The aspect ratio has to be re-declared rather than overridden, because
 * Bootstrap's .ratio-4x3 sets --bs-aspect-ratio on the element itself and an
 * inherited value never beats one set locally.
 */
.vnr-featured-properties--compact {
	padding: 3rem 0;
}

@media (min-width: 992px) {
	.vnr-featured-properties--compact {
		padding: 4rem 0;
	}
}

.vnr-featured-properties--compact .vnr-featured-properties__head {
	margin-bottom: 2rem;
}

.vnr-featured-properties--compact .property-card__media.ratio-4x3 {
	--bs-aspect-ratio: 56.25%;
}

.vnr-featured-properties--compact .property-card .card-body {
	padding: 1.1rem 1.25rem 1.25rem;
}

.vnr-featured-properties--compact .property-card__title {
	font-size: 1.0625rem;
}

.vnr-featured-properties--compact .property-card__location {
	margin-bottom: .75rem;
}

.vnr-featured-properties--compact .property-card__specs {
	gap: 1.5rem;
	padding-top: .75rem;
}

/* --- Scroll reveal ---------------------------------------------------- */

.vnr-js .vnr-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .6s ease, transform .6s ease;
}

.vnr-js .vnr-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.vnr-js .vnr-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.vnr-types__pill,
	.vnr-types__icon,
	.vnr-service {
		transition: none;
	}

	.vnr-types__pill:hover,
	.vnr-service:hover {
		transform: none;
	}
}

/* --- Mobile horizontal carousel (Local Roots values + Stats band) -------
   On phones/tablets these 4-up rows become a single swipeable row that also
   auto-scrolls gently left-and-right (see .vnr-marquee in theme.js). Desktop
   is unaffected (all rules live inside the max-width query). */
@media (max-width: 991.98px) {
	.vnr-marquee {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		margin-left: 0;
		margin-right: 0;
		padding-bottom: .25rem;
		--bs-gutter-x: 0;
		gap: 1rem;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.vnr-marquee::-webkit-scrollbar {
		display: none;
	}

	.vnr-marquee > .vnr-marquee__item {
		flex: 0 0 auto;
		margin-top: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.vnr-section--features .vnr-marquee__item {
		width: min(80%, 320px);
	}

	.vnr-stats .vnr-marquee__item {
		width: min(46%, 210px);
	}
}

/* --- Insights: prose system, article, archive (Phase 9.9) -------------- */

/*
 * .vnr-prose is shared by the single post, page.php, the property overview and
 * sections/intro.php, so everything here is width-agnostic. The measure cap
 * lives on .vnr-article__body below, which only the single post uses.
 */

.vnr-prose {
	color: var(--vnr-body);
}

.vnr-prose > *:first-child {
	margin-top: 0;
}

.vnr-prose p {
	margin-bottom: 1.35rem;
}

.vnr-prose h2 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.6rem, 2.6vw, 2rem);
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--vnr-primary);
	margin-top: 2.75rem;
	margin-bottom: .9rem;
}

.vnr-prose h3 {
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.3rem, 2vw, 1.55rem);
	line-height: 1.25;
	color: var(--vnr-primary);
	margin-top: 2.25rem;
	margin-bottom: .75rem;
}

.vnr-prose h4,
.vnr-prose h5,
.vnr-prose h6 {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	color: var(--vnr-ink);
	margin-top: 1.9rem;
	margin-bottom: .6rem;
}

.vnr-prose h4 {
	font-size: 1.12rem;
}

.vnr-prose h5 {
	font-size: 1rem;
}

.vnr-prose h6 {
	font-size: .92rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.vnr-prose a {
	color: var(--vnr-primary);
	text-decoration: underline;
	text-decoration-thickness: .07em;
	text-underline-offset: .18em;
	text-decoration-color: rgba(var(--vnr-secondary-rgb), .7);
	transition: color .18s ease, text-decoration-color .18s ease;
}

.vnr-prose a:hover,
.vnr-prose a:focus-visible {
	color: var(--vnr-accent);
	text-decoration-color: currentcolor;
}

.vnr-prose ul,
.vnr-prose ol {
	margin-bottom: 1.35rem;
	padding-left: 1.4rem;
}

.vnr-prose li {
	margin-bottom: .45rem;
}

.vnr-prose li::marker {
	color: var(--vnr-secondary-text);
	font-weight: 700;
}

.vnr-prose blockquote {
	margin: 2.25rem 0;
	padding: .25rem 0 .25rem 1.5rem;
	border-left: 3px solid var(--vnr-secondary);
	font-family: 'Playfair Display', Georgia, serif;
	font-size: clamp(1.2rem, 2vw, 1.4rem);
	line-height: 1.5;
	color: var(--vnr-primary);
}

.vnr-prose blockquote p:last-child {
	margin-bottom: 0;
}

.vnr-prose blockquote cite,
.vnr-prose blockquote footer {
	display: block;
	margin-top: .75rem;
	font-family: 'Inter', sans-serif;
	font-size: .9rem;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vnr-body);
}

.vnr-prose figure {
	margin: 2.25rem 0;
}

.vnr-prose figcaption {
	margin-top: .65rem;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--vnr-body);
	text-align: center;
}

.vnr-prose table {
	display: block;
	width: 100%;
	overflow-x: auto;
	margin: 2rem 0;
	border-collapse: collapse;
	font-size: .95rem;
}

.vnr-prose th,
.vnr-prose td {
	padding: .7rem .9rem;
	text-align: left;
	border-bottom: 1px solid var(--vnr-border);
	vertical-align: top;
}

.vnr-prose th {
	background: var(--vnr-soft-bg);
	color: var(--vnr-ink);
	font-weight: 700;
}

.vnr-prose code {
	font-size: .9em;
	padding: .15em .4em;
	border-radius: .25rem;
	background: var(--vnr-soft-bg);
	color: var(--vnr-ink);
}

.vnr-prose pre {
	margin: 2rem 0;
	padding: 1.1rem 1.25rem;
	border-radius: .5rem;
	overflow-x: auto;
	background: var(--vnr-dark);
	color: var(--vnr-cream);
}

.vnr-prose pre code {
	padding: 0;
	background: none;
	color: inherit;
}

.vnr-prose hr {
	margin: 2.75rem 0;
	border: 0;
	height: 1px;
	background: var(--vnr-border);
	opacity: 1;
}

/* --- Single post ------------------------------------------------------- */

.vnr-article__head {
	/* Top space now lives on the grid so the article column and the rail
	   start on the same baseline. */
	padding: 0;
}

.vnr-article__cat {
	margin-bottom: .5rem;
	transition: color .18s ease;
}

a.vnr-article__cat:hover,
a.vnr-article__cat:focus-visible {
	color: var(--vnr-primary);
}

.vnr-article__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(2.1rem, 4.4vw, 3.25rem);
	line-height: 1.1;
	letter-spacing: -.015em;
	color: var(--vnr-primary);
	margin-bottom: 1rem;
}

.vnr-article__deck {
	font-size: clamp(1.1rem, 1.6vw, 1.28rem);
	line-height: 1.6;
	color: var(--vnr-body);
	margin-bottom: 0;
}

.vnr-article__meta {
	margin-top: 1.75rem;
	padding: .85rem 0;
	border-top: 1px solid var(--vnr-border);
	border-bottom: 1px solid var(--vnr-border);
}

.vnr-article__byline {
	color: var(--vnr-body);
}

.vnr-share__link {
	width: 2.35rem;
	height: 2.35rem;
	border: 1px solid var(--vnr-border);
	border-radius: 50%;
	background: #fff;
	color: var(--vnr-primary);
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.vnr-share__link:hover,
.vnr-share__link:focus-visible {
	background: var(--vnr-primary);
	border-color: var(--vnr-primary);
	color: #fff;
}

.vnr-article__hero {
	margin: 2.75rem 0 3rem;
}

.vnr-article__hero-img {
	height: auto;
	border-radius: .9rem;
	box-shadow: 0 14px 40px rgba(22, 32, 43, .12);
}

/*
 * `margin-inline: auto` here was half the reported margin bug. The wrapper is
 * now the full article column; the 41rem measure moved onto its children (see
 * the "Insights single" block at the end of this file) so figures, tables and
 * 16:9 embeds get the whole column while text stays at ~77 characters.
 */
.vnr-article__body {
	max-width: none;
	margin-inline: 0;
	font-size: 1.15rem;
	line-height: 1.75;
}

.vnr-article__body > p:first-of-type:not(.vnr-subhead):not(.vnr-runin) {
	font-size: 1.28rem;
	line-height: 1.65;
	color: var(--vnr-ink);
}

.vnr-article__pages {
	font-weight: 600;
	color: var(--vnr-body);
}

.vnr-authorcard {
	max-width: 100%;
	margin: 3.25rem 0 0;
	padding: 1.5rem 1.75rem;
	border-radius: .9rem;
	border-left: 3px solid var(--vnr-secondary);
	background: var(--vnr-soft-bg);
}

.vnr-authorcard__body {
	flex: 1 1 14rem;
	min-width: 0;
}

.vnr-authorcard__name {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--vnr-primary);
}

.vnr-authorcard__bio {
	line-height: 1.6;
}

.vnr-related {
	background: var(--vnr-soft-bg);
}

/* --- Insights archive + index ----------------------------------------- */

.vnr-archive__head {
	padding: 2.75rem 0 2.25rem;
}

/* The header already supplies the top breathing room. */
.vnr-archive {
	padding-top: 2.5rem;
}

@media (min-width: 992px) {
	.vnr-archive {
		padding-top: 3rem;
	}
}

.vnr-archive__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(2.1rem, 4vw, 3rem);
	line-height: 1.12;
	letter-spacing: -.015em;
	color: var(--vnr-primary);
	margin: .35rem 0 0;
}

.vnr-archive__desc {
	margin-top: 1rem;
	font-size: 1.08rem;
	line-height: 1.65;
	color: var(--vnr-body);
}

.vnr-archive__desc p:last-child {
	margin-bottom: 0;
}

.vnr-catnav {
	margin-bottom: 2.75rem;
}

.vnr-catnav__link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem 1rem;
	border: 1px solid var(--vnr-border);
	border-radius: 50rem;
	background: #fff;
	color: var(--vnr-primary);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.vnr-catnav__link:hover,
.vnr-catnav__link:focus-visible {
	border-color: var(--vnr-primary);
	background: rgba(var(--vnr-primary-rgb), .07);
	color: var(--vnr-primary);
}

.vnr-catnav__link.is-current {
	background: var(--vnr-primary);
	border-color: var(--vnr-primary);
	color: #fff;
}

.vnr-catnav__count {
	font-size: .75rem;
	font-weight: 600;
	color: var(--vnr-body);
}

.vnr-catnav__link.is-current .vnr-catnav__count {
	color: rgba(255, 255, 255, .8);
}

/* --- Lead story card --------------------------------------------------- */

.vnr-lead {
	background: #fff;
	border-radius: .9rem;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(22, 32, 43, .06);
	transition: transform .2s ease, box-shadow .2s ease;
}

.vnr-lead:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(22, 32, 43, .12);
}

.vnr-lead__media {
	background: var(--vnr-soft-bg);
	min-height: 15rem;
}

.vnr-lead__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(1.55rem, 2.6vw, 2.1rem);
	line-height: 1.16;
	letter-spacing: -.01em;
}

.vnr-lead__title a {
	color: var(--vnr-primary);
}

.vnr-lead:hover .vnr-lead__title a {
	color: var(--vnr-accent);
}

.vnr-lead__excerpt {
	font-size: 1.02rem;
	line-height: 1.65;
}

@media (min-width: 992px) {
	.vnr-lead__media {
		min-height: 100%;
	}
}

/* --- Pagination -------------------------------------------------------- */

.navigation.pagination {
	margin-top: 3.5rem;
}

.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .45rem;
}

.navigation.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	min-width: 2.6rem;
	height: 2.6rem;
	padding: 0 .8rem;
	border: 1px solid var(--vnr-border);
	border-radius: .5rem;
	background: #fff;
	color: var(--vnr-primary);
	font-weight: 600;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.navigation.pagination a.page-numbers:hover,
.navigation.pagination a.page-numbers:focus-visible {
	border-color: var(--vnr-primary);
	background: rgba(var(--vnr-primary-rgb), .07);
}

.navigation.pagination .page-numbers.current {
	background: var(--vnr-primary);
	border-color: var(--vnr-primary);
	color: #fff;
}

.navigation.pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* --- Empty state ------------------------------------------------------- */

.vnr-empty {
	padding: 3.5rem 0;
}

.vnr-empty__icon {
	font-size: 2.5rem;
	color: var(--vnr-secondary-text);
}

/* --- Interior page header (was invisible: bg-light == body cream) ------ */

.page-header {
	padding: 2.75rem 0 3rem;
	background: var(--vnr-soft-bg);
	border-bottom: 1px solid var(--vnr-border);
}

.page-header__lead {
	max-width: 70ch;
	color: var(--vnr-body);
}

@media (prefers-reduced-motion: reduce) {

	.vnr-lead,
	.vnr-catnav__link,
	.vnr-share__link,
	.vnr-prose a,
	.vnr-article__cat,
	.navigation.pagination .page-numbers {
		transition: none;
	}

	.vnr-lead:hover {
		transform: none;
	}
}

/*
 * WordPress core emits .screen-reader-text (pagination headings, the search
 * form label, core widgets). The theme only ever defined Bootstrap's
 * .visually-hidden, so those strings rendered on screen.
 */
.screen-reader-text {
	position: absolute !important; /* beats layout utilities on the same node */
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	position: static !important; /* pair for the rule above */
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

/* =========================================================================
   Insights single: one container, one grid, one left edge (0.9.10)
   =========================================================================

   TRACK BUDGET. Bootstrap 5.3.8 gives `.container` a fixed pixel max-width at
   every breakpoint >= 992 and a --bs-gutter-x of 1.5rem, so the content box is
   a known constant and every column below is a subtraction:

     >=1400   1320 - 24 = 1296  - 368 rail - 72 gap = 856 article column
     >=1200   1140 - 24 = 1116  - 320 rail - 56 gap = 740 article column
     >= 992    960 - 24 =  936  - 272 rail - 48 gap = 616 article column

   The article text fills that column edge to edge (client decision, 0.9.10):
   both its left and its right edge are set by the same .container the header
   and footer use. Line length is therefore the column width: ~100 characters
   at 1320, ~87 at 1140, ~72 at 960.

   --vnr-measure survives as a token for the one place a cap is still right:
   the archive category description, which would otherwise set across the whole
   1296px container.

   Tokens live on .vnr-article__layout, the grid element itself, so a template
   that omits a wrapper class cannot lose them. Every consumer still carries a
   literal fallback.
   ========================================================================= */
.vnr-article__layout {
	--vnr-measure: 41rem;
	--vnr-rail-w: 0rem;
	--vnr-rail-gap: 0rem;

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: 3rem;
	padding-block: 2.5rem 0;
}

@media (min-width: 992px) {

	.vnr-article__layout {
		--vnr-rail-w: 17rem;
		--vnr-rail-gap: 3rem;

		grid-template-columns: minmax(0, 1fr) var(--vnr-rail-w, 17rem);
		column-gap: var(--vnr-rail-gap, 3rem);
		row-gap: 0;
		padding-block: 3rem 0;
	}
}

@media (min-width: 1200px) {

	.vnr-article__layout {
		--vnr-rail-w: 20rem;
		--vnr-rail-gap: 3.5rem;
	}
}

@media (min-width: 1400px) {

	.vnr-article__layout {
		--vnr-rail-w: 23rem;
		--vnr-rail-gap: 4.5rem;
	}
}

/* minmax(0, 1fr) above plus this guarantees a wide <table> or <pre> cannot
   blow the track out and push the rail off the container edge. */
.vnr-article {
	min-width: 0;
}

/* --- Column width ------------------------------------------------------ *
 * Client decision (0.9.10): the article header and body run the FULL width of
 * the article column rather than being capped at a reading measure, so the text
 * block's left AND right edges are set by the container, the same one the
 * header and footer use.
 *
 * Everything is left-aligned (`margin-inline` untouched), so the existing
 * (0,1,1) shorthands on `.vnr-prose blockquote` / `hr` / `pre` (margin: X 0)
 * stay correct and cannot bring back the mismatched left edge.
 *
 * --vnr-measure is retained as a token and still used by the archive
 * description, where a category blurb would otherwise run the full 1296px.
 * ---------------------------------------------------------------------- */

.vnr-article__head > *,
.vnr-prose.vnr-article__body > *,
.vnr-article__pages {
	max-width: 100%;
}

.vnr-article__hero {
	width: 100%;
	max-width: none;
}

/* --- Density modifiers ------------------------------------------------- *
 * Set by vnr_article_density(). The template was designed for a longread, but
 * the median imported post is well under 120 words, so the empty-looking page
 * is the common case.
 *
 * The `vnr-hero` size is registered 1920x1080 HARD CROPPED (inc/setup.php:51),
 * i.e. already 16:9, so `aspect-ratio: 16 / 9` here would crop nothing. A hard
 * max-height is what actually shortens it: 856 x 9/16 = 481px -> 352px.
 * ---------------------------------------------------------------------- */

.vnr-article--brief .vnr-article__title {
	font-size: clamp(1.9rem, 3.2vw, 2.5rem);
}

.vnr-article--brief .vnr-article__hero {
	margin: 2rem 0 2.5rem;
}

.vnr-article--brief .vnr-article__hero-img {
	max-height: 22rem;
	object-fit: cover;
}

/* Bare-embed post: the hero is suppressed in PHP (see single.php) so the image
   is never downloaded; the body goes full column so the 16:9 embed leads. */
.vnr-article--media .vnr-prose.vnr-article__body > * {
	max-width: none;
}

/* --- Anchored headings ------------------------------------------------- *
 * WCAG 2.2 SC 2.4.11 Focus Not Obscured (Minimum), AA. Without this, following
 * a rail contents link, or tabbing to a link near the top of the viewport,
 * parks the target underneath the sticky header. `scroll-padding-top` on the
 * scrolling element is honoured by fragment navigation, scrollIntoView() and
 * sequential-focus scrolling; the scroll-margin pair survives even if a plugin
 * makes something other than <html> the scroll container.
 * ---------------------------------------------------------------------- */

html {
	scroll-padding-top: var(--vnr-sticky-top, 6rem);
}

.vnr-article__body h2[id],
.vnr-article__body h3[id] {
	scroll-margin-top: var(--vnr-sticky-top, 6rem);
}

/* =========================================================================
   The rail
   =========================================================================
   COLOUR POLICY. All ratios were measured against the palette the theme
   shipped with before the client's September 2026 pick (primary #2e5a41,
   secondary #c8a04a, accent #7a2e35) and re-checked on the two colorways in
   the logo review. The approved Legacy Green (#1d3d2a) is darker than the
   old primary, so every primary-on-light figure below only went up.

   - Labels use --vnr-primary (7.91:1 on white, 7.08:1 on cream, 6.92:1 on the
     current staging background), NOT .vnr-eyebrow's --vnr-secondary-deep,
     which is #9b792f on the default palette: 4.06 / 3.64 / 3.55:1 at 12.5px,
     under the 4.5:1 small text needs. The GLOBAL .vnr-eyebrow rule is left
     untouched; that is tabled ADA finding #3, not this change's business.
   - Body/meta text uses --vnr-body (9.56 / 8.56 / 8.36:1). --vnr-muted is
     banned here: 4.50 / 4.03 / 3.94:1, no headroom, and it already fails on
     cream (tabled finding #2).
   - Gold is decorative only. --vnr-secondary on --vnr-primary is 3.23:1: fine
     for a 2px rule, never for text.
   - The rail opts into a full-opacity focus ring. The global ring,
     rgba(--vnr-primary-rgb, .45), composites to 2.16:1 on white and exactly
     1.00:1 on a primary panel (tabled finding #1). The global rule is NOT
     changed; the rail just declines to inherit a known failure into the
     densest cluster of links on the page.
   ========================================================================= */
.vnr-rail {
	position: relative;
	min-width: 0;
}

@media (max-width: 991.98px) {

	.vnr-rail {
		padding-top: 2.5rem;
		border-top: 1px solid var(--vnr-border);
	}

	/* Below lg the rail sits directly above the closing CTA band; two
	   conversion prompts back to back reads worse than one. */
	.vnr-rail__cta {
		display: none;
	}
}

@media (min-width: 992px) {

	/* Hairline at the TRUE midpoint of the gutter, so the space between the
	   text and the rail reads as one designed column gap rather than a margin
	   bug. That mismatch is what the client raised. The grid item stays
	   stretched (grid's default) so this runs the article's full height. */
	.vnr-rail::before {
		content: "";
		position: absolute;
		inset-block: 0;
		left: calc(var(--vnr-rail-gap, 3rem) / -2);
		width: 1px;
		background: var(--vnr-border);
	}

	/* On a short post the rail is taller than the article, so the hairline
	   would run well past the end of the text. */
	.vnr-article__layout--brief .vnr-rail::before,
	.vnr-article__layout--media .vnr-rail::before {
		display: none;
	}
}

/* The rail scrolls with the article, client decision (0.9.10). It is NOT
   sticky: .vnr-rail__inner stays a plain block holding the modules and their
   spacing. If sticky is ever wanted back, it belongs on this inner box and not
   on .vnr-rail itself. A grid item defaults to align-self: stretch, so sticky
   on the grid item has zero travel and silently never pins. */

.vnr-rail__mod + .vnr-rail__mod {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--vnr-border);
}

.vnr-rail__label {
	display: block;
	position: relative;
	margin: 0 0 .9rem;
	padding-top: .85rem;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .2em;
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--vnr-primary);
}

/* h2 would otherwise inherit Playfair at display size from the global heading
   rule at theme.css:41. Heading LEVEL is not font size. */
.vnr-rail__label::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.75rem;
	height: 2px;
	background: var(--vnr-secondary);
}

/* --- Module 1: In this article ---------------------------------------- */

.vnr-toc__list {
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--vnr-border);
}

.vnr-toc__item {
	margin-left: -2px;
	border-left: 2px solid transparent;
}

/* 15.2px x 1.45 + 11.2px padding = 33.2px tall, clearing the 24px floor of
   WCAG 2.2 SC 2.5.8 Target Size (Minimum), AA. */
.vnr-toc__link {
	display: block;
	padding: .35rem 0 .35rem 1rem;
	font-size: .95rem;
	line-height: 1.45;
	color: var(--vnr-body);
	text-decoration: none;
	transition: color .18s ease;
}

.vnr-toc__link:hover,
.vnr-toc__link:focus-visible {
	color: var(--vnr-primary);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.vnr-toc__item--h3 .vnr-toc__link {
	padding-left: 1.85rem;
	font-size: .875rem;
}

/* --- Module 2: More in {category} -------------------------------------- */

.vnr-railposts {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
}

.vnr-railpost {
	display: flex;
	gap: .875rem;
	align-items: flex-start;
	margin-bottom: 0;
}

.vnr-railpost__thumb {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: .5rem;
	overflow: hidden;
	background: var(--vnr-soft-bg);
}

.vnr-railpost__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.vnr-railpost__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: var(--vnr-primary);
	opacity: .45;
}

/* At lg the rail content box is 272px; beside a 56px thumb that leaves ~187px,
   about 27 characters a line, which mangles the long series titles. The title
   takes the full width instead until the rail reaches 320px. */
@media (max-width: 1199.98px) {

	.vnr-railpost__thumb {
		display: none;
	}
}

.vnr-railpost__body {
	display: block;
	min-width: 0;
}

.vnr-railpost__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding-block: .2rem;
	font-size: .925rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--vnr-primary);
	text-decoration: none;
	transition: color .18s ease;
}

.vnr-railpost__title:hover,
.vnr-railpost__title:focus-visible {
	color: var(--vnr-primary-deep);
	text-decoration: underline;
	text-underline-offset: .16em;
}

.vnr-railpost__date {
	display: block;
	margin-top: .25rem;
	font-size: .75rem;
	line-height: 1.3;
	color: var(--vnr-body);
}

.vnr-rail__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: 1.35rem;
	padding-block: .3rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--vnr-primary);
	text-decoration: none;
	transition: gap .18s ease, color .18s ease;
}

.vnr-rail__more:hover,
.vnr-rail__more:focus-visible {
	gap: .7rem;
	color: var(--vnr-primary-deep);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.vnr-rail__more--all {
	margin-top: 1.5rem;
}

/* --- Module 3: CTA, the rail's single filled block --------------------- */

.vnr-rail__cta {
	padding: 1.6rem 1.5rem 1.5rem;
	border-radius: .9rem;
	background: var(--vnr-primary);
	box-shadow: 0 14px 34px rgba(22, 32, 43, .16);
}

/* The border-top separator inherited from .vnr-rail__mod + .vnr-rail__mod
   would cut across the filled card. */
.vnr-rail__mod + .vnr-rail__cta {
	padding-top: 1.6rem;
	border-top: 0;
}

.vnr-rail__cta-rule {
	display: block;
	width: 2.25rem;
	height: 2px;
	margin-bottom: 1rem;
	background: var(--vnr-secondary); /* 3.23:1 on the panel, decorative only */
}

.vnr-rail__cta-title {
	margin: 0 0 .55rem;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.2;
	letter-spacing: -.01em;
	color: #fff; /* 7.91:1 default, 11.98:1 green preview, 13.08:1 navy preview */
}

.vnr-rail__cta-copy {
	margin: 0 0 1.25rem;
	font-size: .875rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .86); /* composites to 6.36 / 9.31 / 10.06:1 */
}

/* NOT .btn-accent: the burgundy accent on the primary panel measures near 1:1, so the
   button has no perceivable boundary (SC 1.4.11 wants 3:1 for UI components)
   even though its white label reads fine. NOT .btn-gold either: gold-on-primary
   is only 3.23:1 of boundary, and it would make the rail CTA look like a second
   copy of the closing band's button. The inverse button uses the primary/white
   pair for BOTH the boundary and the label, which the palette guarantees at
   7.9:1 or better on every colorway. */
.vnr-rail__cta-btn.btn {
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #fff;
	--bs-btn-color: var(--vnr-primary);
	--bs-btn-hover-bg: var(--vnr-secondary-soft);
	--bs-btn-hover-border-color: var(--vnr-secondary-soft);
	--bs-btn-hover-color: var(--vnr-primary);
	--bs-btn-active-bg: var(--vnr-secondary-soft);
	--bs-btn-active-color: var(--vnr-primary);
	--bs-btn-font-size: .9rem;
}

/* No lift on the rail's buttons: they sit flush inside a filled panel, where a
   translate reads as the button detaching rather than responding. */
.vnr-rail .btn:hover {
	transform: none;
	box-shadow: 0 6px 18px rgba(22, 32, 43, .18);
}

.vnr-rail__cta-phone {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	margin: 1rem 0 0;
	font-size: .9rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .86);
}

.vnr-rail__cta-tel {
	padding-block: .2rem; /* 21.6 + 6.4 = 28px, over the SC 2.5.8 24px floor */
	color: #fff;
	text-decoration: none;
}

.vnr-rail__cta-tel:hover,
.vnr-rail__cta-tel:focus-visible {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* --- Module 4: Explore -------------------------------------------------- */

/* Hand-rolled rather than get_search_form(): searchform.php is a `d-flex
   gap-2` .form-control plus a .btn with 1.4rem of horizontal padding, which
   collapses the input to roughly 160px inside the 272px lg rail. It is also
   unscoped, and search.php prints a post-type label per result, so an unscoped
   search from a tax article returns commercial property listings. */
.vnr-railsearch {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--vnr-border);
	border-radius: 50rem;
	background: #fff;
	overflow: hidden;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.vnr-railsearch:focus-within {
	border-color: var(--vnr-primary);
	box-shadow: 0 0 0 3px rgba(var(--vnr-primary-rgb), .18);
}

.vnr-railsearch__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: .55rem .5rem .55rem 1rem;
	border: 0;
	background: transparent;
	font-size: .9rem;
	color: var(--vnr-body);
}

/* --vnr-body at 0.8 alpha on white composites to 4.75:1, above AA. A lower
   alpha would land under the --vnr-muted value this rail bans. */
.vnr-railsearch__input::placeholder {
	color: var(--vnr-body);
	opacity: .8;
}

.vnr-railsearch__input:focus {
	outline: 0; /* the wrapper renders one ring for the whole control */
}

.vnr-railsearch__btn {
	flex: 0 0 auto;
	width: 2.6rem;
	border: 0;
	background: var(--vnr-primary);
	color: #fff;
	transition: background-color .18s ease;
}

.vnr-railsearch__btn:hover,
.vnr-railsearch__btn:focus-visible {
	background: var(--vnr-primary-deep);
}

/* Chips are .vnr-catnav__link verbatim, only smaller: at the inherited .9rem
   "Executive Compensation Series 6" runs ~235px and wraps badly in a 272px
   rail; at .82rem it is ~215px. 13.12 x 1.3 + 11.2 padding + 2 border =
   30.3px tall, over the SC 2.5.8 floor. */
.vnr-rail__topics {
	margin-top: 1.25rem;
	margin-bottom: 0;
}

.vnr-rail__topics .vnr-catnav__link {
	padding: .35rem .75rem;
	font-size: .82rem;
}

.vnr-rail__topics .vnr-catnav__count {
	font-size: .7rem;
}

/* --- Rail focus --------------------------------------------------------- */

.vnr-rail :focus-visible {
	outline: 3px solid var(--vnr-primary);
	outline-offset: 2px;
}

.vnr-rail__cta :focus-visible {
	outline-color: #fff;
}

/* =========================================================================
   Imported body content: bold run-in heads, embeds, images, tables
   =========================================================================
   .vnr-subhead / .vnr-runin are set by vnr_prose_runin_heads() in inc/blog.php,
   which is the only thing that can see whether a text node precedes the
   <strong>. CSS :first-child cannot: it skips text nodes, so
   `p > strong:first-child` also matches "...one question: <strong>x</strong>".
   Inside these two classes the PHP has already proved the bold run opens the
   block, so `strong:first-child` below is sound. It does a second job too:
   excluding any later <strong> used for ordinary mid-sentence emphasis in the
   answer, which must stay inline.
   ========================================================================= */

.vnr-prose .vnr-subhead,
.vnr-prose .vnr-runin > strong:first-child,
.vnr-prose .vnr-runin > b:first-child {
	display: block;
	font-family: 'Inter', sans-serif;
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .005em;
	color: var(--vnr-primary);
	text-wrap: balance;
}

.vnr-prose .vnr-subhead {
	margin-top: 2.5rem;
	margin-bottom: .85rem;
}

.vnr-prose .vnr-runin {
	margin-top: 2.5rem;
}

.vnr-prose .vnr-runin > strong:first-child,
.vnr-prose .vnr-runin > b:first-child {
	margin-bottom: .35rem;
}

/* Nested emphasis inside the head must not re-bold or re-italicise it. */
.vnr-prose .vnr-subhead strong,
.vnr-prose .vnr-subhead b,
.vnr-prose .vnr-runin > strong:first-child em,
.vnr-prose .vnr-runin > b:first-child em {
	font-weight: inherit;
	font-style: normal;
}

/* A short brand rule is what separates a subhead from body copy, since at
   1.08rem the head is only marginally larger than the 1.15rem body type.
   Imported content uses h3 as its de-facto section head (h3 outnumbers h2 in
   this archive by a wide margin), so a new subhead must sit clearly below h3
   without shrinking a question below its own answer. */
.vnr-prose .vnr-subhead::before,
.vnr-prose .vnr-runin > strong:first-child::before,
.vnr-prose .vnr-runin > b:first-child::before {
	content: "";
	display: block;
	width: 1.75rem;
	height: 2px;
	margin-bottom: .7rem;
	background: var(--vnr-secondary);
	border-radius: 1px;
}

/* Directly under a real heading the rule is clutter and the heading has
   already supplied the space. */
.vnr-prose :is(h1, h2, h3, h4, h5, h6) + .vnr-subhead,
.vnr-prose :is(h1, h2, h3, h4, h5, h6) + .vnr-runin {
	margin-top: 1.15rem;
}

.vnr-prose :is(h1, h2, h3, h4, h5, h6) + .vnr-subhead::before,
.vnr-prose :is(h1, h2, h3, h4, h5, h6) + .vnr-runin > strong:first-child::before,
.vnr-prose :is(h1, h2, h3, h4, h5, h6) + .vnr-runin > b:first-child::before {
	display: none;
}

.vnr-prose > .vnr-subhead:first-child,
.vnr-prose > .vnr-runin:first-child {
	margin-top: 0;
}

/* Inside a list the bullet already marks the item; the rule would double up. */
.vnr-prose li.vnr-runin {
	margin-top: 0;
}

.vnr-prose li.vnr-runin > strong:first-child,
.vnr-prose li.vnr-runin > b:first-child {
	margin-bottom: .15rem;
}

.vnr-prose li.vnr-runin > strong:first-child::before,
.vnr-prose li.vnr-runin > b:first-child::before {
	display: none;
}

/* --- Imported media ----------------------------------------------------- */

.vnr-prose figure.wp-block-image,
.vnr-prose div.wp-block-image {
	margin: 2.25rem 0;
	text-align: center;
}

.vnr-prose .wp-block-image img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border-radius: .75rem;
}

/*
 * wp-block-library is dequeued site-wide (inc/setup.php:78-84), so
 * wp-embed-aspect-* is inert and every imported YouTube iframe renders at its
 * literal width="500" height="281". That overflows narrow screens and sits
 * marooned in an 856px column. The absolute fill is scoped to
 * .wp-has-aspect-ratio on purpose: applied to a bare .wp-block-embed__wrapper
 * with no ratio the wrapper would collapse to zero height and the iframe would
 * vanish entirely. Ratio-less embeds fall back to `.vnr-prose iframe`.
 */
.vnr-prose .wp-block-embed {
	margin: 2.25rem 0;
}

.vnr-prose .wp-has-aspect-ratio .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: .75rem;
	background: var(--vnr-dark);
}

.vnr-prose .wp-embed-aspect-4-3 .wp-block-embed__wrapper {
	aspect-ratio: 4 / 3;
}

.vnr-prose .wp-embed-aspect-1-1 .wp-block-embed__wrapper {
	aspect-ratio: 1 / 1;
}

.vnr-prose .wp-embed-aspect-21-9 .wp-block-embed__wrapper {
	aspect-ratio: 21 / 9;
}

.vnr-prose .wp-embed-aspect-9-16 .wp-block-embed__wrapper {
	aspect-ratio: 9 / 16;
}

.vnr-prose .wp-has-aspect-ratio .wp-block-embed__wrapper > iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.vnr-prose iframe {
	max-width: 100%;
}

/*
 * Scroll the FIGURE, not the table. `.vnr-prose table { display: block }` at
 * line 1906 is the standard responsive-table technique and works, so it stays
 * as the fallback for bare tables. But changing `display` on a <table> can drop
 * its implicit table role in some browser/AT pairs, so wherever the import
 * supplied a wrapper the real element is restored.
 * (0,2,2) beats the (0,1,1) base rule.
 */
.vnr-prose figure.wp-block-table {
	margin: 2.25rem 0;
	overflow-x: auto;
}

.vnr-prose figure.wp-block-table > table {
	display: table;
	width: 100%;
	margin: 0;
	overflow: visible;
}

/* =========================================================================
   Reduced motion: additions for 0.9.10
   =========================================================================
   Only transitions and one hover-gap shift are cancelled. `.vnr-catnav__link`
   and `.btn` already appear in the existing reduce blocks, so they are not
   repeated here. Nothing new in this change uses `transform`.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {

	.vnr-toc__link,
	.vnr-railpost__title,
	.vnr-rail__more,
	.vnr-rail__cta-tel,
	.vnr-railsearch,
	.vnr-railsearch__btn {
		transition: none;
	}

	.vnr-rail__more:hover,
	.vnr-rail__more:focus-visible {
		gap: .4rem;
	}

	.vnr-rail .btn:hover {
		box-shadow: none;
	}
}

/* --- Insights archive polish (0.9.10) --------------------------------- */

/*
 * The header block runs the full container width, matching the article. Only
 * the description keeps a measure, since a category blurb set across 1296px is
 * unreadable. Every description in this archive is empty right now, which is
 * why the count line was added: it always renders.
 */
.vnr-archive__desc {
	max-width: var(--vnr-measure, 41rem);
}

.vnr-archive__count {
	margin: 1rem 0 0;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vnr-body);
}

.vnr-archive__desc + .vnr-archive__count {
	margin-top: .75rem;
}

/* Card excerpt, archives only. The homepage row opts out (insight-card.php). */
.vnr-insight__excerpt {
	margin-top: .35rem;
	line-height: 1.55;
	color: var(--vnr-body);
}

/* --- Legal / Policy template (0.9.11) --------------------------------- */

/*
 * Policy documents are the one place in the theme where the body is
 * the_content() rather than editable sections. Capped at the reading measure
 * because a privacy policy set across the full 1296px container is unreadable.
 * The single post does the opposite (client decision), but that is a
 * designed editorial column with a sidebar beside it; this is a legal
 * document with nothing beside it.
 */
.vnr-legal {
	max-width: var(--vnr-measure, 41rem);
}

.vnr-legal__effective {
	margin: 0 0 1.75rem;
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vnr-body);
}

/* --- Property filter facets (multi-select, 0.9.12) -------------------- */

.property-filters__facet {
	border: 1px solid var(--vnr-border);
	border-radius: .5rem;
	background: #fff;
}

.property-filters__summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	padding: .55rem .8rem;
	cursor: pointer;
	list-style: none;
	font-size: .9rem;
	/* 44px target: SC 2.5.8 */
	min-height: 2.75rem;
}

.property-filters__summary::-webkit-details-marker {
	display: none;
}

.property-filters__facet-label {
	font-weight: 600;
	color: var(--vnr-ink);
}

.property-filters__facet-state {
	font-size: .82rem;
	color: var(--vnr-body);
}

.property-filters__options {
	border: 0;
	margin: 0;
	padding: 0 .8rem .7rem;
	max-height: 14rem;
	overflow-y: auto;
}

.property-filters__options .form-check {
	margin-bottom: .2rem;
}

.property-filters__options .form-check-label {
	font-size: .9rem;
}

/* Two badges must stack rather than overlap, since a property can carry more
   than one status now that status is a taxonomy. Single-badge cards unchanged. */
.property-card__status {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .25rem;
	max-width: calc(100% - 1.5rem);
}

/* --- Legal / Policy: contents rail (0.9.15) ---------------------------- */

.vnr-legal__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
}

@media (min-width: 992px) {

	/*
	 * Two tracks only when there is a rail to put in the first one. The rail is
	 * emitted only when the policy has three or more h2s, so a short document
	 * left the prose as the FIRST grid item and it was constrained to the 16rem
	 * rail track: the Accessibility Statement rendered as a 256px ribbon pinned
	 * to the left of a 1440px screen, three words a line. :has() scopes the
	 * two-up to the case it was written for, and a browser without :has() keeps
	 * the single column, which is the safe direction to fail in.
	 */
	.vnr-legal__layout:has(.vnr-legal__toc) {
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: 4rem;
		align-items: start;
	}

	/* Sticky is safe here: the rail is short and the grid item is the
	   containing block, so it travels the length of the policy. */
	.vnr-legal__toc {
		position: sticky;
		top: var(--vnr-sticky-top, 6rem);
	}
}

.vnr-legal__toc-title {
	font-family: 'Inter', sans-serif;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--vnr-secondary-text);
	margin: 0 0 1rem;
}

.vnr-legal__toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	border-left: 1px solid var(--vnr-border);
}

.vnr-legal__toc-link {
	display: flex;
	gap: .7rem;
	padding: .5rem 0 .5rem 1rem;
	margin-left: -1px;
	border-left: 2px solid transparent;
	font-size: .92rem;
	line-height: 1.45;
	color: var(--vnr-body);
	text-decoration: none;
	transition: color .18s ease, border-color .18s ease;
}

.vnr-legal__toc-link:hover,
.vnr-legal__toc-link:focus-visible {
	color: var(--vnr-primary);
	border-left-color: var(--vnr-secondary);
}

.vnr-legal__toc-link.is-current {
	color: var(--vnr-primary);
	font-weight: 600;
	border-left-color: var(--vnr-primary);
}

.vnr-legal__toc-num {
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
	color: var(--vnr-secondary-text);
	font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {

	.vnr-legal__toc-link {
		transition: none;
	}
}

/* ======================================================================
   Page-template section types (0.9.15)
   ======================================================================
   Nine section partials introduced by the approved page-template designs.
   Every colour is a --vnr-* custom property so the Theme Options colour
   pipeline still governs them; each block that animates carries its own
   prefers-reduced-motion entry.
   ====================================================================== */

/* --- steps ------------------------------------------------------------ */
/* --- Steps: numbered process rail -------------------------------------- */

/*
 * Shared by four launch pages, so nothing here is pinned to a step count: the
 * desktop rail flows into implicit columns, which means three, four or five
 * steps each resolve to one evenly divided row with no per-page CSS.
 *
 * Below 992px the rail is vertical and the connecting line runs down the left
 * through the numerals; at 992px and up it lies flat and the same line runs
 * horizontally behind them, from each numeral to the next.
 */

.vnr-section--steps {
	--vnr-steps-disc: 3.25rem;
	--vnr-steps-gap: 2rem;
	--vnr-steps-line: var(--vnr-border);
	background: var(--vnr-soft-bg);
}

.vnr-steps__header {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	max-width: 48rem;
	margin: 0 0 2.75rem;
}

.vnr-steps__heading {
	margin: 0;
}

.vnr-steps__lead {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-steps__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vnr-steps__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--vnr-steps-disc) minmax(0, 1fr);
	column-gap: 1.15rem;
	align-items: start;
	padding-bottom: 2.25rem;
}

.vnr-steps__item:last-child {
	padding-bottom: 0;
}

/* The rail itself: one segment per step, joining this numeral to the next. */
.vnr-steps__item::before {
	content: "";
	position: absolute;
	top: var(--vnr-steps-disc);
	bottom: 0;
	left: calc(var(--vnr-steps-disc) / 2 - 1px);
	width: 2px;
	background: var(--vnr-steps-line);
}

.vnr-steps__item:last-child::before {
	content: none;
}

.vnr-steps__num {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--vnr-steps-disc);
	height: var(--vnr-steps-disc);
	border-radius: 50%;
	background: var(--vnr-primary);
	color: #fff;
	font-weight: 700;
	font-size: 1.2rem;
	line-height: 1;
	letter-spacing: .01em;
}

.vnr-steps__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding-top: .3rem;
}

.vnr-steps__title {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.25;
}

.vnr-steps__desc {
	margin: 0;
	font-size: .97rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

@media (min-width: 768px) {
	.vnr-section--steps {
		--vnr-steps-disc: 3.4rem;
	}

	.vnr-steps__num {
		font-size: 1.3rem;
	}

	.vnr-steps__title {
		font-size: 1.3rem;
	}
}

@media (min-width: 992px) {
	.vnr-steps__list {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		column-gap: var(--vnr-steps-gap);
		row-gap: 0;
	}

	.vnr-steps__item {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.1rem;
		padding-bottom: 0;
	}

	/* Same segment, laid flat: numeral edge to the next column's numeral. */
	.vnr-steps__item::before {
		top: calc(var(--vnr-steps-disc) / 2 - 1px);
		right: calc(var(--vnr-steps-gap) * -1);
		bottom: auto;
		left: calc(var(--vnr-steps-disc) + .85rem);
		width: auto;
		height: 2px;
	}

	.vnr-steps__body {
		padding-top: 0;
	}

	/*
	 * Line the three bands of the rail up across every column, so a title that
	 * wraps to two lines cannot shove its neighbour's copy down a line and leave
	 * the row ragged. Shows up the moment a rail carries five steps. Guarded on
	 * subgrid: without it each column keeps its own rhythm, which is the layout
	 * above and still correct.
	 */
	@supports (grid-template-rows: subgrid) {
		.vnr-steps__list {
			grid-template-rows: auto auto auto;
		}

		.vnr-steps__item {
			grid-row: span 3;
			grid-template-rows: subgrid;
			row-gap: .5rem;
		}

		.vnr-steps__body {
			display: contents;
		}

		.vnr-steps__num {
			grid-row: 1;
		}

		.vnr-steps__title {
			grid-row: 2;
			margin-top: .6rem;
		}

		.vnr-steps__desc {
			grid-row: 3;
		}
	}
}

/* Dark band variant (schema 'tone' => 'dark'). All text goes white, headings
   included: a heading must never keep its green on the dark band. */
.vnr-section--steps-dark {
	--vnr-steps-line: rgba(255, 255, 255, .18);
	background: var(--vnr-dark);
	color: #fff;
}

.vnr-section--steps-dark .vnr-eyebrow,
.vnr-section--steps-dark .vnr-steps__heading,
.vnr-section--steps-dark .vnr-steps__lead,
.vnr-section--steps-dark .vnr-steps__title,
.vnr-section--steps-dark .vnr-steps__desc {
	color: #fff;
}

/* Gold is a surface here, never text: the numeral on it takes the dark ink. */
.vnr-section--steps-dark .vnr-steps__num {
	background: var(--vnr-secondary);
	color: var(--vnr-dark);
}

/* --- figures ------------------------------------------------------------ */

/* --- Figures band (big-number statement) ------------------------------- */
/* A full-width band on --vnr-primary carrying two or three very large
   Playfair figures. Everything on the band is white, the h2 included, which
   would otherwise inherit --vnr-primary onto a --vnr-primary background. */

.vnr-section--figures {
	background: var(--vnr-primary);
	color: #fff;
}

.vnr-section--figures h2,
.vnr-section--figures h3,
.vnr-section--figures p,
.vnr-section--figures .vnr-eyebrow {
	color: #fff;
}

.vnr-figures__header {
	max-width: 64ch;
}

.vnr-figures__heading {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(2rem, 3.4vw, 2.9rem);
	line-height: 1.12;
	letter-spacing: -.01em;
}

.vnr-figures__sub {
	font-size: 1rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .9);
}

/* Each cell is capped by the design's 2px rule; stacked on mobile the rules
   read as the dividers between figures. */
.vnr-figures__item {
	min-width: 0;
	padding-top: 1.6rem;
	border-top: 2px solid rgba(255, 255, 255, .55);
}

.vnr-figures__item + .vnr-figures__item {
	margin-top: 2.5rem;
}

/* The figure and its label are one heading so a screen reader hears
   "25% of qualified childcare facility expenditure" as a single phrase. */
.vnr-figures__head {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	margin: 0;
}

.vnr-figures__figure {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(2.6rem, 5.2vw, 4.75rem);
	line-height: 1;
	letter-spacing: -.01em;
	overflow-wrap: break-word;
}

/* Longer values step down so they still read as one line in their column. */
.vnr-figures__figure--mid {
	font-size: clamp(1.75rem, 3vw, 2.6rem);
	line-height: 1.1;
}

.vnr-figures__figure--long {
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	line-height: 1.2;
	letter-spacing: 0;
}

.vnr-figures__label {
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5;
	letter-spacing: 0;
}

.vnr-figures__desc {
	margin: .9rem 0 0;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: .94rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .9);
}

/* The worked-example footnote: a translucent panel rather than the mockup's
   cream box, so a light block never punches a hole in the band. */
.vnr-figures__note {
	display: flex;
	align-items: flex-start;
	gap: .85rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: .55rem;
	background: rgba(255, 255, 255, .12);
}

.vnr-figures__note .bi {
	flex: 0 0 auto;
	font-size: 1.15rem;
	line-height: 1.5;
	color: #fff;
}

.vnr-figures__note-text {
	font-size: .94rem;
	line-height: 1.6;
	color: #fff;
}

@media (min-width: 768px) {

	.vnr-figures__item {
		padding: 1.65rem 1.75rem 0 0;
	}

	.vnr-figures__item + .vnr-figures__item {
		margin-top: 0;
		padding-left: 1.75rem;
		border-left: 1px solid rgba(255, 255, 255, .26);
	}

	.vnr-figures__item:last-child {
		padding-right: 0;
	}
}

@media (min-width: 992px) {

	.vnr-figures__item {
		padding-right: 2.5rem;
	}

	.vnr-figures__item + .vnr-figures__item {
		padding-left: 2.5rem;
	}

	.vnr-figures__desc {
		font-size: .97rem;
	}
}

/* --- timeline ------------------------------------------------------------ */
/* =========================================================================
   Timeline: About page history band ("Thirty years, five turning points")
   =========================================================================
   A dark brand band carrying a repeatable list of turning points. Below lg the
   entries sit on one left-aligned rail; from lg up the spine moves to the
   centre and entries alternate left/right against it. Gold dots mark each year.
   All type on this band is #fff, the h2 included, which would otherwise keep
   its green heading colour on a green band.
   ------------------------------------------------------------------------- */

.vnr-section--timeline {
	/* Geometry tokens so the dot, the spine and the connector ticks stay in
	   agreement instead of being three independently tuned magic numbers. */
	--vnr-timeline-dot: .875rem;
	--vnr-timeline-dot-top: .3rem;
	--vnr-timeline-rail: 2.25rem;
	--vnr-timeline-rule: rgba(255, 255, 255, .26);

	background: var(--vnr-dark);
	color: #fff;
}

.vnr-section--timeline .vnr-timeline__eyebrow,
.vnr-section--timeline .vnr-timeline__heading,
.vnr-section--timeline .vnr-timeline__lead,
.vnr-section--timeline .vnr-timeline__year,
.vnr-section--timeline .vnr-timeline__title,
.vnr-section--timeline .vnr-timeline__desc {
	color: #fff;
}

.vnr-timeline__lead {
	font-size: 1rem;
	line-height: 1.7;
	max-width: 35rem;
}

/* --- Rail --------------------------------------------------------------- */

.vnr-timeline__list {
	position: relative;
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
}

/* The spine. Inset top/bottom so it starts and ends at the first and last
   dot centres rather than running past them. */
.vnr-timeline__list::before {
	content: "";
	position: absolute;
	top: calc(var(--vnr-timeline-dot-top) + (var(--vnr-timeline-dot) / 2));
	bottom: 0;
	left: calc(var(--vnr-timeline-dot) / 2 - 1px);
	width: 2px;
	/* Fades out below the last dot instead of stopping at a hard, arbitrary
	   point partway down the final entry. */
	background: linear-gradient(
		to bottom,
		var(--vnr-timeline-rule) 0,
		var(--vnr-timeline-rule) calc(100% - 5rem),
		rgba(255, 255, 255, 0) 100%
	);
}

.vnr-timeline__item {
	position: relative;
	padding-left: var(--vnr-timeline-rail);
}

.vnr-timeline__item + .vnr-timeline__item {
	margin-top: 2.5rem;
}

/* Connector tick from the spine to the entry. */
.vnr-timeline__item::before {
	content: "";
	position: absolute;
	top: calc(var(--vnr-timeline-dot-top) + (var(--vnr-timeline-dot) / 2) - 1px);
	left: var(--vnr-timeline-dot);
	width: calc(var(--vnr-timeline-rail) - var(--vnr-timeline-dot) - .5rem);
	height: 2px;
	background: var(--vnr-timeline-rule);
}

.vnr-timeline__dot {
	position: absolute;
	top: var(--vnr-timeline-dot-top);
	left: 0;
	width: var(--vnr-timeline-dot);
	height: var(--vnr-timeline-dot);
	border-radius: 50%;
	background: var(--vnr-secondary);
	box-shadow: 0 0 0 .3125rem rgba(var(--vnr-secondary-rgb), .18);
	transition: box-shadow .18s ease;
}

.vnr-timeline__item:hover .vnr-timeline__dot {
	box-shadow: 0 0 0 .5rem rgba(var(--vnr-secondary-rgb), .3);
}

/* --- Entry type --------------------------------------------------------- */

.vnr-timeline__meta {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin: 0 0 .85rem;
}

.vnr-timeline__index {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: .78rem;
	line-height: 1.2;
	letter-spacing: .2em;
	color: rgba(255, 255, 255, .85);
}

.vnr-timeline__year {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 1.875rem;
	line-height: 1.1;
	letter-spacing: -.01em;
}

.vnr-timeline__title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -.01em;
	margin: 0 0 .5rem;
}

.vnr-timeline__desc {
	margin: 0;
	font-size: .95rem;
	line-height: 1.7;
	max-width: 32rem;
}

@media (min-width: 768px) {
	.vnr-timeline__year {
		font-size: 2.125rem;
	}
}

/* --- Centre spine, alternating entries ---------------------------------- */

@media (min-width: 992px) {
	.vnr-timeline__list {
		margin-top: 3.5rem;
	}

	.vnr-timeline__list::before {
		left: calc(50% - 1px);
	}

	.vnr-timeline__item {
		width: 50%;
		padding-left: 0;
		padding-right: 2.75rem;
		text-align: right;
	}

	.vnr-timeline__item + .vnr-timeline__item {
		margin-top: 3rem;
	}

	.vnr-timeline__item::before {
		left: auto;
		right: calc(var(--vnr-timeline-dot) / 2);
		width: 1.25rem;
	}

	.vnr-timeline__dot {
		left: auto;
		right: calc(var(--vnr-timeline-dot) / -2);
	}

	.vnr-timeline__desc {
		margin-left: auto;
	}

	.vnr-timeline__item:nth-child(even) {
		margin-left: 50%;
		padding-right: 0;
		padding-left: 2.75rem;
		text-align: left;
	}

	.vnr-timeline__item:nth-child(even)::before {
		right: auto;
		left: calc(var(--vnr-timeline-dot) / 2);
	}

	.vnr-timeline__item:nth-child(even) .vnr-timeline__dot {
		right: auto;
		left: calc(var(--vnr-timeline-dot) / -2);
	}

	.vnr-timeline__item:nth-child(even) .vnr-timeline__desc {
		margin-left: 0;
		margin-right: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vnr-timeline__dot {
		transition: none;
	}
}

/* --- team ------------------------------------------------------------ */

/* --- Leadership team grid --------------------------------------------- */

.vnr-team__standfirst {
	max-width: 33rem;
	color: var(--vnr-body);
	font-size: 1rem;
	line-height: 1.7;
}

.vnr-team__member {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 26rem;
}

/*
 * Portrait plate. A fully rounded card that floats above the name block rather
 * than butting against it, matching the approved plate in the design.
 */
.vnr-team__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	min-height: 15rem;
	border-radius: .875rem;
	background: var(--vnr-soft-bg);
}

.vnr-team__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform .35s ease;
}

.vnr-team__member:hover .vnr-team__photo {
	transform: scale(1.03);
}

/* No headshot yet: a deliberate panel, never a broken image. */
.vnr-team__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--vnr-border);
}

.vnr-team__placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--vnr-primary-soft);
	color: var(--vnr-primary);
	font-size: 1.5rem;
	line-height: 1;
}

.vnr-team__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.vnr-team__name {
	margin: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 1.3125rem;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--vnr-primary);
}

.vnr-team__role {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vnr-secondary-text);
}

.vnr-team__bio {
	color: var(--vnr-body);
	font-size: .9375rem;
	line-height: 1.7;
}

@media (min-width: 768px) {
	.vnr-team__member {
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vnr-team__photo {
		transition: none;
	}

	.vnr-team__member:hover .vnr-team__photo {
		transform: none;
	}
}

/* --- comparison ------------------------------------------------------------ */

/* =========================================================================
   Comparison table: template-parts/sections/comparison.php
   Four-column data table on white. The table keeps a fixed minimum width and
   scrolls inside .vnr-comparison__scroll, which is a focusable role="region"
   so keyboard users can reach the overflow. Nothing here may overflow the
   page at 360px.
   ========================================================================= */

.vnr-section--comparison {
	background: #fff;
}

.vnr-comparison__header {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	max-width: 66ch;
}

.vnr-comparison__lede {
	margin: 0;
	color: var(--vnr-body);
	font-size: 1.03rem;
	line-height: 1.7;
}

.vnr-comparison__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-radius: .9rem;
	box-shadow: 0 10px 30px rgba(22, 32, 43, .06);
}

.vnr-comparison__scroll:focus-visible {
	outline: 3px solid var(--vnr-primary);
	outline-offset: 3px;
}

.vnr-comparison__table {
	width: 100%;
	min-width: 44rem;
	margin: 0;
	background: #fff;
	border-collapse: collapse;
}

/* Head band sits on --vnr-primary, so every cell in it is #fff. */
.vnr-comparison__th {
	padding: 1.15rem 1.5rem;
	background: var(--vnr-primary);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .14em;
	line-height: 1.4;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.vnr-comparison__row-th,
.vnr-comparison__cell {
	padding: 1.4rem 1.5rem;
	border-bottom: 1px solid var(--vnr-border);
	vertical-align: top;
	transition: background-color .2s ease;
}

.vnr-comparison__table tbody tr:last-child .vnr-comparison__row-th,
.vnr-comparison__table tbody tr:last-child .vnr-comparison__cell {
	border-bottom: 0;
}

.vnr-comparison__table tbody tr:nth-of-type(even) .vnr-comparison__row-th,
.vnr-comparison__table tbody tr:nth-of-type(even) .vnr-comparison__cell {
	background: var(--vnr-cream);
}

.vnr-comparison__table tbody tr:hover .vnr-comparison__row-th,
.vnr-comparison__table tbody tr:hover .vnr-comparison__cell {
	background: var(--vnr-soft-bg);
}

.vnr-comparison__row-th {
	min-width: 11rem;
	color: var(--vnr-primary);
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.35;
	text-align: left;
}

/*
 * The row header is an <h3> inside the <th scope="row"> so the four options
 * appear in the heading outline without giving up the table's row-header
 * semantics. Everything visual stays on the <th>, so the heading inherits.
 */
.vnr-comparison__row-title {
	margin: 0;
	color: inherit;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

.vnr-comparison__row-desc {
	display: block;
	margin-top: .4rem;
	color: var(--vnr-body);
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: .875rem;
	line-height: 1.6;
}

.vnr-comparison__cell {
	color: var(--vnr-body);
	font-size: .9375rem;
	line-height: 1.7;
}

/* Soft primary tint panel, never gold, which fails as a text ground. */
.vnr-comparison__badge {
	/*
	 * A fully-rounded pill that wraps becomes a blob: "Yes, at 40% or 50%" was
	 * stacking four deep with the check glyph orphaned at the top. The table
	 * already scrolls inside its own region, which is the right place to absorb
	 * the extra width.
	 */
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .875rem;
	background: var(--vnr-primary-soft);
	border-radius: .55rem;
	color: var(--vnr-primary-deep);
	font-weight: 600;
	font-size: .875rem;
	line-height: 1.45;
}

.vnr-comparison__badge .bi {
	flex: 0 0 auto;
	font-size: 1rem;
}

.vnr-comparison__note {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	max-width: 88ch;
	color: var(--vnr-body);
	font-size: .9375rem;
	line-height: 1.7;
}

.vnr-comparison__note .bi {
	flex: 0 0 auto;
	color: var(--vnr-primary);
	font-size: 1.1rem;
	line-height: 1.55;
}

@media (min-width: 992px) {
	.vnr-comparison__th:nth-child(1) {
		width: 24%;
	}

	.vnr-comparison__th:nth-child(2),
	.vnr-comparison__th:nth-child(3) {
		width: 26%;
	}

	.vnr-comparison__th:nth-child(4) {
		width: 24%;
	}

	.vnr-comparison__row-th,
	.vnr-comparison__cell {
		padding: 1.6rem 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vnr-comparison__row-th,
	.vnr-comparison__cell {
		transition: none;
	}

	.vnr-comparison__scroll {
		scroll-behavior: auto;
	}
}

/* --- checklist ------------------------------------------------------------ */

/* --- Included-services checklist -------------------------------------- */

.vnr-checklist__intro {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-checklist__panel {
	padding: 1.75rem 1.25rem;
	border: 1px solid var(--vnr-border);
	border-radius: .875rem;
	background: var(--vnr-primary-soft);
}

@media (min-width: 768px) {
	.vnr-checklist__panel {
		padding: 2.5rem;
	}
}

@media (min-width: 992px) {
	.vnr-checklist__panel {
		padding: 3rem;
	}
}

.vnr-checklist__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Two columns from md up, laid out with CSS multi-column rather than the
 * Bootstrap grid so the list keeps the approved design's column-major reading
 * order: the first half of the rows fills the left column, the second half the
 * right, instead of snaking left-right-left across pairs.
 */
@media (min-width: 768px) {
	.vnr-checklist__list {
		column-count: 2;
		column-gap: 2.5rem;
	}
}

@media (min-width: 992px) {
	.vnr-checklist__list {
		column-gap: 3rem;
	}
}

.vnr-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: .875rem;
	margin: 0 0 1.15rem;
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
}

.vnr-checklist__item:last-child {
	margin-bottom: 0;
}

.vnr-checklist__icon {
	flex: none;
	margin-top: .2rem;
	font-size: 1.125rem;
	line-height: 1;
	color: var(--vnr-primary);
}

.vnr-checklist__text {
	display: block;
	min-width: 0;
}

.vnr-checklist__title {
	display: block;
	margin: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: .97rem;
	line-height: 1.65;
	color: var(--vnr-body);
	overflow-wrap: break-word;
}

/* A row that carries a second line leads with a firmer first line. */
.vnr-checklist__item--has-desc .vnr-checklist__title {
	font-weight: 700;
	color: var(--vnr-ink);
}

.vnr-checklist__desc {
	display: block;
	margin-top: .15rem;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--vnr-body);
	overflow-wrap: break-word;
}

/* --- quote ------------------------------------------------------------ */
/* --- Pull quote band (single, full-bleed) ------------------------------ */

/* The one dark band on the page. Section padding comes from .vnr-section
   (4rem / 5.5rem), so no py-* utility is used here. */
.vnr-section--quote {
	background: var(--vnr-dark);
	color: #fff;
}

.vnr-quote__figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	text-align: center;
}

.vnr-quote__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	max-width: 46rem;
}

/* --vnr-secondary, not .vnr-eyebrow's --vnr-secondary-deep: on --vnr-dark the
   deep gold measures 3.48:1 and fails AA at eyebrow size, while --vnr-secondary
   measures 5.77:1. Overriding here rather than touching the global rule. */
.vnr-section--quote .vnr-quote__eyebrow {
	color: var(--vnr-secondary);
}

/* The global h1-h3 rule paints every heading --vnr-primary, which on this band
   would be green on green. White, explicitly. */
.vnr-quote__heading {
	margin: 0;
	color: #fff;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.12;
	letter-spacing: -.01em;
}

.vnr-quote__subheading {
	margin: 0;
	max-width: 46rem;
	color: rgba(255, 255, 255, .82);
}

.vnr-quote__mark {
	display: inline-flex;
	color: var(--vnr-secondary);
}

.vnr-quote__mark svg {
	display: block;
	width: 24px;
	height: 24px;
}

.vnr-quote__text {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	max-width: 62.5rem;
	color: #fff;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	line-height: 1.28;
	letter-spacing: -.01em;
	overflow-wrap: break-word;
	text-wrap: balance;
}

.vnr-quote__text p {
	margin: 0;
}

.vnr-quote__rule {
	display: block;
	width: 64px;
	height: 2px;
	background: var(--vnr-secondary);
}

.vnr-quote__caption {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
}

.vnr-quote__attribution {
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
}

.vnr-quote__role {
	color: rgba(255, 255, 255, .82);
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	font-size: .9375rem;
	line-height: 1.5;
}

@media (min-width: 768px) {
	.vnr-quote__figure {
		gap: 2.125rem;
	}

	.vnr-quote__mark svg {
		width: 28px;
		height: 28px;
	}
}

@media (min-width: 992px) {
	.vnr-quote__header {
		gap: 1rem;
	}
}

/* --- costcompare ------------------------------------------------------------ */

/* --- Section: cost-of-inaction comparison (costcompare) ---------------- */

.vnr-section--costcompare {
	background: var(--vnr-soft-bg);
}

.vnr-costcompare__intro {
	margin-bottom: 2.5rem;
}

.vnr-costcompare__lede {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-costcompare__panel {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-radius: .9rem;
	box-shadow: 0 18px 44px rgba(var(--vnr-dark-rgb), .12);
}

/* Column headers: a desktop-only visual convenience. The per-row side labels
   below carry the same meaning for assistive tech at every width, so this
   block is aria-hidden in the markup and must never be the only cue. */
.vnr-costcompare__head {
	display: none;
}

.vnr-costcompare__head-title {
	display: block;
	margin-top: .35rem;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.2;
	color: var(--vnr-primary);
}

.vnr-costcompare__rows {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.vnr-costcompare__row {
	display: flex;
	flex-direction: column;
	gap: .85rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--vnr-border);
}

.vnr-costcompare__rows > .vnr-costcompare__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.vnr-costcompare__label {
	margin: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--vnr-primary);
}

.vnr-costcompare__pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .75rem;
}

.vnr-costcompare__side {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .9rem 1rem;
	border-radius: .5rem;
}

.vnr-costcompare__side--without {
	background: rgba(var(--vnr-accent-rgb), .07);
}

.vnr-costcompare__side--with {
	background: rgba(var(--vnr-primary-rgb), .07);
}

.vnr-costcompare__side-label {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.vnr-costcompare__figure {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: clamp(1.5rem, 4.5vw, 2rem);
	line-height: 1.1;
	letter-spacing: -.01em;
	overflow-wrap: break-word;
}

.vnr-costcompare__side--without .vnr-costcompare__side-label,
.vnr-costcompare__side--without .vnr-costcompare__figure {
	color: var(--vnr-accent);
}

.vnr-costcompare__side--with .vnr-costcompare__side-label,
.vnr-costcompare__side--with .vnr-costcompare__figure {
	color: var(--vnr-primary);
}

/* Bars are decoration on top of the figures, never a substitute for them. */
.vnr-costcompare__bar {
	display: block;
	width: 100%;
	height: .625rem;
	overflow: hidden;
	background: var(--vnr-border);
	border-radius: 999px;
}

.vnr-costcompare__bar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	transition: width .4s ease;
}

.vnr-costcompare__side--without .vnr-costcompare__bar-fill {
	background: var(--vnr-accent);
}

.vnr-costcompare__side--with .vnr-costcompare__bar-fill {
	background: var(--vnr-primary);
}

.vnr-costcompare__note {
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-costcompare__note > :last-child {
	margin-bottom: 0;
}

.vnr-costcompare__legend {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--vnr-border);
}

.vnr-costcompare__legend-item {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--vnr-body);
}

.vnr-costcompare__swatch {
	display: block;
	flex: none;
	width: .875rem;
	height: .875rem;
	border-radius: 3px;
}

.vnr-costcompare__swatch--without {
	background: var(--vnr-accent);
}

.vnr-costcompare__swatch--with {
	background: var(--vnr-primary);
}

/* Gold is a surface only; this panel takes --vnr-ink text. */
.vnr-costcompare__footnote {
	padding: 1.15rem 1.35rem;
	background: var(--vnr-secondary-soft);
	border-radius: .5rem;
	font-family: 'Inter', sans-serif;
	font-weight: 500;
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--vnr-ink);
}

@media (min-width: 768px) {

	.vnr-costcompare__panel {
		padding: 2.25rem;
	}

	.vnr-costcompare__head {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
		padding-bottom: 1rem;
		border-bottom: 2px solid var(--vnr-border);
	}

	.vnr-costcompare__head-cell {
		padding: 0 1rem;
	}

	.vnr-costcompare__pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}

	/* The visible column headers take over from here, so the per-row labels
	   go visually hidden. Clipped, not removed, so they still announce. */
	.vnr-costcompare__side-label {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.vnr-costcompare__label {
		font-size: 1.3rem;
	}
}

@media (min-width: 992px) {

	.vnr-costcompare__intro {
		margin-bottom: 3rem;
	}

	.vnr-costcompare__panel {
		padding: 2.5rem;
		gap: 2rem;
	}

	.vnr-costcompare__lede {
		font-size: 1.0625rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.vnr-costcompare__bar-fill {
		transition: none;
	}
}

/* --- routing ------------------------------------------------------------ */

/* --- Contact routing cards -------------------------------------------- */

.vnr-section--routing {
	background: #fff;
}

.vnr-routing__lead {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-routing__card {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.75rem;
	border-radius: .875rem;
	background: var(--vnr-soft-bg);
	transition: transform .2s ease, box-shadow .2s ease;
}

.vnr-routing__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(var(--vnr-dark-rgb), .1);
}

.vnr-routing__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff;
	color: var(--vnr-primary);
	font-size: 1.375rem;
	line-height: 1;
}

.vnr-routing__title {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--vnr-ink);
}

.vnr-routing__desc {
	margin: 0;
	flex: 1 1 auto;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-routing__contact {
	display: flex;
	flex-direction: column;
	gap: .375rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--vnr-border);
}

.vnr-routing__name {
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--vnr-ink);
}

.vnr-routing__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 44px;
	color: var(--vnr-primary);
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: color .2s ease;
}

.vnr-routing__link--tel {
	font-weight: 700;
	font-size: 1.0625rem;
}

.vnr-routing__link--mail {
	font-size: .9375rem;
	color: var(--vnr-body);
}

.vnr-routing__link .bi {
	flex: 0 0 auto;
	font-size: 1rem;
	line-height: 1;
}

a.vnr-routing__link:hover,
a.vnr-routing__link:focus-visible {
	color: var(--vnr-primary-deep);
	text-decoration: underline;
}

a.vnr-routing__link:focus-visible {
	outline: 2px solid var(--vnr-primary);
	outline-offset: 3px;
	border-radius: .25rem;
}

@media (min-width: 768px) {
	.vnr-routing__card {
		padding: 2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vnr-routing__card,
	.vnr-routing__link {
		transition: none;
	}

	.vnr-routing__card:hover {
		transform: none;
	}
}

/* ==========================================================================
   Page sections added in 0.9.16, the approved canvas designs
   Token-driven throughout: no literal brand colour appears below, so the
   Theme Options colour pipeline still governs every one of these bands.
   ========================================================================== */

/* --- Audience cards: "who we work with" ---------------------------------- */

.vnr-section--audience {
	background: var(--vnr-cream);
}

.vnr-audience__header {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	max-width: 48rem;
	margin: 0 0 2.75rem;
}

.vnr-audience__lead,
.vnr-audience__header .vnr-section__title {
	margin: 0;
}

.vnr-audience__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.vnr-audience__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.vnr-audience__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.vnr-audience__card {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-radius: .9rem;
	border-top: 3px solid var(--vnr-secondary);
	transition: transform .18s ease, box-shadow .18s ease;
}

.vnr-audience__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(22, 32, 43, .1);
}

.vnr-audience__title {
	margin: 0;
	font-size: 1.2rem;
	color: var(--vnr-primary);
	line-height: 1.25;
}

.vnr-audience__desc {
	margin: 0;
	font-size: .95rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

/* --- Listings: curated space cards --------------------------------------- */

.vnr-section--listings {
	background: #fff;
}

.vnr-listings__header {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0 0 2.5rem;
}

@media (min-width: 992px) {
	.vnr-listings__header {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: 3rem;
	}
}

.vnr-listings__headings {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	max-width: 40rem;
}

.vnr-listings__headings .vnr-section__title,
.vnr-listings__lead {
	margin: 0;
}

.vnr-listings__lead {
	max-width: 25rem;
	font-size: .97rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

/*
 * The two parts the queried band needs that the authored one never did: a
 * sentence when the portfolio is fully leased, and the archive link under the
 * cards. The authored band carried its links per card, so neither existed.
 */
.vnr-listings__empty {
	max-width: 40rem;
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-listings__more {
	margin: 2.5rem 0 0;
}

.vnr-listings__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
}

@media (min-width: 768px) {
	.vnr-listings__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.vnr-listings__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.vnr-listings__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.75rem;
	background: var(--vnr-cream);
	border: 1px solid var(--vnr-border);
	border-radius: .9rem;
	transition: transform .18s ease, box-shadow .18s ease;
}

.vnr-listings__card:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(22, 32, 43, .12);
}

.vnr-listings__badge {
	align-self: flex-start;
	padding: .25rem .6rem;
	border-radius: 50rem;
	background: var(--vnr-secondary);
	color: var(--vnr-dark);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.vnr-listings__meta {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vnr-secondary-text);
}

.vnr-listings__title {
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.2;
	color: var(--vnr-primary);
}

.vnr-listings__size {
	margin: 0;
	font-weight: 600;
	color: var(--vnr-ink);
}

.vnr-listings__desc {
	margin: 0;
	font-size: .93rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-listings__link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: auto;
	padding-top: .75rem;
	font-weight: 600;
	color: var(--vnr-primary);
	text-decoration: none;
}

.vnr-listings__link:hover,
.vnr-listings__link:focus-visible {
	color: var(--vnr-primary-deep);
	text-decoration: underline;
}

.vnr-listings__link .bi {
	transition: transform .18s ease;
}

.vnr-listings__card:hover .vnr-listings__link .bi {
	transform: translateX(3px);
}

/* --- Location panel ------------------------------------------------------ */

.vnr-section--location {
	background: var(--vnr-soft-bg);
}

.vnr-location__panel {
	padding: 2.5rem;
	background: var(--vnr-dark);
	border-radius: .9rem;
	color: #fff;
}

@media (min-width: 992px) {
	.vnr-location__panel {
		padding: 3rem 3.5rem;
	}
}

.vnr-location__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: flex-start;
}

/*
 * The heading rule sets its own colour, so an inherited white from the panel
 * would lose to it and the heading would render forest green on near-black.
 * Same failure the CTA band had; set it explicitly here too.
 */
.vnr-location__heading {
	margin: 0;
	color: #fff;
}

.vnr-location__note {
	margin: 0;
	max-width: 44rem;
	color: rgba(255, 255, 255, .86);
}

.vnr-location__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	width: 100%;
	margin: .5rem 0 0;
}

@media (min-width: 768px) {
	.vnr-location__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vnr-location__row dt {
	margin-bottom: .3rem;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--vnr-secondary);
}

.vnr-location__row dd {
	margin: 0;
	line-height: 1.7;
	color: rgba(255, 255, 255, .92);
}

.vnr-location__row a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.vnr-location__row a:hover,
.vnr-location__row a:focus-visible {
	color: var(--vnr-secondary);
}

.vnr-location__directions {
	--bs-btn-color: #fff;
	--bs-btn-border-color: rgba(255, 255, 255, .5);
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-color: var(--vnr-dark);
	--bs-btn-hover-border-color: #fff;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: .5rem;
}

/*
 * The estimator bands are the only two section types with no ground of their
 * own, which left them reading as an unbanded stretch of body colour. This sits
 * in the theme rather than in the page standard so the standalone calculator
 * page gets it too.
 */
.vnr-section--calculator,
.vnr-section--workforce {
	background: #fff;
	border-block: 1px solid var(--vnr-border);
}

/* --- Calculator section frame -------------------------------------------- */

.vnr-calcsection__header {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	max-width: 48rem;
	margin: 0 auto;
	padding: 4rem 0 0;
	text-align: center;
	align-items: center;
}

.vnr-calcsection__header .vnr-section__title,
.vnr-calcsection__lead {
	margin: 0;
}

.vnr-calcsection__lead {
	color: var(--vnr-body);
	line-height: 1.7;
}

.vnr-calcsection__note {
	max-width: 48rem;
	margin: 0 auto;
	padding: 0 0 3rem;
	font-size: .9rem;
	line-height: 1.7;
	color: var(--vnr-body);
	text-align: center;
}

/* --- Disclaimer band ----------------------------------------------------- */

.vnr-section--disclaimer {
	padding: 2.5rem 0;
	background: var(--vnr-cream);
}

.vnr-disclaimer__card {
	display: flex;
	gap: 1.25rem;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-left: 6px solid var(--vnr-accent);
	border-radius: .6rem;
}

.vnr-disclaimer__icon {
	flex: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--vnr-accent);
}

.vnr-disclaimer__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.vnr-disclaimer__heading {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	color: var(--vnr-ink);
}

.vnr-disclaimer__text {
	margin: 0;
	font-size: .88rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

/* --- FAQ: two-column rail ------------------------------------------------ */

.vnr-section--faq {
	background: var(--vnr-soft-bg);
}

.vnr-faq__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 992px) {
	.vnr-faq__layout {
		grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
		gap: 3.5rem;
	}
}

.vnr-faq__rail {
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.vnr-faq__heading {
	margin: 0;
}

.vnr-faq__lead {
	margin: 0;
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-faq__panel {
	min-width: 0;
}

/* --- CTA panel ----------------------------------------------------------- */

.vnr-section--cta {
	background: var(--vnr-cream);
}

.vnr-cta__panel {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding: 2.5rem;
	border-radius: .9rem;
}

@media (min-width: 992px) {
	.vnr-cta__panel {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 3rem;
		padding: 3rem 3.5rem;
	}
}

.vnr-cta__body {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	max-width: 46rem;
}

.vnr-cta__eyebrow {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}

/*
 * Every tone sets the heading colour explicitly. The theme's heading rule
 * applies `color: var(--vnr-primary)` directly to the element, and a
 * descendant's own colour beats an inherited one. That is how the old band
 * ended up rendering a green heading on a green background at 1.00:1.
 */
.vnr-cta__heading {
	margin: 0;
	font-size: clamp(1.65rem, 2.6vw, 2.2rem);
	line-height: 1.15;
	letter-spacing: -.01em;
}

.vnr-cta__lead {
	margin: 0;
	line-height: 1.7;
}

.vnr-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	flex: none;
}

.vnr-cta__btn {
	--bs-btn-padding-y: .85rem;
	--bs-btn-padding-x: 1.9rem;
	font-weight: 600;
}

/* Gold panel, dark green ink at 5.81:1. */
.vnr-cta__panel--gold {
	background: var(--vnr-secondary);
}

.vnr-cta__panel--gold .vnr-cta__heading,
.vnr-cta__panel--gold .vnr-cta__lead {
	color: var(--vnr-dark);
}

.vnr-cta__panel--gold .vnr-cta__eyebrow {
	color: var(--vnr-accent-deep);
}

.vnr-cta__panel--gold .vnr-cta__btn--primary {
	--bs-btn-bg: var(--vnr-dark);
	--bs-btn-border-color: var(--vnr-dark);
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: var(--vnr-primary-deep);
	--bs-btn-hover-border-color: var(--vnr-primary-deep);
	--bs-btn-hover-color: #fff;
}

.vnr-cta__panel--gold .vnr-cta__btn--secondary {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--vnr-dark);
	--bs-btn-color: var(--vnr-dark);
	--bs-btn-hover-bg: var(--vnr-dark);
	--bs-btn-hover-border-color: var(--vnr-dark);
	--bs-btn-hover-color: #fff;
}

/* Dark panel. */
.vnr-cta__panel--dark {
	background: var(--vnr-dark);
}

.vnr-cta__panel--dark .vnr-cta__heading {
	color: #fff;
}

.vnr-cta__panel--dark .vnr-cta__lead {
	color: rgba(255, 255, 255, .88);
}

.vnr-cta__panel--dark .vnr-cta__eyebrow {
	color: var(--vnr-secondary);
}

.vnr-cta__panel--dark .vnr-cta__btn--primary {
	--bs-btn-bg: var(--vnr-secondary);
	--bs-btn-border-color: var(--vnr-secondary);
	--bs-btn-color: var(--vnr-dark);
	--bs-btn-hover-bg: var(--vnr-secondary-deep);
	--bs-btn-hover-border-color: var(--vnr-secondary-deep);
	--bs-btn-hover-color: var(--vnr-dark);
}

.vnr-cta__panel--dark .vnr-cta__btn--secondary {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: rgba(255, 255, 255, .55);
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: #fff;
	--bs-btn-hover-color: var(--vnr-dark);
}

/* Green panel. */
.vnr-cta__panel--green {
	background: var(--vnr-primary);
}

.vnr-cta__panel--green .vnr-cta__heading {
	color: #fff;
}

.vnr-cta__panel--green .vnr-cta__lead {
	color: rgba(255, 255, 255, .9);
}

.vnr-cta__panel--green .vnr-cta__eyebrow {
	color: var(--vnr-secondary);
}

.vnr-cta__panel--green .vnr-cta__btn--primary {
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #fff;
	--bs-btn-color: var(--vnr-primary);
	--bs-btn-hover-bg: var(--vnr-cream);
	--bs-btn-hover-border-color: var(--vnr-cream);
	--bs-btn-hover-color: var(--vnr-primary-deep);
}

.vnr-cta__panel--green .vnr-cta__btn--secondary {
	--bs-btn-bg: transparent;
	--bs-btn-border-color: rgba(255, 255, 255, .55);
	--bs-btn-color: #fff;
	--bs-btn-hover-bg: #fff;
	--bs-btn-hover-border-color: #fff;
	--bs-btn-hover-color: var(--vnr-primary);
}

/*
 * The eyebrow's default gold-deep is tuned for cream. On the dark location
 * panel it measured 3.12:1, so the tone that reads on dark is the brighter
 * --vnr-secondary (8.4:1 on --vnr-dark). Scoped to the panel rather than
 * changed globally, which would take the eyebrow the wrong way on light bands.
 */
.vnr-location__panel .vnr-eyebrow {
	color: var(--vnr-secondary);
}

/* ==========================================================================
   Image slots and tool placeholders (0.9.19)
   Both states of a slot draw the same box, so dropping the real file in swaps
   the picture without moving anything. Tokens only, no literal colours.
   ========================================================================== */

.vnr-slot {
	margin: 0;
}

.vnr-slot__box {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--vnr-slot-ratio, 3 / 2);
	border-radius: .9rem;
	background: var(--vnr-soft-bg);
}

.vnr-slot__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The placeholder names the file it is waiting for, which is the whole point
   while the client is generating images from the inventory document. */
.vnr-slot--empty .vnr-slot__box {
	border: 1px dashed var(--vnr-border);
	background: var(--vnr-soft-bg);
}

.vnr-slot__ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 1.25rem;
	text-align: center;
}

.vnr-slot__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--vnr-primary-soft);
	color: var(--vnr-primary);
	font-size: 1.25rem;
	line-height: 1;
}

.vnr-slot__label {
	max-width: 26rem;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--vnr-ink);
}

.vnr-slot__file {
	padding: .15rem .5rem;
	border-radius: .3rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	font-size: .78rem;
	color: var(--vnr-body);
}

.vnr-slot__ratio {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vnr-body);
}

.vnr-slot__caption {
	margin: .75rem 0 0;
	font-size: .88rem;
	line-height: 1.6;
	color: var(--vnr-body);
}

.vnr-slot__caption::before {
	content: "";
	display: block;
	width: 1.75rem;
	height: 2px;
	margin-bottom: .5rem;
	background: var(--vnr-secondary);
}

/* A card thumbnail is small, so drop the ratio chip and shrink the chrome. */
.vnr-slot--card .vnr-slot__box {
	border-radius: .9rem .9rem 0 0;
}

.vnr-slot--card .vnr-slot__ratio {
	display: none;
}

.vnr-slot--card .vnr-slot__icon {
	width: 2rem;
	height: 2rem;
	font-size: 1rem;
}

.vnr-slot--card .vnr-slot__label {
	font-size: .8rem;
}

/*
 * The comp lifts the header photo off the band and slips a warm plate out from
 * behind it. Both are painted with box-shadow rather than a pseudo element:
 * a shadow follows the box's own border-radius, so the plate cannot drift out
 * of register, and .vnr-slot__box's overflow clip would have eaten a ::before.
 *
 * The offset stays inside the column gutter plus the container padding, so
 * nothing bleeds past the container at any width.
 */
.vnr-slot--header {
	--vnr-slot-plate: .5rem;
}

.vnr-slot--header .vnr-slot__box {
	border-radius: 1.25rem;
	box-shadow:
		var(--vnr-slot-plate) var(--vnr-slot-plate) 0 0 var(--vnr-secondary),
		0 18px 44px rgba(22, 32, 43, .12);
}

@media (min-width: 992px) {

	.vnr-slot--header {
		--vnr-slot-plate: 1rem;
	}
}

/*
 * Passed by sections/figure.php since 0.9.19 with no rule behind it. A band
 * photo is the widest plate on a page, so it takes the generous radius and the
 * soft lift but not the offset: at full container width the plate would run
 * past the container edge.
 */
.vnr-slot--band .vnr-slot__box {
	border-radius: 1.1rem;
	box-shadow: 0 16px 40px rgba(22, 32, 43, .10);
}

/* --- Figure band --------------------------------------------------------- */

.vnr-section--figureband {
	padding: 2.5rem 0;
}

.vnr-section--figureband-soft {
	background: var(--vnr-soft-bg);
}

.vnr-section--figureband-soft .vnr-slot__box {
	background: var(--vnr-cream);
}

.vnr-figureband__heading {
	margin: 0 0 1.5rem;
}

/* --- Calculator placeholder ---------------------------------------------- */

/*
 * Persistent pause for the mobile scrolling rows. Sits above the row rather than
 * inside it, so it does not scroll away with the content. Desktop never
 * auto-scrolls these, so the control is not drawn there.
 */
.vnr-marquee__controls {
	display: flex;
	justify-content: flex-end;
	margin-bottom: .5rem;
}

@media (min-width: 992px) {
	.vnr-marquee__controls {
		display: none;
	}
}

.vnr-marquee__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--vnr-border);
	border-radius: 50%;
	background: #fff;
	color: var(--vnr-primary);
	line-height: 1;
	padding: 0;
}

.vnr-marquee__toggle:focus-visible {
	outline: 3px solid var(--vnr-secondary-text);
	outline-offset: 2px;
}

/*
 * The built leasing tools. Deliberately close to .vnr-calcslot, which they
 * replace in the same slot, so approving a tool changes the content of the band
 * and not its weight on the page. The dashed border is the one thing that goes:
 * that was the placeholder saying it was unfinished.
 */
.vnr-section--tool {
	background: var(--vnr-soft-bg);
}

.vnr-tool__head {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	max-width: 46rem;
	margin: 0 0 2rem;
}

.vnr-tool__heading,
.vnr-tool__lead {
	margin: 0;
}

.vnr-tool__lead {
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-tool__panel {
	border: 1px solid var(--vnr-border);
	border-radius: .9rem;
	background: #fff;
	padding: 1.75rem;
}

.vnr-tool__inputs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.1rem;
}

@media (min-width: 576px) {
	.vnr-tool__inputs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.vnr-tool__field .form-label {
	font-size: .9rem;
	font-weight: 600;
	color: var(--vnr-body);
	margin-bottom: .35rem;
}

/* The $ and % sit inside the field rather than beside it, so the control keeps
   one focus ring instead of the affix growing its own. */
.vnr-tool__control {
	position: relative;
	display: flex;
	align-items: center;
}

.vnr-tool__control .form-control {
	padding-left: 2rem;
}

.vnr-tool__affix {
	position: absolute;
	left: .85rem;
	color: var(--vnr-muted);
	pointer-events: none;
}

.vnr-tool__affix:last-child {
	left: auto;
	right: .85rem;
}

.vnr-tool__control:has(.vnr-tool__affix:last-child:not(:first-child)) .form-control,
.vnr-tool__control .vnr-tool__affix:last-child ~ .form-control {
	padding-right: 2.25rem;
}

.vnr-tool__actions {
	margin-top: 1.5rem;
}

.vnr-tool__result {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--vnr-border);
}

.vnr-tool__answer-label {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vnr-body);
	margin: 0 0 .4rem;
}

.vnr-tool__answer {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
	line-height: 1.15;
	color: var(--vnr-primary);
	margin: 0 0 1.25rem;
}

.vnr-tool__lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .55rem;
}

.vnr-tool__lines li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding-bottom: .55rem;
	border-bottom: 1px solid var(--vnr-border);
	font-size: .95rem;
}

.vnr-tool__lines li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.vnr-tool__notes {
	margin-top: 1.75rem;
	max-width: 60ch;
}

.vnr-tool__notes-title {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vnr-body);
	margin: 0 0 .6rem;
}

.vnr-tool__notes ul {
	margin: 0;
	padding-left: 1.1rem;
	color: var(--vnr-muted);
	font-size: .9rem;
	line-height: 1.6;
}

.vnr-tool__notes li + li {
	margin-top: .4rem;
}

.vnr-tool__cta {
	margin: 1.5rem 0 0;
	max-width: 60ch;
}

.vnr-section--calcslot {
	background: var(--vnr-soft-bg);
}

.vnr-calcslot__head {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	max-width: 46rem;
	margin: 0 0 2rem;
}

.vnr-calcslot__heading,
.vnr-calcslot__lead {
	margin: 0;
}

.vnr-calcslot__lead {
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-calcslot__panel {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border: 2px dashed var(--vnr-border);
	border-radius: .9rem;
	background: #fff;
	overflow: hidden;
}

@media (min-width: 768px) {
	.vnr-calcslot__panel {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.vnr-calcslot__inputs {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 2rem;
}

.vnr-calcslot__field {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.vnr-calcslot__flabel {
	font-size: .85rem;
	font-weight: 600;
	color: var(--vnr-ink);
}

/* An empty bar rather than a real input: nothing here accepts typing, and a
   working-looking field on a page about money would be worse than an honest
   blank. */
.vnr-calcslot__finput {
	height: 2.75rem;
	border-radius: .55rem;
	background: var(--vnr-soft-bg);
	border: 1px solid var(--vnr-border);
}

.vnr-calcslot__result {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .5rem;
	padding: 2rem;
	background: var(--vnr-cream);
	border-top: 1px solid var(--vnr-border);
}

@media (min-width: 768px) {
	.vnr-calcslot__result {
		border-top: 0;
		border-left: 1px solid var(--vnr-border);
	}
}

.vnr-calcslot__rlabel {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vnr-body);
}

.vnr-calcslot__rvalue {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: 2.5rem;
	line-height: 1;
	color: var(--vnr-primary);
}

.vnr-calcslot__note {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 1rem 0 0;
	font-size: .88rem;
	color: var(--vnr-body);
}

.vnr-calcslot__note .bi {
	color: var(--vnr-secondary-text);
}

/* --- Contact map empty state --------------------------------------------- */

/*
 * The design put this in a dark office card, but the built contact section is
 * light, so the white treatment it shipped with measured 1.14:1 and was
 * effectively invisible. Light-surface tokens instead.
 */
.vnr-contact__map--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-height: 12rem;
	padding: 1.25rem;
	text-align: center;
	background: var(--vnr-soft-bg);
	border: 1px dashed var(--vnr-border);
	border-radius: .5rem;
}

.vnr-contact__map--empty .vnr-slot__icon {
	background: var(--vnr-primary-soft);
	color: var(--vnr-primary);
}

.vnr-contact__map--empty .vnr-slot__label {
	color: var(--vnr-ink);
}

.vnr-contact__map--empty .vnr-slot__ratio {
	color: var(--vnr-body);
	text-transform: none;
	letter-spacing: 0;
}

.vnr-calcslot__panel {
	position: relative;
}

/* Maroon plus a tool icon is already the site's "notice this" signal on the
   disclaimer card. Reuse it so the panel cannot be mistaken for a live tool. */
.vnr-calcslot__chip {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .3rem .7rem;
	border-radius: 50rem;
	background: var(--vnr-accent-soft, var(--vnr-primary-soft));
	color: var(--vnr-accent);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.vnr-calcslot__note span {
	flex: 1 1 auto;
}

.vnr-calcslot__note a {
	color: var(--vnr-primary);
	font-weight: 600;
}

/* A portrait slot caps its own width so it cannot swallow the page. The value
   comes from the ratio, set inline by template-parts/image-slot.php. */
.vnr-slot__box {
	max-width: var(--vnr-slot-cap, none);
	margin-inline: auto;
}

/* --- Intro band ---------------------------------------------------------- */

.vnr-section--intro {
	padding: 3.5rem 0;
}

.vnr-intro__header {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	max-width: 48rem;
	margin: 0 0 1.75rem;
}

.vnr-intro__heading {
	margin: 0;
}

/*
 * A short lede runs the full container width, so it is set larger. Two lines of
 * standfirst across the container reads as deliberate; the same words at body
 * size would look like a stray paragraph.
 */
.vnr-intro__body--lead {
	font-size: 1.2rem;
	line-height: 1.65;
	color: var(--vnr-ink);
}

@media (min-width: 992px) {

	.vnr-intro__body--lead {
		font-size: 1.3rem;
	}
}

/*
 * A long passage fills the container edge to edge in two columns, which keeps
 * each one near 70 characters. Columns only above 992px: below that the
 * container is already a sensible measure and splitting it would produce two
 * very narrow, very tall columns.
 */
@media (min-width: 992px) {

	.vnr-intro__body--columns {
		column-count: 2;
		column-gap: 4rem;
	}

	/* Reading order runs down column one then down column two, so a paragraph
	   split across the break would be read out of sequence. */
	.vnr-intro__body--columns > * {
		break-inside: avoid;
	}

	.vnr-intro__body--columns > *:first-child {
		margin-top: 0;
	}
}

/* --- Team directory: grid, card, department filters -------------------- */

/*
 * Sits beside the .vnr-team__* block above, which styles the schema-driven
 * leadership section. Same portrait plate, same type ramp; separate names
 * because this card is a linked archive card with settings-driven parts, not a
 * repeater row.
 */

.vnr-team-directory__count {
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--vnr-body);
}

.vnr-team-directory__empty p {
	max-width: var(--vnr-measure, 41rem);
	margin-inline: auto;
	color: var(--vnr-body);
}

/* --- Department filter bar --------------------------------------------- */

.vnr-team-filters {
	margin-bottom: 2.5rem;
}

.vnr-team-filters__link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem 1rem;
	border: 1px solid var(--vnr-border);
	border-radius: 50rem;
	background: #fff;
	color: var(--vnr-primary);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.vnr-team-filters__link:hover,
.vnr-team-filters__link:focus-visible {
	border-color: var(--vnr-primary);
	background: rgba(var(--vnr-primary-rgb), .07);
	color: var(--vnr-primary);
}

.vnr-team-filters__link.is-current {
	background: var(--vnr-primary);
	border-color: var(--vnr-primary);
	color: #fff;
}

.vnr-team-filters__count {
	font-size: .75rem;
	font-weight: 600;
	color: var(--vnr-body);
}

.vnr-team-filters__link.is-current .vnr-team-filters__count {
	color: rgba(255, 255, 255, .8);
}

/* --- Directory card ---------------------------------------------------- */

.vnr-team-card {
	overflow: hidden;
	border-radius: .9rem;
	background: #fff;
	transition: transform .2s ease, box-shadow .2s ease;
}

.vnr-team-card:hover,
.vnr-team-card:focus-within {
	transform: translateY(-3px);
}

/* The name carries .stretched-link, so keyboard focus lands on a hit area the
   size of the whole card. Ring the card, not just the few words of the name. */
.vnr-team-card:focus-within {
	outline: 2px solid var(--vnr-primary);
	outline-offset: 3px;
}

.vnr-team-card:hover {
	box-shadow: 0 12px 30px rgba(22, 32, 43, .12) !important;
}

/*
 * Bootstrap's .ratio drives its box off --bs-aspect-ratio, so the 4:5 portrait
 * plate is set here rather than with an inline style. Matches .vnr-team__media
 * above: same crop, same top-weighted framing, so a headshot is never cut off
 * at the chin.
 */
.vnr-team-card__media {
	--bs-aspect-ratio: 125%;

	background: var(--vnr-soft-bg);
}

.vnr-team-card__photo {
	object-position: center top;
	transition: transform .35s ease;
}

.vnr-team-card:hover .vnr-team-card__photo {
	transform: scale(1.03);
}

/* No headshot yet: a deliberate panel, never a broken image. */
.vnr-team-card__placeholder {
	position: absolute;
	inset: 0;
	color: var(--vnr-primary);
	font-size: 2.5rem;
}

.vnr-team-card__name {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.01em;
}

.vnr-team-card__name a {
	color: var(--vnr-primary);
}

.vnr-team-card__name a:hover,
.vnr-team-card__name a:focus-visible {
	color: var(--vnr-ink);
}

.vnr-team-card__creds {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--vnr-body);
}

/*
 * Same uppercase eyebrow treatment as .vnr-team__role above, but in body ink.
 * The gold reads at 4.06:1 on white, under AA for text this size, and a job
 * title is content rather than decoration.
 */
.vnr-team-card__role {
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--vnr-body);
}

.vnr-team-card__dept {
	border-top: 1px solid var(--vnr-border);
	font-size: .8125rem;
	color: var(--vnr-body);
}

@media (prefers-reduced-motion: reduce) {

	.vnr-team-card,
	.vnr-team-card__photo {
		transition: none;
	}

	.vnr-team-card:hover,
	.vnr-team-card:focus-within,
	.vnr-team-card:hover .vnr-team-card__photo {
		transform: none;
	}
}

/* ==========================================================================
   Team: single member profile + quick-view slide-over (0.9.21)

   Tokens only. No literal brand colour appears below, so the Theme Options
   colour pipeline still governs every surface here. The slide-over block
   styles markup that only ever exists when assets/js/team.js has run.
   ========================================================================== */

/* --- Single profile: header ---------------------------------------------- */

.team-single__back {
	color: var(--vnr-body);
	font-weight: 600;
}

.team-single__back:hover,
.team-single__back:focus-visible {
	color: var(--vnr-primary);
	text-decoration: underline;
}

.team-single__depts {
	margin: 0 0 1rem;
}

.team-single__dept {
	display: inline-flex;
	align-items: center;
	padding: .35rem .8rem;
	border: 1px solid var(--vnr-border);
	border-radius: 999px;
	background: var(--vnr-primary-soft);
	color: var(--vnr-primary);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.team-single__dept:hover,
.team-single__dept:focus-visible {
	background: var(--vnr-primary);
	border-color: var(--vnr-primary);
	color: var(--vnr-cream);
}

/* A department with no term link is still shown, just not as a control. */
.team-single__dept--plain {
	background: var(--vnr-soft-bg);
	color: var(--vnr-body);
}

.team-single__name {
	font-family: 'Playfair Display', Georgia, serif;
	letter-spacing: -.01em;
	color: var(--vnr-ink);
}

/*
 * Post-nominals sit on the name's baseline at roughly half its size. Kept on
 * --vnr-body, not --vnr-secondary-deep: this can render at ~13px on a phone,
 * which the gold would fail at 4.5:1.
 */
.team-single__creds {
	font-size: .45em;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--vnr-body);
	white-space: nowrap;
}

.team-single__role {
	margin: 0;
	color: var(--vnr-primary);
	font-weight: 600;
}

/* --- Single profile: portrait and panels --------------------------------- */

.team-single__portrait {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--vnr-border);
	border-radius: .9rem;
	background: var(--vnr-soft-bg);
}

.team-single__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.team-single__photo--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 4rem;
	color: var(--vnr-primary);
	opacity: .3;
}

.team-single__panel {
	margin-top: 1.5rem;
	padding: 1.5rem;
	border: 1px solid var(--vnr-border);
	border-radius: .9rem;
	background: var(--vnr-soft-bg);
}

.team-single__panel-title {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--vnr-ink);
}

.team-single__contact li + li {
	margin-top: .7rem;
}

.team-single__contact a {
	display: flex;
	align-items: center;
	gap: .65rem;
	color: var(--vnr-body);
	font-weight: 600;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.team-single__contact a:hover,
.team-single__contact a:focus-visible {
	color: var(--vnr-primary);
	text-decoration: underline;
}

.team-single__contact i {
	flex: 0 0 auto;
	color: var(--vnr-primary);
}

.team-single__details dt,
.team-single__details dd {
	margin: 0;
	padding: .55rem 0;
	font-size: .925rem;
	border-bottom: 1px solid var(--vnr-border);
}

.team-single__details dt {
	color: var(--vnr-body);
	font-weight: 500;
}

.team-single__details dd {
	color: var(--vnr-ink);
	font-weight: 600;
}

.team-single__details dt:last-of-type,
.team-single__details dd:last-of-type {
	padding-bottom: 0;
	border-bottom: 0;
}

/* --- Single profile: qualifications and colleagues ------------------------ */

.team-single__quals h2,
.team-single__colleagues h2 {
	font-family: 'Playfair Display', Georgia, serif;
	color: var(--vnr-ink);
}

.team-single__qual-list i {
	color: var(--vnr-secondary-text);
}

.team-single__qual-list span {
	color: var(--vnr-body);
}

.team-single__colleagues {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--vnr-border);
}

.team-colleague {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--vnr-border);
	border-radius: .9rem;
	background: var(--vnr-soft-bg);
	color: inherit;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.team-colleague:hover,
.team-colleague:focus-visible {
	transform: translateY(-3px);
	border-color: var(--vnr-primary);
	box-shadow: 0 12px 28px rgba(var(--vnr-dark-rgb), .14);
}

.team-colleague__media {
	display: block;
	background: var(--vnr-border);
}

.team-colleague__photo {
	display: block;
	width: 100%;
	height: auto;
	/* 4:5, the same portrait plate the archive cards use. */
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
}

.team-colleague__photo--empty {
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	color: var(--vnr-primary);
	opacity: .3;
}

.team-colleague__body {
	display: block;
	padding: .9rem 1rem 1.1rem;
}

.team-colleague__name {
	display: block;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--vnr-ink);
}

.team-colleague__role {
	display: block;
	margin-top: .25rem;
	font-size: .85rem;
	color: var(--vnr-body);
}

/* --- Injected search (assets/js/team.js) --------------------------------- */

/*
 * A row of its own. team.js appends this into the same flex container as the
 * department pills, so it inherited the row's gap horizontally only and its
 * label sat flush against the pill above it: a 0px box gap on a page whose
 * other vertical gaps are 40 and 48.
 */
.vnr-team-search {
	display: flex;
	flex: 1 1 100%;
	flex-basis: 100%;
	flex-direction: column;
	gap: .4rem;
	max-width: 26rem;
	margin: 1.5rem 0 1.75rem;
}

.vnr-team-search__label {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vnr-body);
}

.vnr-team-search__field {
	position: relative;
	display: flex;
	align-items: center;
}

.vnr-team-search__icon {
	position: absolute;
	left: .9rem;
	color: var(--vnr-primary);
	pointer-events: none;
}

.vnr-team-search__input {
	width: 100%;
	padding: .7rem 1rem .7rem 2.6rem;
	font: inherit;
	color: var(--vnr-ink);
	background: var(--vnr-soft-bg);
	border: 1px solid var(--vnr-border);
	border-radius: .55rem;
}

/*
 * :focus-visible, and the same solid ring every other focusable element on the
 * page carries. The 45% alpha composited to 2.12:1 against the cream ground,
 * under the 3:1 SC 1.4.11 asks of a focus indicator, and :focus painted it on a
 * mouse click where nothing else on the page does.
 */
.vnr-team-search__input:focus-visible {
	border-color: var(--vnr-primary);
	outline: 3px solid var(--vnr-primary);
	outline-offset: 2px;
}

/* Holds a line of space so announcing a count never reflows the card grid. */
.vnr-team-search__status {
	min-height: 1.3rem;
	margin: 0;
	font-size: .875rem;
	color: var(--vnr-body);
}

/* --- Quick-view slide-over ----------------------------------------------- */

html.vnr-quickview-open,
html.vnr-quickview-open body {
	overflow: hidden;
}

.vnr-quickview {
	position: fixed;
	inset: 0;
	z-index: 1090; /* above the offcanvas backdrop (1040) and the skip link (1080) */
}

/* The element stays in the flow for the length of the close transition, so it
   has to stop swallowing clicks the moment it starts leaving. */
.vnr-quickview:not(.is-open) {
	pointer-events: none;
}

.vnr-quickview__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(var(--vnr-dark-rgb), .55);
	opacity: 0;
	transition: opacity .28s ease;
}

.vnr-quickview.is-open .vnr-quickview__backdrop {
	opacity: 1;
}

.vnr-quickview__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: .8rem;
	width: min(26rem, 100%);
	padding: 4rem 1.75rem 2rem;
	overflow-y: auto;
	background: var(--vnr-cream);
	border-left: 4px solid var(--vnr-primary);
	box-shadow: -18px 0 44px rgba(var(--vnr-dark-rgb), .22);
	transform: translateX(100%);
	transition: transform .28s cubic-bezier(.22, .61, .36, 1);
}

.vnr-quickview.is-open .vnr-quickview__panel {
	transform: translateX(0);
}

.vnr-quickview__close {
	position: absolute;
	top: .9rem;
	right: .9rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: var(--vnr-primary);
	background: transparent;
	border: 1px solid var(--vnr-border);
	border-radius: .55rem;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.vnr-quickview__close:hover,
.vnr-quickview__close:focus-visible {
	background: var(--vnr-primary);
	border-color: var(--vnr-primary);
	color: var(--vnr-cream);
}

.vnr-quickview__dept {
	margin: 0;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vnr-primary);
}

.vnr-quickview__name {
	margin: 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--vnr-ink);
}

.vnr-quickview__role {
	margin: 0;
	font-weight: 600;
	color: var(--vnr-primary);
}

.vnr-quickview__bio {
	margin: 0;
	line-height: 1.7;
	color: var(--vnr-body);
}

/* margin-top:auto pins the profile link to the foot of the panel, however
   short the excerpt is. */
.vnr-quickview__link {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: .5rem;
	margin-top: auto;
	padding: .7rem 1.4rem;
	background: var(--vnr-primary);
	color: var(--vnr-cream);
	font-weight: 600;
	text-decoration: none;
	border-radius: .55rem;
	transition: background-color .2s ease;
}

.vnr-quickview__link:hover,
.vnr-quickview__link:focus-visible {
	background: var(--vnr-primary-deep);
	color: var(--vnr-cream);
}

/* Below md the panel is a bottom sheet: a right-hand drawer on a phone leaves
   no readable width. */
@media (max-width: 767.98px) {

	.vnr-quickview__panel {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		max-height: 85vh;
		border-top: 4px solid var(--vnr-primary);
		border-left: 0;
		border-radius: .9rem .9rem 0 0;
		box-shadow: 0 -18px 44px rgba(var(--vnr-dark-rgb), .22);
		transform: translateY(100%);
	}

	.vnr-quickview.is-open .vnr-quickview__panel {
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.vnr-quickview__backdrop,
	.vnr-quickview__panel,
	.vnr-quickview__close,
	.vnr-quickview__link,
	.team-single__dept,
	.team-colleague {
		transition: none;
	}

	.team-colleague:hover,
	.team-colleague:focus-visible {
		transform: none;
	}
}

/* --- Gold as text via the Bootstrap utility ------------------------------- */

/*
 * .text-secondary resolves to --bs-secondary, the brand gold, which is 2.19:1
 * on cream. Templates reach for it as an eyebrow colour in eight places:
 * property card and single kickers, the calculator result label, the search
 * heading. Retinting the utility fixes all of them at once, and any later use,
 * rather than leaving the next one to fail the same way.
 */
.text-secondary {
	/* !important because Bootstrap declares the utility's colour with it. */
	color: var(--vnr-secondary-text) !important;
}

/*
 * The dark bands are the exception. There gold is the readable choice at
 * 5.81:1 and the darkened text shade is the one that fails, so it is put back.
 *
 * .vnr-section--location is deliberately NOT here: that band is --vnr-soft-bg,
 * a light ground, and gold on it measures 2.67:1. Only the dark panel inside it
 * qualifies, which is why .vnr-location__panel is listed instead.
 *
 * The GREEN grounds, .vnr-section--figures and .vnr-cta__panel--green, are not
 * here either. --vnr-primary needs light text but cannot carry gold: 3.23:1.
 * Anything on those bands takes white.
 */
.vnr-hero .text-secondary,
.site-topbar .text-secondary,
.vnr-ctaband .text-secondary,
.site-footer .text-secondary,
.vnr-stats .text-secondary,
.vnr-section--steps-dark .text-secondary,
.vnr-section--figures-dark .text-secondary,
.vnr-section--timeline .text-secondary,
.vnr-section--quote .text-secondary,
.vnr-location__panel .text-secondary,
.vnr-cta__panel--dark .text-secondary {
	color: var(--vnr-secondary) !important;
}

/* --- Breadcrumbs --------------------------------------------------------- */

/*
 * Bootstrap's .link-secondary resolves to --bs-secondary, which is the brand
 * gold. Gold on a light band measures 2.67:1 and fails AA, and this partial is
 * on every interior page. Scoped to the breadcrumb so other .link-secondary
 * uses are untouched.
 */
.breadcrumb .link-secondary {
	/* !important because Bootstrap's .link-* helpers declare colour with it. */
	color: var(--vnr-primary) !important;
	text-decoration: underline;
	text-underline-offset: .15em;
}

.breadcrumb .link-secondary:hover,
.breadcrumb .link-secondary:focus-visible {
	color: var(--vnr-primary-deep) !important;
}

/* ======================================================================== */
/*  Employer childcare pages: accordion, page header, estimators, tables    */
/* ======================================================================== */

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

/*
 * theme.css carried no .accordion rule at all, so the FAQ rendered as raw
 * Bootstrap: a blue-tinted open row from --bs-primary-bg-subtle, a slate
 * chevron and a 4px blue focus glow, none of which follow the brand.
 *
 * Everything below is set through Bootstrap's own --bs-accordion-* API, so the
 * collapse plugin, aria-expanded, aria-controls and data-bs-parent are all
 * untouched and a Theme Options colour change still flows through.
 *
 * The chevron is two borders on currentColor rather than a second data URI. A
 * data URI has to bake its stroke colour into the string, which would put a
 * literal hex in this file and break the colour pipeline.
 */

.vnr-faq {
	--bs-accordion-bg: #fff;
	--bs-accordion-color: var(--vnr-body);
	--bs-accordion-border-color: var(--vnr-border);
	--bs-accordion-border-width: 1px;
	--bs-accordion-btn-bg: transparent;
	--bs-accordion-btn-color: var(--vnr-ink);
	--bs-accordion-btn-padding-x: 1.25rem;
	--bs-accordion-btn-padding-y: 1.15rem;
	--bs-accordion-body-padding-x: 1.25rem;
	--bs-accordion-body-padding-y: 0;
	--bs-accordion-active-color: var(--vnr-primary);
	--bs-accordion-active-bg: var(--vnr-primary-soft);
	--bs-accordion-transition: background-color .18s ease, color .18s ease;

	/* Bootstrap's default is a 4px blue glow. Replaced by a real outline below,
	   which is what the rest of the theme uses and what passes SC 1.4.11. */
	--bs-accordion-btn-focus-box-shadow: none;

	/* Both chevron data URIs off; ::after draws it from currentColor. */
	--bs-accordion-btn-icon: none;
	--bs-accordion-btn-active-icon: none;

	--vnr-faq-disc: 2.25rem;
	--vnr-faq-gutter: 1.25rem;
	--vnr-faq-radius: .875rem;

	background: #fff;
	border: 1px solid var(--vnr-border);
	border-radius: var(--vnr-faq-radius);
	box-shadow: 0 10px 30px rgba(22, 32, 43, .06);
}

/*
 * The panel is one card, so its corners live on the first button and the last
 * collapse rather than on an overflow clip, which would nick the inset focus
 * ring on the first and last rows.
 */
.vnr-faq .accordion-item:first-of-type > .accordion-header > .accordion-button {
	border-top-left-radius: calc(var(--vnr-faq-radius) - 1px);
	border-top-right-radius: calc(var(--vnr-faq-radius) - 1px);
}

.vnr-faq .accordion-item:last-of-type > .accordion-header > .accordion-button.collapsed,
.vnr-faq .accordion-item:last-of-type > .accordion-collapse {
	border-bottom-left-radius: calc(var(--vnr-faq-radius) - 1px);
	border-bottom-right-radius: calc(var(--vnr-faq-radius) - 1px);
}

/*
 * .accordion-header is an h3, so the global h1-h3 rule hands the button
 * Playfair by inheritance. A question is UI, not a headline, and the serif
 * already belongs to the rail heading beside it.
 */
.vnr-faq .accordion-button {
	padding-right: calc(var(--vnr-faq-gutter) + var(--vnr-faq-disc) + 1rem);
	font-family: 'Inter', sans-serif;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
}

/* The circular badge. ::before paints under ::after, so the chevron sits on it
   without either needing a z-index. */
.vnr-faq .accordion-button::before {
	content: "";
	position: absolute;
	top: 0;
	right: var(--vnr-faq-gutter);
	bottom: 0;
	width: var(--vnr-faq-disc);
	height: var(--vnr-faq-disc);
	margin: auto 0;
	border: 1px solid var(--vnr-border);
	border-radius: 50%;
	background: #fff;
	transition: background-color .18s ease, border-color .18s ease;
}

/*
 * Rotating a square that carries only its right and bottom borders puts the
 * apex half a diagonal below the box centre, so each state carries an optical
 * nudge alongside its rotation.
 */
.vnr-faq .accordion-button::after {
	position: absolute;
	top: 0;
	right: calc(var(--vnr-faq-gutter) + (var(--vnr-faq-disc) - .55rem) / 2);
	bottom: 0;
	width: .55rem;
	height: .55rem;
	margin: auto 0;
	background: none;
	border: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-.19rem) rotate(45deg);
	transition: transform .2s ease, border-color .18s ease;
}

/* Hover only while closed, so it cannot fight the open treatment. */
.vnr-faq .accordion-button.collapsed:hover {
	background-color: var(--vnr-soft-bg);
	color: var(--vnr-primary);
}

.vnr-faq .accordion-button.collapsed:hover::before {
	border-color: var(--vnr-primary);
	background: var(--vnr-primary-soft);
}

/*
 * Open. Four redundant signals, none of them colour alone: the row tints, the
 * question turns green, the badge fills and the chevron flips. The gold rule
 * also replaces Bootstrap's inset bottom hairline, which would otherwise cut
 * the open question off from its own answer.
 */
.vnr-faq .accordion-button:not(.collapsed) {
	box-shadow: inset 3px 0 0 var(--vnr-secondary);
}

.vnr-faq .accordion-button:not(.collapsed)::before {
	border-color: var(--vnr-primary);
	background: var(--vnr-primary);
}

.vnr-faq .accordion-button:not(.collapsed)::after {
	border-color: #fff;
	transform: translateY(.19rem) rotate(225deg);
}

.vnr-faq .accordion-collapse.show,
.vnr-faq .accordion-collapse.collapsing {
	background: var(--vnr-primary-soft);
	box-shadow: inset 3px 0 0 var(--vnr-secondary);
}

/* The answer stops short of the badge column so its measure lines up with the
   question above it. */
.vnr-faq .accordion-body {
	padding-top: 0;
	padding-bottom: 1.5rem;
	padding-right: calc(var(--vnr-faq-gutter) + var(--vnr-faq-disc) + 1rem);
	line-height: 1.7;
}

/*
 * Bootstrap sets outline: 0 on :focus and replaces it with a box-shadow glow.
 * The offset is negative so a full-bleed row's ring cannot be clipped by the
 * card edge.
 */
.vnr-faq .accordion-button:focus-visible {
	outline: 3px solid var(--vnr-primary);
	outline-offset: -3px;
}

/* Bootstrap's collapse runs .35s, past the 300ms ceiling the house style sets
   for UI feedback. */
.vnr-faq .accordion-collapse.collapsing {
	transition-duration: .28s;
}

@media (min-width: 768px) {

	.vnr-faq {
		--vnr-faq-disc: 2.5rem;
		--vnr-faq-gutter: 1.75rem;
		--bs-accordion-btn-padding-x: 1.75rem;
		--bs-accordion-btn-padding-y: 1.4rem;
		--bs-accordion-body-padding-x: 1.75rem;
	}

	.vnr-faq .accordion-button {
		font-size: 1.08rem;
	}
}

@media (min-width: 992px) {

	/* Grid items stretch by default, so align-self is what makes sticky work. */
	.vnr-faq__rail {
		position: sticky;
		top: var(--vnr-sticky-top, 6rem);
		align-self: start;
	}
}

@media (prefers-reduced-motion: reduce) {

	/*
	 * The tightening above outranks Bootstrap's own reduced-motion rule on
	 * specificity, so it has to be re-zeroed here or the collapse keeps
	 * animating for someone who asked for no motion.
	 */
	.vnr-faq .accordion-collapse.collapsing,
	.vnr-faq .accordion-button,
	.vnr-faq .accordion-button::before,
	.vnr-faq .accordion-button::after {
		transition: none;
	}
}

/* --- Page header: eyebrow, multi-paragraph lead, buttons ----------------- */

/*
 * All three are optional, and the h1 keeps its mb-0, so the spacing above and
 * below the title belongs to these blocks. A header that passes none of them
 * renders exactly as it did before they existed.
 */
.page-header__eyebrow {
	display: block;
	margin-bottom: .85rem;
}

.page-header__lead {
	margin-top: 1rem;
	margin-bottom: 0;
}

.page-header__lead p:last-child {
	margin-bottom: 0;
}

.page-header__lead p + p {
	margin-top: .9rem;
}

.page-header__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.75rem;
}

/* 48px tall at the theme's btn-lg padding, clearing the 44x44 target this
   theme holds itself to. */
.page-header__btn {
	font-weight: 600;
}

/* A split header carries the photo and its plate, so it needs more air below
   the row than a title-only header. */
.page-header--split {
	padding-bottom: 3.5rem;
}

@media (min-width: 992px) {

	.page-header--split {
		padding: 3.75rem 0 4.5rem;
	}
}

/* --- Figures: the dark tone --------------------------------------------- */

/*
 * The comp's band is --vnr-dark, not --vnr-primary, and the reason is the
 * numerals. Gold on --vnr-primary is 3.23:1, which passes only because the
 * figure is large, and the --long step-down lands within a rounding error of
 * the bold threshold. Gold on --vnr-dark is 5.81:1 and passes at every step.
 *
 * The base .vnr-section--figures block already forces headings white, so only
 * the two colours that actually change are set here.
 */
.vnr-section--figures-dark {
	background: var(--vnr-dark);
}

.vnr-section--figures-dark .vnr-figures__figure,
.vnr-section--figures-dark .vnr-eyebrow {
	color: var(--vnr-secondary);
}

/* --- Checklist: soft tone and footnote ---------------------------------- */

.vnr-section--checklist-soft {
	background: var(--vnr-soft-bg);
}

.vnr-checklist__note {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	max-width: 88ch;
	margin: 1.75rem 0 0;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-checklist__note .bi {
	flex: none;
	line-height: 1.55;
	color: var(--vnr-primary);
}

/* --- Two-column specification table ------------------------------------- */

/*
 * Reuses the comparison table's furniture. Only the column widths differ,
 * because two columns want a different split from four.
 */
@media (min-width: 992px) {

	.vnr-comparison__table--two .vnr-comparison__th:first-child {
		width: 30%;
	}

	.vnr-comparison__table--two .vnr-comparison__th:last-child {
		width: 70%;
	}
}

/* --- The before and after rules table ----------------------------------- */

/*
 * The left column is the superseded rule, so it is quieted and the right-hand
 * column, which is the one that applies now, keeps the body colour and takes
 * the weight. Colour is not carrying the meaning on its own: the column headers
 * say "Before 2026" and "2026 and later", and each cell repeats its era as a
 * visible label.
 */
.vnr-comparison__cell--now {
	font-weight: 600;
	color: var(--vnr-ink);
}

/*
 * The caption is the table's accessible name and the scroller points at it, so
 * when it is visible it has to read as a label rather than as a heading: the h2
 * above it is the heading.
 */
.vnr-comparison__caption {
	caption-side: top;
	padding: 0 0 0.75rem;
	font-family: var(--vnr-font-body, inherit);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--vnr-body);
	text-align: left;
}

/*
 * The metric name, spanning both value columns. It carries
 * .vnr-comparison__row-th as well, so it inherits every existing row-header
 * rule in both the unscoped and the .vnr-page layer and the two cannot drift
 * apart; this adds only what spanning needs. The descendant selector is there
 * for specificity: (0,2,1) beats the .vnr-page row-header padding at (0,2,0),
 * which otherwise wins on source order.
 */
.vnr-comparison__table--pair tbody .vnr-comparison__group-th {
	padding-bottom: 0.5rem;
	border-bottom: 0;
	vertical-align: bottom;
}

/*
 * The era repeated inside each cell. Small and quiet at every width, because
 * the cells stack below 992px and a bare "$150,000" with no era beside it is
 * the one thing dropping the Rule column could have cost a reader.
 */
.vnr-comparison__cell-label {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--vnr-font-body, inherit);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--vnr-body);
}

.vnr-comparison__cell-value {
	display: block;
}

/*
 * Two columns need less room than four, so the shared minimum comes down and
 * the table scrolls sideways far less on a phone.
 *
 * BOTH SELECTORS DOUBLE UP THE CLASS, and that is the whole point. Written as
 * `.vnr-page .vnr-comparison__table--pair` this rule is (0,2,0), exactly the
 * same weight as `.vnr-page .vnr-comparison__table` at line 9257, which comes
 * later in the file and therefore won: the measured min-width was still 50rem
 * and the table was still 800px wide inside a 360px scroller. Found by
 * measuring the computed value in a browser, not by reading the cascade.
 *
 * Qualifying with the base class as well takes the scoped rule to (0,3,0) and
 * the unscoped one to (0,2,0), so each beats its own base whatever the source
 * order.
 */
.vnr-comparison__table.vnr-comparison__table--pair {
	min-width: 30rem;
}

.vnr-page .vnr-comparison__table.vnr-comparison__table--pair {
	min-width: 34rem;
}

@media (min-width: 992px) {

	.vnr-comparison__table--pair .vnr-comparison__th {
		width: 50%;
	}
}

/*
 * One metric is one row group, so the hairline belongs under the pair of values
 * rather than inside the group, and the last group closes without one. Both
 * rules are written to beat the shared tr:last-child rule at (0,3,2), which
 * would otherwise strip the border from every group because every group's value
 * row is the last row of its own tbody.
 */
.vnr-comparison__table--pair tbody tr:last-child .vnr-comparison__cell {
	border-bottom: 1px solid var(--vnr-border);
}

.vnr-comparison__table--pair tbody:last-of-type tr:last-child .vnr-comparison__cell {
	border-bottom: 0;
}

/*
 * No zebra striping here. The value row is row two of every group, so it is
 * always "even" and striping would tint every value row and nothing else, which
 * reads as a fault rather than a rhythm. The .vnr-page layer already sets this
 * transparent; this is the unscoped case.
 */
.vnr-comparison__table--pair tbody tr:nth-of-type(even) .vnr-comparison__cell,
.vnr-comparison__table--pair tbody tr:nth-of-type(odd) .vnr-comparison__group-th {
	background: transparent;
}

/* Pill radius on the verdict badge, per the comp. .btn-pill uses the same. */
.vnr-comparison__badge {
	border-radius: 50rem;
}

/* --- Form controls ------------------------------------------------------ */

/*
 * SC 1.4.11 asks 3:1 for the boundary that identifies a control. --vnr-border
 * is 1.32:1 on white and 1.16:1 on cream, so a field had no perceivable edge
 * at all. --vnr-muted is 5.38:1 on white. Scoped to form controls, so every
 * other hairline in the theme is untouched.
 */
.form-control,
.form-select {
	border-color: var(--vnr-muted);
}

/* --- Gold outline button ------------------------------------------------ */

/*
 * The comp's secondary action on a results card. --vnr-secondary as a border
 * is 2.45:1 on white, under the 3:1 SC 1.4.11 asks of a control boundary, so
 * the resting state uses the text-safe gold and only the hover fill uses the
 * bright one, where --vnr-dark sits on it at 5.81:1.
 */
.btn-outline-gold {
	--bs-btn-bg: transparent;
	--bs-btn-color: var(--vnr-secondary-text);
	--bs-btn-border-color: var(--vnr-secondary-text);
	--bs-btn-hover-bg: var(--vnr-secondary);
	--bs-btn-hover-border-color: var(--vnr-secondary);
	--bs-btn-hover-color: var(--vnr-dark);
	--bs-btn-active-bg: var(--vnr-secondary-deep);
	--bs-btn-active-border-color: var(--vnr-secondary-deep);
	--bs-btn-active-color: var(--vnr-dark);
	--bs-btn-focus-shadow-rgb: var(--vnr-secondary-rgb);
}

/* --- Estimators: the two-card layout ------------------------------------ */

/*
 * Shared by the Section 45F estimator and the workforce cost tool, so the two
 * present identically on a site that carries both.
 *
 * The section used to carry `py-5 bg-light`. --bs-light is aliased to the cream
 * body colour at the top of this file, so the utility repainted the band in the
 * body colour with !important and the section read as an unbanded stretch. The
 * comp's answer is not a band: the ground stays cream and the cards do the work.
 */

.vnr-45f,
.vnr-wf {
	/* The header CTA links here, and the sticky header would otherwise cover
	   the focused target (SC 2.4.11). */
	scroll-margin-top: var(--vnr-sticky-top, 6rem);
}

.vnr-45f__header,
.vnr-wf__header {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	max-width: 48rem;
	margin-bottom: 2.5rem;
}

.vnr-45f__header .vnr-section__title,
.vnr-wf__header .vnr-section__title {
	margin: 0;
}

.vnr-45f__lead {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.vnr-45f__grid,
.vnr-wf__grid {
	align-items: stretch;
}

.vnr-45f__card,
.vnr-wf__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-radius: .9rem;
	box-shadow: 0 10px 30px rgba(22, 32, 43, .06);
}

@media (min-width: 768px) {

	.vnr-45f__card,
	.vnr-wf__card {
		padding: 2.25rem;
	}
}

@media (min-width: 992px) {

	.vnr-45f__card,
	.vnr-wf__card {
		padding: 2.75rem;
	}
}

/* The answer card takes the same soft primary tint as the checklist panel, so
   the pair reads as input on white, answer on the brand. */
.vnr-45f__card--result,
.vnr-wf__card--result {
	background: var(--vnr-primary-soft);
	border-color: rgba(var(--vnr-primary-rgb), .18);
}

.vnr-45f__card-title,
.vnr-wf__card-title {
	margin: 0 0 1.5rem;
	padding: 0;
	font-size: .78rem;
}

.vnr-45f__field,
.vnr-wf__field {
	margin-bottom: 1.5rem;
}

.vnr-45f__field .form-text,
.vnr-wf__field .form-text {
	margin-top: .45rem;
	color: var(--vnr-body);
}

/* Employer type. Radios rather than a select that submits on change, which
   would reload the page on every arrow keypress. */
.vnr-45f__profile {
	margin-bottom: 1.75rem;
	padding: 1.125rem 1.25rem;
	background: var(--vnr-soft-bg);
	border: 1px solid var(--vnr-border);
	border-radius: .6rem;
}

/*
 * `float: left; width: 100%` is Bootstrap's own legend reset, and it is the one
 * to keep on a fieldset that has a border. A native legend straddles the top
 * border, so with `float: none` the border line was drawing straight through the
 * descenders of "Employer type". Sebastian reported it from the live page.
 * Floating it puts the label inside the box, above the radios, with the border
 * unbroken behind it. `legend + *` clears the float in Reboot already.
 */
.vnr-45f__profile legend {
	float: left;
	width: 100%;
	margin-bottom: .75rem;
	font-size: 1rem;
}

.vnr-45f__choice {
	margin-bottom: .65rem;
}

.vnr-45f__choice:last-of-type {
	margin-bottom: 0;
}

.vnr-45f__choice .form-check-input {
	margin-top: .35rem;
	border-color: var(--vnr-muted);
}

.vnr-45f__choice-label {
	display: block;
	font-weight: 600;
	color: var(--vnr-ink);
}

/* Each option states its own rate and limit, so a visitor can see what the
   estimate was computed against without opening a settings screen. */
.vnr-45f__choice-terms {
	display: block;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--vnr-body);
}

.vnr-45f__profile .form-text {
	margin-top: .85rem;
	margin-bottom: 0;
	color: var(--vnr-body);
}

.vnr-45f__submit,
.vnr-wf__submit {
	align-self: flex-start;
	margin-top: auto;
}

.vnr-45f__total,
.vnr-wf__gap {
	margin: .4rem 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(2.6rem, 6vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--vnr-primary);
	overflow-wrap: break-word;
}

.vnr-45f__capped,
.vnr-wf__gap-sentence {
	margin: .75rem 0 0;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--vnr-body);
}

.vnr-45f__profileline {
	margin: 1rem 0 0;
	font-size: .875rem;
	color: var(--vnr-body);
}

.vnr-45f__breakdown,
.vnr-wf__breakdown {
	margin: 1.5rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid rgba(var(--vnr-primary-rgb), .18);
	list-style: none;
}

.vnr-45f__line,
.vnr-wf__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .8rem;
}

.vnr-45f__line:last-child,
.vnr-wf__line:last-child {
	margin-bottom: 0;
}

.vnr-45f__line-label,
.vnr-wf__line-label {
	font-size: .9rem;
	line-height: 1.5;
	color: var(--vnr-body);
}

.vnr-45f__line-rate {
	display: inline-block;
	margin-left: .4rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--vnr-secondary-text);
}

.vnr-wf__line-detail {
	display: block;
	margin-top: .15rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--vnr-muted);
}

/* Tabular figures so the column of amounts stays aligned as they change. */
.vnr-45f__line-value,
.vnr-wf__line-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--vnr-ink);
}

.vnr-wf__line--total {
	margin-top: 1rem;
	padding-top: .8rem;
	border-top: 1px solid rgba(var(--vnr-primary-rgb), .18);
}

.vnr-wf__breakdown--program {
	margin-top: 1.25rem;
}

.vnr-45f__hint,
.vnr-wf__hint,
.vnr-wf__source {
	margin: 1.25rem 0 0;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--vnr-body);
}

.vnr-45f__cta,
.vnr-wf__cta {
	width: 100%;
	margin-top: 1.5rem;
}

/* Collapsed, but present and editable: these are the numbers an employer is
   most likely to disagree with, and a total nobody can interrogate is a total
   nobody can take to a board. */
.vnr-wf__assumptions {
	margin-bottom: 1.5rem;
	padding: 1.125rem 1.25rem;
	background: var(--vnr-soft-bg);
	border: 1px solid var(--vnr-border);
	border-radius: .6rem;
}

.vnr-wf__assumptions-summary {
	font-weight: 600;
	color: var(--vnr-primary);
	cursor: pointer;
}

.vnr-wf__assumptions[open] .vnr-wf__assumptions-summary {
	margin-bottom: 1.25rem;
}

.vnr-wf__assumptions-summary:focus-visible {
	outline: 3px solid var(--vnr-primary);
	outline-offset: 2px;
	border-radius: .25rem;
}

.vnr-wf__fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.vnr-wf__fieldset legend {
	float: none;
	width: auto;
}

/*
 * The comp closes the estimator on a bordered strip rather than a line of grey
 * small print. The point of this text is that a reader notices it before acting
 * on a credit estimate, so making it quiet would defeat it. Same maroon rule
 * and shield as .vnr-disclaimer__card, at strip weight.
 */
.vnr-45f__disclaimer {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	max-width: 60rem;
	margin: 2.5rem auto 0;
	padding: 1.125rem 1.375rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-left: 4px solid var(--vnr-accent);
	border-radius: .6rem;
	font-size: .875rem;
	line-height: 1.65;
	color: var(--vnr-body);
}

.vnr-45f__disclaimer .bi {
	flex: none;
	font-size: 1.15rem;
	line-height: 1.45;
	color: var(--vnr-accent);
}

/* Shown when a tool is switched off, or when its assumptions are unset. */
.vnr-45f__pending,
.vnr-wf__pending {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-left: 4px solid var(--vnr-accent);
	border-radius: .6rem;
}

.vnr-45f__pending .bi,
.vnr-wf__pending .bi {
	flex: none;
	font-size: 1.5rem;
	line-height: 1.35;
	color: var(--vnr-accent);
}

.vnr-45f__pending-title,
.vnr-wf__pending-title {
	margin: 0 0 .5rem;
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--vnr-ink);
}

.vnr-45f__pending-text,
.vnr-wf__pending-text {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-wf__pending-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1.25rem 0 0;
}

/* --- Services index ------------------------------------------------------- */

/*
 * The six service pages, listed on the Service Offerings page. Card shape and
 * type come from the page design standard further down; this is the structure
 * the standard then dresses.
 */
.vnr-section--servicelist {
	background: var(--vnr-soft-bg);
}

.vnr-servicelist__header {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	max-width: 48rem;
	margin: 0 0 2rem;
}

.vnr-servicelist__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin: 0;
}

.vnr-servicelist__card {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 1.5rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-radius: .5rem;
}

.vnr-servicelist__meta {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vnr-muted);
}

.vnr-servicelist__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.25;
}

.vnr-servicelist__link {
	color: var(--vnr-primary);
	text-decoration: none;
}

.vnr-servicelist__link:hover,
.vnr-servicelist__link:focus-visible {
	color: var(--vnr-primary-deep);
	text-decoration: underline;
}

.vnr-servicelist__desc {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--vnr-body);
}

/* Decoration. The heading link is the real target, and this is aria-hidden. */
.vnr-servicelist__cue {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: auto;
	padding-top: .5rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--vnr-primary);
}

.vnr-servicelist__card:hover .vnr-servicelist__cue .bi {
	transform: translateX(3px);
}

.vnr-servicelist__cue .bi {
	transition: transform .18s ease;
}

@media (min-width: 576px) {

	.vnr-servicelist__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {

	.vnr-servicelist__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* --- Per-page band ground ------------------------------------------------ */

/*
 * Set by a schema `ground` key. Section partials hard-code the band that suits
 * their content, which is right per type and wrong per page: two sections that
 * each default to cream can end up adjacent and the rhythm collapses. See
 * vnr_section_ground_class() in inc/sections.php.
 */
.vnr-section--ground-cream {
	background: var(--vnr-cream);
}

.vnr-section--ground-soft {
	background: var(--vnr-soft-bg);
}

.vnr-section--ground-white {
	background: #fff;
}

/* --- Values lifted out of inline style attributes ------------------------ */

/*
 * These four rules replace three inline `style` attributes that used to sit in
 * template-parts/sections/features.php, and add the span that lets a figure
 * split its trailing unit. Values are identical to what was inline, so every
 * page that already rendered them is unchanged. They live here, unscoped, so
 * the childcare layer can override them without an !important war with an
 * attribute it could never outrank.
 */
.section-divider--features {
	width: 60px;
	height: 3px;
}

.vnr-section--features .section-subtitle {
	max-width: 720px;
}

.vnr-feature__icon {
	width: 52px;
	height: 52px;
}

/* Inherits by default, so a figure reads exactly as it always has. Only the
   childcare layer steps it down. */
.vnr-figures__unit {
	font-size: inherit;
}

/* ==========================================================================
   The page design standard
   ==========================================================================

   Scope: body.vnr-page, set by vnr_page_standard_body_class() in
   inc/page-templates.php on every page EXCEPT the homepage. Posts, archives and
   both custom post types are excluded by the filter's is_page() guard.

   Every selector below starts with .vnr-page. Do not write an unprefixed rule
   inside this block: that is the line between the standard and the theme.

   SPECIFICITY HAZARD, read before editing. A body scope ties almost every rule
   here at (0,2,0), which is the same weight as the theme's own dark-band colour
   rules (.vnr-section--figures .vnr-eyebrow, .vnr-section--steps-dark
   .vnr-steps__title, and so on). This block is last in the file, so a tie is
   won here on source order. Colour is therefore never set with a blanket
   selector: every colour rule below names the bands it applies to. A blanket
   .vnr-page .vnr-eyebrow { color: var(--vnr-muted) } would put muted grey on the
   dark green band at 1.47:1. If you add a colour rule, name the bands.

   The comp keeps the theme's brand tokens and changes only layout, spacing,
   type scale and component detail. Its single `primary` maps onto this theme's
   two greens: a BAND is --vnr-dark, ink and fills are --vnr-primary. That split
   is what keeps gold numerals at 5.81:1 instead of 3.23:1.
   ========================================================================== */

.vnr-page {
	/* Band rhythm: the comp's py-20 / md:py-28. */
	--vnr-ps-band: 5rem;
	--vnr-ps-band-lg: 7rem;

	--vnr-ps-radius-card: .75rem;
	--vnr-ps-radius-panel: 1rem;

	/* The comp's `secondary` is a muted sand. This theme's --vnr-secondary is a
	   saturated gold and --vnr-secondary-soft is 1.008:1 against cream, which
	   is invisible, so the sand is mixed from the gold token at low alpha. It
	   still follows a Theme Options brand change; a literal hex would not. */
	--vnr-ps-sand: rgba(var(--vnr-secondary-rgb), .22);
	--vnr-ps-sand-edge: rgba(var(--vnr-secondary-rgb), .38);
	--vnr-ps-sand-block: rgba(var(--vnr-secondary-rgb), .30);

	/* Shadows stay on the house tinted scale. Tailwind's neutral-black shadows
	   read cold on a cream ground. */
	--vnr-ps-shadow-sm: 0 1px 2px rgba(22, 32, 43, .06), 0 1px 3px rgba(22, 32, 43, .05);
	--vnr-ps-shadow-md: 0 6px 18px rgba(22, 32, 43, .09);
	--vnr-ps-shadow-lg: 0 14px 38px rgba(22, 32, 43, .12);
	--vnr-ps-shadow-xl: 0 22px 56px rgba(22, 32, 43, .16);
}

/* --- Band rhythm --------------------------------------------------------- */

/* The generic rule first, per-section overrides after. Both are (0,2,0), so
   source order is what makes the overrides work. Do not reorder. */
.vnr-page .vnr-section {
	padding-block: var(--vnr-ps-band);
}

.vnr-page .vnr-section--intro {
	padding-block: 4rem;
}

.vnr-page .vnr-section--features {
	padding-block: 3rem;
}

.vnr-page .vnr-section--cta {
	padding-block: 4rem;
}

.vnr-page .vnr-section--disclaimer {
	padding-block: 3rem var(--vnr-ps-band);
}

.vnr-page .vnr-section--figureband {
	padding-block: 3rem;
}

/* The estimator partials are each a .vnr-section nested inside the schema wrapper,
   which is the element that becomes the band. Zero the inner padding or the
   band pads twice. */
.vnr-page .vnr-45f,
.vnr-page .vnr-wf,
.vnr-page .vnr-jtc {
	padding-block: 0;
}

@media (min-width: 768px) {

	.vnr-page .vnr-section {
		padding-block: var(--vnr-ps-band-lg);
	}

	.vnr-page .vnr-section--intro {
		padding-block: 6rem;
	}

	.vnr-page .vnr-section--features {
		padding-block: 3rem;
	}

	.vnr-page .vnr-section--cta {
		padding-block: 4rem;
	}

	.vnr-page .vnr-section--figureband {
		padding-block: 4rem;
	}

	.vnr-page .vnr-45f,
	.vnr-page .vnr-wf,
	.vnr-page .vnr-jtc {
		padding-block: 0;
	}
}

/* --- Eyebrow ------------------------------------------------------------- */

/*
 * Geometry and the DEFAULT colour, both scoped to .site-main.
 *
 * .vnr-eyebrow is not a page class: footer.php uses it three times and the
 * offcanvas menu once. Without the .site-main scope this rule restyles the site
 * chrome on every page in the standard and leaves the homepage's chrome behind.
 *
 * Muted grey is the default and gold is the exception, not the other way round.
 * The earlier shape enumerated light bands, which meant every section type the
 * childcare pages did not happen to render kept the old gold. Dark containers
 * are a finite, knowable list; light ones are open-ended.
 *
 * Muted grey measures 4.82:1 on cream, 5.38:1 on white and 4.56:1 on
 * --vnr-soft-bg, all at 12px, so every light ground clears 4.5:1.
 */
.vnr-page .site-main .vnr-eyebrow,
.vnr-page .site-main .vnr-cta__eyebrow,
.vnr-page .site-main .section-kicker {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--vnr-muted);
}

/*
 * Two bands the client asked to enlarge in the 2026-10-02 round.
 *
 * They live inside the scoped layer rather than above it on purpose. The
 * default eyebrow rule above is (0,3,0), so a (0,2,0) override written in the
 * component layer loses to it no matter how late it appears, which is exactly
 * what happened the first time these two rules were written. Same prefix, same
 * weight, after it in source order.
 *
 * Both renderers are shared across several pages, so the rules key off the
 * section-key modifier class the partials emit rather than the body class. The
 * band then keeps its size wherever it is placed, and no other feature grid or
 * checklist on the site moves.
 */

/* "Why Us" is the eyebrow, not a heading: that band ships heading => '' and
   features.php prints the eyebrow alone in that case. */
.vnr-page .site-main .vnr-section--key-trust .vnr-eyebrow {
	font-size: 1.15rem;
	letter-spacing: .12em;
}

/* "What a Jump The Curve project requires": five bare statements, which
   checklist.php renders as a span rather than an h3. */
.vnr-page .site-main .vnr-section--key-payroll .vnr-checklist__title {
	font-size: 1.125rem;
	line-height: 1.5;
}

@media (min-width: 992px) {

	.vnr-page .site-main .vnr-section--key-trust .vnr-eyebrow {
		font-size: 1.35rem;
	}

	.vnr-page .site-main .vnr-section--key-payroll .vnr-checklist__title {
		font-size: 1.25rem;
	}
}

/*
 * The exception: every dark container, restated in gold at 5.81:1.
 *
 * These are (0,3,0) against the default's (0,2,0), so they win on specificity
 * rather than on source order. Add any new dark band here in the same commit
 * that creates it, and add it to the .text-secondary list further up as well.
 */
.vnr-page .site-main .vnr-section--figures-dark .vnr-eyebrow,
.vnr-page .site-main .vnr-section--steps-dark .vnr-eyebrow,
.vnr-page .site-main .vnr-section--timeline .vnr-eyebrow,
.vnr-page .site-main .vnr-section--quote .vnr-quote__eyebrow,
.vnr-page .site-main .vnr-location__panel .vnr-eyebrow,
.vnr-page .site-main .vnr-cta__panel--dark .vnr-cta__eyebrow,
.vnr-page .site-main .vnr-ctaband .vnr-eyebrow {
	color: var(--vnr-secondary);
}

/*
 * The GREEN grounds are a third tier, and the reason this rule exists at all.
 * --vnr-primary is dark enough to need light text but not dark enough to carry
 * gold: --vnr-secondary on it is 3.23:1, which fails at 12px. White is 7.91:1.
 *
 * The theme already sets white on .vnr-section--figures .vnr-eyebrow, but that
 * rule is (0,2,0) and so is the default above, and this block is later in the
 * file, so the default would win on source order. Restating it is what stops a
 * green band silently taking muted grey at 1.47:1.
 *
 * The :not() is load-bearing. figures.php appends --figures-dark ON TOP of
 * --figures, so a dark figures band matches both this rule and the gold one
 * above at (0,3,0), and this one is later, so it silently took the dark band
 * white and defeated the gold tier. Excluding the modifier here stops the two
 * from ever matching the same element.
 */
.vnr-page .site-main .vnr-section--figures:not(.vnr-section--figures-dark) .vnr-eyebrow,
.vnr-page .site-main .vnr-cta__panel--green .vnr-cta__eyebrow {
	color: #fff;
}

/*
 * The gold CTA panel is a light ground, so its eyebrow keeps the theme's
 * deepened accent rather than either default. 5.09:1 on the gold panel.
 */
.vnr-page .site-main .vnr-cta__panel--gold .vnr-cta__eyebrow {
	color: var(--vnr-accent-deep);
}

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

/*
 * Every header, not only the split one. The standard used to re-pad only the
 * variant that carries a photograph, so a title-only header kept the theme's
 * 44/48px and opened 36% tighter than its siblings on the same site.
 */
.vnr-page .page-header {
	padding: 3rem 0 4rem;
}

.vnr-page .page-header--split {
	padding: 3rem 0 5rem;
}

@media (min-width: 992px) {

	.vnr-page .page-header {
		padding: 5rem 0 6rem;
	}

	.vnr-page .page-header--split {
		padding: 5rem 0 8rem;
	}

	/* The comp inverts the theme's split: text 5/12, image 7/12. Done here
	   rather than in page-header.php, which six templates share. */
	.vnr-page .page-header--split > .container > .row > .col-lg-7 {
		width: 41.6666667%;
	}

	.vnr-page .page-header--split > .container > .row > .col-lg-5 {
		width: 58.3333333%;
	}
}

/*
 * leading-[1.05] tracking-tight, at the comp's weight but not its literal size.
 * The comp's title is "Childcare & Section 45F", three short words; the client's
 * approved H1 here is "Section 45F Employer Child Care Tax Credit", which wraps
 * to four lines at the comp's 72px in a 5/12 column. Measured at 452px of
 * column: 72px gives four lines, 60px gives three. 60px still leads the page by
 * a wide margin over the 48px this had before.
 */
.vnr-page .page-header h1 {
	font-size: clamp(2.75rem, 4.2vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -.02em;
}

.vnr-page .page-header__lead {
	margin-top: 1.5rem;
	max-width: 34rem;
	font-size: 1rem;
	line-height: 1.625;
	color: var(--vnr-body);
}

.vnr-page .page-header__lead p {
	font-size: inherit;
	font-weight: 400;
}

.vnr-page .page-header__actions {
	margin-top: 2rem;
}

/*
 * The comp replaces the full offset plate with a sand block at two thirds size,
 * offset down and right, behind the photo. A box-shadow cannot be sized
 * independently of its box, so this is a pseudo element on the <figure>, which
 * has no overflow clip. The photo keeps an inset hairline ring and a soft lift.
 */
.vnr-page .page-header--split .vnr-slot--header {
	position: relative;
	isolation: isolate;
}

/*
 * Only from lg. Below that the header stacks, so the photo fills the container
 * and a block offset 1.5rem past its right edge pushes the page 8px wide. The
 * comp never faces this because its own container carries more padding.
 */
@media (min-width: 992px) {

	.vnr-page .page-header--split .vnr-slot--header::after {
		content: "";
		position: absolute;
		z-index: -1;
		right: -1.5rem;
		bottom: -1.5rem;
		width: 66.6667%;
		height: 66.6667%;
		border-radius: var(--vnr-ps-radius-panel);
		background: var(--vnr-ps-sand-block);
	}
}

.vnr-page .page-header--split .vnr-slot--header .vnr-slot__box {
	/* No --vnr-slot-ratio here: image-slot.php writes it as an inline style on
	   this same element, and inline beats any selector. The ratio is a template
	   argument, not a design-layer decision. */
	max-width: none;
	border-radius: var(--vnr-ps-radius-panel);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .10),
		var(--vnr-ps-shadow-xl);
}

/* --- Intro --------------------------------------------------------------- */

.vnr-page .vnr-intro__header {
	margin-bottom: 3rem;
}

.vnr-page .vnr-intro__body {
	max-width: none;
}

/*
 * A long passage flows into two columns, and 1rem across a 70-character column
 * is the standard's body setting.
 */
.vnr-page .vnr-intro__body--columns {
	font-size: 1rem;
	line-height: 1.625;
	color: var(--vnr-body);
}

/*
 * A short lede is a different object: it runs the full container as one block,
 * so it takes the standfirst scale and a measure of its own. Flattening it to
 * 1rem across 1296px was the theme's own warning come true, that the same words
 * at body size read as a stray paragraph rather than an opening statement.
 */
.vnr-page .vnr-intro__body--lead {
	max-width: 52rem;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--vnr-body);
}

@media (min-width: 992px) {

	.vnr-page .vnr-intro__body--lead {
		font-size: 1.375rem;
	}
}

.vnr-page .vnr-intro__body p + p {
	margin-top: 1.5rem;
}

@media (min-width: 768px) {

	/* The comp's md breakpoint and gap-24, rather than the theme's lg and 4rem.
	   Column-major flow already matches the comp's reading order. */
	.vnr-page .vnr-intro__body--columns {
		column-count: 2;
		column-gap: 6rem;
	}

	.vnr-page .vnr-intro__body--columns > * {
		break-inside: avoid;
	}

	.vnr-page .vnr-intro__body--columns > *:first-child {
		margin-top: 0;
	}
}

/* --- Three cards --------------------------------------------------------- */

.vnr-page .vnr-section--features .section-header {
	margin-bottom: 2.5rem;
}

/*
 * The mobile marquee is an auto-scrolling rail. The comp stacks the cards, and
 * stacking also removes a moving region that SC 2.2.2 would otherwise want a
 * pause control for. assets/js/theme.js bails on its own once scrollWidth
 * equals clientWidth, so nothing else changes.
 */
@media (max-width: 991.98px) {

	.vnr-page .vnr-section--features .vnr-marquee {
		--bs-gutter-x: 1.5rem;

		flex-wrap: wrap;
		gap: 0;
		overflow: visible;
	}

	.vnr-page .vnr-section--features .vnr-marquee > .vnr-marquee__item {
		flex: 0 0 auto;
		width: 100%;
		padding-inline: calc(var(--bs-gutter-x) * .5);
	}
}

.vnr-page .vnr-section--features .card {
	border: 1px solid var(--vnr-border);
	border-radius: var(--vnr-ps-radius-card);
	box-shadow: var(--vnr-ps-shadow-sm);
}

.vnr-page .vnr-section--features .card:hover {
	transform: none;
	box-shadow: var(--vnr-ps-shadow-md);
}

.vnr-page .vnr-section--features .card-body {
	padding: 2rem;
}

/*
 * w-12 h-12 bg-primary rounded-full shadow-inner mb-6, glyph in gold.
 * !important on colour because theme.css sets this icon's colour with
 * !important itself, to beat the .bg-primary / .text-white utilities the
 * partial puts in the markup. Gold on --vnr-primary is 3.23:1, which clears the
 * 3:1 threshold for a graphical object; the glyph is aria-hidden and the card
 * carries its own text, so it conveys nothing on its own.
 */
.vnr-page .vnr-feature__icon {
	width: 3rem;
	height: 3rem;
	margin-bottom: 1.5rem !important; /* beats the .mb-3 utility in the markup */
	color: var(--vnr-secondary) !important; /* pairs with the !important above */
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .18);
}

.vnr-page .vnr-feature__icon .bi {
	font-size: 1.5rem;
}

.vnr-page .vnr-section--features .card-body h3 {
	margin-bottom: .75rem;
	font-size: 1.0625rem;
}

/* text-sm leading-relaxed font-medium. !important because .text-muted is a
   Bootstrap utility that declares colour with !important, and it resolves to a
   cool slate that is not a brand token. */
.vnr-page .vnr-section--features .card-body p.text-muted {
	color: var(--vnr-body) !important;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.625;
}

/* --- Checklist panel ----------------------------------------------------- */

/* !important: the partial carries mb-4 mb-lg-5, which Bootstrap declares
   !important. The comp is mb-10. */
.vnr-page .vnr-checklist__header {
	margin-bottom: 2.5rem !important;
}

.vnr-page .vnr-checklist__intro {
	font-size: 1rem;
	line-height: 1.625;
	color: var(--vnr-body);
}

.vnr-page .vnr-checklist__panel {
	padding: 2rem;
	background: var(--vnr-ps-sand);
	border: 1px solid var(--vnr-ps-sand-edge);
	border-radius: var(--vnr-ps-radius-panel);
}

.vnr-page .vnr-checklist__item {
	gap: 1rem;
	margin-bottom: 2rem;
}

/* Every glyph takes the same 24px box so the text column stays aligned across
   the check, warning and shield variants. */
.vnr-page .vnr-checklist__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: .0625rem;
	font-size: .875rem;
	line-height: 1;
}

/*
 * The outlined ring, only on the bare tick. The comp's border-primary/20 is
 * 1.35:1 on this panel and effectively invisible; .35 reads as a hairline. The
 * ring is decoration either way: the tick carries the meaning at 6.05:1.
 */
.vnr-page .vnr-checklist__icon.bi-check2 {
	background: var(--vnr-cream);
	border: 1px solid rgba(var(--vnr-primary-rgb), .35);
	border-radius: 50%;
}

.vnr-page .vnr-checklist__item--has-desc .vnr-checklist__title {
	margin-bottom: .5rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--vnr-ink);
}

/*
 * NOT the comp's muted grey: --vnr-muted on this sand panel is 4.11:1 and fails
 * SC 1.4.3. --vnr-body is 7.31:1 and reads as the same weight against the tint.
 */
.vnr-page .vnr-checklist__desc {
	margin-top: 0;
	font-size: .875rem;
	line-height: 1.625;
	color: var(--vnr-body);
}

.vnr-page .vnr-checklist__note {
	margin-top: 2rem;
	font-size: .875rem;
	line-height: 1.625;
}

@media (min-width: 768px) {

	.vnr-page .vnr-checklist__panel {
		padding: 3rem;
	}

	.vnr-page .vnr-checklist__list {
		column-gap: 2rem;
	}

	.vnr-page .vnr-checklist__item {
		margin-bottom: 3rem;
	}
}

@media (min-width: 992px) {

	.vnr-page .vnr-checklist__list {
		column-gap: 3rem;
	}
}

/* --- Figures band -------------------------------------------------------- */

/* !important: the partial carries mb-5, a Bootstrap utility. The comp is mb-16. */
.vnr-page .vnr-figures__header {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	max-width: 48rem;
	margin-bottom: 4rem !important;
}

.vnr-page .vnr-figures__heading {
	font-size: clamp(1.875rem, 4vw, 3rem);
	line-height: 1.1;
}

.vnr-page .vnr-figures__sub {
	margin-top: .5rem;
	font-size: 1.125rem;
	line-height: 1.625;
}

/* The comp drops the per-cell top rules and keeps one divider before the third
   column only. */
.vnr-page .vnr-figures__item {
	padding: 0;
	border-top: 0;
}

.vnr-page .vnr-figures__item + .vnr-figures__item {
	margin-top: 3rem;
	padding-left: 0;
	border-left: 0;
}

.vnr-page .vnr-figures__head {
	gap: 0;
}

.vnr-page .vnr-figures__figure {
	margin-bottom: 1rem;
	font-size: clamp(3.75rem, 6vw, 4.5rem);
	letter-spacing: -.03em;
}

.vnr-page .vnr-figures__figure--mid {
	font-size: clamp(2.5rem, 4.4vw, 3.25rem);
}

.vnr-page .vnr-figures__figure--long {
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
}

/* text-4xl inside a text-7xl numeral. */
.vnr-page .vnr-figures__unit {
	font-size: .65em;
	letter-spacing: 0;
}

.vnr-page .vnr-figures__label {
	margin-bottom: 1rem;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

/* 9.64:1 on --vnr-dark. */
.vnr-page .vnr-figures__desc {
	margin-top: 0;
	font-size: .875rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, .8);
}

.vnr-page .vnr-figures__note {
	margin-top: 4rem !important; /* beats the mt-5 utility in the markup */
	border-radius: var(--vnr-ps-radius-card);
}

.vnr-page .vnr-figures__note-text {
	font-size: .875rem;
	line-height: 1.625;
}

@media (min-width: 768px) {

	.vnr-page .vnr-figures__item,
	.vnr-page .vnr-figures__item + .vnr-figures__item {
		margin-top: 0;
		padding: 0;
		border-left: 0;
	}

	/*
	 * The grid is row g-0, so without this the cells butt together and two wide
	 * numerals in adjacent cells read as one string. Padding on the item rather
	 * than --bs-gutter-x on the row: a row gutter pulls the row out past the
	 * container and the page gains horizontal scroll.
	 *
	 * Right padding only, and never on the last cell, so the band still starts
	 * and ends flush with every other band's container edge.
	 */
	.vnr-page .vnr-figures__item:not(:last-child) {
		padding-right: 2rem;
	}

	/* Only the third of exactly three, which is the annual-limit cell.
	   :last-child guards a two-figure band from picking this up. */
	.vnr-page .vnr-figures__item:nth-child(3):last-child {
		padding-left: 2rem;
		border-left: 1px solid rgba(255, 255, 255, .28);
	}
}

/*
 * Four-up bands.
 *
 * The display numeral is drawn for three cells at about a third of the
 * container. At four it is a quarter, and a real value like "$500,000" lands
 * within a few pixels of the next cell. figures.php puts --4up on the grid when
 * the band has four or more rows, so the whole band steps together rather than
 * the per-string character count guessing at it one cell at a time.
 *
 * Two moves, at two breakpoints. Between md and lg the band folds to two
 * columns, because four numerals across 720px is cramped at any size. From lg
 * it goes back to four and the numeral steps down one notch instead.
 */
@media (min-width: 768px) and (max-width: 991.98px) {

	.vnr-page .vnr-figures__grid--4up > .vnr-figures__item {
		flex: 0 0 50%;
		max-width: 50%;
	}

	/* The base rule zeroes margin-top at md, so the second row needs its own
	   separation from the first. */
	.vnr-page .vnr-figures__grid--4up > .vnr-figures__item:nth-child(-n+2) {
		margin-bottom: 3rem;
	}

	/* Only the left cell of each pair takes the gutter. */
	.vnr-page .vnr-figures__grid--4up > .vnr-figures__item:nth-child(2n) {
		padding-right: 0;
	}
}

@media (min-width: 992px) {

	.vnr-page .vnr-figures__grid--4up .vnr-figures__figure {
		font-size: clamp(2.5rem, 3.4vw, 3.25rem);
	}

	.vnr-page .vnr-figures__grid--4up .vnr-figures__figure--mid {
		font-size: clamp(1.875rem, 2.6vw, 2.5rem);
	}

	.vnr-page .vnr-figures__grid--4up .vnr-figures__figure--long {
		font-size: clamp(1.375rem, 1.9vw, 1.75rem);
	}

	.vnr-page .vnr-figures__grid--4up .vnr-figures__label {
		font-size: 1rem;
	}
}

/*
 * The third of exactly three is the annual dollar limit, and a currency string
 * is wider than a percentage, so it sits one step down from its neighbours.
 *
 * The SIZE is independent of the band's tone: the Section 45F page and the
 * calculator page carry the same three numbers, and keying the step to
 * --figures-dark had them rendering at 60px on one page and 72px on the other.
 */
.vnr-page .vnr-figures__item:nth-child(3):last-child .vnr-figures__figure {
	font-size: clamp(3rem, 5vw, 3.75rem);
}

/*
 * The COLOUR is tone-specific: white rather than gold, only on the dark band.
 * Colour is not the only signal, because the visible label under it names the
 * cell as the annual limit.
 */
.vnr-page .vnr-section--figures-dark .vnr-figures__item:nth-child(3):last-child .vnr-figures__figure {
	color: #fff;
}

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

.vnr-page .vnr-section--steps {
	--vnr-steps-disc: 3rem;
	--vnr-steps-gap: 3rem;
}

.vnr-page .vnr-steps__header {
	gap: 1.5rem;
	max-width: 48rem;
	margin-bottom: 4rem;
}

.vnr-page .vnr-steps__heading {
	max-width: 42rem;
	font-size: clamp(1.875rem, 3.2vw, 2.25rem);
	line-height: 1.15;
}

.vnr-page .vnr-steps__lead {
	font-size: 1.125rem;
	line-height: 1.625;
}

/* One hairline behind the whole rail rather than a segment per numeral. */
.vnr-page .vnr-steps__item::before {
	content: none;
}

.vnr-page .vnr-steps__list {
	position: relative;
}

/*
 * border-4 in the band colour, so the badge punches a clean hole in the
 * hairline behind it. box-sizing is border-box, so 3rem is the outer size and
 * the disc reads at 40px, exactly as the comp does.
 */
.vnr-page .vnr-steps__num {
	position: relative;
	z-index: 1;
	font-family: 'Playfair Display', Georgia, serif;
	font-size: 1.125rem;
	border: 4px solid var(--vnr-cream);
	box-shadow: var(--vnr-ps-shadow-md);
}

.vnr-page .vnr-section--steps .vnr-steps__num {
	border-color: var(--vnr-soft-bg);
}

.vnr-page .vnr-section--steps-dark .vnr-steps__num {
	border-color: var(--vnr-dark);
}

/*
 * font-bold text-lg mb-4 in the SANS face. The title is an h3, so the global
 * h1-h3 rule hands it Playfair by inheritance; the comp uses the serif only for
 * the badge numeral and the section heading.
 */
.vnr-page .vnr-steps__title {
	margin-bottom: 1rem;
	font-family: 'Inter', sans-serif;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
}

.vnr-page .vnr-steps__desc {
	font-size: .875rem;
	line-height: 1.625;
}

/*
 * 992, not 768, for the same reason. Five steps side by side at tablet width
 * gave each one a 101px column, barely wider than the 48px numeral above it: a
 * step title stacked into seven lines, and "documentation" and
 * "nondiscrimination," ran past the edge of their column. It was the only text
 * anywhere on the site that overflowed its own box at any width. At 767 the
 * identical content renders correctly stacked, so this just extends that.
 */
@media (min-width: 992px) {

	.vnr-page .vnr-steps__list {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		column-gap: var(--vnr-steps-gap);
		row-gap: 0;
	}

	.vnr-page .vnr-steps__list::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: calc(var(--vnr-steps-disc) / 2);
		right: 2rem;
		left: 2rem;
		height: 1px;
		background: var(--vnr-steps-line);
	}

	.vnr-page .vnr-steps__item {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1rem;
		padding-bottom: 0;
	}
}

/* --- Tables -------------------------------------------------------------- */

/* !important: the partial carries mb-4 mb-lg-5. The comp is mb-12. */
.vnr-page .vnr-comparison__header {
	gap: 1rem;
	margin-bottom: 3rem !important;
}

.vnr-page .vnr-comparison__lede {
	font-size: 1.125rem;
	line-height: 1.625;
}

/* The wrapper stays a focusable role="region", which is how a keyboard user
   reaches the overflow. The comp has no equivalent and must not be copied. */
.vnr-page .vnr-comparison__scroll {
	border-radius: var(--vnr-ps-radius-card);
	box-shadow: var(--vnr-ps-shadow-sm);
}

.vnr-page .vnr-comparison__table {
	min-width: 50rem;
}

/* White on --vnr-primary is 7.91:1. */
.vnr-page .vnr-comparison__th {
	padding: 1.25rem 1.5rem;
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .05em;
}

/* The comp has no zebra striping: one hairline per row, none on the last. */
.vnr-page .vnr-comparison__table tbody tr:nth-of-type(even) .vnr-comparison__row-th,
.vnr-page .vnr-comparison__table tbody tr:nth-of-type(even) .vnr-comparison__cell {
	background: transparent;
}

.vnr-page .vnr-comparison__row-th,
.vnr-page .vnr-comparison__cell {
	padding: 1.5rem;
	font-size: .875rem;
	line-height: 1.625;
	vertical-align: top;
}

.vnr-page .vnr-comparison__table tbody tr:hover .vnr-comparison__row-th,
.vnr-page .vnr-comparison__table tbody tr:hover .vnr-comparison__cell {
	background: rgba(0, 0, 0, .04);
}

/* font-semibold text-foreground: sans and ink, not serif green. */
.vnr-page .vnr-comparison__row-th {
	min-width: 11rem;
	font-family: 'Inter', sans-serif;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	color: var(--vnr-ink);
}

.vnr-page .vnr-comparison__row-title {
	font: inherit;
	color: inherit;
}

/* A white pill with a border and a green check, not a tinted chip. Ink on cream
   is 11.82:1; the label carries the meaning, so the border is decoration. */
.vnr-page .vnr-comparison__badge {
	gap: .375rem;
	padding: .375rem .75rem;
	background: var(--vnr-cream);
	border: 1px solid var(--vnr-border);
	border-radius: 50rem;
	color: var(--vnr-ink);
	font-size: .75rem;
	font-weight: 500;
	box-shadow: var(--vnr-ps-shadow-sm);
}

.vnr-page .vnr-comparison__badge .bi {
	font-size: .875rem;
	color: var(--vnr-primary);
}

.vnr-page .vnr-comparison__note {
	margin-top: 2rem !important; /* beats the mt-4 utility in the markup */
	font-size: .875rem;
}

/* --- Estimators ---------------------------------------------------------- */

.vnr-page .vnr-section--calculator,
.vnr-page .vnr-section--workforce,
.vnr-page .vnr-section--jtc {
	padding-block: var(--vnr-ps-band);
}

/* The Jump The Curve band follows a band with its own bottom padding, so the
   full band rhythm above its eyebrow read as a gap. Top only. */
.vnr-page .vnr-section--jtc {
	padding-top: 3rem;
}

.vnr-page .vnr-calcsection__header {
	gap: 1.5rem;
	max-width: 42rem;
	padding: 0;
	margin-bottom: 4rem;
}

.vnr-page .vnr-calcsection__header .vnr-section__title {
	font-size: clamp(1.875rem, 4vw, 3rem);
	line-height: 1.1;
}

.vnr-page .vnr-calcsection__lead {
	font-size: 1.125rem;
	line-height: 1.625;
}

.vnr-page .vnr-calcsection__note {
	padding: 0;
	margin-top: 4rem;
}

/*
 * The rule for the whole standard: never set --bs-gutter-x on a row. A row
 * pulls itself out by half its gutter each side, and only the container's own
 * padding absorbs that. Raise the gutter and the page gains horizontal scroll.
 * Let the markup's g-4 / g-lg-5 do the work, which is what every other partial
 * already does and why nothing else overflows.
 */

.vnr-page .vnr-45f__card,
.vnr-page .vnr-wf__card {
	padding: 2rem;
	background: var(--vnr-cream);
	border-radius: var(--vnr-ps-radius-panel);
	box-shadow: var(--vnr-ps-shadow-sm);
}

/* The result card must NOT be height:100% or the sticky has no travel inside
   its column. The row stays stretched, so the column is still tall enough. */
.vnr-page .vnr-45f__card--result,
.vnr-page .vnr-wf__card--result {
	height: auto;
	background: #fff;
	border-color: var(--vnr-border);
	box-shadow: var(--vnr-ps-shadow-lg);
}

.vnr-page .vnr-45f__field,
.vnr-page .vnr-wf__field {
	margin-bottom: 2rem;
}

.vnr-page .vnr-45f__field .form-label,
.vnr-page .vnr-wf__field .form-label {
	margin-bottom: .75rem;
	font-size: 1rem;
}

/*
 * The comp puts the currency sigil inside the field rather than in an addon.
 * Taking .input-group-text out of flow lets the .form-control fill the row on
 * its own. The sigil is already aria-hidden and the field's label says what the
 * number is, so nothing is lost programmatically.
 */
.vnr-page .vnr-45f__field .input-group,
.vnr-page .vnr-wf__field .input-group {
	position: relative;
}

.vnr-page .vnr-45f__field .input-group-text,
.vnr-page .vnr-wf__field .input-group-text {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	left: 0;
	padding: 0 0 0 1rem;
	background: transparent;
	border: 0;
	color: var(--vnr-body);
	font-size: 1.125rem;
	pointer-events: none;
}

/*
 * h-14 text-lg bg-white, pl-8. The border stays --vnr-muted, 5.38:1 on white,
 * which is what gives the control a perceivable boundary.
 *
 * !important on the two leading corners and the negative margin: Bootstrap's
 * `.input-group>:not(:first-child)` rule carries six :not() clauses and scores
 * (0,7,0), which no reasonable scoped selector can outrank. Both declarations
 * exist to butt an input against a visible addon, and the addon here is
 * absolutely positioned, so the square corners and the -1px pull are both
 * artefacts rather than layout.
 */
.vnr-page .vnr-45f__field .form-control,
.vnr-page .vnr-wf__field .form-control {
	height: 3.5rem;
	margin-left: 0 !important;
	padding-left: 2rem;
	background: #fff;
	border-radius: .125rem;
	border-top-left-radius: .125rem !important;
	border-bottom-left-radius: .125rem !important;
	color: var(--vnr-ink);
	font-size: 1.125rem;
}

.vnr-page .vnr-45f__field .form-text,
.vnr-page .vnr-wf__field .form-text {
	margin-top: .5rem;
	font-size: .75rem;
}

/* 5.38:1 on white at 14px. */
.vnr-page .vnr-45f__card-title,
.vnr-page .vnr-wf__card-title {
	margin-bottom: 1rem;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--vnr-muted);
}

.vnr-page .vnr-45f__total,
.vnr-page .vnr-wf__gap {
	margin: 0 0 2rem;
	font-size: clamp(3rem, 5vw, 3.75rem);
	letter-spacing: -.03em;
}

.vnr-page .vnr-45f__breakdown,
.vnr-page .vnr-wf__breakdown {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.vnr-page .vnr-45f__line,
.vnr-page .vnr-wf__line {
	margin-bottom: 0;
	padding-block: .75rem;
	border-bottom: 1px solid var(--vnr-border);
	font-size: .875rem;
}

.vnr-page .vnr-45f__line:last-child,
.vnr-page .vnr-wf__line:last-child {
	border-bottom: 0;
}

/* --vnr-secondary-text is 5.57:1 on white as both label and boundary. */
.vnr-page .vnr-45f__cta,
.vnr-page .vnr-wf__cta {
	min-height: 3rem;
	margin-top: 2rem;
}

/*
 * The comp's box, but left-aligned and at --vnr-body rather than centred and
 * muted. Centred small grey type is what makes a tax disclaimer arguable as not
 * conspicuous, and the client already decided a reader must notice this one.
 * The maroon rule is the part of the comp worth taking.
 */
.vnr-page .vnr-45f__disclaimer {
	max-width: 56rem;
	margin-top: 4rem;
	padding: 1.5rem;
	background: var(--vnr-cream);
	border: 1px solid var(--vnr-border);
	border-radius: var(--vnr-ps-radius-card);
	box-shadow: var(--vnr-ps-shadow-sm);
	font-size: .875rem;
	line-height: 1.625;
	color: var(--vnr-body);
}

.vnr-page .vnr-45f__disclaimer .bi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: rgba(var(--vnr-primary-rgb), .10);
	color: var(--vnr-primary);
	font-size: .75rem;
	line-height: 1;
}

@media (min-width: 768px) {

	.vnr-page .vnr-section--calculator,
	.vnr-page .vnr-section--workforce,
	.vnr-page .vnr-section--jtc {
		padding-block: var(--vnr-ps-band-lg);
	}

	.vnr-page .vnr-section--jtc {
		padding-top: 4rem;
	}
}

@media (min-width: 992px) {

	.vnr-page .vnr-45f__card,
	.vnr-page .vnr-wf__card {
		padding: 2.5rem;
	}

	/* Offset past the sticky header so a focused control inside the card is
	   never covered. */
	.vnr-page .vnr-45f__card--result,
	.vnr-page .vnr-wf__card--result {
		position: sticky;
		top: calc(var(--vnr-sticky-top, 6rem) + 2rem);
	}
}

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

.vnr-page .vnr-faq__rail {
	gap: 1.5rem;
}

.vnr-page .vnr-faq__lead {
	font-size: 1rem;
	line-height: 1.625;
	color: var(--vnr-body);
}

/*
 * The comp's accordion is deliberately minimal: one hairline per item and a
 * chevron that rotates. The card, the circular badge, the tinted open row and
 * the gold inset rule are all unwound.
 *
 * Bootstrap's markup contract is untouched: aria-expanded, aria-controls and
 * data-bs-parent are all still on the elements the plugin put them on. The open
 * state is still carried by shape (the chevron flips) and programmatically, so
 * removing the tint does not create a colour-only signal.
 */
.vnr-page .vnr-faq {
	--bs-accordion-bg: transparent;
	--bs-accordion-btn-padding-x: 0;
	--bs-accordion-btn-padding-y: 1.25rem;
	--bs-accordion-body-padding-x: 0;
	--bs-accordion-active-bg: transparent;
	--bs-accordion-active-color: var(--vnr-ink);
	--vnr-faq-gutter: 0rem;

	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.vnr-page .vnr-faq .accordion-item {
	border: 0;
	border-bottom: 1px solid var(--vnr-border);
}

.vnr-page .vnr-faq .accordion-item:last-of-type {
	border-bottom: 0;
}

.vnr-page .vnr-faq .accordion-item:first-of-type > .accordion-header > .accordion-button,
.vnr-page .vnr-faq .accordion-item:last-of-type > .accordion-header > .accordion-button.collapsed,
.vnr-page .vnr-faq .accordion-item:last-of-type > .accordion-collapse {
	border-radius: 0;
}

.vnr-page .vnr-faq .accordion-button {
	padding-right: 2rem;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.5;
	color: var(--vnr-ink);
}

/* The badge disc goes entirely. */
.vnr-page .vnr-faq .accordion-button::before,
.vnr-page .vnr-faq .accordion-button.collapsed:hover::before,
.vnr-page .vnr-faq .accordion-button:not(.collapsed)::before {
	content: none;
}

/* 4.56:1 on --vnr-soft-bg, above the 3:1 a meaningful icon needs. */
.vnr-page .vnr-faq .accordion-button::after {
	right: .25rem;
	width: .5rem;
	height: .5rem;
	border-width: 0 2px 2px 0;
	color: var(--vnr-muted);
	transform: translateY(-.18rem) rotate(45deg);
}

.vnr-page .vnr-faq .accordion-button:not(.collapsed) {
	background: transparent;
	box-shadow: none;
}

.vnr-page .vnr-faq .accordion-button:not(.collapsed)::after {
	border-color: currentColor;
	transform: translateY(.18rem) rotate(225deg);
}

/* hover:text-primary, 6.70:1 on --vnr-soft-bg. */
.vnr-page .vnr-faq .accordion-button.collapsed:hover,
.vnr-page .vnr-faq .accordion-button:hover {
	background: transparent;
	color: var(--vnr-primary);
}

.vnr-page .vnr-faq .accordion-collapse.show,
.vnr-page .vnr-faq .accordion-collapse.collapsing {
	background: transparent;
	box-shadow: none;
}

/* --vnr-body rather than the comp's muted grey: 8.10:1 vs 4.56:1, and this is
   running prose. */
.vnr-page .vnr-faq .accordion-body {
	padding: 0 2rem 1.25rem 0;
	font-size: .875rem;
	line-height: 1.625;
	color: var(--vnr-body);
}

/* The card is gone, so the ring no longer needs to be inset to avoid clipping. */
.vnr-page .vnr-faq .accordion-button:focus-visible {
	outline: 3px solid var(--vnr-primary);
	outline-offset: 2px;
}

@media (min-width: 768px) {

	.vnr-page .vnr-faq__layout {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		gap: 3rem;
	}
}

@media (min-width: 992px) {

	.vnr-page .vnr-faq__layout {
		gap: 6rem;
	}
}

/* --- CTA ----------------------------------------------------------------- */

/*
 * An inset panel with a radial gold wash from the top right. The wash is only
 * applied to the tones dark enough to carry it; on the gold panel it would be
 * invisible.
 */
.vnr-page .vnr-cta__panel {
	position: relative;
	overflow: hidden;
	gap: 2rem;
	padding: 2.5rem;
	border-radius: var(--vnr-ps-radius-panel);
	box-shadow: var(--vnr-ps-shadow-xl);
}

.vnr-page .vnr-cta__panel--dark::before,
.vnr-page .vnr-cta__panel--green::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		circle at top right,
		rgba(var(--vnr-secondary-rgb), .55),
		transparent 55%
	);
	opacity: .2;
	pointer-events: none;
}

.vnr-page .vnr-cta__body,
.vnr-page .vnr-cta__actions {
	position: relative;
	z-index: 1;
}

.vnr-page .vnr-cta__body {
	gap: 1rem;
	max-width: 42rem;
}

.vnr-page .vnr-cta__heading {
	font-size: clamp(1.875rem, 3vw, 2.25rem);
	line-height: 1.15;
}

.vnr-page .vnr-cta__lead {
	font-size: 1.125rem;
	line-height: 1.625;
}

.vnr-page .vnr-cta__btn {
	--bs-btn-padding-y: 1rem;
	--bs-btn-padding-x: 2rem;
	--bs-btn-font-size: 1rem;

	min-height: 3.5rem;
}

/*
 * 992, not 768. At tablet width the 8fr/4fr split leaves the action column at
 * 179px, narrower than the same buttons get on a phone: "Request a Section 45F
 * Feasibility Review" rendered as a 179x130 block of five stacked words. The
 * base theme already waits for 992 to go two-up; this rule was the one place
 * that did not.
 */
@media (min-width: 992px) {

	.vnr-page .vnr-cta__panel {
		display: grid;
		grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
		align-items: center;
		gap: 2rem;
		padding: 4rem;
	}

	.vnr-page .vnr-cta__actions {
		justify-content: flex-end;
	}
}

/* --- Disclaimer ---------------------------------------------------------- */

.vnr-page .vnr-disclaimer__card {
	max-width: 64rem;
	margin-inline: auto;
	gap: 1rem;
	padding: 1.5rem;
	border-left: 1px solid var(--vnr-border);
	border-radius: var(--vnr-ps-radius-card);
	box-shadow: var(--vnr-ps-shadow-sm);
}

/* A 24px tinted disc with a small info glyph, 6.76:1. */
.vnr-page .vnr-disclaimer__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: .125rem;
	border-radius: 50%;
	background: rgba(var(--vnr-primary-rgb), .10);
	color: var(--vnr-primary);
	font-size: .75rem;
	line-height: 1;
}

.vnr-page .vnr-disclaimer__heading {
	font-size: 1rem;
	font-weight: 600;
}

/* --vnr-body (9.56:1), not the comp's muted grey. This is the tax disclaimer. */
.vnr-page .vnr-disclaimer__text {
	font-size: .875rem;
	line-height: 1.625;
	color: var(--vnr-body);
}

/* --- Motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.vnr-page .vnr-section--features .card,
	.vnr-page .vnr-comparison__row-th,
	.vnr-page .vnr-comparison__cell,
	.vnr-page .vnr-faq .accordion-button,
	.vnr-page .vnr-faq .accordion-button::after {
		transition: none;
	}

	/* A results card that repositions as you type is motion the reader did not
	   ask for on a page they are scrolling. */
	.vnr-page .vnr-45f__card--result,
	.vnr-page .vnr-wf__card--result {
		position: static;
	}
}

/* --- Checklist with a photo beside it ------------------------------------ */

/*
 * The optional media column. The photo used to sit on its own as a full-width
 * band with no copy anywhere near it, which read as filler; paired with the
 * requirements list it illustrates, it has a job.
 */
.vnr-page .vnr-checklist__split {
	margin-top: 0;
}

.vnr-page .vnr-slot--checklist .vnr-slot__box {
	border-radius: var(--vnr-ps-radius-panel);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .08),
		var(--vnr-ps-shadow-lg);
}

/*
 * The cap comes off only where the split actually exists. image-slot.php writes
 * --vnr-slot-cap inline to stop a portrait swallowing a full-width band, and
 * dropping it at every width did exactly that below 992px: the About portrait
 * measured 696x928 at 768, pushing the five facts it illustrates 1211px into the
 * band and entirely below the fold.
 */
@media (min-width: 992px) {

	.vnr-page .vnr-slot--checklist .vnr-slot__box {
		max-width: none;
	}
}

/* The panel already carries its own padding, so a split band does not need the
   image column's gutter doubled on top of it. */
@media (min-width: 992px) {

	.vnr-page .vnr-checklist__split .vnr-checklist__panel {
		height: 100%;
	}

	/* One column of items reads better than two inside a 7/12 column. */
	.vnr-page .vnr-checklist__split .vnr-checklist__list {
		column-count: 1;
	}
}

/* ==========================================================================
   The standard, extended to the rest of the section vocabulary
   ==========================================================================
   Same scope rules as the block above: every selector starts .vnr-page, colour
   is never set with a blanket selector, and no rule sets --bs-gutter-x.
   ========================================================================== */

/* --- The second heading convention --------------------------------------- */

/*
 * The theme has two section-heading classes. `.vnr-section__title` is the
 * common one and the block above already handles it; `.section-title` is used
 * by comparison, spectable, features, routing and team. Without this they enter
 * the standard at the theme's clamp while everything around them has moved.
 */
.vnr-page .site-main .section-title {
	font-size: clamp(1.875rem, 3.2vw, 2.25rem);
	line-height: 1.15;
}

/* --- Section headers, the shared vocabulary ------------------------------ */

.vnr-page .vnr-audience__header,
.vnr-page .vnr-listings__headings,
.vnr-page .vnr-timeline__header,
.vnr-page .vnr-calcslot__head,
.vnr-page .vnr-quote__header {
	gap: 1rem;
	margin-bottom: 3rem;
}

.vnr-page .vnr-audience__lead,
.vnr-page .vnr-listings__lead,
.vnr-page .vnr-timeline__lead,
.vnr-page .vnr-calcslot__lead,
.vnr-page .vnr-routing__lead,
.vnr-page .vnr-location__note {
	font-size: 1.125rem;
	line-height: 1.625;
}

/* --- Audience ------------------------------------------------------------ */

.vnr-page .vnr-audience__grid {
	gap: 1.5rem;
}

/* The gold top rule goes: the standard's cards carry a hairline all round and
   let the icon or the heading do the signalling. */
.vnr-page .vnr-audience__card {
	padding: 2rem;
	border: 1px solid var(--vnr-border);
	border-top: 1px solid var(--vnr-border);
	border-radius: var(--vnr-ps-radius-card);
	box-shadow: var(--vnr-ps-shadow-sm);
}

.vnr-page .vnr-audience__card:hover {
	transform: none;
	box-shadow: var(--vnr-ps-shadow-md);
}

.vnr-page .vnr-audience__title {
	font-size: 1.0625rem;
	line-height: 1.4;
}

.vnr-page .vnr-audience__desc {
	font-size: .875rem;
	line-height: 1.625;
}

/* --- Listings ------------------------------------------------------------ */

.vnr-page .vnr-listings__grid {
	gap: 1.5rem;
}

.vnr-page .vnr-listings__card {
	padding: 2rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-radius: var(--vnr-ps-radius-card);
	box-shadow: var(--vnr-ps-shadow-sm);
}

.vnr-page .vnr-listings__card:hover {
	transform: none;
	box-shadow: var(--vnr-ps-shadow-md);
}

/* Muted grey, matching every other section kicker in the standard. */
.vnr-page .vnr-listings__meta {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--vnr-muted);
}

.vnr-page .vnr-listings__title {
	font-size: 1.25rem;
	line-height: 1.25;
}

.vnr-page .vnr-listings__desc {
	font-size: .875rem;
	line-height: 1.625;
}

/* The white pill with a border, the same object the comparison verdict uses. */
.vnr-page .vnr-listings__badge {
	padding: .375rem .75rem;
	background: var(--vnr-cream);
	border: 1px solid var(--vnr-border);
	color: var(--vnr-ink);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: var(--vnr-ps-shadow-sm);
}

/* --- Location ------------------------------------------------------------ */

.vnr-page .vnr-location__panel {
	padding: 2.5rem;
	border-radius: var(--vnr-ps-radius-panel);
	box-shadow: var(--vnr-ps-shadow-lg);
}

.vnr-page .vnr-location__list {
	gap: 1.5rem;
}

.vnr-page .vnr-location__row dt {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
}

.vnr-page .vnr-location__row dd,
.vnr-page .vnr-location__row a {
	font-size: .9375rem;
	line-height: 1.625;
}

@media (min-width: 992px) {

	.vnr-page .vnr-location__panel {
		padding: 3.5rem;
	}
}

/* --- Quote --------------------------------------------------------------- */

.vnr-page .vnr-quote__text {
	font-size: clamp(1.5rem, 2.6vw, 2.125rem);
	line-height: 1.3;
}

.vnr-page .vnr-quote__attribution {
	font-size: .9375rem;
}

.vnr-page .vnr-quote__role {
	font-size: .875rem;
}

/* --- Routing ------------------------------------------------------------- */

.vnr-page .vnr-routing__card {
	padding: 2rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-radius: var(--vnr-ps-radius-card);
	box-shadow: var(--vnr-ps-shadow-sm);
}

.vnr-page .vnr-routing__card:hover {
	transform: none;
	box-shadow: var(--vnr-ps-shadow-md);
}

/* Gold on a forest disc, the same icon treatment the feature cards use. */
.vnr-page .vnr-routing__icon {
	width: 3rem;
	height: 3rem;
	background: var(--vnr-primary);
	color: var(--vnr-secondary);
}

.vnr-page .vnr-routing__title {
	font-size: 1.0625rem;
}

.vnr-page .vnr-routing__desc {
	font-size: .875rem;
	line-height: 1.625;
}

/* --- Team (the About page's section, not the CPT directory) -------------- */

.vnr-page .vnr-team__standfirst {
	font-size: 1.125rem;
	line-height: 1.625;
}

.vnr-page .vnr-team__media {
	border-radius: var(--vnr-ps-radius-card);
}

.vnr-page .vnr-team__name {
	font-size: 1.125rem;
}

.vnr-page .vnr-team__role {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--vnr-muted);
}

.vnr-page .vnr-team__bio {
	font-size: .875rem;
	line-height: 1.625;
}

/* --- Timeline ------------------------------------------------------------ */

.vnr-page .vnr-timeline__year {
	font-size: 1.75rem;
}

.vnr-page .vnr-timeline__title {
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: 0;
}

.vnr-page .vnr-timeline__desc {
	font-size: .875rem;
	line-height: 1.625;
}

/* --- Calculator placeholder ---------------------------------------------- */

.vnr-page .vnr-calcslot__panel {
	padding: 2rem;
	border-radius: var(--vnr-ps-radius-panel);
}

.vnr-page .vnr-calcslot__rvalue {
	font-size: clamp(2rem, 4vw, 2.75rem);
	letter-spacing: -.03em;
}

.vnr-page .vnr-calcslot__note {
	font-size: .875rem;
	line-height: 1.625;
}

@media (min-width: 768px) {

	.vnr-page .vnr-calcslot__panel {
		padding: 2.5rem;
	}
}

/* --- Figure bands -------------------------------------------------------- */

/* The same plate the header photo gets, minus the offset block, which needs a
   column beside it to lean against. */
.vnr-page .vnr-slot--band .vnr-slot__box {
	border-radius: var(--vnr-ps-radius-panel);
	box-shadow:
		inset 0 0 0 1px rgba(0, 0, 0, .08),
		var(--vnr-ps-shadow-lg);
}

/*
 * A band that carries copy is a band like any other, so it takes the house
 * rhythm rather than the bare-banner 3rem. The plain --figureband padding above
 * still applies to a slot with no header, which is what an unfilled page shows.
 */
.vnr-page .vnr-section--figureband-copy {
	padding-block: 4rem;
}

.vnr-page .vnr-figureband__header {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 48rem;
	margin-bottom: 2.5rem;
}

/* Beside the image the column is already narrow, so it sets its own measure and
   closes the gap to the picture. */
.vnr-page .vnr-section--figureband-split .vnr-figureband__header {
	max-width: none;
	margin-bottom: 0;
}

/*
 * --vnr-slot-cap keeps a portrait from swallowing a full-width band, which is
 * right when the image runs the container. In the split it is already inside a
 * five-column track, so the cap only leaves it floating with air either side.
 */
.vnr-page .vnr-section--figureband-split .vnr-slot__box {
	max-width: none;
}

.vnr-page .vnr-figureband__heading {
	margin-bottom: 0;
	font-size: clamp(1.875rem, 3.2vw, 2.25rem);
	line-height: 1.15;
}

.vnr-page .vnr-figureband__body {
	font-size: 1rem;
	line-height: 1.625;
	color: var(--vnr-body);
}

.vnr-page .vnr-figureband__body p {
	margin-bottom: 0;
}

.vnr-page .vnr-figureband__body p + p {
	margin-top: 1rem;
}

.vnr-page .vnr-slot__caption {
	font-size: .875rem;
	line-height: 1.625;
}

@media (min-width: 768px) {

	.vnr-page .vnr-section--figureband-copy {
		padding-block: 6rem;
	}
}

/* --- Contact form band ---------------------------------------------------- */

.vnr-page .vnr-contact__header {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 48rem;
}

/*
 * Inside the tinted details panel, one step below the band's own heading.
 *
 * --vnr-body, not --vnr-muted: muted grey measures 4.11:1 on this sand tint and
 * fails. This is the trap the standard's own pitfalls note names.
 */
.vnr-page .vnr-contact__details-title {
	font-family: 'Inter', sans-serif;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vnr-body);
}

/*
 * The details panel is a tinted panel, not a bare column. It carried .bg-light,
 * and --bs-light is aliased to --vnr-cream, so it painted itself in exactly the
 * body colour and read as 1.00:1 against the band behind it: 48px of inset
 * padding with nothing to explain it.
 */
.vnr-page .vnr-contact__details {
	background: var(--vnr-ps-sand);
	border: 1px solid var(--vnr-ps-sand-edge);
	border-radius: var(--vnr-ps-radius-panel);
}

/* --vnr-body, not --vnr-muted: muted grey on this tint is 4.11:1 and fails. */
.vnr-page .vnr-contact__details li,
.vnr-page .vnr-contact__details li a {
	color: var(--vnr-body);
}

/* --- The default page template's body ------------------------------------- */

/*
 * page.php carried a bare .py-5, so a plain page opened with 48px of air where
 * every other page opens with 80 and closed straight into the footer. It is a
 * band now, and takes the band rhythm from the generic rule above.
 */
.vnr-page .vnr-section--pagebody .vnr-prose > *:first-child {
	margin-top: 0;
}

/*
 * The row is exactly the reading measure, and the prose fills it. It used to be
 * a col-lg-8 inside a full container, declaring 1320px and using 880, so a third
 * of the row was permanently empty with no second column that could ever occupy
 * it. Centring only moved that space into two flanks instead of one.
 *
 * 44rem is the same measure the policy template's prose column uses.
 */
.page-builder-content > * {
	max-width: 44rem;
	margin-right: auto;
}

.page-builder-content > .aligncenter,
.vnr-article__body > .aligncenter {
	margin-right: auto;
	margin-left: auto;
}

.page-builder-content > .alignwide,
.vnr-article__body > .alignwide {
	width: 100%;
	max-width: 70rem;
}

/*
 * Full-bleed blocks.
 *
 * 100vw counts the scrollbar's own width in every browser that lays a classic
 * scrollbar over the page, so any page long enough to scroll vertically gained
 * a few pixels of horizontal overflow and a second scrollbar along the bottom.
 * The width is still 100vw, because that is what makes the bleed work; what
 * stops the overflow is the overflow-x guard on the body below.
 *
 * Articles get the same treatment: the block editor offers alignment on posts
 * as well as pages, and without this a full-width block in an Insights article
 * simply sat at body width with no styling of its own.
 */
.page-builder-content > .alignfull,
.vnr-article__body > .alignfull {
	width: 100vw;
	max-width: none;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

/*
 * `clip` rather than `hidden` on purpose. Both stop the sideways scrollbar, but
 * `hidden` turns the body into a scroll container and that kills the sticky
 * header the Theme Options switch turns on. `clip` trims the overflow and
 * leaves sticky positioning alone. A browser too old to know `clip` ignores
 * this line and behaves exactly as it did before, so nothing regresses.
 */
body {
	overflow-x: clip;
}

/* --- Thank-you confirmation template ------------------------------------ */
.vnr-thank-you {
	position: relative;
	overflow: hidden;
	padding: clamp(4rem, 9vw, 8rem) 0;
	background: radial-gradient(circle at 12% 15%, rgba(var(--vnr-accent-rgb), .13), transparent 30rem), linear-gradient(145deg, var(--vnr-cream), #fff 72%);
}

.vnr-thank-you::after {
	position: absolute;
	right: -8rem;
	bottom: -12rem;
	width: 30rem;
	height: 30rem;
	border: 1px solid rgba(var(--vnr-primary-rgb), .12);
	border-radius: 50%;
	content: "";
}

.vnr-thank-you__card {
	position: relative;
	z-index: 1;
	max-width: 52rem;
	margin: 0 auto;
	padding: clamp(2rem, 6vw, 4.5rem);
	text-align: center;
	background: #fff;
	border: 1px solid rgba(var(--vnr-primary-rgb), .12);
	border-radius: var(--vnr-ps-radius-panel);
	box-shadow: var(--vnr-ps-shadow-md);
}

.vnr-thank-you__mark {
	display: grid;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 auto 1.5rem;
	place-items: center;
	color: #fff;
	background: var(--vnr-primary);
	border-radius: 50%;
	box-shadow: 0 0 0 .55rem rgba(var(--vnr-primary-rgb), .1);
}

.vnr-thank-you__mark svg {
	width: 2.5rem;
	height: 2.5rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
}

.vnr-thank-you h1 {
	margin: .75rem 0 1.25rem;
	font-size: clamp(2.25rem, 6vw, 4rem);
}

.vnr-thank-you__content {
	font-size: 1.125rem;
	line-height: 1.7;
}

.vnr-thank-you .vnr-thank-you__content > * {
	margin-right: auto;
	margin-left: auto;
}

.vnr-thank-you__home {
	display: inline-flex;
	gap: .55rem;
	align-items: center;
	margin-top: 2rem;
	font-weight: 700;
	color: var(--vnr-primary);
	text-underline-offset: .25em;
}

/* --- Services index ------------------------------------------------------- */

.vnr-page .vnr-servicelist__header {
	gap: 1rem;
	margin-bottom: 3rem;
}

.vnr-page .vnr-servicelist__lead {
	font-size: 1.125rem;
	line-height: 1.625;
}

.vnr-page .vnr-servicelist__grid {
	gap: 1.5rem;
}

/* The house card: hairline all round, no lift on hover, shadow answers instead. */
.vnr-page .vnr-servicelist__card {
	gap: .75rem;
	padding: 2rem;
	border-radius: var(--vnr-ps-radius-card);
	box-shadow: var(--vnr-ps-shadow-sm);
	transition: box-shadow .18s ease;
}

.vnr-page .vnr-servicelist__card:hover {
	transform: none;
	box-shadow: var(--vnr-ps-shadow-md);
}

.vnr-page .vnr-servicelist__meta {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--vnr-muted);
}

.vnr-page .vnr-servicelist__title {
	font-size: 1.25rem;
	line-height: 1.25;
}

.vnr-page .vnr-servicelist__desc {
	font-size: .875rem;
	line-height: 1.625;
}

/* --- Bespoke page furniture ---------------------------------------------- */

/*
 * Four templates build their own markup instead of using the section loop. They
 * still have to read as the same house, so the standard reaches them too.
 */

/* Legal: the table-of-contents rail. */
.vnr-page .vnr-legal__toc-title {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--vnr-muted);
}

.vnr-page .vnr-legal__toc-link {
	font-size: .875rem;
	line-height: 1.5;
}

.vnr-page .vnr-legal__effective {
	font-size: .875rem;
	line-height: 1.625;
}

/*
 * The prose column keeps its own reading measure. Dropping the container
 * constraint was about BANDS; a column that exists to hold running text is a
 * different decision and stays.
 */
.vnr-page .vnr-legal .vnr-prose,
.vnr-page .page-body .vnr-prose {
	font-size: 1rem;

	/* 1.625, the documented body ramp. It was 1.7, which is the only body
	   measure on the site that is not on the ramp. */
	line-height: 1.625;
}

/*
 * A policy's own subheads carry the whole structure of the document, and they
 * were the only display headings on an in-scope page outside the standard's
 * ramp: 25.6px at 390 and 768, under the 30px floor.
 */
.vnr-page .vnr-legal .vnr-prose h2,
.vnr-page .page-body .vnr-prose h2 {
	font-size: clamp(1.875rem, 3.2vw, 2.25rem);
	line-height: 1.15;
}

/*
 * The policy band is the only band on that template with no assigned ground, so
 * it inherited body cream and abutted the cream CTA band with no seam.
 */
.vnr-page .vnr-section--legal {
	background: #fff;
}

/*
 * The declared grid track was 976px holding a 656px measure, so the prose
 * stopped 320px short of the edge every other band on the page ends at. The
 * track now equals what it can hold, and the measure widens a little with it.
 *
 * From 992px only. The base layout is a single column below that, and forcing
 * the two tracks at every width pushed a 16rem rail plus a 44rem measure 27px
 * past a 390px viewport.
 */
.vnr-page .vnr-legal {
	max-width: 44rem;
}

@media (min-width: 992px) {

	/*
	 * The layout is exactly as wide as the two tracks and the gap between them,
	 * so nothing is declared that cannot be filled. Capping the track alone left
	 * the leftover packed against the right edge instead of inside the track,
	 * which is the same empty region measured from a different side.
	 */
	.vnr-page .vnr-legal__layout:has(.vnr-legal__toc) {
		grid-template-columns: 16rem minmax(0, 44rem);
		max-width: 64rem;
	}

	/* No rail: one readable measure, centred, rather than a 256px ribbon. */
	.vnr-page .vnr-legal__layout:not(:has(.vnr-legal__toc)) {
		grid-template-columns: minmax(0, 44rem);
		max-width: 44rem;
	}
}

/* Blog: the archive head and the insight cards. */

/*
 * The archive head is the one header on the site with no ground and no closing
 * edge, so it did not read as a band at all. Same treatment .page-header gets.
 */
.vnr-page .vnr-archive__head {
	padding: 3rem 0 4rem;
	background: var(--vnr-soft-bg);
	border-bottom: 1px solid var(--vnr-border);
}

@media (min-width: 992px) {

	.vnr-page .vnr-archive__head {
		padding: 5rem 0 6rem;
	}
}

.vnr-page .vnr-archive__title {
	font-size: clamp(2.75rem, 4.2vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -.02em;
}

.vnr-page .vnr-archive__desc {
	font-size: 1.125rem;
	line-height: 1.625;
}

.vnr-page .vnr-archive__count,
.vnr-page .vnr-insight__meta,
.vnr-page .vnr-lead__excerpt,
.vnr-page .vnr-insight__excerpt {
	font-size: .875rem;
	line-height: 1.625;
}

/*
 * Brand tokens, not Bootstrap defaults. The lead card's excerpt carried
 * .text-body and its meta line .text-muted, so three of the four text colours
 * in this band came from Bootstrap and the lead paragraph read visibly colder
 * than the three excerpts directly beneath it.
 */
.vnr-page .vnr-lead__excerpt,
.vnr-page .vnr-insight__excerpt {
	color: var(--vnr-body);
}

.vnr-page .vnr-insight__meta {
	color: var(--vnr-muted);
}

.vnr-page .vnr-insight,
.vnr-page .vnr-lead {
	border: 1px solid var(--vnr-border);
	border-radius: var(--vnr-ps-radius-card);
	box-shadow: var(--vnr-ps-shadow-sm);
}

.vnr-page .vnr-insight:hover,
.vnr-page .vnr-lead:hover {
	transform: none;
	box-shadow: var(--vnr-ps-shadow-md);
}

/*
 * !important: insight-lead.php carried p-4 p-lg-5, which Bootstrap declares
 * !important, so this rule never reached the lead card and the two card
 * treatments in one band disagreed by 20px at desktop and crossed over at
 * mobile. The utilities are out of the markup now; the !important stays as the
 * same guard the band rules further up carry.
 */
.vnr-page .vnr-insight .card-body,
.vnr-page .vnr-lead__body {
	padding: 1.75rem !important;
}

/*
 * The text stack centres against the photograph beside it. Stretched, mt-auto
 * pushed the date line to the bottom of a 425px column and left about 96px of
 * nothing between it and the excerpt.
 */
.vnr-page .vnr-lead__body {
	justify-content: center;
}

.vnr-page .vnr-lead .vnr-insight__meta {
	margin-top: 1rem !important; /* beats the mt-auto utility in the markup */
}

/*
 * 700, and the card title size from the standard's card recipe. The markup
 * carried Bootstrap's .h5, which sets weight 500: the only heading on the site
 * at that weight.
 */
.vnr-page .vnr-insight__title {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

/*
 * The closing band's heading was 41.6px, the only heading size on the site
 * between the section ramp's 36px cap and the statement ramp's 48px, on the one
 * band with no eyebrow above it.
 */
.vnr-page .site-main .vnr-ctaband__title {
	font-size: clamp(1.875rem, 4vw, 3rem);
	line-height: 1.1;
}

.vnr-page .site-main .vnr-lead__title {
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	line-height: 1.2;
}

/* Team: the directory head, filters and cards. */
.vnr-page .vnr-team-directory__header {
	margin-bottom: 3rem;
}

/*
 * The Team page uses .section-kicker where every other page uses .vnr-eyebrow.
 * The default rule at the top of the standard already names it, so this only
 * has to undo the Bootstrap utilities the markup carries.
 */
.vnr-page .vnr-team-directory__header .section-kicker {
	margin-bottom: .85rem !important; /* beats the .mb-2 utility in the markup */
	font-weight: 700 !important; /* beats the .fw-semibold utility beside it */
}

/*
 * The one text field on the page took the house control: white fill, the 2px
 * radius, the same height as the contact form's inputs. It was a soft fill with
 * an 8.8px radius, matching nothing else in the standard.
 */
.vnr-page .site-main .vnr-team-search__input {
	min-height: 3rem;
	background: #fff;
	border-radius: .125rem;
	color: var(--vnr-ink);
	font-size: 1rem;
}

/*
 * The directory renders no .vnr-section, so the standard's band rhythm never
 * reached it and <main> carried a flat Bootstrap .py-5 at every viewport.
 * !important answers that utility in kind, as the band rules further up do.
 */
.vnr-page .site-main.py-5 {
	padding-block: var(--vnr-ps-band) !important;
}

@media (min-width: 768px) {

	.vnr-page .site-main.py-5 {
		padding-block: var(--vnr-ps-band-lg) !important;
	}
}

.vnr-page .vnr-team-directory__count,
.vnr-page .vnr-catnav__count,
.vnr-page .vnr-team-filters__count {
	font-size: .875rem;
}

.vnr-page .vnr-team-card,
.vnr-page .vnr-team-card.card {
	border: 1px solid var(--vnr-border);
	border-radius: var(--vnr-ps-radius-card);
	box-shadow: var(--vnr-ps-shadow-sm);
}

.vnr-page .vnr-team-card:hover {
	transform: none;
	box-shadow: var(--vnr-ps-shadow-md);
}

.vnr-page .vnr-team-card .card-body {
	padding: 1.5rem;
}

.vnr-page .vnr-team-card__name {
	font-size: 1.0625rem;
}

.vnr-page .vnr-team-card__role,
.vnr-page .vnr-team-card__dept,
.vnr-page .vnr-team-card__creds {
	font-size: .8125rem;
	line-height: 1.5;
}

/* The filter and category pills share one shape across both templates. */
.vnr-page .vnr-team-filters__link,
.vnr-page .vnr-catnav__link {
	font-size: .8125rem;
	font-weight: 600;
}

/* Contact: the form panel and its controls. */
.vnr-page .vnr-contact__details {
	border-radius: var(--vnr-ps-radius-panel);
}

.vnr-page .vnr-contact-form .form-label {
	margin-bottom: .5rem;
	font-size: .9375rem;
	font-weight: 600;
}

.vnr-page .vnr-contact-form .form-control,
.vnr-page .vnr-contact-form .form-select {
	min-height: 3rem;
	background: #fff;
	border-radius: .125rem;
	color: var(--vnr-ink);
	font-size: 1rem;
}

.vnr-page .vnr-contact-form textarea.form-control {
	min-height: 8rem;
}

/*
 * Partials that hardcode .py-5 alongside .vnr-section. Bootstrap declares the
 * utility with !important, so the band padding has to answer in kind or those
 * sections keep 3rem while every band around them is on the standard's rhythm.
 */
.vnr-page .vnr-section--contact,
.vnr-page .vnr-section--features,
.vnr-page .vnr-section--generic {
	padding-block: var(--vnr-ps-band) !important;
}

.vnr-page .vnr-section--features {
	padding-block: 3rem !important;
}

@media (min-width: 768px) {

	.vnr-page .vnr-section--contact,
	.vnr-page .vnr-section--generic {
		padding-block: var(--vnr-ps-band-lg) !important;
	}

	.vnr-page .vnr-section--features {
		padding-block: 3rem !important;
	}
}

/* --- Cookie consent ----------------------------------------------------- */

/*
 * While the notice is asking it sits over the foot of the page, and the last
 * footer links would take focus underneath it with nowhere left to scroll
 * (SC 2.4.11 Focus Not Obscured). theme.js measures the band into
 * --vnr-consent-h once it is shown, and zeroes it when it goes; the padding is
 * exactly the band's height, so it is never visible as a gap.
 */
html:has(.vnr-consent:not([hidden])) {
	scroll-padding-bottom: var(--vnr-consent-h, 0px);
}

body:has(.vnr-consent:not([hidden])) {
	padding-bottom: var(--vnr-consent-h, 0px);
}

/*
 * A band across the bottom, not a modal over the page. It does not trap focus
 * and it does not cover the content, because a banner that behaves like a modal
 * is why people click accept without reading, which is the opposite of what one
 * is for. Dark forest ground so it reads as chrome rather than as content.
 */
.vnr-consent {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	/*
	 * Below Bootstrap's offcanvas (1045) and its backdrop (1040), not above them.
	 * At 1090 this sat on top of the open menu panel and swallowed taps on the
	 * Tenant Portal button and half of Get in Touch, which is every first-time
	 * visitor on a phone, because the panel is the primary navigation at every
	 * breakpoint. The notice has nothing urgent enough to outrank a menu the
	 * visitor deliberately opened.
	 */
	z-index: 1030;
	padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom));
	background: var(--vnr-dark);
	border-top: 3px solid var(--vnr-secondary);
	box-shadow: 0 -8px 30px rgba(22, 32, 43, .22);
}

.vnr-consent__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: min(1140px, 100% - 2.5rem);
	margin: 0 auto;
}

.vnr-consent__text {
	margin: 0;
	color: rgba(255, 255, 255, .88);
	font-size: .95rem;
	line-height: 1.55;
}

/*
 * Underlined, not just tinted: gold on the dark ground would be the only signal
 * otherwise, which is SC 1.4.1 again.
 */
.vnr-consent__link {
	color: var(--vnr-secondary);
	text-decoration: underline;
	text-underline-offset: .2em;
	white-space: nowrap;
}

.vnr-consent__link:hover,
.vnr-consent__link:focus-visible {
	color: #fff;
}

.vnr-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.vnr-consent__btn.btn {
	min-height: 44px;
	padding-right: 1.5rem;
	padding-left: 1.5rem;
	font-size: .9rem;
}

/*
 * The focus ring is the light one here. The sitewide rule uses the forest
 * primary, which on this ground measures nothing at all.
 */
.vnr-consent .btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--vnr-dark);
}

/* The withdrawal control, styled as the policy links beside it. */
.vnr-consent__reopen {
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-decoration: underline;
	text-underline-offset: .2em;
	cursor: pointer;
}

@media (min-width: 768px) {
	.vnr-consent__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.vnr-consent__actions {
		flex-shrink: 0;
	}
}

/*
 * WordPress core's privacy-policy draft carries editor-only tutorial markers,
 * and core hides them with admin CSS only. Published verbatim, "Suggested text:"
 * renders to the public nine times over. The page needs real copy either way,
 * but this makes sure core's scaffolding can never reach a visitor.
 */
.privacy-policy-tutorial {
	display: none;
}

/* The path selector's new header lead, matched to the measure the other bands use. */
.vnr-path-selector__lead {
	max-width: 46rem;
	color: var(--vnr-muted);
}

/* A policy page that is published but has no text yet. */
.vnr-legal__pending {
	padding: 1.5rem 1.75rem;
	border: 1px solid var(--vnr-border);
	border-left: 3px solid var(--vnr-secondary-text);
	border-radius: .25rem;
	background: var(--vnr-soft-bg);
}

.vnr-legal__pending p {
	margin: 0;
	color: var(--vnr-body);
}

.vnr-legal__pending-note {
	margin-top: .5rem !important; /* Beats Bootstrap's own margin reset on p. */
	color: var(--vnr-muted);
	font-size: .92rem;
}

/* --- Sweep fixes (0.13.17) ---------------------------------------------- */

/*
 * "Clear filters" was Bootstrap's default grey #6c757d on the theme's sand
 * panel: 3.97:1, under the 4.5:1 SC 1.4.3 needs for body-size text, on every
 * filtered property view.
 */
.btn-outline-secondary {
	--bs-btn-color: var(--vnr-primary);
	--bs-btn-border-color: var(--vnr-border);
	--bs-btn-hover-bg: var(--vnr-primary);
	--bs-btn-hover-border-color: var(--vnr-primary);
	--bs-btn-hover-color: #fff;
	--bs-btn-active-bg: var(--vnr-primary-deep);
	--bs-btn-active-color: #fff;
}

/*
 * The four archive filters are <details> elements that looked like static
 * labels: no caret, no chevron, nothing saying they open. The glyph is a
 * pseudo-element so it stays out of the accessibility tree, and the native
 * marker is removed because it renders inconsistently across engines.
 */
.property-filters__summary {
	position: relative;
	padding-right: 2rem;
	list-style: none;
	cursor: pointer;
}

.property-filters__summary::-webkit-details-marker {
	display: none;
}

.property-filters__summary::after {
	content: "\F282"; /* bi-chevron-down, in the icon subset already loaded. */
	position: absolute;
	top: 50%;
	right: .85rem;
	font-family: bootstrap-icons, sans-serif;
	font-size: .7rem;
	color: var(--vnr-muted);
	transform: translateY(-50%);
	transition: transform .18s ease;
}

.property-filters__facet[open] > .property-filters__summary::after {
	transform: translateY(-50%) rotate(180deg);
}

/*
 * The hero's two audience chips are links and read as body text: same near-black
 * as the paragraph above them, no underline, no border. They are the two-audience
 * fork the homepage exists for, so they need to look clickable.
 */
.vnr-hero__chip-label {
	color: var(--vnr-primary);
	text-decoration: underline;
	text-decoration-thickness: .08em;
	text-underline-offset: .22em;
	text-decoration-color: rgba(var(--vnr-primary-rgb), .4);
	transition: text-decoration-color .18s ease;
}

.vnr-hero__chip:hover .vnr-hero__chip-label,
.vnr-hero__chip:focus-visible .vnr-hero__chip-label {
	text-decoration-color: currentColor;
}

/*
 * The divider between the two chips is a separate span, so once the row wraps it
 * stayed on the first line pointing at nothing. Below the wrap point it goes.
 */
@media (max-width: 575.98px) {

	.vnr-hero__paths-divider {
		display: none;
	}
}

/*
 * The Insights lead card stretched its text column to the image's full height
 * and pinned the meta line to the bottom, leaving ~170px of white under a short
 * excerpt. Let the content sit together and the card breathe below it.
 */
.vnr-lead__body {
	justify-content: flex-start;
}

.vnr-lead__body .vnr-lead__meta {
	margin-top: 1.25rem !important; /* Beats the mt-auto utility in the markup. */
}

/* --- Block editor content band ------------------------------------------
 * The band each template renders for whatever was written in the block
 * editor. It follows the page design standard's rhythm, so a page built
 * entirely from blocks sits on the same grid as one built from sections.
 */
.vnr-section--page-content > .container > .page-builder-content > :first-child {
	margin-top: 0;
}

.vnr-section--page-content > .container > .page-builder-content > :last-child {
	margin-bottom: 0;
}

/* --- Jump The Curve calculator -------------------------------------------
 * The fourth tool on the Employer Childcare Benefits page. It borrows the
 * estimator's two-card shape, so most of what it needs is already in
 * .vnr-45f__* and .vnr-wf__* above; only what is genuinely new lives here.
 *
 * The answer column is the wider of the two, which is the opposite way round
 * from the workforce comparison. Four stacked groups and a table need the room
 * more than five inputs do.
 */

.vnr-jtc {
	/* The page's "Run the numbers" link lands here, and the sticky header
	   would otherwise cover the focused target (SC 2.4.11). */
	scroll-margin-top: var(--vnr-sticky-top, 6rem);
}

.vnr-jtc__header {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	max-width: 48rem;
	margin-bottom: 2.5rem;
}

.vnr-jtc__header .vnr-section__title {
	margin: 0;
}

.vnr-jtc__grid {
	align-items: stretch;
}

.vnr-jtc__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-radius: .9rem;
	box-shadow: 0 10px 30px rgba(22, 32, 43, .06);
}

@media (min-width: 768px) {

	.vnr-jtc__card {
		padding: 2.25rem;
	}
}

@media (min-width: 992px) {

	.vnr-jtc__card {
		padding: 2.75rem;
	}
}

/* Input on white, answer on the brand tint, same as the other two tools. */
.vnr-jtc__card--result {
	background: var(--vnr-primary-soft);
	border-color: rgba(var(--vnr-primary-rgb), .18);
}

.vnr-jtc__card-title {
	margin: 0 0 1.5rem;
	padding: 0;
	font-size: .78rem;
}

.vnr-jtc__field {
	margin-bottom: 1.5rem;
}

.vnr-jtc__field .form-text {
	margin-top: .45rem;
	color: var(--vnr-body);
}

.vnr-jtc__fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.vnr-jtc__fieldset legend {
	float: none;
	width: auto;
}

/* Employer type. Radios rather than a select that submits on change, which
   would reload the page on every arrow keypress. */
.vnr-jtc__profile {
	margin-bottom: 1.75rem;
	padding: 1.125rem 1.25rem;
	background: var(--vnr-soft-bg);
	border: 1px solid var(--vnr-border);
	border-radius: .6rem;
}

/* Bootstrap's own legend reset, and the one to keep on a bordered fieldset: a
   native legend straddles the top border, so the line draws through the
   descenders of the label. Floating it puts the label inside the box. */
.vnr-jtc__profile legend {
	float: left;
	width: 100%;
	margin-bottom: .75rem;
	font-size: 1rem;
}

.vnr-jtc__choice {
	margin-bottom: .65rem;
}

.vnr-jtc__choice:last-of-type {
	margin-bottom: 0;
}

.vnr-jtc__choice .form-check-input {
	margin-top: .35rem;
	border-color: var(--vnr-muted);
}

.vnr-jtc__choice-label {
	display: block;
	font-weight: 600;
	color: var(--vnr-ink);
}

.vnr-jtc__choice-terms {
	display: block;
	font-size: .875rem;
	line-height: 1.55;
	color: var(--vnr-body);
}

.vnr-jtc__profile .form-text {
	margin-top: .85rem;
	margin-bottom: 0;
	color: var(--vnr-body);
}

.vnr-jtc__assumptions {
	margin-bottom: 1.5rem;
	padding: 1.125rem 1.25rem;
	background: var(--vnr-soft-bg);
	border: 1px solid var(--vnr-border);
	border-radius: .6rem;
}

.vnr-jtc__assumptions-summary {
	font-weight: 600;
	color: var(--vnr-primary);
	cursor: pointer;
}

.vnr-jtc__assumptions[open] .vnr-jtc__assumptions-summary {
	margin-bottom: 1.25rem;
}

.vnr-jtc__assumptions-summary:focus-visible {
	outline: 3px solid var(--vnr-primary);
	outline-offset: 2px;
	border-radius: .25rem;
}

.vnr-jtc__submit {
	align-self: flex-start;
	margin-top: auto;
}

.vnr-jtc__headline {
	margin: .4rem 0 0;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 700;
	font-size: clamp(2.3rem, 5.5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--vnr-primary);
	overflow-wrap: break-word;
}

/* Four answers in one panel, so each needs a visible boundary of its own or
   the whole column reads as one long list of numbers. */
.vnr-jtc__group {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(var(--vnr-primary-rgb), .18);
}

.vnr-jtc__group-title {
	margin: 0 0 1rem;
	font-family: 'Inter', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.45;
	color: var(--vnr-ink);
}

.vnr-jtc__breakdown {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vnr-jtc__line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: .8rem;
}

.vnr-jtc__line:last-child {
	margin-bottom: 0;
}

.vnr-jtc__line-label {
	font-size: .9rem;
	line-height: 1.5;
	color: var(--vnr-body);
}

.vnr-jtc__line-detail {
	display: block;
	margin-top: .15rem;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--vnr-muted);
}

/* Tabular figures so the column of amounts stays aligned as they change. */
.vnr-jtc__line-value {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--vnr-ink);
}

.vnr-jtc__line--total {
	margin-top: 1rem;
	padding-top: .8rem;
	border-top: 1px solid rgba(var(--vnr-primary-rgb), .18);
}

/*
 * A cost figure is tinted, but the tint is never the only thing saying so:
 * every negative figure this tool prints has a word next to it (WCAG 1.4.1).
 * --vnr-accent is the maroon the disclaimer strip already uses as text, and it
 * measures 8.6:1 on the primary tint this panel sits on and 10.2:1 on the white
 * the page design standard swaps in.
 */
.vnr-jtc__line-value--cost {
	color: var(--vnr-accent);
}

/* The caveats the client's model needs. Same shape as the estimator's
   disclaimer strip, at note weight, because a reader has to meet these before
   acting on the figure above them. */
.vnr-jtc__caveat {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	margin: 1.125rem 0 0;
	padding: .8rem 1rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-left: 4px solid var(--vnr-accent);
	border-radius: .5rem;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--vnr-body);
}

.vnr-jtc__caveat .bi {
	flex: none;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--vnr-accent);
}

/*
 * The horizon table. Every other calculator answers in a <ul>, and this is the
 * one place that would be wrong: a period and an amount, three times over, is
 * tabular data. It reuses .vnr-comparison__scroll for the focusable overflow
 * region rather than growing a second scroller, and only the cell furniture is
 * new, because the comparison table's uppercase maroon head band would shout
 * inside a result card.
 */
.vnr-jtc__scroll {
	margin-top: 1.25rem;
	border-color: rgba(var(--vnr-primary-rgb), .18);
	box-shadow: none;
}

.vnr-jtc__table {
	width: 100%;
	min-width: 20rem;
	margin: 0;
	border-collapse: collapse;
}

.vnr-jtc__caption {
	padding: .9rem 1.1rem 0;
	caption-side: top;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-align: left;
	text-transform: uppercase;
	color: var(--vnr-secondary-text);
}

.vnr-jtc__table th,
.vnr-jtc__table td {
	padding: .7rem 1.1rem;
	font-size: .875rem;
	line-height: 1.5;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--vnr-border);
}

.vnr-jtc__table thead th {
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vnr-secondary-text);
	white-space: nowrap;
}

.vnr-jtc__table tbody th {
	font-weight: 600;
	color: var(--vnr-body);
}

.vnr-jtc__table-amount {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
	color: var(--vnr-ink);
}

.vnr-jtc__table th.vnr-jtc__table-amount {
	text-align: right;
}

.vnr-jtc__table-total th,
.vnr-jtc__table-total td {
	border-bottom: 0;
	background: var(--vnr-primary-soft);
	color: var(--vnr-primary);
}

/* The word that carries what the minus sign cannot. */
.vnr-jtc__row-detail {
	display: block;
	margin-top: .15rem;
	font-size: .8125rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--vnr-accent);
}

.vnr-jtc__hint,
.vnr-jtc__source,
.vnr-jtc__disclaimer {
	margin: 1.25rem 0 0;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--vnr-body);
}

.vnr-jtc__cta {
	width: 100%;
	margin-top: 1.5rem;
}

/* Shown while the tool is switched off, or while the 45F figures are in
   review, because the property calculation quotes those rates. */
.vnr-jtc__pending {
	display: flex;
	align-items: flex-start;
	gap: 1.25rem;
	padding: 1.75rem;
	background: #fff;
	border: 1px solid var(--vnr-border);
	border-left: 4px solid var(--vnr-accent);
	border-radius: .6rem;
}

.vnr-jtc__pending .bi {
	flex: none;
	font-size: 1.5rem;
	line-height: 1.35;
	color: var(--vnr-accent);
}

.vnr-jtc__pending-title {
	margin: 0 0 .5rem;
	font-family: 'Inter', sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--vnr-ink);
}

.vnr-jtc__pending-text {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--vnr-body);
}

.vnr-jtc__pending-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 1.25rem 0 0;
}

/*
 * Page design standard. The scoped .vnr-page rules further up the file dress
 * the estimator and the workforce comparison by name, selector by selector, so
 * this tool has to opt in the same way or its inputs sit a size and a colour
 * out from the two above it on the same page. Every declaration below is the
 * one its .vnr-45f__* / .vnr-wf__* twin already carries.
 */
.vnr-page .vnr-jtc__card {
	padding: 2rem;
	background: var(--vnr-cream);
	border-radius: var(--vnr-ps-radius-panel);
	box-shadow: var(--vnr-ps-shadow-sm);
}

/* The result card must NOT be height:100% or a sticky has no travel inside its
   column. The row stays stretched, so the column is still tall enough. */
.vnr-page .vnr-jtc__card--result {
	height: auto;
	background: #fff;
	border-color: var(--vnr-border);
	box-shadow: var(--vnr-ps-shadow-lg);
}

.vnr-page .vnr-jtc__field {
	margin-bottom: 2rem;
}

.vnr-page .vnr-jtc__field .form-label {
	margin-bottom: .75rem;
	font-size: 1rem;
}

/* The currency sigil sits inside the field rather than in an addon, which is
   what lets the control fill the row on its own. It is already aria-hidden and
   the label says what the number is, so nothing is lost programmatically. */
.vnr-page .vnr-jtc__field .input-group {
	position: relative;
}

.vnr-page .vnr-jtc__field .input-group-text {
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	left: 0;
	padding: 0 0 0 1rem;
	background: transparent;
	border: 0;
	color: var(--vnr-body);
	font-size: 1.125rem;
	pointer-events: none;
}

/*
 * !important on the two leading corners and the negative margin, for the same
 * reason the estimator needs it: Bootstrap's `.input-group>:not(:first-child)`
 * rule scores (0,7,0) and no reasonable scoped selector outranks it. Both
 * declarations exist to butt an input against a visible addon, and this addon
 * is absolutely positioned, so both are artefacts rather than layout.
 */
.vnr-page .vnr-jtc__field .form-control {
	height: 3.5rem;
	margin-left: 0 !important;
	padding-left: 2rem;
	background: #fff;
	border-radius: .125rem;
	border-top-left-radius: .125rem !important;
	border-bottom-left-radius: .125rem !important;
	color: var(--vnr-ink);
	font-size: 1.125rem;
}

.vnr-page .vnr-jtc__field .form-text {
	margin-top: .5rem;
	font-size: .75rem;
}

/* 5.38:1 on white at 14px. */
.vnr-page .vnr-jtc__card-title {
	margin-bottom: 1rem;
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--vnr-muted);
}

.vnr-page .vnr-jtc__headline {
	margin: 0 0 1.5rem;
	font-size: clamp(2.5rem, 4.5vw, 3.25rem);
	letter-spacing: -.03em;
}

.vnr-page .vnr-jtc__line {
	margin-bottom: 0;
	padding-block: .75rem;
	border-bottom: 1px solid var(--vnr-border);
	font-size: .875rem;
}

.vnr-page .vnr-jtc__line:last-child {
	border-bottom: 0;
}

/* The group rule and the line rule would otherwise double up into two borders
   a few pixels apart at every group boundary. */
.vnr-page .vnr-jtc__line--total {
	margin-top: 0;
	padding-top: .75rem;
	border-top: 0;
}

.vnr-page .vnr-jtc__scroll {
	border-radius: var(--vnr-ps-radius-panel);
}

.vnr-page .vnr-jtc__cta {
	min-height: 3rem;
	margin-top: 2rem;
}

/* --- Calculator email gate -------------------------------------------- *
 *
 * The block that stands in front of all six calculator answers. It lives
 * INSIDE the calculator form, immediately above the submit button, because the
 * email address and the visitor's figures go up together in one POST: a gate
 * sitting in the answer column would need a second form, and a second form
 * would mean a second round trip before the result could be computed.
 *
 * It borrows the type scale and the field rhythm from .vnr-45f__field and
 * .vnr-wf__field rather than inventing a parallel set, so a page carrying a
 * calculator and a gate reads as one component and not two.
 */

.vnr-calcgate {
	margin: 2rem 0 0;
	padding: 1.5rem;
	background: var(--vnr-primary-soft);
	border: 1px solid rgba(var(--vnr-primary-rgb), .18);
	border-radius: var(--vnr-ps-radius-card, .75rem);
}

.vnr-calcgate__title {
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	letter-spacing: -.01em;
	color: var(--vnr-ink);
}

.vnr-calcgate__lead {
	margin: 0 0 1.25rem;
	font-size: .9375rem;
	color: var(--vnr-body);
}

/* The sentence above a form's submit button. Small, but not smaller than the
   15px the rest of the site uses for supporting copy: a privacy notice set in
   12px is a notice nobody is expected to read. --vnr-body, not a muted grey,
   for the same reason. */
.vnr-form-privacy {
	margin: 0 0 1rem;
	max-width: 46rem;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--vnr-body);
}

/* In the footer the ground is dark, so the inherited colour is what works
   there and the width cap comes off: the column is already narrow. */
.site-footer .vnr-form-privacy {
	margin: .75rem 0 0;
	max-width: none;
	font-size: .8125rem;
	color: inherit;
	opacity: .85;
}

/* role="alert", so it is read on arrival. Kept above the field it belongs to:
   a message below the box is missed by anybody who has already looked away. */
.vnr-calcgate__message {
	margin: 0 0 1rem;
	padding: .75rem 1rem;
	font-size: .9375rem;
	background: #fff;
	border-left: 3px solid var(--vnr-primary);
	border-radius: .25rem;
	color: var(--vnr-body);
}

/* Not Bootstrap's --bs-danger, which measures 3.9:1 on white and fails at this
   size. This red is 8:1 on white and 7.2:1 on the cream band. */
.vnr-calcgate__message--bad {
	border-left-color: #9a2420;
	color: #9a2420;
}

.vnr-calcgate__label {
	display: block;
	margin-bottom: .75rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--vnr-ink);
}

/* 3rem, the same floor every other control on these pages is held to, so the
   one field standing between a visitor and their answer is not the hardest
   thing on the page to hit with a thumb. */
.vnr-calcgate__input.form-control {
	min-height: 3rem;
	background: #fff;
	border-color: var(--vnr-border);
}

.vnr-calcgate__input.form-control:focus {
	border-color: var(--vnr-primary);
	box-shadow: 0 0 0 .2rem rgba(var(--vnr-primary-rgb), .25);
}

.vnr-calcgate__input.form-control.is-invalid {
	border-color: #9a2420;
}

.vnr-calcgate__help {
	margin: .5rem 0 0;
	font-size: .875rem;
	color: var(--vnr-body);
}

/*
 * Locked, the answer column is not rendered at all, so the form column takes
 * the whole row (see vnr_calc_gate_col()). Without a cap the inputs stretch to
 * the full container on a wide screen, which makes a six-field form read as a
 * spreadsheet. This is the same reading measure the article layout uses, plus
 * the room a two-column field pair needs.
 */
.vnr-calcgate__wrap {
	max-width: 46rem;
	margin-inline: auto;
}

@media (min-width: 768px) {

	.vnr-calcgate {
		padding: 2rem;
	}
}