/*
  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__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 .gform_fields {
  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; }

.contact-form--with-service .contact-form__field--location,
.contact-form--with-service .gfield.contact-form__field--location {
  grid-area: location !important;
}

.contact-form--shine-plus .contact-form__field--location .gfield_html:empty {
  display: none;
}

.contact-form--shine-plus .contact-form__location-line,
.contact-form--shine-plus .contact-form__location-line--inline {
  margin-block-start: var(--space-sm);
  font-family: var(--font-body-alt);
  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;
}

.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);
  /* Kit HTML keeps icons beside CSS; theme stores them under src/images/contact-form/. */
  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: #b30829;
}

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

.contact-form__submit-icon {
  flex-shrink: 0;
  inline-size: 0.875rem; /* 14px */
  block-size: 0.875rem;
  object-fit: contain;
}

/* Hide GF chrome we do not want in this block (keep validation copy visible). */
.contact-form .gform_heading,
.contact-form .gform_required_legend,
.contact-form .gfield_description:not(.validation_message):not(.gfield_validation_message) {
  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 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;
}

/* Estimate / contact forms (not only Shine+): neutral invalid field chrome in our grid. */
.contact-form:not(.contact-form--shine-plus) .gform_wrapper .gfield.gfield_error,
.contact-form:not(.contact-form--shine-plus) .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:not(.contact-form--shine-plus) .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:not(.contact-form--shine-plus) .gform_wrapper .gfield_error select,
.contact-form:not(.contact-form--shine-plus) .gform_wrapper .gfield_error textarea {
  border-color: var(--color-primary) !important;
}

/*
 * GF legacy (.gform_legacy_markup_wrapper) paints each invalid field with a
 * pink plate, top/bottom borders only, and extra label/input margins — looks
 * clipped in our two-column grid. Shine+ uses summary banner + inline messages.
 */
.contact-form--shine-plus .gform_wrapper li.gfield.gfield_error,
.contact-form--shine-plus .gform_wrapper li.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--shine-plus .gform_wrapper .top_label .gfield_error {
  inline-size: 100% !important;
  width: 100% !important;
}

.contact-form--shine-plus .gform_wrapper li.gfield.gfield_error.gfield_contains_required label.gfield_label,
.contact-form--shine-plus .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container,
.contact-form--shine-plus .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.gfield_description {
  margin-block-start: 0 !important;
  padding-inline: 0 !important;
  max-inline-size: 100%;
}

.contact-form--shine-plus .gform_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container {
  margin-block-start: var(--space-md) !important;
}

.contact-form--shine-plus .gform_wrapper .gfield_error .gfield_label,
.contact-form--shine-plus .gform_wrapper .gfield_error .gform-field-label {
  color: var(--color-primary);
}

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

/*
 * GF 2.5 "Gravity" theme uses .gravity-theme.
 * GF 2.10+ may render .gform-theme--no-framework / legacy markup (no .gravity-theme
 * on the wrapper). Orbital uses a 12-col grid with .gfield--width-full { span 12 }.
 * Scope all variants under .contact-form and force our named-area grid.
 */
.contact-form .gform_fields,
.contact-form .gform_wrapper .gform_fields,
.contact-form .gform_wrapper.gravity-theme .gform_fields,
.contact-form .gform_wrapper.gform-theme .gform_fields,
.contact-form .gform_wrapper.gform-theme--no-framework .gform_fields {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  inline-size: 100%;
}

.contact-form .gform_wrapper .gfield:not(.contact-form__field--notes),
.contact-form .gform_wrapper .gfield--width-full:not(.contact-form__field--notes) {
  grid-column: auto !important;
  min-inline-size: 0;
}

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

.contact-form .gform_wrapper .gfield_label,
.contact-form .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 {
  inline-size: 100%;
  max-inline-size: 100%;
  margin-block: 0;
}

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

.contact-form .gform_wrapper .ginput_container textarea {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: 8.75rem;
  margin: 0;
  padding: 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);
  resize: vertical;
}

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

  .contact-form__fields,
  .contact-form .gform_fields,
  .contact-form .gform_wrapper .gform_fields,
  .contact-form .gform_wrapper.gravity-theme .gform_fields,
  .contact-form .gform_wrapper.gform-theme .gform_fields,
  .contact-form .gform_wrapper.gform-theme--no-framework .gform_fields {
    /* Desktop pairing: name | contact | service + zip */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "first last"
      "phone email"
      "service zip";
    column-gap: var(--space-xl); /* 32px */
    inline-size: 100%;
    max-inline-size: var(--contact-form-fields-w);
    margin-inline: auto;
  }

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

/* ---------- Optional header + lead (Shine+ instance) ---------- */

.contact-form__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  inline-size: 100%;
}

/* Red plus accent on Shine+ — matches other Shine+ titles */
.contact-form__plus {
  color: var(--color-primary);
}

.contact-form__lead {
  display: none;
  margin: 0;
  max-inline-size: var(--contact-form-lead-max);
  font-family: var(--font-body-alt);
  font-weight: var(--fw-regular);
  font-size: var(--fs-hero-text);
  line-height: 1.5;
  text-align: center;
  color: var(--color-text-inverse);
}

.contact-form__textarea {
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 8.75rem; /* 140px — mobile notes field */
  margin: 0;
  padding: 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);
  resize: vertical;
}

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

/*
  Shine+ instance — Figma 237:637 (desktop) / 237:928 (mobile).
  Desktop is a dark plate with a white card. Mobile keeps the sparkle plate
  and stacks the same desktop fields.
*/
.contact-form--shine-plus .contact-form__fields,
.contact-form--shine-plus .gform_fields {
  grid-template-areas:
    "first"
    "last"
    "phone"
    "email"
    "zip"
    "notes";
}

.contact-form--shine-plus .contact-form__field--notes { grid-area: notes !important; }
.contact-form--shine-plus .contact-form__field--service { grid-area: service !important; }

/* Shine+ selects span the column (not the 231px estimate-form width) */
.contact-form--shine-plus .gform_wrapper .ginput_container select,
.contact-form--with-service .gform_wrapper .ginput_container select {
  inline-size: 100%;
  max-inline-size: 100%;
}

/*
 * Shine+ validation banner (all breakpoints). GF legacy / no-framework markup
 * centers the box and ships an empty .gform-icon (icon font not loaded).
 */
.contact-form--shine-plus .gform_wrapper .gform_validation_errors,
.contact-form--shine-plus .gform_wrapper [id^="gform_"][id$="_validation_container"] {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  position: static;
  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--shine-plus .gform_validation_errors > h2.gform_submission_error {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.625rem;
  margin: 0 0 var(--space-sm) !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;
}

/* GF icon span is empty without Orbital — draw circle exclamation in CSS */
.contact-form--shine-plus .gform_validation_errors > h2 .gform-icon {
  display: none !important;
}

.contact-form--shine-plus .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;
  margin-block-start: 0.0625rem;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  font-family: var(--font-body-alt);
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-primary);
}

.contact-form--shine-plus .gform_validation_errors ol {
  align-self: stretch;
  margin: 0;
  padding-inline-start: 1.25rem;
  font-family: var(--font-body-alt);
  font-size: var(--fs-local-hero-label);
  line-height: var(--lh-local-hero-label);
  color: var(--color-text);
  text-align: left;
  list-style-position: outside;
}

.contact-form--shine-plus .gform_validation_errors ol li {
  color: var(--color-text);
  text-align: left;
  list-style-type: disc !important;
}

.contact-form--shine-plus .gform_validation_errors a.gform_validation_error_link {
  color: var(--color-text);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.contact-form--shine-plus .gform_validation_errors a.gform_validation_error_link:hover,
.contact-form--shine-plus .gform_validation_errors a.gform_validation_error_link:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
}

@media (min-width: 1024px) {
  .contact-form__header {
    gap: var(--space-xl); /* 32px — title → lead (Figma 237:637) */
  }

  .contact-form__lead {
    display: block;
  }

  .contact-form__textarea {
    min-block-size: var(--contact-form-notes-h);
  }

  .contact-form--shine-plus {
    background-color: var(--color-text);
    border-block-end: 0;
  }

  /* Desktop Figma is a solid dark plate — hide the sparkle watermark */
  .contact-form--shine-plus .contact-form__bg {
    display: none;
  }

  .contact-form--shine-plus .contact-form__title {
    color: var(--color-text-inverse);
  }

  /* Wider white card — inner band must fit fields + card padding (not only --mega-content-max). */
  .contact-form--shine-plus .contact-form__inner {
    max-inline-size: min(
      var(--header-frame-max),
      calc(var(--contact-form-fields-w) + (var(--contact-form-card-pad) * 2) + (var(--header-pad-x) * 2))
    );
  }

  .contact-form--shine-plus .contact-form__form-wrap,
  .contact-form--shine-plus .gform_wrapper {
    align-self: stretch;
    inline-size: 100%;
    max-inline-size: 100%;
  }

  .contact-form--shine-plus .gform_body {
    max-inline-size: min(
      100%,
      calc(var(--contact-form-fields-w) + (var(--contact-form-card-pad) * 2))
    );
    margin-inline: auto;
  }

  .contact-form--shine-plus .contact-form__fields,
  .contact-form--shine-plus .gform_fields,
  .contact-form--shine-plus .gform_wrapper .gform_fields,
  .contact-form--shine-plus .gform_wrapper.gravity-theme .gform_fields,
  .contact-form--shine-plus .gform_wrapper.gform-theme .gform_fields,
  .contact-form--shine-plus .gform_wrapper.gform-theme--no-framework .gform_fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "first last"
      "phone email"
      "zip ."
      "notes notes";
  }

  .contact-form--shine-plus .gform_wrapper .gfield.contact-form__field--notes {
    grid-area: notes !important;
    grid-column: 1 / -1 !important;
  }

  .contact-form--shine-plus .gform_wrapper .gform_validation_errors,
  .contact-form--shine-plus .gform_wrapper [id^="gform_"][id$="_validation_container"] {
    max-inline-size: min(
      100%,
      calc(var(--contact-form-fields-w) + (var(--contact-form-card-pad) * 2))
    );
    margin-inline: auto;
  }
}

/* ---------- Shine+ form with an extra "service" row ---------- */
/*
  Modifier: contact-form--with-service (used together with contact-form--shine-plus).
  Adds "Which service(s) are you interested in?" — desktop: same row as Zip.
  Placed last in the file so it wins over the --shine-plus area maps (same specificity).
*/
.contact-form--with-service .contact-form__fields,
.contact-form--with-service .gform_fields {
  grid-template-areas:
    "first"
    "last"
    "phone"
    "email"
    "zip"
    "location"
    "service"
    "notes";
}

/* Base --service rule centers the field; here the select is full width, so left-align */
.contact-form--with-service .gfield.contact-form__field--service {
  align-items: flex-start;
}

/* --bp-lg: 1024px */
@media (min-width: 1024px) {
  .contact-form--with-service .contact-form__fields,
  .contact-form--with-service .gform_fields,
  .contact-form--with-service .gform_wrapper .gform_fields,
  .contact-form--with-service .gform_wrapper.gravity-theme .gform_fields,
  .contact-form--with-service .gform_wrapper.gform-theme .gform_fields,
  .contact-form--with-service .gform_wrapper.gform-theme--no-framework .gform_fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "first last"
      "phone email"
      "zip service"
      "location location"
      "notes notes";
  }

  /*
   * Keep Additional Notes full width after failed validation (GF Orbital / .gfield_error).
   * Placed after area maps; beats theme grid-column resets on error re-render.
   */
  .contact-form--shine-plus .gform_wrapper .gform_fields .gfield.contact-form__field--notes,
  .contact-form--with-service .gform_wrapper .gform_fields .gfield.contact-form__field--notes,
  .contact-form--shine-plus .gform_wrapper.gform_validation_error .gfield.contact-form__field--notes {
    grid-area: notes !important;
    grid-column: 1 / -1 !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }

  .contact-form--shine-plus .gform_wrapper .gfield.contact-form__field--notes .ginput_container,
  .contact-form--shine-plus .gform_wrapper .gfield.contact-form__field--notes .ginput_container_textarea,
  .contact-form--shine-plus .gform_wrapper .gfield.contact-form__field--notes textarea {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
  }

  /* Honeypot / validation banner nodes must not consume a single grid column. */
  .contact-form--shine-plus .gform_wrapper .gform_fields > :not(.gfield) {
    grid-column: 1 / -1 !important;
  }
}

/* ---------- Residential Shine+ — Property Type (commercial unchanged) ---------- */
.contact-form--with-property .contact-form__field--property { grid-area: property !important; }

.contact-form--with-property.contact-form--with-service .contact-form__fields,
.contact-form--with-property.contact-form--with-service .gform_fields {
  /*
   * Residential Shine+ form no longer has a Service field.
   * Property Type now follows Zip Code directly (mobile stacks in this order).
   */
  grid-template-areas:
    "first"
    "last"
    "phone"
    "email"
    "zip"
    "property"
    "location"
    "notes";
}

.contact-form--with-property .gfield.contact-form__field--property {
  align-items: flex-start;
}

@media (min-width: 1024px) {
  .contact-form--with-property.contact-form--with-service .contact-form__fields,
  .contact-form--with-property.contact-form--with-service .gform_fields,
  .contact-form--with-property.contact-form--with-service .gform_wrapper .gform_fields,
  .contact-form--with-property.contact-form--with-service .gform_wrapper.gravity-theme .gform_fields,
  .contact-form--with-property.contact-form--with-service .gform_wrapper.gform-theme .gform_fields,
  .contact-form--with-property.contact-form--with-service .gform_wrapper.gform-theme--no-framework .gform_fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    /* Desktop: Property Type sits in the right column next to Zip Code. */
    grid-template-areas:
      "first last"
      "phone email"
      "zip property"
      "location location"
      "notes notes";
  }

  /* Half width (was full width with grid-column: 1 / -1). */
  .contact-form--with-property .gform_wrapper .gfield.contact-form__field--property {
    grid-area: property !important;
  }
}

/*
  Shine+ inquiry — Figma 237:637 / 237:928.
  White pill submit on the dark plate; bordered inputs inside the white card.
*/
.contact-form--shine-plus .contact-form__submit,
.contact-form--shine-plus .gform_button,
.contact-form--shine-plus .gform_footer input[type="submit"],
.contact-form--shine-plus .gform_footer button[type="submit"] {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  border: 0 !important;
}

.contact-form--shine-plus .contact-form__submit-text {
  color: var(--color-text);
}

.contact-form--shine-plus .contact-form__submit:hover,
.contact-form--shine-plus .gform_button:hover,
.contact-form--shine-plus .gform_footer input[type="submit"]:hover,
.contact-form--shine-plus .gform_footer button[type="submit"]:hover {
  background-color: var(--color-bg) !important;
  border-color: transparent !important;
  opacity: 0.92;
}

.contact-form--shine-plus .contact-form__submit:focus-visible,
.contact-form--shine-plus .gform_button:focus-visible,
.contact-form--shine-plus .gform_footer input[type="submit"]:focus-visible,
.contact-form--shine-plus .gform_footer button[type="submit"]:focus-visible {
  outline-color: var(--color-text-inverse);
}

/* Beat GF Orbital theme resets on inputs inside the white card */
.contact-form--shine-plus .gform_wrapper .ginput_container input[type="text"],
.contact-form--shine-plus .gform_wrapper .ginput_container input[type="email"],
.contact-form--shine-plus .gform_wrapper .ginput_container input[type="tel"],
.contact-form--shine-plus .gform_wrapper .ginput_container select,
.contact-form--shine-plus .gform_wrapper .ginput_container textarea,
.contact-form--shine-plus .gform_wrapper .ginput_container_textarea textarea {
  border: 1px solid var(--color-local-hero-muted, #a1a1a1) !important;
  border-radius: var(--radius-local-hero-field, 0.5rem) !important;
  background-color: var(--color-bg) !important;
  block-size: auto;
  min-block-size: var(--contact-form-field-h);
}

.contact-form--shine-plus .gform_wrapper .ginput_container textarea,
.contact-form--shine-plus .gform_wrapper .ginput_container_textarea textarea {
  min-block-size: var(--contact-form-notes-h, 8.75rem);
  block-size: auto;
  padding: 0.75rem !important;
}

.contact-form--shine-plus .gform_wrapper .gfield_label,
.contact-form--shine-plus .gform_wrapper .gform-field-label {
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

/* ---------- Shine+ AJAX success — hide intro, show thank-you band only ---------- */

/* :has() hides intro as soon as GF injects confirmation (no JS timing gap). */
.contact-form--shine-plus:has(.contact-success--inline) .contact-form__header,
.contact-form--shine-plus:has([id^="gform_confirmation_wrapper_"]) .contact-form__header,
.contact-form--shine-plus.contact-form--submitted .contact-form__header {
  display: none;
}

.contact-form--shine-plus.contact-form--submitted .contact-form__form-wrap,
.contact-form--shine-plus.contact-form--submitted .gform_wrapper {
  inline-size: 100%;
  max-inline-size: 100%;
}

.contact-form--shine-plus .gform_confirmation_wrapper {
  inline-size: 100%;
  max-inline-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.contact-form--shine-plus .gform_confirmation_wrapper .gform_confirmation_message {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}