/* Metro Steamway — modern clean white services site (2026) Mobile-first. System fonts for speed. No external requests. */ :root{ --brand:#0e63ff; --brand-dark:#0a47b3; --brand-soft:#eaf1ff; --ink:#0c1726; --body:#3b4a5a; --muted:#6b7a8d; --line:#e6ebf2; --bg:#ffffff; --bg-soft:#f5f8fc; --ok:#15a06a; --danger:#e0392b; --star:#ffb400; --radius:16px; --radius-sm:10px; --shadow:0 1px 2px rgba(12,23,38,.06),0 8px 24px rgba(12,23,38,.06); --shadow-lg:0 12px 40px rgba(12,23,38,.12); --maxw:1160px; --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{margin:0;font-family:var(--font);color:var(--body);background:var(--bg-soft);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased} /* Home only: dark viewport canvas so iOS's status-bar area and the overscroll bounce read dark (matching the hero) instead of the light body bg. On so the light content sections below the hero — which rely on the light body bg — are unaffected. */ html.page-home{background:#0c1726} h1,h2,h3{color:var(--ink);line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em} h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800} h2{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:800} h3{font-size:1.18rem;font-weight:700} p{margin:0 0 1rem} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} img,svg{max-width:100%} ul{margin:0;padding:0;list-style:none} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))} .narrow{max-width:760px} .center{text-align:center} .skip-link{position:absolute;left:-999px}.skip-link:focus{left:8px;top:8px;background:#fff;padding:8px 14px;border-radius:8px;z-index:200} .eyebrow{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--brand);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem} /* icons */ .ico{width:24px;height:24px;flex:0 0 auto} .ico-sm{width:18px;height:18px;flex:0 0 auto;vertical-align:-3px} .ico-xl{width:54px;height:54px} .stars{display:inline-flex;color:var(--star)}.stars .ico{width:20px;height:20px} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:1rem; padding:13px 22px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.15s;white-space:nowrap;text-decoration:none} .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn-lg{padding:16px 28px;font-size:1.06rem} .btn-block{display:flex;width:100%} .btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-dark)} .btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{filter:brightness(.92)} .btn-ghost{background:var(--brand-soft);color:var(--brand-dark)}.btn-ghost:hover{background:#dde8ff} .btn-outline{background:#fff;color:var(--brand);border-color:var(--brand)}.btn-outline:hover{background:var(--brand-soft)} .btn-light{background:#fff;color:var(--brand-dark)} .btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}.btn-outline-light:hover{background:rgba(255,255,255,.12)} .btn-phone{background:var(--brand-soft);color:var(--brand-dark);padding:11px 18px} /* topbar */ .topbar{display:none;background:transparent;color:var(--muted);font-size:.85rem;font-weight:600} .topbar-in{display:flex;align-items:center;justify-content:flex-end;gap:10px;height:40px;max-width:1500px} .topbar-in a{color:var(--muted)} .topbar-in a:hover{color:var(--brand);text-decoration:none} .topbar-sep{opacity:.45} .topbar .topbar-call{margin-left:auto;color:#fff;font-weight:700} .topbar-sep{color:#8ea2ba} /* header */ /* transparent on load; on scroll JS adds .scrolled -> white floating pill */ .site-header{position:sticky;top:0;z-index:100;background:transparent;transition:padding .28s ease} .header-in{display:flex;align-items:center;gap:18px;height:68px;max-width:1500px;transition:max-width .28s ease,background .28s ease,box-shadow .28s ease,border-radius .28s ease,padding .28s ease} .site-header.scrolled{padding-top:30px} .site-header.scrolled .header-in{max-width:1600px;background:#fff;border-radius:999px;box-shadow:0 12px 34px rgba(14,24,60,.14);padding-left:34px;padding-right:34px} .header-action{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;font-size:.95rem;background:none;border:0;cursor:pointer;font-family:inherit} .header-action:hover{color:var(--brand);text-decoration:none} /* site search modal (Pagefind) */ .search-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:8vh 16px 16px} .search-modal[hidden]{display:none} .search-backdrop{position:absolute;inset:0;background:rgba(12,23,38,.55)} .search-panel{position:relative;width:100%;max-width:640px;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:22px} .search-close{position:absolute;top:12px;right:14px;border:0;background:none;font-size:1.1rem;line-height:1;color:var(--muted);cursor:pointer;padding:6px} .search-close:hover{color:var(--ink)} #search-ui{--pagefind-ui-primary:var(--brand);--pagefind-ui-font:var(--font);--pagefind-ui-border-radius:10px;--pagefind-ui-border:var(--line)} .m-search{display:flex;align-items:center;gap:8px;width:100%;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-weight:600;color:var(--ink);cursor:pointer;font-size:1rem;font-family:inherit} .m-search:hover{border-color:var(--brand);color:var(--brand)} /* live chat "text us" widget */ .chat-fab{position:fixed;right:20px;bottom:24px;z-index:150;display:inline-flex;align-items:center;gap:8px;background:var(--brand);color:#fff;border:0;border-radius:999px;padding:13px 20px;font-weight:700;font-size:1rem;font-family:inherit;cursor:pointer;box-shadow:0 10px 30px rgba(14,99,255,.35)} .chat-fab:hover{background:var(--brand-dark)} .chat-fab svg{width:20px;height:20px} .chat-widget{position:fixed;right:20px;bottom:24px;z-index:151;width:340px;max-width:calc(100vw - 32px);background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(12,23,38,.25);overflow:hidden} .chat-widget[hidden]{display:none} .chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;background:var(--brand);color:#fff;padding:14px 16px} .chat-head-t{display:flex;flex-direction:column;line-height:1.3} .chat-head-t strong{font-size:1rem} .chat-head-t span{font-size:.82rem;opacity:.9} .chat-x{background:none;border:0;color:#fff;font-size:1rem;cursor:pointer;padding:2px 4px;opacity:.85} .chat-x:hover{opacity:1} .chat-form{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px} .chat-form input,.chat-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font:inherit;font-size:.95rem;color:var(--ink);background:#fff} .chat-form input:focus,.chat-form textarea:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .chat-form textarea{resize:vertical;min-height:70px} .chat-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .chat-status{margin:2px 0 0;font-size:.9rem;font-weight:600;color:var(--brand);min-height:1em} .chat-fine{margin:0;font-size:.72rem;color:var(--muted);line-height:1.4} @media(max-width:860px){ .chat-fab{bottom:calc(18px + env(safe-area-inset-bottom));right:16px;padding:11px 16px} .chat-widget{bottom:calc(18px + env(safe-area-inset-bottom));right:16px} } /* Updates / blog */ .post-list{display:flex;flex-direction:column;gap:20px} .post-card{border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:#fff} .post-card h2{margin:.35rem 0 .5rem;font-size:1.4rem;line-height:1.2} .post-card h2 a{color:var(--ink)} .post-card h2 a:hover{color:var(--brand)} .post-date{color:var(--muted);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin:0} .post-more{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;margin-top:10px} .post-body h2{margin-top:1.7rem;margin-bottom:.4rem} .post-body p{margin:.7rem 0;line-height:1.7} .post-back{margin-top:2.2rem} .post-back a{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600} .brand{display:inline-flex;align-items:center;gap:9px;font-size:1.3rem;color:var(--ink);font-weight:600;letter-spacing:-.02em} .brand:hover{text-decoration:none} .brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--brand);color:#fff} .brand-mark .ico{width:22px;height:22px} .brand-text strong{font-weight:800;color:var(--brand)} .main-nav{display:none;gap:4px} .nav-divider{display:none;width:1px;height:24px;background:var(--line);flex:0 0 auto} .main-nav a{color:var(--body);font-weight:600;padding:8px 13px;border-radius:8px;font-size:.97rem} .main-nav a:hover{background:var(--bg-soft);text-decoration:none;color:var(--ink)} .main-nav a[aria-current=page]{color:var(--brand);background:var(--brand-soft)} .header-cta{display:none;margin-left:auto} .nav-toggle{margin-left:auto;display:inline-grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);background:#fff;border-radius:11px;color:var(--ink);cursor:pointer} .mobile-nav{display:none;flex-direction:column;gap:4px;padding:12px 20px 20px;border-bottom:1px solid var(--line);background:#fff} .mobile-nav.open{display:flex} .mobile-nav a{padding:13px 12px;border-radius:10px;color:var(--ink);font-weight:600;font-size:1.05rem} .mobile-nav a:hover,.mobile-nav a[aria-current=page]{background:var(--bg-soft);text-decoration:none} .mobile-nav .btn{margin-top:8px} /* hero */ .hero{background:linear-gradient(180deg,var(--bg-soft),#fff);padding:36px 0 44px;border-bottom:1px solid var(--line)} .hero-grid{display:grid;gap:32px} .hero-copy .lead{font-size:1.18rem;color:var(--body);max-width:38ch} .lead{font-size:1.16rem;color:var(--body)} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 16px} .hero-rating{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:.96rem;color:var(--muted);font-style:italic} /* Home hero — full-width copy over a DARKENED carpet-cleaning photo; the transparent header floats over it (hero is pulled up under the sticky header via negative margin). */ .hero-home{ background: linear-gradient(180deg,rgba(8,16,30,.60) 0%,rgba(8,16,30,0) 24%), linear-gradient(105deg,rgba(8,16,30,.90) 0%,rgba(8,16,30,.78) 40%,rgba(8,16,30,.48) 66%,rgba(8,16,30,.24) 100%), url(/assets/img/carpet-cleaning-wand-extraction-charlotte-lg.jpg) center right/cover no-repeat; color:#fff; padding:48px 0 56px; } /* Slide the hero up behind the transparent header (68px) and give copy room below it. Padding carries a ~20% taller hero than the previous light version. */ .page-home .hero-home{margin-top:-68px;padding:calc(68px + 70px) 0 79px} /* >=700px the topbar (40px) appears above the header and also overlays the hero → pull the hero up under the full 108px chrome (topbar + header). */ @media(min-width:700px){.page-home .hero-home{margin-top:-108px;padding:calc(108px + 70px) 0 79px}} @media(min-width:760px){.page-home .hero-home{padding:calc(108px + 110px) 0 120px}} /* Mobile: copy stacks over the photo — deepen the scrim so every line stays readable. The hero fills the full device viewport (dvh handles the dynamic Safari toolbar on any phone); content stays top-aligned so it never collides with the header, image fills below. */ @media(max-width:759px){ .hero-home{ background: linear-gradient(180deg,rgba(8,16,30,.74) 0%,rgba(8,16,30,.60) 45%,rgba(8,16,30,.72) 100%), url(/assets/img/carpet-cleaning-wand-extraction-charlotte-lg.jpg) center/cover no-repeat; min-height:100vh; min-height:100dvh; } } /* Match the header's outer width (1500px) so the hero copy's left edge lines up with the logo/nav; individual lines keep their own readable measure below. */ .hero-home-in{max-width:1500px} .hero-home h1{max-width:16ch} .hero-home .hero-sub{max-width:34ch} .hero-home h1{font-size:clamp(2.3rem,1.1rem + 5vw,4.1rem);line-height:1.03;letter-spacing:-.02em;margin:0 0 16px;color:#fff} .hero-home .hero-sub{font-size:clamp(1.15rem,1rem + 1.2vw,1.55rem);color:rgba(255,255,255,.92);font-weight:600;margin:0 0 26px} .hero-home .hero-body{font-size:1.12rem;line-height:1.7;color:rgba(255,255,255,.84);max-width:680px;margin:0 0 28px} .hero-home .hero-body strong{color:#fff} .hero-home .hero-body a{color:#fff;font-weight:700;text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:3px} .hero-home .hero-body a:hover{color:#fff;text-decoration-color:#fff} .hero-accent{font-style:italic;font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:3px} .hero-home .hero-accent{color:#fff} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 14px} .btn-sms{background:var(--danger);color:#fff} .btn-sms:hover{filter:brightness(.93)} .btn-call{background:#fff;color:var(--ink);border:1.5px solid #ccd6e2} .btn-call:hover{background:var(--bg-soft);border-color:#b3c0d0} .hero-home .hero-fine{font-size:.98rem;color:rgba(255,255,255,.72);margin:0 0 22px} .hero-home .hero-fine .hero-accent{font-style:normal;color:rgba(255,255,255,.9)} .hero-home .hero-rating{color:rgba(255,255,255,.82);font-style:normal} /* Transparent header floating over the dark home hero — white logo/nav/actions. On scroll, JS adds .scrolled → the white floating pill takes over (reverts to defaults). */ .page-home .site-header:not(.scrolled) .brand-logo{filter:brightness(0) invert(1)} .page-home .site-header:not(.scrolled) .nav-divider{background:rgba(255,255,255,.28)} /* Only the TOP-LEVEL nav links go white — the mega-dropdown panels stay white-backed with their own dark link colors, so scope to direct children and the .nav-top triggers. */ .page-home .site-header:not(.scrolled) .main-nav>a, .page-home .site-header:not(.scrolled) .nav-top{color:rgba(255,255,255,.9)} .page-home .site-header:not(.scrolled) .main-nav>a:hover, .page-home .site-header:not(.scrolled) .nav-top:hover{background:rgba(255,255,255,.14);color:#fff} .page-home .site-header:not(.scrolled) .main-nav>a[aria-current=page], .page-home .site-header:not(.scrolled) .nav-top[aria-current=page]{color:#fff;background:rgba(255,255,255,.16)} .page-home .site-header:not(.scrolled) .header-action{color:#fff} .page-home .site-header:not(.scrolled) .header-action:hover{color:#fff;opacity:.82} .page-home .site-header:not(.scrolled) .nav-toggle{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.38)} /* Topbar (Cell/Email) also floats transparently over the dark hero on home — lifted above the pulled-up hero, white text. It scrolls away normally; only the header sticks/pills. */ .page-home .topbar{position:relative;z-index:110;color:#fff} .page-home .topbar-in a{color:rgba(255,255,255,.88)} .page-home .topbar-in a:hover{color:#fff} .page-home .topbar-sep{color:rgba(255,255,255,.45)} .badge-row{display:flex;flex-wrap:wrap;gap:8px 16px;margin:18px 0 0} .badge-row li{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;font-weight:600;color:var(--ink)} .badge-row .ico-sm{color:var(--ok)} /* hero form card */ .hero-form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:22px} .hero-form-head{margin-bottom:14px} .hero-form-head h2{margin:0;font-size:1.4rem} .hero-form-head p{margin:2px 0 0;color:var(--muted);font-size:.92rem} /* forms */ .quote-form{display:grid;grid-template-columns:1fr 1fr;gap:12px} .fg{display:flex;flex-direction:column;gap:5px} .fg-full{grid-column:1/-1} .quote-form label{font-size:.82rem;font-weight:700;color:var(--ink)} .quote-form input,.quote-form select,.quote-form textarea{font:inherit;font-size:1rem;padding:12px 13px;border:1.5px solid var(--line);border-radius:var(--radius-sm);background:#fff;color:var(--ink);width:100%} .quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)} .quote-form .btn-block{grid-column:1/-1;margin-top:2px} .hp{position:absolute;left:-9999px} .form-note{grid-column:1/-1;margin:0;font-size:.85rem;color:var(--muted);text-align:center} .form-note .ico-sm{color:var(--ok)} .form-status{grid-column:1/-1;font-size:.95rem;font-weight:600;text-align:center} .form-status.ok{color:var(--ok)}.form-status.err{color:var(--danger)} /* review strip */ .review-strip{background:var(--ink);color:#dce6f2;padding:16px 0} .review-strip-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;text-align:center} .review-strip p{margin:0}.review-strip strong{color:#fff} .review-logos{display:flex;gap:14px;flex-wrap:wrap} .review-logos span{font-weight:700;color:#9fb4cc} /* sections */ .section{padding:56px 0} .section-soft{background:var(--bg-soft)} .section-head{text-align:center;max-width:640px;margin:0 auto 36px} .section-head p{color:var(--muted);font-size:1.08rem;margin:0} .section-head-left{text-align:left;margin:0 0 24px} /* service cards (image) */ .svc-grid{display:grid;grid-template-columns:1fr;gap:18px} .svc-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s;color:var(--ink)} .svc-card:hover{text-decoration:none;border-color:#c9d8f5;box-shadow:var(--shadow-lg);transform:translateY(-2px)} .svc-thumb{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--brand-soft)} .svc-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s} .svc-card:hover .svc-thumb img{transform:scale(1.05)} .svc-ico{position:absolute;left:12px;bottom:12px;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.95);color:var(--brand);box-shadow:var(--shadow)} .svc-ico .ico{width:24px;height:24px} .svc-body{display:flex;flex-direction:column;gap:7px;padding:16px 20px 20px;flex:1} .svc-name{font-weight:800;font-size:1.14rem;display:flex;align-items:center;gap:8px;color:var(--ink)} .svc-desc{color:var(--muted);font-size:.96rem} .svc-link{margin-top:auto;color:var(--brand);font-weight:700;font-size:.94rem;display:inline-flex;align-items:center;gap:4px} .tag-24{background:var(--danger);color:#fff;font-size:.66rem;font-weight:800;padding:2px 7px;border-radius:999px;letter-spacing:.03em} /* features */ .feature-grid{display:grid;grid-template-columns:1fr;gap:18px} .feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-align:center} .feature-ico{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--brand-soft);color:var(--brand);margin-bottom:12px} .feature p{color:var(--muted);margin:0;font-size:.97rem} /* how it works */ .steps{display:grid;gap:22px;counter-reset:s} .steps li{display:flex;gap:16px;align-items:flex-start} .step-n{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;display:grid;place-items:center;font-size:1.2rem} .steps h3{margin:.1rem 0 .2rem}.steps p{margin:0;color:var(--muted)} /* reviews */ .review-grid{display:grid;grid-template-columns:1fr;gap:16px} .review-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)} .review-card blockquote{margin:10px 0 12px;color:var(--ink);font-size:1.02rem} .review-card figcaption{font-weight:700;color:var(--muted);font-size:.92rem} /* cta band */ .cta-band{background:linear-gradient(120deg,var(--brand),var(--brand-dark));color:#fff;padding:44px 0} .cta-band-in{display:flex;flex-direction:column;gap:18px;align-items:flex-start} .cta-band h2{color:#fff;margin:0 0 4px} .cta-band p{margin:0;color:#dce8ff} .cta-band-actions{display:flex;flex-wrap:wrap;gap:12px} /* page hero (interior) */ .page-hero{background:linear-gradient(180deg,var(--bg-soft),#fff);padding:34px 0 30px;border-bottom:1px solid var(--line)} .page-hero .lead{max-width:62ch} .page-hero-emergency{background:linear-gradient(180deg,#fdeeec,#fff)} .page-hero-emergency .eyebrow{color:var(--danger)} .crumbs{display:flex;align-items:center;gap:6px;font-size:.86rem;color:var(--muted);margin-bottom:14px} .crumbs a{color:var(--muted)}.crumbs .ico-sm{width:14px;height:14px;color:#aebac9} /* service detail layout */ .svc-layout{display:grid;gap:30px} .svc-main h2{margin-top:1.6rem} .svc-main h2:first-child{margin-top:0} .check-list{display:grid;gap:10px;margin:0 0 1rem} .check-list li{display:flex;gap:10px;align-items:flex-start} .check-list .ico-sm{color:var(--ok);margin-top:3px} .local-note{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-top:24px} .local-note h3{display:flex;align-items:center;gap:8px;color:var(--brand-dark)} .local-note p{margin:0;color:var(--body)} .svc-side{display:flex;flex-direction:column;gap:16px} .side-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px} .side-card h2{font-size:1.3rem;margin:0} .side-sub{color:var(--muted);font-size:.9rem;margin:2px 0 14px} .side-call{text-align:center} .side-call>p:first-child{font-weight:700;color:var(--ink);margin-bottom:10px} .side-hours{font-size:.85rem;color:var(--muted);margin:10px 0 0} /* faq */ .faq-list{display:grid;gap:10px} .faq{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden} .faq summary{cursor:pointer;font-weight:700;color:var(--ink);padding:16px 18px;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:1.4rem;color:var(--brand);font-weight:400;line-height:1} .faq[open] summary::after{content:"–"} .faq summary:hover{background:var(--bg-soft)} .faq-a{padding:0 18px 16px}.faq-a p{margin:0;color:var(--body)} /* gallery (filterable + lightbox) */ .gallery-filters{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:26px} .gf-btn{font:inherit;font-weight:700;font-size:.92rem;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--body);cursor:pointer;transition:.15s} .gf-btn:hover{border-color:var(--brand);color:var(--brand)} .gf-btn.is-active{background:var(--brand);border-color:var(--brand);color:#fff} .gallery-grid{display:grid;grid-template-columns:1fr;gap:18px} .gallery-tile{margin:0} .gallery-tile.hide{display:none} .gtile-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:var(--radius)} .gtile-img{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line);background:var(--brand-soft)} .gtile-img img{width:100%;height:100%;object-fit:cover;display:block;transition:.35s} .gtile-btn:hover .gtile-img img{transform:scale(1.05)} .gtile-btn:focus-visible{outline:3px solid var(--brand);outline-offset:3px} .ba-badge{position:absolute;left:12px;top:12px;background:var(--ink);color:#fff;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px} .gallery-tile figcaption{margin-top:8px;font-weight:600;color:var(--ink);text-align:center;font-size:.95rem} .gallery-empty{text-align:center;color:var(--muted);padding:30px} .proof-note{margin-top:26px;text-align:center;color:var(--muted)}.proof-note .ico-sm{color:var(--star)} .lightbox{position:fixed;inset:0;z-index:200;background:rgba(8,17,32,.92);display:flex;align-items:center;justify-content:center;padding:24px} .lightbox[hidden]{display:none} .lb-figure{margin:0;max-width:min(1000px,92vw);display:flex;flex-direction:column;align-items:center} .lb-figure img{max-width:100%;max-height:80vh;border-radius:12px;display:block;box-shadow:0 20px 60px rgba(0,0,0,.5)} .lb-figure figcaption{color:#fff;margin-top:12px;font-weight:600} .lb-close{position:absolute;top:14px;right:18px;width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer} .lb-close:hover{background:rgba(255,255,255,.3)} /* service inline photo */ .svc-photo{margin:0 0 26px;border-radius:var(--radius);overflow:hidden;position:relative;border:1px solid var(--line);background:var(--brand-soft)} .svc-photo img{width:100%;height:auto;display:block;max-height:560px;object-fit:cover} .ba-tag{position:absolute;left:0;bottom:0;background:rgba(12,23,38,.84);color:#fff;font-size:.82rem;font-weight:700;padding:7px 14px;border-top-right-radius:10px} /* about / family band */ .about-grid{display:grid;gap:28px} .about-media{display:grid;gap:12px} .about-media>img{width:100%;border-radius:var(--radius);display:block;object-fit:cover;aspect-ratio:16/9;border:1px solid var(--line)} .about-media-sub{display:grid;grid-template-columns:1fr 1fr;gap:12px} .about-media-sub img{width:100%;border-radius:var(--radius-sm);aspect-ratio:4/3;object-fit:cover;display:block;border:1px solid var(--line)} .about-copy .check-list{margin:1.1rem 0 1.5rem} /* brand logo */ .brand-logo{display:block;height:26px;width:auto} .brand-footer .brand-logo{height:38px;background:#fff;padding:8px 12px;border-radius:10px} /* contact */ .contact-grid{display:grid;gap:28px} .contact-list{display:grid;gap:18px;margin:0 0 20px} .contact-list li{display:flex;gap:14px;align-items:flex-start} .ci-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--brand-soft);color:var(--brand);flex:0 0 auto} .ci-label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700} .contact-list a{font-size:1.12rem;font-weight:700;color:var(--ink)} .emergency-box{background:#fdeeec;border:1px solid #f6cdc8;border-radius:var(--radius-sm);padding:14px 16px;color:#8a241b} .emergency-box .ico-sm{color:var(--danger)} /* footer */ .site-footer{background:var(--ink);color:#aebccd;padding:48px 0 0;font-size:.95rem} .footer-grid{display:grid;grid-template-columns:1fr;gap:30px} .footer-col h3{color:#fff;font-size:1rem;margin-bottom:14px} .footer-col ul{display:grid;gap:9px} .footer-col a{color:#aebccd}.footer-col a:hover{color:#fff} .brand-footer{color:#fff;margin-bottom:12px}.brand-footer .brand-text strong{color:#fff} .footer-col>p{color:#8ea2ba;max-width:38ch} .footer-social{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;font-weight:700} .footer-contact a,.footer-contact li{display:flex;align-items:center;gap:8px} .footer-areas{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:18px;padding-bottom:18px;font-size:.88rem;color:#8ea2ba} .footer-areas strong{color:#cdd9e8} .footer-bottom{background:#081120;padding:16px 0;font-size:.82rem;color:#7b8da3} .footer-bottom .container{display:flex;flex-direction:column;gap:6px} .footer-legal{display:flex;flex-wrap:wrap;gap:6px 16px} .footer-legal a{color:#9fb0c4} .footer-legal a:hover{color:#fff} .legal-updated{margin-top:8px;color:#64748b;font-size:.9rem} .legal-doc h2{margin:34px 0 10px;font-size:1.2rem} .legal-doc h2:first-child{margin-top:0} .legal-doc p,.legal-doc li{color:#334155} .legal-doc a{color:#0e63ff} /* ---------- responsive ---------- */ @media(min-width:700px){ .topbar{display:block} } @media(min-width:560px){ .quote-form{grid-template-columns:1fr 1fr} .svc-grid{grid-template-columns:1fr 1fr} .gallery-grid{grid-template-columns:1fr 1fr} .review-grid{grid-template-columns:1fr 1fr} .feature-grid{grid-template-columns:1fr 1fr} .footer-bottom .container{flex-direction:row;justify-content:space-between} } @media(min-width:860px){ .hero-grid{grid-template-columns:1.05fr .95fr;align-items:start} .hero{padding:60px 0 70px} .svc-grid{grid-template-columns:repeat(3,1fr)} .svc-grid-lg{grid-template-columns:repeat(2,1fr)} .feature-grid{grid-template-columns:repeat(4,1fr)} .review-grid{grid-template-columns:repeat(3,1fr)} .cta-band-in{flex-direction:row;align-items:center;justify-content:space-between} .svc-layout{grid-template-columns:1.6fr 1fr;align-items:start} .svc-side{position:sticky;top:90px} .how-grid{grid-template-columns:1fr 1.4fr;gap:40px;align-items:center} .about-grid{grid-template-columns:1.05fr 1fr;gap:44px;align-items:center} .contact-grid{grid-template-columns:1fr 1fr;align-items:start} .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr} .gallery-grid{grid-template-columns:repeat(3,1fr)} } @media(min-width:980px){ .main-nav{display:flex} .nav-divider{display:block} .header-cta{display:block} .nav-toggle{display:none} } @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} /* location / service-area cards */ .area-grid{display:grid;grid-template-columns:1fr;gap:14px} .area-card{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;transition:.18s;color:var(--ink)} .area-card:hover{text-decoration:none;border-color:#c9d8f5;box-shadow:var(--shadow-lg);transform:translateY(-2px)} .area-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand);flex:0 0 auto} .area-body{display:flex;flex-direction:column;gap:3px} .area-name{font-weight:800;font-size:1.1rem;color:var(--ink)} .area-sub{font-size:.85rem;color:var(--muted)} .area-card .svc-link{margin-top:6px} .footer-areas a{color:#9fb4cc} .footer-areas a:hover{color:#fff} @media(min-width:560px){.area-grid{grid-template-columns:1fr 1fr}} @media(min-width:860px){.area-grid{grid-template-columns:repeat(3,1fr)}} /* embedded map */ .map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-top:18px;background:var(--bg-soft)} .map-embed iframe{width:100%;height:280px;border:0;display:block} /* anchored sections clear the sticky header when jumped to via #hash */ :target{scroll-margin-top:88px} /* Trust bar under conversion heroes (ads-style service pages) */ .trustbar{border-block:1px solid var(--line);background:#fff} .trustbar-in{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);padding:0} .trustbar .cell{background:#fff;display:flex;align-items:center;gap:12px;justify-content:center;padding:18px 14px} .trustbar .cell .ico{color:var(--brand);width:26px;height:26px;flex:none} .trustbar .cell b{display:block;font-size:.98rem;line-height:1.25} .trustbar .cell span{font-size:.85rem;color:var(--muted)} @media(min-width:860px){.trustbar-in{grid-template-columns:repeat(4,1fr)}} /* Direct-intent form (ads-style, single column, no service picker) */ .quote-form-stacked{grid-template-columns:1fr} .quote-form-stacked .fg{grid-column:1/-1} /* Conversion hero variant — ads-site proportions (bigger display type, taller hero, thinner + lowered form card). Scoped so the homepage hero keeps its original sizing. */ .hero-conv{padding:clamp(2.5rem,2rem + 4vw,4.25rem) 0 clamp(3rem,2rem + 5vw,5rem)} .hero-conv h1{font-size:clamp(2.4rem,1.4rem + 4.4vw,4rem)} @media(min-width:860px){ .hero-conv .hero-grid{grid-template-columns:1fr 461px;gap:clamp(2rem,4vw,3.5rem)} .hero-conv .hero-form{margin-top:84px;max-width:461px;justify-self:end;width:100%} } /* Before/after gallery (service pages) */ .ba-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(min-width:640px){.ba-grid{gap:18px}} @media(min-width:900px){.ba-grid{grid-template-columns:repeat(3,1fr);gap:20px}} .ba-tile{margin:0} .ba-slot{display:flex;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;border:1px dashed var(--line)} .ba-half{flex:1;display:flex;align-items:flex-end;justify-content:center;padding:12px;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em} .ba-before{color:var(--muted);background:repeating-linear-gradient(45deg,#eef2f7,#eef2f7 10px,#e7ecf3 10px,#e7ecf3 20px)} .ba-after{color:var(--brand-dark);background:var(--brand-soft)} .ba-tile figcaption{margin-top:8px;text-align:center;font-weight:600;color:var(--ink);font-size:.86rem;line-height:1.3} @media(min-width:640px){.ba-tile figcaption{font-size:.95rem}} /* Service-areas columns (service pages) */ .area-cols{display:grid;grid-template-columns:1fr;gap:22px 32px} @media(min-width:560px){.area-cols{grid-template-columns:repeat(2,1fr)}} @media(min-width:900px){.area-cols{grid-template-columns:repeat(3,1fr)}} .area-col h3{display:flex;align-items:center;gap:6px;font-size:1rem;color:var(--brand-dark);margin:0 0 10px;padding-bottom:7px;border-bottom:1px solid var(--line)} .area-col h3 .ico-sm{color:var(--brand)} .area-col ul{display:flex;flex-direction:column;gap:5px} .area-col li{font-size:.96rem;color:var(--body)} .area-col li a{color:var(--brand-dark);font-weight:600} .area-cols-note{text-align:center;margin:28px 0 0;color:var(--muted)} /* ===== Mega menus (desktop) ===== */ .main-nav .nav-item{position:relative} .nav-top{display:inline-flex;align-items:center;gap:3px;color:var(--body);font-weight:600;padding:8px 13px;border-radius:8px;font-size:.97rem} .nav-top:hover{background:var(--bg-soft);text-decoration:none;color:var(--ink)} .nav-top[aria-current=page]{color:var(--brand);background:var(--brand-soft)} .nav-top .ico-sm{width:15px;height:15px;transition:transform .18s} .nav-item:hover .nav-top .ico-sm,.nav-item:focus-within .nav-top .ico-sm{transform:rotate(180deg)} .mega{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);min-width:340px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);padding:0;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;z-index:130} .nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;transform:translate(-50%,10px)} .nav-item::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px} /* hover bridge */ .mega-pad{padding:16px} .mega-cols{display:grid;gap:2px} .mega-cols-svc{grid-template-columns:1fr 1fr;min-width:420px} .mega-cols-areas{grid-template-columns:repeat(3,1fr);gap:18px;min-width:560px} .mega-cols-faq{grid-template-columns:1fr;min-width:360px} .mega-link{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;color:var(--ink);font-weight:600;font-size:.95rem} .mega-link:hover{background:var(--bg-soft);text-decoration:none;color:var(--brand-dark)} .mega-ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--brand-soft);color:var(--brand);flex:none} .mega-ico .ico-sm{width:17px;height:17px} .mega-h{font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:2px 0 6px 11px} .mega-col .mega-link{font-weight:600;font-size:.92rem;padding:7px 11px} .mega-link-faq{font-weight:500;color:var(--body)} .mega-link-faq .ico-sm{color:var(--brand);flex:none;transform:rotate(-90deg)} .mega-foot{display:flex;align-items:center;gap:6px;justify-content:center;padding:12px;border-top:1px solid var(--line);margin-top:6px;font-weight:700;font-size:.92rem;color:var(--brand)} .mega-foot:hover{text-decoration:none;background:var(--bg-soft);border-radius:0 0 16px 16px} /* ===== Mega menus (mobile accordion) ===== */ .m-group{border-radius:10px} .m-group-head{display:flex;align-items:center} .m-group-head a{flex:1;padding:13px 12px;border-radius:10px;color:var(--ink);font-weight:600;font-size:1.05rem} .m-group-head a[aria-current=page]{background:var(--bg-soft)} .m-expand{width:46px;height:46px;flex:none;border:0;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center;border-radius:10px} .m-expand .ico{transition:transform .18s} .m-expand[aria-expanded=true] .ico{transform:rotate(180deg)} .m-sub{padding:2px 0 8px 12px;margin-left:6px;border-left:2px solid var(--line)} .m-sub .mega-cols{display:block} .m-sub .mega-col{margin-bottom:6px} .m-sub .mega-h{margin:8px 0 2px 11px} .m-sub .mega-link{font-size:.98rem;padding:9px 11px;color:var(--body)} .m-sub .mega-ico{width:26px;height:26px} .m-sub .mega-foot{justify-content:flex-start;border-top:0;padding:9px 11px;margin:0} /* Split Call/Text buttons in the "Prefer to talk?" side card */ .side-call-btns{display:flex;gap:8px} .side-call-btns .btn{flex:1;padding-left:12px;padding-right:12px} /* Real review chip inside the hero form (conversion pages) */ .form-review{display:block;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:16px;text-decoration:none;color:var(--ink)} .form-review:hover{background:#eef3fb;text-decoration:none} .form-review .stars{display:block;margin-bottom:5px}.form-review .stars .ico{width:16px;height:16px} .form-review .rv-q{display:block;font-style:italic;font-size:.9rem;line-height:1.4;color:var(--body)} .form-review .rv-a{display:block;margin-top:5px;font-size:.8rem;font-weight:700;color:var(--brand-dark)} .form-review .rv-a .ico-sm{width:13px;height:13px;vertical-align:-2px} .hero-conv .hero-rating{margin-top:30px}