/* Color Variables — reuse the site palette; edit these aliases for form-only colors. */
:root {
  --contact-error: #a32620;
  --contact-error-background: #fff2f1;
  --contact-success: #157333;
  --contact-success-background: #eef9f0;
  --contact-focus-ring: rgb(8 105 237 / 16%);
}

/* Additional styles only: the supplied contact-form-template stays unchanged. */
.contact-section { padding: 80px 0; background: var(--color-soft); }
.contact-layout { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 64px; align-items: start; }
.contact-introduction { padding-top: 32px; }
.contact-introduction h2 { max-width: 460px; margin: 14px 0 22px; font-size: 42px; line-height: 1.14; }
.contact-introduction > p:last-of-type { max-width: 400px; font-size: 19px; line-height: 1.65; }
.contact-service-area { display: flex; align-items: flex-start; gap: 14px; margin-top: 34px; padding-top: 28px; border-top: 1px solid var(--color-decoration); }
.contact-service-area .icon { color: var(--color-blue); width: 28px; height: 28px; }
.contact-service-area h3 { font-size: 18px; line-height: 1.5; }
.contact-service-area p { margin-top: 5px; font-size: 16px; line-height: 1.6; }
.contact-page-intro { padding: 42px 0 38px; background: var(--color-soft); }
.contact-page-intro h1 { margin-top: 26px; font-size: 56px; line-height: 1.1; }
.contact-page-intro + .contact-section { padding-top: 0; }
.contact-layout .nap-contact-form {
  --contact-form-text: var(--color-ink);
  --contact-form-muted: var(--color-copy);
  --contact-form-placeholder: var(--color-copy);
  --contact-form-input: var(--color-soft);
  --contact-form-primary: var(--color-green-dark);
  --contact-form-primary-hover: var(--color-green-hover);
  --contact-form-primary-border: var(--color-blue);
  --contact-form-border: var(--color-decoration);
  --contact-form-shadow: var(--shadow-card);
  --contact-form-radius: var(--radius-card);
  --contact-form-blur: none;
  padding: 32px;
  font: 400 16px/1.5 var(--font-body);
  background: var(--color-card) !important;
  scroll-margin-top: 24px;
}
.contact-layout .nap-contact-form__title { font-size: 26px; line-height: 1.4; padding-top: 7px; margin-bottom: 26px; }
.contact-layout .nap-contact-form__form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.contact-layout .nap-contact-form__form > .nap_cf_customer_email { grid-column: 1 / -1; }
.contact-layout .nap-contact-form label { font-size: 13px; line-height: 1.4; letter-spacing: .025em; }
.contact-layout .nap-contact-form label span { color: var(--contact-error); }
.contact-layout .nap-contact-form input,
.contact-layout .nap-contact-form textarea,
.contact-layout .nap-contact-form button { font-family: var(--font-body); }
.contact-layout .nap-contact-form input,
.contact-layout .nap-contact-form textarea { font-size: 16px; transition: border-color var(--transition), box-shadow var(--transition); }
.contact-layout .nap-contact-form input { min-height: 52px; }
.contact-layout .nap-contact-form textarea { min-height: 144px; }
/* Higher specificity and !important override the vendor's inline-priority focus rules. */
.contact-layout .nap-contact-form input:focus,
.contact-layout .nap-contact-form textarea:focus { border-color: var(--color-blue) !important; box-shadow: 0 0 0 4px var(--contact-focus-ring) !important; }
.contact-layout .nap-contact-form :is(input,textarea,button):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.contact-layout .nap-contact-form__captcha-refresh { min-height: 44px; color: var(--color-blue) !important; font-size: 14px; }
.contact-layout .nap-contact-form__captcha-refresh:hover,
.contact-layout .nap-contact-form__captcha-refresh:focus-visible { color: var(--color-blue-hover) !important; }
.contact-layout .nap-contact-form #submitter { min-height: 52px; font-size: 18px; text-transform: none; color: var(--color-white) !important; box-shadow: var(--shadow-green); }
.contact-layout .nap-contact-form #submitter:hover,
.contact-layout .nap-contact-form #submitter:focus-visible { box-shadow: var(--shadow-green); transform: translateY(-2px); }
.contact-layout .nap-contact-form #submitter:disabled { transform: none; }
.contact-layout .nap-contact-form__message { overflow-wrap: anywhere; }
.contact-layout .nap-contact-form__message .success { color: var(--contact-success); background: var(--contact-success-background); border-color: var(--contact-success); }
.contact-layout .nap-contact-form__message .error { color: var(--contact-error); background: var(--contact-error-background); border-color: var(--contact-error); }
@media (min-width: 768px) and (max-width: 1099px) {
  .contact-layout { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 28px; }
  .contact-introduction h2 { font-size: 32px; }
  .contact-layout .nap-contact-form { padding: 24px; }
  .contact-layout .nap-contact-form__form > .nap_cf_customer_name { grid-column: 1; }
  .contact-layout .nap-contact-form__form > .nap_cf_phone_cf { grid-column: 2; }
}
@media (max-width: 767px) {
  .contact-section { padding: 44px 0; }
  .contact-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .contact-introduction { padding-top: 0; }
  .contact-introduction h2 { font-size: 32px; margin-bottom: 16px; }
  .contact-introduction > p:last-of-type { font-size: 17px; }
  .contact-service-area { margin-top: 24px; padding-top: 20px; }
  .contact-layout .nap-contact-form { padding: 22px 18px; }
  .contact-layout .nap-contact-form__form { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .contact-layout .nap-contact-form__title { font-size: 24px; }
  .contact-page-intro { padding: 28px 0 32px; }
  .contact-page-intro h1 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-layout .nap-contact-form :is(input,textarea,button) { transition: none; }
  .contact-layout .nap-contact-form #submitter:hover { transform: none; }
}
.contact-page .final-cta { margin-top: 0; }