/* Advance Pool Care: mobile cleanup (phones <= 640px). Added 2026-11-06 after the owner's "very busy on iPhone" note. Desktop untouched. Backups: /_backups/advancepool-mobile-20261106 */
@media (max-width: 640px) { .quote-tab { display: none !important; } .mobile-call { min-height: 0 !important; padding-top: 10px !important; padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; font-size: 15px !important; } body { padding-bottom: 60px; } .trust-bar { font-size: 12.5px; line-height: 1.35; } .trust-bar .container, .trust-bar > div { padding-top: 7px !important; padding-bottom: 7px !important; } .trust-bar [class*="hours"], .trust-bar [class*="open"], .trust-bar p + p, .trust-bar span + br + span { display: none !important; } .bb-band, .section { padding-top: 40px !important; padding-bottom: 40px !important; } .bb-band h2, .section h2 { font-size: 25px; line-height: 1.2; margin-bottom: 10px; } .kicker { font-size: 11px; letter-spacing: .08em; margin-bottom: 8px; } .section-lead { font-size: 15.5px; line-height: 1.5; margin-bottom: 18px; } .band-cta, .review-cta { display: none !important; } .hero { padding-top: 28px !important; padding-bottom: 32px !important; } .hero h1 { font-size: 29px; line-height: 1.15; margin-bottom: 12px; } .hero .kicker { font-size: 10.5px; padding: 6px 10px; } .hero-sub { font-size: 15.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hero-ctas { gap: 10px !important; flex-wrap: nowrap !important; } .hero-ctas > * { flex: 1 1 0; padding-left: 10px !important; padding-right: 10px !important; font-size: 14.5px !important; white-space: nowrap; justify-content: center; } .hero-chips { display: flex !important; flex-wrap: wrap; gap: 6px !important; margin-top: 14px !important; } .hero-chips li { font-size: 12px !important; padding: 5px 9px !important; } .hero-chips li:nth-child(n+3) { display: none !important; } .hero-glance { display: none !important; } .form-card { margin-top: 22px !important; padding: 20px 16px !important; } .bb-svc-grid { gap: 10px !important; } .bb-svc-grid > * { display: grid !important; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: start; padding: 16px !important; min-height: 0 !important; } .bb-svc-grid > * > .ic, .bb-svc-grid > * > svg, .bb-svc-grid > * > [class*="icon"] { grid-row: 1 / span 3; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 9px; } .bb-svc-grid h3 { font-size: 17px; margin: 0 0 4px !important; } .bb-svc-grid p { font-size: 14.5px; line-height: 1.45; margin: 0 0 6px !important; } .bb-svc-grid .link-more { font-size: 13.5px; } .bb-steps { gap: 10px !important; } .bb-steps > * { padding: 16px !important; min-height: 0 !important; } .bb-steps h3 { font-size: 17px; margin-bottom: 4px !important; } .bb-steps p { font-size: 14.5px; line-height: 1.45; margin: 0 !important; } .rev-grid, .job-grid, .bb-areas-grid { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px !important; margin-right: -20px; padding-right: 20px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rev-grid::-webkit-scrollbar, .job-grid::-webkit-scrollbar, .bb-areas-grid::-webkit-scrollbar { display: none; } .rev-grid > *, .job-grid > * { flex: 0 0 84%; scroll-snap-align: start; min-height: 0 !important; padding: 18px !important; } .rev-grid p, .job-grid p { font-size: 14.5px; line-height: 1.5; } .job-source { font-size: 12px; margin-top: 6px; } .bb-row { gap: 18px !important; } .bb-row img { height: 200px !important; object-fit: cover; } .bb-areas-grid > * { flex: 0 0 auto; scroll-snap-align: start; padding: 12px 14px !important; min-height: 0 !important; } .bb-areas-grid > * p { display: none; } .bb-faq details { padding-top: 12px !important; padding-bottom: 12px !important; } .bb-faq summary { font-size: 15.5px; } .bb-cta { padding-top: 36px !important; padding-bottom: 36px !important; } .bb-cta .cta-actions { gap: 10px !important; } .site-footer { padding-top: 32px !important; } .site-footer :has(> .f-col) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 22px 18px !important; } .site-footer .f-brand { grid-column: 1 / -1; } .site-footer .f-brand p { font-size: 14px; } .site-footer .f-col h3, .site-footer .f-col h4, .site-footer .f-col strong:first-child { font-size: 12px; margin-bottom: 8px; } .site-footer .f-col li { font-size: 13.5px; margin-bottom: 6px !important; line-height: 1.35; } .site-footer .f-col ul li { margin-bottom: 4px !important; } .site-footer .f-brand .f-cta { display: none !important; } .site-footer .f-brand .logo img { max-height: 56px; width: auto; } .site-footer .f-col:last-child { grid-column: 1 / -1; } .site-footer .gbp-card { padding: 12px 14px !important; font-size: 13.5px; } .site-footer .gbp-card iframe, .site-footer .gbp-card img:not([width="16"]) { max-height: 140px; } .site-footer .footer-bottom { font-size: 12px; padding-top: 12px !important; padding-bottom: 12px !important; } }
@media (max-width: 640px) { .hero-ctas > *:nth-child(2) { display: none !important; } .hero-ctas > *:first-child { flex: 1 1 100%; } .bb-steps .step-icon { display: none !important; } .bb-steps .step-pill { margin-bottom: 8px !important; } .bb-icon-rows { gap: 0 !important; } .bb-icon-rows > * { padding-top: 10px !important; padding-bottom: 10px !important; font-size: 14.5px; line-height: 1.45; } .bb-card-plain > p { font-size: 15.5px; line-height: 1.55; } }

/* 2026-11-07 follow-up (phones <= 640px): full hero intro instead of a 3-line cut ending in "and...", shorter page (tighter bands, no repeated "link-more" lines on tappable service cards, tighter step cards), footer links at least 32px tall to tap. Text, links, desktop and tablet untouched. Backup: /_backups/advancepool-mobile-20261107 */
@media (max-width: 640px) {
  .hero-sub { display: block !important; -webkit-line-clamp: unset !important; line-clamp: unset !important; overflow: visible !important; font-size: 15px; line-height: 1.45; }
  .bb-band, .section { padding-top: 32px !important; padding-bottom: 32px !important; }
  .bb-svc-grid .link-more { display: none !important; }
  .bb-svc-grid p { margin-bottom: 0 !important; }
  .bb-steps > * { padding: 14px 16px !important; }
  .bb-steps p { font-size: 14px; line-height: 1.4; }
  .footer-grid nav.f-col li { margin-top: 0 !important; margin-bottom: 0 !important; }
  .footer-grid nav.f-col li a, .footer-grid .f-all a, .footer-grid .nap a { display: inline-block; min-height: 32px; padding-top: 8px; padding-bottom: 8px; line-height: 16px; }
}

/* 2026-11-07 b (phones <= 640px, homepage only): hide the About truck photo and the second About paragraph to shorten the page. Backup: /_backups/advancepool-mobile-20261107b */
@media (max-width: 640px) {
  body[data-page-type="home"] [data-section="who-we-are"] .bb-media { display: none !important; }
  body[data-page-type="home"] [data-section="who-we-are"] .bb-card-plain > h2 + p + p { display: none !important; }
}

/* 2026-11-07 where-we-work band: keep the text panel on screen so the H2 and town chips wrap. The map stays one swipe to the right. */
@media (max-width: 640px) { .bb-areas-grid > .bb-areas-text { flex: 0 0 calc(100% - 18px); min-width: 0; max-width: calc(100% - 18px); } .bb-areas-grid > .bb-areas-text .area-card { min-width: 0; } }

/* 2026-11-13 site QA (Jeff, /bloomview-site-qa vs Charlotte): layout only, no copy, no sections moved. Backup: ~/_backups/advancepool-1113qa */
/* 1. Smallest text 13px (kickers, form kicker, step pills, labels). */
.kicker, .form-kicker, .step-pill, .badge-pill, .sub-head { font-size: 13px; }
.bb-icon-rows h3, .team-card h3 { margin-bottom: 6px; }
.areas-hub-cta { margin-top: 18px; }
.bb-media .fact-panel > svg.ic { color: var(--sky); }
/* 2. Desktop: hero form follows the copy when "At a glance" opens; map fills its column; centred last rows. */
@media (min-width: 861px) {
  .hero-grid > .form-card { position: sticky; top: 120px; align-self: start; }
  .bb-areas-grid { align-items: stretch; }
  .bb-areas-map { display: flex; flex-direction: column; }
  .bb-areas-map .map-embed { flex: 1 1 auto; height: auto; display: flex; }
  .bb-areas-map .map-embed iframe { height: auto; min-height: 420px; flex: 1 1 auto; }
  .card-grid.cols-3:has(> :nth-child(5):last-child), .area-cards:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card-grid.cols-3:has(> :nth-child(5):last-child) > *, .area-cards:has(> :nth-child(5):last-child) > * { grid-column: span 2; }
  .card-grid.cols-3:has(> :nth-child(5):last-child) > :nth-child(4), .area-cards:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; }
  .place-grid.cols-3:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-left: auto; margin-right: auto; }
  .place-grid.cols-3:has(> :nth-child(4):last-child) > .place-card { flex-basis: calc((100% - var(--sp-6)) / 2); }
}
/* 3. Two-column widths: a lone last card takes the full row instead of leaving half the row empty. */
.bb-chips > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 601px) and (max-width: 860px) {
  .cols-3 > :last-child:nth-child(odd), .rev-grid > :last-child:nth-child(odd), .dir-grid > :last-child:nth-child(odd), .bb-steps > :last-child:nth-child(odd), .area-cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .footer-grid > [data-footer-col="hours-social-map"] { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; column-gap: 30px; align-items: start; }
  .footer-grid > [data-footer-col="hours-social-map"] > .gbp-card { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
@media (max-width: 600px) { .bb-chips > :last-child:nth-child(odd) { grid-column: auto; } }
/* 4. Phones: 13px floor, card copy back toward 16px, company links in two columns beside nothing. */
@media (max-width: 640px) {
  .kicker, .hero .kicker, .form-kicker { font-size: 13px; letter-spacing: .06em; }
  .hero .kicker { letter-spacing: .04em; }
  .hero-chips { gap: 10px !important; }
  .hero-chips li { font-size: 13px !important; }
  .job-source, .footer-bottom, .footer-bottom p, .trust-bar { font-size: 13px; }
  .hero-sub, .section-lead { font-size: 16px; }
  .bb-svc-grid p, .bb-steps p, .rev-grid p, .job-grid p, .bb-icon-rows > * { font-size: 15.5px; }
  .site-footer .footer-grid > [data-footer-col="company"] { grid-column: 1 / -1; }
  .site-footer .footer-grid > [data-footer-col="company"] ul { columns: 2; column-gap: 18px; }
  .site-footer .footer-grid > [data-footer-col="company"] li { break-inside: avoid; }
}
/* 2026-11-13 site QA batch 2: air under source lines and "More about" toggles, side padding on the open-status line. Backup: ~/_backups/advancepool-1113qb */
.job-card .job-source, .job-source { padding-bottom: 6px; }
details.bb-more-about { padding-bottom: 8px; }
.trust-bar p.open-status { padding-left: 16px; padding-right: 16px; }

/* row 275 (2026-11-13 jeff/Claude): icon rows (h3+p units) as a 2-column mini-grid at desktop; odd last item spans the row */
@media (min-width: 1180px) { .bb-icon-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px !important; } .bb-icon-rows > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* 2026-11-13 jeff/Claude (rows 572/573): the hero glow drifted from first paint, so the screen above the fold never settled and PageSpeed Speed Index kept counting. Hold it at its first keyframe and start the drift after load. */
.hero::after, .cta-band::before { animation-delay: 8s; animation-fill-mode: backwards; }