/* PlumberBee: breakpoints (mobile-first).
   640px  large phones / small tablets
   768px  tablets
   1024px small laptops
   1180px full desktop navigation */

@media (min-width: 640px) {
  .option-grid, .service-grid, .project-grid, .review-grid, .sign-grid, .steps, .area-grid, .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .included__list { grid-template-columns: 1fr 1fr; }
  .why__list { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .city-links { grid-template-columns: repeat(3, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .site-footer__grid > :nth-child(2) { grid-column: 1 / -1; }
  .hero__img, .hero__media img, .page-hero__media img { aspect-ratio: 5 / 4; }
}

@media (min-width: 768px) {
  .topbar { display: block; }
  .trustbar__list { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .trustbar li { padding-inline: 18px; }
  .trustbar li + li { border-left: 1px solid rgb(255 255 255 / 0.14); }
  .trustbar li:first-child { padding-left: 0; }
  .header-phone { width: auto; height: auto; border: 0; }
  .header-phone span { display: inline; }
  .site-header__actions .header-cta { display: inline-flex; }
  .offer { grid-template-columns: 1fr auto; gap: 40px; }
  .offer__actions { justify-items: center; }
  .review-links { grid-template-columns: repeat(3, 1fr); }
  .brand__logo { height: 92px; }
  .site-header__inner { min-height: 108px; }
  .page-hero__icon {
    display: flex; align-items: center; justify-content: center;
    width: 240px; aspect-ratio: 1; border-radius: 50%;
    background: var(--navy); color: var(--gold); justify-self: end;
  }
  .page-hero__icon:has(.page-hero__art) { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
  .feature__icon { display: flex; }
  .page-hero__grid--icon { grid-template-columns: 1fr auto; }
}

@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.08fr 0.92fr; }
  .hero__img, .hero__media img { aspect-ratio: 1 / 1; max-height: 620px; }
  .page-hero--media .page-hero__grid { grid-template-columns: 1.2fr 0.8fr; }
  .page-hero__media img { aspect-ratio: 1 / 1; max-height: 520px; }
  .option-grid, .service-grid { grid-template-columns: repeat(4, 1fr); }
  .service-grid--3, .project-grid, .review-grid, .sign-grid, .area-grid { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .cta-band__inner { grid-template-columns: 1fr auto; gap: 48px; }
  .cta-band__actions { justify-content: flex-end; }
  .included { grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
  .included__copy { position: sticky; top: 120px; }
  .why { grid-template-columns: 0.85fr 1.15fr; gap: 72px; }
  .areas, .nearby { grid-template-columns: 0.9fr 1.1fr; gap: 64px; }
  .compare { grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
  .compare--reverse .compare__copy { order: 2; }
  .feature { grid-template-columns: 1.3fr 0.7fr; gap: 72px; }
  .feature__copy .checklist { grid-template-columns: 1fr 1fr; }
  .lead__grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
  .lead__grid > .lead-form { grid-column: 1; grid-row: 1; }
  .lead__grid > .lead__copy { grid-column: 2; grid-row: 1; }
  .brand-story { grid-template-columns: auto 1fr; gap: 64px; }
  .site-footer__top { grid-template-columns: auto 1fr auto; justify-items: start; align-items: center; gap: 36px; text-align: left; }
  .site-footer__cta { justify-items: end; }
  .site-footer__grid { grid-template-columns: 1fr 1.35fr 1fr; gap: 48px; }
  .site-footer__grid > :nth-child(2) { grid-column: auto; }
  .page-hero__icon { width: 300px; }
  .page-hero__art { width: 230px; height: 230px; }
  .page-hero__grid--aside { grid-template-columns: 1.35fr 0.65fr; gap: 56px; }
  .page-hero__grid--aside:has(.page-hero__map) { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1180px) {
  .project-grid--4, .contact-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Full desktop navigation */
@media (min-width: 1180px) {
  .menu-toggle, .primary-nav__cta, .site-header__actions, .site-header__start { display: none; }
  html { scroll-padding-top: 108px; } /* compact desktop header (93px) + gap */

  /* Centered logo with the menu split to either side */
  .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 136px; transition: min-height 0.2s ease; }
  .brand { grid-column: 2; grid-row: 1; margin: 0; position: relative; z-index: 1; }
  .brand__logo { height: 120px; }
  .site-header.is-scrolled .site-header__inner { min-height: 92px; }
  .site-header.is-scrolled .brand__logo { height: 80px; }

  .primary-nav, .primary-nav:not(.is-open) {
    grid-column: 1 / -1; grid-row: 1;
    position: static; display: grid; grid-template-columns: 1fr 156px 1fr; align-items: center; column-gap: 20px;
    max-height: none; overflow: visible; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .nav-list { display: flex; align-items: center; gap: 2px; }
  .nav-list--left { grid-column: 1; justify-self: end; }
  .nav-list--right { grid-column: 3; justify-self: start; }
  .nav-cta { display: block; margin-left: 10px; }
  .nav-cta .btn { min-height: 44px; padding: 0 18px; white-space: nowrap; }
  .nav-list > li { position: relative; border: 0; }
  .nav-list > li > a:not(.btn), .submenu-toggle {
    width: auto; gap: 4px; padding: 10px 12px; border-radius: 10px;
    font-size: 0.9688rem; font-weight: 600; white-space: nowrap;
  }
  .nav-list > li > a:not(.btn):hover, .submenu-toggle:hover { color: var(--navy-600); background: var(--navy-50); }
  .nav-list > li > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gold); border-radius: 10px 10px 0 0; }

  /* Dropdowns: open on hover, focus or click */
  .submenu, .has-menu > .submenu {
    display: block; position: absolute; top: calc(100% + 10px); left: 50%;
    min-width: 290px; padding: 10px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  }
  .submenu::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
  .has-menu.is-open > .submenu, .has-menu:focus-within > .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
  .has-menu > .submenu--areas { min-width: 470px; }
  .submenu--areas ul { grid-template-columns: 1fr 1fr; column-gap: 6px; }
  .submenu a { white-space: nowrap; }
  .submenu__all { border-top: 1px solid var(--line); border-radius: 0 0 8px 8px !important; margin-top: 8px; padding-top: 12px !important; }
}
@media (min-width: 1180px) and (hover: hover) {
  .has-menu:hover > .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
}

@media (min-width: 1440px) {
  :root { --container: 1240px; }
}

@media (min-width: 1920px) {
  :root { --container: 1320px; }
  body { font-size: 1.125rem; }
}

@media print {
  .topbar, .site-header, .lead-form, .site-footer__social { display: none !important; }
  body { padding: 0; }
}