/* Loop Window Cleaning: site styles. The page layouts carry their own inline styles from the design;
   this file adds the parts a static design can't: phone layout, menu, uploader, cookie bar. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: Montserrat, Arial, sans-serif; color: #011C5E; background: #FFFFFF; }
a { color: #005DFC; }
a:hover { color: #011C5E; }
footer a { color: #FFFFFF; }
footer a:hover { color: #DDF4FB; }
img { max-width: 100%; }
img[width][height] { height: auto; }
input, select, textarea, button { font-family: inherit; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #039AFD; outline-offset: 2px; }
[hidden] { display: none !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Header */
.nav-areas { position: relative; }
.nav-drop { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #FFFFFF; border: 1px solid #E4E8F1; border-radius: 14px; box-shadow: 0 12px 32px rgba(1,28,94,0.12); padding: 10px; min-width: 200px; flex-direction: column; gap: 2px; z-index: 30; }
.nav-areas:hover .nav-drop, .nav-areas:focus-within .nav-drop { display: flex; }
.nav-drop a { color: #011C5E; text-decoration: none; font-size: 15px; font-weight: 600; padding: 10px 14px; border-radius: 10px; }
.nav-drop a:hover { background: #F5F6F9; }
.menu-toggle { display: none; width: 48px; height: 48px; border: 1px solid #D5DCEB; border-radius: 12px; background: #FFFFFF; color: #011C5E; align-items: center; justify-content: center; margin-left: auto; cursor: pointer; }
.mobile-menu { display: none; border-top: 1px solid #E4E8F1; padding: 12px 16px 20px; background: #FFFFFF; }
.mobile-menu[hidden] { display: none !important; }
.mobile-menu-group { display: flex; flex-direction: column; }
.mobile-menu-group a { color: #011C5E; text-decoration: none; font-size: 17px; font-weight: 600; padding: 12px 4px; border-bottom: 1px solid #F0F2F7; }
.mobile-menu-label { margin: 16px 4px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #005DFC; }
.mobile-menu-cta { display: flex; align-items: center; justify-content: center; margin-top: 18px; height: 52px; border-radius: 12px; background: #005DFC; color: #FFFFFF; text-decoration: none; font-weight: 700; font-size: 16px; }

/* Phone bar and cookie bar */
.phone-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #FFFFFF; border-top: 1px solid #E4E8F1; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
.phone-bar a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border-radius: 12px; border: 2px solid #011C5E; color: #011C5E; text-decoration: none; font-weight: 700; font-size: 15px; }
.phone-bar a.primary { background: #005DFC; border-color: #005DFC; color: #FFFFFF; }
.cookie-bar { position: fixed; left: 50%; transform: translateX(-50%); width: calc(100% - 24px); max-width: 1240px; bottom: 12px; z-index: 50; background: #011C5E; color: #FFFFFF; border-radius: 16px; padding: 16px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; box-shadow: 0 12px 32px rgba(1,28,94,0.3); border: 1px solid rgba(255,255,255,0.18); font-size: 14px; line-height: 1.5; }
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; flex: 1 1 320px; }
.cookie-bar a { color: #DDF4FB; }
.cookie-bar button { height: 42px; padding: 0 18px; border-radius: 10px; border: 2px solid #FFFFFF; background: transparent; color: #FFFFFF; font-weight: 700; font-size: 14px; cursor: pointer; margin-left: 8px; }
.cookie-bar button.primary { background: #005DFC; border-color: #005DFC; }

/* Uploader */
.lp-hidden-file { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lp-upload { position: relative; }
.lp-drop.drag { background: #DDF4FB; border-color: #039AFD; }
.lp-thumb { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #DDF4FB; border: 1px solid #C9D3EE; }
.lp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-thumb .lp-file { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px; font-size: 11px; text-align: center; color: #34446E; overflow-wrap: anywhere; }
.lp-thumb button { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(1,28,94,0.85); color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.lp-thumb .lp-size { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,0.92); font-size: 11px; font-weight: 600; color: #011C5E; }
.lp-add { position: relative; aspect-ratio: 1 / 1; border: 2px dashed #8FA3D6; border-radius: 12px; background: #F5F6F9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-size: 13px; font-weight: 700; color: #005DFC; }
.lp-add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.quote-form button[disabled] { opacity: 0.6; cursor: wait; }

/* Phones and small tablets */
/* Tablets and phones: compact header with the menu button */
@media (max-width: 1000px) {
  .main-nav, .header-actions { display: none !important; }
  .menu-toggle { display: flex; }
  .mobile-menu { display: block; }
  .site-header > div { padding: 10px 20px !important; min-height: 60px !important; gap: 12px !important; }
  .site-header img { height: 36px !important; }
}
@media (max-width: 760px) {
  .footer-nav { grid-template-columns: 1fr 1fr !important; }
  .topbar span { display: none !important; }
  .topbar > div { justify-content: center !important; }
  .site-header > div { padding: 10px 16px !important; }
  .site-header img { height: 34px !important; }
  .phone-bar { display: flex; }
  body { padding-bottom: 72px; }
  .cookie-bar { bottom: 80px; padding: 16px 18px; }
  section > div, footer > div { padding-left: 20px !important; padding-right: 20px !important; }
  section > div { padding-top: 48px !important; padding-bottom: 48px !important; }
  section > div[style*="padding: 28px 32px 0"] { padding-top: 20px !important; padding-bottom: 0 !important; }
  h1:not([style*="font-size: 16px"]) { font-size: 38px !important; line-height: 1.08 !important; }
  h1[style*="font-size: 16px"] { font-size: 13px !important; }
  h2 { font-size: 28px !important; }
  h2[style*="font-size: 24px"], h2[style*="font-size: 26px"] { font-size: 22px !important; }
  h3 { font-size: 19px !important; }
  p[style*="font-size: 64px"], p[style*="font-size: 60px"], p[style*="font-size: 56px"] { font-size: 38px !important; }
  .hero-badge { position: static !important; margin-top: 14px; }
  img[style*="width: 360px"], img[style*="width: 340px"] { width: 100% !important; }
  .lp-upload .lp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 420px) {
  .footer-nav { grid-template-columns: 1fr !important; }
  h1:not([style*="font-size: 16px"]) { font-size: 34px !important; }
  .lp-upload .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media print { .phone-bar, .cookie-bar, .menu-toggle { display: none !important; } }

/* Guide articles built from the document */
.guide-body p.lead { margin: 0 0 28px; font-size: 20px; color: #011C5E; }
.guide-body p { margin: 0 0 18px; }
.guide-body h2 { margin: 40px 0 12px; font-size: 28px; line-height: 1.25; font-weight: 800; color: #011C5E; }
.guide-body h3 { margin: 28px 0 8px; font-size: 21px; line-height: 1.3; font-weight: 800; color: #011C5E; }
.guide-body ul, .guide-body ol { margin: 0 0 18px; padding-left: 24px; }
.guide-body li { margin: 0 0 10px; }
.guide-body strong { color: #011C5E; }
.guide-body blockquote { margin: 24px 0; padding: 20px 26px; background: #DDF4FB; border-radius: 16px; color: #011C5E; }
.guide-body blockquote p { margin: 0; }
.guide-body table { border-collapse: collapse; width: 100%; margin: 0 0 24px; font-size: 16px; }
.guide-body th, .guide-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #E4E8F1; vertical-align: top; }
.guide-body th { color: #011C5E; }

/* Service-area map (Areas page): small place labels are listed in the caption on phones */
@media (max-width: 760px) { .service-map .map-small text { display: none; } }