/*
 * Responsive fixes on top of Webflow's stylesheet (loaded after it on every page).
 * These fix layouts that break on tablets and phones. Most of the bugs exist on the
 * original Webflow site too. Breakpoints match Webflow's: 991px tablet, 767px large phone,
 * 479px phone.
 */

/* Safety net: nothing may push the page sideways. "clip" (unlike "hidden") keeps sticky/fixed
   elements working. The real causes are fixed below. */
html, body { overflow-x: clip; }
img, video, iframe { max-width: 100%; }

/* Buttons: a few were square while the rest of the site uses 20px rounded corners. Match them. */
.button-outline, .button-filling-chicken { border-radius: 20px; }
/* /certified-partner-network "Get Started": rounded only at 1920px+ in Webflow, square elsewhere */
.button-primary { border-radius: 20px; }
.popup-button, .popup-button .button-overlay-wrapper { border-radius: 20px; overflow: hidden; }

/* Desktop nav dropdowns: Webflow gives the Services and Company panels a fixed 720px width,
   opening to the right of their menu item, so they ran off the right edge of the screen and
   Company was a huge empty panel for 5 links (also on the original Webflow site). */
@media screen and (min-width: 992px) {
  .nav .dropdown-list-3.w--open:not(.area) { max-width: calc(100vw - 40px); }
  /* Company: size to its links */
  .nav .dropdown-list-3.w--open:not(.area):not(:has(.accordion-item-2)) { width: auto; min-width: 220px; padding: 24px 28px; }
  /* Services: a wide two-column "mega menu". Anchor it to the nav bar instead of its menu item,
     flush with the nav's right edge, so it is always inside the page width. */
  .nav .nav-container { position: relative; }
  .nav .dropdown:has(.accordion-item-2) { position: static; }
  .nav .dropdown-list-3.w--open:has(.accordion-item-2) { width: min(800px, 100%); min-width: 0; left: auto; right: 0; z-index: 900;
    /* with a category expanded the panel could be taller than the screen, and the nav is sticky,
       so its bottom was unreachable: scroll inside the panel instead */
    max-height: calc(100vh - 140px); overflow-y: auto; overscroll-behavior: contain; }
  /* long sub-service names wrap instead of spilling into the next column */
  .nav .dropdown-list-3 .accordion-item-2 .global-nav-link-2,
  .nav .dropdown-list-3 .accordion-item-2 .global-nav-link-2 * { white-space: normal; max-width: 100%; }
}
}

@media screen and (max-width: 991px) {
  /* /movebox: fixed 1200px container with no mobile rule */
  .base-container { width: auto; max-width: 1200px; padding-left: 20px; padding-right: 20px; }
  .cta-container { margin-left: 20px; margin-right: 20px; margin-top: 60px; }
  .div-block-3 { padding: 40px 32px; }
  .image-82 { width: 320px; }

  /* /about team grid: cards were forced to 400px inside a 3-column grid */
  .collection-list.team { grid-template-columns: 1fr 1fr; }
  .collection-item { width: auto; }

  /* /careers benefits: 3 fixed columns at every width */
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 767px) {
  /* /movebox "How it works" cards stack */
  .div-block { grid-template-columns: 1fr; }
  .section-4 { padding-top: 60px; padding-bottom: 60px; }
  .section-4.box { padding-top: 30px; padding-bottom: 30px; }

  .collection-list.team { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }

  /* /careers banner heading block ran 3px past the edge */
  /* /specialty-services: text and image stayed side by side, text squeezed to ~150px */
  .flex-about { flex-direction: column; }
  .flex-about > * { width: 100%; max-width: 100%; }

  .max-width { max-width: 100%; }
  .banner-title { width: auto; max-width: 100%; }
  /* /careers headline is 65px at every width, too big for "DESERVES" on phones, which broke
     as "DESERVE / S". Scale it so the longest word always fits. */
  .banner-title.careers { font-size: min(65px, calc((100vw - 40px) / 5.9)); line-height: 1.05; }

  /* /lp/membership hero: Webflow sizes the award badge at 192px between 480-767px, so it
     couldn't sit beside the Google rating widget and dropped far below it. Keep one row and
     let the badge shrink instead. */
  .banner-title-wrap > .d-flex { flex-wrap: nowrap; justify-content: center; }
  .banner-title-wrap > .d-flex .code-embed-2 { margin-top: 0; min-width: 0; flex: 0 1 auto; }
  .banner-title-wrap > .d-flex .image-114 { width: clamp(64px, 18vw, 110px); flex: 0 0 auto; }

  /* Home hero: the text block was absolutely positioned at exactly the screen height, so on
     short phone screens (e.g. 431x447) the badge and buttons spilled over the reviews section
     below (same on the original Webflow site). Put the text back in normal flow so the hero
     grows with its content, and keep the photo slider as a full-size background behind it. */
  .banner-section { height: auto; }
  .banner-section > .home-slider { position: absolute; inset: 0; height: 100%; }
  .banner-section > .home-slider .w-slider,
  .banner-section > .home-slider .w-slider-mask,
  .banner-section > .home-slider .w-slide { height: 100%; }
  .banner-section > .container-4 { position: relative; z-index: 2; }
  .banner-section .home-6-banner-slider-container-3 {
    position: relative; inset: auto; height: auto; min-height: 520px;
    margin-top: 0; padding: 50px 0 60px; justify-content: center;
  }
  /* Between 480-767px Webflow kept text and badge side by side, crushing the headline into a
     narrow column ("Handyma / n"). Stack them like on phones. */
  .banner-section .hero-content-wrap-2.d-flex { flex-direction: column; align-items: center; grid-row-gap: 2rem; }
  .banner-section .left-col, .banner-section .right-col { width: 100%; }
  .banner-section .right-col { display: flex; justify-content: center; }
  .banner-section .image-114 { width: clamp(96px, 22vw, 150px); }
  .banner-section .hero-button-wrap.hero-home.flex.left-align { justify-content: center; align-self: center; margin-left: auto; margin-right: auto; }
  .banner-section .hero-button-wrap .button-2 { margin-right: 0; }

  /* /lp/membership header: "Join Now" was squeezed onto two lines between logo and menu */
  .button.main.membership-btn.my-0 { white-space: nowrap; padding: 8px 14px; font-size: 15px; margin-left: auto; margin-right: 14px; }
  h1, h2, h3 { overflow-wrap: break-word; }
}

@media screen and (max-width: 479px) {
  /* /specialty-services: image forced to 300px and shifted 59px right on phones */
  .image-9 { position: static; inset: auto; width: 100%; height: auto; margin-bottom: 30px; }

  /* Phone-number buttons: Webflow removes their side padding on phones, so the number
     touched the border */
  .button-2.second-one { padding-left: 20px; padding-right: 20px; width: auto; }

  /* Blog posts' related posts and blog category lists: 2 cards of ~170px each */
  .related-posts, .collection-list.grid { grid-template-columns: 1fr; }

  /* /movebox form: City and Zip side by side get too narrow */
  .form-flex { flex-direction: column; grid-row-gap: 0; }
  .form-flex > * { width: 100%; }
  .div-block-3 { padding: 32px 20px; }
}

@media screen and (max-width: 374px) {
  /* /lp/membership hero on the smallest phones: widget and badge can't share a row, so stack
     them centred with a smaller badge */
  .banner-title-wrap > .d-flex { flex-wrap: wrap; }
  .banner-title-wrap > .d-flex .image-114 { width: 72px; }

  /* Long single words ("Caulking/Grouting", "Recommendations") didn't fit at 36px/30px */
  .banner-title { font-size: min(30px, 9.4vw); }
  h3 { font-size: min(24px, 7.5vw); }
}