@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url("assets/fonts/montserrat-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/source-sans-3-latin.woff2") format("woff2");
}

@font-face {
  font-family: "GVK Icons";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("assets/fonts/gvk-icons.woff2?v=5") format("woff2");
}

.fa-solid {
  display: var(--fa-display, inline-block);
  font-family: "GVK Icons";
  font-style: normal;
  font-variant: normal;
  font-weight: 900;
  line-height: 1;
  text-rendering: auto;
}

.fa-arrow-left::before { content: "\f060"; }
.fa-arrow-right::before { content: "\f061"; }
.fa-arrow-up-right-from-square::before { content: "\f08e"; }
.fa-arrows-rotate::before { content: "\f021"; }
.fa-bars::before { content: "\f0c9"; }
.fa-chevron-down::before { content: "\f078"; }
.fa-pause::before { content: "\f04c"; }
.fa-play::before { content: "\f04b"; }
.fa-bolt::before { content: "\f0e7"; }
.fa-calendar-day::before { content: "\f783"; }
.fa-certificate::before { content: "\f0a3"; }
.fa-circle-check::before { content: "\f058"; }
.fa-circle-question::before { content: "\f059"; }
.fa-clipboard-check::before { content: "\f46c"; }
.fa-clock::before { content: "\f017"; }
.fa-droplet::before { content: "\f043"; }
.fa-envelope::before { content: "\f0e0"; }
.fa-fan::before { content: "\f863"; }
.fa-file-lines::before { content: "\f15c"; }
.fa-filter::before { content: "\f0b0"; }
.fa-fire::before { content: "\f06d"; }
.fa-gauge-high::before { content: "\f625"; }
.fa-house-chimney::before { content: "\e3af"; }
.fa-house-chimney-window::before { content: "\e00d"; }
.fa-list-check::before { content: "\f0ae"; }
.fa-location-dot::before { content: "\f3c5"; }
.fa-magnifying-glass-dollar::before { content: "\f688"; }
.fa-phone::before { content: "\f095"; }
.fa-screwdriver-wrench::before { content: "\f7d9"; }
.fa-shield-halved::before { content: "\f3ed"; }
.fa-snowflake::before { content: "\f2dc"; }
.fa-star::before { content: "\f005"; }
.fa-temperature-arrow-up::before { content: "\e040"; }
.fa-triangle-exclamation::before { content: "\f071"; }
.fa-user-check::before { content: "\f4fc"; }
.fa-users::before { content: "\f0c0"; }
.fa-volume-high::before { content: "\f028"; }
.fa-wind::before { content: "\f72e"; }
.fa-window-maximize::before { content: "\f2d0"; }
.fa-xmark::before { content: "\f00d"; }

:root {
  --gvk-sky-50: #eaf6fc;
  --gvk-sky-100: #cfeaf7;
  --gvk-sky-500: #48a9dc;
  --gvk-sky-600: #3993c5;
  --gvk-sky-700: #2f7ba6;
  --gvk-sky-800: #256589;
  --gvk-navy-500: #3262a4;
  --gvk-navy-700: #24487a;
  --gvk-navy-800: #1b3559;
  --gvk-orange-100: #fdeadc;
  --gvk-orange-500: #f27f2e;
  --gvk-orange-600: #d96a1d;
  /* Button orange: white text on it passes WCAG AA (4.9:1). 500 is for accents. */
  --gvk-orange-700: #b9530e;
  --gvk-orange-800: #a8480a;
  --gvk-grey-50: #f6f9fb;
  --gvk-grey-100: #eef3f7;
  --gvk-grey-200: #e0e8ee;
  --gvk-grey-300: #c8d5de;
  --gvk-grey-500: #8b9aa5;
  --gvk-grey-600: #5a6873;
  --gvk-grey-700: #3d474f;
  --gvk-grey-900: #171b1e;
  --white: #ffffff;
  --gvk-red-50: #fdeeee;
  --gvk-red-600: #c02b2b;
  --font-display: "Montserrat", "Helvetica Neue", Helvetica, sans-serif;
  --font-body: "Source Sans 3", "Helvetica Neue", Helvetica, sans-serif;
  --container: 1140px;
  --pad: 24px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --shadow-sm: 0 6px 16px rgba(23, 27, 30, .08);
  --shadow-md: 0 14px 30px rgba(23, 27, 30, .12);
  --shadow-brand: 0 10px 26px rgba(72, 169, 220, .30);
  --shadow-heat: 0 10px 26px rgba(242, 127, 46, .28);
  --focus: #7cc5e8;
  /* Colours that used to be written straight into components. Same values;
     use these names instead of the literals. */
  --gvk-navy-900: #142944;
  --gvk-error: var(--gvk-red-600);
  --gvk-success: #1f9d55;
  --gvk-star: #ffc247;
  /* The review platforms' own colours, for the Yelp and Google cards only. */
  --yelp-red-text: #b91c1c;
  --google-blue-text: #2867c7;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--gvk-grey-700);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
}

body.nav-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.container {
  width: min(100% - 48px, var(--container));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 80px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 10px max(24px, calc((100vw - var(--container)) / 2));
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--gvk-grey-200);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  color: var(--gvk-grey-900);
  line-height: 1.2;
}

.brand img,
.footer-logo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gvk-grey-700);
}

.nav > a {
  position: relative;
  padding: 28px 0;
}

.nav > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 2px;
  background: var(--gvk-orange-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 150ms cubic-bezier(.4, 0, .2, 1);
}

.nav > a:hover::after,
.nav > a:focus-visible::after {
  transform: scaleX(1);
}

.header-call,
.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
  transition: background 150ms cubic-bezier(.4, 0, .2, 1), color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1), box-shadow 150ms cubic-bezier(.4, 0, .2, 1);
}

.header-call {
  color: var(--white);
  background: var(--gvk-sky-700);
  white-space: nowrap;
}

.header-call:hover,
.button-primary:hover {
  background: var(--gvk-sky-800);
  box-shadow: var(--shadow-brand);
}

.button:active,
.header-call:active {
  transform: scale(.98);
}

.menu-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--gvk-grey-200);
  border-radius: var(--radius-sm);
  color: var(--gvk-navy-700);
  background: var(--white);
}

.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--gvk-navy-800);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(27, 53, 89, .88) 0%, rgba(27, 53, 89, .70) 42%, rgba(27, 53, 89, .22) 74%, rgba(27, 53, 89, .10) 100%),
    linear-gradient(180deg, rgba(27, 53, 89, .34) 0%, rgba(27, 53, 89, .08) 38%, rgba(27, 53, 89, .30) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(330px, .72fr);
  align-items: center;
  gap: 56px;
  padding: 58px 0 50px;
}

.hero-copy-stage {
  display: contents;
}

.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  color: var(--white);
}

.hero-eyebrow {
  color: var(--gvk-sky-200);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .18em;
  line-height: 1.2;
  text-transform: uppercase;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--white);
  background: rgba(255, 255, 255, .12);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.2;
  text-transform: uppercase;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--gvk-navy-800);
  font-family: var(--font-display);
  letter-spacing: 0;
  line-height: 1.12;
  /* No lone word on the last line of a heading */
  text-wrap: balance;
}

h1 {
  max-width: 800px;
  color: var(--white);
  font-size: clamp(40px, 5.15vw, 54px);
  font-weight: 800;
}

h2 {
  font-size: clamp(34px, 3.9vw, 54px);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.08;
}

h3 {
  font-size: 22px;
  font-weight: 800;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* Form and footer labels look like headings but are plain text, so the page
   outline holds only the real sections. They take the h2/h3 base styles. */
.form-heading,
.form-step-title,
.footer-heading {
  margin: 0;
  color: var(--gvk-navy-800);
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.12;
  text-wrap: balance;
}

.form-heading,
.footer-heading {
  letter-spacing: -.035em;
  line-height: 1.08;
}

.form-step-title {
  font-size: 22px;
}

.hero-lede {
  max-width: 620px;
  color: rgba(255, 255, 255, .88);
  font-size: 19px;
  line-height: 1.55;
}

.hero-bullets {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--white);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.hero-bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.check-mark {
  flex: none;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 2px solid var(--gvk-orange-500);
  border-radius: 50%;
  color: var(--gvk-orange-500);
  font-size: 13px;
}

.hero-actions,
.links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button-primary,
.button-secondary {
  color: var(--white);
  background: var(--gvk-sky-700);
}

.button-secondary {
  background: var(--gvk-navy-700);
}

.button-secondary:hover {
  background: var(--gvk-navy-800);
}

.button-heat {
  color: var(--white);
  background: var(--gvk-orange-700);
}

.button-heat:hover {
  background: var(--gvk-orange-800);
  box-shadow: var(--shadow-heat);
}

.button-dark {
  color: var(--white);
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .12);
}

.button-dark:hover {
  color: var(--gvk-navy-800);
  background: var(--white);
}

.review-row {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.rating-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  border-radius: var(--radius-sm);
  padding: 2px 0;
  color: var(--white);
  line-height: 1.1;
  transition: transform 150ms cubic-bezier(.4, 0, .2, 1);
}

.rating-strip {
  margin-top: 2px;
}

.rating-badge:hover {
  transform: translateY(-2px);
}

.rating-logo {
  flex: none;
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.yelp-logo {
  width: 41px;
  height: 41px;
}

.rating-details {
  display: grid;
  gap: 4px;
}

.stars {
  display: inline-flex;
  gap: 3px;
  color: var(--gvk-star);
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(23, 27, 30, .20);
}

.rating-copy {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(23, 27, 30, .26);
}

.rating-copy strong {
  color: var(--white);
  font-size: 1.04em;
}

.request-card {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  /* Seventh row is the consent notice, added when the phone number started
     needing one. The status row used to be last and reserved forty pixels so
     the card would not jump when a message appeared; it no longer earns that,
     because the row collapses to nothing when there is no message and the jump
     happens either way. Reserved, it was simply a hole above the fine print. */
  grid-template-rows: auto auto auto minmax(264px, auto) auto auto auto;
  border: 1px solid var(--gvk-grey-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
  background: var(--white);
  box-shadow: var(--shadow-md);
}

.request-card > :not(.estimate-banner) {
  margin-left: 24px;
  margin-right: 24px;
}

.request-card > .form-note {
  margin-bottom: 24px;
}

.estimate-banner {
  padding: 22px 28px 24px;
  color: var(--white);
  background: var(--gvk-sky-700);
}

.request-card .estimate-banner h2,
.request-card .estimate-banner .form-heading {
  margin: 0;
  color: var(--white);
  font-size: 26px;
  line-height: 1.12;
}

.estimate-banner p {
  margin-top: 8px;
  color: var(--white);
  font-size: 16px;
  line-height: 1.35;
}

.request-card h2,
.request-card .form-heading {
  font-size: 23px;
  line-height: 1.14;
}

.form-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.step-count {
  flex: none;
  border: 1px solid var(--gvk-grey-200);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--gvk-grey-600);
  background: var(--gvk-grey-50);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
}

.step-progress {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.step-progress span {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--gvk-grey-200);
}

.step-progress span.active {
  background: var(--gvk-navy-500);
}

.quiz-step {
  display: none;
  min-height: 264px;
  align-content: start;
  gap: 14px;
}

.quiz-step.is-active {
  display: grid;
}

.quiz-step h3,
.quiz-step .form-step-title {
  font-size: 21px;
  line-height: 1.22;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.option-list {
  display: grid;
  gap: 10px;
}

.quiz-option {
  position: relative;
  min-height: 92px;
  display: grid;
  place-items: center;
  gap: 8px;
  border: 1px solid var(--gvk-grey-200);
  border-radius: var(--radius-md);
  padding: 12px 10px;
  color: var(--gvk-navy-700);
  background: var(--white);
  box-shadow: 0 2px 8px rgba(23, 27, 30, .05);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  transition: border-color 150ms cubic-bezier(.4, 0, .2, 1), background 150ms cubic-bezier(.4, 0, .2, 1), color 150ms cubic-bezier(.4, 0, .2, 1), transform 150ms cubic-bezier(.4, 0, .2, 1), box-shadow 150ms cubic-bezier(.4, 0, .2, 1);
}

.quiz-option i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: var(--gvk-sky-700);
  background: var(--gvk-sky-50);
  font-size: 18px;
}

.quiz-option:hover {
  transform: translateY(-2px);
  border-color: var(--gvk-sky-500);
  box-shadow: var(--shadow-sm);
}

.quiz-option.is-selected {
  color: var(--white);
  border-color: var(--gvk-sky-700);
  background: var(--gvk-sky-700);
  box-shadow: var(--shadow-brand);
}

.quiz-option.is-selected i {
  color: var(--white);
  background: rgba(255, 255, 255, .16);
}

.heat-option.is-selected {
  border-color: var(--gvk-orange-700);
  background: var(--gvk-orange-700);
  box-shadow: var(--shadow-heat);
}

.row-option {
  min-height: 58px;
  display: flex;
  justify-content: flex-start;
  text-align: left;
}

.row-option i {
  flex: none;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wide-field {
  grid-column: 1 / -1;
}

.step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 10px 0;
  color: var(--gvk-grey-600);
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.text-button:disabled {
  cursor: default;
  opacity: .35;
}

.submit-step {
  display: none;
}

.multi-step-form.is-final-step [data-step-next] {
  display: none;
}

.multi-step-form.is-final-step .submit-step {
  display: inline-flex;
}

.eyebrow {
  margin-bottom: 10px;
  color: var(--gvk-sky-700);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.25;
  text-transform: uppercase;
}

label {
  display: grid;
  gap: 6px;
  color: var(--gvk-grey-900);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .03em;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--gvk-grey-300);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--gvk-grey-900);
  background: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
}

.field-control {
  position: relative;
  display: block;
  min-width: 0;
}

.field-control input,
.field-control textarea {
  display: block;
  font-weight: 400;
}

.field-control input::placeholder,
.field-control textarea::placeholder {
  color: var(--gvk-grey-500);
  font-weight: 400;
  opacity: 1;
}

.field-control input {
  height: 56px;
}

.field-control textarea {
  height: 112px;
  min-height: 112px;
}

textarea {
  resize: vertical;
}
.details-field textarea {
  height: auto;
  min-height: 132px;
  max-height: min(52vh, 480px);
  overflow-y: hidden;
  font-weight: 400;
  line-height: 1.55;
  scrollbar-gutter: stable;
}

.details-field textarea.is-scrollable {
  overflow-y: auto;
}

.details-field textarea::placeholder {
  color: var(--gvk-grey-500);
  font-weight: 400;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gvk-sky-700);
  box-shadow: 0 0 0 2px var(--gvk-sky-700);
  outline: none;
}

.form-note {
  min-height: 40px;
  color: var(--gvk-grey-600);
  font-size: 15px;
  line-height: 1.35;
}

.request-card > .form-note.is-error {
  padding: 10px 12px;
  border: 1px solid var(--gvk-red-600);
  border-radius: var(--radius-sm);
  color: var(--gvk-red-600);
  background: var(--gvk-red-50);
  font-weight: 700;
}

/* The tiles of a question that was skipped */
.option-grid.has-error .quiz-option,
.option-list.has-error .quiz-option {
  border-color: var(--gvk-red-600);
}

/* The carrier registry that clears our number for texting requires this
   disclosure to sit with the field that collects the phone number. Small,
   but never hidden and never below the fold of the form. */
/* Only on the last step, which is the only one that asks for a phone number.
   Showing it from question one put a legal notice above the thing it is a
   footnote to, and the carrier rule is about the moment the number is given,
   not about the form existing. `is-final-step` is already set by the step
   logic, so this needs no script of its own. */
.form-consent {
  display: none;
  margin: 0;
  color: var(--gvk-grey-600);
  font-size: 13px;
  line-height: 1.35;
}

/* The form is a grid with a fourteen pixel row gap, so anything below it that
   also carries margins spaces itself twice. The note reserved forty pixels for
   a message that is one line of eighteen when it comes at all, and never comes
   on most visits — that reservation plus two stacked margins opened a trough
   between the button and the fine print. The gap alone does the spacing now,
   and the note is sized by whatever it is actually saying.
   Three classes to clear the margin the mobile block sets further down. */
.request-card.multi-step-form > .form-note {
  min-height: 0;
  margin-bottom: 0;
}

/* The card has no padding; its children carry the side margins and the last one
   used to carry the bottom. Which child is last now depends on the step, so the
   card holds its own bottom edge instead — otherwise the fine print sits a
   pixel off it while the sides keep their 24. */
.request-card.multi-step-form {
  padding-bottom: 24px;
}

@media (max-width: 680px) {
  .request-card.multi-step-form {
    padding-bottom: 20px;
  }
}

.request-card.is-final-step > .form-consent {
  display: block;
}

/* The note is a live region the script fills with validation and submission
   messages. Empty it should occupy nothing, rather than holding a blank strip
   under the buttons for a message that has not happened yet.

   min-height alone is not enough: the form is a grid and this is a stretched
   item, so the row keeps its size regardless. height does collapse it.

   Collapsing rather than display:none on purpose — role="status" is only
   announced reliably by screen readers when the region stays in the tree the
   whole time, and the moment the script writes a message :empty stops matching
   and everything here is dropped. Specificity has to clear
   .request-card > .form-note in the mobile block further down the file. */
.request-card > .form-note:empty {
  min-height: 0;
  height: 0;
  margin-bottom: 0;
  overflow: hidden;
}

.form-consent strong {
  color: var(--gvk-grey-600);
}

.form-consent a {
  color: inherit;
  text-decoration: underline;
}

.form-consent a:hover {
  color: var(--gvk-orange-500);
}

.trust-strip {
  border-bottom: 1px solid var(--gvk-grey-200);
  background: var(--white);
}

.trust-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  padding: 36px 0;
}

.trust-strip-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
  min-width: 0;
  border-left: 1px solid var(--gvk-grey-200);
  padding: 0 26px;
}

.trust-strip-item:first-child {
  border-left: 0;
  padding-left: 0;
}

.trust-strip-item:last-child {
  padding-right: 0;
}

.trust-strip-item i {
  width: 34px;
  padding-top: 2px;
  color: var(--gvk-sky-500);
  font-size: 24px;
  text-align: center;
}

.trust-strip-item:nth-child(2) i,
.trust-strip-item:nth-child(4) i {
  color: var(--gvk-orange-500);
}

.trust-strip-item .trust-strip-title {
  margin: 0;
  color: var(--gvk-navy-800);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.trust-strip-item p:not(.trust-strip-title) {
  margin-top: 6px;
  color: var(--gvk-grey-600);
  font-size: 16px;
  line-height: 1.4;
}

.section {
  padding: 80px 0;
}

main section[id] {
  scroll-margin-top: 92px;
}

.alt {
  background: var(--gvk-grey-50);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .86fr);
  align-items: center;
  gap: 64px;
}

.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}

.orange-rule {
  width: 64px;
  height: 3px;
  background: var(--gvk-orange-500);
}

.fact-list {
  display: grid;
  gap: 12px;
}

.fact-list div {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.fact-list i {
  width: 22px;
  margin-top: 6px;
  color: var(--gvk-orange-500);
}

.media-frame {
  margin: 0;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.media-frame img {
  aspect-ratio: 4 / 5;
}

figcaption {
  margin-top: 12px;
  color: var(--gvk-grey-600);
  font-style: italic;
  text-align: center;
}

.proof-photo-mobile {
  display: none;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}

.section-head.center {
  align-items: center;
  text-align: center;
}

.service-stack {
  display: grid;
  gap: 22px;
}

.service-category {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px;
  align-items: stretch;
  border: 1px solid var(--gvk-grey-200);
  border-radius: var(--radius-md);
  padding: 28px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.service-category-copy {
  align-self: center;
}

/* Safari sizes an aspect-ratio grid item from the stretched row height, which
   the text beside it sets, and derives the width from that. Every card then
   got a photo of a different width. Pinning the width to the column and
   letting the 4:3 ratio give the height makes all four cards identical. */
.service-category > .photo-slot {
  align-self: center;
  width: 100%;
  height: auto;
}

.service-category:nth-child(even) .service-category-copy {
  order: 2;
}

.service-category:nth-child(even) .photo-slot {
  order: 1;
}

.service-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--gvk-sky-700);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.service-kicker.heat {
  color: var(--gvk-orange-600);
}

.service-category h3 {
  font-size: clamp(30px, 4vw, 46px);
}

.photo-slot {
  min-height: 0;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--gvk-grey-200);
  border-radius: var(--radius-md);
  background: var(--gvk-grey-100);
}

.photo-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.photo-slot picture {
  display: block;
  width: 100%;
  height: 100%;
}

.subservice-list {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.subservice-list li {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gvk-grey-900);
  background: transparent;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.subservice-list li::before {
  content: "\2713";
  flex: none;
  color: var(--gvk-orange-500);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
}

.service-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 34px;
  border-top: 1px solid var(--gvk-grey-200);
  padding-top: 30px;
}

.service-actions > p {
  color: var(--gvk-grey-700);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}

.service-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.service-action-buttons .button {
  min-height: 54px;
}

.service-action-buttons .button i {
  margin-right: 8px;
}

.navy {
  color: rgba(255, 255, 255, .86);
  background: var(--gvk-navy-700);
}

.navy h2,
.navy .eyebrow {
  color: var(--white);
}

.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr);
  gap: 56px;
  align-items: center;
}

.trust-copy {
  display: grid;
  gap: 22px;
}

.trust-copy p:last-child {
  max-width: 58ch;
  font-size: 19px;
  line-height: 1.6;
}

.trust-list {
  display: grid;
  gap: 14px;
}

.trust-list article {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: start;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-md);
  padding: 18px;
  background: rgba(255, 255, 255, .10);
}

.trust-list i {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--gvk-sky-500);
  font-size: 18px;
}

.trust-list article:nth-child(2) i {
  background: var(--gvk-orange-500);
}

.trust-list h3 {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.25;
}

.trust-list p {
  margin-top: 6px;
  color: rgba(255, 255, 255, .78);
  font-size: 17px;
  line-height: 1.45;
}

.reviews-section {
  color: var(--gvk-grey-700);
  background: var(--white);
}

.reviews-head {
  max-width: 780px;
  margin: 0 auto 46px;
  text-align: center;
}

.reviews-head .eyebrow {
  color: var(--gvk-sky-700);
}

.reviews-head h2 {
  color: var(--gvk-grey-900);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.06;
}

.reviews-head .orange-rule {
  margin: 22px auto 24px;
}

.reviews-head p:last-child {
  margin: 0 auto;
  max-width: 650px;
  color: var(--gvk-grey-600);
  font-size: 19px;
  line-height: 1.45;
}

.review-platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 820px;
  margin: 0 auto 34px;
}

.review-platform {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 15px;
  align-items: center;
  min-height: 84px;
  border: 1px solid var(--gvk-grey-200);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  color: var(--gvk-grey-900);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.review-platform:hover {
  transform: translateY(-2px);
  border-color: var(--gvk-sky-500);
  box-shadow: var(--shadow-md);
}

.review-platform img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.review-platform span,
.review-platform strong,
.review-platform small {
  display: block;
}

.review-platform strong {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
}

.review-platform small {
  margin-top: 4px;
  color: var(--gvk-grey-600);
  font-size: 14px;
  line-height: 1.35;
}

.review-platform > i {
  color: var(--gvk-sky-700);
  font-size: 14px;
}

.review-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Arrows under the cards, so they never sit on top of a review */
.review-controls {
  order: 2;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

.review-cards {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 6px 2px 18px;
  cursor: grab;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--gvk-sky-500) var(--gvk-grey-100);
  scrollbar-width: thin;
  user-select: none;
  -webkit-user-select: none;
}

.review-cards.is-dragging,
.review-cards.is-loop-jumping {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

.review-cards::-webkit-scrollbar {
  height: 7px;
}

.review-cards::-webkit-scrollbar-track {
  background: var(--gvk-grey-100);
}

.review-cards::-webkit-scrollbar-thumb {
  background: var(--gvk-sky-500);
}

/* Three whole cards across, two on tablets; none cut off at the edge */
.review-card {
  flex: 0 0 calc((100% - 36px) / 3);
  min-height: 314px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px;
  border: 1px solid var(--gvk-grey-200);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.review-source:hover {
  text-decoration: underline;
}

.review-card-top {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.review-card-top strong,
.review-card-top span {
  display: block;
  font-family: var(--font-display);
}

.review-card-top strong {
  color: var(--gvk-grey-900);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.review-card-top span {
  margin-top: 5px;
  color: var(--gvk-grey-600);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.review-card-top img {
  flex: none;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.review-stars {
  display: inline-flex;
  gap: 4px;
  color: var(--gvk-star);
  font-size: 17px;
  line-height: 1;
}

.review-card p {
  margin: 22px 0 0;
  color: var(--gvk-grey-700);
  font-size: 17px;
  font-style: italic;
  line-height: 1.55;
}

.review-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--gvk-navy-700);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
}

.review-card.is-yelp .review-source {
  color: var(--yelp-red-text);
}

.review-card.is-google .review-source {
  color: var(--google-blue-text);
}

.review-arrow {
  position: static;
  width: 48px;
  height: 48px;
  border: 1px solid var(--gvk-grey-200);
  border-radius: var(--radius-md);
  color: var(--gvk-navy-700);
  background: var(--white);
  cursor: pointer;
}

.review-arrow:hover {
  color: var(--white);
  border-color: var(--gvk-navy-700);
  background: var(--gvk-navy-700);
}



.review-hint {
  margin: 14px 0 0;
  color: var(--gvk-grey-600);
  font-size: 15px;
  text-align: center;
}

.review-platform-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.platform-pill {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid var(--gvk-grey-300);
  border-radius: 999px;
  color: var(--gvk-navy-800);
  background: var(--white);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}

.platform-pill:hover {
  color: var(--white);
  background: var(--gvk-navy-800);
  border-color: var(--gvk-navy-800);
  transform: translateY(-1px);
}

.service-areas {
  padding: 82px 0;
  color: var(--gvk-grey-700);
  background: var(--gvk-grey-50);
}

.areas-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(430px, 1.08fr);
  gap: 44px;
  align-items: center;
}

.areas-copy {
  display: grid;
  justify-items: start;
  gap: 24px;
}

.areas-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: var(--gvk-sky-700);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.areas-eyebrow span {
  width: 42px;
  height: 3px;
  background: var(--gvk-orange-500);
}

.areas-copy h2 {
  max-width: 620px;
  color: var(--gvk-grey-900);
  font-size: clamp(36px, 4vw, 54px);
  line-height: 1.04;
}

.areas-copy > p {
  max-width: 58ch;
  margin: 0;
  color: var(--gvk-grey-600);
  font-size: 19px;
  line-height: 1.55;
}

.area-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.area-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  border-bottom: 1px solid var(--gvk-grey-200);
  padding: 8px 0;
  color: var(--gvk-navy-700);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
}

.area-list li::before {
  content: "\2022";
  color: var(--gvk-orange-500);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
}

.area-cta {
  margin-top: 10px;
  min-width: 230px;
  min-height: 58px;
  color: var(--white);
  background: var(--gvk-sky-500);
  box-shadow: 0 18px 34px rgba(72, 169, 220, .22);
}

.area-cta:hover {
  background: var(--gvk-sky-600);
}

.areas-map {
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--gvk-grey-200);
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.areas-map iframe {
  display: block;
  width: 100%;
  min-height: 520px;
  height: 100%;
  border: 0;
}

.contact {
  color: var(--white);
  background: linear-gradient(135deg, var(--gvk-navy-800), var(--gvk-navy-900));
}

.contact h2,
.contact .eyebrow {
  color: var(--white);
}

.contact .eyebrow {
  margin-bottom: 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(380px, .78fr);
  gap: 56px;
  align-items: center;
}

.contact-copy {
  display: grid;
  justify-items: start;
  gap: 18px;
}

.contact-copy h2 {
  max-width: 760px;
  font-size: clamp(40px, 4.5vw, 62px);
  line-height: 1.06;
}

.contact-copy p:not(.eyebrow) {
  max-width: 58ch;
  margin: 2px 0 6px;
  color: rgba(255, 255, 255, .82);
  font-size: 20px;
  line-height: 1.5;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.contact-ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, .30);
  background: rgba(255, 255, 255, .08);
}

.contact-ghost:hover {
  color: var(--gvk-navy-800);
  background: var(--white);
}

.contact-card {
  display: grid;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
}

.contact-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  color: var(--white);
}

.contact-row:last-child {
  border-bottom: 0;
}

a.contact-row {
  transition: background .2s ease, transform .2s ease;
}

a.contact-row:hover {
  background: rgba(255, 255, 255, .08);
}

.contact-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: rgba(72, 169, 220, .26);
  font-size: 17px;
}

.contact-row:nth-child(1) .contact-icon {
  background: var(--gvk-orange-500);
}

.contact-row small,
.contact-row strong {
  display: block;
  min-width: 0;
}

.contact-row small {
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .58);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .10em;
  line-height: 1.2;
  text-transform: uppercase;
}

.contact-row strong {
  color: var(--white);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}

.footer {
  padding: 48px 0;
  color: rgba(255, 255, 255, .72);
  background: var(--gvk-grey-900);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 36px;
}

.footer h2,
.footer .footer-heading {
  margin: 0 0 14px;
  color: var(--white);
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.footer a {
  display: block;
  margin-top: 8px;
}

.footer a:hover {
  color: var(--gvk-orange-500);
}

.footer-logo {
  margin-bottom: 14px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: baseline;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 15px;
}

.footer-legal p {
  margin: 0 auto 0 0;
}

.footer-legal a {
  display: inline;
  margin-top: 0;
}

/* One header on every page. Service pages carry up to seven links (Home,
   Services and their own sections), so the menu folds into the button below
   1180px rather than squeezing the phone number onto two lines. */
@media (max-width: 1180px) {
  .site-header {
    grid-template-columns: 1fr auto auto;
  }

  .menu-toggle {
    display: inline-grid;
    place-items: center;
  }

  .nav {
    position: fixed;
    inset: 80px 0 auto 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 12px 24px 24px;
    background: var(--white);
    border-bottom: 1px solid var(--gvk-grey-200);
    box-shadow: var(--shadow-md);
  }

  body.nav-open .nav {
    display: flex;
  }

  .nav > a {
    padding: 16px 0;
  }

  .nav > a::after {
    bottom: 10px;
  }
}

@media (max-width: 980px) {
  .review-card {
    flex-basis: calc((100% - 18px) / 2);
  }

  .hero {
    min-height: auto;
  }

  .hero-grid,
  .split,
  .trust-grid,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .proof-photo-desktop {
    display: none;
  }

  .proof-photo-mobile {
    display: block;
    width: 100%;
  }

  .proof-photo-mobile img {
    aspect-ratio: 4 / 3;
  }

  .service-category {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .service-category:nth-child(even) .service-category-copy,
  .service-category:nth-child(even) .photo-slot {
    order: initial;
  }

  .trust-strip-grid {
    grid-template-columns: 1fr 1fr;
  }

  .trust-strip-item:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .areas-grid {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .areas-map {
    min-height: 430px;
  }

  .areas-map iframe {
    min-height: 430px;
  }

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

@media (max-width: 680px) {
  .container {
    width: min(100% - 32px, var(--container));
  }

  .site-header {
    min-height: 72px;
    gap: 10px;
    padding: 8px 16px;
  }

  .brand {
    min-width: 0;
    font-size: 13px;
  }

  .brand img {
    width: 48px;
    height: 48px;
  }

  .header-call {
    width: 46px;
    padding: 0;
  }

  .header-call span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .nav {
    inset: 72px 0 auto 0;
  }

  .hero {
    display: block;
    background: var(--white);
  }

  .hero-grid {
    display: grid;
    gap: 0;
    padding: 0;
  }

  .hero-copy-stage {
    position: relative;
    isolation: isolate;
    display: block;
    margin-inline: calc((100vw - 100%) / -2);
    overflow: hidden;
  }

  .hero-bg img {
    object-position: 45% center;
  }

  .hero-bg {
    z-index: -2;
  }

  .scrim {
    z-index: -1;
    background:
      linear-gradient(180deg, rgba(27, 53, 89, .66) 0%, rgba(27, 53, 89, .82) 48%, rgba(27, 53, 89, .92) 100%),
      linear-gradient(90deg, rgba(27, 53, 89, .72), rgba(27, 53, 89, .42));
  }

  .hero-copy {
    z-index: auto;
    padding: 56px 16px 42px;
  }

  h1 {
    font-size: 40px;
  }

  h2 {
    font-size: 34px;
  }

  .hero-lede {
    font-size: 18px;
  }

  .hero-bullets {
    gap: 9px;
    font-size: 15px;
  }

  .check-mark {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  .hero-actions,
  .button {
    width: 100%;
  }

  .review-row {
    gap: 12px;
  }

  .rating-badge {
    width: auto;
  }

  .rating-logo {
    width: 34px;
    height: 34px;
  }

  .yelp-logo {
    width: 36px;
    height: 36px;
  }

  .stars {
    font-size: 12px;
  }

  .rating-copy {
    font-size: 13px;
  }

  .trust-strip-grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 18px 0;
  }

  .trust-strip-item {
    grid-template-columns: 28px 1fr;
    gap: 16px;
    align-items: flex-start;
    border: 0;
    border-bottom: 1px solid var(--gvk-grey-200);
    padding: 22px 0;
  }

  .trust-strip-item:last-child { border-bottom: 0; }

  .trust-strip-item i {
    width: 28px;
    font-size: 21px;
  }

  .trust-strip-item .trust-strip-title {
    font-size: 18px;
    line-height: 1.28;
  }

  .trust-strip-item p {
    font-size: 16px;
    line-height: 1.45;
  }

  .request-card {
    margin: 28px 0 36px;
    padding: 0;
    grid-template-rows: auto auto auto auto auto auto auto;
  }

  .request-card > :not(.estimate-banner) {
    margin-left: 20px;
    margin-right: 20px;
  }

  .request-card > .form-note {
    margin-bottom: 20px;
  }

  .estimate-banner {
    padding: 20px 20px 22px;
  }

  .request-card .estimate-banner h2,
  .request-card .estimate-banner .form-heading {
    font-size: 25px;
  }

  .estimate-banner p {
    font-size: 15px;
  }

  .quiz-step {
    min-height: 0;
  }

  .option-grid,
  .field-grid {
    grid-template-columns: 1fr;
  }

  .quiz-option {
    min-height: 76px;
    display: flex;
    justify-content: flex-start;
    text-align: left;
  }

  .step-actions {
    flex-wrap: wrap;
  }

  .step-actions .text-button {
    width: 100%;
    justify-content: center;
    order: 2;
  }

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

  .trust-list article {
    grid-template-columns: 40px 1fr;
    gap: 12px;
    padding: 14px;
  }

  .trust-list i {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .trust-list h3 {
    font-size: 17px;
  }

  .trust-list p,
  .trust-copy p:last-child {
    font-size: 17px;
  }

  .service-category {
    padding: 18px;
  }

  .service-category h3 {
    font-size: 30px;
  }

  .service-actions {
    display: grid;
    gap: 18px;
    margin-top: 28px;
    padding-top: 26px;
  }

  .service-actions > p {
    font-size: 18px;
  }

  .service-action-buttons {
    display: grid;
    grid-template-columns: 1fr;
  }

  .service-action-buttons .button {
    width: 100%;
  }

  .photo-slot {
    min-height: 220px;
  }

  .subservice-list {
    margin-top: 18px;
  }

  .subservice-list li {
    min-height: 40px;
    font-size: 16px;
  }

  .area-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
  }

  .areas-copy h2 {
    font-size: 39px;
    line-height: 1.04;
  }

  .areas-copy > p {
    font-size: 17px;
  }

  .area-list li {
    min-height: 44px;
    padding: 8px 0;
    font-size: 16px;
  }

  .area-cta {
    width: 100%;
  }

  .areas-map {
    min-height: 340px;
    border-radius: var(--radius-md);
  }

  .areas-map iframe {
    min-height: 340px;
  }

  .contact-copy h2 {
    font-size: 36px;
  }

  .contact-copy p:not(.eyebrow) {
    font-size: 17px;
  }

  .contact-card {
    border-radius: var(--radius-md);
  }

  .contact-row {
    grid-template-columns: 40px 1fr;
    gap: 13px;
    padding: 17px 16px;
  }

  .contact-icon {
    width: 40px;
    height: 40px;
    font-size: 15px;
  }

  .contact-row strong {
    font-size: 16px;
    overflow-wrap: anywhere;
  }

  .section {
    padding: 56px 0;
  }

  main section[id] {
    scroll-margin-top: 80px;
  }

  .reviews-head {
    margin-bottom: 30px;
  }

  .reviews-head h2 {
    font-size: 34px;
  }

  .reviews-head p:last-child {
    font-size: 18px;
  }

  .review-platforms { grid-template-columns: 1fr; }

  .review-carousel {
    display: flex;
    flex-direction: column;
  }

  .review-cards {
    width: calc(100% + 2px);
    padding-bottom: 14px;
    overscroll-behavior-x: contain;
  }

  .review-card {
    flex-basis: calc(100vw - 72px);
    min-height: 304px;
    padding: 24px 20px;
  }

  .review-card p {
    font-size: 17px;
    line-height: 1.55;
  }

  .review-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    order: 2;
    margin-top: 8px;
  }

  .review-arrow {
    position: static;
    width: 46px;
    height: 46px;
    transform: none;
    box-shadow: none;
  }

  .review-hint {
    margin-top: 12px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Request form: spam trap and success state
   Appended after the mobile block on purpose — these are new components with
   their own class names, so nothing above can conflict with them.
   ───────────────────────────────────────────────────────────────────────── */

/* Off-screen rather than display:none. Bots skip fields the browser reports
   as invisible, so hiding it that way would defeat the trap; moving it out of
   the viewport keeps it "visible" to a script and unreachable for a person.
   aria-hidden and tabindex="-1" in the markup keep it away from screen
   readers and the tab order. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 28px;
  text-align: center;
}

.form-success i {
  font-size: 44px;
  color: var(--gvk-success);
}

.form-success h2 {
  margin: 0;
  font-size: 26px;
}

.form-success p {
  margin: 0;
  max-width: 34ch;
  line-height: 1.6;
}

/* Validation stays inside the control so errors never change the grid height. */
.field-error {
  position: absolute;
  right: 14px;
  bottom: 6px;
  left: 14px;
  overflow: hidden;
  color: var(--gvk-error);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
  pointer-events: none;
  white-space: nowrap;
}

.field-error:empty {
  display: none;
}

.request-card input.has-error,
.request-card textarea.has-error {
  border-color: var(--gvk-error);
  padding-top: 6px;
  padding-bottom: 25px;
  /* Colour alone would be invisible to a red-green colourblind visitor, and
     roughly one man in twelve is. The ring thickens the border as well. */
  box-shadow: 0 0 0 2px rgba(192, 43, 43, 0.18);
}

.sticky-actions {
  display: none;
}

@media (max-width: 980px) {
  .sticky-actions {
    position: fixed;
    z-index: 45;
    bottom: 0;
    left: 50%;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 8px;
    width: min(calc(100% - 24px), 620px);
    border: 1px solid var(--gvk-grey-200);
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -8px 24px rgba(23, 27, 30, .12);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(100% + 16px));
    transition:
      opacity 180ms ease-out,
      transform 220ms cubic-bezier(.22, 1, .36, 1),
      visibility 220ms;
    visibility: hidden;
  }

  .sticky-actions.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    visibility: visible;
  }

  .sticky-actions a {
    min-width: 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--radius-sm);
    padding: 0 10px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
  }

  .sticky-estimate {
    background: var(--gvk-orange-700);
  }

  .sticky-phone {
    background: var(--gvk-navy-700);
  }

  .sticky-actions a:active {
    transform: scale(.98);
  }
}

@media (max-width: 360px) {
  .sticky-actions {
    width: min(calc(100% - 16px), 620px);
    gap: 6px;
    padding-inline: 6px;
  }

  .sticky-actions a {
    gap: 6px;
    padding-inline: 7px;
    font-size: 14px;
  }
}

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

/* ------------------------------------------------------------------------
   Shared blocks, redesign test (branch design/block-redesign-test, 16.10.2026):
   reviews, service area, contact and footer, on the home page and the
   service pages alike. Overrides the rules above.
   ------------------------------------------------------------------------ */

/* Reviews drift on their own (review-carousel.js): no scrollbar, no snapping */
.review-cards { padding: 12px 6px 24px; scroll-snap-type: none; scrollbar-width: none; }
/* Cards fade out at both ends of the strip instead of being cut off hard,
   and their shadows go with them */
.review-cards { -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--white) 28px, var(--white) calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, var(--white) 28px, var(--white) calc(100% - 28px), transparent 100%); }
.review-cards::-webkit-scrollbar { display: none; }
.review-card { scroll-snap-align: none; scroll-snap-stop: normal; border: 1px solid var(--gvk-grey-200); border-radius: 16px; box-shadow: 0 1px 2px rgba(27, 53, 89, .05), 0 4px 12px rgba(27, 53, 89, .06); }
.review-controls { margin-top: 4px; }

/* Service area: full width; towns in three straight columns beside the map */
.service-areas { padding: clamp(64px, 7vw, 104px) 0; }
.areas-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); align-items: stretch; }
.areas-copy { gap: 20px; align-content: start; }
.areas-copy h2 { color: var(--gvk-navy-800); font-size: clamp(30px, 3vw, 42px); letter-spacing: -.028em; line-height: 1.12; text-wrap: balance; }
.areas-copy > p { font-size: 17px; }
.area-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
.area-list li { min-height: 46px; font-size: 15px; }
.areas-map { min-height: 100%; border: 0; border-radius: 16px; box-shadow: 0 1px 2px rgba(27, 53, 89, .06), 0 14px 34px rgba(27, 53, 89, .09); }
.areas-map iframe { min-height: 100%; height: 100%; }

/* Contact: a navy panel with rounded corners on the white page, so the page
   no longer ends in two dark bands */
.contact { padding: clamp(56px, 6vw, 96px) 0; background: var(--white); }
.contact-grid { padding: clamp(28px, 4.5vw, 64px); border-radius: 24px; background: var(--gvk-navy-800); box-shadow: 0 2px 4px rgba(27, 53, 89, .08), 0 14px 34px rgba(27, 53, 89, .12); }
.contact-copy h2 { font-size: clamp(30px, 3vw, 42px); letter-spacing: -.028em; line-height: 1.12; text-wrap: balance; }
.contact-copy p:not(.eyebrow) { font-size: 18px; }
.contact-card { border-color: rgba(255, 255, 255, .12); border-radius: 18px; background: rgba(255, 255, 255, .06); box-shadow: none; }
.contact-icon { border-radius: 12px; }

/* Footer: light, so the page closes calmly after the navy contact panel */
.footer { padding: 56px 0 32px; color: var(--gvk-grey-600); background: var(--gvk-grey-50); border-top: 1px solid var(--gvk-grey-200); }
.footer h2, .footer .footer-heading { color: var(--gvk-navy-800); font-size: 13px; letter-spacing: .1em; }
.footer a { color: var(--gvk-navy-700); font-weight: 600; }
.footer a:hover { color: var(--gvk-orange-700); }
.footer-grid p { max-width: 34ch; line-height: 1.55; }
.footer-legal { margin-top: 36px; border-top-color: var(--gvk-grey-200); color: var(--gvk-grey-600); font-size: 14px; }

@media (max-width: 980px) {
  .areas-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .areas-map, .areas-map iframe { min-height: 380px; }
}
@media (max-width: 680px) {
  .area-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .area-list li { font-size: 15px; }
  .areas-map, .areas-map iframe { min-height: 300px; }
  .contact-grid { width: min(100% - 24px, var(--container)); border-radius: 22px; padding: 28px 20px; }
  .contact-copy h2 { font-size: 32px; }
}

/* One button height everywhere (round 4, 16.10.2026) */
.header-call, .button { min-height: 48px; }

/* Request form: answers in normal sentence case at a readable size, not small
   spaced capitals (easier for older visitors) */
.quiz-option { font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.row-option { min-height: 56px; }

@media (max-width: 680px) {
  .footer a { padding-block: 7px; margin-top: 2px; }
  .contact-copy h2 { font-size: 30px; }
}

/* ------------------------------------------------------------------------
   Site menu (17.10.2026): the same on the home page and every service page.
   Services opens four columns of service pages on wide screens; on phones
   and tablets the menu button opens the whole menu and the four kinds of
   service fold open one at a time. Markup: site_nav() in gen.py, behaviour:
   script.js.
   ------------------------------------------------------------------------ */
.nav { align-items: center; }
.nav-trigger { display: inline-flex; gap: 7px; align-items: center; padding: 28px 0; border: 0; color: inherit; background: none; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; }
.nav-trigger i { font-size: 10px; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.nav-services.is-open .nav-trigger, .nav-trigger:hover { color: var(--gvk-navy-800); }
.nav-services.is-open .nav-trigger i { transform: rotate(180deg); }
.nav-group summary { list-style: none; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group ul { display: grid; margin: 0; padding: 0; list-style: none; }
.nav-group a { display: block; color: var(--gvk-grey-700); font-family: var(--font-body); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.35; text-transform: none; white-space: normal; }
.nav-group a:hover { color: var(--gvk-orange-700); }
.nav-group a[aria-current="page"] { color: var(--gvk-navy-800); font-weight: 700; }
.nav-panel-foot p { margin: 0; color: var(--gvk-navy-800); font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: 0; text-transform: none; }

@media (min-width: 1181px) {
  .nav-panel { position: absolute; top: 100%; left: 50%; display: none; width: min(1120px, calc(100vw - 48px)); padding: 30px 34px 26px; border: 1px solid var(--gvk-grey-200); border-top: 0; border-radius: 0 0 16px 16px; background: var(--white); box-shadow: 0 2px 4px rgba(27, 53, 89, .07), 0 22px 46px rgba(27, 53, 89, .14); transform: translateX(-50%); }
  .nav-services.is-open .nav-panel { display: block; animation: nav-panel-in .28s cubic-bezier(.22, 1, .36, 1); }
  .nav-panel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 36px; }
  .nav-group summary { margin-bottom: 8px; padding-bottom: 12px; border-bottom: 2px solid var(--gvk-navy-800); color: var(--gvk-navy-800); font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
  .nav-group a { padding: 9px 0; }
  .nav-panel-foot { display: flex; gap: 24px; align-items: center; justify-content: space-between; margin-top: 24px; padding: 18px 22px; border-radius: 10px; background: var(--gvk-sky-50); }
}
@keyframes nav-panel-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 1180px) {
  .nav { max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; align-items: stretch; }
  .nav-trigger, .nav-panel-foot { display: none; }
  .nav-services, .nav-panel { display: block; }
  .nav-group { border-bottom: 1px solid var(--gvk-grey-200); }
  .nav-group summary { display: flex; min-height: 52px; align-items: center; justify-content: space-between; cursor: pointer; }
  .nav-group summary::after { content: "\f078"; color: var(--gvk-sky-700); font-family: "GVK Icons"; font-size: 11px; font-weight: 900; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
  .nav-group[open] summary::after { transform: rotate(180deg); }
  .nav-group ul { padding: 0 0 12px 14px; }
  .nav-group a { min-height: 44px; padding: 11px 0; }
  .nav > a { border-bottom: 1px solid var(--gvk-grey-200); }
}
@media (max-width: 680px) {
  .nav { max-height: calc(100dvh - 72px); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-services.is-open .nav-panel { animation: none; }
  .nav-trigger i, .nav-group summary::after { transition: none; }
}

/* Footer: the service pages by kind of job. One text size (15px) for the
   links, the blurb and the contacts; the column titles in the heading font in
   normal case; the phone large, as the main thing people scroll down for
   (Ramil, 30.10.2026). */
.footer-grid-services { grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-grid-services .footer-heading { margin-bottom: 12px; color: var(--gvk-navy-800); font-size: 18px; letter-spacing: 0; line-height: 1.2; text-transform: none; }
.footer-grid-services a { color: var(--gvk-grey-700); font-size: 15px; font-weight: 400; line-height: 1.4; }
.footer-grid-services a:hover { color: var(--gvk-orange-700); }
.footer-grid-services > div:first-child > p { font-size: 15px; }
.footer-grid-services .footer-detail a { display: inline; margin: 0; color: var(--gvk-navy-800); font-weight: 600; }
.footer-grid-services .footer-detail a[href^="tel:"] { display: inline-block; margin: 4px 0 6px; font-family: var(--font-display); font-size: 22px; font-weight: 800; }
@media (max-width: 980px) {
  .footer-grid-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid-services > div:first-child { grid-column: 1 / -1; }
}

/* Accessibility (audit 17.10.2026): a focus ring that shows on white and on
   navy, jump links that land below the sticky header, the sticky bar out of
   the way while the request popup is open, less motion when asked */
:root { --focus: var(--gvk-navy-700); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.install-hero, .install-why, .contact-grid, .estimate-banner, .sticky-actions { --focus: var(--white); }
html { scroll-padding-top: 96px; }
body.request-open .sticky-actions { opacity: 0; pointer-events: none; transform: translateY(110%); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}