/* Ridgeline — Callback Request Form. rem-only. */


.rl-gf legend.gfield_label.gform-field-label.gfield_label_before_complex {
    padding-bottom: 0.4375rem;
}

.rl-cf {
  background: var(--rl-white, #ffffff);
  padding-top:    var(--cf-pt, 4.5rem);
  padding-bottom: var(--cf-pb, 4.5rem);
  margin-top:     var(--cf-mt, 0rem);
  margin-bottom:  var(--cf-mb, 0rem);
  /* Full-bleed */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Anchor target sits under the floating header without the heading
     hiding behind it when someone jumps to #request-a-call. */
  scroll-margin-top: 7rem;
}

.rl-cf__inner {
  max-width: 85rem;
  margin-inline: auto;
  padding-inline: 2.5rem;
}

.rl-cf__box {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--rl-navy-deep, #040b43);
  border-radius: 1rem;
  padding: 3rem;
  display: flex;
  align-items: flex-start;
  gap: 4rem;
}

.rl-cf__vector {
  position: absolute;
  top: 6rem;
  right: -20rem;
  width: 72rem;
  max-width: none;
  height: auto;
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 65rem) {
  .rl-cf__vector { width: 52rem; right: -18rem; }
}

@media (max-width: 48rem) {
  .rl-cf__vector { display: none; }
}

.rl-cf__intro {
  flex: 1 1 45%;
  min-width: 0rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.rl-cf__formwrap { flex: 1 1 55%; min-width: 0rem; }

.rl-cf__heading {
  font-family: var(--rl-font-heading);
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--rl-white, #ffffff);
  margin: 0rem;
  overflow-wrap: break-word;
}

.rl-cf__body p {
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.75rem;
  color: rgba(255, 255, 255, 0.9);
  margin: 0rem 0rem 1rem;
}

.rl-cf__body p:last-child { margin-bottom: 0rem; }

.rl-cf__or {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0rem;
}

.rl-cf__or a {
  color: var(--rl-gold, #fab529);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.rl-cf__or a:hover { text-decoration: none; }

.rl-cf__urgent {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  border-left: 0.1875rem solid var(--rl-gold, #fab529);
  padding-left: 0.875rem;
  margin: 0rem;
}

.rl-cf__urgent a { color: var(--rl-gold, #fab529); text-decoration: underline; text-underline-offset: 0.15rem; }
.rl-cf__urgent a:hover { text-decoration: none; }

/* ── Form ── */
.rl-cf__form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.rl-cf__field {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
}

.rl-cf__field label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rl-white, #ffffff);
}

.rl-cf__req { color: var(--rl-gold, #fab529); }

.rl-cf__optional {
  font-weight: 400;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

.rl-cf__field input,
.rl-cf__field select,
.rl-cf__field textarea {
  width: 100%;
  font-family: var(--rl-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--rl-navy-deep, #040b43);
  background: var(--rl-white, #ffffff);
  border: 0.0625rem solid rgba(255, 255, 255, 0.25);
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
  /* iOS zooms the page on focus for anything under 1rem — this stays at 1rem. */
  appearance: none;
}

.rl-cf__field textarea { resize: vertical; min-height: 5rem; }

.rl-cf__field select {
  /* Room for the caret drawn below. */
  padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, #040b43 50%), linear-gradient(135deg, #040b43 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 1.25rem, calc(100% - 0.75rem) 1.25rem;
  background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
  background-repeat: no-repeat;
}

.rl-cf__field input:focus,
.rl-cf__field select:focus,
.rl-cf__field textarea:focus {
  outline: 0.1875rem solid var(--rl-gold, #fab529);
  outline-offset: 0.125rem;
  border-color: transparent;
}

.rl-cf__privacy {
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.65);
  margin: 0rem;
}

.rl-cf__privacy a { color: var(--rl-gold, #fab529); text-decoration: underline; }

.rl-cf__submit {
  font-family: var(--rl-font-body);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--rl-navy, #0e1344);
  background: var(--rl-gold, #fab529);
  border: 0rem;
  border-radius: 2.6875rem;
  padding: 0.75rem 1.75rem;
  cursor: pointer;
  transition: background 0.18s;
}

.rl-cf__submit:hover,
.rl-cf__submit:focus-visible { background: #000000; color: var(--rl-white, #ffffff); }

.rl-cf__submit:focus-visible {
  outline: 0.1875rem solid var(--rl-white, #ffffff);
  outline-offset: 0.125rem;
}

/* Honeypot — off-screen rather than display:none, which some bots skip. */
.rl-cf__hp {
  position: absolute;
  left: -9999rem;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
}

/* ── Alerts ── */
.rl-cf__alert {
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.rl-cf__alert--ok {
  background: rgba(250, 181, 41, 0.14);
  border: 0.0625rem solid var(--rl-gold, #fab529);
  color: var(--rl-white, #ffffff);
}

.rl-cf__alert--ok strong { font-size: 1.125rem; color: var(--rl-gold, #fab529); }
.rl-cf__alert--ok a { color: var(--rl-gold, #fab529); font-weight: 700; text-decoration: underline; }

.rl-cf__alert--error {
  background: rgba(255, 255, 255, 0.1);
  border: 0.0625rem solid #ff9a9a;
  color: #ffdede;
  margin-bottom: 1.25rem;
}

/* ── Tablet (≤1200px) ── */
@media (max-width: 75rem) {
  .rl-cf__box     { gap: 2.5rem; padding: 2.5rem; }
  .rl-cf__heading { font-size: 2.25rem; }
}

/* ── Stack (≤1024px) ── */
@media (max-width: 65rem) {
  .rl-cf__box   { flex-direction: column; gap: 2rem; }
  .rl-cf__intro,
  .rl-cf__formwrap { flex: 1 1 auto; width: 100%; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 48rem) {
  /* Block-to-block inside a section: site-wide 1.5rem mobile value. */
  .rl-cf .rl-cf__box { row-gap: 1.5rem; }

  .rl-cf {
    padding-top:    var(--cf-pt-m, var(--cf-pt, 1.40625rem));
    padding-bottom: var(--cf-pb-m, var(--cf-pb, 1.40625rem));
    margin-top:     var(--cf-mt-m, var(--cf-mt, 0rem));
    margin-bottom:  var(--cf-mb-m, var(--cf-mb, 0rem));
    scroll-margin-top: 5.5rem;
  }
  .rl-cf__inner   { padding-inline: 1.25rem; }
  .rl-cf__box     { padding: 1.75rem 1.5rem; }
  .rl-cf__heading { font-size: 1.875rem; }
  .rl-cf__body p  { font-size: 1rem; line-height: 1.625rem; }
  .rl-cf__submit  { width: 100%; }
}

/* ── Small mobile (≤500px) ── */
@media (max-width: 31.25rem) {
  .rl-cf__heading { font-size: 1.625rem; }
  .rl-cf__submit  { border-radius: 1rem; }
}

/* ── 320px ── */
@media (max-width: 20rem) {
  .rl-cf__inner   { padding-inline: 0.75rem; }
  .rl-cf__box     { padding: 1.25rem 1rem; }
  .rl-cf__heading { font-size: 1.5rem; }
  .rl-cf__submit  { font-size: 1rem; padding: 0.875rem 1rem; }
  .rl-cf__alert   { padding: 1rem; font-size: 0.9375rem; }
}

/* ══ Gravity Forms, dressed as the original form ═════════════════════════
   The fields are Gravity's now; the look must not change. Every value below
   is copied from the hand-built form's rules above — same gaps, same control
   box, same gold pill, same focus ring.

   Specificity: Gravity's own rules run at two classes
   (`.gform-theme--framework .gfield_label`), so these use three
   (`.rl-gf .gform_wrapper .gfield_label`) and win without !important. */

.rl-gf .gform_wrapper { margin: 0rem; }

/* Gravity lays fields out on a 12-column grid. The original was a simple
   stack, so flatten it back to one. */
.rl-gf .gform_wrapper .gform_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem;
}

.rl-gf .gform_wrapper .gfield {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  grid-column: auto;
  min-width: 0rem;
  padding: 0rem;
}

/* The message box keeps the full width — it is the one field people write
   more than a few words into. */
.rl-gf .gform_wrapper .gfield.rl-gf-full { grid-column: 1 / -1; }

.rl-gf .gform_wrapper .gfield_label {
  font-family: var(--rl-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--rl-white, #ffffff);
  margin: 0rem;
  padding: 0rem;
}

/* Gold asterisk, matching .rl-cf__req. */
.rl-gf .gform_wrapper .gfield_required,
.rl-gf .gform_wrapper .gfield_required .gfield_required_asterisk {
  color: var(--rl-gold, #fab529);
  font-weight: 600;
}

/* The original tagged optional fields next to the label. Gravity has no such
   feature, so the fields carrying `rl-gf-optional` get it from CSS. */
.rl-gf .gform_wrapper .rl-gf-optional .gfield_label::after {
  content: 'Optional';
  margin-left: 0.375rem;
  font-weight: 400;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Controls ── */
.rl-gf .gform_wrapper .gform_fields input[type="text"],
.rl-gf .gform_wrapper .gform_fields input[type="email"],
.rl-gf .gform_wrapper .gform_fields input[type="tel"],
.rl-gf .gform_wrapper .gform_fields input[type="number"],
.rl-gf .gform_wrapper .gform_fields select,
.rl-gf .gform_wrapper .gform_fields textarea {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  font-family: var(--rl-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--rl-navy-deep, #040b43);
  background-color: var(--rl-white, #ffffff);
  border: 0.0625rem solid rgba(255, 255, 255, 0.25);
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
  /* Gravity pins these to a fixed 38px, which clips the text inside the
     padding. The original sized to content — restore that. */
  height: auto;
  min-height: 0rem;
  appearance: none;
  box-shadow: none;
}

.rl-gf .gform_wrapper .gform_fields textarea {
  resize: vertical;
  /* The original was a 3-row box: 3 x 24px line-height + padding + border. */
  height: 6.125rem;
  min-height: 5rem;
}

/* Same CSS caret as the original — Gravity's own arrow is switched off by the
   `appearance: none` above. */
.rl-gf .gform_wrapper .gform_fields select {
  padding-right: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #040b43 50%),
    linear-gradient(135deg, #040b43 50%, transparent 50%);
  background-position: calc(100% - 1.125rem) 1.25rem, calc(100% - 0.75rem) 1.25rem;
  background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
  background-repeat: no-repeat;
}

.rl-gf .gform_wrapper .gform_fields input:focus,
.rl-gf .gform_wrapper .gform_fields select:focus,
.rl-gf .gform_wrapper .gform_fields textarea:focus {
  outline: 0.1875rem solid var(--rl-gold, #fab529);
  outline-offset: 0.125rem;
  border-color: transparent;
  box-shadow: none;
}

/* ── Submit ── */
.rl-gf .gform_wrapper .gform_footer {
  margin: 0rem;
  padding: 0rem;
  display: block;
}

.rl-gf .gform_wrapper .gform_footer input[type="submit"],
.rl-gf .gform_wrapper .gform_button {
  font-family: var(--rl-font-body);
  /* Gravity paints this button from an inline <style> keyed to
     #gform_wrapper_N[data-form-index] — an id selector. Class-based rules
     cannot reach it, so these declarations are forced. */
  font-size: 1.125rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--rl-navy, #0e1344) !important;
  background: var(--rl-gold, #fab529) !important;
  border: 0rem !important;
  border-radius: 2.6875rem !important;
  padding: 0.75rem 1.75rem !important;
  width: auto;
  height: auto !important;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.rl-gf .gform_wrapper .gform_footer input[type="submit"]:hover,
.rl-gf .gform_wrapper .gform_button:hover,
.rl-gf .gform_wrapper .gform_footer input[type="submit"]:focus-visible {
  background: #000000 !important;
  color: var(--rl-white, #ffffff) !important;
}

.rl-gf .gform_wrapper .gform_footer input[type="submit"]:focus-visible {
  outline: 0.1875rem solid var(--rl-white, #ffffff);
  outline-offset: 0.125rem;
}

/* The privacy note is injected just above the button, where it used to sit. */
.rl-gf .gform_wrapper .rl-cf__privacy { margin: 0rem 0rem 1.125rem; }

/* ── Validation ──
   Gravity's red-on-white boxes would be unreadable on the navy panel, so they
   are restyled to the same treatment as the old .rl-cf__alert--error. */
.rl-gf .gform_wrapper .gform_validation_errors {
  background: rgba(255, 255, 255, 0.1);
  border: 0.0625rem solid #ff9a9a;
  border-radius: 0.75rem;
  box-shadow: none;
  padding: 1rem 1.25rem;
  margin: 0rem 0rem 1.25rem;
}

.rl-gf .gform_wrapper .gform_validation_errors > h2,
.rl-gf .gform_wrapper .gform_validation_errors ol a {
  color: #ffdede;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0rem;
}

.rl-gf .gform_wrapper .gfield_error .gfield_label { color: var(--rl-white, #ffffff); }

.rl-gf .gform_wrapper .gfield_validation_message,
.rl-gf .gform_wrapper .validation_message {
  background: transparent;
  border: 0rem;
  padding: 0rem;
  margin: 0rem;
  color: #ffdede;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.rl-gf .gform_wrapper .gfield_error input,
.rl-gf .gform_wrapper .gfield_error select,
.rl-gf .gform_wrapper .gfield_error textarea {
  border-color: #ff9a9a;
}

/* Gravity's honeypot must never be visible. */
.rl-gf .gform_wrapper .gform_validation_container { display: none; }

/* The AJAX spinner sits next to the button. */
.rl-gf .gform_wrapper .gform_ajax_spinner { margin-left: 0.75rem; }

@media (max-width: 48rem) {
  /* Full width, like every other button on mobile. */
  .rl-gf .gform_wrapper .gform_footer input[type="submit"],
  .rl-gf .gform_wrapper .gform_button {
    width: 100% !important;
    border-radius: 1rem !important;
  }
}

@media (max-width: 31.25rem) {
  .rl-gf .gform_wrapper .gform_footer input[type="submit"],
  .rl-gf .gform_wrapper .gform_button {
    font-size: 1rem !important;
    padding: 0.875rem 1rem !important;
  }
}

/* Gravity prints a "* indicates required fields" legend above the form. The
   original marked required fields with the gold asterisk alone. */
.rl-gf .gform_wrapper .gform_required_legend { display: none; }

/* Two-up needs room. Below the phone breakpoint a single column reads better
   and matches the rest of the site's mobile stacking. */
@media (max-width: 48rem) {
  /* single column below 48rem */
  .rl-gf .gform_wrapper .gform_fields { grid-template-columns: 1fr; }
}