/* =========================================================================
   West Valley Mechanical — child theme styles
   -------------------------------------------------------------------------
   Every colour in this file comes from a token. If you find yourself typing a
   hex value below :root, stop — add a token instead.

   Accessibility note on orange: brand orange (--wvm-orange) reaches only about
   2.9:1 on white, which fails WCAG AA even at large sizes. It is used ONLY for
   icons, rules and display type at 32px and above. Anything with white text on
   it, and any orange text under 24px, uses --wvm-orange-action (~4.85:1 on
   white). On the warm surfaces (--wvm-surface-sand) even that only reaches
   4.44:1, so small text there uses --wvm-orange-deep (~5.7:1) instead.

   The same problem applies to brand blue: --wvm-blue (#0077E6) is 4.39:1 on
   white, which fails AA for body-size text. It stays an ICON and ACCENT colour.
   Link and button TEXT uses --wvm-blue-link (#0069D1, ~5.3:1 on white).

   And to desert brown: --wvm-brown (#B85E5C) is 4.38:1 on white, so it is used
   for borders and accents. Brown TEXT uses --wvm-brown-deep (~5.4:1).

   Specificity note: the base `a` and heading colour rules below are wrapped in
   :where() so they carry no specificity of their own. Without that, `.wvm a`
   (0,1,1) outranks `.wvm-btn--orange` (0,1,0) and every button renders in link
   blue — including blue on orange at 1.09:1. Component colours must win.

   Contents
     01  Tokens
     02  Reset and base
     03  Typography
     04  Layout wrappers
     05  Buttons
     06  Skip link and focus
     07  Utility bar
     08  Header and navigation
     09  Mobile bottom bar
     10  Hero
     11  Generic sections
     12  Four pillars
     13  Service grid and service blocks
     14  Two paths
     15  Service area and map
     16  Trust row
     17  FAQ accordion
     18  Maintenance plan cards
     19  Process / expectations list
     20  CTA band
     21  Service-area strip
     22  Footer
     23  Forms
     24  404
     25  Testimonials (ready, unused)
     26  Utilities, motion, print
   ====================================================================== */


/* -------------------------------------------------------------------------
   01  Tokens
   ---------------------------------------------------------------------- */

:root {
	/* Brand */
	--wvm-navy:         #002B68;
	--wvm-blue:         #0077E6;
	--wvm-orange:       #FF6A00;  /* icons, rules, display type 32px+ ONLY */
	--wvm-orange-action:#C24E00;  /* button backgrounds, and small orange text on WHITE */
	--wvm-orange-deep:  #A64300;  /* small orange text on the warm/sand surfaces, and button hover */
	--wvm-blue-link:    #0069D1;  /* link TEXT — see the note below */
	--wvm-brown:        #B85E5C;  /* accent/borders only — 4.38:1 on white */
	--wvm-brown-deep:   #A94F4D;  /* small brown TEXT (~5.4:1 on white) */
	--wvm-sand:         #D9C3A6;
	--wvm-charcoal:     #6B7280;
	--wvm-gray:         #E5E7EB;
	--wvm-white:        #FFFFFF;

	/* Derived surfaces */
	--wvm-navy-deep:    #001B44;
	--wvm-navy-soft:    #0A3A80;
	--wvm-ink:          #111827;
	--wvm-surface:      #FFFFFF;
	--wvm-surface-alt:  #F6F7F9;
	--wvm-surface-sand: #FAF6F0;
	--wvm-border:       #E5E7EB;

	/* Type */
	--wvm-font: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--wvm-text: 1.0625rem;   /* 17px */
	--wvm-lh:   1.65;
	--wvm-measure: 70ch;

	/* Space */
	--wvm-gap:      1.5rem;
	--wvm-section:  clamp(3.5rem, 7vw, 6rem);
	--wvm-wrap:     1200px;
	--wvm-wrap-narrow: 820px;
	--wvm-pad:      clamp(1.125rem, 4vw, 2rem);

	/* Shape */
	--wvm-radius:    10px;
	--wvm-radius-sm: 6px;
	--wvm-shadow:    0 1px 2px rgba(0, 27, 68, .06), 0 8px 24px rgba(0, 27, 68, .07);
	--wvm-shadow-lg: 0 2px 4px rgba(0, 27, 68, .08), 0 18px 44px rgba(0, 27, 68, .12);

	/* Motion */
	--wvm-ease: 160ms cubic-bezier(.2, .6, .3, 1);
}


/* -------------------------------------------------------------------------
   02  Reset and base
   ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.wvm {
	font-family: var(--wvm-font);
	font-size: var(--wvm-text);
	line-height: var(--wvm-lh);
	color: var(--wvm-ink);
	background: var(--wvm-surface);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

/* GeneratePress ships its own container padding. Pages here are full-width and
   every section supplies its own wrapper, so the theme padding is removed. */
.wvm .site-content,
.wvm .content-area,
.wvm .site-main { padding: 0; margin: 0; }

.wvm .entry-content > *:not(.alignfull) { margin-left: auto; margin-right: auto; }
.wvm .entry-content { margin: 0; }
.wvm .inside-article { padding: 0; }
.wvm .entry-header { display: none; }

/* The site footer is built by the child theme; GeneratePress' own is emptied. */
.wvm .site-footer .inside-site-info,
.wvm .site-footer .copyright-bar { display: none; }


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

.wvm h1, .wvm h2, .wvm h3, .wvm h4 {
	margin: 0 0 .5em;
	text-wrap: balance;
}

/* Colour only — :where() keeps this at zero specificity so any component that
   sets its own heading colour (the navy footer, the navy CTA band) wins. */
.wvm :where(h1, h2, h3, h4) { color: var(--wvm-navy); }

.wvm h1 { font-weight: 700; letter-spacing: -.02em; font-size: clamp(2.125rem, 5vw, 3.25rem); line-height: 1.1; }
.wvm h2 { font-weight: 600; letter-spacing: -.01em; font-size: clamp(1.625rem, 3.2vw, 2.25rem); line-height: 1.2; }
.wvm h3 { font-weight: 500; font-size: clamp(1.1875rem, 2vw, 1.375rem); line-height: 1.3; }
.wvm h4 { font-weight: 600; font-size: 1.0625rem; }

.wvm p { margin: 0 0 1.15em; max-width: var(--wvm-measure); }
.wvm p:last-child { margin-bottom: 0; }

.wvm :where(a) { color: var(--wvm-blue-link); text-underline-offset: .18em; text-decoration-thickness: .07em; }
.wvm :where(a:hover) { color: var(--wvm-navy); }

.wvm-eyebrow {
	font-weight: 500;
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 .75rem;
	color: var(--wvm-sand);
}

.wvm-lede { font-size: 1.1875rem; line-height: 1.6; color: var(--wvm-ink); }

.wvm .wvm-icon { flex: none; }


/* -------------------------------------------------------------------------
   04  Layout wrappers
   ---------------------------------------------------------------------- */

.wvm-wrap {
	width: 100%;
	max-width: var(--wvm-wrap);
	margin-inline: auto;
	padding-inline: var(--wvm-pad);
}

.wvm-wrap--narrow { max-width: var(--wvm-wrap-narrow); }

.wvm-section { padding-block: var(--wvm-section); }
.wvm-section--alt  { background: var(--wvm-surface-alt); }
.wvm-section--sand { background: var(--wvm-surface-sand); }
.wvm-section--navy { background: var(--wvm-navy); color: var(--wvm-white); }
.wvm-section--navy h2, .wvm-section--navy h3 { color: var(--wvm-white); }

.wvm-section__heading { margin-bottom: .5em; }
.wvm-section__intro {
	font-size: 1.125rem;
	color: var(--wvm-charcoal);
	margin-bottom: 2.5rem;
	max-width: 62ch;
}


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

.wvm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .8rem 1.5rem;
	border: 2px solid transparent;
	border-radius: var(--wvm-radius-sm);
	font-family: var(--wvm-font);
	font-weight: 600;
	font-size: .9375rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--wvm-ease), border-color var(--wvm-ease), color var(--wvm-ease), transform var(--wvm-ease);
}

.wvm-btn:hover { transform: translateY(-1px); }
.wvm-btn--lg { padding: 1rem 1.85rem; font-size: 1rem; }
.wvm-btn--block { width: 100%; }

/* Orange buttons use the action orange — brand orange fails contrast behind white text. */
.wvm-btn--orange { background: var(--wvm-orange-action); color: var(--wvm-white); }
.wvm-btn--orange:hover { background: var(--wvm-orange-deep); color: var(--wvm-white); }

.wvm-btn--navy { background: var(--wvm-navy); color: var(--wvm-white); }
.wvm-btn--navy:hover { background: var(--wvm-navy-soft); color: var(--wvm-white); }

.wvm-btn--outline-light { border-color: rgba(255, 255, 255, .7); color: var(--wvm-white); background: transparent; }
.wvm-btn--outline-light:hover { background: var(--wvm-white); color: var(--wvm-navy); border-color: var(--wvm-white); }

.wvm-btn--outline { border-color: var(--wvm-navy); color: var(--wvm-navy); background: transparent; }
.wvm-btn--outline:hover { background: var(--wvm-navy); color: var(--wvm-white); }

.wvm-btn--ghost { border-color: rgba(255,255,255,.35); color: var(--wvm-white); background: transparent; }
.wvm-btn--ghost:hover { background: rgba(255,255,255,.12); color: var(--wvm-white); }


/* -------------------------------------------------------------------------
   06  Skip link and focus
   ---------------------------------------------------------------------- */

.wvm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: .85rem 1.25rem;
	background: var(--wvm-navy);
	color: var(--wvm-white);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--wvm-radius-sm) 0;
}

.wvm-skip-link:focus {
	left: 0;
	color: var(--wvm-white);
}

/* main is focusable only as a skip-link destination; it should not draw a
   focus ring around the entire page when it receives that focus. */
.wvm .site-main:focus { outline: none; }


/* One visible focus treatment everywhere, never removed. */
.wvm :focus-visible {
	outline: 3px solid var(--wvm-blue);
	outline-offset: 2px;
	border-radius: 2px;
}

.wvm-hero :focus-visible,
.wvm-utility :focus-visible,
.wvm-cta-band :focus-visible,
.wvm-footer :focus-visible,
.wvm-pillars :focus-visible,
.wvm-mobile-bar :focus-visible {
	outline-color: var(--wvm-white);
}


/* -------------------------------------------------------------------------
   07  Utility bar
   ---------------------------------------------------------------------- */

.wvm-utility {
	background: var(--wvm-navy-deep);
	color: rgba(255, 255, 255, .88);
	font-size: .8125rem;
	line-height: 1.4;
}

.wvm-utility__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .35rem 1.25rem;
	padding-block: .5rem;
}

.wvm-utility p { margin: 0; max-width: none; }

.wvm-utility__creds,
.wvm-utility__contact {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .45rem;
}

.wvm-utility__roc { font-weight: 600; color: var(--wvm-white); letter-spacing: .02em; }
.wvm-utility__sep { color: rgba(255, 255, 255, .35); }

.wvm-utility__emergency {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 600;
	color: var(--wvm-sand);
}
.wvm-utility__emergency .wvm-icon { color: var(--wvm-orange); }

/* The phone is the most useful thing in this bar, so it is sized like it. */
.wvm-utility__phone {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var(--wvm-white);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: .01em;
	text-decoration: none;
	transition: color var(--wvm-ease);
}
.wvm-utility__phone .wvm-icon { color: var(--wvm-orange); }
.wvm-utility__phone:hover { color: var(--wvm-sand); }
.wvm-utility__phone:hover .wvm-icon { color: var(--wvm-sand); }

@media (max-width: 600px) {
	.wvm-utility__inner { justify-content: center; text-align: center; }
	.wvm-utility__creds { justify-content: center; }
	.wvm-utility__contact { justify-content: center; }
}


/* -------------------------------------------------------------------------
   08  Header and navigation
   ---------------------------------------------------------------------- */

.wvm .site-header {
	background: var(--wvm-white);
	border-bottom: 1px solid var(--wvm-border);
	position: sticky;
	top: 0;
	z-index: 90;
}

/* The header logo runs at its native 545px width. max-width keeps it inside the
   gutter on phones narrower than that; height:auto preserves the aspect. */
.wvm .wvm-brand a { display: block; line-height: 0; }

.wvm .wvm-brand__logo {
	width: 545px;
	max-width: 100%;
	height: auto;
}

.wvm .inside-header { padding-block: .7rem; align-items: center; }

.wvm .main-navigation { background: transparent; }
.wvm .main-navigation .main-nav > ul > li > a {
	color: var(--wvm-white);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: .01em;
	line-height: 1;
	padding: 1.05rem 1.05rem;
}

/* Hover and focus fill the whole item — a proper target, not just tinted text. */
.wvm .main-navigation .main-nav > ul > li > a:hover,
.wvm .main-navigation .main-nav > ul > li > a:focus-visible {
	color: var(--wvm-white);
	background: var(--wvm-navy-soft);
}

/* Current page: the same fill, plus an orange rule. Orange as a 3px rule is a
   divider, not text, so the contrast limit on brand orange does not apply. */
.wvm .main-navigation .main-nav > ul > li.current-menu-item > a {
	color: var(--wvm-white);
	background: var(--wvm-navy-soft);
	box-shadow: inset 0 -3px 0 var(--wvm-orange);
}

.wvm .menu-bar-items { display: flex; align-items: center; }
.wvm-header-cta { margin-left: .75rem; white-space: nowrap; }

.wvm .main-navigation .menu-toggle {
	color: var(--wvm-white);
	font-weight: 600;
	font-size: 1.0625rem;
}

/* The mobile menu panel drops out of the same navy band. */
.wvm .main-navigation .main-nav ul li a,
.wvm .main-navigation.toggled .main-nav > ul > li > a { color: var(--wvm-white); }
.wvm .main-navigation .main-nav > ul { background: transparent; }

.wvm .main-navigation ul ul {
	background: var(--wvm-navy-soft);
	box-shadow: var(--wvm-shadow);
	border: 0;
}

.wvm-mobile-menu-cta {
	display: grid;
	gap: .6rem;
	padding: 1rem var(--wvm-pad) 1.35rem;
	border-top: 1px solid var(--wvm-border);
}


/* -------------------------------------------------------------------------
   09  Mobile bottom bar
   ---------------------------------------------------------------------- */

.wvm-mobile-bar {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 95;
	display: none;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--wvm-border);
	box-shadow: 0 -2px 16px rgba(0, 27, 68, .18);
	padding-bottom: env(safe-area-inset-bottom, 0);
}

.wvm-mobile-bar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 58px;
	font-weight: 700;
	font-size: .9375rem;
	text-decoration: none;
	color: var(--wvm-white);
}

.wvm-mobile-bar__btn--call  { background: var(--wvm-navy); }
.wvm-mobile-bar__btn--quote { background: var(--wvm-orange-action); }
.wvm-mobile-bar__btn:hover  { color: var(--wvm-white); filter: brightness(1.08); }

@media (max-width: 768px) {
	.wvm-mobile-bar { display: grid; }
	.wvm-has-mobile-bar .site-footer { padding-bottom: 58px; }
}


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

.wvm-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	color: var(--wvm-white);
	overflow: hidden;
}

.wvm-hero--home { min-height: clamp(520px, 76vh, 700px); }
.wvm-hero--page { min-height: clamp(300px, 42vh, 420px); }

.wvm-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wvm-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg, rgba(0, 27, 68, .94) 0%, rgba(0, 27, 68, .84) 42%, rgba(0, 43, 104, .46) 100%),
		linear-gradient(to top, rgba(0, 27, 68, .55), transparent 55%);
}

.wvm-hero__inner { padding-block: clamp(3rem, 7vw, 4.5rem); }

/* 18ch was sized for the old three-word tagline; the H1 now names the service
   and the place, so it needs room to sit on two lines rather than four. */
.wvm-hero__title { color: var(--wvm-white); margin-bottom: .3em; max-width: 24ch; }
.wvm-hero--page .wvm-hero__title { max-width: 22ch; }

/* Carries the service description, so it reads as content rather than as a
   supporting flourish: white, and sized just below the H1. */
.wvm-hero__sub {
	color: var(--wvm-white);
	font-weight: 500;
	font-size: clamp(1.125rem, 2.05vw, 1.4375rem);
	line-height: 1.35;
	letter-spacing: -.005em;
	max-width: 30ch;
	margin-bottom: .85em;
}

.wvm-hero__copy {
	color: rgba(255, 255, 255, .92);
	max-width: 52ch;
	margin-bottom: 1.75rem;
}

.wvm-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 1.5rem;
	padding: .45rem .9rem;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	max-width: none;
}
.wvm-hero__badge .wvm-icon { color: var(--wvm-orange); }

.wvm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-bottom: 1.75rem;
}

.wvm-hero__phone { margin: 0; max-width: none; }

.wvm-hero__phone-link {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	color: var(--wvm-white);
	font-size: clamp(1.375rem, 3vw, 1.75rem);
	font-weight: 700;
	letter-spacing: -.01em;
	text-decoration: none;
}
.wvm-hero__phone-link:hover { color: var(--wvm-sand); }
.wvm-hero__phone-link .wvm-icon { color: var(--wvm-orange); }

@media (max-width: 560px) {
	.wvm-hero__actions .wvm-btn { width: 100%; }
}


/* -------------------------------------------------------------------------
   11  Generic sections and prose
   ---------------------------------------------------------------------- */

.wvm-prose { padding-block: var(--wvm-section); }
.wvm-prose h2 { margin-top: 1.6em; }
.wvm-prose h2:first-child { margin-top: 0; }
.wvm-prose h3 { margin-top: 1.5em; }
.wvm-prose ul, .wvm-prose ol { max-width: var(--wvm-measure); padding-left: 1.25rem; margin: 0 0 1.15em; }
.wvm-prose li { margin-bottom: .4em; }

/* Component grids are built on <ul>, so the reading-measure rule above was
   capping them at 70ch (about 788px) and leaving a third of the row empty.
   It squeezed the city cards, the maintenance plan cards and the residential
   steps. Prose lists keep the measure; layout grids opt out here.
   Any new grid built on a list needs adding to this selector. */
.wvm-prose .wvm-city-grid,
.wvm-prose .wvm-plans,
.wvm-prose .wvm-steps,
.wvm-prose .wvm-service-grid,
.wvm-prose .wvm-trust__grid,
.wvm-prose .wvm-pillars__grid,
.wvm-prose .wvm-testimonials__grid {
	max-width: none;
	padding-left: 0;
}

.wvm-checklist { list-style: none; padding-left: 0 !important; }
.wvm-checklist li {
	position: relative;
	padding-left: 1.85rem;
	margin-bottom: .5em;
}
.wvm-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .48em;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--wvm-orange);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m4.75 12.5 4.5 4.5 10-10.5'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* -------------------------------------------------------------------------
   12  Four pillars
   ---------------------------------------------------------------------- */

.wvm-pillars {
	background: var(--wvm-navy);
	color: var(--wvm-white);
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.wvm-pillars__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
}

.wvm-pillar { text-align: center; padding-inline: .5rem; }

.wvm-pillar__icon { margin: 0 auto .75rem; display: block; }
.wvm-pillar--orange .wvm-pillar__icon { color: var(--wvm-orange); }
.wvm-pillar--blue   .wvm-pillar__icon { color: var(--wvm-blue); }
.wvm-pillar--white  .wvm-pillar__icon { color: var(--wvm-white); }

.wvm-pillar__label {
	color: var(--wvm-white);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 .3rem;
}

.wvm-pillar__line {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, .82);
	max-width: none;
}

@media (max-width: 820px) {
	.wvm-pillars__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1rem; }
}


/* -------------------------------------------------------------------------
   13  Service grid and service blocks
   ---------------------------------------------------------------------- */

.wvm-service-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.wvm-service-card { display: flex; }

.wvm-service-card__link {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	width: 100%;
	padding: 1.6rem 1.5rem;
	background: var(--wvm-white);
	border: 1px solid var(--wvm-border);
	border-radius: var(--wvm-radius);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--wvm-ease), box-shadow var(--wvm-ease), transform var(--wvm-ease);
}

.wvm-service-card__link:hover {
	border-color: var(--wvm-blue);
	box-shadow: var(--wvm-shadow);
	transform: translateY(-2px);
	color: inherit;
}

.wvm-service-card__icon { color: var(--wvm-blue); }
.wvm-service-card__link:hover .wvm-service-card__icon { color: var(--wvm-orange-action); }

.wvm-service-card__name {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wvm-navy);
}

.wvm-service-card__blurb {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--wvm-charcoal);
	max-width: none;
}

@media (max-width: 900px) { .wvm-service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .wvm-service-grid { grid-template-columns: 1fr; } }

/* Long-form service blocks on /services/ */
.wvm-service-block {
	padding-block: 2.75rem;
	border-top: 1px solid var(--wvm-border);
	scroll-margin-top: 110px;
}
.wvm-service-block:first-of-type { border-top: 0; padding-top: 0; }

.wvm-service-block__head {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin-bottom: .85rem;
}
.wvm-service-block__head .wvm-icon { color: var(--wvm-orange); }
.wvm-service-block__head h2 { margin: 0; }

.wvm-service-block__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 600;
	font-size: .9375rem;
	color: var(--wvm-orange-action);
	text-decoration: none;
}
.wvm-service-block__more:hover { color: var(--wvm-navy); text-decoration: underline; }


/* -------------------------------------------------------------------------
   14  Two paths
   ---------------------------------------------------------------------- */

.wvm-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; }

.wvm-path {
	background: var(--wvm-white);
	border: 1px solid var(--wvm-border);
	border-radius: var(--wvm-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.wvm-path img { width: 100%; aspect-ratio: 8 / 5; object-fit: cover; }

.wvm-path__body { padding: 1.75rem; display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
.wvm-path__title { margin: 0; font-size: 1.375rem; font-weight: 600; }
.wvm-path__body p { margin: 0; }

@media (max-width: 820px) { .wvm-paths { grid-template-columns: 1fr; } }


/* -------------------------------------------------------------------------
   15  Service area and map
   ---------------------------------------------------------------------- */

.wvm-area { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }

/* On /service-area/ the map is the subject of the page, not a teaser, so it
   takes the larger share of the row. */
.wvm-area--feature { grid-template-columns: .85fr 1.15fr; }

.wvm-area__cities {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: .5rem 1rem;
	font-weight: 500;
	font-size: .9375rem;
}
.wvm-area__cities li { position: relative; padding-left: .9rem; color: var(--wvm-navy); }
.wvm-area__cities li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: .35rem;
	height: .35rem;
	border-radius: 50%;
	background: var(--wvm-orange);
}

.wvm-area__map img { border-radius: var(--wvm-radius); box-shadow: var(--wvm-shadow); width: 100%; }

@media (max-width: 860px) {
	.wvm-area { grid-template-columns: 1fr; }
	.wvm-area__map { order: -1; }
	.wvm-area__cities { grid-template-columns: repeat(2, 1fr); }
}

/* City cards on /service-area/ */
/* auto-fit rather than a fixed count: three across at full width, two on a
   tablet, one on a phone, with no breakpoint doing the arithmetic by hand. */
.wvm-city-grid {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 1.25rem;
}

.wvm-city-card {
	background: var(--wvm-white);
	border: 1px solid var(--wvm-border);
	border-radius: var(--wvm-radius);
	padding: 1.6rem 1.75rem 1.75rem;
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.wvm-city-card__name {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding-bottom: .9rem;
	border-bottom: 1px solid var(--wvm-border);
	font-size: 1.1875rem;
	font-weight: 600;
	color: var(--wvm-navy);
	letter-spacing: -.005em;
}
.wvm-city-card__name .wvm-icon { color: var(--wvm-orange); flex: none; }

.wvm-city-card p {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--wvm-charcoal);
	max-width: none;
}

@media (max-width: 420px) {
	.wvm-city-grid { grid-template-columns: 1fr; }
	.wvm-city-card { padding: 1.35rem 1.35rem 1.5rem; }
}


/* -------------------------------------------------------------------------
   16  Trust row
   ---------------------------------------------------------------------- */

.wvm-trust { background: var(--wvm-surface-alt); padding-block: clamp(2.25rem, 4vw, 3rem); border-block: 1px solid var(--wvm-border); }

.wvm-trust__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem;
}

.wvm-trust__item { display: flex; gap: .85rem; align-items: flex-start; }
.wvm-trust__icon { color: var(--wvm-blue); margin-top: .1rem; }
.wvm-trust__title { margin: 0 0 .15rem; font-size: .9375rem; font-weight: 600; color: var(--wvm-navy); }
.wvm-trust__line { margin: 0; font-size: .875rem; color: var(--wvm-charcoal); max-width: none; }

@media (max-width: 860px) { .wvm-trust__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .wvm-trust__grid { grid-template-columns: 1fr; } }


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

.wvm-faq { border-top: 1px solid var(--wvm-border); margin-top: 2rem; }

.wvm-faq__item { border-bottom: 1px solid var(--wvm-border); }

.wvm-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.15rem 0;
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--wvm-navy);
	cursor: pointer;
	list-style: none;
}
.wvm-faq__q::-webkit-details-marker { display: none; }
.wvm-faq__q:hover { color: var(--wvm-blue); }

.wvm-faq__chevron { color: var(--wvm-orange-action); transition: transform var(--wvm-ease); }
.wvm-faq__item[open] .wvm-faq__chevron { transform: rotate(180deg); }

.wvm-faq__a { padding: 0 0 1.35rem; color: var(--wvm-ink); }
.wvm-faq__a p { margin-bottom: .8em; }
.wvm-faq__a p:last-child { margin-bottom: 0; }

.wvm-faq__group { margin-top: 3rem; }
.wvm-faq__group:first-of-type { margin-top: 2rem; }
.wvm-faq__group-title {
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wvm-orange-action);
	margin: 0 0 .5rem;
}


/* -------------------------------------------------------------------------
   18  Maintenance plan cards
   ---------------------------------------------------------------------- */

.wvm-plans {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.wvm-plan {
	background: var(--wvm-white);
	border: 1px solid var(--wvm-border);
	border-radius: var(--wvm-radius);
	padding: 1.85rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	height: 100%;
}

.wvm-plan--featured {
	border-color: var(--wvm-navy);
	border-width: 2px;
	box-shadow: var(--wvm-shadow);
	position: relative;
}

.wvm-plan__flag {
	position: absolute;
	top: -.75rem;
	left: 1.6rem;
	background: var(--wvm-navy);
	color: var(--wvm-white);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: .3rem .7rem;
	border-radius: 999px;
}

.wvm-plan__name { margin: 0; font-size: 1.25rem; font-weight: 600; }

.wvm-plan__price { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; max-width: none; }
.wvm-plan__amount { font-size: 2rem; font-weight: 700; color: var(--wvm-navy); letter-spacing: -.02em; line-height: 1; }
.wvm-plan__period { font-size: .9375rem; color: var(--wvm-charcoal); }
.wvm-plan__alt { font-size: .875rem; color: var(--wvm-charcoal); margin: -.5rem 0 0; max-width: none; }

.wvm-plan__note {
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wvm-brown-deep);
	margin: 0;
	max-width: none;
}

.wvm-plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.wvm-plan__list li { position: relative; padding-left: 1.6rem; font-size: .9375rem; line-height: 1.5; }
.wvm-plan__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .42em;
	width: 1rem;
	height: 1rem;
	background: var(--wvm-blue);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m4.75 12.5 4.5 4.5 10-10.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wvm-plan .wvm-btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 900px) { .wvm-plans { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }


/* -------------------------------------------------------------------------
   19  Process / expectations list
   ---------------------------------------------------------------------- */

.wvm-steps {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	counter-reset: wvm-step;
}

.wvm-step { counter-increment: wvm-step; }

.wvm-step::before {
	content: counter(wvm-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: .85rem;
	border-radius: 50%;
	background: var(--wvm-navy);
	color: var(--wvm-white);
	font-weight: 700;
	font-size: .9375rem;
}

.wvm-step h3 { margin: 0 0 .3rem; font-size: 1.0625rem; font-weight: 600; }
.wvm-step p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--wvm-charcoal); max-width: none; }

@media (max-width: 900px) { .wvm-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .wvm-steps { grid-template-columns: 1fr; } }


/* -------------------------------------------------------------------------
   20  CTA band
   ---------------------------------------------------------------------- */

.wvm-cta-band {
	background: var(--wvm-navy);
	color: var(--wvm-white);
	padding-block: clamp(2.75rem, 5vw, 4rem);
}

.wvm-cta-band__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.75rem;
}

.wvm-cta-band__text { flex: 1 1 26rem; }
.wvm-cta-band__heading { color: var(--wvm-white); margin: 0 0 .4rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.wvm-cta-band__copy { margin: 0; color: rgba(255, 255, 255, .88); max-width: 52ch; }

.wvm-cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (max-width: 600px) {
	.wvm-cta-band__actions { width: 100%; }
	.wvm-cta-band__actions .wvm-btn { width: 100%; }
}


/* -------------------------------------------------------------------------
   21  Service-area strip
   ---------------------------------------------------------------------- */

.wvm-area-strip {
	background: var(--wvm-sand);
	color: var(--wvm-navy);
	padding-block: 2rem;
}

.wvm-area-strip__heading {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .85rem;
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .01em;
}
.wvm-area-strip__heading .wvm-icon { color: var(--wvm-orange-action); }

.wvm-area-strip__list {
	list-style: none;
	margin: 0 0 .85rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem 1.25rem;
	font-size: .875rem;
	font-weight: 500;
	color: #4A3A28;
}

.wvm-area-strip__link { margin: 0; }
.wvm-area-strip__link a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 600;
	font-size: .875rem;
	color: var(--wvm-navy);
}


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

.wvm-footer { background: var(--wvm-navy-deep); color: rgba(255, 255, 255, .8); }

.wvm-footer__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr 1.1fr;
	gap: 2.5rem;
	padding-block: clamp(2.75rem, 5vw, 3.75rem);
}

/* The dark-surface variant of the full lockup. */
.wvm-footer__logo { display: block; line-height: 0; margin-bottom: 1.1rem; }
.wvm-footer__logo img { width: 310px; height: auto; max-width: 100%; }

.wvm-footer__tagline { color: var(--wvm-sand); font-weight: 500; font-size: .9375rem; margin: 0 0 .5rem; }
.wvm-footer__roc { font-size: .8125rem; color: rgba(255, 255, 255, .65); margin: 0; }

.wvm-footer__heading {
	color: var(--wvm-white);
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 .9rem;
}

.wvm-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .9375rem; }
.wvm-footer__list a { color: rgba(255, 255, 255, .82); text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.wvm-footer__list a:hover { color: var(--wvm-white); text-decoration: underline; }
.wvm-footer__list .wvm-icon { color: var(--wvm-blue); }

.wvm-footer__area,
.wvm-footer__emergency { display: flex; gap: .45rem; align-items: flex-start; line-height: 1.45; }
.wvm-footer__area .wvm-icon,
.wvm-footer__emergency .wvm-icon { color: var(--wvm-blue); margin-top: .2rem; }
.wvm-footer__emergency { color: var(--wvm-sand); font-weight: 600; }
.wvm-footer__emergency .wvm-icon { color: var(--wvm-orange); }

.wvm-footer__bar { border-top: 1px solid rgba(255, 255, 255, .12); }
.wvm-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding-block: 1.15rem;
	font-size: .8125rem;
}
.wvm-footer__bar p { margin: 0; color: rgba(255, 255, 255, .6); max-width: none; }
.wvm-footer__bar-links { display: flex; gap: 1.25rem; }
.wvm-footer__bar-links a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.wvm-footer__bar-links a:hover { color: var(--wvm-white); text-decoration: underline; }

@media (max-width: 940px) { .wvm-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } }
@media (max-width: 520px) { .wvm-footer__grid { grid-template-columns: 1fr; } }


/* -------------------------------------------------------------------------
   23  Forms
   ---------------------------------------------------------------------- */

.wvm-form-wrap { max-width: 680px; }

.wvm-form {
	background: var(--wvm-white);
	border: 1px solid var(--wvm-border);
	border-radius: var(--wvm-radius);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	box-shadow: var(--wvm-shadow);
}

.wvm-field { margin-bottom: 1.25rem; border: 0; padding: 0; }
.wvm-field--group { margin-bottom: 1.5rem; }

.wvm-field__label {
	display: block;
	margin-bottom: .4rem;
	font-weight: 600;
	font-size: .9375rem;
	color: var(--wvm-navy);
	padding: 0;
}

.wvm-req { color: var(--wvm-orange-action); }

.wvm-field__control {
	width: 100%;
	padding: .7rem .85rem;
	font-family: var(--wvm-font);
	font-size: 1rem;
	line-height: 1.4;
	color: var(--wvm-ink);
	background: var(--wvm-white);
	border: 1px solid #C7CCD4;
	border-radius: var(--wvm-radius-sm);
	transition: border-color var(--wvm-ease), box-shadow var(--wvm-ease);
}

.wvm-field__control:focus {
	border-color: var(--wvm-blue);
	box-shadow: 0 0 0 3px rgba(0, 119, 230, .16);
	outline: none;
}
.wvm-field__control:focus-visible { outline: 3px solid var(--wvm-blue); outline-offset: 1px; }

select.wvm-field__control {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23002B68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .8rem center;
	background-size: 1.1rem;
	padding-right: 2.4rem;
}

.wvm-field__help { margin: .35rem 0 0; font-size: .8125rem; color: var(--wvm-charcoal); max-width: none; }

.wvm-choices { display: grid; gap: .55rem; }
.wvm-choices--radio { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

.wvm-choice { display: flex; align-items: flex-start; gap: .6rem; }
.wvm-choice input { margin-top: .28rem; width: 1.05rem; height: 1.05rem; accent-color: var(--wvm-navy); flex: none; }
.wvm-choice label { font-size: .9375rem; line-height: 1.45; cursor: pointer; }

.wvm-field--consent {
	background: var(--wvm-surface-alt);
	border: 1px solid var(--wvm-border);
	border-radius: var(--wvm-radius-sm);
	padding: .9rem 1rem;
	margin-block: 1.75rem 1.5rem;
}

.wvm-form__branch-title {
	margin: 2rem 0 1.15rem;
	padding-top: 1.35rem;
	border-top: 1px solid var(--wvm-border);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wvm-charcoal);
}

.wvm-form__submit { width: 100%; }

/* Honeypot: hidden from people, visible to bots. */
.wvm-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wvm-form-error {
	background: #FDF2EC;
	border: 1px solid var(--wvm-orange-action);
	border-left-width: 4px;
	border-radius: var(--wvm-radius-sm);
	padding: 1rem 1.15rem;
	margin-bottom: 1.5rem;
}
.wvm-form-error p { margin: 0 0 .35rem; }
.wvm-form-error p:last-child { margin: 0; }

/* Branch visibility, toggled by assets/js/wvm.js. With JavaScript off both
   branches stay visible and the server decides which one to read. */
.wvm-branch[hidden] { display: none !important; }

.wvm-form-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wvm-border);
	font-size: .875rem;
	color: var(--wvm-charcoal);
	max-width: 680px;
}
.wvm-form-trust > span { display: inline-flex; align-items: center; gap: .45rem; }
.wvm-form-trust .wvm-icon { color: var(--wvm-blue); }

/* --- Gravity Forms -------------------------------------------------------
   GF 3.x ships a design-token system, so the button is rebranded by remapping
   its tokens rather than fighting the theme stylesheet with !important.
   --gf-color-primary is deliberately left alone: it also tints focus rings and
   selected states, which should stay blue to match the rest of the site. */

.wvm .gform_wrapper {
	/* Colour */
	--gf-ctrl-btn-bg-color-primary:       var(--wvm-orange-action);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wvm-orange-deep);
	--gf-ctrl-btn-bg-color-focus-primary: var(--wvm-orange-deep);
	--gf-ctrl-btn-color-primary:          var(--wvm-white);
	--gf-ctrl-btn-color-hover-primary:    var(--wvm-white);
	--gf-ctrl-btn-color-focus-primary:    var(--wvm-white);

	/* Size and shape, matched to .wvm-btn--lg elsewhere on the site.
	   GF's defaults are a 38px-tall, 14px/500 control; ours is 52px, 16px/600. */
	--gf-ctrl-btn-size:        52px;
	--gf-ctrl-btn-size-md:     52px;
	--gf-ctrl-btn-padding-x:   1.85rem;
	--gf-ctrl-btn-padding-x-md:1.85rem;
	--gf-ctrl-btn-font-size:   1rem;
	--gf-ctrl-btn-font-size-md:1rem;
	--gf-ctrl-btn-font-weight: 600;
	--gf-ctrl-btn-radius:      var(--wvm-radius-sm);
}

.wvm .gform_wrapper .gfield_label {
	display: block;
	margin-bottom: .4rem;
	font-weight: 600;
	font-size: .9375rem;
	color: var(--wvm-navy);
}

.wvm .gform_wrapper input[type="text"],
.wvm .gform_wrapper input[type="email"],
.wvm .gform_wrapper input[type="tel"],
.wvm .gform_wrapper input[type="number"],
.wvm .gform_wrapper select,
.wvm .gform_wrapper textarea {
	width: 100%;
	padding: .7rem .85rem;
	font-family: var(--wvm-font);
	font-size: 1rem;
	border: 1px solid #C7CCD4;
	border-radius: var(--wvm-radius-sm);
}

.wvm .gform_wrapper .gfield { margin-bottom: 1.25rem; }

/* The submit button is a <button class="gform_button"> in 3.x, not an
   input[type=submit] as it was in 2.x. */
/* The footer is a flex container in 3.x, so the button is a flex item and a
   plain width:100% does not stick — it has to grow instead. */
.wvm .gform_wrapper .gform_footer { display: flex; }

.wvm .gform_wrapper .gform_footer .gform_button,
.wvm .gform_wrapper .gform_button {
	flex: 1 1 auto;
	border: 0;
	font-family: var(--wvm-font);
	line-height: 1.2;
	cursor: pointer;
}

.wvm .gform_wrapper .gfield_required { color: var(--wvm-orange-action); }
.wvm .gform_wrapper .validation_message { color: #B3261E; font-size: .875rem; }

/* Consent description — the record of what was agreed to. */
.wvm .gform_wrapper .gfield--type-consent .gfield_description {
	font-size: .8125rem;
	color: var(--wvm-charcoal);
}

/* -------------------------------------------------------------------------
   24  404
   ---------------------------------------------------------------------- */

.wvm-404 { padding-block: clamp(3.5rem, 8vw, 6rem); text-align: center; }
.wvm-404__code {
	font-size: clamp(3.5rem, 12vw, 6rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
	color: var(--wvm-orange);   /* display size — brand orange is allowed here */
	margin: 0 0 .25em;
}
.wvm-404 p { margin-inline: auto; }
.wvm-404__links {
	list-style: none;
	margin: 2.25rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .75rem;
}


/* -------------------------------------------------------------------------
   25  Testimonials — styled and ready, deliberately not populated
   ---------------------------------------------------------------------- */

.wvm-testimonials__grid {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.wvm-testimonial {
	background: var(--wvm-white);
	border: 1px solid var(--wvm-border);
	border-radius: var(--wvm-radius);
	padding: 1.75rem;
}
.wvm-testimonial blockquote { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; }
.wvm-testimonial figcaption { font-size: .875rem; font-weight: 600; color: var(--wvm-navy); }

@media (max-width: 900px) { .wvm-testimonials__grid { grid-template-columns: 1fr; } }


/* -------------------------------------------------------------------------
   26  Utilities, motion, print
   ---------------------------------------------------------------------- */

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

.wvm-note {
	background: var(--wvm-surface-sand);
	border-left: 4px solid var(--wvm-brown);
	border-radius: var(--wvm-radius-sm);
	padding: 1.15rem 1.35rem;
	margin-block: 1.75rem;
	font-size: .9375rem;
}
.wvm-note p { max-width: none; }

/* Motion is minimal by design — no scroll-triggered reveals anywhere. This
   simply makes sure the little that exists respects the user's preference. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.wvm-btn:hover,
	.wvm-service-card__link:hover { transform: none; }
}

@media print {
	.wvm-utility, .wvm-mobile-bar, .site-header, .wvm-cta-band, .wvm-area-strip { display: none !important; }
	.wvm-hero { min-height: 0; color: var(--wvm-ink); }
	.wvm-hero__bg, .wvm-hero__scrim { display: none; }
	.wvm-hero__title, .wvm-hero__sub, .wvm-hero__copy { color: var(--wvm-ink); }
}

/* <picture> must not interfere with the absolutely positioned hero image. */
.wvm-hero picture { display: contents; }


/* --- Pull quote ------------------------------------------------------------
   Used for the standards line on About and Maintenance Plans. Set in the
   display size so brand orange is allowed on the rule; the text itself stays
   navy, which passes contrast at any size. */
.wvm-pullquote {
	margin: 2.25rem 0;
	padding: 0 0 0 1.5rem;
	border-left: 4px solid var(--wvm-orange);
	max-width: 46ch;
}

.wvm-pullquote p {
	margin: 0;
	font-size: clamp(1.1875rem, 2.2vw, 1.5rem);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: -.01em;
	color: var(--wvm-navy);
	text-wrap: balance;
	max-width: none;
}

@media (max-width: 560px) {
	.wvm-pullquote { padding-left: 1.125rem; margin-block: 1.75rem; }
}

/* -------------------------------------------------------------------------
   27  Page-specific sections
   ---------------------------------------------------------------------- */

/* --- Eyebrow on light backgrounds --- */
/* Sits on --wvm-surface-sand, where orange-action is only 4.44:1. */
.wvm-eyebrow--dark { color: var(--wvm-orange-deep); }

/* --- Inline phone link in body copy --- */
.wvm-inline-phone {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 700;
	color: var(--wvm-navy);
	text-decoration: none;
	white-space: nowrap;
}
.wvm-inline-phone:hover { color: var(--wvm-orange-action); text-decoration: underline; }
.wvm-inline-phone .wvm-icon { color: var(--wvm-orange-action); }

/* --- Services hub: sub-heading inside a service block --- */
.wvm-service-block__sub {
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wvm-charcoal);
	margin: 1.5rem 0 .75rem;
}

/* --- About --- */
.wvm-about {
	display: grid;
	grid-template-columns: minmax(240px, 340px) 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}

.wvm-about__media { margin: 0; position: sticky; top: 120px; }
.wvm-about__portrait { width: 100%; border-radius: var(--wvm-radius); box-shadow: var(--wvm-shadow); }
.wvm-about__media figcaption {
	margin-top: .75rem;
	font-size: .8125rem;
	color: var(--wvm-charcoal);
	line-height: 1.5;
}

.wvm-about__body h2 { margin-top: 2rem; }
.wvm-about__body h2:first-child { margin-top: 0; }

@media (max-width: 860px) {
	.wvm-about { grid-template-columns: 1fr; }
	.wvm-about__media { position: static; max-width: 320px; }
}

/* --- Contact --- */
.wvm-contact {
	display: grid;
	grid-template-columns: minmax(260px, .8fr) 1fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: start;
}

.wvm-contact h2 { margin-top: 0; }

.wvm-contact__list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 1.15rem; }
.wvm-contact__list li { display: grid; gap: .15rem; }
.wvm-contact__list strong {
	font-size: .75rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wvm-charcoal);
}
.wvm-contact__list span { font-size: 1rem; }
.wvm-contact__list a { font-weight: 600; text-decoration: none; }
.wvm-contact__list a:hover { text-decoration: underline; }

.wvm-contact__note {
	font-size: .875rem;
	color: var(--wvm-charcoal);
	padding-top: 1.25rem;
	border-top: 1px solid var(--wvm-border);
}

.wvm-contact__map { border-radius: var(--wvm-radius); box-shadow: var(--wvm-shadow); width: 100%; max-width: min(560px, 100%); }

@media (max-width: 860px) { .wvm-contact { grid-template-columns: 1fr; } }

/* --- Get a quote --- */
.wvm-quote-page .wvm-form-wrap { margin-top: 2rem; }

/* --- Thank you --- */
.wvm-thanks { text-align: left; }
.wvm-thanks__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	margin: 0 0 1.5rem;
	border-radius: 50%;
	background: #E8F5EC;
	color: #1B7A3D;
}

/* --- FAQ page groups --- */
.wvm-faq__group-heading {
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
}
.wvm-faq__group .wvm-faq { margin-top: 1.25rem; }

/* --- 404 --- */
.wvm-404__phone { margin-top: 2rem; font-size: 1.0625rem; }
.wvm-404 .wvm-lede { max-width: 48ch; margin-inline: auto; }
.wvm-404__links { margin-inline: auto; }


/* -------------------------------------------------------------------------
   28  Header and block-layout corrections
   ---------------------------------------------------------------------- */

/* Stacked header: the logo sits centred in .site-header, and the primary menu
   is a full-width bar directly beneath it (GeneratePress' "Below Header" nav
   position). Only the nav bar is sticky — the logo scrolls away, which keeps
   the persistent strip to ~56px while still holding Get a Quote on screen. */

.wvm .site-header { position: static; border-bottom: 0; }

.wvm .site-header .inside-header {
	justify-content: center;
	text-align: center;
	padding-block: 1rem;
}

/* The nav is a solid navy band rather than a white strip between two hairlines.
   It reads as one object with the hero below it, and gives each item a real
   hover target instead of a colour change on the text alone. */
.wvm .main-navigation {
	position: sticky;
	top: 0;
	z-index: 90;
	background: var(--wvm-navy);
	border: 0;
	box-shadow: none;
}

.wvm .main-navigation .inside-navigation {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	max-width: var(--wvm-wrap);
	padding-inline: var(--wvm-pad);
}

.wvm .main-navigation .main-nav { flex: 0 1 auto; min-width: 0; }
.wvm .main-navigation .main-nav > ul { justify-content: center; flex-wrap: wrap; }
.wvm .main-navigation .menu-bar-items { flex: 0 0 auto; }

/* Centring the flex row centres the menu AND the button as one group, which
   leaves the menu itself sitting left of the page's true centre. A three-column
   grid with matched outer tracks centres the menu on the page and parks the
   button on the right. Only above 900px, where there is room for both. */
@media (min-width: 901px) {
	.wvm .main-navigation .inside-navigation {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		gap: 0;
	}
	.wvm .main-navigation .main-nav { grid-column: 2; }
	.wvm .main-navigation .menu-bar-items { grid-column: 3; justify-self: end; }
}

.wvm .main-navigation .main-nav > ul > li > a {
	padding-block: 1.05rem;
	padding-inline: 1.05rem;
	white-space: nowrap;
	font-size: 1.0625rem;
	color: var(--wvm-white);
	transition: background-color var(--wvm-ease), color var(--wvm-ease);
}

@media (min-width: 1340px) {
	.wvm .main-navigation .main-nav > ul > li > a { padding-inline: .95rem; }
}

/* Between the mobile breakpoint and ~900px the seven items plus the button are
   a tight fit; trim the padding rather than letting them wrap to two rows. */
@media (min-width: 769px) and (max-width: 900px) {
	.wvm .main-navigation .main-nav > ul > li > a { padding-inline: .45rem; font-size: .875rem; }
	.wvm-header-cta { padding: .7rem 1rem; font-size: .875rem; }
}

/* Mobile: logo centred, hamburger bar beneath it. */
@media (max-width: 768px) {
	.wvm .site-header .inside-header { padding-block: .75rem; }
	.wvm .main-navigation .inside-navigation { justify-content: space-between; }
	.wvm .main-navigation .menu-toggle { padding: .5rem .6rem; line-height: 1; }
}

@media (max-width: 560px) {
	/* The fixed bottom bar already carries Call and Get a Quote here, so the
	   toggle is the only thing left in the bar — centre it rather than
	   stranding it against the left edge. */
	.wvm .menu-bar-items .wvm-header-cta { display: none; }
	.wvm .main-navigation .inside-navigation { justify-content: center; }
}

/* GeneratePress gives every top-level block in .entry-content a 1.5em bottom
   margin. Our sections supply their own vertical rhythm, so that margin just
   opens a gap between full-bleed bands. */
.wvm .entry-content > .wp-block-group,
.wvm .entry-content > .wp-block-html { margin-block: 0; }
.wvm .entry-content > *:last-child { margin-bottom: 0; }

/* The inner wrapper Gutenberg adds inside a group must not re-pad. */
.wvm .wp-block-group__inner-container { padding: 0; }

/* At 320px a two-up pillar column is ~118px of content, and "RESIDENTIAL" set
   at 17px with 0.06em tracking does not fit. Tighten the label rather than
   stacking all four, which would push the rest of the page a screen further
   down on the smallest phones. */
@media (max-width: 420px) {
	.wvm-pillars__grid { gap: 1.75rem .75rem; }
	.wvm-pillar { padding-inline: .125rem; }
	.wvm-pillar__label { font-size: .8125rem; letter-spacing: .03em; }
	.wvm-pillar__line { font-size: .8125rem; }
}

/* GeneratePress pads .inside-header with a fixed 40px, which does not line up
   with the --wvm-pad gutter every section wrapper uses. */
.wvm .site-header .inside-header {
	padding-inline: var(--wvm-pad);
	max-width: var(--wvm-wrap);
}