@charset "UTF-8";
/* ==========================================================================
   renovation911 — components.css   (premium revision)

   Buttons, chips, frames, cards, split rows, trust strip, testimonials,
   breadcrumbs, forms and the quote card, contact card, gallery tiles,
   lightbox, CTA bands, pagination, prose.

   Cascade: tokens.css -> base.css -> layout.css -> chrome.css
            -> COMPONENTS.CSS -> pages.css

   Visual language: white surfaces, deep-navy structure, one restrained gold
   accent for eyebrows, rules and icons. Cards rest on a hairline with a soft
   navy-tinted shadow and lift on hover. Nothing is brown, nothing is loud.
   ========================================================================== */


/* ==========================================================================
   1. SHARED PRIMITIVES
   ========================================================================== */

.icon {
	display: inline-block;
	flex: 0 0 auto;
	vertical-align: middle;
}

/* The short gold dash that precedes every eyebrow. */
.duty-bar {
	display: inline-block;
	inline-size: 28px;
	block-size: 2px;
	margin-inline-end: var(--sp-3);
	vertical-align: middle;
	background: var(--accent);
	border-radius: 1px;
}

.eyebrow--on-dark .duty-bar,
:is(.section--navy, .section--deep, .call-band, .quote-band--deep, .contact-card, .hero, .page-hero--photo) .duty-bar {
	background: var(--accent-bright);
}

/* A 4px gold bar along the top edge of a panel (quote card, contact card). */
.duty-bar--top {
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	inline-size: auto;
	block-size: 4px;
	margin: 0;
	border-radius: 0;
	background: var(--grad-gold);
}

.eyebrow {
	display: flex;
	align-items: center;
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-xs);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
	color: var(--accent);
}

.section--center .eyebrow {
	justify-content: center;
}

.eyebrow--on-dark,
:is(.section--navy, .section--deep, .call-band, .quote-band--deep, .hero, .page-hero--photo) .eyebrow {
	color: var(--accent-bright);
}

/* The accent rule under a hero title. */
.rule {
	display: block;
	inline-size: 72px;
	block-size: 3px;
	margin-block: var(--sp-5) var(--sp-6);
	border-radius: 2px;
	background: var(--line);
}

.rule--accent {
	background: var(--grad-gold);
}

.hairline {
	display: block;
	border: 0;
	block-size: 1px;
	margin-block: var(--sp-9);
	background: var(--line);
}

/* Decorative index numerals on cards. aria-hidden always. */
.numeral {
	position: absolute;
	inset-block-start: var(--sp-4);
	inset-inline-end: var(--sp-5);
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-md);
	line-height: 1;
	letter-spacing: var(--ls-numeral);
	color: var(--accent);
	opacity: .55;
	transition: opacity var(--t) var(--ease), color var(--t) var(--ease);
}

/* Scroll reveal — the class is added by main.js only, so no JS = no hiding. */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity var(--t-reveal) var(--ease),
		transform var(--t-reveal) var(--ease);
}

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


/* ==========================================================================
   2. BUTTONS
   Primary = navy fill. On dark = white fill. Secondary = navy outline.
   Ghost = text + arrow. Call = navy fill with the phone icon.
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-block-size: var(--tap-primary);
	padding: var(--sp-3) var(--sp-6);
	border: 1.5px solid transparent;
	border-radius: var(--r-2);
	background: var(--navy);
	color: var(--surface);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	line-height: var(--lh-flat);
	letter-spacing: var(--ls-btn);
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 8px 20px -10px rgba(12, 42, 77, .45);
	transition:
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease),
		box-shadow var(--t) var(--ease),
		transform var(--t-fast) var(--ease);
}

.btn:hover,
.btn:focus-visible {
	background: var(--navy-mid);
	color: var(--surface);
	box-shadow: 0 14px 30px -12px rgba(12, 42, 77, .55);
	transform: translateY(-1px);
}

.btn:active {
	transform: translateY(0);
	box-shadow: var(--sh-1);
}

.btn .icon {
	inline-size: 18px;
	block-size: 18px;
}

.btn--primary {
	background: var(--navy);
	color: var(--surface);
}

.btn--call {
	background: var(--navy);
	color: var(--surface);
}

.btn--secondary {
	background: transparent;
	border-color: var(--navy);
	color: var(--navy);
	box-shadow: none;
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	background: var(--navy);
	color: var(--surface);
	box-shadow: 0 14px 30px -12px rgba(12, 42, 77, .5);
}

.btn--ghost {
	min-block-size: var(--tap-min);
	padding-inline: 0;
	background: transparent;
	color: var(--navy);
	box-shadow: none;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background: transparent;
	color: var(--blue);
	box-shadow: none;
	transform: none;
}

.btn--ghost .icon--arrow {
	transition: transform var(--t) var(--ease);
}

.btn--ghost:hover .icon--arrow,
.btn--ghost:focus-visible .icon--arrow {
	transform: translateX(4px);
}

/* --- on dark grounds --------------------------------------------------- */

.btn--on-dark,
.btn--primary.btn--on-dark,
.btn--call.btn--on-dark {
	background: var(--surface);
	color: var(--navy);
	box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55);
}

.btn--on-dark:hover,
.btn--on-dark:focus-visible,
.btn--primary.btn--on-dark:hover,
.btn--primary.btn--on-dark:focus-visible,
.btn--call.btn--on-dark:hover,
.btn--call.btn--on-dark:focus-visible {
	background: var(--accent-bright);
	color: var(--navy-deep);
}

.btn--secondary.btn--on-dark {
	background: transparent;
	border-color: var(--border-on-dark);
	color: var(--surface);
	box-shadow: none;
}

.btn--secondary.btn--on-dark:hover,
.btn--secondary.btn--on-dark:focus-visible {
	background: rgba(255, 255, 255, .1);
	border-color: var(--surface);
	color: var(--surface);
}

.btn--ghost.btn--on-dark {
	background: transparent;
	color: var(--surface);
}

.btn--ghost.btn--on-dark:hover,
.btn--ghost.btn--on-dark:focus-visible {
	color: var(--accent-bright);
}

/* --- sizes ------------------------------------------------------------- */

.btn--sm {
	min-block-size: var(--tap-min);
	padding: var(--sp-2) var(--sp-5);
	font-size: var(--fs-xs);
}

.btn--lg {
	min-block-size: 56px;
	padding: var(--sp-4) var(--sp-8);
	font-size: var(--fs-base);
}

.btn--block {
	inline-size: 100%;
}

.btn[aria-disabled="true"],
.btn:disabled {
	opacity: .55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}


/* ==========================================================================
   3. CHIPS — small pill links
   ========================================================================== */

.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-block-size: 38px;
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--line);
	border-radius: var(--r-full);
	background: var(--surface);
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: var(--fw-strong);
	font-size: var(--fs-xs);
	line-height: var(--lh-flat);
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease),
		color var(--t-fast) var(--ease),
		transform var(--t-fast) var(--ease);
}

.chip:hover,
.chip:focus-visible {
	border-color: var(--navy);
	background: var(--navy);
	color: var(--surface);
	transform: translateY(-1px);
}

.chip--on-dark {
	border-color: rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .06);
	color: var(--surface);
}

.chip--on-dark:hover,
.chip--on-dark:focus-visible {
	border-color: var(--accent-bright);
	background: var(--accent-bright);
	color: var(--navy-deep);
}


/* ==========================================================================
   4. FRAMES — rounded photo frames with a soft shadow
   ========================================================================== */

.frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-3);
	background: var(--navy-soft);
	box-shadow: var(--sh-2);
}

.frame > picture {
	display: block;
}

.frame__img,
.frame img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	object-fit: cover;
}

.frame--offset {
	box-shadow: var(--sh-3);
}

.frame[style*="max-width"] {
	margin-inline: auto;
}


/* ==========================================================================
   5. CARDS — service cards, with and without photographs
   ========================================================================== */

.svc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-block-size: 200px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	background: var(--surface);
	box-shadow: var(--sh-1);
	transition:
		transform var(--t) var(--ease),
		box-shadow var(--t) var(--ease),
		border-color var(--t) var(--ease);
}

.svc-card:hover,
.svc-card:focus-within {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--sh-3);
}

.svc-card:hover .numeral,
.svc-card:focus-within .numeral {
	opacity: 1;
}

.svc-card__media {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--navy-soft);
}

.svc-card__media > picture,
.svc-card__media > img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.svc-card__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--t-slow) var(--ease);
}

.svc-card--media:hover .svc-card__img,
.svc-card--media:focus-within .svc-card__img {
	transform: scale(1.04);
}

/* A soft navy wash at the foot of the photo so the card reads as one object. */
.svc-card__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	block-size: 40%;
	background: linear-gradient(180deg, rgba(7, 27, 53, 0) 0%, rgba(7, 27, 53, .18) 100%);
	pointer-events: none;
}

/* Icon tile for cards that have no truthful photograph. */
.svc-card__icon {
	display: grid;
	place-items: center;
	inline-size: 56px;
	block-size: 56px;
	margin: var(--sp-6) var(--sp-6) 0;
	border-radius: var(--r-2);
	background: var(--blue-soft);
	color: var(--navy);
}

.svc-card__icon .icon {
	inline-size: 26px;
	block-size: 26px;
}

.svc-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--sp-6);
}

/* Cards written without an explicit __body wrapper still lay out cleanly. */
.svc-card > .svc-card__title:first-of-type {
	margin-block-start: var(--sp-6);
}

.svc-card > .svc-card__title,
.svc-card > .svc-card__text,
.svc-card > .svc-card__cta,
.svc-card > .svc-card__links {
	padding-inline: var(--sp-6);
}

.svc-card--media > .svc-card__title {
	padding-inline-end: var(--sp-10);
}

.svc-card__title {
	margin: 0 0 var(--sp-2);
	padding-inline-end: var(--sp-10);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	color: var(--navy);
	text-wrap: balance;
}

.svc-card__link {
	color: inherit;
	text-decoration: none;
}

/* The whole card is the target; the link text keeps its meaning. */
.svc-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.svc-card__text {
	margin: 0;
	max-inline-size: var(--measure-card);
	font-size: var(--fs-sm);
	line-height: var(--lh-lead);
	color: var(--ink-muted);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.svc-card__cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	margin: auto 0 0;
	padding-block: var(--sp-5) var(--sp-6);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	color: var(--navy);
}

.svc-card > .svc-card__cta {
	margin-block-start: auto;
}

.svc-card__text + .svc-card__cta {
	padding-block-start: var(--sp-5);
}

.svc-card__arrow {
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	border-radius: var(--r-full);
	background: var(--navy);
	color: var(--surface);
	transition:
		transform var(--t) var(--ease),
		background-color var(--t) var(--ease);
}

.svc-card:hover .svc-card__arrow,
.svc-card:focus-within .svc-card__arrow {
	transform: translateX(4px);
	background: var(--blue);
}

.svc-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: auto 0 0;
	padding-block: var(--sp-5) var(--sp-6);
}

.svc-card--static {
	border-style: dashed;
	box-shadow: none;
}

.svc-card--static:hover {
	transform: none;
	border-color: var(--line);
	box-shadow: none;
}

.svc-card--static .svc-card__title {
	color: var(--ink-muted);
}

.svc-card--multi .svc-card__link::after {
	content: none;
}


/* ==========================================================================
   6. SPLIT ROWS — text beside imagery inside the prose column
   ========================================================================== */

.split {
	display: grid;
	gap: var(--sp-6);
	margin-block: var(--sp-8);
}

.split:first-child {
	margin-block-start: 0;
}

.split__title {
	margin: 0 0 var(--sp-4);
}

.split__text > :first-child {
	margin-block-start: 0;
}

.split__text > :last-child {
	margin-block-end: 0;
}

.split__media {
	display: grid;
	gap: var(--sp-4);
	align-content: start;
}

.split__media .frame {
	inline-size: 100%;
	max-inline-size: 100% !important;   /* the importer writes a native cap inline */
}

/* The media column is a responsive grid of its own: one photo per row on a
   phone, two side by side from 520px up. Every photo is cropped to 4:3 from
   that width so a portrait original cannot turn into a 500px-tall block. */
@media (min-width: 520px) {

	.split__media {
		grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
		gap: var(--sp-4);
	}

	.split__media > .frame {
		aspect-ratio: 4 / 3;
	}

	.split__media > .frame picture,
	.split__media > .frame img {
		block-size: 100%;
	}
}

/* The copy only moves beside the photographs when the body column is the full
   container width — i.e. on a page with no aside, and only on a real desktop.
   Every page that carries the quote aside keeps text above photos, which is
   what stops a cramped two-column row in a 700px column. */
@media (min-width: 1100px) {

	.article__body:only-child .split {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		gap: var(--sp-8);
		align-items: start;
	}

	.article__body:only-child .split--reverse .split__text {
		order: 2;
	}

	.article__body:only-child .split--reverse .split__media {
		order: 1;
	}
}


/* ==========================================================================
   7. TRUST STRIP — the white card that floats over the hero's bottom edge
   ========================================================================== */

.trust {
	position: relative;
	z-index: 3;
}

.trust__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin: 0;
	padding: var(--sp-2) 0;
	list-style: none;
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	background: var(--surface);
	box-shadow: var(--sh-3);
}

.trust__item {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--sp-4);
	row-gap: 2px;
	align-items: center;
	padding: var(--sp-5) var(--sp-6);
	border-block-end: 1px solid var(--line);
}

.trust__item:last-child {
	border-block-end: 0;
}

.trust__link {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--sp-4);
	row-gap: 2px;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.trust__icon {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	inline-size: 46px;
	block-size: 46px;
	border-radius: var(--r-2);
	background: var(--blue-soft);
	color: var(--navy);
}

.trust__icon .icon {
	inline-size: 22px;
	block-size: 22px;
}

.trust__label {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	line-height: var(--lh-tight);
	color: var(--navy);
}

.trust__sub {
	font-size: var(--fs-xs);
	line-height: var(--lh-tight);
	color: var(--ink-muted);
}

.trust__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--accent);
}

.trust__link:hover .trust__label,
.trust__link:focus-visible .trust__label {
	color: var(--blue);
}

@media (min-width: 640px) {

	.trust__list {
		grid-template-columns: 1fr 1fr;
	}

	.trust__item:nth-child(-n+2) {
		border-block-end: 1px solid var(--line);
	}

	.trust__item:nth-child(n+3) {
		border-block-end: 0;
	}

	.trust__item:nth-child(odd) {
		border-inline-end: 1px solid var(--line);
	}
}

@media (min-width: 1024px) {

	.trust__list {
		grid-template-columns: repeat(4, 1fr);
		padding: 0;
	}

	.trust__item,
	.trust__item:nth-child(-n+2) {
		border-block-end: 0;
		border-inline-end: 1px solid var(--line);
		padding: var(--sp-6) var(--sp-7);
	}

	.trust__item:last-child {
		border-inline-end: 0;
	}
}


/* ==========================================================================
   8. TESTIMONIALS
   ========================================================================== */

.reviews {
	display: grid;
	gap: var(--grid-gap);
}

@media (min-width: 760px) {

	.reviews {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		align-items: stretch;
	}
}

.review {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--sp-8) var(--sp-7) var(--sp-7);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	background: var(--surface);
	box-shadow: var(--sh-1);
	transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.review:hover {
	transform: translateY(-3px);
	box-shadow: var(--sh-2);
}

.review__mark {
	position: absolute;
	inset-block-start: var(--sp-4);
	inset-inline-start: var(--sp-6);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 4.5rem;
	line-height: 1;
	color: var(--accent-bright);
	opacity: .9;
	pointer-events: none;
}

.review__quote {
	margin: var(--sp-6) 0 0;
	padding: 0;
	border: 0;
	font-size: var(--fs-base);
	line-height: var(--lh-lead);
	color: var(--ink);
}

.review__quote p {
	margin: 0;
}

.review__rule {
	inline-size: 40px;
	block-size: 2px;
	margin: var(--sp-6) 0 var(--sp-4);
	border: 0;
	background: var(--grad-gold);
}

.review__by {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-block-start: auto;
}

.review__name {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-style: normal;
	font-size: var(--fs-sm);
	color: var(--navy);
}

.review__source {
	font-size: var(--fs-xs);
	color: var(--ink-muted);
}


/* ==========================================================================
   9. BREADCRUMBS
   ========================================================================== */

.breadcrumb {
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-xs);
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	color: var(--ink-muted);
}

.breadcrumb__item + .breadcrumb__item::before {
	content: "";
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: var(--accent);
	opacity: .7;
}

.breadcrumb__link {
	color: var(--navy-link);
	text-decoration: none;
	transition: color var(--t-fast) var(--ease);
}

.breadcrumb__link:hover,
.breadcrumb__link:focus-visible {
	color: var(--blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.breadcrumb__current {
	color: var(--ink-muted);
}

.page-hero--photo .breadcrumb__item,
.page-hero--photo .breadcrumb__current {
	color: var(--on-navy);
}

.page-hero--photo .breadcrumb__link {
	color: var(--surface);
}

.page-hero--photo .breadcrumb__link:hover {
	color: var(--accent-bright);
}

.page-hero--photo .breadcrumb__item + .breadcrumb__item::before {
	background: var(--accent-bright);
}


/* ==========================================================================
   10. BADGES — payment icons, the Google review card
   ========================================================================== */

.payments {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.payments li {
	display: grid;
	place-items: center;
	padding: var(--sp-2) var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--r-1);
	background: var(--surface);
}

.payments img {
	display: block;
	inline-size: 42px;
	block-size: 26px;
}

:is(.section--deep, .quote-band--deep, .site-footer) .payments li {
	border-color: transparent;
}

.google-review {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 100%;
	padding: var(--sp-7);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	background: var(--surface);
	box-shadow: var(--sh-2);
	text-decoration: none;
	transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

a.google-review:hover,
a.google-review:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--sh-3);
}

.google-review__img {
	display: block;
	inline-size: min(100%, 260px);
	block-size: auto;
}

.google-review__caption {
	margin: var(--sp-4) 0 0;
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	color: var(--navy);
}


/* ==========================================================================
   11. FORMS
   ========================================================================== */

.field {
	display: grid;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-4);
}

.field__label {
	font-family: var(--font-display);
	font-weight: var(--fw-strong);
	font-size: var(--fs-xs);
	line-height: var(--lh-tight);
	color: var(--navy);
}

.field__req {
	color: var(--accent);
}

.field__input {
	inline-size: 100%;
	min-block-size: var(--tap-primary);
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--line-strong);
	border-radius: var(--r-2);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: var(--fw-body);
	font-size: var(--fs-base);
	line-height: var(--lh-lead);
	box-shadow: inset 0 1px 2px rgba(12, 42, 77, .04);
	transition:
		border-color var(--t-fast) var(--ease),
		box-shadow var(--t-fast) var(--ease),
		background-color var(--t-fast) var(--ease);
}

.field__input::placeholder {
	color: var(--placeholder);
	opacity: 1;
}

.field__input--area {
	min-block-size: 120px;
	resize: vertical;
}

.field__input:hover {
	border-color: var(--navy-link);
}

.field__input:focus-visible {
	border-color: var(--blue);
	box-shadow: 0 0 0 4px var(--blue-soft);
	outline: none;
}

.field__input:disabled,
.field__input[readonly] {
	background: var(--surface-alt);
	color: var(--ink-muted);
	border-color: var(--line);
	cursor: not-allowed;
}

.field__input[aria-invalid="true"] {
	border-color: var(--danger);
	box-shadow: 0 0 0 4px rgba(180, 35, 24, .12);
}

.field__error {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	line-height: var(--lh-tight);
	color: var(--danger);
}

.field__error[hidden] {
	display: none;
}

.field__hint {
	margin: calc(var(--sp-4) * -1 + var(--sp-1)) 0 var(--sp-4);
	font-size: var(--fs-xs);
	line-height: var(--lh-lead);
	color: var(--ink-muted);
}

.field--honeypot {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- the quote card ------------------------------------------------------ */

.quote-card {
	position: relative;
	padding: var(--sp-7) var(--sp-6) var(--sp-6);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	background: var(--surface);
	box-shadow: var(--sh-3);
}

@media (min-width: 640px) {

	.quote-card {
		padding: var(--sp-8) var(--sp-7) var(--sp-7);
	}
}

.quote-card__title {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	color: var(--navy);
}

.quote-card__lead {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-sm);
	line-height: var(--lh-lead);
	color: var(--ink-muted);
}

.quote-card__alt {
	margin: var(--sp-4) 0 0;
	font-size: var(--fs-xs);
	line-height: var(--lh-lead);
	color: var(--ink-muted);
	text-align: center;
}

.quote-card__alt a {
	color: var(--navy-link);
	font-weight: var(--fw-strong);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}

.quote-card__alt a:hover,
.quote-card__alt a:focus-visible {
	color: var(--blue);
}

/* The mini variant is a light card too — quieter, but the same family. */
.quote-card--mini {
	padding-block-start: var(--sp-7);
}

.quote-card--mini .btn--on-dark {
	background: var(--navy);
	color: var(--surface);
}

.quote-card--mini .btn--on-dark:hover,
.quote-card--mini .btn--on-dark:focus-visible {
	background: var(--navy-mid);
	color: var(--surface);
}

/* The hero variant: translucent white with a blur, sitting over the photo. */
.quote-card--glass {
	background: var(--glass);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	border-color: rgba(255, 255, 255, .6);
	box-shadow: var(--sh-panel);
}

/* --- form notices -------------------------------------------------------- */

.form-notice {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var(--sp-2) var(--sp-3);
	margin: 0 0 var(--sp-6);
	padding: var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	background: var(--blue-soft);
	color: var(--ink);
}

.form-notice > .icon {
	grid-row: 1;
	color: var(--navy);
}

.form-notice__title,
.form-notice__text,
.form-notice__list {
	grid-column: 2;
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-lead);
}

.form-notice__title {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	color: var(--navy);
}

.form-notice__list {
	padding-inline-start: var(--sp-5);
}

.form-notice--error {
	border-color: var(--danger);
	border-inline-start-width: 4px;
	background: var(--surface);
}

.form-notice--error > .icon,
.form-notice--error .form-notice__title {
	color: var(--danger);
}

.form-notice--error .form-notice__list a {
	color: var(--danger);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.form-notice--error .form-notice__list a:hover,
.form-notice--error .form-notice__list a:focus-visible {
	color: var(--ink);
}

.form-notice:focus-visible {
	outline: var(--focus-width) solid var(--focus-inner);
	outline-offset: 0;
}

/* --- search form (404 only) ---------------------------------------------- */

.search-form {
	display: grid;
	gap: var(--sp-3);
	margin-block: var(--sp-6);
	max-inline-size: var(--container-prose);
}

@media (min-width: 640px) {

	.search-form {
		grid-template-columns: 1fr auto;
		align-items: end;
	}

	.search-form .field {
		margin-block-end: 0;
	}
}


/* ==========================================================================
   12. CONTACT CARD + CONTACT DETAILS
   ========================================================================== */

.contact-card {
	position: relative;
	padding: var(--sp-8) var(--sp-6) var(--sp-6);
	overflow: hidden;
	border-radius: var(--r-3);
	background: var(--grad-navy);
	color: var(--on-navy);
	box-shadow: var(--sh-3);
}

@media (min-width: 640px) {

	.contact-card {
		padding: var(--sp-9) var(--sp-7) var(--sp-7);
	}
}

.contact-card .eyebrow {
	color: var(--accent-bright);
}

.contact-card .btn--call {
	margin-block-end: var(--sp-5);
}

.contact-card__link {
	display: inline-block;
	min-block-size: var(--tap-min);
	padding-block: var(--sp-2);
	font-size: var(--fs-base);
	color: var(--surface);
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .35);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 4px;
	overflow-wrap: anywhere;
	transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}

.contact-card__link:hover,
.contact-card__link:focus-visible {
	color: var(--accent-bright);
	text-decoration-color: var(--accent-bright);
}

.contact-card__meta {
	margin: var(--sp-4) 0 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-lead);
	color: var(--on-navy);
}

.contact-card__meta strong {
	font-weight: var(--fw-strong);
	color: var(--surface);
}

.contact-card :where(a, button, input, textarea, [tabindex]):focus-visible {
	outline-color: var(--focus-outer);
	box-shadow: 0 0 0 calc(var(--focus-width) * 2) var(--focus-inner);
}

/* The white cards inside the hero keep the light ring. */
.hero .quote-card :where(a, button, input, textarea, [tabindex]):focus-visible,
.hero .trust :where(a, button, [tabindex]):focus-visible,
.page-hero--photo .quote-card :where(a, button, input, textarea, [tabindex]):focus-visible {
	outline-color: var(--focus-inner);
	box-shadow: 0 0 0 calc(var(--focus-width) * 2) var(--focus-outer);
}

/* --- the light contact column (/contact-us/) ----------------------------- */

.contact-details {
	display: grid;
	gap: var(--sp-7);
}

.contact-details__photo {
	max-inline-size: 100%;
	overflow: hidden;
	border-radius: var(--r-3);
	box-shadow: var(--sh-2);
}

.contact-details__group {
	padding: var(--sp-6);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	background: var(--surface);
}

.contact-details__group > :first-child {
	margin-block-start: 0;
}

.contact-details__heading {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-md);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	color: var(--navy);
}

.contact-details__line {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-3);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--ink);
}

.contact-details__line:last-child {
	margin-block-end: 0;
}

.contact-details__label {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--accent);
	align-self: center;
}

.contact-details__link {
	color: var(--navy-link);
	font-weight: var(--fw-strong);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}

.contact-details__link:hover,
.contact-details__link:focus-visible {
	color: var(--blue);
}

.contact-details__maps {
	margin: var(--sp-5) 0 0;
}


/* ==========================================================================
   13. GALLERY TILES — CSS masonry (columns), lightbox trigger
   ========================================================================== */

.gallery {
	columns: 1;
	column-gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 480px) { .gallery { columns: 2; } }
@media (min-width: 768px) { .gallery { columns: 3; } }

@media (min-width: 1400px) {

	.gallery {
		columns: 4;
		column-gap: var(--sp-6);
	}
}

.gallery__item {
	break-inside: avoid;
	margin: 0 auto var(--sp-5);
}

.gallery__item[hidden] {
	display: none;
}

.gallery__btn {
	display: block;
	position: relative;
	inline-size: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--r-3);
	background: none;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.gallery__figure {
	position: relative;
	margin: 0;
	overflow: hidden;
	border-radius: var(--r-3);
	background: var(--navy-soft);
	box-shadow: var(--sh-1);
	transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

.gallery__figure > picture {
	display: block;
}

.gallery__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	transition: transform var(--t-slow) var(--ease);
}

.gallery__veil {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	border-radius: var(--r-3);
	background: var(--veil);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--t-slow) var(--ease);
}

.gallery__expand {
	display: grid;
	place-items: center;
	inline-size: var(--tap-min);
	block-size: var(--tap-min);
	border-radius: var(--r-full);
	background: var(--surface);
	color: var(--navy);
	opacity: 0;
	transform: translateY(6px);
	box-shadow: var(--sh-2);
	transition:
		opacity var(--t-slow) var(--ease),
		transform var(--t-slow) var(--ease);
}

.gallery__btn:hover .gallery__figure,
.gallery__btn:focus-visible .gallery__figure {
	box-shadow: var(--sh-3);
	transform: translateY(-3px);
}

.gallery__btn:hover .gallery__img,
.gallery__btn:focus-visible .gallery__img {
	transform: scale(1.04);
}

.gallery__btn:hover .gallery__veil,
.gallery__btn:focus-visible .gallery__veil {
	opacity: 1;
}

.gallery__btn:hover .gallery__expand,
.gallery__btn:focus-visible .gallery__expand {
	opacity: 1;
	transform: translateY(0);
}

.gallery__more {
	display: flex;
	margin: var(--sp-8) auto 0;
}

.gallery__more[hidden] {
	display: none;
}

.gallery__remaining {
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-nav);
	text-transform: none;
	opacity: .75;
}

.gallery__remaining:empty {
	display: none;
}


/* ==========================================================================
   14. LIGHTBOX — native <dialog>
   ========================================================================== */

.lightbox {
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: 100%;
	max-block-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--backdrop-strong);
	color: var(--surface);
	overflow: hidden;
}

.lightbox[open] {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	display: grid;
	grid-template-rows: 1fr auto;
	animation: reno911-lightbox-in var(--t-fast) var(--ease);
}

.lightbox::backdrop {
	background: var(--backdrop-strong);
}

@keyframes reno911-lightbox-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.lightbox__stage {
	display: grid;
	place-items: center;
	min-block-size: 0;
	padding: var(--sp-10) var(--sp-4) var(--sp-4);
}

.lightbox__img {
	display: block;
	inline-size: auto;
	block-size: auto;
	max-inline-size: min(1200px, 92vw);
	max-block-size: 86vh;
	object-fit: contain;
	border-radius: var(--r-3);
	box-shadow: var(--sh-panel);
	animation: reno911-lightbox-img var(--t-fast) var(--ease);
}

@keyframes reno911-lightbox-img {
	from { opacity: 0; transform: scale(.98); }
	to   { opacity: 1; transform: scale(1); }
}

.lightbox__close,
.lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: var(--r-full);
	background: rgba(255, 255, 255, .08);
	color: var(--surface);
	cursor: pointer;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition:
		background-color var(--t-fast) var(--ease),
		border-color var(--t-fast) var(--ease),
		transform var(--t-fast) var(--ease);
}

.lightbox__close:hover,
.lightbox__nav:hover,
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible {
	background: var(--surface);
	border-color: var(--surface);
	color: var(--navy);
}

.lightbox__close:active,
.lightbox__nav:active {
	transform: scale(.96);
}

.lightbox__close:disabled,
.lightbox__nav:disabled {
	opacity: .4;
	cursor: not-allowed;
}

.lightbox__close {
	inset-block-start: var(--sp-4);
	inset-inline-end: var(--sp-4);
	inline-size: var(--tap-primary);
	block-size: var(--tap-primary);
}

.lightbox__nav {
	inset-block-start: 50%;
	inline-size: 56px;
	block-size: 56px;
	transform: translateY(-50%);
}

.lightbox__nav--prev { inset-inline-start: var(--sp-4); }
.lightbox__nav--next { inset-inline-end: var(--sp-4); }

.lightbox__nav:hover,
.lightbox__nav:focus-visible {
	transform: translateY(-50%);
}

.lightbox__nav:active {
	transform: translateY(-50%) scale(.96);
}

@media (max-width: 639.98px) {

	.lightbox__nav {
		display: none;
	}
}

.lightbox__counter {
	margin: 0;
	padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
	text-align: center;
	font-family: var(--font-display);
	font-weight: var(--fw-strong);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-btn);
	color: var(--on-navy);
}

body.is-locked {
	position: fixed;
	inset-inline: 0;
	inline-size: 100%;
	overflow: hidden;
}


/* ==========================================================================
   15. CTA BANDS
   ========================================================================== */

/* Light band: a gentle gradient card with the heading and one button. */
.quote-band--light {
	padding-block: var(--sp-9);
	background: var(--surface);
}

.quote-band--light .quote-band__inner {
	display: grid;
	gap: var(--sp-6);
	align-items: center;
	padding: var(--sp-7) var(--sp-7);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	background: var(--grad-navy-soft);
	box-shadow: var(--sh-1);
}

@media (min-width: 900px) {

	.quote-band--light .quote-band__inner {
		grid-template-columns: 1fr auto;
		padding: var(--sp-8) var(--sp-9);
	}
}

.quote-band--light .quote-band__title {
	margin: 0;
	font-size: var(--fs-lg);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
	color: var(--navy);
	text-wrap: balance;
}

.quote-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

/* Deep band: navy gradient, centred, with the badge watermark. */
.quote-band--deep,
.quote-band.section--deep {
	position: relative;
	overflow: hidden;
	background: var(--grad-navy);
	color: var(--on-navy);
	text-align: center;
}

.quote-band.section--deep::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto auto;
	inline-size: 520px;
	block-size: 520px;
	background:
		radial-gradient(circle at center, rgba(228, 185, 95, .16) 0%, rgba(228, 185, 95, 0) 62%);
	pointer-events: none;
}

.quote-band.section--deep .quote-band__inner {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--sp-6);
	max-inline-size: 760px;
}

.quote-band.section--deep .eyebrow {
	justify-content: center;
	margin: 0;
	color: var(--accent-bright);
}

.quote-band.section--deep .quote-band__title {
	margin: 0;
	font-size: var(--fs-2xl);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
	color: var(--surface);
	text-wrap: balance;
}

.quote-band.section--deep .quote-band__actions {
	justify-content: center;
}

.quote-band.section--deep .payments {
	justify-content: center;
	margin-block-start: var(--sp-2);
}

.quote-band__meta {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-strong);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	color: var(--on-navy-dim);
}

/* The home "call now" band. */
.call-band {
	position: relative;
	overflow: hidden;
	background: var(--grad-navy);
	color: var(--on-navy);
}

.call-band::after {
	content: "";
	position: absolute;
	inset: auto auto -30% -10%;
	inline-size: 480px;
	block-size: 480px;
	background: radial-gradient(circle at center, rgba(36, 99, 209, .35) 0%, rgba(36, 99, 209, 0) 64%);
	pointer-events: none;
}

.call-band__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--sp-8);
	align-items: center;
}

@media (min-width: 900px) {

	.call-band__inner {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--sp-11);
	}
}

.call-band__title {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-2xl);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
	color: var(--surface);
	text-wrap: balance;
}

.call-band__text {
	margin: 0 0 var(--sp-6);
	max-inline-size: var(--measure-lead);
	font-size: var(--fs-md);
	line-height: var(--lh-lead);
	color: var(--on-navy);
}

.call-band__action {
	margin: 0;
}

.call-band__links {
	display: grid;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.call-band__links .chip {
	inline-size: 100%;
	justify-content: space-between;
	min-block-size: 52px;
	padding-inline: var(--sp-5);
	border-radius: var(--r-2);
	font-size: var(--fs-sm);
	white-space: normal;
}

.call-band__links .chip::after {
	content: "→";
	font-family: var(--font-body);
	opacity: .7;
}


/* ==========================================================================
   16. PAGINATION
   ========================================================================== */

.pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin-block: var(--sp-9);
}

.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-inline-size: var(--tap-min);
	min-block-size: var(--tap-min);
	padding-inline: var(--sp-3);
	border: 1px solid var(--line);
	border-radius: var(--r-2);
	color: var(--navy);
	font-family: var(--font-display);
	font-weight: var(--fw-strong);
	text-decoration: none;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--surface);
}


/* ==========================================================================
   17. PROSE / .entry-content — the imported page body
   ========================================================================== */

:is(.prose, .entry-content) {
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--ink);
}

:is(.prose, .entry-content) > :first-child {
	margin-block-start: 0;
}

:is(.prose, .entry-content) > :last-child {
	margin-block-end: 0;
}

:is(.prose, .entry-content) p {
	margin: 0 0 var(--sp-5);
	max-inline-size: var(--measure);
}

:is(.prose, .entry-content) :is(h2, h3, h4, h5, h6) {
	font-family: var(--font-display);
	color: var(--navy);
	text-wrap: balance;
}

:is(.prose, .entry-content) h2 {
	margin: var(--sp-10) 0 var(--sp-4);
	font-weight: var(--fw-bold);
	font-size: var(--fs-xl);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
}

:is(.prose, .entry-content) > h2:not(.split__title)::before,
:is(.prose, .entry-content) .split__title::before {
	content: "";
	display: block;
	inline-size: 28px;
	block-size: 2px;
	margin-block-end: var(--sp-4);
	border-radius: 1px;
	background: var(--accent);
}

:is(.prose, .entry-content) .split__title .duty-bar {
	display: none;
}

:is(.prose, .entry-content) h3 {
	margin: var(--sp-8) 0 var(--sp-3);
	font-weight: var(--fw-bold);
	font-size: var(--fs-lg);
	line-height: var(--lh-h3);
	letter-spacing: var(--ls-h3);
}

:is(.prose, .entry-content) :is(h4, h5, h6) {
	margin: var(--sp-7) 0 var(--sp-3);
	font-weight: var(--fw-strong);
	font-size: var(--fs-md);
	line-height: var(--lh-h4);
}

:is(.prose, .entry-content) strong,
:is(.prose, .entry-content) b {
	font-weight: var(--fw-strong);
	color: var(--navy);
}

:is(.prose, .entry-content) a:not(.btn):not(.chip) {
	color: var(--navy-link);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
	transition: color var(--t-fast) var(--ease);
}

:is(.prose, .entry-content) a:not(.btn):not(.chip):hover,
:is(.prose, .entry-content) a:not(.btn):not(.chip):focus-visible {
	color: var(--blue);
}

/* --- lists: a small gold check-mark tile ------------------------------- */

:is(.prose, .entry-content) ul {
	margin: 0 0 var(--sp-5);
	padding-inline-start: 0;
	max-inline-size: var(--measure);
	list-style: none;
}

:is(.prose, .entry-content) ul > li {
	position: relative;
	margin-block-end: var(--sp-3);
	padding-inline-start: var(--sp-7);
}

:is(.prose, .entry-content) ul > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .3em;
	inline-size: 18px;
	block-size: 18px;
	border-radius: 50%;
	background:
		var(--blue-soft)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C2A4D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E")
		center / 10px no-repeat;
}

:is(.prose, .entry-content) ol {
	margin: 0 0 var(--sp-5);
	padding-inline-start: var(--sp-6);
	max-inline-size: var(--measure);
}

:is(.prose, .entry-content) ol > li {
	margin-block-end: var(--sp-3);
}

:is(.prose, .entry-content) ol > li::marker {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	color: var(--accent);
}

:is(.prose, .entry-content) li > ul,
:is(.prose, .entry-content) li > ol {
	margin-block: var(--sp-3) 0;
}

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

:is(.prose, .entry-content) :is(figure, .wp-block-image) {
	margin: var(--sp-8) 0;
}

:is(.prose, .entry-content) .split figure {
	margin: 0;
}

:is(.prose, .entry-content) img {
	max-inline-size: 100%;
	block-size: auto;
	border-radius: var(--r-3);
}

:is(.prose, .entry-content) .frame img,
:is(.prose, .entry-content) .frame__img {
	border-radius: 0;
}

:is(.prose, .entry-content) figcaption,
:is(.prose, .entry-content) .wp-caption-text {
	margin-block-start: var(--sp-3);
	font-size: var(--fs-xs);
	line-height: var(--lh-lead);
	color: var(--ink-muted);
}

:is(.prose, .entry-content) .alignleft,
:is(.prose, .entry-content) .alignright,
:is(.prose, .entry-content) .aligncenter {
	display: block;
	margin-inline: auto;
}

@media (min-width: 640px) {

	:is(.prose, .entry-content) .alignleft {
		float: inline-start;
		margin: 0 var(--sp-6) var(--sp-5) 0;
		max-inline-size: 50%;
	}

	:is(.prose, .entry-content) .alignright {
		float: inline-end;
		margin: 0 0 var(--sp-5) var(--sp-6);
		max-inline-size: 50%;
	}
}

/* --- quotes, rules, tables, code ---------------------------------------- */

:is(.prose, .entry-content) blockquote {
	margin: var(--sp-8) 0;
	padding: var(--sp-5) var(--sp-6);
	border-inline-start: 3px solid var(--accent-bright);
	border-radius: 0 var(--r-2) var(--r-2) 0;
	background: var(--surface-alt);
	font-size: var(--fs-md);
	line-height: var(--lh-lead);
	color: var(--ink);
}

:is(.prose, .entry-content) hr:not(.hairline):not(.review__rule) {
	margin-block: var(--sp-9);
	border: 0;
	border-block-start: 1px solid var(--line);
}

:is(.prose, .entry-content) table {
	inline-size: 100%;
	margin-block: var(--sp-7);
	border-collapse: collapse;
	font-size: var(--fs-sm);
}

:is(.prose, .entry-content) :is(th, td) {
	padding: var(--sp-3) var(--sp-4);
	border-block-end: 1px solid var(--line);
	text-align: start;
}

:is(.prose, .entry-content) th {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	color: var(--navy);
}

:is(.prose, .entry-content) :is(code, kbd, samp) {
	padding: 2px var(--sp-1);
	border-radius: var(--r-1);
	background: var(--surface-alt);
	font-size: .9em;
}

:is(.prose, .entry-content) p:has(> .btn:only-child) {
	max-inline-size: none;
}

/* Prose on a dark band. */
:is(.section--navy, .section--deep) :is(.prose, .entry-content) {
	color: var(--on-navy);
}

:is(.section--navy, .section--deep) :is(.prose, .entry-content) :is(h2, h3, h4) {
	color: var(--surface);
}

:is(.section--navy, .section--deep) :is(.prose, .entry-content) > h2::before {
	background: var(--accent-bright);
}

:is(.section--navy, .section--deep) :is(.prose, .entry-content) a:not(.btn):not(.chip) {
	color: var(--accent-bright);
}

:is(.section--navy, .section--deep) :is(.prose, .entry-content) a:not(.btn):not(.chip):hover,
:is(.section--navy, .section--deep) :is(.prose, .entry-content) a:not(.btn):not(.chip):focus-visible {
	color: var(--surface);
}


/* ==========================================================================
   18. REDUCED MOTION, CONTRAST, FORCED COLOURS
   ========================================================================== */

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

	.btn:hover,
	.btn:active,
	.chip:hover,
	.svc-card:hover,
	.svc-card:focus-within,
	.review:hover,
	a.google-review:hover,
	.gallery__btn:hover .gallery__figure {
		transform: none;
	}

	.svc-card:hover .svc-card__arrow,
	.svc-card:focus-within .svc-card__arrow,
	.btn--ghost:hover .icon--arrow,
	.btn--ghost:focus-visible .icon--arrow {
		transform: none;
	}

	.gallery__btn:hover .gallery__img,
	.gallery__btn:focus-visible .gallery__img,
	.svc-card--media:hover .svc-card__img,
	.svc-card--media:focus-within .svc-card__img {
		transform: none;
	}

	.gallery__expand,
	.reveal {
		transform: none;
	}

	.reveal {
		opacity: 1;
	}

	.lightbox__img {
		animation: none;
	}

	.lightbox[open] {
		animation: reno911-lightbox-in 1ms linear;
	}

	.lightbox__close:active,
	.lightbox__nav:active {
		transform: none;
	}

	.lightbox__nav:active {
		transform: translateY(-50%);
	}
}


@media (prefers-contrast: more) {

	.svc-card,
	.review,
	.quote-card,
	.chip,
	.google-review,
	.trust__list,
	.contact-details__group {
		border-color: var(--line-strong);
	}

	.btn--ghost,
	.breadcrumb__link,
	:is(.prose, .entry-content) a:not(.btn):not(.chip) {
		text-decoration-thickness: 3px;
	}
}


@media (forced-colors: active) {

	.btn,
	.chip,
	.svc-card,
	.review,
	.quote-card,
	.contact-card,
	.field__input,
	.pagination .page-numbers,
	.lightbox__close,
	.lightbox__nav {
		border: 1px solid ButtonBorder;
	}

	.duty-bar,
	.duty-bar--top,
	.rule--accent,
	.breadcrumb__item + .breadcrumb__item::before,
	:is(.prose, .entry-content) ul > li::before {
		background: CanvasText;
		forced-color-adjust: none;
	}

	.numeral {
		color: GrayText;
	}

	.gallery__veil {
		background: transparent;
	}

	.svc-card__arrow {
		background: ButtonFace;
		color: ButtonText;
		border: 1px solid ButtonBorder;
	}
}


/* ==========================================================================
   19. PREMIUM PASS ADDENDA
   ========================================================================== */

/* Cards without a photograph: a soft tinted tile with the icon and title
   centred, so they read as deliberate rather than unfinished. */
.svc-card:not(.svc-card--media) {
	background: linear-gradient(160deg, #FFFFFF 0%, #F3F7FC 100%);
}

.svc-card:not(.svc-card--media) > .svc-card__icon {
	margin: var(--sp-7) var(--sp-6) var(--sp-2);
	inline-size: 60px;
	block-size: 60px;
	border-radius: var(--r-3);
	background: var(--surface);
	box-shadow: var(--sh-2);
	color: var(--navy);
}

.svc-card:not(.svc-card--media) > .svc-card__title {
	margin-block-start: var(--sp-3);
}

.svc-card:not(.svc-card--media):not(.svc-card--static) > .svc-card__text {
	padding-block-end: var(--sp-2);
}

.svc-card--static > .svc-card__cta--static {
	display: none;
}

.svc-card--static {
	border-style: solid;
	border-color: var(--line);
	background: linear-gradient(160deg, #F6F8FB 0%, #EEF3F9 100%);
}

.svc-card--static > .svc-card__title {
	color: var(--navy);
	padding-block-end: var(--sp-6);
}

/* (The split layout itself is defined once, in section 6.) */

/* The contact card inside the navy hero is a translucent panel so its edges
   read against the band. */
.page-hero .contact-card {
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: var(--sh-panel);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

.page-hero .contact-card .duty-bar--top {
	background: var(--grad-gold);
}

/* Hub body cards (imported content) get the same grid as everywhere else. */
.prose .svc-grid,
.prose .card-grid,
.entry-content .svc-grid,
.entry-content .card-grid {
	margin-block: var(--sp-8);
}

.prose .svc-card,
.entry-content .svc-card {
	block-size: 100%;
}

.prose .svc-card__link,
.entry-content .svc-card__link {
	text-decoration: none;
}

.prose .svc-card__text,
.entry-content .svc-card__text {
	max-inline-size: none;
	font-size: var(--fs-sm);
}

/* --- cards that live inside imported prose (the services hub) ------------
   Prose rules for p / a / figure / img would otherwise leak into the card;
   these selectors out-rank them. */

.article--hub .article__body,
.article--hub .article__body:only-child {
	max-width: none;
	padding-inline-end: 0;
}

.article--hub .article__body > p:first-child {
	max-inline-size: var(--measure-lead);
	margin-inline: auto;
	margin-block-end: var(--sp-8);
	text-align: center;
	font-size: var(--fs-md);
	color: var(--ink-muted);
}

.prose .svc-card > .svc-card__media,
.entry-content .svc-card > .svc-card__media {
	margin: 0;
}

.prose .svc-card .svc-card__media img,
.entry-content .svc-card .svc-card__media img,
.prose .svc-card .svc-card__media picture,
.entry-content .svc-card .svc-card__media picture {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	max-inline-size: none;
	object-fit: cover;
	border-radius: 0;
}

.prose .svc-card .svc-card__title .svc-card__link,
.entry-content .svc-card .svc-card__title .svc-card__link {
	color: var(--navy);
	text-decoration: none;
}

.prose .svc-card p,
.entry-content .svc-card p {
	margin: 0;
	max-inline-size: none;
}

.prose .svc-card > .svc-card__cta,
.entry-content .svc-card > .svc-card__cta {
	margin-block-start: auto;
}

.prose .svc-card > .svc-card__title,
.entry-content .svc-card > .svc-card__title {
	margin-block: var(--sp-6) var(--sp-2);
}

/* --- cards without a photograph: centre the content in the row ---------- */

.svc-card:not(.svc-card--media) {
	justify-content: center;
	padding-block: var(--sp-6);
}

.svc-card:not(.svc-card--media) > .svc-card__icon {
	margin-block: 0 var(--sp-4);
	inline-size: 64px;
	block-size: 64px;
}

.svc-card:not(.svc-card--media) > .svc-card__title {
	margin-block: 0 var(--sp-2);
}

.svc-card:not(.svc-card--media) > .svc-card__cta,
.svc-card:not(.svc-card--media) > .svc-card__links {
	margin-block-start: var(--sp-5);
	padding-block: 0;
}

.svc-card:not(.svc-card--media) > .svc-card__text {
	padding-block-end: 0;
}

.svc-card--static {
	justify-content: center;
}

.svc-card--static > .svc-card__title {
	padding-block-end: 0;
}

/* Photo cards carry their photograph as the index; the numeral would sit on
   top of the image, so it is hidden there and kept on plain cards. */
.svc-card--media > .numeral {
	display: none;
}

/* ==========================================================================
   20. TOUCH TARGETS  (WCAG 2.5.8 — 24px minimum, 44px for primary actions)
   ========================================================================== */

/* Breadcrumb links were 22px tall. Inline-flex + a min height fixes the box
   without changing the line's appearance. */
.breadcrumb__link,
.breadcrumb__current {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
}

/* The phone number beside the action rail's button is a primary action. */
.action-rail__phone {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--tap-min);
	padding-inline: var(--sp-1);
}

/* "Prefer to talk? (250) 320-8652" — the phone link inside a quote card. */
.quote-card__alt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-1) var(--sp-2);
}

.quote-card__alt a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--tap-min);
	padding-inline: var(--sp-2);
}

/* Footer and contact-detail links already carry their own min-height; these
   two are the remaining inline phone/email links in prose. */
.contact-details__link,
.contact-card__link {
	min-block-size: var(--tap-min);
	display: inline-flex;
	align-items: center;
}