/* Contact CTA + estimate form — ported from design/mockup.html (.cta).

   The .form rules also target the markup a form plugin outputs, so a Gravity
   Forms / WPForms / CF7 form dropped into this section inherits the design
   instead of arriving unstyled. */

.section--contact_cta{background:var(--paper)}
.section--contact_cta .panel{background:var(--asphalt);color:#fff;padding:70px 64px;position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.section--contact_cta .panel::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;transform:translateX(-50%);background-image:linear-gradient(180deg,rgba(255,255,255,.25) 0 30px,transparent 30px 52px);background-size:3px 52px}
.section--contact_cta h2{margin:14px 0 18px}
.section--contact_cta .lede{color:rgba(255,255,255,.7)}
.section--contact_cta .lede a{color:#fff;text-decoration:underline}

.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:1}

/* A form rendered by a plugin lays out its own fields. The two-column grid
   above is for the static fallback form only — leaving it on makes the whole
   plugin form a single grid item, so it renders at half the column width. */
.form--plugin{display:block;grid-template-columns:none;gap:0;width:100%}
.form input,.form select,.form textarea{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:#fff;padding:14px 16px;font-family:var(--body);font-size:15px}
.form ::placeholder{color:rgba(255,255,255,.45)}
.form select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.form select option{color:var(--asphalt)}
.form textarea{grid-column:1/-1;min-height:110px;resize:vertical}
.form .btn,.form button[type=submit],.form input[type=submit]{grid-column:1/-1;justify-content:center}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--red)}
.form label{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}

@media(max-width:1020px){
  .section--contact_cta .panel{grid-template-columns:1fr;gap:44px;padding:52px 36px}
  .section--contact_cta .panel::before{display:none}
}
@media(max-width:720px){.form{grid-template-columns:1fr}}

/* Shown to logged-in editors only, when no form plugin is connected. */
.form-notice{background:var(--red);color:#fff;font-size:13.5px;padding:12px 16px;margin-bottom:14px}
.form :disabled{opacity:.55;cursor:not-allowed}

/* ==========================================================================
   Gravity Forms
   --------------------------------------------------------------------------
   Styled to match the designed estimate form: translucent fields on the dark
   panel, uppercase display labels, red submit button.

   Scoped to .section--contact_cta so a Gravity form placed anywhere else on
   the site keeps the plugin's own styling rather than inheriting a dark theme
   onto a light background.

   Targets the markup Gravity Forms 2.5+ outputs (.gform_wrapper.gravity-theme)
   and is written defensively: selectors match on the wrapper rather than on
   per-field classes, so a form with different fields than the mockup's still
   comes out styled.
   ========================================================================== */

.section--contact_cta .gform_wrapper{margin:0;max-width:none}
.section--contact_cta .gform_wrapper form{margin:0}

/* ---------- Title and description ---------- */
.section--contact_cta .gform_heading{margin:0 0 22px}
.section--contact_cta .gform_title{font-family:var(--display);font-weight:700;font-size:26px;
  line-height:1.1;letter-spacing:.02em;text-transform:uppercase;color:#fff;margin:0 0 6px}
.section--contact_cta .gform_description{display:block;font-size:15px;color:rgba(255,255,255,.66);margin:0}
.section--contact_cta .gform_required_legend{display:none}

/* ---------- Field grid ----------
   Gravity Forms sets its own grid; these variables are what it reads, so the
   gutters match the rest of the design without fighting the plugin. */
/* The same twelve-column grid Gravity Forms uses, declared here rather than
   inherited, so field widths hold even if the plugin's stylesheet is deferred,
   minified away by an optimiser, or dequeued. */
.section--contact_cta .gform_wrapper .gform_fields{
  --gf-form-gap-x:14px;--gf-form-gap-y:14px;
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-row-gap:14px;grid-column-gap:14px;row-gap:14px;column-gap:14px}
.section--contact_cta .gform_wrapper .gfield{margin:0;grid-column:1/-1;min-width:0}
.section--contact_cta .gform_wrapper .gfield--width-half{grid-column:span 6}
.section--contact_cta .gform_wrapper .gfield--width-third{grid-column:span 4}
.section--contact_cta .gform_wrapper .gfield--width-two-thirds{grid-column:span 8}
.section--contact_cta .gform_wrapper .gfield--width-quarter{grid-column:span 3}
.section--contact_cta .gform_wrapper .gfield--width-three-quarter{grid-column:span 9}
.section--contact_cta .gform_wrapper .gfield--width-full{grid-column:1/-1}

/* ---------- Labels ---------- */
.section--contact_cta .gform_wrapper .gfield_label,
.section--contact_cta .gform_wrapper legend.gfield_label{
  display:block;margin:0 0 6px;padding:0;
  font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.section--contact_cta .gform_wrapper .gfield_required{color:var(--red);margin-left:4px}
.section--contact_cta .gform_wrapper .gfield_description{
  padding:6px 0 0;font-size:13px;color:rgba(255,255,255,.5)}

/* ---------- Controls ---------- */
.section--contact_cta .gform_wrapper input[type=text],
.section--contact_cta .gform_wrapper input[type=email],
.section--contact_cta .gform_wrapper input[type=tel],
.section--contact_cta .gform_wrapper input[type=url],
.section--contact_cta .gform_wrapper input[type=number],
.section--contact_cta .gform_wrapper input[type=password],
.section--contact_cta .gform_wrapper input[type=date],
.section--contact_cta .gform_wrapper select,
.section--contact_cta .gform_wrapper textarea{
  width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:0;color:#fff;padding:14px 16px;font-family:var(--body);font-size:15px;
  line-height:1.4;box-shadow:none;transition:border-color .15s ease,background .15s ease}
.section--contact_cta .gform_wrapper textarea{min-height:110px;resize:vertical}
.section--contact_cta .gform_wrapper ::placeholder{color:rgba(255,255,255,.45);opacity:1}

.section--contact_cta .gform_wrapper input:focus,
.section--contact_cta .gform_wrapper select:focus,
.section--contact_cta .gform_wrapper textarea:focus{
  outline:none;border-color:var(--red);background:rgba(255,255,255,.09)}

/* Native select arrow is invisible on a dark control, so draw our own. */
.section--contact_cta .gform_wrapper select{
  appearance:none;-webkit-appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center}
.section--contact_cta .gform_wrapper select option{color:var(--asphalt);background:#fff}

/* Checkboxes and radios. */
.section--contact_cta .gform_wrapper .gfield_checkbox label,
.section--contact_cta .gform_wrapper .gfield_radio label{
  font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none;
  color:rgba(255,255,255,.85);margin:0}
.section--contact_cta .gform_wrapper input[type=checkbox],
.section--contact_cta .gform_wrapper input[type=radio]{accent-color:var(--red);width:auto}

/* ---------- Submit ---------- */
.section--contact_cta .gform_footer{margin:18px 0 0;padding:0;display:block}

/* Gravity Forms 2.9's own theme paints the submit from its CSS custom
   properties at a specificity that beats an ordinary scoped selector, and the
   markup differs between versions (input vs button, with and without
   .gform_button). Hence the wide net and the !important — this is the one
   place where losing the cascade means shipping a bright blue button into a
   red and navy design. */
.section--contact_cta .gform_wrapper .gform_footer input[type=submit],
.section--contact_cta .gform_wrapper .gform_footer button,
.section--contact_cta .gform_wrapper .gform_page_footer input[type=submit],
.section--contact_cta .gform_wrapper .gform_page_footer button,
.section--contact_cta .gform_wrapper input.gform_button,
.section--contact_cta .gform_wrapper button.gform_button,
.section--contact_cta .gform_wrapper .gform-theme-button{
  display:inline-flex !important;align-items:center;justify-content:center;gap:10px;
  width:100% !important;max-width:none;
  background:var(--red) !important;background-image:none !important;color:#fff !important;
  border:0 !important;border-radius:0 !important;box-shadow:none !important;cursor:pointer;
  font-family:var(--display) !important;font-weight:600 !important;font-size:18px !important;
  letter-spacing:.08em !important;text-transform:uppercase !important;
  padding:16px 30px !important;line-height:1 !important;height:auto !important;
  transition:background .18s ease}

.section--contact_cta .gform_wrapper .gform_footer input[type=submit]:hover,
.section--contact_cta .gform_wrapper .gform_footer button:hover,
.section--contact_cta .gform_wrapper input.gform_button:hover,
.section--contact_cta .gform_wrapper button.gform_button:hover,
.section--contact_cta .gform_wrapper .gform-theme-button:hover{
  background:var(--red-dark) !important}

.section--contact_cta .gform_wrapper .gform_footer input[type=submit]:focus-visible,
.section--contact_cta .gform_wrapper .gform_footer button:focus-visible{
  outline:3px solid #fff;outline-offset:2px}

/* The site's buttons carry a trailing arrow. An <input> cannot take a
   pseudo-element, so this only applies where Gravity Forms renders a <button>;
   the button is correct either way, just without the arrow on an input. */
.section--contact_cta .gform_wrapper .gform_footer button::after{
  content:"";width:16px;height:16px;flex:none;background-color:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat}
.section--contact_cta{--arrow: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.5'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}

/* Gravity Forms also paints these from its own variables; override the ones
   that affect the submit so the plugin and the theme agree. */
.section--contact_cta .gform_wrapper{
  --gf-ctrl-btn-bg-color-primary:var(--red);
  --gf-ctrl-btn-bg-color-hover-primary:var(--red-dark);
  --gf-ctrl-btn-color-primary:#fff;
  --gf-ctrl-btn-border-color-primary:var(--red);
  --gf-color-primary:var(--red);
  --gf-color-primary-contrast:#fff}
.section--contact_cta .gform_wrapper .gform_ajax_spinner{margin-left:12px;filter:brightness(3)}

/* ---------- Validation ---------- */
.section--contact_cta .gform_wrapper .gform_validation_errors{
  background:color-mix(in srgb,var(--red) 22%,transparent);
  border:1px solid var(--red);border-radius:0;box-shadow:none;
  padding:14px 18px;margin:0 0 18px}
.section--contact_cta .gform_wrapper .gform_validation_errors h2,
.section--contact_cta .gform_wrapper .gform_validation_errors > h2.gform_submission_error{
  font-family:var(--display);font-size:17px;letter-spacing:.04em;text-transform:uppercase;
  color:#fff;margin:0}
.section--contact_cta .gform_wrapper .gform_validation_errors a{color:#fff;text-decoration:underline}

.section--contact_cta .gform_wrapper .gfield_error input,
.section--contact_cta .gform_wrapper .gfield_error select,
.section--contact_cta .gform_wrapper .gfield_error textarea{border-color:var(--red);background:rgba(198,64,44,.14)}
.section--contact_cta .gform_wrapper .gfield_error .gfield_label{color:#fff}
.section--contact_cta .gform_wrapper .validation_message{
  background:transparent;border:0;border-left:3px solid var(--red);border-radius:0;
  padding:6px 0 6px 12px;margin:8px 0 0;font-size:13.5px;color:#fff}

/* ---------- Confirmation ---------- */
.section--contact_cta .gform_confirmation_message{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-left:5px solid var(--red);padding:26px 30px;
  font-size:16.5px;color:#fff}

/* Honeypot must stay hidden or the form is trivially defeated. */
.section--contact_cta .gform_wrapper .gform_validation_container,
.section--contact_cta .gform_wrapper .gfield--type-honeypot{
  display:none !important;position:absolute !important;left:-9999px !important}

@media(max-width:720px){
  .section--contact_cta .gform_wrapper .gfield{grid-column:1/-1 !important}
}