/* Site polish layer (2026-11-02), loaded on every page by src/lib/optimize.mjs
   right before reduced-motion.css, which zeroes every duration below for visitors
   who asked for reduced motion. Same pattern as the fleet's Astro sites (turner-septic
   #59): header state on scroll, current-page marker, floating call button, press
   feedback, scroll reveals. Everything here layers over the mirrored Elementor
   markup; nothing in the captured fragments changes. */

/* ---------- header: compact, darker and shadowed once the page scrolls ----------
   The header container is Elementor sticky from the first pixel; polish.js toggles
   html.ty-scrolled past 24px. */
.elementor-location-header .elementor-element-1663c180 {
  transition: box-shadow 250ms ease, background-color 250ms ease;
}
.elementor-location-header .elementor-element-3694ec67 img {
  transition: width 250ms ease, height 250ms ease;
}
html.ty-scrolled .elementor-111 .elementor-element.elementor-element-1663c180:not(.elementor-motion-effects-element-type-background) {
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
@media (min-width: 1025px) {
  html.ty-scrolled .elementor-111 .elementor-element.elementor-element-3694ec67 img {
    width: 62px;
    height: 58px;
  }
}

/* ---------- nav: underline slides in on hover, stays on the current page ---------- */
.elementor-nav-menu--main .elementor-item {
  position: relative;
}
.elementor-nav-menu--main .elementor-item::after {
  content: "";
  position: absolute;
  left: 0.9em;
  right: 0.9em;
  bottom: 0.55em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
}
.elementor-nav-menu--main .elementor-item:hover::after,
.elementor-nav-menu--main .elementor-item:focus-visible::after,
.elementor-nav-menu--main .elementor-item.elementor-item-active::after {
  transform: scaleX(1);
}

/* ---------- press feedback on every tappable element ---------- */
.elementor-button,
.elementor-nav-menu a,
#ty-cb a,
#ty-tg-bar a,
.ty-tg-cta {
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}
.elementor-button:hover,
.elementor-button:focus-visible {
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}
.elementor-button:active,
#ty-cb a:active,
.ty-tg-cta:active,
.ty-float-call:active {
  transform: scale(0.98);
}

/* ---------- floating call button, bottom left, tablet and desktop ----------
   On phones the fixed Call / Explore My Options bar already does this job, so
   the button only shows from 768px. It clears the Thanksgiving bar while that
   is on (polish.js keeps --ty-tg-h at the bar's height) and sits on the left
   because the accessibility widget owns the bottom right corner. */
.ty-float-call {
  position: fixed;
  left: max(20px, env(safe-area-inset-left, 0px));
  bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + var(--ty-tg-h, 0px));
  z-index: 9990;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 13px 22px 13px 18px;
  border: 1px solid #fff;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-family: "Lato", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.4px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    transform 150ms ease,
    bottom 250ms ease;
}
@media (min-width: 768px) {
  .ty-float-call {
    display: inline-flex;
  }
}
.ty-float-call:hover,
.ty-float-call:focus-visible {
  background: #fff;
  color: #000;
  border-color: #000;
  text-decoration: none;
}
.ty-float-call:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}
.ty-float-call svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: currentColor;
}
@media print {
  .ty-float-call {
    display: none !important;
  }
}

/* ---------- contact page: intro above the questionnaire ---------- */
.ty-contact-intro {
  margin: 0 0 26px;
  padding: 0 6px;
  text-align: center;
  font-size: 17px;
  line-height: 1.65;
  color: #222;
}
.ty-contact-intro p {
  margin: 0;
}
@media (min-width: 768px) {
  .ty-contact-intro {
    font-size: 18px;
    padding: 0 12px;
  }
}

/* ---------- scroll reveals: sections below the first screen fade up once ----------
   polish.js adds .ty-reveal only to sections that start below the viewport at
   load, so nothing already on screen blinks, and skips it entirely under reduced
   motion or without IntersectionObserver. */
.ty-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.ty-reveal.ty-in {
  opacity: 1;
  transform: none;
}

/* ---------- header logo: natural width from 768px up ----------
   Elementor sized the logo widget at 5.6% of the row with 90px of right padding,
   border-box, so the image either overflowed into the wordmark (narrow desktops)
   or collapsed to 0px (tablets). Let the widget take the image's width, and on
   tablets keep the logo and wordmark together on the left with the menu button
   on the right. */
@media (min-width: 768px) {
  .elementor-111 .elementor-element.elementor-element-3694ec67 {
    width: auto;
    max-width: none;
    padding: 0 12px 0 0;
    --container-widget-width: auto;
  }
  /* Elementor tucked the wordmark 47px under the logo's padding; not needed now. */
  .elementor-111 .elementor-element.elementor-element-0e29e5c {
    margin-left: 0;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-111 .elementor-element.elementor-element-3694ec67 img {
    width: 74px;
    height: 74px;
  }
  .elementor-111 .elementor-element.elementor-element-0e29e5c {
    margin-right: auto;
  }
}

/* ---------- narrow desktops (1025 to 1199px) ----------
   The full menu, the mark and the two-line wordmark do not fit side by side here
   (the live site let the wordmark run under "HOME"). Smaller mark and wordmark,
   tighter menu spacing, and everything sits on one row without overlap. */
@media (min-width: 1025px) and (max-width: 1199px) {
  .elementor-111 .elementor-element.elementor-element-3694ec67 {
    padding: 0 8px 0 0;
  }
  .elementor-111 .elementor-element.elementor-element-3694ec67 img {
    width: 62px;
    height: 58px;
  }
  .elementor-111 .elementor-element.elementor-element-0e29e5c {
    width: 150px;
    max-width: 150px;
    margin: 0 14px 0 0;
    --container-widget-width: 150px;
  }
  .elementor-111 .elementor-element.elementor-element-0e29e5c .elementor-heading-title {
    font-size: 21px;
    letter-spacing: 2px;
    line-height: 1.1;
  }
  .elementor-111 .elementor-element.elementor-element-74b53f47 {
    --e-nav-menu-horizontal-menu-item-margin: 7px;
  }
}