@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") 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-bars::before { content: "\f0c9"; }
.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-clock::before { content: "\f017"; }
.fa-envelope::before { content: "\f0e0"; }
.fa-filter::before { content: "\f0b0"; }
.fa-fire::before { content: "\f06d"; }
.fa-house-chimney::before { content: "\e3af"; }
.fa-house-chimney-window::before { content: "\e00d"; }
.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-user-check::before { content: "\f4fc"; }
.fa-users::before { content: "\f0c0"; }
.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-navy-500: #3262a4;
  --gvk-navy-700: #24487a;
  --gvk-navy-800: #1b3559;
  --gvk-orange-100: #fdeadc;
  --gvk-orange-500: #f27f2e;
  --gvk-orange-600: #d96a1d;
  --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;
  --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;
}

* {
  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: 17px;
  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: 28px;
  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 {
  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: 13px;
  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-500);
}

.header-call:hover,
.button-primary:hover {
  background: var(--gvk-sky-600);
  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-grey-900);
  font-family: var(--font-display);
  letter-spacing: 0;
  line-height: 1.12;
}

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

h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
}

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

p {
  margin: 0;
}

.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-500);
}

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

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

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

.button-heat:hover {
  background: var(--gvk-orange-600);
  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: #ffc247;
  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: 12px;
  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-500);
}

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

.estimate-banner p {
  margin-top: 8px;
  color: rgba(255, 255, 255, .90);
  font-size: 16px;
  line-height: 1.35;
}

.request-card h2 {
  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 {
  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-500);
  background: var(--gvk-sky-500);
  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-500);
  background: var(--gvk-orange-500);
  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: 13px;
  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: 13px;
  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;
}

.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-500);
  box-shadow: 0 0 0 3px rgba(72, 169, 220, .18);
  outline: none;
}

.form-note {
  min-height: 40px;
  color: var(--gvk-grey-500);
  font-size: 14px;
  line-height: 1.3;
}

/* 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-500);
  font-size: 11px;
  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 h2 {
  color: var(--gvk-grey-900);
  font-size: 18px;
  line-height: 1.25;
}

.trust-strip-item p {
  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;
}

.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: 15px;
  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;
}

.review-controls {
  display: contents;
}

.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);
}

.review-card {
  flex: 0 0 min(360px, calc(100vw - 64px));
  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-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.review-card.is-yelp:hover {
  border-color: #d32323;
}

.review-card.is-google:hover {
  border-color: #4285f4;
}

.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-500);
  font-size: 13px;
  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: #ffc247;
  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: 14px;
  font-weight: 800;
}

.review-card.is-yelp .review-source {
  color: #b91c1c;
}

.review-card.is-google .review-source {
  color: #2867c7;
}

.review-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 1px solid var(--gvk-grey-200);
  border-radius: var(--radius-md);
  color: var(--gvk-navy-700);
  background: var(--white);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transform: translateY(-50%);
}

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

.review-arrow.previous {
  left: -24px;
}

.review-arrow.next {
  right: -24px;
}

.review-hint {
  margin: 14px 0 0;
  color: var(--gvk-grey-500);
  font-size: 14px;
  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: 15px;
  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), #142944);
}

.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: 12px;
  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 {
  margin: 0 0 14px;
  padding-bottom: 10px;
  color: var(--white);
  border-bottom: 3px solid var(--gvk-orange-500);
  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: 14px;
}

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

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

@media (max-width: 980px) {
  .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;
  }

  .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: 31px;
  }

  .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: 11px;
  }

  .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 h2 {
    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 {
    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: 15px;
  }

  .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: 14px;
  }

  .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;
    touch-action: pan-x;
    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: #1f9d55;
}

.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: #c02b2b;
  font-family: var(--font-body);
  font-size: 12px;
  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: #c02b2b;
  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: 13px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
  }

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

  .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: 12px;
  }
}

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