/* The Lending Pros — static-hosting fixes, presentation half.
   Paired with tlp-fix.js. Only touches what is broken on a phone; the rest of
   the mirror's original CSS is untouched. */

/* --- the quote form on a phone -------------------------------------------
   The Vonk form card is laid out for a desktop column. On a narrow screen the
   inner wrapper keeps its desktop width and the questions run off the right
   edge, which is the "it's all cut off" report. Let it use the width it has. */
@media (max-width: 767px) {
  .gform_wrapper.gravity-theme,
  .online-mortgage-form,
  .gform_wrapper form,
  .gform_body,
  .gform_page,
  .gform_page_fields {
    max-width: 100% !important;
    width: auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }
  .gform_wrapper .gfield { max-width: 100% !important; }
  /* Long radio/label text must wrap rather than force the card wider. */
  .gform_wrapper .gfield_label,
  .gform_wrapper label,
  .gform_wrapper .gfield_radio label {
    white-space: normal !important;
    word-break: break-word;
  }
  /* Image choices sit two-up on desktop; one-up reads better at phone width
     and stops the pair from overflowing. */
  .gform_wrapper .gf_image_choices ul,
  .gform_wrapper .gfield_radio.gf_image_choice {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .gform_wrapper .gf_image_choices img { max-width: 100%; height: auto; }
  /* Sliders and text inputs to full width. */
  .gform_wrapper input[type=text],
  .gform_wrapper input[type=email],
  .gform_wrapper input[type=tel],
  .gform_wrapper select,
  .gform_wrapper .noUi-target { width: 100% !important; max-width: 100% !important; }
  /* Nav buttons stack rather than crowd. */
  .gform_page_footer { display: flex; flex-wrap: wrap; gap: 10px; }
  .gform_page_footer input[type=button],
  .gform_page_footer input[type=submit] { flex: 1 1 140px; }
}

/* Nothing on any page should be able to scroll the document sideways. */
html, body { overflow-x: hidden; }

/* The wizard owns page visibility. !important because Gravity Forms writes
   inline display on these same elements. */
/* Both directions carry !important, so neither can be beaten by the inline
   display Gravity Forms writes on its own pages. Hiding alone was not
   enough: every page but the first ships with an inline display:none, and
   a stylesheet rule without !important loses to it — so the wizard moved
   its progress bar onto a question that stayed invisible. */
.gform_page.tlp-page-off { display: none !important; }
.gform_page.tlp-page-on  { display: block !important; }

/* --- the wizard's Back link sitting on the Next button --------------------
   The footer is a flex column with no gap, and Back is a bare 16px text
   link, so on a step that shows Next (a text box, a slider) the link rested
   directly on the button's top edge. A row gap rather than a margin on
   Back: a gap is only drawn BETWEEN visible children, so the steps where
   Next is hidden and Back stands alone keep their spacing. */
.gform_wrapper .gform_page_footer { row-gap: 16px; }

/* --- states the static build needs --------------------------------------- */
.tlp-state { padding: 40px 24px; text-align: center; }
.tlp-state h3 { margin: 0 0 12px; }
.tlp-senderr {
  margin: 16px 0 0; padding: 14px 16px;
  border: 1px solid #d8b4b4; background: #fdf6f6; color: #7a2e2e;
  font-size: 15px; line-height: 1.5;
}
.tlp-senderr a { color: inherit; text-decoration: underline; }

/* --- apply chooser -------------------------------------------------------- */
.tlp-apply { max-width: 900px; margin: 0 auto; padding: 0 20px 60px; }
.tlp-apply__lead { font-size: 18px; line-height: 1.6; color: #444; margin: 0 0 36px; max-width: 62ch; }
.tlp-officers { list-style: none; margin: 0; padding: 0; }
.tlp-officer {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 0; border-top: 1px solid #e0e0e0;
  text-decoration: none; color: inherit;
}
.tlp-officer:last-child { border-bottom: 1px solid #e0e0e0; }
.tlp-officer__img {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; object-position: center top; background: #eee;
}
.tlp-officer__ph {
  flex: 0 0 auto; width: 72px; height: 72px; border-radius: 50%;
  background: #eee; display: grid; place-items: center;
  font-weight: 700; color: #767676; letter-spacing: .04em;
}
.tlp-officer__body { flex: 1 1 auto; min-width: 0; }
.tlp-officer__name { display: block; font-size: 22px; font-weight: 700; color: #282828; line-height: 1.25; }
.tlp-officer__role { display: block; font-size: 15px; color: #767676; margin-top: 3px; }
.tlp-officer__go {
  flex: 0 0 auto; font-size: 14px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: #000; white-space: nowrap;
  border: 1px solid #ddd; border-radius: 4px; padding: 11px 18px;
  transition: background-color .25s, color .25s, border-color .25s;
}
.tlp-officer:hover .tlp-officer__go { background: #000; border-color: #000; color: #fff; }
.tlp-apply__note { margin: 32px 0 0; color: #767676; font-size: 15px; }
.tlp-apply__note a { color: #282828; }
@media (max-width: 600px) {
  .tlp-officer { flex-wrap: wrap; gap: 14px; }
  .tlp-officer__body { flex: 1 1 60%; }
  .tlp-officer__go { flex: 1 1 100%; text-align: center; }
}

/* --- per-officer apply on the team cards ---------------------------------- */
.tlp-card-apply {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #000; border: 1px solid #ddd; border-radius: 4px; padding: 9px 16px;
  text-decoration: none; transition: background-color .25s, color .25s, border-color .25s;
}
.tlp-card-apply:hover { background: #000; border-color: #000; color: #fff; }

/* ===================================================================== *
 * Mobile fixes — reported 2026-09-26
 * ===================================================================== */

/* --- the logo landing on top of the page heading ---------------------
   Pages with an overlay header put #site-header at position:absolute with
   no background, so it can sit over a dark hero. overlay.min.css enforces
   that with `#site-header.overlay-header.dyn-styles{background:none}`,
   and that rule kept winning once the header went sticky — so the header
   turned into a transparent fixed bar and every heading that scrolled
   under it collided with the logo. A stuck header is no longer over its
   own hero; it needs a surface. */
.wpex-sticky-header-holder.is-sticky #site-header {
  background-color: #fff !important;
}

/* --- /apply/ : clear the overlay header ------------------------------
   The chooser's heading started at the top of the page, which on an
   overlay-header page is underneath the logo. The site's own interior
   rows clear it with 140px; match them. */
.tlp-apply { padding-top: 140px; }
@media (max-width: 767px) { .tlp-apply { padding-top: 120px; } }

/* --- the quote form's Purchase / Refinance tiles ---------------------
   The Image Choices plugin writes a fixed 240px width on the image wrap.
   Inside a 116px column on a phone that is simply cut off down the middle,
   which is what "the questionnaire is glitching" looked like. Give each
   choice the full width of the form and let the artwork scale. */
@media (max-width: 767px) {
  .gform_wrapper .image-choices-choice {
    width: 100% !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .gform_wrapper .image-choices-choice > label { width: 100% !important; }
  .gform_wrapper .image-choices-choice-image-wrap {
    width: 100% !important;
    max-width: 100% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  .gform_wrapper .image-choices-choice-text { width: 100% !important; }
}

/* --- rent vs buy: "Years28 years" ------------------------------------
   The markup is <span>Years</span><strong>28 years</strong>, so the label
   and the value read as one run-on word. The value already says "years". */
.tlp-years-label > span { display: none; }

/* --- contact page: the empty stretches --------------------------------
   Two columns side by side on a desktop become one column on a phone, and
   the spacing that separated them left and right now stacks top to bottom:
   a row's 60px, then a 40px spacer, then the next row's 120px. Halve the
   vertical air on this page only. */
@media (max-width: 767px) {
  .page-id-797 .vcex-spacing { height: 20px !important; }
  .page-id-797 .vc_row[class*="vc_custom_"] {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
  /* enough of a gap that the email address is not sitting on the map */
  .page-id-797 .vc_column-inner { margin-bottom: 26px !important; }
  /* except the first row, whose top padding is not decoration: it is the
     clearance that keeps the title out from under the overlay header. */
  .page-id-797 .wpb-content-wrapper > .vc_row:first-child {
    padding-top: 140px !important;
  }
}

/* --- AppoMark credit in the footer ------------------------------------ */
.tlp-by {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; margin: 0 0 12px; line-height: 1;
}
.tlp-by__label { font-size: 12px; letter-spacing: .04em; opacity: .7; }
.tlp-by a { display: inline-flex; align-items: center; opacity: .75; transition: opacity .2s; }
.tlp-by a:hover, .tlp-by a:focus { opacity: 1; }
.tlp-by img { display: block; height: 22px; width: auto; }

/* --- contact page: the two offices, one block -------------------------
   Listed as rows rather than boxed, and separated by a hairline, so the
   second address reads as another office and not as a repeat of the page. */
.tlp-offices { display: block; }
.tlp-office { padding: 10px 0; }
.tlp-office + .tlp-office {
  border-top: 1px solid rgba(0, 0, 0, .10);
}
.tlp-office__name {
  display: block;
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  opacity: .55;
  margin-bottom: 2px;
}
.tlp-office__addr { display: block; }
.tlp-map-note {
  margin: 8px 0 0;
  font-size: 12px;
  letter-spacing: .02em;
  opacity: .55;
}