/* ==========================================================================
   Dropout Softwash & Window Cleaning - global stylesheet (hand-written)
   Palette sampled from the client logo: navy #0d1d34, blue #2c76be.
   Owner update 8 (2026-09-26): LIGHT theme. White/light-grey surfaces, navy for
   text, blue ONLY as an accent (primary buttons, small icons, link hover, eyebrow
   text). The footer is the only dark band.
   Type: Montserrat (display) + Inter (body)
   ========================================================================== */
:root{
  --navy:#0d1d34;
  --navy-2:#13294a;
  --navy-3:#1b365e;
  --blue:#2c76be;
  --blue-dark:#1f5a95;
  --blue-light:#4a96e0;
  --blue-text:#266aad; /* brand blue nudged darker so small text passes AA on #f6f7f8 (5.2:1) */
  --sky:#f6f7f8;
  --white:#ffffff;
  --off:#f6f7f8;
  --ink:#10213a;
  --grey:#4b5a6e;
  --grey-line:#e3e6ea;
  --grey-line-2:#cfd5dd;
  --white-dim:#c3d0e2;
  --max:1180px;
  --radius:10px;
  --shadow:0 14px 34px rgba(13,29,52,.10);
  --shadow-lg:0 20px 48px rgba(13,29,52,.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip;}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  overflow-x:clip; /* clip, not hidden: keeps the sticky header working */
}
h1,h2,h3,h4{font-family:'Montserrat','Inter',sans-serif;margin:0;line-height:1.15;letter-spacing:-.005em;}
a{color:inherit;text-decoration:none;}
a.u,.prose a,.answer-box a,.form-sub a{text-decoration:underline;text-underline-offset:2px;}
p{margin:0 0 1rem;}
p:last-child{margin-bottom:0;}
img,svg,video{max-width:100%;display:block;}
ul,ol{margin:0 0 1rem;padding-left:1.15rem;}
li{margin-bottom:.45rem;}
strong{font-weight:600;}
:focus-visible{outline:3px solid var(--blue-light);outline-offset:3px;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 24px;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;padding:12px 18px;z-index:200;font-weight:600;}
.skip-link:focus{left:12px;top:12px;}
.hidden{display:none !important;}
.muted{color:#8193ab;font-size:.85em;}
.small-note{font-size:.88rem;color:var(--grey);margin-top:12px;}
.after-grid{margin-top:30px;}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--blue);color:#fff;border:2px solid var(--blue);border-radius:999px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:.92rem;letter-spacing:.01em;
  padding:12px 22px;cursor:pointer;white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.btn svg{width:18px;height:18px;flex:none;}
.btn:hover{background:var(--blue-dark);border-color:var(--blue-dark);transform:translateY(-1px);}
.btn-alt,.btn-outline{background:#fff;color:var(--navy);border-color:var(--navy);}
.btn-alt:hover,.btn-outline:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-ghost-dark{background:transparent;color:var(--navy);border-color:var(--navy);}
.btn-ghost-dark:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.btn-lg{padding:15px 28px;font-size:1rem;}
.btn-block{width:100%;}

/* ---------------- Header ---------------- */
.topbar{background:var(--off);color:var(--grey);font-size:.82rem;border-bottom:1px solid var(--grey-line);}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:7px 24px;flex-wrap:wrap;max-width:var(--max);margin:0 auto;}
.topbar strong{color:var(--navy);font-weight:600;}
.topbar a:hover strong{color:var(--blue-text);}
header.site-header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--grey-line);box-shadow:0 2px 10px rgba(13,29,52,.04);}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:11px 24px;max-width:var(--max);margin:0 auto;}
/* FULL logo: artwork (roof, chimney, spray wand, window, DROPOUT) + live tagline.
   ~70px tall on desktop, ~51px on mobile. Hard ceiling: the width/height attributes
   are display-sized too, so a stale or missing stylesheet can never blow it up. */
.brand-row{display:inline-flex;flex-direction:column;align-items:center;gap:4px;color:var(--navy);flex:none;line-height:1;}
.brand-logo{height:58px;max-height:58px;width:auto;display:block;}
.brand-sub{display:block;font-family:'Inter',sans-serif;font-weight:700;font-size:.56rem;letter-spacing:.13em;color:var(--navy);text-transform:uppercase;line-height:1;white-space:nowrap;}
.site-footer .brand-sub{color:var(--white-dim);}
nav.primary{display:flex;align-items:center;gap:22px;margin-left:auto;}
nav.primary a{color:var(--navy);font-weight:500;font-size:.93rem;padding:6px 0;border-bottom:2px solid transparent;transition:color .15s ease,border-color .15s ease;}
nav.primary a:hover{color:var(--blue-text);}
nav.primary a[aria-current="page"]{color:var(--navy);font-weight:600;border-bottom-color:var(--blue);}
.has-sub{position:relative;padding-bottom:6px;}
.has-sub > .sub-toggle{background:none;border:none;color:var(--navy);cursor:pointer;font-family:'Inter',sans-serif;font-weight:500;font-size:.93rem;padding:6px 0;display:inline-flex;align-items:center;gap:6px;}
.has-sub > .sub-toggle:hover{color:var(--blue-text);}
.has-sub > .sub-toggle svg{width:11px;height:11px;transition:transform .18s ease;}
.has-sub.open > .sub-toggle svg{transform:rotate(180deg);}
/* Panel sits flush at top:100% with a transparent padding bridge: no dead gap. */
.submenu{position:absolute;top:100%;left:-18px;min-width:290px;padding-top:14px;display:none;}
.submenu::before{content:"";position:absolute;top:0;left:0;right:0;height:16px;background:transparent;}
.submenu-inner{background:#fff;border:1px solid var(--grey-line);border-radius:0 0 var(--radius) var(--radius);padding:10px;box-shadow:var(--shadow-lg);}
.has-sub.open .submenu{display:block;}
/* Pure-CSS fallback if main.js is stale or blocked. */
.has-sub:hover .submenu,.has-sub:focus-within .submenu{display:block;}
.submenu a{display:block;padding:9px 14px;font-size:.9rem;border:none;border-radius:6px;color:var(--navy);}
.submenu a:hover{background:var(--off);color:var(--blue-text);}
.submenu .submenu-all{border-top:1px solid var(--grey-line);margin-top:6px;font-weight:600;}
.header-cta{display:flex;align-items:center;gap:14px;flex:none;}
.phone-link{color:var(--navy);font-family:'Montserrat',sans-serif;font-weight:700;font-size:1rem;white-space:nowrap;}
.phone-link:hover{color:var(--blue-text);}
.menu-toggle{display:none;background:#fff;border:2px solid var(--grey-line-2);border-radius:8px;color:var(--navy);font-size:1.35rem;line-height:1;cursor:pointer;padding:7px 11px;}
.mobile-nav{
  display:none;background:#fff;border-top:1px solid var(--grey-line);padding:12px 24px 22px;
  /* taller than a phone screen, so it scrolls internally */
  max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.mobile-nav.open{display:block;}
.mobile-nav a{display:block;color:var(--navy);padding:11px 0;border-bottom:1px solid var(--grey-line);font-size:1rem;}
.mobile-nav a:hover{color:var(--blue-text);}
.mobile-nav .mobile-group{color:var(--grey);font-family:'Montserrat',sans-serif;font-weight:700;text-transform:uppercase;font-size:.76rem;letter-spacing:.1em;margin:18px 0 4px;}
.mobile-ctas{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.mobile-nav .mobile-ctas a{border-bottom:none;color:#fff;padding:12px 18px;}
.mobile-nav .mobile-ctas .btn-alt{color:var(--navy);}

/* ---------------- Hero ---------------- */
.hero{position:relative;background:#fff;color:var(--ink);overflow:hidden;border-bottom:1px solid var(--grey-line);}
.hero-media{position:absolute;inset:0;}
/* Background-photo heroes: WHITE overlay, strongest behind the text (left). */
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,.97) 10%,rgba(255,255,255,.9) 55%,rgba(255,255,255,.62) 100%);}
.hero-inner{position:relative;padding:84px 24px 92px;max-width:var(--max);margin:0 auto;}
.hero-inner.center{text-align:center;max-width:780px;}
.hero-inner.center .hero-actions{justify-content:center;}
.hero-inner.center .lead{margin-left:auto;margin-right:auto;}
.hero-inner.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
.home-hero{background:linear-gradient(180deg,#fff 0%,var(--off) 100%);}
.hero-photo{margin:0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--grey-line);}
.hero-photo img{width:100%;height:auto;aspect-ratio:800/556;object-fit:cover;}
.hero-eyebrow{color:var(--blue-text);font-weight:700;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.hero-eyebrow::before{content:"";width:30px;height:3px;background:var(--blue);display:block;border-radius:2px;}
.hero-inner.center .hero-eyebrow{justify-content:center;}
.hero h1{font-size:clamp(2rem,4.2vw,3.2rem);font-weight:800;color:var(--navy);}
.home-hero h1{font-size:clamp(1.9rem,3.6vw,2.9rem);}
.hero .lead{margin-top:18px;max-width:56ch;color:var(--grey);font-size:1.1rem;}
.hero-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}
.hero-points{list-style:none;padding:0;margin:26px 0 0;display:flex;gap:10px 26px;flex-wrap:wrap;font-weight:600;font-size:.92rem;color:var(--navy);}
.hero-points li{display:flex;align-items:center;gap:8px;margin:0;}
.hero-points li::before{content:"";width:9px;height:9px;background:var(--blue);border-radius:50%;display:block;flex:none;}
.page-hero .hero-inner{padding:64px 24px 70px;}
.page-hero h1{font-size:clamp(1.8rem,3.6vw,2.8rem);}

/* ---------------- Breadcrumbs / trust ---------------- */
.breadcrumbs{background:var(--off);color:var(--grey);font-size:.82rem;padding:10px 0;border-bottom:1px solid var(--grey-line);}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;max-width:var(--max);margin:0 auto;padding:0 24px;}
.breadcrumbs li{margin:0;display:flex;align-items:center;gap:8px;}
.breadcrumbs li+li::before{content:"/";color:#8a96a6;}
.breadcrumbs a:hover{color:var(--blue-text);}
.breadcrumbs [aria-current="page"]{color:var(--navy);font-weight:600;}
.trust-strip{background:var(--sky);border-bottom:1px solid var(--grey-line);padding:15px 0;}
.trust-row{display:flex;flex-wrap:wrap;gap:12px 30px;justify-content:space-between;font-weight:600;font-size:.92rem;color:var(--navy);}
.trust-row span{display:flex;align-items:center;gap:8px;}
.trust-row svg{width:20px;height:20px;flex:none;color:var(--blue);}

/* ---------------- Sections ---------------- */
.section{padding:80px 0;}
.section.alt{background:var(--off);}
.section.dark{background:var(--off);border-top:1px solid var(--grey-line);border-bottom:1px solid var(--grey-line);} /* kept as a class name only: light since owner update 8 */
.section-head{max-width:700px;margin-bottom:40px;}
.section-tag{color:var(--blue-text);font-weight:700;font-size:.8rem;margin-bottom:10px;display:block;text-transform:uppercase;letter-spacing:.12em;}
.section h2{font-size:clamp(1.6rem,2.8vw,2.3rem);font-weight:800;color:var(--navy);}
.section h3{font-size:1.15rem;font-weight:700;color:var(--navy);}
.section .desc{margin-top:14px;color:var(--grey);font-size:1.05rem;max-width:66ch;}
.h-sm{font-size:1.25rem !important;margin:30px 0 14px;}

.answer-box{background:var(--off);border:1px solid var(--grey-line);border-left:4px solid var(--grey-line-2);border-radius:var(--radius);padding:22px 24px;margin:0 0 34px;}
.section.alt .answer-box,.section.dark .answer-box{background:#fff;}
.answer-box h2{font-size:.8rem !important;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-text) !important;margin-bottom:10px;}
.answer-box p{font-size:1.08rem;line-height:1.6;margin:0;color:var(--ink);}

/* ---------------- Service cards ---------------- */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.service-card{background:#fff;border:1px solid var(--grey-line);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card-media{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--off);}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease;}
.service-card:hover .card-media img{transform:scale(1.05);}
.price-tag{position:absolute;left:12px;bottom:12px;background:#fff;color:var(--navy);font-family:'Montserrat',sans-serif;font-weight:800;font-size:.85rem;padding:6px 12px;border-radius:999px;box-shadow:0 4px 12px rgba(0,0,0,.2);}
.card-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.card-body h3{font-size:1.08rem;}
.card-body p{color:var(--grey);font-size:.94rem;margin:0;}
.card-link{margin-top:auto;font-weight:700;font-size:.88rem;color:var(--navy);}
.service-card:hover .card-link{color:var(--blue-text);}

/* ---------------- Split / features ---------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.split.wide-left{grid-template-columns:1.2fr .8fr;}
.split.top{align-items:start;}
.split-media{position:relative;}
.split-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);}
.split-media .stamp{position:absolute;bottom:-16px;right:-12px;background:#fff;color:var(--navy);border:1px solid var(--grey-line);font-family:'Montserrat',sans-serif;font-weight:800;padding:14px 20px;font-size:.92rem;line-height:1.3;border-radius:var(--radius);max-width:70%;box-shadow:var(--shadow);}
.side-photo{margin:24px 0;}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:26px;}
.feature-grid.four{grid-template-columns:repeat(4,1fr);margin-top:0;}
.feature{background:#fff;border:1px solid var(--grey-line);border-radius:var(--radius);padding:18px;}
.feature h3{font-size:1rem;margin-bottom:6px;}
.feature p{color:var(--grey);font-size:.93rem;margin:0;}
.check-list{list-style:none;padding:0;margin:0;}
.check-list li{position:relative;padding-left:30px;margin-bottom:11px;color:var(--grey);}
.check-list li::before{content:"";position:absolute;left:2px;top:.42em;width:14px;height:8px;border-left:3px solid var(--blue);border-bottom:3px solid var(--blue);transform:rotate(-45deg);}

/* price card / aside */
.price-card{background:#fff;color:var(--ink);border:1px solid var(--grey-line);border-radius:14px;padding:26px;box-shadow:var(--shadow);margin-bottom:0;}
.price-label{display:block;color:var(--blue-text);font-weight:700;text-transform:uppercase;font-size:.78rem;letter-spacing:.12em;}
.price-big{display:block;color:var(--navy);font-family:'Montserrat',sans-serif;font-weight:800;font-size:3rem;line-height:1.1;margin:4px 0 16px;}
.stack-btns{display:flex;flex-direction:column;gap:10px;margin-top:18px;}
.stack-btns .btn{width:100%;}
.plain-links{list-style:none;padding:0;margin:8px 0 0;}
.plain-links a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.plain-links a:hover{color:var(--blue-text);}

/* ---------------- Process ---------------- */
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
.process-item{border-top:3px solid var(--grey-line-2);padding-top:16px;}
.process-num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.85rem;color:var(--blue-text);letter-spacing:.08em;margin-bottom:8px;display:block;}
.process-item h3{margin-bottom:8px;}
.process-item p{margin:0;font-size:.94rem;color:var(--grey);}

/* ---------------- Gallery ---------------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.gallery figure{margin:0;overflow:hidden;border-radius:var(--radius);background:var(--off);}
.gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .35s ease;}
.gallery figure:hover img{transform:scale(1.05);}

/* ---------------- Areas ---------------- */
.county-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.region-card{background:#fff;border:1px solid var(--grey-line);border-radius:var(--radius);padding:24px;}
.region-card p{color:var(--grey);font-size:.94rem;}
.region-sub{font-size:.78rem;color:var(--blue-text);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:10px;}
.county-name{font-size:1.2rem !important;margin-bottom:8px;}
aside .region-card{margin-top:24px;}
aside .region-card:first-child{margin-top:0;}
.city-list{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px;}
.city-list li{margin:0;}
.city-list a,.city-list span{display:inline-block;border:1px solid var(--grey-line);border-radius:999px;padding:5px 12px;font-size:.86rem;color:var(--grey);}
.city-list a{border-color:var(--navy);color:var(--navy);font-weight:600;}
.city-list a:hover{border-color:var(--blue);color:var(--blue-text);}
.area-chips{display:flex;flex-wrap:wrap;gap:8px;}
.area-chips a,.area-chips span{border:1px solid var(--grey-line);border-radius:999px;padding:6px 13px;font-size:.88rem;background:#fff;}
.area-chips a{border-color:var(--navy);color:var(--navy);font-weight:600;}
.area-chips a:hover{border-color:var(--blue);color:var(--blue-text);}

/* ---------------- FAQ ---------------- */
.faq-list{max-width:860px;}
.faq-item{border-bottom:1px solid var(--grey-line);}
.faq-item h3{margin:0;}
.faq-q{width:100%;background:none;border:none;text-align:left;cursor:pointer;font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.02rem;padding:19px 44px 19px 0;position:relative;color:var(--navy);line-height:1.35;}
.faq-q::after{content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;border-right:3px solid var(--blue);border-bottom:3px solid var(--blue);transform:translateY(-70%) rotate(45deg);transition:transform .2s ease;}
.faq-item.open .faq-q::after{transform:translateY(-30%) rotate(225deg);}
.faq-a{display:none;padding:0 0 20px;color:var(--grey);max-width:74ch;}
.faq-item.open .faq-a{display:block;}
.faq-cats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;}
.faq-cats a{border:1px solid var(--grey-line);border-radius:999px;padding:8px 15px;font-weight:600;font-size:.88rem;}
.faq-cats a:hover{border-color:var(--blue);color:var(--blue-text);}
.faq-group{margin-bottom:50px;scroll-margin-top:110px;}
.faq-group .section-head{margin-bottom:14px;}
.faq-under{margin-top:34px;}

/* ---------------- Tables ---------------- */
.info-table{width:100%;border-collapse:collapse;margin:20px 0;font-size:.95rem;}
.info-table th,.info-table td{border:1px solid var(--grey-line);padding:11px 14px;text-align:left;vertical-align:top;}
.info-table th{background:var(--off);color:var(--navy);font-family:'Montserrat',sans-serif;font-size:.84rem;}
.info-table tbody tr:nth-child(even){background:var(--off);}
.info-table a{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.info-table a:hover{color:var(--blue-text);}
.price-table .price{font-family:'Montserrat',sans-serif;font-weight:800;color:var(--navy);font-size:1.1rem;white-space:nowrap;}
@media (max-width:560px){
  .info-table{font-size:.86rem;table-layout:fixed;}
  .info-table th,.info-table td{padding:9px 8px;overflow-wrap:anywhere;hyphens:auto;}
  .info-table th{font-size:.74rem;}
  .price-table .price{font-size:.95rem;white-space:normal;}
}

/* ---------------- Form ---------------- */
.form-wrap{background:#fff;border:1px solid var(--grey-line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);}
.form-title{font-size:1.25rem !important;margin-bottom:6px;}
.form-sub{font-size:.92rem;color:var(--grey);margin-bottom:18px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;}
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field.full{grid-column:1 / -1;}
.field label{font-weight:600;font-size:.86rem;color:var(--navy);}
.field .req{color:var(--blue);}
.field input,.field select,.field textarea{font-family:'Inter',sans-serif;font-size:.97rem;padding:11px 12px;border:1px solid #c4cfdd;border-radius:8px;background:#fff;color:var(--ink);width:100%;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(44,118,190,.18);}
.field textarea{min-height:110px;resize:vertical;}
.form-actions{margin-top:18px;}
.form-note{font-size:.8rem;color:#6b7a8e;margin-top:12px;}
.contact-big{display:flex;flex-direction:column;gap:12px;margin:0 0 10px;}

/* ---------------- Bands ---------------- */
.text-band{background:var(--off);color:var(--navy);padding:22px 0;border-top:1px solid var(--grey-line);border-bottom:1px solid var(--grey-line);}
.text-band-inner{display:flex;align-items:center;justify-content:center;gap:12px 22px;flex-wrap:wrap;text-align:center;font-weight:600;font-size:1.02rem;max-width:var(--max);margin:0 auto;padding:0 24px;}
.cta-band{background:var(--off);color:var(--ink);padding:58px 0;border-top:1px solid var(--grey-line);}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap;max-width:var(--max);margin:0 auto;padding:0 24px;}
.cta-inner h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:800;max-width:560px;color:var(--navy);}
.cta-inner p{margin-top:10px;color:var(--grey);max-width:520px;}
.cta-actions{display:flex;gap:12px;flex-wrap:wrap;}

/* ---------------- Prose ---------------- */
.prose h2{font-size:1.5rem;margin:36px 0 12px;}
.prose h3{font-size:1.12rem;margin:26px 0 8px;}
.prose p,.prose li{color:var(--grey);}
.prose .lead-text{font-size:1.12rem;color:var(--ink);}
.prose blockquote{margin:28px 0;padding:18px 24px;border-left:4px solid var(--grey-line-2);background:var(--off);border-radius:0 var(--radius) var(--radius) 0;font-family:'Montserrat',sans-serif;font-weight:700;font-size:1.15rem;color:var(--navy);}

/* ---------------- Related links ---------------- */
.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.link-card{border:1px solid var(--grey-line);border-radius:var(--radius);background:#fff;padding:18px;display:flex;flex-direction:column;gap:4px;transition:border-color .15s ease,transform .15s ease;}
.link-card:hover{border-color:var(--blue);transform:translateY(-3px);}
.link-card:hover strong{color:var(--blue-text);}
.link-card strong{font-family:'Montserrat',sans-serif;color:var(--navy);}
.link-card span{font-size:.88rem;color:var(--grey);}

/* ---------------- Footer ---------------- */
footer.site-footer{background:var(--navy);color:var(--white-dim);padding:56px 0 24px;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;margin-bottom:34px;}
.footer-brand .brand-row{margin-bottom:16px;}
.footer-brand p{max-width:42ch;font-size:.92rem;}
.footer-contact{list-style:none;padding:0;margin:16px 0 0;}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;margin-bottom:9px;}
.footer-contact svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--blue-light);}
.footer-contact a:hover{color:#fff;}
.footer-col h4{color:#fff;font-size:.9rem;margin-bottom:14px;}
.footer-col a{display:block;margin-bottom:9px;font-size:.9rem;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid var(--navy-3);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.81rem;color:#8193ab;}

/* ---------------- Sticky mobile bar: Call + Text ---------------- */
.call-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;background:#fff;border-top:1px solid var(--grey-line);box-shadow:0 -4px 16px rgba(13,29,52,.08);padding:9px 12px;gap:9px;}
.call-bar a{flex:1;font-size:.95rem;padding:12px 8px;}

/* ---------------- Reveal ---------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;}
.reveal.in{opacity:1;transform:none;}

/* ---------------- Responsive ---------------- */
@media (max-width:1100px){
  nav.primary{gap:16px;}
  nav.primary a,.has-sub > .sub-toggle{font-size:.88rem;}
  .header-cta .phone-link{display:none;}
}
@media (max-width:1040px){
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .feature-grid.four{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:900px){
  nav.primary{display:none;}
  .menu-toggle{display:block;}
  .hero-inner.split{grid-template-columns:1fr;gap:32px;}
  .hero-inner{padding:58px 24px 66px;}
  .process-grid{grid-template-columns:repeat(2,1fr);}
  .split,.split.wide-left{grid-template-columns:1fr;gap:34px;}
  .split-media .stamp{right:0;bottom:-14px;}
  .county-grid{grid-template-columns:1fr 1fr;}
  .link-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .section{padding:60px 0;}
  .call-bar{display:flex;}
  body{padding-bottom:66px;}
}
@media (max-width:560px){
  .brand-logo{height:42px;max-height:42px;}
  .brand-sub{font-size:.5rem;letter-spacing:.08em;}
  .services-grid,.feature-grid,.feature-grid.four,.process-grid,.form-grid,.footer-grid,.county-grid,.link-grid{grid-template-columns:1fr;}
  .cta-inner{flex-direction:column;align-items:flex-start;}
  .trust-row{justify-content:flex-start;font-size:.86rem;}
  .hero .lead{font-size:1.02rem;}
  .topbar-inner{justify-content:center;font-size:.76rem;padding:6px 16px;}
  /* Mobile declutter: the sticky bottom bar already has Call + Text, so the
     header keeps just logo + menu, and the top strip is one line. */
  .topbar-inner > span:first-child{display:none;}
  .header-cta .btn{display:none;}
  .header-inner{padding:10px 16px;gap:12px;}
  .wrap,.wrap-narrow{padding:0 18px;}
  .hero-inner,.page-hero .hero-inner{padding:44px 18px 54px;}
  .hero-eyebrow{font-size:.74rem;}
  .hero-eyebrow::before{display:none;}
  .hero-actions .btn,.cta-actions .btn{flex:1 1 100%;}
  .cta-actions{width:100%;}
  .form-wrap{padding:20px;}
  .price-big{font-size:2.5rem;}
  /* long phone-number buttons must be able to shrink at 320px */
  .btn{white-space:normal;text-align:center;}
  .btn-lg{padding:14px 16px;font-size:.95rem;}
}
/* Grid/flex children default to min-width:auto; a wide child can push the column off screen. */
.hero-inner.split > *,.split > *,.services-grid > *,.county-grid > *,.link-grid > *,.feature-grid > *,.footer-grid > *{min-width:0;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;animation:none !important;}
  .reveal{opacity:1;transform:none;}
}
@media print{
  header.site-header,.call-bar,.cta-band,.text-band,footer.site-footer{display:none;}
}
/* Owner update 2026-09-26: 16 town pages in the Service Areas dropdown (two columns),
   compact quote forms on home and service pages. */
.submenu-inner.cols{display:grid;grid-template-columns:1fr 1fr;column-gap:4px;min-width:440px;}
.submenu-inner.cols .submenu-all{grid-column:1 / -1;}
.quote-section{padding:56px 0;}
.form-wrap.compact{padding:24px;}
.form-wrap.compact .field textarea{min-height:84px;}
@media (max-width:560px){.quote-section{padding:40px 0;}.form-wrap.compact{padding:18px;}}
/* Home hero (owner update 8): light section, photo beside the text on desktop and
   BELOW the buttons on mobile. The mobile hero is tightened (smaller h1, no bullet
   row, which the trust strip repeats) so the photo still lands on the first screen. */
@media (max-width:900px){
  .home-hero .hero-inner.split{gap:22px;}
}
@media (max-width:560px){
  .home-hero .hero-inner{padding:22px 18px 30px;}
  .home-hero h1{font-size:1.6rem;}
  .home-hero .hero-eyebrow{margin-bottom:10px;}
  .home-hero .lead{margin-top:12px;font-size:.98rem;}
  .home-hero .hero-actions{margin-top:18px;gap:10px;}
  .home-hero .hero-actions .btn-lg{padding:11px 16px;}
  .home-hero .hero-points{display:none;}
}
/* Owner update 9 (2026-09-27): 5th service. Five cards in one row on wide screens,
   3 + 2 on laptops, 2-up on tablets, 1-up on phones. */
.services-grid{grid-template-columns:repeat(5,1fr);gap:18px;}
.services-grid .card-body{padding:18px;}
@media (max-width:1100px){.services-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.services-grid{grid-template-columns:1fr;}}
.price-big.price-quote{font-size:2.4rem;}

/* ==========================================================================
   Owner update 10 (2026-09-27): "charcoal background so it felt like glowing
   golden lights". Scoped to body.theme-lights (christmas-light-installation.html
   ONLY) and the homepage .xmas-teaser band. Every other page stays light.
   AA on charcoal: warm #f3efe6 on #1a1a1c 15.9:1, warm-dim #cfc8ba 11.2:1,
   gold #f2c14e 10.8:1, charcoal on gold 10.8:1 (see check.mjs contrast guard).
   The white header + full logo stay for brand consistency.
   ========================================================================== */
:root{
  --char:#1a1a1c;--char-2:#232326;--char-line:#3a3a3f;
  --warm:#f3efe6;--warm-dim:#cfc8ba;
  --gold:#f2c14e;--gold-2:#e8a93a;
  --glow-sm:0 0 14px rgba(242,193,78,.45);
}
body.theme-lights{background:var(--char);color:var(--warm);}
body.theme-lights main{background:var(--char);}
/* hero: NO white overlay, charcoal gradient so the dusk photo glows on the right */
body.theme-lights .hero{background:var(--char);color:var(--warm);border-bottom-color:var(--char-line);}
body.theme-lights .hero-media img{object-position:62% 50%;}
body.theme-lights .hero-media::after{background:linear-gradient(100deg,rgba(26,26,28,.97) 0%,rgba(26,26,28,.88) 38%,rgba(26,26,28,.42) 72%,rgba(26,26,28,.18) 100%);}
body.theme-lights .hero h1{color:var(--warm);text-shadow:0 0 22px rgba(242,193,78,.42),0 0 3px rgba(242,193,78,.5);}
body.theme-lights .hero .lead{color:var(--warm-dim);}
body.theme-lights .hero-eyebrow,body.theme-lights .section-tag,body.theme-lights .price-label,body.theme-lights .region-sub{color:var(--gold);}
body.theme-lights .hero-eyebrow::before{background:var(--gold);box-shadow:var(--glow-sm);}
/* buttons in the page body and call-bar: gold primary with dark text, outline secondary */
body.theme-lights main .btn,body.theme-lights .call-bar .btn{background:var(--gold);border-color:var(--gold);color:var(--char);box-shadow:0 0 18px rgba(242,193,78,.28);}
body.theme-lights main .btn:hover,body.theme-lights .call-bar .btn:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--char);}
body.theme-lights main .btn-alt,body.theme-lights main .btn-outline,body.theme-lights main .btn-ghost-dark,body.theme-lights .call-bar .btn-alt{background:transparent;color:var(--warm);border-color:var(--warm-dim);box-shadow:none;}
body.theme-lights main .btn-alt:hover,body.theme-lights main .btn-outline:hover,body.theme-lights main .btn-ghost-dark:hover,body.theme-lights .call-bar .btn-alt:hover{background:var(--warm);color:var(--char);border-color:var(--warm);}
body.theme-lights .header-cta .btn{background:var(--gold);border-color:var(--gold-2);color:var(--char);}
body.theme-lights .header-cta .btn:hover{background:var(--gold-2);border-color:var(--gold-2);color:var(--char);}
body.theme-lights .call-bar{background:var(--char-2);border-top-color:var(--char-line);box-shadow:0 -4px 16px rgba(0,0,0,.4);}
/* strips + bands */
body.theme-lights .breadcrumbs{background:var(--char-2);color:var(--warm-dim);border-bottom-color:var(--char-line);}
body.theme-lights .breadcrumbs [aria-current="page"]{color:var(--warm);}
body.theme-lights .breadcrumbs a:hover{color:var(--gold);}
body.theme-lights .trust-strip{background:var(--char-2);border-bottom-color:var(--char-line);}
body.theme-lights .trust-row{color:var(--warm);}
body.theme-lights .trust-row svg{color:var(--gold);}
body.theme-lights .text-band,body.theme-lights .cta-band{background:var(--char-2);color:var(--warm);border-color:var(--char-line);}
body.theme-lights .cta-inner h2{color:var(--warm);}
body.theme-lights .cta-inner p{color:var(--warm-dim);}
/* sections + prose */
body.theme-lights .section,body.theme-lights .section.dark{background:var(--char);border-color:var(--char-line);}
body.theme-lights .section.alt{background:var(--char-2);}
body.theme-lights .section h2,body.theme-lights .section h3,body.theme-lights .prose h2,body.theme-lights .prose h3{color:var(--warm);}
body.theme-lights .section .desc,body.theme-lights .prose p,body.theme-lights .prose li,body.theme-lights .check-list li{color:var(--warm-dim);}
body.theme-lights .prose .lead-text{color:var(--warm);}
body.theme-lights .prose a,body.theme-lights a.u,body.theme-lights .form-sub a{color:var(--gold);}
body.theme-lights .check-list li::before{border-color:var(--gold);}
body.theme-lights .section .answer-box{background:var(--char-2);border-color:var(--char-line);border-left-color:var(--gold);}
body.theme-lights .answer-box h2{color:var(--gold) !important;}
body.theme-lights .answer-box p{color:var(--warm);}
/* cards, aside, photo frame glow */
body.theme-lights .price-card,body.theme-lights .region-card,body.theme-lights .feature{background:var(--char-2);color:var(--warm);border-color:var(--char-line);box-shadow:0 0 0 1px rgba(242,193,78,.1),0 18px 40px rgba(0,0,0,.45);}
body.theme-lights .price-big{color:var(--gold);text-shadow:0 0 20px rgba(242,193,78,.35);}
body.theme-lights .plain-links a{color:var(--warm);}
body.theme-lights .plain-links a:hover{color:var(--gold);}
.glow-frame img{border:1px solid rgba(242,193,78,.45);box-shadow:0 0 0 4px rgba(242,193,78,.08),0 0 38px rgba(242,193,78,.32),0 18px 40px rgba(0,0,0,.45);}
body.theme-lights .side-photo img,.xmas-teaser .split-media img{aspect-ratio:16/9;}
/* form */
body.theme-lights .form-wrap{background:var(--char-2);border-color:var(--char-line);box-shadow:none;}
body.theme-lights .form-title{color:var(--warm);}
body.theme-lights .form-sub,body.theme-lights .form-note{color:var(--warm-dim);}
body.theme-lights .field label{color:var(--warm);}
body.theme-lights .field .req{color:var(--gold);}
body.theme-lights .field input,body.theme-lights .field select,body.theme-lights .field textarea{background:var(--char);border-color:#5a5a61;color:var(--warm);}
body.theme-lights .field textarea::placeholder{color:#a39d90;}
body.theme-lights .field input:focus,body.theme-lights .field select:focus,body.theme-lights .field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,193,78,.25);}
/* faq + link cards + tables */
body.theme-lights .faq-item{border-bottom-color:var(--char-line);}
body.theme-lights .faq-q{color:var(--warm);}
body.theme-lights .faq-q::after{border-color:var(--gold);}
body.theme-lights .faq-a{color:var(--warm-dim);}
body.theme-lights .link-card{background:var(--char-2);border-color:var(--char-line);}
body.theme-lights .link-card strong{color:var(--warm);}
body.theme-lights .link-card span{color:var(--warm-dim);}
body.theme-lights .link-card:hover{border-color:var(--gold);}
body.theme-lights .link-card:hover strong{color:var(--gold);}
body.theme-lights .info-table th,body.theme-lights .info-table td{border-color:var(--char-line);}
body.theme-lights .info-table th,body.theme-lights .info-table tbody tr:nth-child(even){background:var(--char-2);color:var(--warm);}
body.theme-lights .info-table a{color:var(--gold);}
/* footer: charcoal instead of navy so the page reads as one piece */
body.theme-lights footer.site-footer{background:#121214;border-top:1px solid var(--char-line);}
body.theme-lights .site-footer .footer-contact svg{color:var(--gold);}
body.theme-lights .site-footer .footer-bottom{border-top-color:var(--char-line);}

/* Homepage teaser: the one charcoal band on index.html besides the footer. */
.section.xmas-teaser{background:radial-gradient(ellipse at 22% 40%,rgba(242,193,78,.13),rgba(242,193,78,0) 58%),var(--char);color:var(--warm);}
.section.xmas-teaser .section-tag{color:var(--gold);}
.section.xmas-teaser h2{color:var(--warm);text-shadow:0 0 22px rgba(242,193,78,.4),0 0 3px rgba(242,193,78,.45);}
.section.xmas-teaser .desc{color:var(--warm-dim);}
.section.xmas-teaser .btn{background:var(--gold);border-color:var(--gold);color:var(--char);box-shadow:0 0 18px rgba(242,193,78,.28);}
.section.xmas-teaser .btn:hover{background:var(--gold-2);border-color:var(--gold-2);}
.section.xmas-teaser .btn-outline{background:transparent;color:var(--warm);border-color:var(--warm-dim);box-shadow:none;}
.section.xmas-teaser .btn-outline:hover{background:var(--warm);color:var(--char);border-color:var(--warm);}
@media (max-width:560px){
  body.theme-lights .hero-media img{object-position:70% 50%;}
  body.theme-lights .hero-media::after{background:linear-gradient(180deg,rgba(26,26,28,.9) 0%,rgba(26,26,28,.8) 55%,rgba(26,26,28,.6) 100%);}
  .section.xmas-teaser .hero-actions .btn{flex:1 1 100%;}
}
