:root{--brand:#2563eb;--font-display:'Saira Condensed','Arial Narrow',Arial,sans-serif;--font-body:'Archivo','Helvetica Neue',Arial,sans-serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);line-height:1.65;color:var(--ink);background:var(--bg)}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3,.logo{font-family:var(--font-display)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;color:var(--heading)}
p{margin:0 0 1em}
.skip-link{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff!important;padding:10px 18px;z-index:100;font-weight:700;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
.btn{display:inline-block;background:var(--brand);color:#fff!important;font-weight:700;padding:14px 26px;border-radius:10px;border:0;cursor:pointer;font-size:1rem;transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.22)}
.btn.ghost{background:transparent;color:var(--brand)!important;border:2px solid var(--brand)}
.btn.big{font-size:1.15rem;padding:16px 32px}
.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:11px;font-size:1.28rem;font-weight:800;color:var(--heading);letter-spacing:-.01em;line-height:1.15;min-width:0}
.logo:hover{text-decoration:none}
.logo-mark{display:inline-flex;flex:0 0 auto}
.logo-mark svg{width:38px;height:38px;display:block}
.logo-word{color:var(--heading)}
.logo-accent{color:var(--brand)}
header.hdr-dark .logo-word{color:#fff}
.site-footer .logo{font-size:1.22rem;margin-bottom:12px}
.site-footer .logo-word{color:#fff}
@media (max-width:520px){.logo{font-size:1.08rem;gap:9px}.logo-mark svg{width:32px;height:32px}}
.main-nav{display:flex;gap:20px;flex-wrap:wrap}
.main-nav a{color:var(--ink);font-weight:600;font-size:.98rem}
/* Header dropdowns (Services / Service Areas) — every theme. The panel
   is styled from theme variables, so each theme's dropdown speaks its
   own design language; per-theme blocks below only tune the radius.
   Opens on hover (fine pointers, desktop widths), on keyboard
   :focus-within, and on the chevron toggle (.open, driven by the tiny
   inline script in lib/render.ts). Long lists scroll; the wide Areas
   panel runs two columns. */
.nav-item{position:relative;display:inline-flex;align-items:center;gap:2px}
.nav-toggle{background:none;border:0;color:var(--ink);cursor:pointer;font:inherit;font-size:.78rem;line-height:1;padding:6px 5px;border-radius:6px}
.nav-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.nav-drop{position:absolute;top:calc(100% + 10px);left:0;z-index:80;min-width:250px;max-width:88vw;max-height:min(64vh,470px);overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 22px 48px rgba(5,12,24,.22);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s ease,transform .16s ease,visibility .16s}
.nav-drop a{display:block;padding:8px 12px;border-radius:8px;color:var(--ink);font-weight:600;font-size:.95rem;white-space:nowrap}
.nav-drop a:hover{background:var(--alt);box-shadow:inset 3px 0 0 var(--brand);text-decoration:none}
.nav-drop a.drop-all{color:var(--brand);font-weight:800;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;margin-bottom:4px}
.nav-drop.cols{width:500px;column-count:2;column-gap:8px}
.nav-drop.cols a{break-inside:avoid}
.nav-drop.cols a.drop-all{column-span:all}
.nav-item.open .nav-drop,.nav-item:focus-within .nav-drop{opacity:1;visibility:visible;transform:translateY(0)}
@media (hover:hover) and (min-width:861px){.nav-item:hover .nav-drop{opacity:1;visibility:visible;transform:translateY(0)}}
header.hdr-dark .nav-toggle{color:#d7dee8}
header.hdr-dark .nav-drop a{color:var(--ink)}
header.hdr-centered .nav-drop{left:50%;transform:translate(-50%,6px)}
header.hdr-centered .nav-item.open .nav-drop,header.hdr-centered .nav-item:focus-within .nav-drop{transform:translate(-50%,0)}
@media (hover:hover) and (min-width:861px){header.hdr-centered .nav-item:hover .nav-drop{transform:translate(-50%,0)}}
.header-call{font-weight:800;color:var(--brand);font-size:1.05rem;white-space:nowrap}
.topbar{background:var(--heading);color:#fff;font-size:.88rem}
.topbar .wrap{display:flex;gap:10px 26px;flex-wrap:wrap;padding-block:7px;align-items:center}
.topbar a{color:#fff;font-weight:700}
.topbar .tb-right{margin-left:auto;opacity:.85}
header.hdr-dark{background:#0b0e13;border-bottom-color:rgba(255,255,255,.14)}
header.hdr-dark .logo{color:#fff}
header.hdr-dark .main-nav a{color:#d7dee8}
header.hdr-centered .header-in{flex-direction:column;justify-content:center;text-align:center;gap:8px}
header.hdr-centered .main-nav{justify-content:center}
/* Dropdown panel colours are pinned AFTER (and more specific than) the
   header-variant rules above. The panel lives inside .main-nav, so the
   dark-header rule (header.hdr-dark .main-nav a -> #d7dee8, the pale
   colour meant for links sitting on the dark bar itself) used to win
   its cascade tie against the panel rule in the dropdown block and
   paint the panel links pale grey — on Atlas's white panel that is
   1.35:1 contrast, effectively invisible. Panel links therefore always
   take the theme ink here, and the "All …" row takes the heading
   colour (the brand colour is owner-chosen, so it cannot be trusted
   to contrast with the panel); its brand cue moves to the divider. */
header .main-nav .nav-drop a,header.hdr-dark .main-nav .nav-drop a{color:var(--ink)}
header .main-nav .nav-drop a.drop-all{color:var(--heading);border-bottom-color:var(--brand)}
.crumbs{padding:18px 0 0;font-size:.92rem;color:var(--muted)}
.crumbs a{color:var(--muted);font-weight:600}
.crumbs .sep{margin:0 8px;opacity:.6}
.crumbs [aria-current]{color:var(--heading);font-weight:700}
.hero{padding:72px 0 56px;position:relative}
.hero h1{font-size:clamp(2rem,5vw,3.3rem);margin-bottom:.35em}
.hero .sub{font-size:1.18rem;max-width:720px;color:var(--muted)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero-img{border-radius:16px;width:100%;height:100%;object-fit:cover;min-height:280px}
.eyebrow{font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;color:var(--brand);margin:0 0 10px}
.callbar{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--brand);color:#fff;border-radius:12px;padding:16px 22px;margin:26px 0}
.callbar strong{font-size:1.15rem}
.callbar a{background:#fff;color:var(--brand)!important;padding:10px 20px;border-radius:8px;font-weight:800}
.section{padding:56px 0}
.section.alt{background:var(--alt)}
.section h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:.4em}
.section .lead{color:var(--muted);max-width:760px}
.grid{display:grid;gap:20px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.card h3{margin-top:0;font-size:1.12rem}
.card p{color:var(--muted);margin-bottom:.6em}
.card a{font-weight:700}
.split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.steps{counter-reset:step;display:grid;gap:16px}
.step{display:flex;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.step-num{counter-increment:step;flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.step-num::before{content:counter(step)}
.step h3{margin:0 0 .2em;font-size:1.05rem}
.step p{margin:0;color:var(--muted)}
details.faq{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:12px}
details.faq summary{font-weight:700;cursor:pointer;color:var(--heading)}
details.faq p{margin:.7em 0 0;color:var(--muted)}
ul.checks{list-style:none;padding:0;margin:0 0 1em}
ul.checks li{padding:8px 0 8px 30px;position:relative;border-bottom:1px dashed var(--line)}
ul.checks li::before{content:"✓";position:absolute;left:2px;color:var(--brand);font-weight:900}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{background:var(--card);border:1px solid var(--line);padding:12px 18px;border-radius:999px;color:var(--ink);font-weight:600}
.chips a:hover{border-color:var(--brand);text-decoration:none}
.prose{max-width:820px}
.prose h2{margin-top:1.2em}
.article-meta{color:var(--muted);font-size:.92rem;margin-bottom:18px}
form.contact{display:grid;gap:14px;max-width:560px}
form.contact input,form.contact textarea{padding:13px 15px;border:1px solid var(--line-strong);border-radius:10px;font:inherit;background:var(--card);color:var(--ink);width:100%}
form.contact label{font-weight:600;font-size:.95rem}
.map-frame{margin-top:26px}
.map-frame iframe{width:100%;height:360px;border:0;border-radius:14px;display:block}
.offer-strip{background:var(--brand);color:#fff;padding:13px 0;font-weight:600;text-align:center}
.offer-strip a{color:#fff;text-decoration:underline;font-weight:800}
.emergency-strip{background:#b91c1c;color:#fff;padding:13px 0;font-weight:700;text-align:center}
.emergency-strip a{color:#fff;text-decoration:underline}
ul.checks.cols2{columns:2;column-gap:44px}
ul.checks.cols2 li{break-inside:avoid}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.gallery-grid figure{margin:0}
.gallery-grid img{width:100%;height:100%;object-fit:cover;border-radius:12px;aspect-ratio:3/2}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.ba-grid figure{margin:0;position:relative}
.ba-grid img{width:100%;border-radius:12px;aspect-ratio:3/2;object-fit:cover}
.ba-tag{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.72);color:#fff;font-weight:700;font-size:.78rem;padding:4px 12px;border-radius:999px;letter-spacing:.05em;text-transform:uppercase}
.ba-note{color:var(--muted);font-size:.92rem;margin-top:14px}
@media (max-width:760px){
  .gallery-grid{grid-template-columns:1fr 1fr}
  .ba-grid{grid-template-columns:1fr}
  ul.checks.cols2{columns:1}
}
.site-footer{background:var(--footer-bg);color:var(--footer-ink);margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px;padding:44px 0 10px}
.site-footer a{color:var(--footer-ink)}
.site-footer h4{color:#fff;margin:0 0 .6em}
ul.foot-links{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding:16px 0 26px;font-size:.9rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.notfound{text-align:center;padding:90px 0}
.notfound .nf-code{font-size:clamp(3.4rem,10vw,6rem);font-weight:800;color:var(--brand);line-height:1;margin:0}
.sticky-call{display:none}
@media (max-width:860px){
  .grid.c3,.grid.c2,.split,.footer-grid{grid-template-columns:1fr}
  .hero{padding:44px 0 36px}
  .main-nav{display:none}
  .sticky-call{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--brand);color:#fff;align-items:stretch;gap:0;padding:0;font-weight:800}
  .sticky-call a{flex:1;text-align:center;color:#fff;padding:15px 8px;font-size:1rem}
  .sticky-call a.sticky-quote{background:#fff;color:var(--brand)}
  body{padding-bottom:54px}
}
/* V6 hero components: rotating hero slider (full-bleed background
   heroes) + photo collage (split-media heroes). The slider is
   dependency-free: slides crossfade, the first slide is eager, the
   rest are data-src swapped in by the tiny inline script render.ts
   ships with slider heroes. No JS = first slide only, which is also
   what reduced-motion visitors keep. */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;min-height:0}
.hero-slider{position:absolute;inset:0;overflow:hidden}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease;border-radius:0;min-height:0}
.hero-slide.is-active{opacity:1}
.hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:4;display:flex;gap:8px}
.hero-dot{width:11px;height:11px;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:transparent;padding:0;cursor:pointer;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.hero-dot.is-active{background:#fff}
.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero-collage{position:relative}
.hero-collage .hero-img{box-shadow:0 22px 48px rgba(5,10,18,.28)}
.collage-small{position:absolute;right:-12px;bottom:-24px;width:47%;aspect-ratio:3/2;object-fit:cover;border-radius:14px;border:6px solid var(--bg);box-shadow:0 18px 40px rgba(5,10,18,.3)}
@media (max-width:860px){
  .hero-collage{margin-bottom:26px}
  .collage-small{right:0;bottom:-18px}
}


.lead-form{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 18px 44px rgba(10,20,35,.16);color:var(--ink)}
.lead-form h3{margin:0 0 4px;font-size:1.2rem}
.lead-form .lf-sub{color:var(--muted);font-size:.94rem;margin:0 0 14px}
.lead-form form{display:grid;gap:11px}
.lead-form input,.lead-form select,.lead-form textarea{padding:12px 14px;border:1px solid var(--line-strong);border-radius:10px;font:inherit;background:var(--bg);color:var(--ink);width:100%}
.lead-form label{font-weight:600;font-size:.9rem}
.lead-form .btn{width:100%;text-align:center}
.lead-form .lf-note{font-size:.84rem;color:var(--muted);margin:0;text-align:center}
.stats-bar{background:var(--heading);color:#fff}
.stats-bar .wrap{display:flex;gap:10px;flex-wrap:wrap;justify-content:space-between;padding-block:20px}
.stat{text-align:center;flex:1 1 140px}
.stat b{display:block;font-size:1.55rem;line-height:1.1;color:#fff}
.stat span{font-size:.88rem;opacity:.82}
.brands-strip{border-block:1px solid var(--line);background:var(--alt)}
.brands-strip .wrap{display:flex;gap:14px 34px;flex-wrap:wrap;align-items:center;justify-content:center;padding-block:20px}
.brands-strip .b-label{font-weight:700;color:var(--muted);font-size:.9rem;text-transform:uppercase;letter-spacing:.08em}
.brands-strip .b-name{font-weight:800;font-size:1.12rem;color:var(--heading);letter-spacing:.04em;opacity:.75}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.tier{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;display:flex;flex-direction:column}
.tier.featured{border:2px solid var(--brand);box-shadow:0 16px 38px rgba(10,20,35,.12)}
.tier .t-kicker{font-size:.82rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--brand)}
.tier h3{margin:.3em 0 .1em;font-size:1.18rem}
.tier .t-price{font-size:2rem;font-weight:800;color:var(--heading);line-height:1.1}
.tier .t-note{color:var(--muted);font-size:.9rem;margin-bottom:12px}
.tier ul.checks{flex:1}
.tier .btn{margin-top:14px;text-align:center}
.problem-num{font-size:.85rem;font-weight:800;color:var(--brand);letter-spacing:.1em}
.t-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px}
.t-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px}
.t-card .stars{color:#e8a33d;font-size:1.05rem;letter-spacing:.14em;margin-bottom:10px}
.t-card p{color:var(--ink)}
.t-card .t-who{color:var(--muted);font-size:.92rem;margin:0}
.t-card .t-who b{color:var(--heading)}
.chips .chip-static{background:var(--card);border:1px solid var(--line);padding:12px 18px;border-radius:999px;color:var(--ink);font-weight:600}
.svc-pricing{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.svc-pricing .sp{border:1px solid var(--line);background:var(--card);border-radius:12px;padding:10px 16px;font-size:.95rem}
.svc-pricing .sp b{color:var(--heading)}
@media (max-width:860px){.pricing-grid,.t-grid{grid-template-columns:1fr}}


:root{--bg:#f3f4f6;--ink:#232a33;--heading:#10151c;--muted:#5b6672;--card:#ffffff;--alt:#e7eaee;--line:#d3d9e0;--line-strong:#aeb8c4;--header-bg:#0b0e13;--footer-bg:#0b0e13;--footer-ink:#c3ccd7}
h1,h2,h3,.logo{letter-spacing:.01em}
.hero-atlas{padding:0;overflow:hidden}
.hero-atlas .hero-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,11,18,.93) 0%,rgba(7,11,18,.80) 34%,rgba(7,11,18,.42) 64%,rgba(7,11,18,.16) 100%)}
.hero-atlas .wrap{position:relative;z-index:2;padding-block:84px}
.hero-atlas h1{color:#fff;text-transform:uppercase;font-size:clamp(2.4rem,6vw,4rem);line-height:1.05}
.hero-atlas .sub{color:rgba(255,255,255,.88)}
.hero-atlas .lead-form{border-top:6px solid var(--brand);border-radius:6px}
.hero-atlas .eyebrow{color:color-mix(in srgb,var(--brand) 70%,#fff)}
.atlas-cards .card{border-radius:4px;border:1px solid var(--line-strong);box-shadow:none;border-top:5px solid var(--brand)}
.nav-drop{border-radius:4px}
.btn{border-radius:4px;text-transform:uppercase;letter-spacing:.05em}
.card,.tier,.t-card{border-radius:4px}
.stats-bar{background:#0b0e13}
.topbar{background:var(--brand)}
@media (max-width:860px){.hero-atlas .wrap{padding-block:52px}}