/* ==========================================================================
   PIE Builders & Developers — Contact form section
   Introduction and benefits on the left; the architectural photo fills the
   centre/right behind a chevron-shaped edge with a pale gold divider; the
   form card floats over the photo on the right.
   Below 1024px everything stacks: introduction, photo, benefits, form.

   Elementor widget copy of html/css/contact-form.css. Every selector is
   prefixed with the widget root .buildero-contact-form (the <section>), so
   Elementor Site Settings cannot restyle it and these rules never reach other
   widgets or other forms on the site.

   The form is Contact Form 7 markup (section "Form: Contact Form 7"):
   - any CF7 form gets the original field, button and message styles;
   - forms built from the widget's template (.buildero-cf-* classes) also get
     the floating labels, field icons and two-column rows of the design.
   Form rules are scoped to the card, which also outranks Elementor kit
   rules such as ".elementor-kit-1 input:not([type=submit])".
   ========================================================================== */

.buildero-contact-form {
  /* Palette */
  --contact-form-ivory: #FAF7F1;
  --contact-form-white: #FFFEFC;
  --contact-form-field: #FFFFFF;
  --contact-form-ink: #171C22;
  --contact-form-gold: #C78312;
  --contact-form-gold-dark: #A96708;
  --contact-form-body: #69788D;
  --contact-form-border: #E8DDCE;
  --contact-form-icon-bg: #F5EBDD;
  --contact-form-error: #A8321F;

  /* Typography */
  --contact-form-font-display: "Playfair Display", "DM Serif Display", Georgia, "Times New Roman", serif;
  --contact-form-font-body: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* Layout */
  --contact-form-pad-left: clamp(20px, 7.3vw, 150px);
  --contact-form-pad-right: clamp(20px, 5vw, 100px);
  --contact-form-card-width: clamp(480px, 30.5vw, 620px);
  --contact-form-field-height: 50px;
  --contact-form-focal: 38% 50%;

  /* Photo edge: x positions (% of the section) of the chevron's top,
     point (at 42% height) and bottom; the divider sits just left of it */
  --contact-form-edge-top: 38;
  --contact-form-edge-point: 44;
  --contact-form-edge-bottom: 33.5;
  --contact-form-edge-band: 2.4;
  --contact-form-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Icons (Lucide 0.468.0) used as CSS masks in the CF7 form */
  --contact-form-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --contact-form-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");

  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--contact-form-ivory);
  color: var(--contact-form-body);
  font-family: var(--contact-form-font-body);
  /* Text without its own line-height uses the browser default, as in the
     static page, so theme or Elementor body styles cannot shift the layout. */
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

.buildero-contact-form *,
.buildero-contact-form *::before,
.buildero-contact-form *::after {
  box-sizing: border-box;
}

/* Zero-specificity reset so component classes can set their own margins. */
.buildero-contact-form :where(p, h1, h2, h3, h4, ul) {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Background: line art, photo, divider
   -------------------------------------------------------------------------- */
.buildero-contact-form .contact-form-section__lineart {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.buildero-contact-form .contact-form-section__lineart-img {
  position: absolute;
  bottom: -2%;
  left: clamp(-160px, -7vw, -60px);
  display: block;
  width: clamp(280px, 24vw, 460px);
  max-width: none;
  height: auto;
  opacity: 0.1;
  transform: scaleX(-1);
}

/* The photo layer: chevron-shaped left edge pointing into the text column;
   the divider is the same edge pushed left, in pale gold */
.buildero-contact-form .contact-form-section__visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.buildero-contact-form .contact-form-section__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: polygon(
    calc(var(--contact-form-edge-top) * 1%) 0%,
    100% 0%,
    100% 100%,
    calc(var(--contact-form-edge-bottom) * 1%) 100%,
    calc(var(--contact-form-edge-point) * 1%) 42%
  );
}

.buildero-contact-form .contact-form-section__media-inner {
  position: absolute;
  inset: 0 0 0 calc((var(--contact-form-edge-bottom) - var(--contact-form-edge-band)) * 1%);
  overflow: hidden;
  background: #2E2A24;
}

.buildero-contact-form .contact-form-section__image {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: var(--contact-form-focal, 50% 50%);
}

.buildero-contact-form .contact-form-section__divider {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(232, 205, 160, 0.75) 0%, rgba(214, 170, 92, 0.45) 100%);
  clip-path: polygon(
    calc((var(--contact-form-edge-top) - var(--contact-form-edge-band)) * 1%) 0%,
    calc(var(--contact-form-edge-top) * 1%) 0%,
    calc(var(--contact-form-edge-point) * 1%) 42%,
    calc(var(--contact-form-edge-bottom) * 1%) 100%,
    calc((var(--contact-form-edge-bottom) - var(--contact-form-edge-band)) * 1%) 100%,
    calc((var(--contact-form-edge-point) - var(--contact-form-edge-band)) * 1%) 42%
  );
}

@supports not (clip-path: polygon(0 0, 100% 0, 100% 100%)) {
  .buildero-contact-form .contact-form-section__media-inner {
    left: 44%;
  }

  .buildero-contact-form .contact-form-section__divider {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.buildero-contact-form .contact-form-section__container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--contact-form-card-width);
  align-items: center;
  column-gap: clamp(32px, 4vw, 80px);
  max-width: 1920px;
  margin-inline: auto;
  padding: var(--contact-form-pad-block, clamp(48px, 3.2vw, 64px)) var(--contact-form-pad-right) var(--contact-form-pad-block, clamp(48px, 3.2vw, 64px)) var(--contact-form-pad-left);
}

.buildero-contact-form .contact-form-section__content {
  max-width: 680px;
}

/* --------------------------------------------------------------------------
   Introduction
   -------------------------------------------------------------------------- */
.buildero-contact-form .contact-form-section__line {
  display: block;
  width: clamp(48px, 3.2vw, 62px);
  height: 2px;
  margin-bottom: clamp(16px, 1.4vw, 26px);
  background: var(--contact-form-gold);
  transform-origin: left center;
}

.buildero-contact-form .contact-form-section__eyebrow {
  margin: 0;
  color: #5D6A7C;
  font-size: clamp(12px, 0.8vw, 15px);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.buildero-contact-form .contact-form-section__title {
  margin: clamp(14px, 1.4vw, 26px) 0 0;
  color: var(--contact-form-ink);
  font-family: var(--contact-form-font-display);
  font-size: clamp(34px, 3.1vw, 62px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

/* Each line is a mask for its own upward reveal */
.buildero-contact-form .contact-form-section__title-line {
  display: block;
  overflow: hidden;
  padding-block: 0.03em 0.1em;
}

.buildero-contact-form .contact-form-section__title-text {
  display: block;
}

.buildero-contact-form .contact-form-section__title-line--accent {
  color: var(--contact-form-gold);
}

.buildero-contact-form .contact-form-section__description {
  max-width: 30em;
  margin: clamp(10px, 0.9vw, 16px) 0 0;
  font-size: clamp(16px, 1.05vw, 20px);
  line-height: 1.5;
  text-wrap: pretty;
}

.buildero-contact-form .contact-form-section__rule {
  display: block;
  width: 26px;
  height: 2px;
  margin-top: clamp(14px, 1.2vw, 22px);
  background: var(--contact-form-gold);
  transform-origin: left center;
}

/* Benefits */
.buildero-contact-form .contact-form-section__benefits {
  display: grid;
  gap: clamp(16px, 1.5vw, 28px);
  margin: clamp(16px, 1.4vw, 24px) 0 0;
  padding: 0;
  list-style: none;
}

.buildero-contact-form .contact-form-section__benefit {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(18px, 1.8vw, 34px);
}

.buildero-contact-form .contact-form-section__benefit-icon {
  display: grid;
  place-items: center;
  width: clamp(60px, 4vw, 80px);
  height: clamp(60px, 4vw, 80px);
  border-radius: 50%;
  background: var(--contact-form-icon-bg);
  color: var(--contact-form-gold-dark);
}

.buildero-contact-form .contact-form-section__benefit-icon svg {
  width: 46%;
  height: 46%;
  stroke-width: 1.5;
}

/* Icons chosen from Elementor's icon library */
.buildero-contact-form .contact-form-section__benefit-icon i {
  display: block;
  font-size: clamp(24px, 1.7vw, 34px);
  line-height: 1;
}

.buildero-contact-form .contact-form-section__benefit-icon svg:not(.lucide) {
  fill: currentColor;
}

.buildero-contact-form .contact-form-section__benefit-title {
  margin: 0;
  color: var(--contact-form-ink);
  font-family: var(--contact-form-font-display);
  font-size: clamp(18px, 1.12vw, 22px);
  font-weight: 600;
  line-height: 1.25;
}

.buildero-contact-form .contact-form-section__benefit-text {
  max-width: 21em;
  margin: 6px 0 0;
  font-size: clamp(14px, 0.88vw, 17px);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Form card
   -------------------------------------------------------------------------- */
.buildero-contact-form .contact-form-section__card {
  padding: clamp(26px, 2.3vw, 46px);
  border: 1px solid rgba(232, 221, 206, 0.9);
  background: var(--contact-form-white);
  box-shadow: 0 24px 60px rgba(23, 28, 34, 0.18);
}

.buildero-contact-form .contact-form-section__card-line {
  display: block;
  width: 52px;
  height: 2px;
  background: var(--contact-form-gold);
}

.buildero-contact-form .contact-form-section__card-title {
  margin: 14px 0 0;
  color: var(--contact-form-ink);
  font-family: var(--contact-form-font-display);
  font-size: clamp(26px, 1.85vw, 36px);
  font-weight: 700;
  line-height: 1.15;
}

.buildero-contact-form .contact-form-section__card-title:first-child {
  margin-top: 0;
}

.buildero-contact-form .contact-form-section__card-title span {
  color: var(--contact-form-gold);
}

.buildero-contact-form .contact-form-section__card-text {
  margin: 10px 0 0;
  font-size: clamp(14px, 0.85vw, 16px);
  line-height: 1.55;
}

.buildero-contact-form .contact-form-section__form {
  margin-top: clamp(20px, 1.6vw, 28px);
}

.buildero-contact-form .contact-form-section__form:first-child {
  margin-top: 0;
}

/* Privacy note (widget setting, below the form) */
.buildero-contact-form .contact-form-section__privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 13.5px;
  text-align: center;
}

.buildero-contact-form .contact-form-section__privacy-icon {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--contact-form-gold-dark);
}

/* Administrator notice (no form selected, form missing, CF7 inactive).
   Shown in the editor and to logged-in editors only. */
.buildero-contact-form .contact-form-section__notice {
  padding: 14px 16px;
  border: 1px dashed var(--contact-form-gold);
  background: #FBF3E4;
  color: var(--contact-form-ink);
  font-size: 14px;
  line-height: 1.5;
}

/* Without a form (visitors, when none is available) the content column
   takes the full width. */
@media (min-width: 1024px) {
  .buildero-contact-form.contact-form-section--no-card .contact-form-section__container {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Form: Contact Form 7
   CF7 markup: div.wpcf7 > form.wpcf7-form > (template HTML), with each
   control in span.wpcf7-form-control-wrap; invalid controls get
   .wpcf7-not-valid plus a span.wpcf7-not-valid-tip; the form's state is a
   class on the <form> (init, submitting, invalid, sent, failed, spam ...).
   -------------------------------------------------------------------------- */

/* CF7's own visually-hidden helpers, in case its stylesheet is disabled */
.buildero-contact-form .wpcf7 .hidden-fields-container {
  display: none;
}

.buildero-contact-form .wpcf7 .screen-reader-response {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
}

.buildero-contact-form .contact-form-section__card .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

/* CF7's autop (forms not built from the widget template) */
.buildero-contact-form .contact-form-section__card .wpcf7-form p {
  margin: 0;
}

.buildero-contact-form .contact-form-section__card .wpcf7-form-control-wrap {
  position: relative;
  display: block;
}

/* Generic labels: label text above the control */
.buildero-contact-form .contact-form-section__card .wpcf7-form label {
  display: block;
  color: var(--contact-form-ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.buildero-contact-form .contact-form-section__card .wpcf7-form label > br {
  display: none;
}

.buildero-contact-form .contact-form-section__card .wpcf7-form label > .wpcf7-form-control-wrap {
  margin-top: 6px;
}

/* Controls */
.buildero-contact-form .contact-form-section__card .wpcf7 :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="hidden"], [type="file"], [type="range"], [type="color"]), select, textarea) {
  display: block;
  width: 100%;
  max-width: none;
  height: var(--contact-form-field-height);
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--contact-form-border);
  border-radius: 2px;
  background: var(--contact-form-field);
  box-shadow: none;
  color: var(--contact-form-ink);
  font: 500 15px/1.4 var(--contact-form-font-body);
  letter-spacing: normal;
  text-transform: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  appearance: none;
}

.buildero-contact-form .contact-form-section__card .wpcf7 :is(input, select, textarea):hover {
  border-color: #D9C8AE;
}

.buildero-contact-form .contact-form-section__card .wpcf7 :is(input, select, textarea):focus {
  border-color: var(--contact-form-gold);
  outline: none;
  box-shadow: 0 0 0 3px rgba(199, 131, 18, 0.18);
}

.buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-form textarea {
  height: auto;
  min-height: 92px;
  padding-top: 13px;
  padding-bottom: 12px;
  line-height: 1.5;
  resize: vertical;
}

.buildero-contact-form .contact-form-section__card .wpcf7 textarea::placeholder,
.buildero-contact-form .contact-form-section__card .wpcf7 input::placeholder {
  color: #8E99A8;
  opacity: 1;
}

/* Selects: drawn arrow instead of the native one */
.buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-form select {
  padding-right: 42px;
  background-image: none;
  cursor: pointer;
}

.buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-form select option {
  color: var(--contact-form-ink);
}

.buildero-contact-form .contact-form-section__card .wpcf7-form-control-wrap:has(> select:not([multiple]))::after {
  content: "";
  position: absolute;
  top: calc(var(--contact-form-field-height) / 2);
  right: 16px;
  width: 18px;
  height: 18px;
  background: var(--contact-form-ink);
  pointer-events: none;
  transform: translateY(-50%);
  -webkit-mask: var(--contact-form-chevron-down) center / contain no-repeat;
  mask: var(--contact-form-chevron-down) center / contain no-repeat;
}

.buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-form select[multiple] {
  height: auto;
  padding-block: 8px;
}

/* Checkboxes, radio buttons, acceptance */
.buildero-contact-form .contact-form-section__card .wpcf7-list-item {
  display: inline-block;
  margin: 0 18px 4px 0;
}

.buildero-contact-form .contact-form-section__card .wpcf7-list-item label {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--contact-form-body);
  font-weight: 500;
  cursor: pointer;
}

.buildero-contact-form .contact-form-section__card .wpcf7 :is(input[type="checkbox"], input[type="radio"]) {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--contact-form-gold);
  cursor: pointer;
}

.buildero-contact-form .contact-form-section__card .wpcf7-list-item-label::before,
.buildero-contact-form .contact-form-section__card .wpcf7-list-item-label::after {
  content: none;
}

/* Errors */
.buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-form .wpcf7-not-valid {
  border-color: var(--contact-form-error);
}

.buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-form .wpcf7-not-valid:focus {
  box-shadow: 0 0 0 3px rgba(168, 50, 31, 0.16);
}

.buildero-contact-form .contact-form-section__card .wpcf7-not-valid-tip {
  display: block;
  margin: 6px 0 0 2px;
  color: var(--contact-form-error);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.4;
}

/* Submit (<input type="submit"> or the template's <button>) */
.buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  height: auto;
  margin: 4px 0 0;
  padding: 0 20px;
  border: 0;
  border-radius: 2px;
  background: var(--contact-form-gold);
  box-shadow: none;
  color: #FFFFFF;
  font: 700 14px/1 var(--contact-form-font-body);
  letter-spacing: 0.22em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: normal;
  cursor: pointer;
  transition: background-color 0.3s var(--contact-form-ease), opacity 0.3s ease;
  appearance: none;
}

.buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-submit:hover {
  background: var(--contact-form-gold-dark);
  color: #FFFFFF;
}

.buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-submit:focus-visible {
  outline: 2px solid var(--contact-form-ink);
  outline-offset: 3px;
}

.buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.buildero-contact-form .contact-form-section__card .buildero-cf-submit-icon {
  flex: none;
  width: 18px;
  height: 18px;
  background: currentColor;
  transition: transform 0.3s var(--contact-form-ease);
  -webkit-mask: var(--contact-form-arrow-right) center / contain no-repeat;
  mask: var(--contact-form-arrow-right) center / contain no-repeat;
}

.buildero-contact-form .contact-form-section__card .wpcf7-submit:hover .buildero-cf-submit-icon {
  transform: translateX(4px);
}

/* Submitting: dimmed button (as aria-busy in the original) with CF7's
   spinner over its right end instead of on a line of its own */
.buildero-contact-form .contact-form-section__card .wpcf7-form.submitting .wpcf7-submit {
  opacity: 0.7;
  cursor: progress;
}

.buildero-contact-form .contact-form-section__card .wpcf7-form :has(> .wpcf7-spinner) {
  position: relative;
}

.buildero-contact-form .contact-form-section__card .wpcf7-form :not(form) > .wpcf7-spinner {
  position: absolute;
  top: calc(50% + 2px);
  right: 14px;
  width: 22px;
  height: 22px;
  margin: 0;
  background-color: rgba(23, 28, 34, 0.55);
  transform: translateY(-50%);
}

.buildero-contact-form .contact-form-section__card .wpcf7-form > .wpcf7-spinner {
  display: none;
  align-self: center;
  margin: 0;
}

.buildero-contact-form .contact-form-section__card .wpcf7-form.submitting > .wpcf7-spinner {
  display: block;
}

/* Response message (the original status box) */
.buildero-contact-form .contact-form-section__card .wpcf7 form .wpcf7-response-output {
  margin: 0;
  padding: 12px 14px;
  border: 0;
  border-left: 3px solid var(--contact-form-gold);
  background: #FBF3E4;
  color: var(--contact-form-ink);
  font-size: 14px;
  line-height: 1.5;
}

.buildero-contact-form .contact-form-section__card .wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
  border-left-color: var(--contact-form-error);
  background: #FBEDEA;
}

.buildero-contact-form .contact-form-section__card .wpcf7 form:is(.init, .resetting, .submitting) .wpcf7-response-output,
.buildero-contact-form .contact-form-section__card .wpcf7 form .wpcf7-response-output:empty {
  display: none;
}

/* Template rows: two fields side by side */
.buildero-contact-form .contact-form-section__card .buildero-cf-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.buildero-contact-form .contact-form-section__card .buildero-cf-actions {
  position: relative;
}

/* --------------------------------------------------------------------------
   Template fields: <label class="buildero-cf-field" data-icon="…">
   <span class="buildero-cf-label">…</span>[cf7 tag]</label>
   Icon + control + label inside the box. Without JavaScript the label sits
   on the top border; contact-form.js adds .has-float-labels to the card and
   .is-filled to fields with a value, and the label then rests inside empty
   fields and floats onto the border on focus or once there is a value.
   -------------------------------------------------------------------------- */
.buildero-contact-form .contact-form-section__card .buildero-cf-field {
  position: relative;
  display: block;
  min-width: 0;
  font-weight: 400;
}

.buildero-contact-form .contact-form-section__card .wpcf7-form .buildero-cf-field > .wpcf7-form-control-wrap {
  margin: 0;
}

.buildero-contact-form .contact-form-section__card .buildero-cf-field[data-icon] :is(input, select, textarea) {
  padding-left: 46px;
}

.buildero-contact-form .contact-form-section__card .buildero-cf-field[data-icon]::before {
  content: "";
  position: absolute;
  top: calc(var(--contact-form-field-height) / 2);
  left: 16px;
  z-index: 1;
  width: 18px;
  height: 18px;
  background: var(--contact-form-gold-dark);
  pointer-events: none;
  transform: translateY(-50%);
  -webkit-mask: var(--contact-form-icon, none) center / contain no-repeat;
  mask: var(--contact-form-icon, none) center / contain no-repeat;
}

/* Floated (default): on the top border */
.buildero-contact-form .contact-form-section__card .buildero-cf-label {
  position: absolute;
  top: 0;
  left: 46px;
  z-index: 2;
  max-width: calc(100% - 60px);
  overflow: hidden;
  padding: 0 4px;
  background: var(--contact-form-field);
  color: var(--contact-form-gold-dark);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

.buildero-contact-form .contact-form-section__card .buildero-cf-field:not([data-icon]) .buildero-cf-label {
  left: 16px;
}

/* Resting: inside the empty, unfocused field */
.buildero-contact-form .contact-form-section__card.has-float-labels .buildero-cf-field:not(.is-filled):not(:focus-within) .buildero-cf-label {
  top: calc(var(--contact-form-field-height) / 2);
  background: transparent;
  color: var(--contact-form-body);
  font-size: 14.5px;
  font-weight: 400;
}

/* Browser autofill sets values without input events (separate rule: an
   unsupported pseudo-class only drops this one) */
.buildero-contact-form .contact-form-section__card.has-float-labels .buildero-cf-field:has(:-webkit-autofill) .buildero-cf-label {
  top: 0;
  background: var(--contact-form-field);
  color: var(--contact-form-gold-dark);
  font-size: 11.5px;
  font-weight: 600;
}

/* Selects: the empty option's text stays hidden under the label until the
   field is focused */
.buildero-contact-form .contact-form-section__card.has-float-labels .buildero-cf-field--select:not(.is-filled):not(:focus-within) select {
  color: transparent;
}

/* Textarea: label and icon at the top; the hint shows once focused */
.buildero-contact-form .contact-form-section__card .wpcf7 .buildero-cf-field--textarea textarea {
  padding-top: 15px;
}

.buildero-contact-form .contact-form-section__card .buildero-cf-field--textarea::before,
.buildero-contact-form .contact-form-section__card.has-float-labels .buildero-cf-field--textarea:not(.is-filled):not(:focus-within) .buildero-cf-label {
  top: 25px;
}

.buildero-contact-form .contact-form-section__card.has-float-labels .buildero-cf-field--textarea textarea::placeholder {
  color: transparent;
}

.buildero-contact-form .contact-form-section__card.has-float-labels .buildero-cf-field--textarea textarea:focus::placeholder {
  color: #8E99A8;
}

/* Invalid template field: red label */
.buildero-contact-form .contact-form-section__card .buildero-cf-field:has(.wpcf7-not-valid) .buildero-cf-label,
.buildero-contact-form .contact-form-section__card.has-float-labels .buildero-cf-field:has(.wpcf7-not-valid):not(.is-filled):not(:focus-within) .buildero-cf-label {
  color: var(--contact-form-error);
}

/* Field icons (data-icon values) */
.buildero-contact-form .buildero-cf-field[data-icon="user"] {
  --contact-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.buildero-contact-form .buildero-cf-field[data-icon="mail"] {
  --contact-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

.buildero-contact-form .buildero-cf-field[data-icon="phone"] {
  --contact-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.buildero-contact-form .buildero-cf-field[data-icon="square-check"] {
  --contact-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

.buildero-contact-form .buildero-cf-field[data-icon="map-pin"] {
  --contact-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.buildero-contact-form .buildero-cf-field[data-icon="coins"] {
  --contact-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M18.09 10.37A6 6 0 1 1 10.34 18'/%3E%3Cpath d='M7 6h1v4'/%3E%3Cpath d='m16.71 13.88.7.71-2.82 2.82'/%3E%3C/svg%3E");
}

.buildero-contact-form .buildero-cf-field[data-icon="file-text"] {
  --contact-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

.buildero-contact-form .buildero-cf-field[data-icon="calendar"] {
  --contact-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E");
}

.buildero-contact-form .buildero-cf-field[data-icon="building-2"] {
  --contact-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
}

.buildero-contact-form .buildero-cf-field[data-icon="house"] {
  --contact-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

.buildero-contact-form .buildero-cf-field[data-icon="message-square-text"] {
  --contact-form-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M13 8H7'/%3E%3Cpath d='M17 12H7'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Entrance-animation guard
   Hidden only while JS is running (html.pie-js) until contact-form.js has
   set the animation start states. The failsafe shows everything if it never
   runs.
   -------------------------------------------------------------------------- */
.pie-js .buildero-contact-form:not(.is-ready) [data-contact-form-reveal],
.pie-js .buildero-contact-form:not(.is-ready) [data-contact-form-line],
.pie-js .buildero-contact-form:not(.is-ready) [data-contact-form-benefit],
.pie-js .buildero-contact-form:not(.is-ready) [data-contact-form-visual],
.pie-js .buildero-contact-form:not(.is-ready) [data-contact-form-card] {
  opacity: 0;
  animation: contact-form-failsafe 0.4s ease 2.5s forwards;
}

@keyframes contact-form-failsafe {
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Laptops: the text column takes more of the width, so the photo edge
   moves right */
@media (max-width: 1439px) {
  .buildero-contact-form {
    --contact-form-edge-top: 42;
    --contact-form-edge-point: 48;
    --contact-form-edge-bottom: 38;
  }

  .buildero-contact-form .contact-form-section__description {
    max-width: 28em;
  }
}

/* iPad landscape / small laptops: narrower card; the photo shows mostly
   behind the card */
@media (max-width: 1199px) {
  .buildero-contact-form {
    --contact-form-pad-left: clamp(24px, 5vw, 56px);
    --contact-form-pad-right: clamp(24px, 4vw, 48px);
    --contact-form-card-width: 450px;
    --contact-form-edge-top: 52;
    --contact-form-edge-point: 56;
    --contact-form-edge-bottom: 47;
  }

  .buildero-contact-form .contact-form-section__title {
    font-size: clamp(34px, 3.9vw, 46px);
  }
}

/* Stacked: introduction, photo, benefits, form */
@media (max-width: 1023px) {
  .buildero-contact-form {
    --contact-form-pad: clamp(20px, 5vw, 48px);
    --contact-form-stack-width: min(100% - 2 * var(--contact-form-pad), 720px);

    display: flex;
    flex-direction: column;
    padding-block: var(--contact-form-pad-block, clamp(44px, 7vw, 64px));
  }

  .buildero-contact-form .contact-form-section__container,
  .buildero-contact-form .contact-form-section__content {
    display: contents;
  }

  .buildero-contact-form .contact-form-section__intro,
  .buildero-contact-form .contact-form-section__benefits,
  .buildero-contact-form .contact-form-section__card {
    position: relative;
    z-index: 1;
    width: var(--contact-form-stack-width);
    margin-inline: auto;
  }

  .buildero-contact-form .contact-form-section__intro {
    order: 1;
  }

  .buildero-contact-form .contact-form-section__description {
    max-width: 36em;
  }

  .buildero-contact-form .contact-form-section__visual {
    position: relative;
    inset: auto;
    order: 2;
    width: var(--contact-form-stack-width);
    margin: clamp(28px, 5vw, 40px) auto 0;
    aspect-ratio: 16 / 9;
  }

  .buildero-contact-form .contact-form-section__media {
    clip-path: none;
  }

  .buildero-contact-form .contact-form-section__media-inner {
    left: 0;
  }

  .buildero-contact-form .contact-form-section__divider {
    display: none;
  }

  .buildero-contact-form .contact-form-section__benefits {
    order: 3;
    margin-top: clamp(28px, 5vw, 40px);
  }

  .buildero-contact-form .contact-form-section__card {
    order: 4;
    margin-top: clamp(32px, 6vw, 48px);
    box-shadow: 0 18px 44px rgba(23, 28, 34, 0.1);
  }

  .buildero-contact-form .contact-form-section__lineart-img {
    top: 1%;
    right: -60px;
    bottom: auto;
    left: auto;
    width: 240px;
    opacity: 0.07;
    transform: none;
  }
}

/* Mobile: single-column fields */
@media (max-width: 767px) {
  .buildero-contact-form .contact-form-section__title {
    font-size: clamp(32px, 8.4vw, 44px);
  }

  .buildero-contact-form .contact-form-section__visual {
    aspect-ratio: 4 / 3;
  }

  .buildero-contact-form .contact-form-section__card .buildero-cf-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .buildero-contact-form .contact-form-section__card {
    padding: 24px 20px;
  }

  .buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-submit {
    letter-spacing: 0.16em;
  }
}

/* Small mobile */
@media (max-width: 479px) {
  .buildero-contact-form {
    --contact-form-pad: 16px;
  }

  .buildero-contact-form .contact-form-section__eyebrow {
    font-size: 11px;
    letter-spacing: 0.16em;
  }

  .buildero-contact-form .contact-form-section__benefit {
    column-gap: 16px;
  }

  .buildero-contact-form .contact-form-section__benefit-icon {
    width: 52px;
    height: 52px;
  }

  .buildero-contact-form .contact-form-section__card {
    padding: 22px 16px;
  }

  .buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-submit {
    padding-inline: 12px;
    font-size: 13px;
    letter-spacing: 0.12em;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion: contact-form.js skips the entrance
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .buildero-contact-form .contact-form-section__card .wpcf7 :is(input, select, textarea),
  .buildero-contact-form .contact-form-section__card .buildero-cf-label,
  .buildero-contact-form .contact-form-section__card .wpcf7 .wpcf7-submit,
  .buildero-contact-form .contact-form-section__card .buildero-cf-submit-icon {
    transition: none;
  }

  .buildero-contact-form .contact-form-section__card .wpcf7-submit:hover .buildero-cf-submit-icon {
    transform: none;
  }

  .pie-js .buildero-contact-form:not(.is-ready) [data-contact-form-reveal],
  .pie-js .buildero-contact-form:not(.is-ready) [data-contact-form-line],
  .pie-js .buildero-contact-form:not(.is-ready) [data-contact-form-benefit],
  .pie-js .buildero-contact-form:not(.is-ready) [data-contact-form-visual],
  .pie-js .buildero-contact-form:not(.is-ready) [data-contact-form-card] {
    opacity: 1;
    animation: none;
  }
}