/* Form Section: Drop Us A Line.
   Use a private font alias so loading the missing heading font affects only this form.
   Source: the reference site's linked Google Fonts stylesheet. Montserrat is already loaded. */
@font-face {
  font-family: "First Form Playfair";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiukDQ.ttf") format("truetype");
}

section#form-section.form-section {
  --form-background: var(--first-primary, #313d3d);
  margin: 0;
  padding: 0;
  overflow: clip; 
  background: var(--form-foreground);
  color: var(--form-foreground);
  font-size: 18px;
  line-height: 1.15;
  z-index: 9;
}

section#form-section .container {
  max-width: none;
  padding: 0;
}

section#form-section .container > .d-flex {
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 0;
}

section#form-section .col.left-col {
  width: 66.6667%;
  padding: 0 15px;
  /* background: var(--form-background); */
  /* color: inherit; */
  position: relative;
}

/* "140 Park Avenue / Oklahoma City" badge in the panel's top-right corner,
   as in the v1 theme's .ghost-logo.position-3 (12% of the section = 18% of
   this 66.67% column). Decorative only, so it stays out of the markup. */
section#form-section .col.left-col::after {
  content: "";
  position: absolute;
  top: 60px;
  right: 10.5%;
  width: 18%;
  aspect-ratio: 328 / 291;
  background: url("../../../../../../themes/first-v2/assets/images/form-ghost.svg") no-repeat center / contain;
  pointer-events: none;
}

/* The 200px top/bottom padding is the image's inset; the sticky image glides
   within it, so it starts and stops 200px inside the section. */
section#form-section .col.right-col {
  position: relative;
  width: 33.3333%;
  padding: 200px 15px;
}

/* Real CSS sticky instead of the shared JS, which flips an inline `top`
   between auto and the header height and makes the image jump. The
   !important on top overrides that inline style. */
section#form-section .image-section {
  position: sticky !important;
  top: 130px !important; /* 110px fixed header + 20px gap */
  width: calc(100% + 120px);
  height: calc(100vh - 170px);
  max-height: none;
  margin: 0 0 0 120px;
  padding: 0;
  z-index: auto;
  transition: none;
}

section#form-section .image-section img {
  position: absolute;
  top: 0;
  height: 100%;
  object-position: center;
}

section#form-section .form-section-wrapper {
  max-width: 1080px;
  margin: 0;
  padding: 250px 0 250px 330px;
}

section#form-section .section-title {
  margin: 0 0 55px;
  /* color: inherit; */
  font-family: "First Form Playfair", Georgia, serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

section#form-section .form-section-wrapper > p.mb-3,
section#form-section .form-row:not(:has(*)) {
  display: none;
}

/* Each generated row owns its field gap; the last row adds the live 40px gap. */
section#form-section .form-row {
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0;
}

section#form-section .single-field,
section#form-section .form-row .option-group {
  min-width: 0;
  width: 50%;
  margin-bottom: 30px;
  padding-right: 30px;
}

section#form-section .form-row.single .single-field,
section#form-section .single-field.g-checkbox {
  width: 100%;
}

section#form-section :is(input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"], select, textarea) {
  height: 70px;
  padding: 20px 0 30px;
  border: 0;
  border-bottom: 1px solid;
  border-radius: 0;
  background: transparent;
  /* color: inherit; */
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
}

section#form-section textarea {
  height: 200px;
  min-height: 200px;
  padding: 20px 0;
}

section#form-section select option {
  color: var(--form-foreground);
  background: var(--form-background);
}

section#form-section :is(input, select, textarea):focus {
  border-color: currentColor;
  box-shadow: none;
}

section#form-section :is(input, select, textarea, button):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Keep configured optional fields and shared checkbox/radio controls usable. */
section#form-section .option-group,
section#form-section .time-field,
section#form-section .g-checkbox {
  font-size: 16px;
  line-height: 1.6;
}

section#form-section .option-group > .d-flex {
  flex-wrap: wrap;
}

section#form-section .time-range-inputs {
  gap: 0;
}

section#form-section .error:not(:empty) {
  display: block;
  margin: 5px 0 10px;
}

/* The existing shared font-size !important already supplies 16px on this button. */
section#form-section .button-row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 40px !important; /* Override the markup's .mt-3 utility. */
  margin-bottom: 40px;
}

/* The circle is a ::before pseudo-element, so it renders ahead of the notice;
   move the notice to its own first line so the circle sits beside the button. */
section#form-section .recaptcha-declaration {
  order: -1;
  flex: 0 0 100%;
  max-width: 100%;
  margin-bottom: 22px;
  /* color: inherit; */
}

section#form-section .button-row::before {
  content: "";
  flex: 0 0 70px;
  height: 70px;
  margin: 5px 10px 5px 0;
  border: 2px solid;
  border-radius: 50%;
}

section#form-section .button-row button.formmangr-button-submit {
  position: relative;
  width: auto;
  padding: 0 10px;
  border-radius: 25px;
  background: none;
  /* color: inherit; */
  box-shadow: none;
  font-family: inherit;
  line-height: normal;
  letter-spacing: 2px;
}

section#form-section .button-row button::before,
section#form-section .button-row button::after {
  content: "";
  position: absolute;
  top: 50%;
  transition: all .3s ease;
}

section#form-section .button-row button::before {
  left: -88px;
  width: 50px;
  margin-top: -1px;
  border-bottom: 2px solid;
}

section#form-section .button-row button::after {
  left: -53px;
  width: 14px;
  height: 14px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: translateY(-50%) rotate(45deg);
}

section#form-section .button-row button:is(:hover, :focus-visible)::before {
  left: -64px;
  width: 35px;
}

section#form-section .button-row button:is(:hover, :focus-visible)::after {
  left: -44px;
}
section#form-section.full-width-section .form-section-wrapper{
      padding: 40px 0px 40px 30px;
}
/* Form Section: responsive overrides. Shared !important rules are noted below. */
@media screen and (max-width: 1675px) {
  section#form-section .section-title { font-size: 44px; }
}

@media screen and (max-width: 1440px) {
  section#form-section .section-title { font-size: 38px; margin-bottom: 35px; }
  section#form-section .button-row::before { flex-basis: 50px; height: 50px; }
  section#form-section .button-row button::before { left: -70px; width: 40px; }
  section#form-section .button-row button::after { left: -43px; width: 12px; height: 12px; }
  section#form-section .button-row button:is(:hover, :focus-visible)::before { left: -54px; width: 30px; }
  section#form-section .button-row button:is(:hover, :focus-visible)::after { left: -37px; }
}

@media screen and (max-width: 1200px) {
  section#form-section .image-section { width: calc(100% + 50px); margin-left: 50px; }
  section#form-section .form-section-wrapper { max-width: 900px; padding: 100px 0 100px 130px; }
  section#form-section .section-title { text-align: center; }
}

@media screen and (max-width: 1024px) {
  /* component-common.css forces 50% columns, 16px row gaps and zero side padding. */
  section#form-section .col.left-col { width: 66.6667% !important; }
  section#form-section .col.right-col { width: 33.3333% !important; }
  section#form-section .container > .d-flex,
  section#form-section .form-row { gap: 0 !important; }
  section#form-section .form-row { margin-bottom: 0 !important; }
  section#form-section .form-section-wrapper { padding-left: 130px !important; }
}

@media screen and (max-width: 992px) {
  section#form-section.form-section { margin-top: -60px; padding-top: 160px; }
  section#form-section .container > .d-flex { flex-direction: column-reverse; }
  section#form-section .col.left-col,
  section#form-section .col.right-col { width: 100% !important; }
  section#form-section .col.right-col { height: 80vw; margin-top: 30px; padding: 0; }
  section#form-section .form-section-wrapper { max-width: 90%; margin: 0 auto; padding-left: 0 !important; }
  section#form-section .single-field,
  section#form-section .form-row .option-group { width: 100%; padding-right: 0; }
  section#form-section .section-title { margin-bottom: 50px; }
  /* Stacked layout: no sticky; the image just fills its 80vw column. */
  section#form-section .image-section { position: relative !important; top: auto !important; width: 100%; height: 100%; margin: 0; padding: 0; }
  section#form-section .image-section img { top: 0; height: 100%; }
  section#form-section .button-row { justify-content: center; }
  /* Badge sits above the title (which starts 100px down) on the stacked panel. */
  section#form-section .col.left-col::after { top: 20px; right: 5%; width: 16%; }
}

@media screen and (max-width: 768px) {
  /* Override shared mobile rules that force padded, rounded fields and a full-width button. */
  section#form-section :is(input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"], select, textarea) {
    padding: 20px 0 30px !important;
    border-radius: 0 !important;
  }
  section#form-section textarea { padding: 20px 0 !important; }
  section#form-section .form-section-wrapper .section-title { margin-bottom: 50px !important; }
  section#form-section .button-row button.formmangr-button-submit { width: auto !important; }
  section#form-section .option-group label.d-flex { flex-direction: row !important; }
}

@media screen and (max-width: 767px) {
  section#form-section .section-title { font-size: 35px; line-height: 1.3; }
  section#form-section .time-range-inputs { flex-wrap: wrap; }
  section#form-section .col.left-col::after { width: 22%; }
}