.formpanel {
    background: var(--bellco-bg);
    padding: 96px 0;
}

.formpanel.is-alt {
    background: var(--bellco-bg-alt);
}

.formpanel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 64px;
    align-items: start;
}

.formpanel-form-left .formpanel-copy { order: 2; }
.formpanel-form-left .formpanel-form { order: 1; }

.formpanel .formpanel-head { text-align: left; }

/* The quote form is much taller than the copy beside it, so the copy column
   travels with it rather than stranding half a screen of empty ground. */
@media (min-width: 1200px) {
    .formpanel-copy {
        position: sticky;
        top: 120px;
    }
}

.formpanel-intro {
    color: var(--bellco-muted);
    font-size: 17px;
    line-height: 1.7;
    margin: 20px 0 0;
    max-width: 46ch;
}

.formpanel-details { margin-top: 40px; }

.formpanel-details-title {
    color: var(--bellco-text);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 20px;
}

.formpanel-detail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px;
}

.formpanel-detail {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.formpanel-detail-icon {
    color: var(--bellco-mint);
    flex: 0 0 auto;
    line-height: 0;
    margin-top: 2px;
}

.formpanel-detail-text { display: block; }

.formpanel-detail-label {
    color: var(--bellco-muted);
    display: block;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.formpanel-detail-value {
    color: var(--bellco-text);
    display: block;
    font-size: 17px;
    font-weight: 600;
    margin-top: 2px;
}

.formpanel-detail-value a {
    color: var(--bellco-text);
    text-decoration: none;
    border-bottom: 1px solid rgba(139, 217, 186, 0.4);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.formpanel-detail-value a:hover,
.formpanel-detail-value a:focus-visible {
    color: var(--bellco-mint);
    border-bottom-color: var(--bellco-mint);
}

/* ---- the form card ---------------------------------------------------- */

.formpanel-form {
    background: var(--bellco-bg-card);
    border: 1px solid rgba(242, 242, 240, 0.09);
    border-radius: var(--bellco-radius);
    padding: 40px;
}

.formpanel-form-title {
    color: var(--bellco-text);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 24px;
}

.formpanel-note {
    color: var(--bellco-muted);
    font-size: 13px;
    line-height: 1.6;
    margin: 20px 0 0;
}

.formpanel-missing {
    color: #ffb4a2;
    font-size: 15px;
}

/* Gravity Forms ships its own theme stylesheet that wins on specificity and
   assumes a light page, so every rule below is deliberately over-specified
   and marked important. Both the input and button submit markup are covered:
   which one GF emits depends on the active form theme. */

/* Tightened from 22px 2026-08-26: with a 14px label and 6px under it, 22px of
   row gap made a four-field form read as four separate cards. GF also sets
   grid-column-gap, so both are named. */
.formpanel .gform_wrapper.gravity-theme .gform_fields {
    grid-row-gap: 14px !important;
    grid-column-gap: 16px !important;
}

/* GF adds its own bottom margin per field on some themes; the grid gap owns
   the rhythm here. */
.formpanel .gform_wrapper .gfield { margin-bottom: 0 !important; }

/* A message box does not need to be a third of the page. */
.formpanel .gform_wrapper textarea {
    min-height: 132px !important;
    resize: vertical !important;
}

.formpanel .gform_wrapper.gravity-theme .gfield_label,
.formpanel .gform_wrapper .gfield_label {
    color: var(--bellco-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 6px !important;
}

.formpanel .gform_wrapper .gfield_required { color: var(--bellco-mint) !important; }

.formpanel .gform_wrapper input[type="text"],
.formpanel .gform_wrapper input[type="email"],
.formpanel .gform_wrapper input[type="tel"],
.formpanel .gform_wrapper input[type="url"],
.formpanel .gform_wrapper input[type="number"],
.formpanel .gform_wrapper select,
.formpanel .gform_wrapper textarea {
    background: rgba(8, 14, 24, 0.72) !important;
    border: 1px solid rgba(242, 242, 240, 0.16) !important;
    border-radius: 8px !important;
    color: var(--bellco-text) !important;
    font-family: inherit !important;
    font-size: 16px !important;
    padding: 13px 15px !important;
    width: 100% !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.formpanel .gform_wrapper select {
    /* The native arrow is drawn dark-on-dark in most browsers. */
    appearance: none !important;
    background-image: linear-gradient(45deg, transparent 50%, var(--bellco-mint) 50%),
                      linear-gradient(135deg, var(--bellco-mint) 50%, transparent 50%) !important;
    background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px) !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat !important;
    padding-right: 40px !important;
}

.formpanel .gform_wrapper input::placeholder,
.formpanel .gform_wrapper textarea::placeholder {
    color: var(--bellco-dim) !important;
}

.formpanel .gform_wrapper input:focus,
.formpanel .gform_wrapper select:focus,
.formpanel .gform_wrapper textarea:focus {
    border-color: var(--bellco-mint) !important;
    box-shadow: 0 0 0 3px rgba(139, 217, 186, 0.18) !important;
    outline: none !important;
}

.formpanel .gform_wrapper .gfield_description,
.formpanel .gform_wrapper .gform_fileupload_rules {
    color: var(--bellco-muted) !important;
    font-size: 13px !important;
    margin-top: 5px !important;
}

.formpanel .gform_wrapper .gform_footer { margin-top: 22px !important; padding: 0 !important; }

.formpanel .gform_wrapper .gform_button,
.formpanel .gform_wrapper input[type="submit"],
.formpanel .gform_wrapper button[type="submit"] {
    background: var(--bellco-mint) !important;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--bellco-on-mint) !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 15px 36px !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
    width: auto !important;
}

.formpanel .gform_wrapper .gform_button:hover,
.formpanel .gform_wrapper input[type="submit"]:hover,
.formpanel .gform_wrapper button[type="submit"]:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
}

.formpanel .gform_wrapper .gform_button:focus-visible,
.formpanel .gform_wrapper input[type="submit"]:focus-visible,
.formpanel .gform_wrapper button[type="submit"]:focus-visible {
    outline: 3px solid var(--bellco-mint) !important;
    outline-offset: 3px !important;
}

/* Validation and confirmation, both of which GF paints for a light page. */

.formpanel .gform_wrapper .gform_validation_errors {
    background: rgba(204, 34, 0, 0.14) !important;
    border: 1px solid rgba(255, 138, 112, 0.5) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.formpanel .gform_wrapper .gform_validation_errors h2,
.formpanel .gform_wrapper .gform_validation_errors ol a {
    color: #ffb4a2 !important;
}

.formpanel .gform_wrapper .gfield_validation_message,
.formpanel .gform_wrapper .validation_message {
    background: transparent !important;
    border: 0 !important;
    border-left: 3px solid #ff8a70 !important;
    color: #ffb4a2 !important;
    font-size: 14px !important;
    padding: 4px 0 4px 12px !important;
}

.formpanel .gform_wrapper .gfield_error input,
.formpanel .gform_wrapper .gfield_error select,
.formpanel .gform_wrapper .gfield_error textarea {
    border-color: #ff8a70 !important;
}

.formpanel .gform_confirmation_wrapper,
.formpanel .gform_confirmation_message {
    color: var(--bellco-text) !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* Gravity Forms 2.9 ships the "orbital" theme, which drives its controls from
   its own custom properties. Setting those is more durable than out-selecting
   every rule, so both are done: tokens first, explicit overrides above. */

.formpanel .gform_wrapper.gform-theme--orbital,
.formpanel .gform_wrapper {
    --gf-color-primary: var(--bellco-mint);
    --gf-color-primary-contrast: var(--bellco-on-mint);
    --gf-ctrl-bg-color: rgba(8, 14, 24, 0.72);
    --gf-ctrl-bg-color-focus: rgba(8, 14, 24, 0.9);
    --gf-ctrl-border-color: rgba(242, 242, 240, 0.16);
    --gf-ctrl-border-color-focus: var(--bellco-mint);
    --gf-ctrl-color: var(--bellco-text);
    --gf-ctrl-placeholder-color: var(--bellco-dim);
    --gf-ctrl-label-color-primary: var(--bellco-text);
    --gf-ctrl-label-color-secondary: var(--bellco-muted);
    --gf-ctrl-desc-color: var(--bellco-muted);
    --gf-ctrl-radius: 8px;
    --gf-ctrl-btn-bg-color-primary: var(--bellco-mint);
    --gf-ctrl-btn-color-primary: var(--bellco-on-mint);
    --gf-ctrl-btn-border-color-primary: var(--bellco-mint);
    --gf-ctrl-file-btn-bg-color: rgba(242, 242, 240, 0.08);
    --gf-ctrl-file-btn-color: var(--bellco-text);
    --gf-local-color: var(--bellco-text);
}

/* File upload. GF paints the drop zone for a light page, so it arrives as a
   white slab in the middle of a dark card. */

.formpanel .gform_wrapper .gform_drop_area {
    background: rgba(8, 14, 24, 0.72) !important;
    border: 1px dashed rgba(242, 242, 240, 0.24) !important;
    border-radius: 10px !important;
    color: var(--bellco-muted) !important;
    padding: 26px 20px !important;
    text-align: center !important;
}

.formpanel .gform_wrapper .gform_drop_instructions {
    color: var(--bellco-muted) !important;
    display: block !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
}

.formpanel .gform_wrapper .gform_button_select_files,
.formpanel .gform_wrapper .gform-theme-button--control {
    background: rgba(242, 242, 240, 0.08) !important;
    border: 1px solid rgba(242, 242, 240, 0.22) !important;
    border-radius: 999px !important;
    color: var(--bellco-text) !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 9px 22px !important;
}

.formpanel .gform_wrapper .gform_button_select_files:hover,
.formpanel .gform_wrapper .gform-theme-button--control:hover {
    background: rgba(139, 217, 186, 0.16) !important;
    border-color: var(--bellco-mint) !important;
}

.formpanel .gform_wrapper .gform_fileupload_rules,
.formpanel .gform_wrapper .ginput_preview,
.formpanel .gform_wrapper .gform_delete_file {
    color: var(--bellco-muted) !important;
}

/* GF renders the uploaded-file list and progress bar light-on-light too. */
.formpanel .gform_wrapper .gform_uploaded_files,
.formpanel .gform_wrapper .ginput_preview_list li {
    background: transparent !important;
    color: var(--bellco-text) !important;
}

/* The honeypot/anti-spam field must stay reachable to screen readers but
   invisible; GF handles that itself, so nothing here should re-show it. */

@media (max-width: 1199px) {
    .formpanel { padding: 72px 0; }
    .formpanel-grid { gap: 44px; }
    .formpanel-form { padding: 32px; }
}

@media (max-width: 767px) {
    .formpanel { padding: 56px 0; }
    .formpanel-grid { grid-template-columns: 1fr; gap: 36px; }
    .formpanel-form-left .formpanel-copy { order: 1; }
    .formpanel-form-left .formpanel-form { order: 2; }
    .formpanel-form { padding: 24px; }
    .formpanel .formpanel-head { text-align: left; }

/* The quote form is much taller than the copy beside it, so the copy column
   travels with it rather than stranding half a screen of empty ground. */
@media (min-width: 1200px) {
    .formpanel-copy {
        position: sticky;
        top: 120px;
    }
}

.formpanel-intro { font-size: 16px; }
    .formpanel-detail-value { font-size: 16px; }
}

/*
 * On a follow-up thank-you page the panel follows a hero that has already been
 * cut to a receipt, so its own 96px top would put the space back and undo the
 * point. The form card is the thing the page is for -- it starts as close to
 * the confirmation as it can without the two running together.
 */
.bellco-followup-thankyou .formpanel {
  padding-top: 40px;
}

@media (max-width: 991px) {
  .bellco-followup-thankyou .formpanel {
    padding-top: 32px;
  }
}

/*
 * Stacked, the follow-up form has to come before the reassurance.
 *
 * One column puts the whole left-hand column above the form, so on a 767x900
 * phone the first field landed at y=1126 -- a screen and a quarter below the
 * fold, on the page whose only job is that form. "What happens next" is
 * post-submission reassurance: it answers a question somebody has after they
 * send, not one they need answered before they start typing. So it follows the
 * form, and the heading and the "none of this is required" intro -- which do
 * have to be read first -- stay above it.
 *
 * Scoped to 767, not 991: the grid only collapses to one column at 767. Run at
 * 991 it promotes the copy's three children into a still-two-column grid and
 * deals them across both columns, which put "What happens next" alongside the
 * form title instead of under the form.
 *
 * `display: contents` promotes the copy column's children to grid items so
 * they can be ordered against the form. The selectors carry the grid to
 * outrank `.formpanel-form-left .formpanel-form`, which would otherwise still
 * be pulling the form to the top on a left-positioned panel.
 */
@media (max-width: 767px) {
  .formpanel-grid .formpanel-copy {
    display: contents;
  }

  .formpanel-grid .formpanel-head    { order: 1; }
  .formpanel-grid .formpanel-intro   { order: 2; }
  .formpanel-grid .formpanel-form    { order: 3; }
  .formpanel-grid .formpanel-details { order: 4; }
}