:root{
--accent:#1e40af; --accent-dark:#1a3695; --accent-soft:#eef2fb;
--ink:#111111; --slate:#1e293b; --body:#334155; --muted:#475569;
--muted-light:#5c6675; --line:#e2e8f0; --bg:#fafafa; --card:#ffffff;
--hero-bg:#ededed;
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--body);
font-family:'Roboto', system-ui, sans-serif;font-size:16px;line-height:1.7}
h1,h2,h3{font-family:'Poppins', system-ui, sans-serif;color:var(--ink);margin:0;line-height:1.18;letter-spacing:-0.01em}
/* balance: with 'Independent' gone the fixed measure orphaned the state
code on its own line. Let the browser even the lines out instead. */
h1{font-size:56px;font-weight:700;letter-spacing:-0.025em;text-wrap:balance}
h2{font-size:34px;font-weight:700;letter-spacing:-0.02em}
h3{font-size:19px;font-weight:600}
p{margin:0 0 14px}
html{scroll-behavior:smooth}
/* Anchored headings land under the top edge rather than flush against it. */
[id]{scroll-margin-top:26px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.band{background:var(--card)}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;
font-family:'Poppins', system-ui, sans-serif;font-weight:700;font-size:21px;padding:18px 38px;border-radius:0}
.btn:hover{background:var(--accent-dark);text-decoration:none}
.btn svg{width:21px;height:21px;flex:0 0 auto}
.btn-sm svg{width:16px;height:16px}
/* Square, matching the main call button. A pill in the header and a
square button in the hero read as two different systems. */
.btn-sm{font-size:15px;padding:11px 22px;border-radius:0}
/* The city line above the H1. A real pin emoji, as the source has -- an SVG
icon reads as chrome, the emoji reads as a place. */
/* Header, breadcrumb and hero share one ground, so the top of the page
reads as a single band rather than three stacked strips. */
.topband{background:var(--hero-bg)}
/* Hub hero: copy and the trust block on the left, the photo on the right.
City pages keep the full-width centerd version -- there the photo belongs
with the body content, under the local heading. */
.hubhero{display:grid;grid-template-columns:minmax(min(100%,380px),1.02fr)
minmax(min(100%,300px),.98fr);gap:46px;align-items:start}
.hubfeat{margin-top:30px}
.hubfeat .disch,.hubfeat .bookline{text-align:left}
.hubfeat .disch{font-size:22px}
.hubfeat .bookline{font-size:16.5px}
.hubfeat .featrule{max-width:none;margin-bottom:20px}
/* 2x2 in a column, crossed by one rule each way -- the four-across version
would put 90px of text in each cell here. */
.hubfeat .trust{grid-template-columns:repeat(2,1fr);max-width:none;
padding-bottom:0;margin-top:20px}
.hubfeat .trust div{padding:16px 12px}
.hubfeat .trust b{font-size:13.5px}
.hubfeat .trust span{font-size:14px}
.hubfeat .trust div:nth-child(2)::after{display:none}
.hubfeat .trust div:nth-child(1)::after{background:linear-gradient(to bottom,
transparent 0,var(--ink) 38%,var(--ink) 100%)}
.hubfeat .trust div:nth-child(3)::after{background:linear-gradient(to bottom,
var(--ink) 0,var(--ink) 62%,transparent 100%)}
.hubfeat .trust div:nth-child(1)::before,.hubfeat .trust div:nth-child(2)::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
.hubfeat .trust div:nth-child(1)::before{background:linear-gradient(to right,
transparent 0,var(--ink) 38%,var(--ink) 100%)}
.hubfeat .trust div:nth-child(2)::before{background:linear-gradient(to right,
var(--ink) 0,var(--ink) 62%,transparent 100%)}
.hubhero .imgph{aspect-ratio:4/5}
@media(max-width:900px){.hubhero{grid-template-columns:1fr;gap:30px}
.hubhero .imgph{aspect-ratio:16/10}}
/* In-page section menu. Only city pages pass one, because only they have all
four sections -- an anchor to a heading that is not on the page is a dead
link that no crawler will report. */
/* Site menu with dropdowns, no JavaScript. Panels open on :hover for a
mouse and :focus-within for a keyboard -- tabbing to the trigger opens
the panel, so the links inside are reachable without a script. On a
touch screen hover is unreliable, so below 860px the whole thing
flattens into the burger with every panel already expanded. */
.mainnav{display:flex;align-items:center;gap:30px}
.mainnav > div{position:relative}
/* The trigger sits on the same grey as the hero -- no bar of its own, by the
client's decision -- so presence has to come from weight and contrast
rather than a background. --slate measures 11.6:1 on #ededed; the old
--muted was 6.1:1 and read as a grey blob at 600 weight. */
.navtop{font-family:'Poppins', system-ui, sans-serif;font-weight:600;font-size:15px;color:var(--slate);
background:none;border:0;padding:10px 0;cursor:pointer;display:inline-flex;
align-items:center;gap:6px;letter-spacing:.005em;position:relative;
font-feature-settings:inherit}
/* The same 2px accent underline .snav already uses, so the two menus in the
header read as one system. Grows from the left rather than fading in. */
.navtop::after{content:'';position:absolute;left:0;right:0;bottom:3px;height:2px;
background:var(--accent);transform:scaleX(0);transform-origin:left;
transition:transform .16s ease}
.navtop svg{color:var(--muted-light);
transition:transform .16s ease,color .16s ease}
.mainnav > div:hover .navtop,.mainnav > div:focus-within .navtop{color:var(--accent)}
.mainnav > div:hover .navtop::after,
.mainnav > div:focus-within .navtop::after{transform:scaleX(1)}
.mainnav > div:hover .navtop svg,
.mainnav > div:focus-within .navtop svg{color:var(--accent);transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){
.navtop::after,.navtop svg{transition:none}}
.sub{position:absolute;top:100%;left:-14px;min-width:236px;background:#fff;
border:1px solid var(--line);border-top:2px solid var(--accent);
box-shadow:0 14px 34px rgba(17,24,39,.13);padding:9px 0;display:none;z-index:60}
.mainnav > div:hover .sub,.mainnav > div:focus-within .sub{display:none}
.mainnav > div:hover > .sub,.mainnav > div:focus-within > .sub{display:grid}
/* Two columns once a panel carries ten items; one for the four brands. */
.sub{grid-template-columns:1fr}
.sub-2{grid-template-columns:repeat(2,minmax(186px,1fr));min-width:400px}
.sub a{display:flex;align-items:center;gap:11px;padding:10px 18px;
font-family:'Poppins', system-ui, sans-serif;font-weight:500;font-size:14.5px;color:var(--ink);
white-space:nowrap;border-left:2px solid transparent}
.sub a svg{flex:0 0 auto;color:var(--accent);opacity:.72;transition:opacity .12s}
.sub a .sq{flex:0 0 auto;width:6px;height:6px;background:var(--accent);opacity:.5}
.sub a:hover{background:var(--accent-soft);color:var(--accent);text-decoration:none;
border-left-color:var(--accent)}
.sub a:hover svg,.sub a:hover .sq{opacity:1}
.sub .full{grid-column:1/-1}
.sub hr{border:0;border-top:1px solid var(--line);margin:8px 0;grid-column:1/-1}
@media(prefers-reduced-motion:reduce){.sub a svg{transition:none}}
@media(max-width:1080px){.mainnav{gap:22px} .navtop{font-size:14px}}
.snav{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.snav a{font-family:'Poppins', system-ui, sans-serif;font-weight:600;font-size:14.5px;color:var(--muted);
padding:4px 0;border-bottom:2px solid transparent}
.snav a:hover{color:var(--accent);border-bottom-color:var(--accent);
text-decoration:none}
@media(max-width:1080px){.snav{gap:18px} .snav a{font-size:13.5px}}
/* Burger below 860px. No JavaScript: a visually hidden checkbox ahead of
both the button and the menu, toggled by the label, same pattern as the
review "See more". */
.navtoggle{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.burger{display:none;cursor:pointer;width:44px;height:38px;
flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);
transition:transform .2s ease,opacity .2s ease}
@media(prefers-reduced-motion:reduce){.burger span{transition:none}}
@media(max-width:860px){
.burger{display:flex;order:2}
.hdr-cta{order:3}
.mainnav{order:4;width:100%;display:none;flex-direction:column;align-items:stretch;
gap:0;border-top:1px solid var(--line);margin-top:12px;padding-top:4px;
max-height:70vh;overflow-y:auto}
.navtoggle:checked ~ .mainnav{display:flex}
.mainnav > div{position:static}
.mainnav{gap:0}
.navtop{width:100%;justify-content:flex-start;padding:13px 0 6px;font-size:12px;
letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.navtop::after{display:none}
.navtop svg{display:none}
.sub,.mainnav > div:hover > .sub,.mainnav > div:focus-within > .sub{
position:static;display:grid;grid-template-columns:1fr;border:0;
box-shadow:none;background:none;padding:0 0 6px 2px;min-width:0}
.sub a{border-left:0}
.sub a:hover{border-left-color:transparent}
.sub a{padding:9px 0;font-size:15.5px;color:var(--ink)}
.sub a:hover{background:none}
.snav{order:4;width:100%;display:none;flex-direction:column;align-items:flex-start;
gap:0;border-top:1px solid var(--line);margin-top:12px;padding-top:6px}
.navtoggle:checked ~ .snav{display:flex}
.snav a{width:100%;padding:12px 0;font-size:16px;border-bottom:0}
.snav a:hover{border-bottom-color:transparent}
.navtoggle:checked ~ .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.navtoggle:checked ~ .burger span:nth-child(2){opacity:0}
.navtoggle:checked ~ .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.navtoggle:focus-visible ~ .burger{outline:2px solid var(--accent);outline-offset:2px}
}
/* The place name inside the H1. #1e40af on the hero grey measures 7.45:1,
so it carries the emphasis without dropping below AA. */
.loc{color:var(--accent)}
.pill{display:inline-flex;align-items:baseline;gap:9px;font-family:'Poppins', system-ui, sans-serif;
font-weight:600;font-size:28px;color:var(--ink)}
/* The rule sits on the text only -- an underline running under the pin
emoji reads as a stray stroke, not as an underline. */
.pill b{font-weight:600;text-decoration:underline;text-decoration-thickness:2px;
text-underline-offset:3px;text-decoration-skip-ink:none}
.stars{color:#f5a623;font-size:27px;letter-spacing:2px;line-height:1}
/* Fractional stars. Five grey stars with five amber ones clipped over them,
so 4.5 shows as four and a half rather than five -- every review in the
data is a 4.5 and the old markup rounded all of them up. */
/* align-self matters: as a flex item this span gets blockified and would
stretch to the column width, so the overlay's width:var(--r) would be a
percentage of the column rather than of the five glyphs, and every rating
would draw as five full stars. */
.stars5{position:relative;display:inline-block;color:#d9d9d9;letter-spacing:2px;
line-height:1;white-space:nowrap}
/* Only inside a review card. Scoped, because in the hero .rating row this
rule beat align-items:center and left the stars sitting above the number. */
.revs .stars5{align-self:flex-start}
.stars5 i{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;
color:#f5a623;font-style:normal;width:var(--r)}
/* Reviews: no cards. A quote mark, the words, then who said it. */
.revs{display:grid;grid-template-columns:repeat(3,minmax(min(100%,225px),1fr));
gap:36px;margin-top:22px}
/* Flex column with the quote flexing, so the names line up across the row
however long the three excerpts happen to be. */
.revs figure{margin:0;display:flex;flex-direction:column;height:100%;position:relative}
.revs blockquote{margin:10px 0 10px;font-size:15.5px;color:var(--muted);
line-height:1.62}
/* "See more" with no JavaScript: a visually hidden checkbox ahead of the
quote, toggled by the label after it. The FULL review is always in the
DOM -- only the number of visible lines changes -- so nothing is hidden
from a crawler and line-clamp supplies its own ellipsis. */
.revs .rvtoggle{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.revs blockquote.clamp{display:-webkit-box;-webkit-line-clamp:4;
-webkit-box-orient:vertical;overflow:hidden}
.revs .rvtoggle:checked ~ blockquote.clamp{display:block;-webkit-line-clamp:unset;
overflow:visible}
.revs .rvmore{cursor:pointer;display:inline-block;font-family:'Poppins', system-ui, sans-serif;
font-size:13.5px;font-weight:600;color:var(--accent);margin-bottom:16px}
.revs .rvmore::after{content:'See more'}
.revs .rvtoggle:checked ~ .rvmore::after{content:'See less'}
.revs .rvmore:hover{text-decoration:underline}
.revs .rvtoggle:focus-visible ~ .rvmore{outline:2px solid var(--accent);
outline-offset:3px}
.revs figcaption{margin-top:auto}
/* Poppins' opening double quote is very nearly a circle -- at 42px it read
as a letter C. A serif face draws a real quote mark. */
.revs blockquote::before{content:'\201C';display:block;font-family:Georgia,
'Times New Roman',serif;font-size:46px;line-height:.72;
height:26px;color:var(--accent);opacity:.3}
.revs figcaption b{display:block;font-family:'Poppins', system-ui, sans-serif;font-size:15.5px;
font-weight:600;color:var(--ink)}
.revs figcaption span{display:block;font-size:11.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--muted-light);margin-top:4px}
@media(max-width:860px){.revs{grid-template-columns:1fr;gap:30px}}
.rating{display:flex;align-items:center;justify-content:center;gap:11px;margin:18px 0}
/* The number reads with the stars, not as a grey footnote to them. */
.rating em{font-style:italic;color:var(--ink);font-size:22px;line-height:1}
/* Sits between the rating and the call button, as the source has it. */
.calline{font-size:19px;color:var(--ink);margin:0 0 20px}
.calline b{font-weight:700}
.disc{font-size:14.5px;color:var(--muted);max-width:74ch;margin:0 auto;text-align:center}
/* The trail sits under the photo, directly above the first heading of the
content column, where it reads as context for the section rather than as
page chrome. */
.crumbs{font-size:14px;color:var(--muted);margin:16px 0 0}
.bookline{font-size:19px;color:var(--ink);text-align:center;margin:0}
/* The trust block gets a local heading -- "We Service Denver & Surrounding
Areas" -- so the block says where before it says what. */
.disch{font-family:'Poppins', system-ui, sans-serif;font-size:26px;font-weight:800;color:var(--ink);
text-align:center;margin:0 0 12px}
/* The source site runs both rules at ~820px, not the full 1180px wrap, which
is what pulls the four trust cells in close to one another. */
/* Both rules fade out at their ends rather than stopping dead, so they read
as a seam in the band instead of a drawn box. A border cannot do this, so
each one is a 1px gradient: .featrule is the element, the vertical
dividers are a pseudo-element on each cell. */
.featrule{max-width:900px;margin:0 auto 24px;height:1px;border:0;
background:linear-gradient(to right,transparent 0,var(--ink) 14%,
var(--ink) 86%,transparent 100%)}
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:900px;
margin:0 auto;padding-bottom:36px}
.trust div{padding:26px 14px;text-align:center;position:relative}
.trust div::after{content:"";position:absolute;right:0;top:0;bottom:0;width:1px;
background:linear-gradient(to bottom,transparent 0,var(--ink) 20%,
var(--ink) 80%,transparent 100%)}
.trust div:last-child::after{display:none}
.trust b{display:block;font-family:'Poppins', system-ui, sans-serif;font-size:15.5px;letter-spacing:.04em;
text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.trust span{font-size:15.5px;color:var(--muted);line-height:1.45}
.grid{display:grid;gap:18px}
/* min(100%,N) not N: a bare minmax(300px,1fr) track refuses to shrink
below 300px, so on a 414px phone the grid pushed the page wider than
the viewport and every section clipped on the right. */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:0;padding:22px 24px}
.lead{font-size:18px;color:var(--muted)}
.note{background:var(--accent-soft);border-radius:0;padding:18px 22px;font-size:15px;margin:22px 0}
/* Neutral sibling of .note, for the closing line under a list of things we
repair -- accent-soft there would read as a second call-to-action. */
.greybox{background:var(--hero-bg);padding:18px 22px;font-size:15px;margin:22px 0;
color:var(--ink)}
/* The fault list: two columns of ruled rows, as the source site has it. A
rule under every row (not a card each) keeps a twenty-item list scannable
without turning the section into twenty boxes. */
.faults{display:grid;grid-template-columns:repeat(2,minmax(min(100%,240px),1fr));
gap:0 40px;margin-top:4px}
.faults div{display:flex;gap:11px;align-items:baseline;padding:11px 2px;
border-bottom:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.faults svg{flex:0 0 auto;transform:translateY(2px)}
@media(max-width:700px){.faults{grid-template-columns:1fr;gap:0}}
/* Service areas: three columns of pinned rows. A long roster (Phoenix has
33) reads as a directory here rather than as a wall of chips. */
.areas{display:grid;grid-template-columns:repeat(3,minmax(min(100%,180px),1fr));
gap:2px 32px}
.areas div{display:flex;gap:9px;align-items:baseline;padding:7px 2px;
font-size:15px;color:var(--muted)}
.areas svg{flex:0 0 auto;transform:translateY(2px);color:var(--accent)}
@media(max-width:860px){.areas{grid-template-columns:repeat(2,minmax(min(100%,150px),1fr))}}
@media(max-width:520px){.areas{grid-template-columns:1fr}}
/* "Why choose us" as a ruled 2x2 table rather than four floating rows. The
rules give each reason a boundary, so the eye can take one at a time
instead of reading four bold lines as one paragraph. */
/* No rules at all here. Every line tried -- internal, then outer -- made the
block heavier rather than clearer; the checks and the spacing carry it. */
.why{display:grid;grid-template-columns:repeat(2,minmax(min(100%,260px),1fr));
gap:30px 0;margin-top:22px}
.why > div{display:flex;gap:14px}
.why > div:nth-child(odd){padding-right:34px}
.why > div:nth-child(even){padding-left:34px}
.why i{flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;
justify-content:center;background:var(--accent-soft);color:var(--accent)}
.why b{display:block;font-family:'Poppins', system-ui, sans-serif;font-size:16.5px;color:var(--ink);
margin-bottom:5px;line-height:1.35}
.why span{display:block;font-size:15px;color:var(--muted);line-height:1.55;max-width:44ch}
@media(max-width:760px){
.why{grid-template-columns:1fr}
/* Must repeat the :nth-child selectors: a bare `.why > div` here loses to
the two-column padding rules above on specificity, which left every
second reason indented on a phone. */
.why{gap:26px 0}
.why > div:nth-child(odd){padding-right:0}
.why > div:nth-child(even){padding-left:0}
}
/* The visit, as four steps on one line. This is the one block on the page
where numbering is honest -- it really is a sequence -- so the rule runs
through it like a timeline and each square number breaks the line. */
.steps{display:grid;grid-template-columns:repeat(4,minmax(min(100%,178px),1fr));
gap:0 30px;border-top:1px solid var(--line);margin-top:24px}
.steps > div{padding-bottom:4px}
.steps .n{display:flex;align-items:center;justify-content:center;width:30px;height:30px;
margin-top:-15px;background:var(--accent);color:#fff;
font-family:'Poppins', system-ui, sans-serif;font-weight:700;font-size:14px}
.steps h3{margin:16px 0 6px;font-size:16.5px;line-height:1.3}
.steps p{margin:0;font-size:15px;color:var(--muted);line-height:1.55}
@media(max-width:860px){
.steps{grid-template-columns:repeat(2,minmax(min(100%,160px),1fr));
gap:26px 30px;border-top:none}
.steps .n{margin-top:0}
}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
/* The NAP block: details beside the map rather than stacked above it, each
line labelled small-caps over the value. This is the part of the page a
search engine reads for name/address/phone, so it is structured rather
than run together in a paragraph. */
.nap{display:grid;grid-template-columns:minmax(min(100%,250px),.72fr)
minmax(min(100%,320px),1.28fr);gap:34px;align-items:start;margin-top:22px}
.napline{display:flex;gap:13px;margin-bottom:20px}
.napline i{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;
justify-content:center;background:var(--accent-soft);color:var(--accent)}
.napline b{display:block;font-family:'Poppins', system-ui, sans-serif;font-size:11.5px;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
margin-bottom:3px}
.napline span{display:block;font-size:16px;color:var(--ink);line-height:1.5}
.napline a{font-size:16px;font-weight:600}
.napline em{display:block;font-style:normal;font-size:14px;color:var(--muted);margin-top:2px}
.nap .map{height:380px}
@media(max-width:860px){.nap{grid-template-columns:1fr;gap:26px}}
.chk{display:flex;gap:10px;align-items:flex-start;margin-bottom:11px;font-size:15.5px}
.chk svg{flex:0 0 auto;margin-top:4px}
/* Ruled rows, not stacked cards. Ten bordered white boxes made the FAQ the
heaviest thing on the page; a hairline between rows and a lighter weight
on the question let it sit quietly at the end where it belongs. */
.faqs{border-top:1px solid var(--line);margin-top:16px}
details.faq{background:none;border:0;border-bottom:1px solid var(--line);margin:0}
details.faq summary{cursor:pointer;list-style:none;position:relative;
padding:14px 38px 14px 0;font-family:'Poppins', system-ui, sans-serif;
font-weight:500;font-size:16px;line-height:1.45;color:var(--ink)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:hover{color:var(--accent)}
details.faq summary::after{content:'+';position:absolute;right:6px;top:50%;
transform:translateY(-50%);font-size:17px;font-weight:400;
color:var(--muted-light);line-height:1}
details.faq[open] summary{color:var(--accent)}
details.faq[open] summary::after{content:'\2212';color:var(--accent)}
details.faq .a{padding:0 38px 17px 0;font-size:15px;color:var(--muted);
line-height:1.62}
.sec{padding:52px 0}
.hero{background:var(--hero-bg)}
/* Two-column body: a sticky call card on the left, content on the right.
Collapses to one column below 980px, where a sticky sidebar would eat
most of the screen. */
.layout{display:grid;grid-template-columns:minmax(0,302px) minmax(0,1fr);gap:38px;align-items:start}
.rail{position:sticky;top:22px}
.callcard{background:#efefef;border:1px solid var(--line);border-radius:0;
padding:26px 24px;text-align:center}
.callcard h3{font-size:23px;font-weight:700;line-height:1.25;margin:14px 0 10px}
.callcard p{font-size:14.5px;color:var(--muted);margin:0 0 18px}
.avatar{position:relative;width:74px;height:74px;margin:0 auto;border-radius:50%;
background:var(--accent-soft);border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.12);
display:flex;align-items:center;justify-content:center;color:var(--accent)}
/* The portrait fills the circle. width/height are set on the ![]()
as well
so the card does not reflow while it loads. */
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.avatar .dot{position:absolute;right:3px;top:5px;width:15px;height:15px;border-radius:50%;
background:#16c60c;border:2.5px solid #fff}
.shot{margin:0}
.shot img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.imgph{width:100%;aspect-ratio:16/10;background:repeating-linear-gradient(135deg,
#e8e8e8 0 14px,#e2e2e2 14px 28px);border:1px dashed #c6c6c6;border-radius:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
text-align:center;color:#8b8b8b;padding:20px;gap:8px}
.imgph b{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.imgph span{font-size:13px;max-width:44ch;line-height:1.5}
@media(max-width:980px){.layout{grid-template-columns:1fr} .rail{position:static}}
/* Mobile call bar. The sticky rail is the desktop answer to "keep a number
in view"; on a phone it would eat the screen, so below 980px it is
replaced by a fixed bar at the bottom and the body gets padding so the
bar never covers the last of the content. */
.callbar{display:none}
@media(max-width:980px){
.callbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:40;
background:#fff;border-top:1px solid var(--line);padding:10px 14px 12px;
box-shadow:0 -2px 14px rgba(0,0,0,.09);text-align:center}
.callbar a.num{display:flex;align-items:center;justify-content:center;gap:10px;
background:var(--accent);color:#fff;font-family:'Poppins', system-ui, sans-serif;
font-weight:700;font-size:19px;padding:14px;border-radius:0}
.callbar small{display:block;margin-top:8px;font-size:14px;font-weight:600;
color:var(--ink);text-decoration:underline}
body{padding-bottom:104px}
}
.map{width:100%;height:320px;border:0;border-radius:0}
footer{background:var(--hero-bg);border-top:1px solid var(--line);margin-top:60px;padding:46px 0 34px}
/* The footer grid lives here, not in an inline style: an inline
grid-template-columns cannot be overridden by a media query, so the four
columns survived down to phone width and the Contact column ran off the
screen. */
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.4fr;gap:34px}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr;gap:30px 28px}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr;gap:26px}}
.fbar{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;display:flex;
justify-content:space-between;gap:12px 18px;flex-wrap:wrap;font-size:14px;
color:var(--muted-light)}
@media(max-width:520px){.fbar{flex-direction:column;align-items:flex-start}}
footer h4{font-family:'Poppins', system-ui, sans-serif;font-size:15px;color:var(--accent);margin:0 0 12px}
footer a{color:var(--muted);font-size:15px}
/* A small square accent marker per item. Square rather than round: every
corner on this site is square now, and a round bullet would be the only
circle outside the technician portrait. */
/* 15px here too: links carried an explicit size while plain text fell
back to the body's 16px, so the hours line sat a pixel larger than the
phone number above it. */
footer li{list-style:none;margin-bottom:8px;position:relative;padding-left:16px;
font-size:15px}
footer li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;
background:var(--accent);opacity:.55}
footer ul{margin:0;padding:0}
@media(max-width:860px){
h1{font-size:34px} h2{font-size:25px}
.pill{font-size:22px} .disch{font-size:22px}
/* 2x2, crossed by one vertical and one horizontal rule, as the source
site does it. Each rule is drawn in two halves -- one per cell -- so the
halves must fade only at the OUTER end and stay solid where they meet,
or the seam shows as a gap in the middle of the cross. */
.trust{grid-template-columns:repeat(2,1fr)}
.trust div:nth-child(2)::after{display:none}
.trust div:nth-child(1)::after{background:linear-gradient(to bottom,
transparent 0,var(--ink) 38%,var(--ink) 100%)}
.trust div:nth-child(3)::after{background:linear-gradient(to bottom,
var(--ink) 0,var(--ink) 62%,transparent 100%)}
.trust div:nth-child(1)::before,.trust div:nth-child(2)::before{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
.trust div:nth-child(1)::before{background:linear-gradient(to right,
transparent 0,var(--ink) 38%,var(--ink) 100%)}
.trust div:nth-child(2)::before{background:linear-gradient(to right,
var(--ink) 0,var(--ink) 62%,transparent 100%)}
}