/*
  contact-form — estimate request form on a sparkle plate.
  Desktop: Figma 325:2642 · Mobile: Figma 325:3117

  Gravity Forms: the same rules target .gform_wrapper / .gfield / .gform_button
  so render.php can drop in gravity_form() without a second stylesheet.
*/

.contact-form {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  border-block-end: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ---------- Decorative sparkle watermark ---------- */

.contact-form__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
}

.contact-form__bg-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* ---------- Inner band ---------- */

.contact-form__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl); /* 32px */
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--header-frame-max);
  margin-inline: auto;
  /* Mobile: Figma 325:3117 — 56px / 16px */
  padding-block: var(--contact-form-pad-y-mobile);
  padding-inline: var(--space-md);
}

.contact-form__title {
  margin: 0;
  inline-size: 100%;
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-contact-form-title-mobile); /* 24px */
  line-height: var(--lh-contact-form-title-mobile); /* 29px */
  letter-spacing: var(--hero-title-ls);
  text-align: center;
  text-transform: uppercase;
  color: var(--color-text);
}

.contact-form__title-desktop {
  display: none;
}

.contact-form__title-mobile {
  display: inline;
}

/* Form + GF wrapper share this column stack */
.contact-form__form,
.contact-form .gform_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl); /* 32px — card → submit */
  inline-size: 100%;
  margin: 0;
}

/* GF form shrinks to content unless stretched — kit card should span the inner frame */
.contact-form .gform_wrapper form,
.contact-form .gform_wrapper .gform_body,
.contact-form .gform_wrapper .gform_fields,
.contact-form .gform_wrapper .gform_footer {
  inline-size: 100%;
  max-inline-size: 100%;
  align-self: stretch;
}

/* White field card — desktop only. Mobile fields sit on the sparkle plate. */
.contact-form:has(.contact-form__service-ms.is-open) .contact-form__card,
.contact-form:has(.contact-form__service-ms.is-open) .gform_body,
.contact-form:has(.contact-form__service-ms.is-open) .gform_wrapper {
  overflow: visible;
}

.contact-form__card,
.contact-form .gform_body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

.contact-form__fields,
.contact-form form.contact-form__estimate-step--1 .gform_fields:not(:has(.contact-form__field--street)),
.contact-form .gform_fields:not(:has(.contact-form__field--street)) {
  display: grid;
  /* Mobile order: first, last, phone, email, zip, service (Figma 325:3117) */
  grid-template-areas:
    "first"
    "last"
    "phone"
    "email"
    "zip"
    "service";
  gap: var(--space-xl); /* 32px between fields */
  inline-size: 100%;
  margin: 0;
  padding: 0;
}

/* !important beats GF Orbital `grid-column: span 12` on .gfield--width-full */
.contact-form__field--first { grid-area: first !important; }
.contact-form__field--last { grid-area: last !important; }
.contact-form__field--phone { grid-area: phone !important; }
.contact-form__field--email { grid-area: email !important; }
.contact-form__field--service { grid-area: service !important; }
.contact-form__field--zip { grid-area: zip !important; }

/*
 * Step 2 — class from PHP (contact-form__estimate-step--2 on <form>).
 * Single-column stack on mobile; do not inherit step-1 named areas.
 */
.contact-form form.contact-form__estimate-step--2 .gform_fields:has(.contact-form__field--street),
.contact-form .gform_fields:has(.contact-form__field--street) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "step2heading"
    "street"
    "city"
    "state"
    "optin-email"
    "optin-sms"
    "privacy" !important;
  gap: var(--space-xl);
  inline-size: 100%;
}

.contact-form form.contact-form__estimate-step--2 .gform_fields:has(.gfield.contact-form__location-line),
.contact-form .gform_fields:has(.contact-form__field--street):has(.gfield.contact-form__location-line) {
  grid-template-areas:
    "step2heading"
    "location"
    "street"
    "city"
    "state"
    "optin-email"
    "optin-sms"
    "privacy" !important;
}

.contact-form form.contact-form__estimate-step--2 .gfield.contact-form__step2-heading,
.contact-form .gfield.contact-form__step2-heading {
  grid-area: step2heading !important;
}

.contact-form form.contact-form__estimate-step--2 .gfield.contact-form__location-line,
.contact-form .gfield.contact-form__location-line {
  grid-area: location !important;
}

.contact-form form.contact-form__estimate-step--2 .contact-form__field--street,
.contact-form .contact-form__field--street {
  grid-area: street !important;
}

.contact-form form.contact-form__estimate-step--2 .contact-form__field--city,
.contact-form .contact-form__field--city {
  grid-area: city !important;
}

.contact-form form.contact-form__estimate-step--2 .contact-form__field--state,
.contact-form .contact-form__field--state {
  grid-area: state !important;
}

.contact-form form.contact-form__estimate-step--2 .contact-form__field--optin-email,
.contact-form .contact-form__field--optin-email {
  grid-area: optin-email !important;
}

.contact-form form.contact-form__estimate-step--2 .contact-form__field--optin-sms,
.contact-form .contact-form__field--optin-sms {
  grid-area: optin-sms !important;
}

.contact-form form.contact-form__estimate-step--2 .gfield.contact-form__privacy-html,
.contact-form .gfield.contact-form__privacy-html {
  grid-area: privacy !important;
}

/* Step-2 fields must not keep step-1 grid-area names (first, zip, etc.). */
.contact-form form.contact-form__estimate-step--2 .gform_fields:has(.contact-form__field--street) .gfield {
  grid-column: auto !important;
}

.contact-form .contact-form__step2-heading .contact-form__location-line--inline {
  margin-block-start: var(--space-md);
  font-size: var(--fs-local-hero-label, 1rem);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.5;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-primary, #1d313b);
}

.contact-form__field,
.contact-form .gfield:not(fieldset) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md); /* 16px label → input */
  inline-size: 100%;
}

.contact-form .contact-form__field--service,
.contact-form .gfield.contact-form__field--service {
  align-items: flex-start;
}

/*
 * Service checkboxes: GF uses <fieldset><legend>, not <label>.
 * Flex gap does not sit between legend and the control — use grid instead.
 */
.contact-form .gform_wrapper fieldset.gfield,
.local-hero__form-panel .gform_wrapper fieldset.gfield {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0;
}

.contact-form .gform_wrapper fieldset.gfield legend.gfield_label,
.local-hero__form-panel .gform_wrapper fieldset.gfield legend.gfield_label {
  display: block;
  float: none;
  inline-size: 100%;
  max-inline-size: 100%;
  padding: 0;
  /* Flex gap on fieldset ignores legend — match div.gfield 16px label → control */
  --gf-local-margin-y: 0 !important;
  margin: 0 0 var(--space-md) !important;
}

.contact-form__label,
.contact-form .gfield_label {
  font-family: var(--font-body-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-local-hero-label); /* 16px */
  line-height: var(--lh-local-hero-label); /* 24px */
  letter-spacing: var(--ls-local-hero-label);
  color: var(--color-text);
}

.contact-form__req,
.contact-form .gfield_required {
  color: var(--color-primary);
}

.contact-form__input,
.contact-form__select,
.contact-form .gform_wrapper input[type="text"],
.contact-form .gform_wrapper input[type="email"],
.contact-form .gform_wrapper input[type="tel"],
.contact-form .gform_wrapper input[type="number"],
.contact-form .gform_wrapper select {
  box-sizing: border-box;
  inline-size: 100%;
  block-size: var(--contact-form-field-h); /* 56px */
  margin: 0;
  padding-block: 0;
  padding-inline: 0.75rem;
  border: 1px solid var(--color-local-hero-muted);
  border-radius: var(--radius-local-hero-field);
  background-color: var(--color-bg);
  font-family: var(--font-body-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-local-hero-label);
  line-height: var(--lh-local-hero-label);
  color: var(--color-text);
}

.contact-form__input:focus-visible,
.contact-form__select:focus-visible,
.contact-form .gform_wrapper input:focus-visible,
.contact-form .gform_wrapper select:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Custom chevron — hide the native arrow */
.contact-form__select,
.contact-form .gform_wrapper select {
  appearance: none;
  -webkit-appearance: none;
  inline-size: var(--contact-form-select-w); /* 231px */
  max-inline-size: 100%;
  padding-inline-end: 2.25rem;
  color: var(--color-local-hero-muted);
  background-image: url("../../images/contact-form/icon-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 17px 17px;
  cursor: pointer;
}

.contact-form__select:valid,
.contact-form .gform_wrapper select:valid {
  color: var(--color-text);
}

.contact-form__select option,
.contact-form .gform_wrapper select option {
  color: var(--color-text);
}

.contact-form__actions,
.contact-form .gform_footer {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  margin: 0;
  padding: 0;
}

.contact-form__submit,
.contact-form .gform_button,
.contact-form .gform_footer input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm); /* 10px */
  box-sizing: border-box;
  inline-size: min(100%, var(--contact-form-btn-w-mobile)); /* 285px */
  padding-block: 1.25rem; /* 20px */
  padding-inline: 2.5rem; /* 40px */
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-cta);
  line-height: var(--lh-nav);
  letter-spacing: var(--ls-cta);
  color: var(--color-text-inverse);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.contact-form__submit:hover,
.contact-form .gform_button:hover,
.contact-form .gform_footer input[type="submit"]:hover {
  background-color: var(--color-primary-hover);
}

.contact-form__submit:focus-visible,
.contact-form .gform_button:focus-visible,
.contact-form .gform_footer input[type="submit"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* [ label ] [ arrow ] [ spinner ] — spinner only when .is-loading */
.contact-form__submit-text {
  flex: 0 0 auto;
}

.contact-form__submit-end {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.375rem;
}

.contact-form__submit-spinner {
  display: none;
  flex-shrink: 0;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border: 2px solid rgb(255 255 255 / 35%);
  border-top-color: var(--color-text-inverse);
  border-radius: 50%;
  animation: contact-form-submit-spin 0.65s linear infinite;
}

.contact-form__submit-trailing {
  position: relative;
  flex-shrink: 0;
  inline-size: 0.875rem; /* 14px */
  block-size: 0.875rem;
}

/* Not an <img> — lazyload plugins cannot blank this on corporate / HO. */
.contact-form__submit-trailing--arrow {
  background-image: url("../../images/contact-form/icon-arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.contact-form__submit-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.contact-form__submit.is-loading,
.contact-form .gform_button.is-loading,
.contact-form .gform_next_button.is-loading {
  overflow: visible;
  opacity: 1;
  color: var(--color-text-inverse) !important;
  cursor: wait;
}

.contact-form__submit.is-loading:disabled,
.contact-form .gform_button.is-loading:disabled,
.contact-form .gform_next_button.is-loading:disabled {
  opacity: 1;
  color: var(--color-text-inverse) !important;
}

.contact-form__submit.is-loading .contact-form__submit-text,
.contact-form .gform_button.is-loading .contact-form__submit-text,
.contact-form .gform_button.is-loading .local-hero__submit-text,
.contact-form .gform_next_button.is-loading .contact-form__submit-text,
.contact-form .gform_next_button.is-loading .local-hero__submit-text {
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
  clip: auto !important;
  clip-path: none !important;
  position: static !important;
  inline-size: auto !important;
  block-size: auto !important;
}

.contact-form__submit.is-loading .contact-form__submit-end,
.contact-form .gform_button.is-loading .contact-form__submit-end,
.contact-form .gform_next_button.is-loading .contact-form__submit-end,
.contact-form .gform_button.is-loading .local-hero__submit-end,
.contact-form .gform_next_button.is-loading .local-hero__submit-end {
  display: inline-flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.contact-form__submit.is-loading .contact-form__submit-icon,
.contact-form .gform_button.is-loading .contact-form__submit-icon,
.contact-form .gform_next_button.is-loading .contact-form__submit-icon,
.contact-form .gform_button.is-loading .local-hero__submit-icon,
.contact-form .gform_next_button.is-loading .local-hero__submit-icon {
  opacity: 1 !important;
  visibility: visible !important;
}

.contact-form__submit.is-loading .contact-form__submit-spinner,
.contact-form .gform_button.is-loading .contact-form__submit-spinner,
.contact-form .gform_next_button.is-loading .contact-form__submit-spinner,
.contact-form .gform_button.is-loading .local-hero__submit-spinner,
.contact-form .gform_next_button.is-loading .local-hero__submit-spinner {
  display: inline-block;
}

/* GF injects .gform-loader after the button — hide it; we use the in-button spinner. */
.contact-form .gform_page_footer .gform-loader,
.contact-form .gform_footer .gform-loader,
.contact-form button .gform-loader {
  display: none !important;
}

@keyframes contact-form-submit-spin {
  to {
    transform: rotate(360deg);
  }
}

/* GF inserts .gform-loader after the button (incl. step-2 page footer); in-button spinner only */
.contact-form .gform_wrapper .gform-loader,
.contact-form .gform_wrapper .gform_ajax_spinner,
.contact-form .gform_wrapper img.gform_ajax_spinner {
  display: none !important;
}

/* Hide GF chrome we do not want in this block (keep field validation copy). */
.contact-form .gform_heading,
.contact-form .gform_required_legend,
.contact-form .gfield_description:not(.validation_message):not(.gfield_validation_message),
.contact-form .gfield--type-hidden,
.contact-form .gform_validation_container,
.contact-form .gfield--type-simple {
  display: none;
}

.contact-form .gfield_description.validation_message,
.contact-form .gfield_description.gfield_validation_message,
.contact-form .validation_message {
  display: block;
  margin-block-start: var(--space-sm);
  font-family: var(--font-body-alt);
  font-size: var(--fs-local-hero-label);
  line-height: 1.5;
  color: var(--color-primary);
}

.contact-form .gfield_validation_message p {
  margin: 0 0 0.5em;
}

.contact-form .gfield_validation_message p:last-child {
  margin-bottom: 0;
}

.contact-form .gfield_validation_message strong {
  font-weight: 700;
}

.contact-form .gfield_validation_message a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contact-form .gfield_validation_message a:hover,
.contact-form .gfield_validation_message a:focus-visible {
  color: var(--color-primary-hover, #a80726);
}

.contact-form .gfield_validation_message a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/*
 * GF legacy error styling clips our grid — keep invalid fields transparent like Shine+.
 */
.contact-form .gform_wrapper .gfield.gfield_error,
.contact-form .gform_wrapper .gfield.gfield_error.gfield_contains_required {
  background-color: transparent !important;
  border: 0 !important;
  padding-block: 0 !important;
  margin-block-end: 0 !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  box-sizing: border-box;
}

.contact-form .gform_wrapper .gfield_error input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
.contact-form .gform_wrapper .gfield_error select,
.contact-form .gform_wrapper .gfield_error textarea {
  border-color: var(--color-primary) !important;
}

.contact-form .gform_wrapper .gform_validation_errors,
.contact-form .gform_wrapper [id^="gform_"][id$="_validation_container"] {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  inline-size: 100%;
  max-inline-size: 100%;
  margin-inline: 0;
  margin-block: 0 var(--space-xl);
  padding: 1rem 1.25rem !important;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-local-hero-field);
  background-color: var(--color-bg);
  color: var(--color-text);
  text-align: left;
  box-shadow: none;
  box-sizing: border-box;
}

.contact-form .gform_validation_errors > h2.gform_submission_error {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-body-alt);
  font-size: var(--fs-local-hero-label);
  line-height: var(--lh-local-hero-label);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  text-align: left;
}

.contact-form .gform_validation_errors > h2 .gform-icon {
  display: none !important;
}

.contact-form .gform_validation_errors > h2.gform_submission_error::before {
  display: inline-flex !important;
  content: "!";
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-bg);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* Hide decorative HTML blocks; corporate step 2 copy + location line are exceptions. */
.contact-form .gfield--type-html {
  display: none;
}

.contact-form .gfield--type-html.contact-form__location-line,
.contact-form .gfield--type-html.contact-form__step2-heading,
.contact-form .gfield--type-html.contact-form__privacy-html {
  display: block !important;
}

/* Step 2 privacy HTML (GF field 66) — match Shine red text links (e.g. services cards). */
.contact-form .gfield.contact-form__privacy-html a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contact-form .gfield.contact-form__privacy-html a:hover,
.contact-form .gfield.contact-form__privacy-html a:focus-visible {
  color: var(--color-primary-hover, #a80726);
}

.contact-form .gfield.contact-form__privacy-html a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.contact-form__location-line .gfield_html {
  font-weight: var(--fw-semibold, 600);
  color: var(--color-primary, #1d313b);
}

/*
 * GF 2.5 "Gravity" theme uses .gravity-theme.
 * GF 2.10 default "Orbital" uses .gform-theme--framework and a 12-col grid
 * with .gfield--width-full { grid-column: span 12 }. That span ignores our
 * named areas and stacks every field full-width. Reset both themes.
 */
.contact-form .gform_wrapper.gravity-theme .gform_fields,
.contact-form .gform_wrapper.gform-theme .gform_fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  inline-size: 100%;
}

.contact-form .gform_wrapper .gfield,
.contact-form .gform_wrapper .gfield--width-full,
.contact-form .gform_wrapper .gfield--width-half {
  grid-column: auto !important;
  min-inline-size: 0;
}

/* Show labels above inputs (old Form 20 used hidden_label + placeholders) */
.contact-form .gform_wrapper .hidden_label .gfield_label,
.contact-form .gform_wrapper .gfield_label {
  display: block !important;
  position: static !important;
  clip: auto !important;
  inline-size: auto !important;
  block-size: auto !important;
  margin: 0;
  overflow: visible;
  white-space: normal;
}

/*
 * GF Orbital adds label margin-bottom on choice fields (12px vs 8px on text).
 * Our .gfield flex gap already sets label → control spacing — zero GF margins
 * so the service multi-select matches name, email, zip, etc.
 */
.contact-form .gform_wrapper .gfield_label,
.contact-form .gform_wrapper .gform-field-label,
.local-hero__form-panel .gform_wrapper .gfield_label,
.local-hero__form-panel .gform_wrapper .gform-field-label {
  --gf-local-margin-y: 0 !important;
  margin-block: 0 !important;
}

.contact-form .gfield_required,
.contact-form .gfield_required_text {
  display: none !important;
}

.contact-form .gfield_contains_required .gfield_label::after {
  content: " *";
  color: var(--color-primary);
  font-weight: var(--fw-medium);
}

.contact-form .gform_wrapper .ginput_container,
.contact-form .gform_wrapper .ginput_container_phone,
.local-hero__form-panel .gform_wrapper .ginput_container,
.local-hero__form-panel .gform_wrapper .ginput_container_phone {
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block: 0;
}

/* GF theme sets .medium to ~50% width — kit fields are full column width */
.contact-form .gform_wrapper .ginput_container input.medium,
.contact-form .gform_wrapper .ginput_container select.medium,
.contact-form .gform_wrapper .ginput_container input.large,
.contact-form .gform_wrapper .ginput_container select.large,
.contact-form .gform_wrapper .ginput_container input.small,
.contact-form .gform_wrapper .ginput_container select.small {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
}

.contact-form .gform_wrapper .ginput_container input[type="text"],
.contact-form .gform_wrapper .ginput_container input[type="email"],
.contact-form .gform_wrapper .ginput_container input[type="tel"],
.contact-form .gform_wrapper .ginput_container select {
  inline-size: 100%;
  max-inline-size: 100%;
  box-sizing: border-box;
  block-size: var(--contact-form-field-h);
  margin: 0;
  padding-block: 0;
  padding-inline: 0.75rem;
  border: 1px solid var(--color-local-hero-muted);
  border-radius: var(--radius-local-hero-field);
  background-color: var(--color-bg);
  font-family: var(--font-body-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-local-hero-label);
  line-height: var(--lh-local-hero-label);
  color: var(--color-text);
}

.contact-form .gform_wrapper .ginput_container select {
  appearance: none;
  -webkit-appearance: none;
  inline-size: var(--contact-form-select-w);
  max-inline-size: 100%;
  padding-inline-end: 2.25rem;
  color: var(--color-local-hero-muted);
  background-image: url("../../images/contact-form/icon-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 17px 17px;
  cursor: pointer;
}

.contact-form .gform_wrapper .ginput_container select:valid {
  color: var(--color-text);
}

/* Submit: text + arrow icon injected via gform_submit_button filter */
.contact-form .gform_footer input[type="submit"].gform-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}

/* ---------- Desktop — Figma 325:2642 ---------- */
/* --bp-lg: 1024px */

@media (min-width: 1024px) {
  .contact-form__inner {
    max-inline-size: calc(var(--mega-content-max) + (var(--header-pad-x) * 2));
    padding-block: var(--contact-form-pad-y); /* 120px */
    padding-inline: var(--header-pad-x);
  }

  .contact-form__title {
    font-size: var(--fs-contact-form-title); /* 54px */
    line-height: var(--lh-contact-form-title); /* 54px */
    letter-spacing: 0;
  }

  .contact-form__title-desktop {
    display: inline;
  }

  .contact-form__title-mobile {
    display: none;
  }

  /* White card around the fields only */
  .contact-form__card,
  .contact-form .gform_body {
    inline-size: 100%;
    max-inline-size: calc(var(--contact-form-fields-w) + (var(--contact-form-card-pad) * 2));
    padding: var(--contact-form-card-pad); /* 72px */
    border-radius: var(--radius-local-hero-field);
    background-color: var(--color-bg);
  }

  /* Step 1 desktop only — never apply to step-2 field list */
  .contact-form__fields,
  .contact-form form.contact-form__estimate-step--1 .gform_fields:not(:has(.contact-form__field--street)),
  .contact-form .gform_fields:not(:has(.contact-form__field--street)),
  .contact-form .gform_wrapper.gravity-theme form.contact-form__estimate-step--1 .gform_fields:not(:has(.contact-form__field--street)),
  .contact-form .gform_wrapper.gform-theme form.contact-form__estimate-step--1 .gform_fields:not(:has(.contact-form__field--street)),
  .contact-form .gform_wrapper.gravity-theme .gform_fields:not(:has(.contact-form__field--street)),
  .contact-form .gform_wrapper.gform-theme .gform_fields:not(:has(.contact-form__field--street)) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "first last"
      "phone email"
      "service zip" !important;
    column-gap: var(--space-xl); /* 32px */
    inline-size: 100%;
    max-inline-size: var(--contact-form-fields-w);
    margin-inline: auto;
  }

  .contact-form form.contact-form__estimate-step--2 .gform_fields:has(.contact-form__field--street),
  .contact-form .gform_wrapper.gravity-theme form.contact-form__estimate-step--2 .gform_fields:has(.contact-form__field--street),
  .contact-form .gform_wrapper.gform-theme form.contact-form__estimate-step--2 .gform_fields:has(.contact-form__field--street),
  .contact-form .gform_fields:has(.contact-form__field--street) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "step2heading step2heading"
      "street street"
      "city state"
      "optin-email optin-sms"
      "privacy privacy" !important;
    column-gap: var(--space-xl);
    inline-size: 100%;
    max-inline-size: var(--contact-form-fields-w);
    margin-inline: auto;
  }

  .contact-form form.contact-form__estimate-step--2 .gform_fields:has(.gfield.contact-form__location-line),
  .contact-form .gform_fields:has(.contact-form__field--street):has(.gfield.contact-form__location-line) {
    grid-template-areas:
      "step2heading step2heading"
      "location location"
      "street street"
      "city state"
      "optin-email optin-sms"
      "privacy privacy" !important;
  }

  .contact-form__submit,
  .contact-form .gform_button,
  .contact-form .gform_footer input[type="submit"] {
    inline-size: auto;
  }
}

/* GF multi-page progress (2-step estimate form) — Shine red pill, aligned to field grid width */
.contact-form .gform_page_footer {
  margin-block-start: var(--space-lg);
}

.contact-form .gf_progressbar_wrapper {
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block: 0 var(--space-md);
  padding: 0 !important;
  overflow: visible;
}

.contact-form .gf_progressbar_title {
  margin-block-end: var(--space-sm);
  font-family: var(--font-body-alt);
  font-size: var(--fs-body-sm, 0.875rem);
  font-weight: var(--fw-semibold, 600);
  line-height: 1.2;
  color: var(--color-text);
}

.contact-form .gf_progressbar {
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-local-hero-muted, #e8e4e0);
  block-size: var(--contact-form-progress-h);
  height: var(--contact-form-progress-h) !important;
  min-block-size: var(--contact-form-progress-h);
}

/* GF ships 21px-tall fills; match track height or the bottom looks clipped */
.contact-form .gf_progressbar_percentage,
.contact-form .gf_progressbar_percentage.percentbar_custom {
  box-sizing: border-box;
  block-size: var(--contact-form-progress-h) !important;
  height: var(--contact-form-progress-h) !important;
  max-block-size: var(--contact-form-progress-h) !important;
  min-block-size: var(--contact-form-progress-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  border-radius: var(--radius-pill, 999px);
  background-color: var(--color-primary) !important;
  color: transparent !important;
  clip-path: none !important;
  float: none !important;
}

.contact-form .gf_progressbar_percentage span {
  display: none !important;
}

@media (min-width: 1024px) {
  .contact-form .gf_progressbar_wrapper {
    max-inline-size: var(--contact-form-fields-w);
    margin-inline: auto;
  }
}

.contact-form .gform_page_footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

/* Step 2 Previous — underlined text link (not the primary pill). */
.contact-form .gform_page_footer .gform_previous_button,
.contact-form .gform_page_footer .contact-form__page-button--previous,
.contact-form .gform_page_footer button.contact-form__page-button--previous {
  appearance: none !important;
  display: inline !important;
  inline-size: auto !important;
  min-block-size: 0 !important;
  min-inline-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: var(--font-body-alt) !important;
  font-weight: var(--fw-medium) !important;
  font-size: var(--fs-body-sm, 0.875rem) !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  color: var(--color-primary) !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  white-space: nowrap;
  cursor: pointer;
}

.contact-form .gform_page_footer .gform_previous_button:hover,
.contact-form .gform_page_footer .gform_previous_button:focus-visible,
.contact-form .gform_page_footer .contact-form__page-button--previous:hover,
.contact-form .gform_page_footer .contact-form__page-button--previous:focus-visible {
  color: var(--color-primary-hover, #a80726) !important;
  background: transparent !important;
}

.contact-form .gform_page_footer .gform_previous_button:focus-visible,
.contact-form .gform_page_footer .contact-form__page-button--previous:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Next / Submit — primary red pill (classes added in PHP) */
.contact-form .gform_page_footer .contact-form__page-button:not(.contact-form__page-button--previous),
.contact-form .gform_page_footer input[type="button"].contact-form__submit:not(.contact-form__page-button--previous),
.contact-form .gform_page_footer button.contact-form__submit:not(.contact-form__page-button--previous),
.contact-form .gform_page_footer .gform_next_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  box-sizing: border-box;
  inline-size: min(100%, var(--contact-form-btn-w-mobile));
  padding-block: 1.25rem;
  padding-inline: 2.5rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-cta);
  line-height: var(--lh-nav);
  letter-spacing: var(--ls-cta);
  color: var(--color-text-inverse);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.contact-form .gform_page_footer .contact-form__page-button:not(.contact-form__page-button--previous):hover,
.contact-form .gform_page_footer input[type="button"].contact-form__submit:not(.contact-form__page-button--previous):hover,
.contact-form .gform_page_footer button.contact-form__submit:not(.contact-form__page-button--previous):hover,
.contact-form .gform_page_footer .gform_next_button:hover {
  background-color: var(--color-primary-hover);
}

@media (min-width: 1024px) {
  .contact-form .gform_page_footer .contact-form__page-button:not(.contact-form__page-button--previous),
  .contact-form .gform_page_footer input[type="button"].contact-form__submit:not(.contact-form__page-button--previous),
  .contact-form .gform_page_footer button.contact-form__submit:not(.contact-form__page-button--previous),
  .contact-form .gform_page_footer .gform_next_button {
    inline-size: auto;
  }
}

/*
 * Service(s) — Figma dropdown look, multi-select via GF checkboxes (JS: contact-form-gf.js).
 */
.contact-form__field--service-ms {
  overflow: visible !important;
  z-index: 1;
}

.contact-form__field--service-ms:has(.contact-form__service-ms.is-open) {
  z-index: 30;
}

.contact-form__service-ms.is-open .contact-form__service-ms-panel {
  z-index: 50;
}

.contact-form__field--service-ms .ginput_container_checkbox.contact-form__service-ms-enhanced {
  position: relative;
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block: 0;
  padding: 0;
}

.contact-form__service-ms {
  position: relative;
  inline-size: 100%;
}

.contact-form__service-ms-trigger {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  inline-size: 100%;
  min-block-size: var(--contact-form-field-h, var(--local-hero-field-h, 3.5rem));
  margin: 0;
  padding-block: 0;
  padding-inline: 0.75rem 2.25rem;
  border: 1px solid var(--color-local-hero-muted);
  border-radius: var(--radius-local-hero-field);
  background-color: var(--color-bg);
  background-image: url("../../images/contact-form/icon-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 17px 17px;
  font-family: var(--font-body-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-local-hero-label);
  line-height: var(--lh-local-hero-label);
  color: var(--color-local-hero-muted);
  text-align: start;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.contact-form__service-ms-trigger.is-filled,
.contact-form__service-ms.is-open .contact-form__service-ms-trigger {
  color: var(--color-text);
  border-color: var(--color-primary);
}

.contact-form__service-ms-trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-form__service-ms-panel {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  inset-block-start: calc(100% + 4px);
  max-block-size: min(16rem, 50vh);
  overflow: auto;
  margin: 0;
  padding: 0.25rem 0;
  border: 1px solid var(--color-local-hero-muted);
  border-radius: var(--radius-local-hero-field);
  background-color: var(--color-bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 8%);
}

.contact-form__service-ms-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.contact-form__service-ms-list .gchoice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.contact-form__service-ms-list .gchoice:hover,
.contact-form__service-ms-list .gchoice:focus-within {
  background-color: rgb(197 34 51 / 12%);
}

.contact-form__service-ms-list input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.contact-form__service-ms-list input[type="checkbox"]:checked + label {
  font-weight: var(--fw-semibold, 600);
  color: var(--color-primary);
}

.contact-form__service-ms-list label {
  flex: 1;
  font-family: var(--font-body-alt);
  font-weight: var(--fw-medium);
  font-size: var(--fs-local-hero-label);
  line-height: var(--lh-local-hero-label);
  color: var(--color-text);
  cursor: pointer;
}

/* Local homepage hero loads this sheet without .contact-form wrapper */
.local-hero__form-panel .contact-form__field--service,
.local-hero__form-panel .gfield.contact-form__field--service,
.local-hero__form-panel .local-hero__field--service,
.local-hero__form-panel .gfield.contact-form__field--service-ms {
  align-items: flex-start;
}

.local-hero__form-panel .contact-form__field--service-ms .ginput_container,
.local-hero__form-panel .contact-form__field--service-ms .ginput_container_checkbox {
  margin-block: 0;
  padding: 0;
}

.contact-form .gform_wrapper .gfield--type-page {
  display: none;
}