/* ===== Mobile navigation (hamburger + drawer) + responsive polish =====
   Loaded after megamenu.css so it wins. Desktop is unaffected: the burger and
   drawer are display:none until <=1024px (where .nav-links is already hidden). */

/* hamburger button — hidden on desktop */
.nav-burger{ display:none; }

@media (max-width:1024px){
  /* nav bar: FLEX (not the 3-col grid) so the burger sits on the RIGHT.
     With .nav-links display:none, the grid auto-placed .nav-cta into the
     middle column — flex + space-between fixes that. */
  .nav-inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; }
  .nav-phone{ display:none; }
  .nav-cta{ gap:14px; align-items:center; }
  .nav-cta .btn-primary{ padding:11px 16px; font-size:13px; white-space:nowrap; }
  .logo.logo-img img{ height:38px; }

  /* editorial hamburger: "MENU" label + minimal rules, no boxed/techy button */
  .nav-burger{
    order:9; display:inline-flex; flex-direction:row; align-items:center; gap:10px;
    width:auto; height:auto; padding:6px 0; margin:0;
    border:none; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .nav-burger .nb-txt{
    font-family:var(--ff-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink); transition:color .2s;
  }
  .nav-burger .nb-ico{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:26px; }
  .nav-burger .nb-ico i{ display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:background .2s, width .25s; }
  .nav-burger .nb-ico i:nth-child(2){ width:70%; margin-left:auto; }   /* subtle offset — a touch of craft */
  .nav-burger:hover .nb-txt{ color:var(--orange); }
  .nav-burger:hover .nb-ico i{ background:var(--orange); width:100%; }
}

/* very small screens: the drawer carries the CTA, so free the top bar */
@media (max-width:430px){
  .nav-cta .btn-primary{ display:none; }
  .logo.logo-img img{ height:34px; }
}

/* ---------- slide-in drawer ---------- */
.mnav{ position:fixed; inset:0; z-index:1000; visibility:hidden; }
.mnav.open{ visibility:visible; }
.mnav-backdrop{
  position:absolute; inset:0; background:rgba(14,14,14,.5);
  opacity:0; transition:opacity .3s ease;
}
.mnav.open .mnav-backdrop{ opacity:1; }
.mnav-panel{
  position:absolute; top:0; right:0; height:100%; width:min(87vw,360px);
  background:#fff; box-shadow:-24px 0 70px rgba(14,14,14,.22);
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mnav.open .mnav-panel{ transform:translateX(0); }

.mnav-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--gray-08); position:sticky; top:0; background:#fff; z-index:2;
}
.mnav-logo{ font-family:var(--ff-display); font-size:20px; color:var(--ink); }
.mnav-close{ background:none; border:none; font-size:30px; line-height:1; color:var(--ink);
  cursor:pointer; padding:0 6px; }

.mnav-links{ display:flex; flex-direction:column; padding:6px 0; }
.mnav-links > a, .mnav-acc-btn{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:15px 22px; font-family:var(--ff-sans); font-size:16px; font-weight:600;
  color:var(--ink); text-transform:none; letter-spacing:0;
  border-bottom:1px solid var(--gray-08);
}
.mnav-links > a:active, .mnav-acc-btn:active{ background:var(--off-white); }
.mnav-links > a:hover, .mnav-acc-btn:hover{ color:var(--orange); }
.mnav-acc{ border-bottom:1px solid var(--gray-08); }
.mnav-acc .mnav-acc-btn{ border-bottom:none; }
.mnav-caret{ width:9px; height:9px; flex:0 0 auto; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-1px,-1px); transition:transform .25s ease; }
.mnav-acc.open .mnav-caret{ transform:rotate(-135deg); color:var(--orange); }

.mnav-sub{ max-height:0; overflow:hidden; background:var(--off-white); transition:max-height .3s ease; }
.mnav-acc.open .mnav-sub{ max-height:760px; }
.mnav-sub a{
  display:block; padding:13px 22px 13px 34px; font-family:var(--ff-sans); font-size:14.5px;
  color:var(--ink-80); text-transform:none; letter-spacing:0; border-bottom:1px solid var(--gray-08);
}
.mnav-sub a:last-child{ border-bottom:none; }
.mnav-sub a:hover{ color:var(--orange); }

.mnav-cta{ margin-top:auto; padding:20px 22px 30px; display:flex; flex-direction:column; gap:14px;
  border-top:1px solid var(--gray-08); }
.mnav-cta .btn-primary{ justify-content:center; text-align:center; }
.mnav-phone{ text-align:center; font-family:var(--ff-sans); font-weight:600; font-size:15px; color:var(--ink); }

body.mnav-lock{ overflow:hidden; }

/* ---------- section spacing polish on phones ---------- */
@media (max-width:640px){
  /* the "8+ years / family-owned" media band stacks with big dead space; tighten it */
  .brands-band{ padding:56px 0 48px; }
  .about-grid, .contact-grid, .trust-grid{ gap:28px; }
}

/* ===== Mobile fixes round 2 — sections that didn't stack (2026-07-09) ===== */
@media (max-width:820px){
  /* reviews footer (4.9 · BBB · Angi + link): was a cramped flex row; stack it,
     drop the tall vertical divider bars (2nd & 4th children) */
  .t-footer{ flex-direction:column; align-items:flex-start; gap:22px; }
  .t-score{ flex-direction:column; align-items:flex-start; gap:14px; }
  .t-score > div:nth-child(2), .t-score > div:nth-child(4){ display:none; }

  /* orange CTA band: was grid 2fr/1fr overlapping the mascot; stack it, and give
     the mascot its own clear zone at the bottom (extra padding) so it never
     overlaps the full-width buttons */
  .cta-band{ padding-bottom:150px; }
  .cta-band .container{ grid-template-columns:1fr; gap:26px; }
  .cta-band h2{ max-width:none; }
  .cta-band .right{ width:100%; }
  .cta-band .right .btn{ width:100%; justify-content:center; }
  .cta-mascot{ width:120px; right:8px; bottom:8px; opacity:.9; }
}

@media (max-width:600px){
  /* contact details (phone/email/insta/hours): 2-col cramped, email overflowed */
  .contact-details{ grid-template-columns:1fr; gap:20px; }
  .c-detail .val{ font-size:19px; overflow-wrap:anywhere; }

  /* quote form: first/last, email/phone etc. side-by-side too tight → one column */
  .form-grid{ grid-template-columns:1fr; }
  .form-grid .field.full{ grid-column:auto; }

  /* form footer: the fine print was squished into a narrow column next to the
     button. Stack it — full-width note above, full-width button below. */
  .form-actions{ flex-direction:column; align-items:stretch; gap:16px; }
  .form-actions small{ text-align:center; line-height:1.5; }
  .form-actions .btn{ width:100%; justify-content:center; }
}

/* ===== Main footer — was cramped 2×2 with the mascot over the bottom bar ===== */
@media (max-width:680px){
  .footer{ padding:56px 0 32px; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:34px 22px; }
  .footer-brand{ grid-column:1 / -1; }                 /* brand block full width on top */
  .footer-brand .tag{ font-size:23px; margin-top:16px; }
  .footer-brand p{ margin-top:16px; max-width:none; }
  .footer-grid > div:nth-child(4){ grid-column:1 / -1; } /* Contact full width (long email) */
  .footer h4{ margin-bottom:14px; }
  .footer ul{ gap:11px; overflow-wrap:anywhere; }
  .footer-mascot{ display:none; }                       /* faint watermark overlapped the copyright */
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:18px; margin-top:40px; }
}

/* ===== Narrow phones (≤400): announce bar wrapped to 3 ragged lines ===== */
@media (max-width:400px){
  .announce{ font-size:10px; letter-spacing:.03em; }
  .announce .items{ column-gap:14px; }
  .announce .items span{ white-space:nowrap; }          /* each item stays on its own line */
}

/* hero top rows (contact = .ct-hero-top, city pages = .sub-hero-top): the
   breadcrumb had margin-bottom:32px (inherited) which, in the flex row, pushed
   it above the status chip = misaligned. Zero it, and shrink both on phones so
   the breadcrumb + chip sit on ONE aligned line. */
.ct-hero-top .breadcrumb, .sub-hero-top .breadcrumb{ margin-bottom:0; }
@media (max-width:600px){
  .ct-hero-top, .sub-hero-top{ gap:8px; padding-bottom:20px; }
  .ct-hero-top .breadcrumb, .sub-hero-top .breadcrumb{ white-space:nowrap; font-size:9px; letter-spacing:.04em; }
  .ct-hero-top .sh-chip, .sub-hero-top .sh-chip{ white-space:nowrap; font-size:9px; letter-spacing:.04em; gap:6px; }
  /* city breadcrumb is 3 levels ("Home / Service Areas / City") — collapse the
     middle level so it fits next to the "Serving …, CT" chip on one line */
  .sub-hero-top .breadcrumb > :nth-child(3), .sub-hero-top .breadcrumb > :nth-child(4){ display:none; }
}