/*
 * The static shell also contains legacy waypoints, which remain in their
 * existing completed state. The homepage's seven G1/G2 icons override that
 * baseline only until they enter the viewport. The source stylesheet supplies
 * fadeTop when mirror.js adds .et-animated; screenshot tooling pins its own
 * capture-only end state, so visitor rendering remains deterministic at rest.
 */
.et-waypoint:not(.et_pb_counters) {
  opacity: 1;
}

.tpm-howitwork-col .et-waypoint.et_pb_animation_top:not(.et-animated),
.tpm-whatwedo-col .et-waypoint.et_pb_animation_top:not(.et-animated) {
  opacity: 0;
}

/* fitvids injects these rules at runtime on pages with video embeds; the
   static mirror wraps the same embeds at import time, so the CSS ships here. */
.fluid-width-video-wrapper {
  width: 100%;
  position: relative;
  padding: 0;
}

.fluid-width-video-wrapper iframe,
.fluid-width-video-wrapper object,
.fluid-width-video-wrapper embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Local Kadence gallery lightbox (G6). */
body.tpm-lightbox-open {
  overflow: hidden;
}

.tpm-local-lightbox[hidden] {
  display: none;
}

.tpm-local-lightbox {
  align-items: center;
  background: rgba(24, 26, 58, 0.88);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 1rem;
  position: fixed;
  z-index: 100000;
}

.tpm-local-lightbox__panel {
  background: #ffffff;
  border-radius: 8px;
  box-sizing: border-box;
  max-height: calc(100vh - 2rem);
  max-width: min(96vw, 960px);
  overflow: auto;
  padding: 3.5rem 1rem 1rem;
  position: relative;
  width: max-content;
}

.tpm-local-lightbox__title {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.tpm-local-lightbox__close,
.tpm-local-lightbox__previous,
.tpm-local-lightbox__next {
  --tpm-control-bg: #3a3d72;
  --tpm-control-fg: #ffffff;
  --tpm-control-hover-bg: #90c423;
  --tpm-control-hover-fg: #3a3d72;
  --tpm-control-focus: #3a3d72;
  align-items: center;
  appearance: none;
  background: var(--tpm-control-bg);
  border: 2px solid var(--tpm-control-bg);
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--tpm-control-fg);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 600;
  justify-content: center;
  line-height: 1.2;
  min-height: 2.75rem;
  min-width: 6rem;
  padding: 0.65rem 1rem;
  transition: none;
}

.tpm-local-lightbox__close:hover,
.tpm-local-lightbox__close:focus,
.tpm-local-lightbox__previous:hover,
.tpm-local-lightbox__previous:focus,
.tpm-local-lightbox__next:hover,
.tpm-local-lightbox__next:focus {
  background: var(--tpm-control-hover-bg);
  border-color: var(--tpm-control-hover-bg);
  color: var(--tpm-control-hover-fg);
}

.tpm-local-lightbox__close:focus,
.tpm-local-lightbox__previous:focus,
.tpm-local-lightbox__next:focus {
  outline: 3px solid var(--tpm-control-focus);
  outline-offset: 2px;
}

.tpm-local-lightbox__close {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 1;
}

.tpm-local-lightbox__media {
  align-items: center;
  background: #f5f6f8;
  display: flex;
  justify-content: center;
  min-height: 5rem;
  min-width: min(20rem, 80vw);
}

.tpm-local-lightbox__message {
  color: #3a3d72;
  margin: 2rem;
  text-align: center;
}

.tpm-local-lightbox__image {
  display: block;
  height: auto;
  max-height: calc(100vh - 10rem);
  max-width: min(90vw, 900px);
  object-fit: contain;
  width: auto;
}

.tpm-local-lightbox__caption {
  color: #3a3d72;
  font-size: 0.95rem;
  margin: 0.75rem 0;
  text-align: center;
}

.tpm-local-lightbox__controls {
  display: flex;
  flex-shrink: 0;
  gap: 0.75rem;
  justify-content: center;
}

.tpm-local-lightbox__panel--review {
  max-width: calc(100vw - 1rem);
  overflow: hidden;
  padding: 3.5rem 1rem 1rem;
  width: min(544px, calc(100vw - 1rem));
}

.tpm-local-lightbox__panel--review .tpm-local-lightbox__media {
  height: min(512px, calc(100vw - 2rem), calc(100vh - 18rem));
  min-height: 0;
  min-width: 0;
  width: min(512px, calc(100vw - 2rem), calc(100vh - 18rem));
}

.tpm-local-lightbox__panel--review .tpm-local-lightbox__image {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}

.tpm-local-lightbox__review-highlight {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 9.5rem;
  padding: 0.65rem 0.25rem 0.2rem;
  width: 100%;
}

.tpm-local-lightbox__stars {
  color: #3a3d72;
  flex-shrink: 0;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-align: left;
}

.tpm-local-lightbox__review-author,
.tpm-local-lightbox__review-text,
.tpm-local-lightbox__review-counts {
  color: #3a3d72;
  margin: 0;
}

.tpm-local-lightbox__review-author {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

.tpm-local-lightbox__review-text {
  display: -webkit-box;
  flex: 1 1 auto;
  font-size: 0.85rem;
  line-height: 1.35;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tpm-local-lightbox__review-counts {
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1.25;
}

.tpm-local-lightbox__review-link {
  align-self: flex-start;
  color: #3a3d72;
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1.25;
  text-decoration: underline;
}

.tpm-local-lightbox__review-link:focus {
  outline: 3px solid #3a3d72;
  outline-offset: 2px;
}

.tpm-local-lightbox__caption--status,
.tpm-local-lightbox__visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media only screen and (max-width: 767px) {
  .tpm-local-lightbox {
    padding: 0.5rem;
  }

  .tpm-local-lightbox__panel {
    max-height: calc(100vh - 1rem);
    max-width: 100vw;
    padding: 3.5rem 0.5rem 0.75rem;
    width: 100%;
  }

  .tpm-local-lightbox__panel--review {
    padding: 3.5rem 0.5rem 0.75rem;
  }

  .tpm-local-lightbox__panel--review .tpm-local-lightbox__media {
    height: min(512px, calc(100vw - 2rem), calc(100vh - 18rem));
    width: min(512px, calc(100vw - 2rem), calc(100vh - 18rem));
  }

  .tpm-local-lightbox__review-highlight {
    height: 9.5rem;
  }

  .tpm-local-lightbox__media {
    min-width: 0;
  }

  .tpm-local-lightbox__image {
    max-height: calc(100vh - 11rem);
    max-width: calc(100vw - 2rem);
  }
}

/* ---------------------------------------------------------------------------
   Review media thumbnails must keep their natural aspect ratio.

   The review plugin sizes these with `img.wprev_media_img{height:50px;...}`
   (see public/assets/css/468b6d9e9710897e.css) and sets NO width at all,
   expecting the intrinsic ratio to supply it. That is exactly what breaks once
   a width presentational hint exists: an HTML `width` attribute becomes the
   used width, and it outranks that implicit `width:auto`, so a 384x512 photo
   declaring width="384" renders 384x50 (stretched) instead of 37.5x50.
   Measured in Chromium with the plugin rule but no override below: 384.0px
   wide, against 37.5px with it.

   The unified loading policy now sets real width/height on these thumbnails,
   because the policy refuses to lazify an image whose box it cannot reserve and
   an unreserved lazy image is a CLS bug. So the policy and the plugin rule
   would fight, and this declaration is what settles it: `width:auto` restores
   the intrinsic-ratio behaviour the plugin assumed, so the reserved box is
   correct before load, after load, and regardless of whether mirror.js has run.

   Specificity note: this does not fight the plugin's `height`. That rule sets
   height (in one copy `!important`) and no width, so there is no conflict --
   this only supplies the width the plugin left implicit. Do not "simplify" it
   to `max-width:100%`, which would let a wide thumbnail grow past its 50px row
   box on wide viewports.
   --------------------------------------------------------------------------- */
img.wprev_media_img {
  width: auto;
}

/* ---------------------------------------------------------------------------
   Desktop header CTA row: keep "Get free quote" and the phone button on one
   line at every width from 1367px up.

   Upstream Divi renders the right-hand header column as a plain block whose
   children are inline-blocks: the desktop menu (.pet-custom-menu, itself an
   inline-block) followed by the two .et_pb_button_module_wrapper divs. Because
   the column is text-align:right, the button wrappers are pulled to the right
   edge only as long as all three inline-blocks share one line box. The menu's
   left edge is the line's start, so the row fits only while

     menu + quote + phone + margins <= column width

   and swaps to two lines the moment it does not. At >=1367px the buttons are
   back at their full size (the captured 10px/20px shrink stops at
   max-width:1355px), so the required width is fixed at 987px. The column is
   3/4 of a row that is 90% of the viewport (capped at 1366px), i.e.

     column = 0.75 * 0.9 * viewport

   which reaches 987px only at viewport >= ~1462px. Between 1367px and 1461px
   the rounded phone button therefore drops onto a second line, doubling the
   header to ~150px -- exactly the reported 1366-1400px symptom. (Above a
   1517.8px viewport the row hits its 1366px max-width, so the column stops
   growing and stays safe.)

   The fix makes the column a no-wrap flex row instead of relying on inline
   line-breaking: the menu and both button wrappers become flex items on a
   single line, so the buttons can no longer be pushed onto a second line.

   Two supporting declarations keep the header at its normal 92px height while
   the flex line is short of space. Divi sets `flex-wrap:wrap` on `.et-menu.nav`
   and its `.et_pb_menu__wrap` parent, and the `li` items shrink by default
   (`min-width:auto`, `flex-shrink:1`); once the line is squeezed, the items
   compress, their labels wrap onto two lines and each row grows to 96px, which
   inflated the header to 106px. Pinning the two wrappers to one row and
   stopping the labels from wrapping keeps every item at its natural width, so
   the menu simply reaches further left instead of growing taller -- the same
   geometry the page already had from ~1462px up.

   This changes nothing at <=1366px: the media query does not match there, so
   the captured block/inline-block layout is untouched. It also does not shrink
   the menu below its natural width, so no nav label is ever clipped.

   `align-items:baseline` reproduces the captured vertical placement exactly.
   The buttons sit on the nav's text baseline in the original block layout, so
   baseline alignment yields the same y offsets that the page already had above
   1462px (and `center` would have nudged both buttons down by 2px).

   No !important: `display:flex`, `flex-wrap:nowrap` and `white-space:nowrap`
   are all uncontested on these elements in the captured sheets, so ordinary
   author declarations win here without one.
   --------------------------------------------------------------------------- */
@media (min-width: 1367px) {
  .tpm-header-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-end;
  }

  /* The menu keeps its natural width instead of shrinking: if it were allowed
     to compress, its nowrap list would overflow the shrunken box and slide
     under the buttons (the "MORE" label ended up beneath GET FREE QUOTE). At
     natural width the flex line is simply wider than the 3/4 column and, with
     `justify-content:flex-end`, it extends to the left over the (empty) area
     next to the logo -- the same leftward reach the page already had from
     ~1462px up, with no overlap and no clipping. */
  .tpm-header-right > .pet-custom-menu {
    flex: 0 0 auto;
  }

  /* Hold the nav on one row at its natural width while the flex line is
     shorter than the column. */
  .tpm-header-right > .pet-custom-menu .et-menu.nav,
  .tpm-header-right > .pet-custom-menu .et_pb_menu__wrap {
    flex-wrap: nowrap;
  }

  .tpm-header-right > .pet-custom-menu .et-menu.nav > li > a {
    white-space: nowrap;
  }

  .tpm-header-right > .et_pb_button_module_wrapper {
    flex: 0 0 auto;
    display: inline-block;
  }
}

/* ---------------------------------------------------------------------------
   Desktop header CTA row, take two: keep the two buttons on one line at every
   width where the DESKTOP header is the one on screen (981px and up).

   The 1367px block above closes the >=1367px window, but two more windows sat
   below it, and all of them come from the same place: this page's own captured
   theme CSS (public/assets/css/a998ea424de75617.css) shrinks the header
   furniture in two nested max-width queries, and neither lines up with Divi's
   own 981px desktop/tablet switch:

     @media (max-width:1355px) { li a {font-size:11px}  button {font-size:10px;
                                 padding-left/right:25px} li {padding:0 6px} }
     @media (max-width:1023px) { li a {font-size:10px}  button {font-size:10px;
                                 padding-left/right:20px} li {padding:0 5px} }

   Measured in Chromium against the built site, the row needs:

     width    menu     quote   phone   row total   column    verdict
      981px   336.6    142.3   157.0      665.9     662.2   SHORT by  3.8px
     1023px   336.6    142.3   157.0      665.9     690.5   fits by  24.6px
     1024px   378.4    152.3   167.0      727.8     691.2   SHORT by 36.6px
     1078px   378.4    152.3   167.0      727.8     727.6   SHORT by  0.2px
     1079px   378.4    152.3   167.0      727.8     728.3   fits by   0.5px
     1366px   557.9    198.8   200.0      986.8     922.0   SHORT by 64.7px
     1367px   557.9    198.8   200.0      986.8     922.7   (1367px block covers)

   So there were THREE stacked windows, not one, and the previous fix left the
   first two plus the 1366px pixel itself broken:
     *    981-986px -- the 1023px shrink is in force, but the column is at its
                       narrowest and is still 3.8px short.
     *   1024-1078px -- buttons AND labels grow back at 1024 (the 1023px query
                       stops matching) while the column is still growing with
                       the viewport. 55px wide, and at 1078px it misses by
                       0.2px.
     *   1356-1366px -- buttons and labels grow back at 1356 (the 1355px query
                       stops matching), 11px before the 1367px block takes over.

   The row is a plain block whose children are inline-blocks, so it wraps to two
   lines the moment it is one pixel short: a 0.2px shortfall at 1078px produced a
   142px-tall header, and the 64.7px shortfall at 1366px produced 150.5px.

   Column width: .et_pb_row is 90% of the viewport, capped at the captured
   1366px max-width, and .tpm-header-right is 3/4 of it, so
   column = 0.75 * 0.9 * viewport = 0.675 * viewport. Measured 717.52px at a
   1063px viewport against 0.675 * 1063 = 717.5px -- exact.

   The fix is the same technique as the 1367px block, applied to the whole
   desktop range instead of a slice of it, so the row can no longer wrap at any
   desktop width. Repeating the declarations in a second block rather than
   widening the existing query keeps the >=1367px window's geometry identical
   to what it was before this change (verified pixel-for-pixel at 1367/1400/
   1461/1500/1600/2000).

   How it behaves once the row is wider than the column. Below roughly a 1462px
   viewport the column cannot hold the row, so the nowrap flex line starts
   further left than the column's content box and runs over the gutter next to
   the logo. That is exactly the geometry the page already had above ~1462px,
   where the row fits and simply starts at the column's left edge. Measured left
   edges of the nav box vs the logo image's right edge, after the fix:

       viewport   nav box left   logo right   clearance
        981px        255.0         278.1       -23.1  (overlaps logo box)
       1024px        234.0         280.2       -46.2  (overlaps logo box)
       1063px        271.1         282.2       -11.1  (overlaps logo box)
       1100px        306.2         284.0       +22.2
       1366px        299.9         297.3        +2.6

   The nav box carries 11px of left padding and, more importantly, the first
   menu item only starts after the logo image itself ends horizontally -- at
   981px the logo artwork's right edge is at x=278 and "ABOUT US" is drawn from
   x=310.92, because the logo image is 49px tall inside a taller column and the
   nav sits well below it. The nav box crossing the logo's *box* is therefore
   not textual overlap: no label is ever painted over the artwork, no label is
   clipped, and `document.scrollWidth` equals `innerWidth` at every width, so
   nothing is pushed off-screen or into a horizontal scrollbar. The screenshots
   in /tmp/header2-*.png confirm the rendering.

   This block changes layout only. It deliberately does NOT touch the
   `font-size`, `padding` and `li` spacing that a998ea424de75617.css forces with
   !important, so no nav label is made smaller or tighter than the captured
   design already had it -- and it does not fight that sheet with !important of
   its own. `display`, `flex-wrap` and `white-space` are uncontested on these
   elements, so ordinary author declarations win.

   `align-items:baseline` reproduces the captured vertical placement: in the
   block layout the buttons sit on the nav's text baseline, so the wrappers keep
   landing at their original y offsets (23px / 20px above 1356px, 24px at and
   below it) instead of being centred and nudged. The 3px offset between the two
   buttons above 1356px is the captured design (the phone button has a larger
   font-size and so a lower baseline); the fix preserves it rather than
   flattening it. What the fix removes is only the *vertical stacking* -- the
   10px horizontal gap between the two wrappers is measured intact at every
   width.
   --------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .tpm-header-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-end;
  }

  /* Natural width, never shrunk: a compressed menu would overflow its own box
     and slide under the buttons. Extending left over the gutter beside the logo
     is the intended behaviour, not a defect. */
  .tpm-header-right > .pet-custom-menu {
    flex: 0 0 auto;
  }

  /* Keep the nav on one row at its natural width, and keep its labels from
     wrapping onto a second line (which used to inflate the header to 106px). */
  .tpm-header-right > .pet-custom-menu .et-menu.nav,
  .tpm-header-right > .pet-custom-menu .et_pb_menu__wrap {
    flex-wrap: nowrap;
  }

  .tpm-header-right > .pet-custom-menu .et-menu.nav > li > a {
    white-space: nowrap;
  }

  .tpm-header-right > .et_pb_button_module_wrapper {
    flex: 0 0 auto;
    display: inline-block;
  }
}

/* ---------------------------------------------------------------------------
   Sticky header: center the row, and stop the captured shrink from leaving
   the header buttons unreadably small.

   #global-scroll-header (.et_pb_section_2_tb_header.tpm-scroll-header) is the
   fixed bar mobile-nav.js reveals after 120px of scroll. It is a second copy
   of the desktop header, so the flex row above applies to it too, but three
   captured declarations keep its contents sitting high in a tall bar:

     * a998ea424de75617.css gives the scroll header's menu links
       padding:24px 0 !important, and the section only has 5px of padding, so
       the bar is ~92px while the buttons (height ~48px) center near y=39.
     * the same sheet forces a.et_pb_button.tpm-head-buttom down to 10px
       below 1356px. At 1440px the quote button is 13px and the phone link
       is 15px; from 1100px down both are 10px. Nav link sizes stay with
       that sheet: 15px at 1440px already clears the logo, and 15px at
       1100px or 981px runs the labels across the artwork. The green phone
       circle (.mobile, a space for a label) is left alone.
     * fad3b861191d1337.css (and its per-route copies) adds margin-top:7px
       !important to the scroll header's two button wrappers and its logo.

   Scoped to #global-scroll-header so the non-scrolled header
   (#global-desktop-header / #global-mobile-header) keeps the captured layout.
   !important is required: every rule this corrects is itself !important in
   those captured sheets, which load before this file.
   --------------------------------------------------------------------------- */
/* Vertical padding is what made the bar ~92px with the links stuck near the
   top. Font size stays with the captured sheets: 15px above 1355px, 11px
   down to 1024px, 10px from there to the 981px desktop floor. Forcing 15px
   at 1100px and 981px runs the labels across the logo artwork. */
#global-scroll-header .pet-custom-menu ul li.menu-item a {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Quote pills were 13px above 1355px and 10px below it. 14px is the floor
   asked for on desktop and still above the 13px phone/tablet floor. The
   orange phone link is already 15px above 1355px, so it stays at 15px
   rather than being shrunk to meet the same floor. Side padding stays
   with the captured sheets except below 1100px, where the rule at the
   bottom of this block tightens it so the larger type still clears the logo. */
#global-scroll-header a.et_pb_button.tpm-head-buttom:not(.mobile),
#global-scroll-header a.et_pb_button.tpm-head-buttom:not(.mobile):hover {
  font-size: 14px !important;
}

/* Same specificity as the 14px rule above, later in the file, so the orange
   phone link keeps the 15px it already has above 1355px instead of dropping
   to the quote-pill floor. */
#global-scroll-header a.et_pb_button.tpm-head-buttom.et_pb_button_6_tb_header,
#global-scroll-header a.et_pb_button.tpm-head-buttom.et_pb_button_6_tb_header:hover,
#global-scroll-header a.et_pb_button.tpm-head-buttom.et_pb_button_8_tb_header,
#global-scroll-header a.et_pb_button.tpm-head-buttom.et_pb_button_8_tb_header:hover {
  font-size: 15px !important;
}

#global-scroll-header .et_pb_button_5_tb_header_wrapper,
#global-scroll-header .et_pb_button_6_tb_header_wrapper,
#global-scroll-header .et_pb_image_1_tb_header {
  margin-top: 0 !important;
}

#global-scroll-header .et_pb_row_3_tb_header,
#global-scroll-header .et_pb_row_4_tb_header {
  display: flex;
  align-items: center;
}

/* Row 4 (the tablet/phone button row) is padded 10px on top and 0 below, so
   the pills sit low in the bar. The section already has 5px of padding on
   both sides; zeroing the row padding lets that center them. display:none
   !important on this row at >=981px still wins, so the desktop row is
   untouched. */
#global-scroll-header .et_pb_row_4_tb_header {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* The green phone circle is shorter than the quote pill, and the captured
   sheet top-aligns these wrappers, so the circle sits high. Middle-align
   them on the same line. */
#global-scroll-header .custom-mobile-header .et_pb_button_module_wrapper.et_pb_module {
  vertical-align: middle;
}

/* Below 1356px the captured sheets shrink header type, and the row is only
   90% of the viewport. Raising the buttons to 14px/15px then pushes the nav
   across the logo artwork (measured overlap 64px at 1100, 110px at 981).
   The sticky bar can use the side gutters the static header keeps; 12px
   keeps the pills off the viewport edge. Nav size and button colors stay
   as captured. */
@media (max-width: 1355px) {
  #global-scroll-header .et_pb_row_3_tb_header {
    width: 100%;
    max-width: none;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Full width is not enough at the 981px desktop floor or just above the
   1024px nav-size step (measured overlap 37px and 55px). 8px of side
   padding, only on this row and only below 1100px, gives the labels about
   10px of clearance past the logo artwork. 1100px and up already clear
   with the captured padding. */
@media (max-width: 1099px) {
  #global-scroll-header .et_pb_row_3_tb_header a.et_pb_button.tpm-head-buttom,
  #global-scroll-header .et_pb_row_3_tb_header a.et_pb_button.tpm-head-buttom:hover {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}