.
CSS then (1) bleeds the banner to the card's top/left/right edges past the
28px card padding, (2) lifts .svc-head up so the icon+tag overlay the photo.
See tasks/redesign/raw/svc-photos.md for the exact per-card markup + anchor.
SCOPE: every rule is prefixed with #services and uses !important so it beats
the bare `.svc-*` base rules in apple-refinements.css (which append earlier).
Behavior preserved: the .svc-link::before full-card click overlay (inset:0,
z-index:1) still covers the whole card — the banner sits BELOW it (clicking
the photo navigates, which is desired); icon/tag are non-interactive and we
raise them to z-index:2 so they render crisply above that overlay.
The .svc-locations pills keep their own z-index:2 (untouched here).
============================================================================ */
/* Card must clip the banner's sharp top corners to the 2px crate radius. */
#services .svc-card{
overflow:hidden!important; /* base .svc-card has none; banner needs it */
padding-top:0!important; /* banner owns the top edge, flush, no gap */
}
/* ---- BANNER WRAPPER --------------------------------------------------------
Bleed past the card's 28px horizontal padding so the photo spans edge-to-
edge and sits flush at the very top. Fixed 150px tall, sharp corners. */
#services .svc-card .svc-banner{
position:relative;
margin:0 -28px 22px; /* cancel L/R padding; gap before content */
height:150px;
overflow:hidden;
background:#000; /* graceful fallback while img loads */
border-bottom:2px solid #000; /* hard hazard-frame divider under photo */
border-radius:2px 2px 0 0; /* match crate's sharp top corners */
z-index:0;
}
/* The real Econo project photo: cover the banner, never distort. */
#services .svc-card .svc-banner img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center 42%; /* bias toward roof plane, not sky/ground */
display:block;
transition:transform .5s cubic-bezier(.32,.72,0,1);
}
/* Subtle zoom on hover — echoes the card's tool-crate lift, keeps it alive. */
#services .svc-card:hover .svc-banner img{transform:scale(1.06)}
/* Dark gradient ONLY along the bottom strip, so the icon badge + tag stay
legible over any photo (bright sky, light shingle) without tinting the
whole image. NOT a red duotone — neutral black, bottom-weighted. */
#services .svc-card .svc-banner::after{
content:"";
position:absolute;
left:0;right:0;bottom:0;
height:62px;
background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.30) 55%,rgba(0,0,0,0) 100%);
pointer-events:none;
z-index:1;
}
/* ---- HEAD OVERLAY (icon badge + tag, lifted onto the photo) ----------------
The existing .svc-head (display:flex; justify-content:space-between) is
pulled UP by the banner's 22px bottom margin + its own height so it overlays
the bottom strip of the photo. Icon ends up bottom-LEFT, tag bottom-RIGHT. */
#services .svc-card .svc-head{
position:relative;
z-index:2; /* above gradient AND the link click overlay */
margin:-46px 0 16px!important; /* lift onto the photo's dark strip */
min-height:0!important;
align-items:flex-end!important; /* sit on the photo's lower edge */
pointer-events:none; /* let the full-card link overlay catch clicks*/
}
/* RED icon → solid red SQUARE badge (Milwaukee logo-block), white glyph. */
#services .svc-card .svc-head .svc-icon{
width:40px!important;
height:40px!important;
padding:8px;
background:var(--red)!important;
color:#fff!important; /* glyph white on red, max contrast on photo */
stroke:#fff!important;
border-radius:2px!important; /* sharp corner badge */
box-shadow:0 2px 0 rgba(0,0,0,.55);/* tiny hard shadow lifts it off the photo */
box-sizing:border-box;
flex-shrink:0;
}
#services .svc-card:hover .svc-head .svc-icon{transform:scale(1.06)}
/* Tag → white-on-transparent UPPERCASE block sitting on the dark gradient.
(Base rule makes it black-on-black here, invisible — force it readable.) */
#services .svc-card .svc-head .svc-tag{
background:rgba(0,0,0,.0)!important;
color:#fff!important;
font-family:var(--ff-display);
font-weight:700!important;
text-transform:uppercase;
letter-spacing:.1em!important;
font-size:10px!important;
line-height:1;
padding:0 0 3px;
text-shadow:0 1px 3px rgba(0,0,0,.9); /* legible over busy photo edges */
}
/* ---- BODY (unchanged tool-crate face, just confirmed readable) -------------
Title/desc/link keep services.css styling. We only guarantee the title sits
clear of the lifted head and stays solid black on the white body. */
#services .svc-card .svc-title{
margin-top:0!important;
color:#000!important;
}
/* ----------------------------------------------------------------------------
RESPONSIVE — banner scales down on the 1-col (mobile) / 2-col grid where
cards are wider; keep the bleed correct (card padding stays 28px at all
widths in base CSS, so the -28px margin holds). Shorten banner a touch on
the widest single-column phones for balance. */
@media(max-width:600px){
#services .svc-card .svc-banner{height:138px}
#services .svc-card .svc-head{margin-top:-44px!important}
}
/* ----------------------------------------------------------------------------
ACCESSIBILITY: respect reduced-motion — kill the hover zoom. */
@media(prefers-reduced-motion:reduce){
#services .svc-card .svc-banner img{transition:none}
#services .svc-card:hover .svc-banner img{transform:none}
}
/* ===== HEAVY DUTY hd21: footer FULL-BLEED (user: footer too compressed) ===== */
#footer .sf-inner,#footer .sf-family-grid{max-width:none!important;width:auto!important;padding-left:max(40px,4vw)!important;padding-right:max(40px,4vw)!important;box-sizing:border-box!important}
/* ===== HEAVY DUTY hd22: WHITE footer (user request) — invert black->white ===== */
#footer,#footer.site-footer,footer#footer.site-footer{background:#fff!important;color:#1a1a1a!important;border-top:7px solid var(--red)!important}
#footer :is(h2,h3,h4,.sf-col-title,p,li,span,address,small,dd,dt,figcaption){color:#1a1a1a!important}
#footer a:not(.sf-cta-primary):not([class*=btn]):not(.sf-family-card a){color:#1a1a1a!important}
#footer a:not(.sf-cta-primary):not([class*=btn]):hover{color:var(--red)!important}
#footer img[src*="logo"]{filter:none!important;background:transparent!important}
#footer .ft-address,#footer [class*=hours],#footer [class*=muted],#footer .sf-legal,#footer .sf-legal *{color:#6e6e73!important}
#footer .sf-cta-primary{background:var(--red)!important}
#footer .sf-cta-primary,#footer .sf-cta-primary :is(span,svg,div){color:#fff!important}
/* brand-of-brands: keep as DARK tiles on the white footer so their white text reads */
#footer .sf-family-card{background:#000!important;border:2px solid #000!important}
#footer .sf-family-card :is(h3,h4,p,span,div),#footer .sf-family-card a{color:#fff!important}
#footer .sf-family-card a:hover{color:var(--red)!important}
/* cert tags: dark border + dark text on white */
#footer [class*=cert]{color:#1a1a1a!important;border-color:#000!important}
/* dividers darker on white */
#footer hr,#footer [class*=divider]{border-color:rgba(0,0,0,.14)!important;background:rgba(0,0,0,.14)!important}
/* ===== HEAVY DUTY hd23: footer-white fix — clear dark inner wrappers so white #footer shows ===== */
#footer .sf-inner,#footer .sf-wrap,#footer .sf-shell,#footer .sf-cta,#footer .sf-cta-band,#footer .sf-bottom,#footer .sf-legal-bar{background:transparent!important;background-image:none!important}
/* ===== HEAVY DUTY hd24: finish footer-white — catch strong/b/span/svg missed by hd22, re-protect light-on-dark ===== */
#footer .sf-inner :is(strong,b,span,time,small,em){color:#1a1a1a!important}
#footer .sf-inner svg{color:#6e6e73!important;fill:#6e6e73!important;stroke:#6e6e73!important}
#footer .sf-legal,#footer .sf-legal *{color:#6e6e73!important}
/* RE-PROTECT (higher specificity): dark brand tiles keep WHITE text/icons */
#footer .sf-inner .sf-family-card,#footer .sf-inner .sf-family-card :is(strong,b,span,a,div,p,h3,h4){color:#fff!important}
#footer .sf-inner .sf-family-card svg{color:#fff!important;fill:#fff!important;stroke:#fff!important}
/* RE-PROTECT: red FAMILY OF BRANDS eyebrow keeps white text */
#footer .sf-inner .sf-family-eyebrow,#footer .sf-inner .sf-family-eyebrow :is(span,strong,b){color:#fff!important}
/* RE-PROTECT: red CTA button keeps white text/icon */
#footer .sf-inner .sf-cta-primary,#footer .sf-inner .sf-cta-primary :is(span,svg,div,strong){color:#fff!important}
#footer .sf-inner .sf-cta-primary svg{fill:#fff!important;stroke:#fff!important}
/* ===== HEAVY DUTY hd25: DEFINITIVE footer-white text (ultra-high specificity #footer#footer) ===== */
#footer#footer .sf-inner :is(h1,h2,h3,h4,h5,p,li,span,strong,b,a,address,time,small,em,dd,dt,div){color:#1a1a1a!important}
#footer#footer .sf-inner svg{color:#6e6e73!important;fill:#6e6e73!important;stroke:#6e6e73!important}
#footer#footer .sf-inner a:not(.sf-cta-primary):hover{color:#d5160c!important}
#footer#footer .sf-legal,#footer#footer .sf-legal *{color:#6e6e73!important}
/* re-protect (higher specificity): dark brand tiles keep white */
#footer#footer .sf-inner .sf-family-card,#footer#footer .sf-inner .sf-family-card :is(h1,h2,h3,h4,p,li,span,strong,b,a,div){color:#fff!important}
#footer#footer .sf-inner .sf-family-card svg{color:#fff!important;fill:#fff!important;stroke:#fff!important}
/* red FAMILY OF BRANDS eyebrow + red CTA keep white */
#footer#footer .sf-inner .sf-family-eyebrow,#footer#footer .sf-inner .sf-family-eyebrow :is(span,strong,b){color:#fff!important}
#footer#footer .sf-inner .sf-cta-primary,#footer#footer .sf-inner .sf-cta-primary :is(span,svg,div,strong){color:#fff!important}
#footer#footer .sf-inner .sf-cta-primary svg{fill:#fff!important;stroke:#fff!important}
/* ===== HEAVY DUTY hd26: even section rhythm (consistent vertical padding on bands) ===== */
#services,.home-section--soft,.home-section--light,.reviews-redesign,.area-redesign,.blog-redesign,.faq-homepage,.sec.topical-final,.hd-projects{padding-top:clamp(56px,7vw,96px)!important;padding-bottom:clamp(56px,7vw,96px)!important}
/* ================= hd27 HOMEPAGE ELEVATION (hero V1 + 20 sections) ================= */
/* --- HERO V1 (un-namespaced to body.home) --- */
/* HERO V1 — "SPLIT JOBSITE"
Vertical split: LEFT ~52% solid-black content panel holds ALL text (white on black,
guaranteed contrast — no text ever touches the photo). RIGHT ~48% is a full-bleed real
roof photo bleeding to the top/right/bottom edges. A hard 8px Econo-red (#d5160c) seam
divides the halves. Sharp corners, heavy Barlow Semi Condensed uppercase H1, red 1996.
Mobile (<=768px): photo stacks on top (~38vh), black panel below, seam becomes a horizontal red bar. */
body.home #hero {
position: relative !important;
display: grid !important;
grid-template-columns: 52% 48% !important;
align-items: stretch !important;
min-height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
background: #000000 !important;
overflow: hidden !important;
isolation: isolate !important;
}
/* RIGHT HALF — full-bleed roof photo, pinned to the right/top/bottom edges */
body.home #hero .hero-overlay {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 52% !important;
width: 48% !important;
height: 100% !important;
display: block !important;
background-image:
linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 18%, rgba(0,0,0,0) 42%),
url("/assets/images/projects/projects_modesto_jeanine-dr-roof-replacement.jpg") !important;
background-position: center center, center center !important;
background-size: cover, cover !important;
background-repeat: no-repeat, no-repeat !important;
opacity: 1 !important;
z-index: 1 !important;
}
/* Hard RED vertical seam at the 52% boundary — a deliberate jobsite cut */
body.home #hero .hero-overlay::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 10px !important;
height: 100% !important;
background: #d5160c !important;
z-index: 3 !important;
}
/* Red proof tab stamped on the photo (below the nav, just past the seam).
Borrowed from V7's corner-tab idea — but labeled "REAL ECONO ROOF" instead of a
4th "1996" (headline + eyebrow + ghost watermark already carry the year). This
directly counters the "stock photo?" doubt that made the real photo V1's whole edge. */
body.home #hero .hero-overlay::after {
content: "REAL ECONO ROOF" !important;
position: absolute !important;
top: 108px !important;
left: 28px !important;
z-index: 4 !important;
padding: 8px 14px !important;
background: #d5160c !important;
color: #ffffff !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: 13px !important;
font-weight: 800 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
line-height: 1 !important;
box-shadow: 4px 4px 0 rgba(0,0,0,0.45) !important;
}
/* Kill the other decorative full-bleed layers */
body.home #hero .hero-grid,
body.home #hero .hero-glow,
body.home #hero .hero-video {
display: none !important;
}
/* LEFT HALF — solid black content panel; ALL text lives here */
body.home #hero .hero-body {
position: relative !important;
z-index: 4 !important;
grid-column: 1 / 2 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: center !important;
gap: 22px !important;
width: 100% !important;
max-width: 100% !important;
min-height: 100vh !important;
margin: 0 !important;
padding: 72px 56px 0 clamp(28px, 6vw, 96px) !important;
background: #000000 !important;
text-align: left !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* Subtle ghost "1996" behind the panel — structural depth, NOT signage.
z-index:-1 keeps it under the in-flow text but above the black bg; ~10% red
outline on black reads as a quiet watermark. Debate ruling: SUBTLE, droppable. */
body.home #hero .hero-body::before {
content: "1996" !important;
position: absolute !important;
left: -0.04em !important;
bottom: 5% !important;
z-index: -1 !important;
margin: 0 !important;
padding: 0 !important;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
-webkit-text-stroke: 3px rgba(213,22,12,0.10) !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: clamp(11rem, 27vw, 23rem) !important;
font-weight: 800 !important;
line-height: 0.8 !important;
letter-spacing: -0.04em !important;
white-space: nowrap !important;
pointer-events: none !important;
user-select: none !important;
}
/* PILLS — sharp 2px white-bordered chips on black */
body.home #hero .home-hero-pills {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 !important;
}
body.home #hero .home-hero-pill {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
margin: 0 !important;
padding: 7px 12px !important;
border: 2px solid #ffffff !important;
border-radius: 0 !important;
background: #000000 !important;
color: #ffffff !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: 12px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
text-decoration: none !important;
line-height: 1 !important;
box-shadow: none !important;
}
/* Override the off-palette amber star pill -> solid red chip */
body.home #hero .home-hero-pill:first-child {
background: #d5160c !important;
border-color: #d5160c !important;
color: #ffffff !important;
}
/* Family/Latino-owned pill -> red outline, red text */
body.home #hero .home-hero-pill--latino {
border-color: #d5160c !important;
background: #000000 !important;
color: #d5160c !important;
}
/* EYEBROW — small red bar before it */
body.home #hero .hero-eyebrow {
position: relative !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin: 0 !important;
padding: 0 !important;
color: #9c9c9c !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
line-height: 1.2 !important;
}
body.home #hero .hero-eyebrow::before {
content: "" !important;
display: inline-block !important;
flex: 0 0 auto !important;
width: 34px !important;
height: 5px !important;
background: #d5160c !important;
border-radius: 0 !important;
}
/* H1 — heavy condensed uppercase, white, red year */
body.home #hero .hero-h1 {
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: clamp(2.6rem, 5.2vw, 5rem) !important;
font-weight: 800 !important;
line-height: 0.92 !important;
letter-spacing: -0.02em !important;
text-transform: uppercase !important;
text-shadow: none !important;
}
/* Red year — also override -webkit-text-fill-color which the base sheet sets
to white on the H1 and which would otherwise mask `color` in WebKit. */
body.home #hero .hero-h1 em {
font-style: normal !important;
font-weight: 800 !important;
color: #d5160c !important;
-webkit-text-fill-color: #d5160c !important;
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
}
/* SUBHEAD — grey/white body text on black */
body.home #hero .hero-sub {
margin: 0 !important;
padding: 0 !important;
max-width: 540px !important;
color: #9c9c9c !important;
font-family: "Barlow", sans-serif !important;
font-size: clamp(1rem, 1.15vw, 1.15rem) !important;
font-weight: 400 !important;
line-height: 1.55 !important;
text-align: left !important;
}
body.home #hero .hero-sub a {
color: #ffffff !important;
font-weight: 700 !important;
text-decoration: none !important;
border-bottom: 2px solid #d5160c !important;
}
/* CTAS — solid red + white ghost, sharp corners, hard offset shadow */
body.home #hero .hero-btns {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 14px !important;
margin: 0 !important;
padding: 0 !important;
}
body.home #hero .btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 16px 26px !important;
border-radius: 0 !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
text-decoration: none !important;
line-height: 1 !important;
cursor: pointer !important;
transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}
body.home #hero .btn-red {
background: #d5160c !important;
border: 2px solid #d5160c !important;
color: #ffffff !important;
box-shadow: 5px 5px 0 #ffffff !important;
}
body.home #hero .btn-red:hover {
transform: translate(2px, 2px) !important;
box-shadow: 3px 3px 0 #ffffff !important;
}
/* Secondary CTA demoted to a quiet outline — no offset shadow, muted border —
so the solid-red "Get a free inspection" is the single dominant button.
(8 of 9 reviewers: one dominant CTA.) */
body.home #hero .btn-ghost {
background: transparent !important;
border: 2px solid rgba(255,255,255,0.42) !important;
color: #ffffff !important;
box-shadow: none !important;
}
body.home #hero .btn-ghost:hover {
border-color: #ffffff !important;
transform: none !important;
box-shadow: none !important;
}
/* TRUST STRIP — shield + line, white text on black */
body.home #hero .hero-trust {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 0 !important;
padding: 14px 0 0 0 !important;
border-top: 2px solid rgba(255,255,255,0.18) !important;
color: #9c9c9c !important;
font-family: "Barlow", sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
line-height: 1.4 !important;
text-align: left !important;
}
body.home #hero .hero-trust svg {
flex: 0 0 auto !important;
width: 20px !important;
height: 20px !important;
color: #d5160c !important;
fill: #d5160c !important;
}
body.home #hero .hero-trust span {
color: #9c9c9c !important;
}
body.home #hero .hero-trust a {
color: #ffffff !important;
font-weight: 700 !important;
text-decoration: none !important;
border-bottom: 1px solid #d5160c !important;
}
/* MFG BADGES — tidy shrunk row at the bottom of the black panel */
body.home #hero .mfg-inner {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 14px !important;
margin: 6px 0 0 0 !important;
padding: 16px 0 0 0 !important;
border-top: 2px solid rgba(255,255,255,0.18) !important;
background: transparent !important;
}
body.home #hero .mfg-inner picture {
display: inline-flex !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
body.home #hero .mfg-inner img {
height: 34px !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0.92 !important;
filter: none !important;
}
/* SCROLL CUE — sits on the black panel, white */
body.home #hero .scroll-cue {
position: absolute !important;
left: clamp(28px, 6vw, 96px) !important;
bottom: 18px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
z-index: 5 !important;
color: #9c9c9c !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
}
body.home #hero .scroll-cue .scroll-line {
width: 2px !important;
height: 28px !important;
background: #d5160c !important;
border-radius: 0 !important;
}
/* MOBILE — photo on top (~38vh), black panel below; seam becomes a horizontal red bar */
@media (max-width: 768px) {
body.home #hero {
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
min-height: auto !important;
}
body.home #hero .hero-overlay {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
order: 1 !important;
width: 100% !important;
height: 30vh !important;
min-height: 208px !important;
background-image:
linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 40%),
url("/assets/images/projects/projects_modesto_jeanine-dr-roof-replacement.jpg") !important;
background-position: center center, center center !important;
background-size: cover, cover !important;
background-repeat: no-repeat, no-repeat !important;
}
/* Seam -> horizontal red bar along the bottom of the photo */
body.home #hero .hero-overlay::before {
top: auto !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 8px !important;
background: #d5160c !important;
}
body.home #hero .hero-body {
order: 2 !important;
min-height: auto !important;
padding: 26px 22px 64px 22px !important;
gap: 14px !important;
}
body.home #hero .hero-h1 {
font-size: clamp(2.2rem, 11vw, 3.2rem) !important;
}
body.home #hero .hero-sub {
max-width: 100% !important;
}
body.home #hero .hero-btns {
width: 100% !important;
}
body.home #hero .btn {
flex: 1 1 auto !important;
min-height: 50px !important;
padding: 15px 18px !important;
}
body.home #hero .mfg-inner img {
height: 28px !important;
}
body.home #hero .scroll-cue {
display: none !important;
}
/* Proof tag: bottom-left of the mobile photo band (clears the fixed nav) */
body.home #hero .hero-overlay::after {
top: auto !important;
bottom: 18px !important;
left: 14px !important;
padding: 6px 10px !important;
font-size: 11px !important;
}
/* Ghost 1996: keep it small + faint so it never clutters the mobile fold */
body.home #hero .hero-body::before {
font-size: clamp(7rem, 38vw, 12rem) !important;
bottom: 8% !important;
-webkit-text-stroke-width: 2px !important;
}
}
/* --- SECTION: nav --- */
/* SECTION: nav — ELEVATION
Intended look: A confident industrial sticky bar. Over the hero it's solid black (#000)
with a 3px red bottom seam; scrolled it flips to crisp white with a black/red seam. Sharp
zero-radius everything. Links are uppercase Barlow Semi Condensed with a red underline on
hover/active. A thin red "tick" sits left of the logo. Dropdowns are sharp white panels with
a 2px black border, a red top rule, and a hard offset shadow (6px 6px 0 #000). The "Instant
Quote" ghost button has a 2px border that fills red on hover; "Free Estimate" is a solid red
block CTA with a hard red offset shadow that pops. Below sits a tight all-black utility sub-bar
with a thin red top rule. Mobile: 48px logo, 44px red-bordered hamburger.
Contrast: On the BLACK bar (default/on-dark/hero-visible) all links, the brand text and ham
bars are forced #fff (es link 100% white); dropdown is ALWAYS a white panel with #0a0a0a text
regardless of state, so menu text never sits dark-on-dark. On the WHITE scrolled bar links are
forced #0a0a0a, sub-bar text stays #fff on black. Every text/icon color is set by construction. */
/* ───────── BAR SHELL ───────── */
#nav{
height:74px !important;
background:#000 !important; /* default: solid industrial black */
border-bottom:3px solid #d5160c !important; /* hard red seam */
border-radius:0 !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
box-shadow:none !important;
padding:0 max(20px,3vw) !important;
transition:background .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}
/* Over the dark hero — keep it pure black, not the translucent grey */
#nav.on-dark{
background:#000 !important;
border-bottom:3px solid #d5160c !important;
}
/* Scrolled past hero — crisp white bar, black seam with red on top edge via shadow */
#nav.scrolled:not(.on-dark){
background:#fff !important;
border-bottom:2px solid #0a0a0a !important;
box-shadow:0 3px 0 0 #d5160c, 0 6px 18px rgba(0,0,0,.12) !important;
}
/* ───────── LOGO + RED TICK ───────── */
#nav .nav-logo{
position:relative !important;
align-items:center !important;
padding-left:14px !important;margin-right:14px !important;flex-shrink:0 !important;
}
#nav .nav-logo::before{
content:"" !important;
position:absolute !important;left:0 !important;top:50% !important;
transform:translateY(-50%) !important;
width:4px !important;height:30px !important;
background:#d5160c !important;border-radius:0 !important;
}
#nav .nav-logo img{
height:46px !important;width:auto !important;max-width:240px !important;
display:block !important;object-fit:contain !important;
}
/* ───────── NAV LINKS ───────── */
#nav .nav-links{
gap:20px !important;align-items:center !important;list-style:none !important;
}
#nav .nav-links > li{margin:0 !important;}
/* keep the existing right-cluster push (3rd-from-last gets auto margin) */
#nav .nav-links > li > a,
#nav .nav-links .has-dd > a{
position:relative !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-size:14px !important;font-weight:700 !important;
text-transform:uppercase !important;letter-spacing:.04em !important;
line-height:1 !important;
padding:6px 0 !important;
display:inline-flex !important;align-items:center !important;gap:5px !important;
transition:color .15s ease !important;
}
/* Top-level link color BY STATE — guaranteed contrast */
#nav .nav-links a{color:#fff !important;} /* on black bar */
#nav.on-dark .nav-links a{color:#fff !important;}
#nav.scrolled:not(.on-dark) .nav-links a{color:#0a0a0a !important;} /* on white bar */
/* Red underline on hover / focus / current — sharp 2px rule */
#nav .nav-links .has-dd > a::after,
#nav .nav-links > li > a::after{
content:"" !important;position:absolute !important;
left:0 !important;bottom:-2px !important;height:2px !important;width:0 !important;
background:#d5160c !important;transition:width .18s ease !important;
}
#nav .nav-links > li > a:hover,
#nav .nav-links .has-dd:hover > a,
#nav .nav-links > li > a:focus-visible{color:#d5160c !important;}
#nav.scrolled:not(.on-dark) .nav-links > li > a:hover,
#nav.scrolled:not(.on-dark) .nav-links .has-dd:hover > a{color:#d5160c !important;}
#nav .nav-links > li > a:hover::after,
#nav .nav-links .has-dd:hover > a::after,
#nav .nav-links > li > a:focus-visible::after{width:100% !important;}
/* Español pill stays high-contrast in both states */
#nav .nav-links a.nav-es{color:#fff !important;}
#nav.scrolled:not(.on-dark) .nav-links a.nav-es{color:#0a0a0a !important;}
#nav .nav-links a.nav-es:hover{color:#d5160c !important;}
/* Dropdown caret: recolor the CSS-border chevron to match link state */
#nav .nav-links .dd-arrow{
width:6px !important;height:6px !important;margin-top:-2px !important;
border-right:2px solid currentColor !important;border-bottom:2px solid currentColor !important;
}
/* ───────── DROPDOWN PANELS — sharp, 2px black border, red rule, hard shadow ───────── */
#nav .has-dd > .dd,
#nav.on-dark .has-dd > .dd,
#nav.scrolled .has-dd > .dd{
background:#fff !important; /* ALWAYS white panel → never dark-on-dark */
border:2px solid #0a0a0a !important;
border-top:4px solid #d5160c !important; /* red top rule */
border-radius:0 !important;
padding:6px !important;min-width:230px !important;
top:calc(100% + 10px) !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
box-shadow:6px 6px 0 0 #000 !important; /* hard offset shadow */
}
#nav .has-dd > .dd li a,
#nav.on-dark .has-dd > .dd li a,
#nav.scrolled .has-dd > .dd li a{
display:flex !important;align-items:center !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-size:13.5px !important;font-weight:600 !important;letter-spacing:.01em !important;
color:#0a0a0a !important; /* forced dark text on white panel */
padding:10px 14px !important;min-height:44px !important;
border-radius:0 !important;
border-left:3px solid transparent !important;
transition:background .12s ease,color .12s ease,border-color .12s ease !important;
}
#nav .has-dd > .dd li a:hover,
#nav .has-dd > .dd li a:focus-visible,
#nav.on-dark .has-dd > .dd li a:hover,
#nav.scrolled .has-dd > .dd li a:hover{
background:#d5160c !important;color:#fff !important;
border-left-color:#000 !important;
}
/* in-panel "All Services / Free Tools" divider rows: keep dark, just sharpen */
#nav .has-dd > .dd li[style] a{color:#0a0a0a !important;}
#nav .has-dd > .dd li[style] a:hover{color:#fff !important;}
/* ───────── BUTTON CLUSTER (phone / instant-quote / free-estimate) ───────── */
#nav .nav-phone-btn,
#nav .nav-links a[href*="instant-quote"],
#nav .nav-cta{
font-family:"Barlow Semi Condensed",sans-serif !important;
height:38px !important;padding:0 16px !important;
font-size:13px !important;font-weight:700 !important;
text-transform:uppercase !important;letter-spacing:.05em !important;
border-radius:0 !important; /* sharp corners */
display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:7px !important;
white-space:nowrap !important;line-height:1 !important;
transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .12s ease !important;
}
/* Phone + Instant Quote = ghost outline buttons. On black bar: white outline. */
#nav .nav-phone-btn,
#nav .nav-links a[href*="instant-quote"]{
background:transparent !important;color:#fff !important;
border:2px solid #fff !important;box-shadow:none !important;
}
#nav .nav-phone-btn:hover,
#nav .nav-links a[href*="instant-quote"]:hover,
#nav .nav-phone-btn:focus-visible,
#nav .nav-links a[href*="instant-quote"]:focus-visible{
background:#d5160c !important;border-color:#d5160c !important;color:#fff !important;
transform:translateY(-1px) !important;box-shadow:3px 3px 0 0 rgba(0,0,0,.4) !important;
}
/* Scrolled (white bar): ghost buttons flip to black outline / black text */
#nav.scrolled:not(.on-dark) .nav-phone-btn,
#nav.scrolled:not(.on-dark) .nav-links a[href*="instant-quote"]{
background:transparent !important;color:#0a0a0a !important;border:2px solid #0a0a0a !important;
}
#nav.scrolled:not(.on-dark) .nav-phone-btn:hover,
#nav.scrolled:not(.on-dark) .nav-links a[href*="instant-quote"]:hover,
#nav.scrolled:not(.on-dark) .nav-phone-btn:focus-visible,
#nav.scrolled:not(.on-dark) .nav-links a[href*="instant-quote"]:focus-visible{
background:#d5160c !important;border-color:#d5160c !important;color:#fff !important;
box-shadow:3px 3px 0 0 rgba(0,0,0,.25) !important;
}
/* While hero still visible, hold the white-outline look even after .scrolled fires */
body.hero-visible #nav.scrolled .nav-phone-btn,
body.hero-visible #nav.scrolled .nav-links a[href*="instant-quote"]{
background:transparent !important;color:#fff !important;border-color:#fff !important;
}
body.hero-visible #nav.scrolled .nav-phone-btn:hover,
body.hero-visible #nav.scrolled .nav-links a[href*="instant-quote"]:hover{
background:#d5160c !important;border-color:#d5160c !important;color:#fff !important;
}
#nav .nav-phone-btn svg{width:14px !important;height:14px !important;fill:currentColor !important;stroke:none !important;}
/* Free Estimate = the dominant solid-red CTA with a hard red offset shadow */
#nav .nav-cta,
#nav.scrolled:not(.on-dark) .nav-cta,
body.hero-visible #nav.scrolled .nav-cta{
background:#d5160c !important;color:#fff !important;
border:2px solid #d5160c !important;
box-shadow:4px 4px 0 0 rgba(0,0,0,.55) !important;
padding:0 20px !important;
}
#nav .nav-cta:hover,
#nav .nav-cta:focus-visible,
#nav.scrolled:not(.on-dark) .nav-cta:hover{
background:#a81009 !important;border-color:#a81009 !important;color:#fff !important;
transform:translate(-1px,-1px) !important;
box-shadow:6px 6px 0 0 rgba(0,0,0,.6) !important;
}
#nav.scrolled:not(.on-dark) .nav-cta{box-shadow:4px 4px 0 0 rgba(0,0,0,.35) !important;}
/* ───────── HAMBURGER — 44px tap target, red border, state-aware bars ───────── */
#nav .ham,#nav button.ham,#nav .hamburger,#nav button.hamburger{
min-width:44px !important;min-height:44px !important;
box-sizing:border-box !important;
flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:5px !important;
padding:9px !important;
background:transparent !important;
border:2px solid #d5160c !important;border-radius:0 !important;
cursor:pointer !important;
}
#nav .ham span,#nav .hamburger span{
display:block !important;width:22px !important;height:2px !important;
background:#fff !important;border-radius:0 !important;transition:.25s ease !important;
}
#nav.on-dark .ham span{background:#fff !important;}
#nav.scrolled:not(.on-dark) .ham span{background:#0a0a0a !important;}
#nav.scrolled:not(.on-dark) .ham,#nav.scrolled:not(.on-dark) .hamburger{border-color:#0a0a0a !important;}
#nav .ham:hover,#nav .hamburger:hover{background:#d5160c !important;border-color:#d5160c !important;}
#nav .ham:hover span,#nav .hamburger:hover span{background:#fff !important;}
#nav .ham:focus-visible,#nav .hamburger:focus-visible{outline:2px solid #fff !important;outline-offset:2px !important;}
/* ───────── BLACK UTILITY SUB-BAR — tight, red top rule ───────── */
.hd-subbar{
background:#000 !important;
border-top:2px solid #d5160c !important;
border-bottom:1px solid rgba(255,255,255,.1) !important;
padding:5px 12px !important;
text-align:center !important;
}
.hd-subbar .hd-subbar-inner{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-size:11.5px !important;font-weight:600 !important;
letter-spacing:.12em !important;text-transform:uppercase !important;
color:#fff !important; /* white on black — guaranteed */
}
.hd-subbar a,.hd-subbar .hd-subbar-inner a{
color:#fff !important;font-weight:700 !important;text-decoration:none !important;
border-bottom:1px solid rgba(213,22,12,.7) !important;
transition:color .15s ease,border-color .15s ease !important;
}
.hd-subbar a:hover{color:#d5160c !important;border-bottom-color:#d5160c !important;}
/* ───────── FOCUS-VISIBLE for all interactive nav text links ───────── */
#nav .nav-links > li > a:focus-visible,
#nav .has-dd > a:focus-visible{
outline:2px solid #d5160c !important;outline-offset:3px !important;
}
#nav.scrolled:not(.on-dark) .nav-links > li > a:focus-visible{outline-color:#0a0a0a !important;}
/* ───────── RESPONSIVE ───────── */
/* ≤1060px: nav-links collapse to the mobile panel, ham shows (matches site breakpoint) */
@media(max-width:1060px){
#nav{padding:0 max(16px,4vw) !important;}
#nav .ham,#nav .hamburger{display:inline-flex !important;}
}
@media(min-width:1061px){
#nav .ham,#nav .hamburger{display:none !important;}
}
/* ≤980px: hide the phone-number text, keep the icon button square (site already does this) */
@media(max-width:980px){
#nav .nav-phone-btn .nav-phone-num{display:none !important;}
#nav .nav-phone-btn{padding:0 11px !important;}
}
@media(max-width:768px){
#nav{height:64px !important;padding:0 16px !important;}
#nav .nav-logo img{height:40px !important;}
#nav .nav-logo::before{height:26px !important;}
.hd-subbar{padding:5px 10px !important;}
.hd-subbar .hd-subbar-inner{font-size:10.5px !important;letter-spacing:.08em !important;}
}
@media(max-width:480px){
#nav .nav-logo img{height:36px !important;}
/* sub-bar can wrap to two tidy lines on tiny screens without clipping */
.hd-subbar .hd-subbar-inner{font-size:10px !important;letter-spacing:.06em !important;line-height:1.5 !important;}
}
/* --- SECTION: services-frame --- */
/* SECTION: services-frame — ELEVATION
Intended look: Section sits on a WHITE band. A short solid-red eyebrow rule sits above a tiny
uppercase red eyebrow label, then a heavy uppercase Barlow Semi Condensed black headline
("EVERYTHING YOUR ROOF NEEDS.") with the period as a red accent block feel. Confident two-tier
intro copy (near-black lead + grey support), red inline links. Balanced grid gutters. Bottom CTA
becomes a solid-red tool-crate button: sharp corners, 2px black border, hard 5px 5px 0 #000 offset
shadow, white uppercase Barlow Semi Condensed label, lifts/snaps the shadow on hover/focus.
Contrast: white band → all headings/lead copy forced to #0a0a0a, support copy to #6b6b6b (AA on white),
eyebrow to #d5160c. CTA = #fff text on #d5160c fill (AA) with #000 border; CTA eyebrow forced to #d5160c.
No text ever inherits a risky color. Scoped to #services non-card (.svc-card untouched). !important + responsive. */
/* ── Section shell ───────────────────────────────────────────── */
#services.sec{
background:#fff !important;
padding-top:clamp(56px,7vw,96px) !important;
padding-bottom:clamp(56px,7vw,96px) !important;
position:relative !important;
}
/* ── Header block ────────────────────────────────────────────── */
#services .sec-hdr{
max-width:1200px !important;
margin:0 auto clamp(28px,4vw,44px) !important;
position:relative !important;
}
/* Short red eyebrow rule + uppercase label */
#services .sec-hdr .eyebrow{
display:inline-flex !important;
align-items:center !important;
gap:12px !important;
font-family:'Barlow Semi Condensed','Barlow',sans-serif !important;
font-size:clamp(12px,1vw,13px) !important;
font-weight:700 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
color:#d5160c !important;
margin:0 0 16px !important;
}
#services .sec-hdr .eyebrow::before{
content:"" !important;
display:block !important;
width:38px !important;
height:4px !important;
background:#d5160c !important;
border-radius:0 !important;
flex:0 0 auto !important;
}
/* Heavy condensed uppercase headline */
#services .sec-hdr .h2{
font-family:'Barlow Semi Condensed','Barlow',sans-serif !important;
font-size:clamp(40px,6.4vw,68px) !important;
font-weight:800 !important;
line-height:.96 !important;
letter-spacing:-.01em !important;
text-transform:uppercase !important;
color:#0a0a0a !important;
margin:0 !important;
text-wrap:balance !important;
}
/* Confident intro hierarchy — lead (near-black) + support (grey) */
#services .sec-hdr .body-lg{
font-family:'Barlow',sans-serif !important;
font-size:clamp(17px,1.6vw,21px) !important;
font-weight:600 !important;
line-height:1.42 !important;
color:#0a0a0a !important;
max-width:560px !important;
margin-top:20px !important;
}
#services .sec-hdr .body-md{
font-family:'Barlow',sans-serif !important;
font-size:clamp(15px,1.35vw,17px) !important;
font-weight:400 !important;
line-height:1.62 !important;
color:#5c5c5c !important;
max-width:640px !important;
margin-top:14px !important;
}
/* Inline links stay on-palette red and legible on white */
#services .sec-hdr .body-md a,
#services .sec-hdr .body-lg a{
color:#d5160c !important;
font-weight:700 !important;
text-decoration:none !important;
border-bottom:2px solid rgba(213,22,12,.28) !important;
transition:border-color .14s ease,background-color .14s ease !important;
}
#services .sec-hdr .body-md a:hover,
#services .sec-hdr .body-md a:focus-visible,
#services .sec-hdr .body-lg a:hover,
#services .sec-hdr .body-lg a:focus-visible{
border-bottom-color:#d5160c !important;
background:rgba(213,22,12,.07) !important;
outline:none !important;
}
/* ── Grid container / balanced gutters ───────────────────────── */
#services .svc-grid{
max-width:1200px !important;
margin:0 auto !important;
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:22px !important;
align-items:stretch !important;
}
/* ── Bottom CTA block (tool-crate) ───────────────────────────── */
/* The CTA wrapper is an inline-styled div after .svc-grid; target the button by its class. */
#services .svc-grid + div{
padding:clamp(28px,4vw,44px) 0 0 !important;
margin:0 !important;
}
#services .svc-grid + div > p{
font-family:'Barlow Semi Condensed','Barlow',sans-serif !important;
font-size:clamp(11px,1.05vw,13px) !important;
font-weight:700 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
color:#d5160c !important;
margin:0 0 14px !important;
}
#services .svc-grid + div > .btn-red{
display:inline-flex !important;
align-items:center !important;
gap:10px !important;
background:#d5160c !important;
color:#fff !important;
font-family:'Barlow Semi Condensed','Barlow',sans-serif !important;
font-weight:700 !important;
font-size:clamp(15px,1.3vw,18px) !important;
letter-spacing:.04em !important;
text-transform:uppercase !important;
text-decoration:none !important;
padding:16px 30px !important;
min-height:52px !important;
border:2px solid #000 !important;
border-radius:0 !important;
box-shadow:5px 5px 0 #000 !important;
transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease !important;
}
#services .svc-grid + div > .btn-red:hover{
background:#000 !important;
color:#fff !important;
transform:translate(-2px,-2px) !important;
box-shadow:7px 7px 0 #d5160c !important;
}
#services .svc-grid + div > .btn-red:active{
transform:translate(2px,2px) !important;
box-shadow:2px 2px 0 #000 !important;
}
#services .svc-grid + div > .btn-red:focus-visible{
outline:3px solid #000 !important;
outline-offset:3px !important;
}
/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:768px){
#services.sec{
padding-top:clamp(44px,9vw,64px) !important;
padding-bottom:clamp(44px,9vw,64px) !important;
}
#services .svc-grid{
grid-template-columns:1fr 1fr !important;
gap:16px !important;
}
#services .sec-hdr .h2{
font-size:clamp(34px,9vw,48px) !important;
}
#services .sec-hdr .body-lg{font-size:17px !important;}
#services .sec-hdr .body-md{font-size:15px !important;}
}
@media (max-width:480px){
#services .svc-grid{
grid-template-columns:1fr !important;
gap:14px !important;
}
#services .sec-hdr .h2{
font-size:clamp(30px,11vw,40px) !important;
line-height:1 !important;
}
#services .sec-hdr .eyebrow{font-size:12px !important;}
#services .svc-grid + div > .btn-red{
width:100% !important;
justify-content:center !important;
box-shadow:4px 4px 0 #000 !important;
}
#services .svc-grid + div > .btn-red:hover{box-shadow:5px 5px 0 #d5160c !important;}
}
/* --- SECTION: services-cards --- */
/* SECTION: services-cards — ELEVATION
Intended look: Milwaukee tool-crate cards. Each is a sharp 2px-black frame with a
hard 7px black offset shadow that snaps to red on a crisp lift+hover. Photo banner
is consistently cropped under a 2px black rule; a dark bottom gradient carries a
white UPPERCASE condensed tag, and a red square icon badge bites the banner's
lower-left corner. Card body is pure white: heavy uppercase condensed black title
over a short red rule, grey body, and a red "→" link that slides on hover.
Contrast: card body forces #000 title + #2a2a2a body on #fff (>10:1). The tag is
white #fff on a hard-stacked black gradient/red fallback (>7:1), never the bare
photo. Icon glyph is white inside a solid #d5160c badge. Location pills are #000 on
a 6% black chip, flipping to white-on-red on hover. All guaranteed by construction. */
/* ---- Card frame: tool crate, sharp, hard offset shadow ---- */
#services .svc-card{
position:relative!important;
display:flex!important;
flex-direction:column!important;
padding:0 0 22px!important; /* banner is flush to the frame edges */
background:#fff!important;
border:2px solid #000!important;
border-radius:0!important;
box-shadow:7px 7px 0 #000!important;
overflow:hidden!important;
min-height:0!important;
transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s cubic-bezier(.2,.7,.2,1)!important;
}
#services .svc-card:hover,
#services .svc-card:focus-within{
transform:translate(-4px,-4px)!important;
box-shadow:11px 11px 0 #d5160c!important;
}
/* ---- Banner: consistent crop + 2px black baseline rule + dark bottom gradient ---- */
#services .svc-card .svc-banner{
position:relative!important;
height:172px!important;
margin:0!important;
border:0!important;
border-bottom:2px solid #000!important;
border-radius:0!important;
overflow:hidden!important;
background:#000!important; /* avoids white flash before image paint */
flex:0 0 auto!important;
}
#services .svc-card .svc-banner img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
display:block!important;
border-radius:0!important;
transition:transform .4s cubic-bezier(.2,.7,.2,1)!important;
}
#services .svc-card:hover .svc-banner img,
#services .svc-card:focus-within .svc-banner img{
transform:scale(1.06)!important;
}
/* Hard dark gradient anchoring the tag at the banner's base */
#services .svc-card .svc-banner::after{
content:""!important;
position:absolute!important;
left:0!important;right:0!important;bottom:0!important;
height:70%!important;
background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.18) 42%,rgba(0,0,0,.82) 100%)!important;
pointer-events:none!important;
z-index:1!important;
}
/* ---- Head row: pull up over banner so the icon badge bites the corner ---- */
#services .svc-card .svc-head{
position:relative!important;
z-index:2!important;
display:flex!important;
align-items:flex-end!important;
justify-content:flex-start!important;
gap:10px!important;
min-height:0!important;
margin:-40px 0 0!important; /* overlap onto the banner gradient */
padding:0 20px!important;
}
/* ---- Icon badge: solid red square, white glyph, sharp ---- */
#services .svc-card .svc-icon{
width:44px!important;
height:44px!important;
flex:0 0 auto!important;
box-sizing:border-box!important;
padding:9px!important;
background:#d5160c!important;
color:#fff!important;
stroke:#fff!important;
fill:none!important;
stroke-width:2!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
border:2px solid #000!important;
border-radius:0!important;
box-shadow:3px 3px 0 #000!important;
transition:transform .18s cubic-bezier(.2,.7,.2,1)!important;
}
#services .svc-card:hover .svc-icon,
#services .svc-card:focus-within .svc-icon{
transform:translateY(-2px)!important;
}
/* ---- Tag: white UPPERCASE condensed on the photo gradient ---- */
#services .svc-card .svc-tag{
display:inline-block!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-size:12px!important;
font-weight:700!important;
line-height:1!important;
letter-spacing:.13em!important;
text-transform:uppercase!important;
color:#fff!important;
background:rgba(0,0,0,.55)!important; /* fallback band so text stays legible even on bright photos */
padding:6px 9px 5px!important;
border-radius:0!important;
margin-bottom:3px!important; /* sit on the banner baseline, beside the badge */
text-shadow:0 1px 3px rgba(0,0,0,.7)!important;
}
/* ---- Card body wrapper: title / desc / link get consistent horizontal padding ---- */
#services .svc-card .svc-title,
#services .svc-card .svc-desc,
#services .svc-card .svc-link,
#services .svc-card .svc-locations{
padding-left:20px!important;
padding-right:20px!important;
}
/* ---- Title: heavy uppercase condensed, black, with a short red rule ---- */
#services .svc-card .svc-title{
position:relative!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-size:24px!important;
font-weight:800!important;
line-height:1.04!important;
letter-spacing:.005em!important;
text-transform:uppercase!important;
color:#000!important;
margin:18px 0 12px!important;
padding-top:14px!important; /* room for the rule above */
}
#services .svc-card .svc-title::before{
content:""!important;
position:absolute!important;
top:0!important;left:20px!important;
width:34px!important;height:4px!important;
background:#d5160c!important;
}
/* ---- Description: grey body, guaranteed dark on white ---- */
#services .svc-card .svc-desc{
font-family:"Barlow",sans-serif!important;
font-size:15px!important;
font-weight:400!important;
line-height:1.55!important;
color:#2a2a2a!important;
margin:0 0 18px!important;
flex:1 1 auto!important;
}
/* ---- Link: red, uppercase condensed, with a crisp sliding arrow ---- */
#services .svc-card .svc-link{
display:inline-flex!important;
align-items:center!important;
gap:8px!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-size:15px!important;
font-weight:700!important;
letter-spacing:.04em!important;
text-transform:uppercase!important;
color:#d5160c!important;
text-decoration:none!important;
min-height:44px!important; /* tap target */
margin-top:auto!important;
transition:gap .18s cubic-bezier(.2,.7,.2,1),color .15s ease!important;
}
#services .svc-card .svc-link:hover,
#services .svc-card .svc-link:focus-visible{
gap:13px!important;
color:#000!important;
}
#services .svc-card .svc-link:focus-visible{
outline:3px solid #d5160c!important;
outline-offset:3px!important;
}
/* Keep the full-card click overlay working under the new layout */
#services .svc-card .svc-link::before{
content:""!important;
position:absolute!important;
inset:0!important;
z-index:1!important;
border-radius:0!important;
}
/* ---- Popular-locations block: black-on-chip pills, hover to white-on-red ---- */
#services .svc-card .svc-locations{
position:relative!important;
z-index:2!important;
display:flex!important;
flex-wrap:wrap!important;
gap:8px!important;
margin-top:16px!important;
padding-top:16px!important;
border-top:2px solid #000!important;
border-radius:0!important;
}
#services .svc-card .svc-locations .svc-locations-label{
width:100%!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:.12em!important;
text-transform:uppercase!important;
color:#000!important;
margin-bottom:4px!important;
}
#services .svc-card .svc-locations a{
position:relative!important;
z-index:2!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-size:12px!important;
font-weight:700!important;
letter-spacing:.03em!important;
text-transform:uppercase!important;
color:#000!important;
text-decoration:none!important;
padding:7px 11px!important;
min-height:32px!important;
display:inline-flex!important;
align-items:center!important;
background:rgba(0,0,0,.06)!important;
border:2px solid #000!important;
border-radius:0!important;
transition:background .15s ease,color .15s ease!important;
}
#services .svc-card .svc-locations a:hover,
#services .svc-card .svc-locations a:focus-visible{
background:#d5160c!important;
color:#fff!important;
}
#services .svc-card .svc-locations a:focus-visible{
outline:3px solid #000!important;
outline-offset:2px!important;
}
/* ============================ RESPONSIVE ============================ */
@media (max-width:768px){
#services .svc-card{
box-shadow:5px 5px 0 #000!important;
}
#services .svc-card:hover,
#services .svc-card:focus-within{
transform:translate(-3px,-3px)!important;
box-shadow:8px 8px 0 #d5160c!important;
}
#services .svc-card .svc-banner{
height:188px!important; /* taller crop reads better full-width */
}
#services .svc-card .svc-title{
font-size:23px!important;
}
}
@media (max-width:480px){
#services .svc-card .svc-banner{
height:168px!important;
}
#services .svc-card .svc-head{
padding-left:16px!important;
padding-right:16px!important;
}
#services .svc-card .svc-title,
#services .svc-card .svc-desc,
#services .svc-card .svc-link,
#services .svc-card .svc-locations{
padding-left:16px!important;
padding-right:16px!important;
}
#services .svc-card .svc-title::before{
left:16px!important;
}
#services .svc-card .svc-icon{
width:40px!important;
height:40px!important;
padding:8px!important;
}
}
/* --- SECTION: trust --- */
/* SECTION: trust — ELEVATION
Intended look: a bold white credibility band, Milwaukee tool-crate style. Black condensed
"WHY HOMEOWNERS…" headline with a red eyebrow rule. Left = four tool-crate stat tiles
(2px black borders, hard 6px black offset shadow, red corner-cut + red badge chip on each).
Right = a sharp-edged "4.9 GOOGLE" proof crate with a red top bar + ghost numeral, sitting
over three giant condensed stat blocks (99% · ∞ · 30YR) split by red 2px dividers. A full-width
red-edged guarantee bar caps the band. Hits hard at a glance.
Contrast: band forced #fff, so ALL text forced near-black rgba(0,0,0,.94) (headline/titles/subs/body)
or pure #fff on red chips/bars; the ghost numeral is a faint #000 tint behind solid text;
the guarantee bar text is forced rgba(0,0,0,.94) on its white fill with a red 2px frame + red icon.
Nothing is dark-on-dark or light-on-light. Scoped to #trust; every prop !important; responsive. */
/* ---- band ---- */
#trust{
background:#fff !important;
border-top:2px solid #000 !important;
border-bottom:2px solid #000 !important;
padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,72px) !important;
position:relative !important;
overflow:hidden !important;
}
/* thin red signature rule pinned to the very top edge of the band */
#trust::before{
content:"" !important;
position:absolute !important;
top:0 !important; left:0 !important; right:0 !important;
height:5px !important;
background:#d5160c !important;
z-index:2 !important;
}
#trust .trust-inner{
display:grid !important;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important;
gap:clamp(28px,4vw,64px) !important;
align-items:start !important;
max-width:1200px !important;
margin:0 auto !important;
padding:0 clamp(18px,4vw,48px) !important;
position:relative !important;
z-index:1 !important;
}
/* ---- headline column ---- */
#trust .eyebrow{
display:inline-flex !important;
align-items:center !important;
gap:10px !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:.16em !important;
font-size:13px !important;
line-height:1 !important;
color:rgba(0,0,0,.94) !important;
margin:0 0 14px !important;
}
#trust .eyebrow::before{
content:"" !important;
width:34px !important;
height:4px !important;
background:#d5160c !important;
display:inline-block !important;
}
#trust .h2{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:-.01em !important;
line-height:.94 !important;
font-size:clamp(34px,4.6vw,60px) !important;
color:rgba(0,0,0,.94) !important;
margin:0 !important;
}
#trust .body-lg{
font-family:"Barlow",sans-serif !important;
color:rgba(0,0,0,.86) !important;
font-size:clamp(15px,1.45vw,17px) !important;
line-height:1.62 !important;
max-width:56ch !important;
margin-top:18px !important;
}
#trust .body-lg a{
color:#d5160c !important;
font-weight:700 !important;
text-decoration:none !important;
border-bottom:2px solid rgba(213,22,12,.35) !important;
transition:border-color .15s ease,background .15s ease !important;
}
#trust .body-lg a:hover,
#trust .body-lg a:focus-visible{
border-bottom-color:#d5160c !important;
background:rgba(213,22,12,.08) !important;
outline:none !important;
}
/* ---- tool-crate stat tiles (cred list) ---- */
#trust .cred-list{
display:flex !important;
flex-direction:column !important;
gap:14px !important;
margin-top:clamp(26px,3vw,38px) !important;
}
#trust .cred-row{
display:grid !important;
grid-template-columns:auto 1fr auto !important;
align-items:center !important;
gap:16px !important;
background:#fff !important;
border:2px solid #000 !important;
border-radius:0 !important;
box-shadow:6px 6px 0 #000 !important;
padding:16px 18px 16px 0 !important;
position:relative !important;
min-height:64px !important;
transition:transform .14s ease,box-shadow .14s ease !important;
}
/* red spine on the left of every tile */
#trust .cred-row::before{
content:"" !important;
width:6px !important;
align-self:stretch !important;
background:#d5160c !important;
margin-right:2px !important;
}
#trust .cred-row:hover{
transform:translate(-2px,-2px) !important;
box-shadow:9px 9px 0 #d5160c !important;
}
#trust .cred-ic{
width:48px !important;
height:48px !important;
flex:0 0 48px !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:24px !important;
line-height:1 !important;
background:#000 !important;
border-radius:0 !important;
color:#fff !important;
}
#trust .cred-ic img{
width:34px !important;
height:34px !important;
object-fit:contain !important;
/* keep the OC badge bright on its black tile */
filter:none !important;
}
#trust .cred-title{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.01em !important;
font-size:clamp(14px,1.4vw,16px) !important;
line-height:1.1 !important;
color:rgba(0,0,0,.94) !important;
}
#trust .cred-sub{
font-family:"Barlow",sans-serif !important;
font-size:12.5px !important;
line-height:1.4 !important;
color:rgba(0,0,0,.62) !important;
margin-top:3px !important;
}
#trust .cred-badge{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.04em !important;
font-size:12px !important;
line-height:1 !important;
color:#fff !important;
background:#d5160c !important;
border:0 !important;
border-radius:0 !important;
padding:7px 10px !important;
min-width:40px !important;
text-align:center !important;
align-self:center !important;
white-space:nowrap !important;
}
/* ---- proof crate: 4.9 ring + stat blocks ---- */
#trust .ring-wrap{
border:2px solid #000 !important;
border-radius:0 !important;
background:#fff !important;
box-shadow:8px 8px 0 #000 !important;
padding:clamp(22px,3vw,34px) clamp(20px,2.6vw,32px) clamp(18px,2.4vw,26px) !important;
position:relative !important;
}
/* red header bar across the top of the crate */
#trust .ring-wrap::before{
content:"" !important;
position:absolute !important;
top:0 !important; left:0 !important; right:0 !important;
height:8px !important;
background:#d5160c !important;
}
#trust .ring{
position:relative !important;
width:clamp(184px,20vw,232px) !important;
height:clamp(184px,20vw,232px) !important;
margin:6px auto 4px !important;
border-radius:50% !important;
display:grid !important;
place-items:center !important;
background:transparent !important;
}
/* gauge ring painted on a pseudo-element ONLY (the 4.9 text is never masked).
Red arc on a grey track via conic-gradient; a radial mask carves the donut hole. */
#trust .ring::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
border-radius:50% !important;
background:conic-gradient(#d5160c 0 92%, rgba(0,0,0,.1) 92% 100%) !important;
-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 13px),#000 calc(100% - 12px)) !important;
mask:radial-gradient(farthest-side,#0000 calc(100% - 13px),#000 calc(100% - 12px)) !important;
z-index:0 !important;
}
/* red start-of-arc tick at 12 o'clock for that gauge feel */
#trust .ring-dot{
position:absolute !important;
top:-3px !important; left:50% !important;
transform:translateX(-50%) !important;
width:14px !important; height:14px !important;
background:#d5160c !important;
border:2px solid #fff !important;
border-radius:50% !important;
z-index:2 !important;
}
#trust .ring-center{
position:relative !important;
display:grid !important;
place-content:center !important;
text-align:center !important;
z-index:2 !important;
}
#trust .ring-num{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
font-size:clamp(48px,6vw,68px) !important;
line-height:.9 !important;
color:rgba(0,0,0,.94) !important;
letter-spacing:-.02em !important;
}
#trust .ring-lbl{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:.12em !important;
font-size:12px !important;
color:#d5160c !important;
margin-top:6px !important;
}
#trust .ring-stats{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
margin-top:clamp(20px,2.4vw,28px) !important;
border-top:2px solid #000 !important;
padding-top:clamp(16px,2vw,22px) !important;
}
#trust .ring-stat{
text-align:center !important;
padding:0 6px !important;
position:relative !important;
}
/* red 2px dividers between the three stat blocks */
#trust .ring-stat + .ring-stat::before{
content:"" !important;
position:absolute !important;
left:0 !important; top:6% !important;
width:2px !important; height:88% !important;
background:#d5160c !important;
}
#trust .ring-stat-n{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
font-size:clamp(30px,3.6vw,44px) !important;
line-height:.9 !important;
color:rgba(0,0,0,.94) !important;
letter-spacing:-.01em !important;
}
#trust .ring-stat-n span{
color:#d5160c !important;
font-size:.5em !important;
font-weight:800 !important;
vertical-align:super !important;
margin-left:1px !important;
}
#trust .ring-stat-l{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:.1em !important;
font-size:11px !important;
color:rgba(0,0,0,.74) !important;
margin-top:7px !important;
}
/* ---- guarantee bar ---- */
#trust .trust-guarantee{
display:flex !important;
align-items:center !important;
gap:16px !important;
max-width:1200px !important;
margin:clamp(34px,4vw,52px) auto 0 !important;
padding:18px clamp(18px,3vw,28px) !important;
background:#fff !important;
border:2px solid #d5160c !important;
border-radius:0 !important;
box-shadow:6px 6px 0 #000 !important;
position:relative !important;
}
#trust .trust-guarantee::before{
content:"" !important;
position:absolute !important;
left:0 !important; top:0 !important; bottom:0 !important;
width:8px !important;
background:#d5160c !important;
}
#trust .trust-guarantee-icon{
width:34px !important;
height:34px !important;
flex:0 0 34px !important;
color:#d5160c !important;
margin-left:6px !important;
}
#trust .trust-guarantee-text{
font-family:"Barlow",sans-serif !important;
color:rgba(0,0,0,.94) !important;
margin:0 !important;
}
#trust .trust-guarantee-text strong{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.02em !important;
color:rgba(0,0,0,.94) !important;
}
/* keep reveal animations from hiding content if JS is slow */
#trust .rv{ opacity:1 !important; transform:none !important; }
/* ---- responsive ---- */
@media(max-width:980px){
#trust .trust-inner{
grid-template-columns:1fr !important;
gap:clamp(28px,5vw,40px) !important;
}
#trust .ring-wrap{ max-width:520px !important; }
}
@media(max-width:768px){
#trust{ padding:48px 0 36px !important; }
#trust .cred-row{
box-shadow:5px 5px 0 #000 !important;
padding:14px 14px 14px 0 !important;
}
#trust .cred-row:hover{ box-shadow:7px 7px 0 #d5160c !important; }
#trust .ring-wrap{ box-shadow:6px 6px 0 #000 !important; }
#trust .trust-guarantee{
align-items:flex-start !important;
box-shadow:5px 5px 0 #000 !important;
}
}
@media(max-width:480px){
#trust .h2{ font-size:clamp(30px,8.5vw,40px) !important; }
#trust .cred-badge{ padding:6px 8px !important; font-size:11px !important; }
#trust .cred-sub{ font-size:12px !important; }
#trust .ring-stat-n{ font-size:clamp(26px,8vw,34px) !important; }
#trust .ring-stat-l{ font-size:10px !important; letter-spacing:.06em !important; }
#trust .ring-stats{ padding-top:14px !important; }
}
/* --- SECTION: founder --- */
/* SECTION: founder — ELEVATION (scope: #mario / .home-section--soft + descendants)
Intended look: a confident solid-black founder band. A red "logo-block" eyebrow,
a huge Barlow Semi Condensed uppercase headline ("41 YEARS ON ROOFS.") whose
number flips RED. A dramatic pull-quote with a fat red rule + ghost quotation
mark. Mario's portrait in a sharp 3px-red frame with a hard black offset shadow,
an angled red EST.1996 corner tab, and a red top-right notch tab. A real
signature feel: red square monogram + white name + grey credentials separated by
a thin rule. Generous vertical rhythm; one dominant red CTA pill.
Contrast: black band throughout — headings/quote/body forced #fff, lead & caption
white-opacity tints, credentials #9c9c9c (AA on black), tabs/eyebrow/CTA white on
#d5160c. No dark-on-dark anywhere. Scoped to .home-section--soft, all !important,
responsive @768/@480, hover + :focus-visible, ≥44px tap target, no layout shift. */
/* ---- 0. Band rhythm: let the personal story breathe ---------------------- */
.home-section--soft#mario .home-section__inner{
padding-top:clamp(8px,1.5vw,20px)!important;
padding-bottom:clamp(8px,1.5vw,20px)!important;
}
/* ---- 1. Red "logo-block" eyebrow — sharp, weighty -------------------------- */
.home-section--soft#mario .home-eyebrow:not([style]){
display:inline-block!important;
background:#d5160c!important;
color:#fff!important;
padding:6px 14px!important;
border-radius:0!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-weight:700!important;
font-size:13px!important;
letter-spacing:.18em!important;
text-transform:uppercase!important;
line-height:1!important;
margin:0 auto 22px!important;
box-shadow:5px 5px 0 #000!important;
}
/* ---- 2. Hero headline: heavy condensed uppercase, RED number -------------- */
.home-section--soft#mario .home-h2{
font-family:"Barlow Semi Condensed",sans-serif!important;
color:#fff!important;
font-weight:800!important;
text-transform:uppercase!important;
font-size:clamp(40px,6.4vw,76px)!important;
line-height:.92!important;
letter-spacing:-.02em!important;
margin:0 auto!important;
}
/* the "41" reads red — first word of "41 years on roofs." */
.home-section--soft#mario .home-h2::first-letter{
color:#d5160c!important;
}
.home-section--soft#mario .home-h2::after{
content:""!important;
display:block!important;
width:72px!important;
height:5px!important;
margin:20px auto 0!important;
background:#d5160c!important;
box-shadow:3px 3px 0 rgba(0,0,0,.55)!important;
}
/* ---- 3. Lead paragraph (inline-styled eyebrow) → centered white tint ------ */
.home-section--soft#mario .home-eyebrow[style]{
background:transparent!important;
color:rgba(255,255,255,.82)!important;
display:block!important;
font-family:"Barlow",sans-serif!important;
font-size:14px!important;
line-height:1.6!important;
letter-spacing:.01em!important;
max-width:620px!important;
margin:18px auto 0!important;
text-align:center!important;
}
/* ---- 4. Dramatic pull-quote: fat red rule + ghost quote mark -------------- */
.home-section--soft#mario .home-mario-quote{
position:relative!important;
color:#fff!important;
background:transparent!important;
border:0!important;
border-left:6px solid #d5160c!important;
padding:6px 0 6px 28px!important;
margin:clamp(28px,4vw,44px) auto!important;
max-width:720px!important;
text-align:left!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-weight:600!important;
font-size:clamp(20px,2.6vw,30px)!important;
line-height:1.18!important;
letter-spacing:-.005em!important;
text-transform:none!important;
}
.home-section--soft#mario .home-mario-quote::before{
content:"\201C"!important; /* ghost opening quote for depth */
position:absolute!important;
top:-.34em!important;
left:22px!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-weight:800!important;
font-size:3.4em!important;
line-height:1!important;
color:rgba(213,22,12,.16)!important;
pointer-events:none!important;
z-index:0!important;
}
.home-section--soft#mario .home-mario-quote :is(p,span,em,strong,b){
color:#fff!important;
position:relative!important;
z-index:1!important;
}
/* ---- 5. Body prose: comfortable measure, white on black ------------------- */
.home-section--soft#mario .home-mario-body{
max-width:640px!important;
margin:0 auto!important;
text-align:left!important;
}
.home-section--soft#mario .home-mario-body p{
color:rgba(255,255,255,.9)!important;
font-family:"Barlow",sans-serif!important;
font-size:15.5px!important;
line-height:1.72!important;
margin:0 0 18px!important;
}
.home-section--soft#mario .home-mario-body p:last-child{margin-bottom:0!important;}
.home-section--soft#mario .home-mario-body :is(strong,b){
color:#fff!important;
font-weight:700!important;
}
/* ---- 6. Portrait figure: more space above/below --------------------------- */
.home-section--soft#mario .home-founder{
margin:clamp(32px,5vw,52px) auto clamp(28px,4vw,40px)!important;
text-align:center!important;
display:block!important;
max-width:760px!important;
}
/* ---- 7. The frame: sharp 3px-red border + hard black offset shadow -------- */
.home-section--soft#mario .home-founder__frame{
position:relative!important;
display:inline-block!important;
width:clamp(190px,24vw,232px)!important;
height:clamp(190px,24vw,232px)!important;
border:3px solid #d5160c!important;
border-radius:0!important;
background:#000!important;
overflow:hidden!important;
line-height:0!important;
/* hard Milwaukee offset shadow + faint white inner ring to read on black */
box-shadow:14px 14px 0 rgba(0,0,0,.55),
0 0 0 1px rgba(255,255,255,.14) inset!important;
}
/* small red notch tab on the TOP-RIGHT corner (tool-crate cue) */
.home-section--soft#mario .home-founder__frame::after{
content:""!important;
position:absolute!important;
top:-3px!important;
right:-3px!important;
width:26px!important;
height:26px!important;
background:#d5160c!important;
clip-path:polygon(100% 0,100% 100%,0 0)!important;
z-index:3!important;
}
.home-section--soft#mario .home-founder__img{
display:block!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center 28%!important;
filter:contrast(1.05) brightness(1.01) saturate(1)!important;
}
/* ---- 8. Subtle dark vignette (depth, not a color cast) -------------------- */
.home-section--soft#mario .home-founder__vignette{
position:absolute!important;
inset:0!important;
pointer-events:none!important;
background:radial-gradient(120% 120% at 50% 38%,
rgba(0,0,0,0) 50%,
rgba(0,0,0,.30) 86%,
rgba(0,0,0,.55) 100%)!important;
z-index:1!important;
}
/* ---- 9. Solid-red EST.1996 corner tab ------------------------------------- */
.home-section--soft#mario .home-founder__tab{
position:absolute!important;
left:0!important;
bottom:0!important;
background:#d5160c!important;
color:#fff!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-size:11px!important;
font-weight:700!important;
letter-spacing:.14em!important;
text-transform:uppercase!important;
padding:5px 11px!important;
border-radius:0!important;
line-height:1!important;
z-index:2!important;
}
/* ---- 10. Caption: centered white tint ------------------------------------- */
.home-section--soft#mario .home-founder__cap{
margin-top:16px!important;
font-family:"Barlow",sans-serif!important;
font-size:13px!important;
font-weight:500!important;
letter-spacing:.02em!important;
color:rgba(255,255,255,.6)!important;
line-height:1.4!important;
}
/* ---- 11. Signature block: red monogram + name + grey credentials ---------- */
.home-section--soft#mario .home-attr{
display:inline-flex!important;
align-items:center!important;
gap:14px!important;
margin:0 auto!important;
padding:18px 0 0!important;
text-align:left!important;
border-top:2px solid rgba(255,255,255,.14)!important;
max-width:520px!important;
}
.home-section--soft#mario .home-attr__avatar{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:52px!important;
height:52px!important;
flex:0 0 52px!important;
background:#d5160c!important;
color:#fff!important;
border-radius:0!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-weight:800!important;
font-size:20px!important;
letter-spacing:.04em!important;
box-shadow:4px 4px 0 #000!important;
}
.home-section--soft#mario .home-attr__name{
color:#fff!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-weight:700!important;
font-size:20px!important;
letter-spacing:.01em!important;
text-transform:uppercase!important;
line-height:1.1!important;
}
.home-section--soft#mario .home-attr__role{
color:#9c9c9c!important;
font-family:"Barlow",sans-serif!important;
font-size:12.5px!important;
font-weight:500!important;
letter-spacing:.01em!important;
line-height:1.45!important;
margin-top:3px!important;
}
/* ---- 12. CTA: eyebrow label + one dominant red pill ----------------------- */
.home-section--soft#mario p[style*="color:rgba(213,22,12"]{
color:#d5160c!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-weight:700!important;
letter-spacing:.14em!important;
text-transform:uppercase!important;
}
.home-section--soft#mario a.btn-red{
background:#d5160c!important;
color:#fff!important;
border:2px solid #d5160c!important;
border-radius:0!important;
font-family:"Barlow Semi Condensed",sans-serif!important;
font-weight:700!important;
letter-spacing:.01em!important;
text-transform:uppercase!important;
min-height:44px!important;
box-shadow:6px 6px 0 #000!important;
transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease!important;
}
.home-section--soft#mario a.btn-red:hover{
background:#fff!important;
color:#d5160c!important;
transform:translate(-2px,-2px)!important;
box-shadow:8px 8px 0 #d5160c!important;
}
.home-section--soft#mario a.btn-red:active{
transform:translate(2px,2px)!important;
box-shadow:2px 2px 0 #000!important;
}
.home-section--soft#mario a.btn-red:focus-visible{
outline:3px solid #fff!important;
outline-offset:3px!important;
}
/* ---- 13. Plain links readable on black ------------------------------------ */
.home-section--soft#mario a:not(.btn):not(.btn-red){
color:#fff!important;
text-decoration:underline!important;
text-underline-offset:3px!important;
}
/* ==== RESPONSIVE ========================================================== */
@media(max-width:768px){
.home-section--soft#mario .home-h2{font-size:clamp(36px,11vw,52px)!important;}
.home-section--soft#mario .home-mario-quote{
font-size:clamp(19px,5.2vw,24px)!important;
padding-left:20px!important;
border-left-width:5px!important;
}
.home-section--soft#mario .home-mario-quote::before{font-size:2.8em!important;left:16px!important;}
.home-section--soft#mario .home-founder__frame{
width:164px!important;height:164px!important;border-width:2px!important;
box-shadow:9px 9px 0 rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.14) inset!important;
}
.home-section--soft#mario .home-founder__tab{font-size:10px!important;padding:4px 9px!important;}
.home-section--soft#mario .home-attr{gap:12px!important;max-width:none!important;}
}
@media(max-width:480px){
.home-section--soft#mario .home-h2{font-size:clamp(32px,12vw,44px)!important;}
.home-section--soft#mario .home-mario-body p{font-size:15px!important;}
.home-section--soft#mario .home-attr{
flex-direction:column!important;
align-items:center!important;
text-align:center!important;
gap:10px!important;
}
.home-section--soft#mario .home-attr__avatar{box-shadow:3px 3px 0 #000!important;}
.home-section--soft#mario a.btn-red{box-shadow:4px 4px 0 #000!important;}
}
/* --- SECTION: process --- */
/* SECTION: process — ELEVATION
Intended look: A solid-black industrial assembly line. Red eyebrow rule + heavy uppercase
white headline. Four tool-crate step cards (white face, 2px black border, hard red offset
shadow) marching down the band, each pinned to a big SHARP red square number badge. A red
vertical track/rule threads the badges 1>2>3>4 into one unmistakable sequence.
Contrast: band forced #000; all card faces white with #111 titles + #2a2a2a body (dark-on-light);
number badges are white digits on red; eyebrow/lede forced white/grey on black. Nothing inherits. */
/* ===== BAND ===== */
#process.home-section {
background: #000 !important;
border-top: 2px solid #d5160c !important;
border-bottom: 2px solid #000 !important;
padding: 96px 24px !important;
position: relative !important;
overflow: hidden !important;
}
#process .home-section__inner,
#process .home-section__inner--narrow {
position: relative !important;
z-index: 1 !important;
max-width: 920px !important;
margin: 0 auto !important;
}
/* ===== HEADER ===== */
#process .home-eyebrow {
display: inline-block !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: #fff !important;
background: #d5160c !important;
padding: 7px 14px 6px !important;
margin: 0 0 20px !important;
border-radius: 0 !important;
}
#process .home-h2 {
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: -.01em !important;
line-height: .95 !important;
font-size: clamp(34px, 5.4vw, 62px) !important;
color: #fff !important;
margin: 0 0 18px !important;
}
#process .home-h2::after {
content: "" !important;
display: block !important;
width: 64px !important;
height: 5px !important;
background: #d5160c !important;
margin-top: 20px !important;
}
#process .home-lede {
font-family: "Barlow", sans-serif !important;
font-size: 17px !important;
line-height: 1.5 !important;
color: #c4c4c4 !important;
max-width: 540px !important;
margin: 0 0 56px !important;
}
/* ===== TIMELINE / SEQUENCE ===== */
#process .home-timeline {
position: relative !important;
display: flex !important;
flex-direction: column !important;
gap: 26px !important;
padding-left: 0 !important;
text-align: left !important;
}
/* Vertical connecting track threaded through the badge column (badge=64px, centered at 32px) */
#process .home-timeline::before {
content: "" !important;
position: absolute !important;
top: 32px !important;
bottom: 32px !important;
left: 31px !important;
width: 4px !important;
background: #d5160c !important;
z-index: 0 !important;
}
/* ===== STEP (badge + crate card) ===== */
#process .home-step {
position: relative !important;
display: grid !important;
grid-template-columns: 64px 1fr !important;
align-items: stretch !important;
gap: 22px !important;
z-index: 1 !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
/* Big SHARP red square number badge */
#process .home-step__num {
position: relative !important;
z-index: 2 !important;
width: 64px !important;
height: 64px !important;
flex: 0 0 64px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #d5160c !important;
color: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
box-shadow: 5px 5px 0 #000 !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 800 !important;
font-size: 30px !important;
line-height: 1 !important;
letter-spacing: 0 !important;
}
/* Tool-crate step card */
#process .home-step__title,
#process .home-step__body {
position: relative !important;
z-index: 1 !important;
}
#process .home-step > :not(.home-step__num) {
/* no-op guard so stray children sit in column 2 */
grid-column: 2 !important;
}
#process .home-step__title {
grid-column: 2 !important;
margin: 0 !important;
background: #fff !important;
color: #111 !important;
border: 2px solid #000 !important;
border-bottom: 0 !important;
box-shadow: 5px 0 0 #000 !important;
padding: 14px 18px 13px !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: .01em !important;
line-height: 1.02 !important;
font-size: clamp(17px, 2.1vw, 21px) !important;
}
#process .home-step__title::before {
content: "" !important;
display: inline-block !important;
width: 14px !important;
height: 14px !important;
margin-right: 10px !important;
background: #d5160c !important;
vertical-align: baseline !important;
}
#process .home-step__body {
grid-column: 2 !important;
margin: 0 !important;
background: #fff !important;
color: #2a2a2a !important;
border: 2px solid #000 !important;
border-top: 2px solid #e0e0e0 !important;
box-shadow: 5px 5px 0 #000 !important;
padding: 12px 18px 16px !important;
font-family: "Barlow", sans-serif !important;
font-size: 15px !important;
line-height: 1.55 !important;
}
/* "Done" step gets a green-free, on-brand red completed accent on the badge */
#process .home-step--done .home-step__num {
background: #000 !important;
color: #fff !important;
box-shadow: 5px 5px 0 #d5160c !important;
}
/* Hover: lift the crate, tighten the offset */
#process .home-step:hover .home-step__title,
#process .home-step:hover .home-step__body {
transform: translate(-1px, -1px) !important;
box-shadow: 7px 7px 0 #d5160c !important;
transition: transform .12s ease, box-shadow .12s ease !important;
}
#process .home-step:hover .home-step__title {
box-shadow: 7px 0 0 #d5160c !important;
}
#process .home-step__title,
#process .home-step__body {
transition: transform .12s ease, box-shadow .12s ease !important;
}
/* Focus-visible for keyboard users landing on the step */
#process .home-step:focus-within .home-step__title {
outline: 3px solid #d5160c !important;
outline-offset: 2px !important;
}
/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
#process.home-section { padding: 64px 18px !important; }
#process .home-lede { margin-bottom: 40px !important; }
#process .home-timeline { gap: 22px !important; }
#process .home-timeline::before { left: 27px !important; top: 28px !important; bottom: 28px !important; }
#process .home-step {
grid-template-columns: 56px 1fr !important;
gap: 16px !important;
}
#process .home-step__num {
width: 56px !important; height: 56px !important; flex-basis: 56px !important;
font-size: 26px !important; box-shadow: 4px 4px 0 #000 !important;
}
#process .home-step--done .home-step__num { box-shadow: 4px 4px 0 #d5160c !important; }
#process .home-step__title { box-shadow: 4px 0 0 #000 !important; padding: 12px 14px 11px !important; }
#process .home-step__body { box-shadow: 4px 4px 0 #000 !important; padding: 11px 14px 14px !important; }
}
@media (max-width: 480px) {
#process .home-h2 { font-size: clamp(30px, 8vw, 40px) !important; }
#process .home-timeline::before { display: none !important; }
#process .home-step {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
#process .home-step__num {
margin-bottom: -2px !important;
box-shadow: 4px 4px 0 #d5160c !important;
}
#process .home-step--done .home-step__num { box-shadow: 4px 4px 0 #000 !important; }
#process .home-step__title,
#process .home-step__body { grid-column: 1 !important; }
#process .home-step__title { box-shadow: none !important; }
#process .home-step__body { box-shadow: 4px 4px 0 #000 !important; }
}
/* --- SECTION: materials --- */
/* SECTION: materials — ELEVATION
Intended look: White spec-sheet panel. Left: red eyebrow chip + heavy black condensed
"BUILT TO LAST" headline over a red rule + black/red-shadow outline CTA. Right: a stack of
tool-crate material tiles, each with a 2px black border, hard offset shadow, a bold black
icon chip (red emoji on a hairline-bordered square) and an index ghost numeral; on hover/active
the tile lifts off a red offset shadow and the left edge flips to a solid red spine. Confident,
crisp, unmistakably Milwaukee.
Contrast: section is white throughout, so all text is forced dark on white — eyebrow is white
on the red chip; headline/name #000; lede #1a1a1a; lifespan #595959 (>=4.5:1 on white); arrow
+ icon emoji red; the icon chip is white with a black border (emoji never sits on a dark fill).
No light-on-light or dark-on-dark anywhere. Scoped to #materials; !important; responsive. */
#materials{
background:#fff !important;
position:relative !important;
border-top:3px solid #d5160c !important;
overflow:hidden !important;
}
/* faint hazard-corner accent (rare, top-right, behind content) */
#materials::after{
content:"" !important;
position:absolute !important;
top:0 !important;
right:0 !important;
width:140px !important;
height:10px !important;
background:repeating-linear-gradient(135deg,#d5160c 0 14px,#000 14px 28px) !important;
opacity:.16 !important;
pointer-events:none !important;
}
#materials .mat-inner{
position:relative !important;
z-index:1 !important;
align-items:start !important;
}
/* ── LEFT: sticky header column ── */
#materials .mat-sticky .eyebrow{
display:inline-block !important;
background:#d5160c !important;
color:#fff !important;
font-family:var(--ff-display),"Barlow Semi Condensed",sans-serif !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:.14em !important;
font-size:12px !important;
line-height:1 !important;
padding:7px 14px 6px !important;
border-radius:0 !important;
box-shadow:4px 4px 0 #000 !important;
margin:0 0 22px !important;
}
#materials .mat-sticky .h2{
position:relative !important;
font-family:var(--ff-display),"Barlow Semi Condensed",sans-serif !important;
text-transform:uppercase !important;
font-weight:800 !important;
letter-spacing:-.015em !important;
line-height:.94 !important;
color:#000 !important;
font-size:clamp(38px,5vw,62px) !important;
padding-bottom:26px !important;
margin:0 0 18px !important;
}
#materials .mat-sticky .h2::after{
content:"" !important;
position:absolute !important;
left:0 !important;
bottom:0 !important;
width:96px !important;
height:7px !important;
background:#d5160c !important;
border-radius:0 !important;
}
#materials .mat-sticky .body-lg{
color:#1a1a1a !important;
font-family:var(--ff-body),"Barlow",sans-serif !important;
line-height:1.55 !important;
max-width:400px !important;
}
#materials .mat-sticky .btn-outline{
display:inline-flex !important;
align-items:center !important;
min-height:48px !important;
padding:13px 28px !important;
font-family:var(--ff-display),"Barlow Semi Condensed",sans-serif !important;
text-transform:uppercase !important;
font-weight:700 !important;
letter-spacing:.06em !important;
font-size:15px !important;
color:#000 !important;
background:#fff !important;
border:2px solid #000 !important;
border-radius:0 !important;
box-shadow:5px 5px 0 #d5160c !important;
transition:transform .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease !important;
}
#materials .mat-sticky .btn-outline:hover{
background:#d5160c !important;
border-color:#d5160c !important;
color:#fff !important;
transform:translate(-2px,-2px) !important;
box-shadow:7px 7px 0 #000 !important;
}
#materials .mat-sticky .btn-outline:focus-visible{
outline:3px solid #d5160c !important;
outline-offset:3px !important;
}
/* ── RIGHT: material tile crate ── */
#materials .mat-list{
display:flex !important;
flex-direction:column !important;
gap:14px !important;
margin-top:56px !important;
counter-reset:mat !important;
}
#materials .mat-row{
counter-increment:mat !important;
position:relative !important;
display:flex !important;
align-items:center !important;
gap:18px !important;
background:#fff !important;
border:2px solid #000 !important;
border-left-width:6px !important;
border-radius:0 !important;
box-shadow:6px 6px 0 #000 !important;
padding:18px 22px !important;
overflow:hidden !important;
transition:transform .18s cubic-bezier(.2,.7,.3,1),
box-shadow .18s cubic-bezier(.2,.7,.3,1),
border-color .15s ease !important;
}
/* ghost index numeral for depth — sits behind, never blocks text */
#materials .mat-row::before{
content:counter(mat,decimal-leading-zero) !important;
position:absolute !important;
right:14px !important;
bottom:-18px !important;
font-family:var(--ff-display),"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
font-size:78px !important;
line-height:1 !important;
color:#000 !important;
opacity:.05 !important;
pointer-events:none !important;
z-index:0 !important;
}
#materials .mat-row > *{position:relative !important;z-index:1 !important;}
#materials .mat-row:hover,
#materials .mat-row.active{
transform:translate(-3px,-3px) !important;
box-shadow:9px 9px 0 #d5160c !important;
border-color:#000 !important;
border-left-color:#d5160c !important;
}
/* icon as a bold tool chip: red emoji on white, hard-bordered square */
#materials .mat-icon{
flex:0 0 auto !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:48px !important;
height:48px !important;
background:#fff !important;
border:2px solid #000 !important;
border-radius:0 !important;
font-size:22px !important;
line-height:1 !important;
color:#d5160c !important;
transition:background .15s ease,border-color .15s ease !important;
}
#materials .mat-row:hover .mat-icon,
#materials .mat-row.active .mat-icon{
background:#d5160c !important;
border-color:#d5160c !important;
}
#materials .mat-name{
font-family:var(--ff-display),"Barlow Semi Condensed",sans-serif !important;
text-transform:uppercase !important;
font-weight:800 !important;
letter-spacing:.01em !important;
font-size:18px !important;
line-height:1.05 !important;
color:#000 !important;
}
#materials .mat-life{
font-family:var(--ff-body),"Barlow",sans-serif !important;
color:#595959 !important; /* ~5.9:1 on white */
font-size:13.5px !important;
line-height:1.35 !important;
margin-top:3px !important;
}
#materials .mat-arrow{
margin-left:auto !important;
flex:0 0 auto !important;
color:#d5160c !important;
font-weight:700 !important;
font-size:20px !important;
line-height:1 !important;
transition:transform .15s ease !important;
}
#materials .mat-row:hover .mat-arrow,
#materials .mat-row.active .mat-arrow{transform:translateX(5px) !important;}
#materials .mat-row:focus-visible{
outline:3px solid #d5160c !important;
outline-offset:3px !important;
}
/* ── RESPONSIVE ── */
@media (max-width:768px){
#materials .mat-sticky{position:static !important;}
#materials .mat-list{margin-top:36px !important;gap:12px !important;}
#materials .mat-sticky .h2{font-size:clamp(34px,9vw,46px) !important;}
#materials::after{width:96px !important;}
#materials .mat-row{padding:16px 18px !important;gap:14px !important;box-shadow:5px 5px 0 #000 !important;}
#materials .mat-row::before{font-size:60px !important;right:10px !important;}
}
@media (max-width:480px){
#materials .mat-icon{width:42px !important;height:42px !important;font-size:19px !important;}
#materials .mat-name{font-size:16px !important;}
#materials .mat-life{font-size:12.5px !important;}
#materials .mat-sticky .btn-outline{width:100% !important;justify-content:center !important;}
#materials .mat-row::before{display:none !important;} /* avoid crowding on tiny screens */
}
/* --- SECTION: reviews-frame --- */
/* SECTION: reviews-frame — ELEVATION (scope: #reviews non-card elements)
Intended look: RED band (#d5160c) with hazard-stripe top. Black eyebrow chip
with a red square marker; white UPPERCASE condensed title over a black+red
split accent rule. The 4.9★ summary becomes a bold HERO-STAT row of solid
BLACK tiles with hard red offset shadows — giant condensed white numerals,
RED stars, grey labels — punching hard off the red. CTA = solid black crate
button with red offset shadow that inverts to red on hover.
Contrast: band is red, so every framed element forces its own colors. Title/
lead = #fff on red. Stat tiles are BLACK, so numerals=#fff, stars=#d5160c,
labels=#9c9c9c — all high-contrast on black, never red-on-red. Eyebrow=#fff
on #000. CTA text=#fff on #000 (hover #fff on #d5160c). No inheritance assumed.
Cards (.review-card) are out of scope and untouched. */
/* ── Band: keep solid red + hazard-stripe top, sharpen rhythm ───────────── */
#reviews.reviews-redesign{
background:#d5160c !important;
color:#fff !important;
position:relative !important;
border-top:none !important;
isolation:isolate !important;
overflow:hidden !important;
}
#reviews.reviews-redesign::before{
content:"" !important;
position:absolute !important;
top:0 !important; left:0 !important; right:0 !important;
height:8px !important;
background:repeating-linear-gradient(45deg,#000 0 14px,#d5160c 14px 28px) !important;
z-index:1 !important;
}
/* ── Header rhythm ──────────────────────────────────────────────────────── */
#reviews.reviews-redesign .reviews-header{
text-align:center !important;
max-width:760px !important;
margin:0 auto !important;
}
/* ── 1. Eyebrow = black chip + RED square marker ────────────────────────── */
#reviews.reviews-redesign .reviews-eyebrow{
display:inline-flex !important;
align-items:center !important;
gap:9px !important;
background:#000 !important;
color:#fff !important;
font-family:'Barlow Semi Condensed','Barlow',system-ui,sans-serif !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:.16em !important;
font-size:12px !important;
line-height:1 !important;
padding:8px 14px !important;
border-radius:0 !important; /* zero-radius / sharp */
border:2px solid #000 !important;
margin:0 0 20px !important;
}
#reviews.reviews-redesign .reviews-eyebrow::before{
content:"" !important;
width:9px !important;
height:9px !important;
background:#d5160c !important; /* red accent marker — reads on black */
display:inline-block !important;
flex:0 0 auto !important;
}
/* ── 2. Title = white UPPERCASE condensed + black/red split rule ────────── */
#reviews.reviews-redesign .reviews-title{
color:#fff !important;
font-family:'Barlow Semi Condensed','Barlow',system-ui,sans-serif !important;
text-transform:uppercase !important;
font-weight:800 !important;
letter-spacing:-.01em !important;
line-height:.98 !important;
font-size:clamp(34px,5vw,60px) !important;
position:relative !important;
padding-bottom:24px !important;
margin:0 0 18px !important;
}
#reviews.reviews-redesign .reviews-title::after{
content:"" !important;
display:block !important;
width:88px !important;
height:6px !important;
/* black+red split bar: a hard Milwaukee accent that survives the red band */
background:linear-gradient(90deg,#000 0 60%,#fff 60% 100%) !important;
border-radius:0 !important;
margin:24px auto 0 !important;
}
#reviews.reviews-redesign .reviews-lead{
color:#fff !important;
opacity:.96 !important;
font-family:'Barlow',system-ui,sans-serif !important;
font-size:clamp(15px,1.4vw,18px) !important;
line-height:1.5 !important;
max-width:560px !important;
margin:0 auto !important;
}
/* ── 3. HERO STAT ROW = solid BLACK tiles, hard red offset shadow ───────── */
#reviews.reviews-redesign .reviews-stats{
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
gap:18px !important;
border:0 !important; /* kill the thin border strip */
padding:0 !important;
margin:40px auto 0 !important;
max-width:780px !important;
}
#reviews.reviews-redesign .reviews-stats>div{
flex:1 1 200px !important;
min-width:180px !important;
background:#000 !important;
border:2px solid #000 !important;
border-radius:0 !important;
box-shadow:7px 7px 0 #d5160c, 7px 7px 0 1px #000 !important; /* red crate shadow, crisp edge */
padding:24px 18px 20px !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
text-align:center !important;
}
/* The big number */
#reviews.reviews-redesign .reviews-stats b{
color:#fff !important;
font-family:'Barlow Semi Condensed','Barlow',system-ui,sans-serif !important;
font-weight:800 !important;
font-size:clamp(52px,7vw,76px) !important;
line-height:.85 !important;
letter-spacing:-.02em !important;
display:flex !important;
align-items:baseline !important;
justify-content:center !important;
gap:6px !important;
}
/* RED star — high contrast on the black tile (never red-on-red) */
#reviews.reviews-redesign .reviews-stats b .star{
color:#d5160c !important;
font-size:.62em !important;
line-height:1 !important;
transform:translateY(-.04em) !important;
}
/* The % superscript on "99%" */
#reviews.reviews-redesign .reviews-stats b sup{
color:#9c9c9c !important;
font-size:.42em !important;
font-weight:700 !important;
top:-.05em !important;
margin-left:1px !important;
}
/* Grey caption label under each number */
#reviews.reviews-redesign .reviews-stats>div>span{
color:#9c9c9c !important;
font-family:'Barlow Semi Condensed','Barlow',system-ui,sans-serif !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:.14em !important;
font-size:11px !important;
line-height:1.25 !important;
margin-top:12px !important;
/* thin red rule above the label for a hard detail */
padding-top:12px !important;
border-top:2px solid #d5160c !important;
}
/* ── 4. Grid container (layout only; cards owned elsewhere) ─────────────── */
#reviews.reviews-redesign .reviews-grid{
margin-top:clamp(44px,5vw,64px) !important;
}
/* ── 5. CTA = solid BLACK crate button w/ red offset shadow ─────────────── */
#reviews.reviews-redesign .reviews-cta{
text-align:center !important;
margin-top:clamp(40px,5vw,56px) !important;
}
#reviews.reviews-redesign .reviews-cta a{
display:inline-flex !important;
align-items:center !important;
gap:10px !important;
background:#000 !important;
color:#fff !important;
border:2px solid #000 !important;
border-bottom:2px solid #000 !important; /* override stray underline rule */
border-radius:0 !important;
box-shadow:6px 6px 0 #fff !important; /* white offset reads on red band */
font-family:'Barlow Semi Condensed','Barlow',system-ui,sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.1em !important;
font-size:15px !important;
line-height:1 !important;
padding:17px 30px !important;
min-height:44px !important;
text-decoration:none !important;
transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease !important;
}
#reviews.reviews-redesign .reviews-cta a:hover{
background:#d5160c !important;
border-color:#fff !important;
border-bottom-color:#fff !important;
box-shadow:9px 9px 0 #000 !important;
transform:translate(-3px,-3px) !important;
color:#fff !important;
}
#reviews.reviews-redesign .reviews-cta a:focus-visible{
outline:3px solid #fff !important;
outline-offset:3px !important;
}
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:768px){
#reviews.reviews-redesign .reviews-stats{
gap:16px !important;
margin-top:32px !important;
}
#reviews.reviews-redesign .reviews-stats>div{
flex:1 1 100% !important;
box-shadow:5px 5px 0 #d5160c, 5px 5px 0 1px #000 !important;
padding:20px 16px 18px !important;
}
#reviews.reviews-redesign .reviews-stats b{
font-size:clamp(48px,16vw,64px) !important;
}
#reviews.reviews-redesign .reviews-title{
font-size:clamp(30px,8vw,44px) !important;
}
}
@media (max-width:480px){
#reviews.reviews-redesign .reviews-eyebrow{ letter-spacing:.12em !important; }
#reviews.reviews-redesign .reviews-cta a{
width:100% !important;
justify-content:center !important;
box-shadow:5px 5px 0 #fff !important;
padding:16px 20px !important;
}
}
/* --- SECTION: reviews-cards --- */
/* SECTION: reviews-cards — ELEVATION
Intended look: Each review is a Milwaukee tool-crate — solid WHITE card, 2px solid
black border, sharp zero-radius corners, hard 8px black offset shadow that snaps to
a red offset on hover (card lifts up/left). RED solid stars (#d5160c). A faint ghost
quote-mark watermark for depth. Confident dark body quote. Byline gets a short red
vertical rule + black uppercase name and grey city. Source (Google/GuildQuality) is a
tiny black uppercase tag, top-right, with a red dot.
Contrast: Card body is white, so all text is forced near-black (#0a0a0a name/quote,
#6e6e6e city) — never light text on white. Stars are red on white. Source tag is white
text on a solid black chip. Avatar is white letter on solid black. Every value !important
to override the existing stack. Tap targets / no layout shift preserved. */
/* ---- CARD CRATE ---- */
#reviews .review-card {
position: relative !important;
display: flex !important;
flex-direction: column !important;
background: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
box-shadow: 8px 8px 0 #000 !important;
padding: 30px 28px 26px !important;
overflow: hidden !important;
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}
/* red top rule reading as a tool-crate label strip */
#reviews .review-card::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 56px !important;
height: 5px !important;
background: #d5160c !important;
z-index: 3 !important;
}
#reviews .review-card:hover,
#reviews .review-card:focus-within {
transform: translate(-4px, -4px) !important;
box-shadow: 12px 12px 0 #d5160c !important;
border-color: #000 !important;
}
/* ---- GHOST QUOTE MARK (depth watermark) ---- */
#reviews .review-card .review-quote-mark {
position: absolute !important;
top: -18px !important;
right: 8px !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: 120px !important;
line-height: 1 !important;
font-weight: 800 !important;
color: rgba(0, 0, 0, 0.06) !important;
z-index: 0 !important;
pointer-events: none !important;
}
/* ---- STARS (RED, solid) ---- */
#reviews .review-card .review-stars {
position: relative !important;
z-index: 2 !important;
display: flex !important;
gap: 3px !important;
margin: 4px 0 16px !important;
}
#reviews .review-card .review-stars svg {
width: 19px !important;
height: 19px !important;
display: block !important;
fill: #d5160c !important;
}
#reviews .review-card .review-stars svg path {
fill: #d5160c !important;
}
/* ---- QUOTE TEXT (confident, dark on white) ---- */
#reviews .review-card .review-text {
position: relative !important;
z-index: 2 !important;
flex: 1 1 auto !important;
margin: 0 0 22px !important;
color: #0a0a0a !important;
font-family: "Barlow", sans-serif !important;
font-size: 17px !important;
line-height: 1.5 !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
}
/* ---- AUTHOR ROW ---- */
#reviews .review-card .review-author {
position: relative !important;
z-index: 2 !important;
display: flex !important;
align-items: center !important;
gap: 13px !important;
margin-top: auto !important;
padding-top: 18px !important;
border-top: 2px solid #000 !important;
}
/* avatar: solid black square-ish chip, white letter */
#reviews .review-card .review-avatar {
flex: 0 0 auto !important;
width: 46px !important;
height: 46px !important;
border-radius: 0 !important;
background: #000 !important;
color: #fff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 800 !important;
font-size: 21px !important;
text-transform: uppercase !important;
border: 2px solid #000 !important;
}
/* byline block with a short red vertical rule */
#reviews .review-card .review-author-text {
position: relative !important;
padding-left: 12px !important;
min-width: 0 !important;
}
#reviews .review-card .review-author-text::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 2px !important;
bottom: 2px !important;
width: 3px !important;
background: #d5160c !important;
}
#reviews .review-card .review-name {
color: #0a0a0a !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 800 !important;
font-size: 17px !important;
line-height: 1.1 !important;
text-transform: uppercase !important;
letter-spacing: 0.01em !important;
}
#reviews .review-card .review-city {
color: #6e6e6e !important;
font-family: "Barlow", sans-serif !important;
font-weight: 600 !important;
font-size: 12.5px !important;
line-height: 1.25 !important;
margin-top: 3px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
}
/* ---- SOURCE TAG (Google / GuildQuality) ---- */
#reviews .review-card .review-source {
position: absolute !important;
top: 14px !important;
right: 14px !important;
z-index: 3 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: #000 !important;
color: #fff !important;
border-radius: 0 !important;
padding: 5px 9px !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
font-size: 10.5px !important;
line-height: 1 !important;
text-transform: uppercase !important;
letter-spacing: 0.07em !important;
white-space: nowrap !important;
}
#reviews .review-card .review-source::before {
content: "" !important;
width: 6px !important;
height: 6px !important;
border-radius: 0 !important;
background: #d5160c !important;
flex: 0 0 auto !important;
}
/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
#reviews .review-card {
padding: 26px 22px 22px !important;
box-shadow: 6px 6px 0 #000 !important;
}
#reviews .review-card:hover,
#reviews .review-card:focus-within {
transform: translate(-3px, -3px) !important;
box-shadow: 9px 9px 0 #d5160c !important;
}
#reviews .review-card .review-quote-mark {
font-size: 96px !important;
top: -14px !important;
}
#reviews .review-card .review-text {
font-size: 16px !important;
}
}
@media (max-width: 480px) {
#reviews .review-card {
padding: 24px 20px 20px !important;
box-shadow: 5px 5px 0 #000 !important;
}
#reviews .review-card .review-source {
top: 12px !important;
right: 12px !important;
font-size: 10px !important;
padding: 4px 8px !important;
}
#reviews .review-card .review-avatar {
width: 42px !important;
height: 42px !important;
font-size: 19px !important;
}
#reviews .review-card .review-name {
font-size: 16px !important;
}
}
/* --- SECTION: projects --- */
/* SECTION: projects — ELEVATION (#recent-projects / .hd-projects)
Intended look: A confident white "tool-crate" gallery of real before/after roofs.
Heavy uppercase Barlow Semi Condensed header with a red year-style rule + black
eyebrow block. Each pair sits in a sharp 2px black frame with a hard 7px offset
shadow that snaps to red and lifts on hover. A bold 3px red center seam splits
BEFORE | AFTER; crisp corner stamps (white-on-black "BEFORE", white-on-red
"AFTER") with hard shadows. A solid black caption bar carries an UPPERCASE white
city + grey service line under a red top rule. One dominant red CTA. Photos stay
full natural color — NO red duotone.
Contrast: header text forced #000 on white; eyebrow #fff on #000; stamps #fff on
#000 / #d5160c; caption city #fff + service #d6d6d6 on #000; CTA #fff on #d5160c
(and #fff on #000 hover). Every band sets its own child text colors — nothing is
left to inherit. Stamps & seam carry hard shadows so they read over any photo.
Scoped: every selector starts with #recent-projects. Responsive: 960 / 700 / 600
/ 380px. Tap targets >=44px; no layout shift (matches existing aspect-ratio/grid).
============================================================================ */
/* ---------- SECTION SHELL ---------- */
#recent-projects.hd-projects{
background:#fff!important;
border-top:4px solid #000!important;
border-bottom:4px solid #000!important;
position:relative!important;
overflow:hidden!important;
scroll-margin-top:96px!important; /* clear sticky nav — fixes clipped header */
}
/* top hazard stripe — rare red/black diagonal accent */
#recent-projects.hd-projects::before{
content:""!important;position:absolute!important;top:0!important;left:0!important;right:0!important;
height:7px!important;z-index:3!important;
background:repeating-linear-gradient(135deg,#d5160c 0 16px,#000 16px 32px)!important;
}
/* faint ghost rule for depth at the foot of the band */
#recent-projects.hd-projects::after{
content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;
height:4px!important;background:#d5160c!important;opacity:.9!important;z-index:2!important;
}
#recent-projects .hd-projects__inner{max-width:1200px!important;margin:0 auto!important;position:relative!important;z-index:1!important}
/* ---------- HEAD ---------- */
#recent-projects .hd-projects__head{
max-width:820px!important;margin:0 auto clamp(40px,5vw,64px)!important;text-align:center!important;
}
#recent-projects .hd-projects__eyebrow{
display:inline-block!important;margin:0 0 20px!important;
background:#000!important;color:#fff!important;
font-family:"Barlow Semi Condensed","Barlow",system-ui,sans-serif!important;
font-weight:800!important;font-size:13px!important;letter-spacing:.2em!important;text-transform:uppercase!important;
padding:8px 16px!important;border-radius:0!important;line-height:1!important;
border:2px solid #000!important;box-shadow:3px 3px 0 #d5160c!important;
}
#recent-projects .hd-projects__title{
margin:0!important;color:#000!important;
font-family:"Barlow Semi Condensed","Barlow",system-ui,sans-serif!important;
font-weight:800!important;text-transform:uppercase!important;
font-size:clamp(40px,6.2vw,76px)!important;line-height:.92!important;letter-spacing:-.015em!important;
text-wrap:balance!important;
}
/* heavier red rule under the heading */
#recent-projects .hd-projects__bar{
display:block!important;width:96px!important;height:8px!important;background:#d5160c!important;
margin:24px auto 0!important;border-radius:0!important;
}
#recent-projects .hd-projects__lede{
margin:24px auto 0!important;max-width:620px!important;color:#2a2a2a!important;
font-family:"Barlow",system-ui,sans-serif!important;
font-size:clamp(15px,1.6vw,18px)!important;line-height:1.6!important;font-weight:500!important;
}
/* ---------- GRID ---------- */
#recent-projects .hd-projects__grid{
display:grid!important;grid-template-columns:repeat(3,1fr)!important;
gap:clamp(20px,2.4vw,30px)!important;
}
/* ---------- TOOL-CRATE CARD ---------- */
#recent-projects .hd-proj{
background:#fff!important;
border:2px solid #000!important;
border-radius:0!important;
box-shadow:7px 7px 0 #000!important;
overflow:hidden!important;
transition:transform .16s ease, box-shadow .16s ease!important;
}
#recent-projects .hd-proj:hover,
#recent-projects .hd-proj:focus-within{
transform:translate(-3px,-3px)!important;
box-shadow:11px 11px 0 #d5160c!important;
}
/* before|after pair, split by a bold red center seam */
#recent-projects .hd-proj__pair{
display:grid!important;grid-template-columns:1fr 1fr!important;gap:0!important;
background:#000!important;position:relative!important;
}
/* the seam itself: a hard 3px red line dead-center, above the photos */
#recent-projects .hd-proj__pair::after{
content:""!important;position:absolute!important;top:0!important;bottom:0!important;left:50%!important;
width:3px!important;transform:translateX(-50%)!important;
background:#d5160c!important;z-index:3!important;pointer-events:none!important;
}
#recent-projects .hd-proj__shot{
position:relative!important;margin:0!important;
aspect-ratio:3/4!important;overflow:hidden!important;background:#9c9c9c!important;
}
#recent-projects .hd-proj__shot--before{border-right:0!important}
#recent-projects .hd-proj__shot img{
display:block!important;width:100%!important;height:100%!important;
object-fit:cover!important;object-position:center!important;
filter:none!important; /* NO red duotone — natural color only */
transition:transform .35s ease!important;
}
#recent-projects .hd-proj:hover .hd-proj__shot img{transform:scale(1.04)!important}
/* ---------- BEFORE / AFTER corner stamps ---------- */
#recent-projects .hd-proj__stamp{
position:absolute!important;top:10px!important;left:10px!important;z-index:4!important;
font-family:"Barlow Semi Condensed","Barlow",system-ui,sans-serif!important;
font-weight:800!important;font-size:12px!important;letter-spacing:.16em!important;text-transform:uppercase!important;
color:#fff!important;padding:6px 11px!important;border-radius:0!important;line-height:1!important;
border:2px solid #fff!important;box-shadow:3px 3px 0 rgba(0,0,0,.7)!important;
}
#recent-projects .hd-proj__stamp--before{background:#000!important;color:#fff!important}
/* AFTER sits in the right half */
#recent-projects .hd-proj__stamp--after{
background:#d5160c!important;color:#fff!important;
left:auto!important;right:10px!important;
box-shadow:3px 3px 0 rgba(0,0,0,.55)!important;
}
/* ---------- BLACK CAPTION BAR: city + service ---------- */
#recent-projects .hd-proj__cap{
display:flex!important;flex-direction:column!important;gap:4px!important;
background:#000!important;color:#fff!important;
padding:15px 17px!important;
border-top:3px solid #d5160c!important;
}
#recent-projects .hd-proj__city{
font-family:"Barlow Semi Condensed","Barlow",system-ui,sans-serif!important;
font-weight:800!important;font-size:19px!important;letter-spacing:.015em!important;
text-transform:uppercase!important;color:#fff!important;line-height:1.05!important;
}
#recent-projects .hd-proj__svc{
font-family:"Barlow",system-ui,sans-serif!important;
font-size:12.5px!important;font-weight:700!important;letter-spacing:.1em!important;
text-transform:uppercase!important;color:#d6d6d6!important;line-height:1.2!important;
}
/* ---------- CTA ---------- */
#recent-projects .hd-projects__cta{text-align:center!important;margin-top:clamp(40px,5vw,60px)!important}
#recent-projects .hd-projects__btn{
display:inline-block!important;
background:#d5160c!important;color:#fff!important;
font-family:"Barlow Semi Condensed","Barlow",system-ui,sans-serif!important;
font-weight:800!important;font-size:17px!important;letter-spacing:.08em!important;text-transform:uppercase!important;
padding:17px 38px!important;min-height:44px!important;border-radius:0!important;text-decoration:none!important;
border:2px solid #000!important;box-shadow:5px 5px 0 #000!important;
transition:transform .16s ease, box-shadow .16s ease, background .16s ease!important;
}
#recent-projects .hd-projects__btn:hover{
background:#000!important;color:#fff!important;
transform:translate(-3px,-3px)!important;box-shadow:7px 7px 0 #d5160c!important;
}
#recent-projects .hd-projects__btn:focus-visible{
outline:3px solid #000!important;outline-offset:3px!important;
}
/* ============================================================================
RESPONSIVE
============================================================================ */
@media(max-width:960px){
#recent-projects .hd-projects__grid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:768px){
#recent-projects.hd-projects{scroll-margin-top:72px!important}
#recent-projects .hd-projects__title{font-size:clamp(38px,9vw,58px)!important}
#recent-projects .hd-proj__stamp{font-size:11px!important;padding:5px 9px!important}
#recent-projects .hd-proj__city{font-size:18px!important}
}
@media(max-width:600px){
#recent-projects .hd-projects__grid{grid-template-columns:1fr!important;gap:22px!important}
/* single column: cards get more room — keep stamps & caption proportional */
#recent-projects .hd-proj__city{font-size:20px!important}
#recent-projects .hd-projects__btn{display:block!important;width:100%!important;box-sizing:border-box!important}
}
@media(max-width:380px){
#recent-projects .hd-proj{box-shadow:5px 5px 0 #000!important}
#recent-projects .hd-proj__stamp{font-size:10px!important;letter-spacing:.1em!important;padding:4px 7px!important;top:8px!important}
#recent-projects .hd-proj__stamp--before{left:8px!important}
#recent-projects .hd-proj__stamp--after{right:8px!important}
#recent-projects .hd-proj__city{font-size:18px!important}
#recent-projects .hd-proj__svc{font-size:11.5px!important;letter-spacing:.08em!important}
}
/* reduced-motion: kill the zoom & lift transitions, keep the static styling */
@media(prefers-reduced-motion:reduce){
#recent-projects .hd-proj,
#recent-projects .hd-proj__shot img,
#recent-projects .hd-projects__btn{transition:none!important}
#recent-projects .hd-proj:hover .hd-proj__shot img{transform:none!important}
}
/* --- SECTION: coverage --- */
/* SECTION: coverage — ELEVATION
Intended look: a bold red coverage band turned into a tool-crate map. Black "SERVICE AREA"
block eyebrow with a white rule, heavy uppercase condensed headline, a steel stat-gauge readout
(52 / 15 / 3) in black-bordered cells, and city links as sharp white crate tiles with red
location-pin dots, 2px black borders + hard black offset shadows that snap on hover. Map sits in
a black-bordered crate with a black/red badge. Combo-CTA recolored from off-palette gradient to a
sharp black crate with a white headline and one dominant red button.
Contrast: red band -> all headline/lead/labels/stat text FORCED #fff. White tiles & black crate ->
text FORCED #000 (tiles) / #fff (black crate). Red button -> #fff. No dark-on-dark or light-on-light;
every dot/pin is solid red on white or solid white on black. */
/* ---- BAND + TOP HAZARD ACCENT (keep red band, sharpen edge) ---- */
#coverage.area-redesign{background:#d5160c!important;color:#fff!important;position:relative!important;border-top:3px solid #000!important;border-bottom:3px solid #000!important}
#coverage.area-redesign::before{content:""!important;position:absolute!important;top:0!important;left:0!important;right:0!important;height:8px!important;background:repeating-linear-gradient(45deg,#000 0 16px,#d5160c 16px 32px)!important;z-index:3!important}
#coverage .area-inner{max-width:1200px!important;margin:0 auto!important;position:relative!important;z-index:2!important}
/* ---- EYEBROW: solid black block + white rule ---- */
#coverage .area-eyebrow{display:inline-block!important;background:#000!important;color:#fff!important;font-family:var(--ff-display,"Barlow Semi Condensed",sans-serif)!important;font-size:13px!important;font-weight:800!important;letter-spacing:.18em!important;text-transform:uppercase!important;padding:7px 14px 6px!important;margin:0 0 18px!important;border-radius:0!important;box-shadow:4px 4px 0 #000!important;border:2px solid #000!important;line-height:1!important}
/* ---- HEADLINE: heavy condensed uppercase, white, red underbar ---- */
#coverage .area-title{font-family:var(--ff-display,"Barlow Semi Condensed",sans-serif)!important;font-size:clamp(40px,6.5vw,68px)!important;font-weight:800!important;letter-spacing:-.01em!important;line-height:.95!important;text-transform:uppercase!important;color:#fff!important;margin:0 0 18px!important;text-wrap:balance!important}
#coverage .area-title::after{content:""!important;display:block!important;width:64px!important;height:6px!important;background:#000!important;margin-top:16px!important;border-radius:0!important}
/* ---- LEAD: forced white on red ---- */
#coverage .area-lead{font-family:var(--ff-body,"Barlow",sans-serif)!important;font-size:17px!important;line-height:1.55!important;color:#fff!important;opacity:.95!important;margin:0 0 32px!important;max-width:560px!important}
/* ---- STAT GAUGE: black-bordered cells on a black bar ---- */
#coverage .area-stats{display:flex!important;gap:0!important;margin:0 0 34px!important;padding:0!important;border:3px solid #000!important;border-radius:0!important;background:#000!important;box-shadow:6px 6px 0 #000!important;overflow:hidden!important;max-width:560px!important}
#coverage .area-stat{flex:1!important;padding:18px 18px 16px!important;background:#000!important;text-align:left!important;border-right:2px solid #d5160c!important}
#coverage .area-stat:last-child{border-right:0!important}
#coverage .area-stat b{display:block!important;font-family:var(--ff-display,"Barlow Semi Condensed",sans-serif)!important;font-size:40px!important;font-weight:800!important;letter-spacing:-.01em!important;color:#fff!important;line-height:1!important;margin:0 0 6px!important}
#coverage .area-stat span{font-family:var(--ff-display,"Barlow Semi Condensed",sans-serif)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#d5160c!important;opacity:1!important}
/* ---- "MOST-SERVED CITIES" LABEL ---- */
#coverage .area-top-cities-label{font-family:var(--ff-display,"Barlow Semi Condensed",sans-serif)!important;font-size:12px!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:#fff!important;opacity:1!important;margin:0 0 14px!important;padding-left:12px!important;border-left:5px solid #000!important;line-height:1.1!important}
/* ---- CITY TILES: sharp white crates, red pins, hard offset, snap hover ---- */
#coverage .area-top-cities{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:10px!important;margin:0 0 30px!important}
#coverage .area-city-pill{display:flex!important;align-items:center!important;gap:9px!important;min-height:46px!important;padding:11px 14px!important;background:#fff!important;border:2px solid #000!important;border-radius:0!important;box-shadow:4px 4px 0 #000!important;font-family:var(--ff-display,"Barlow Semi Condensed",sans-serif)!important;font-size:15px!important;font-weight:700!important;letter-spacing:.01em!important;text-transform:uppercase!important;color:#000!important;text-decoration:none!important;transition:transform .12s ease,box-shadow .12s ease,background .12s ease,color .12s ease!important}
#coverage .area-city-pill *{color:#000!important}
/* red location-pin marker (teardrop) instead of round dot */
#coverage .area-city-pill .area-city-pill-dot{flex:0 0 auto!important;width:11px!important;height:11px!important;background:#d5160c!important;border:0!important;border-radius:50% 50% 50% 0!important;transform:rotate(-45deg)!important;opacity:1!important;box-shadow:none!important}
#coverage .area-city-pill:hover,#coverage .area-city-pill:focus-visible{background:#d5160c!important;color:#fff!important;transform:translate(-2px,-2px)!important;box-shadow:6px 6px 0 #000!important;outline:none!important}
#coverage .area-city-pill:hover *,#coverage .area-city-pill:focus-visible *{color:#fff!important}
#coverage .area-city-pill:hover .area-city-pill-dot,#coverage .area-city-pill:focus-visible .area-city-pill-dot{background:#fff!important}
#coverage .area-city-pill:focus-visible{outline:3px solid #000!important;outline-offset:2px!important}
#coverage .area-city-pill:active{transform:translate(0,0)!important;box-shadow:2px 2px 0 #000!important}
/* "+ N more" tile reads as a black crate */
#coverage .area-city-pill.area-city-pill-more{background:#000!important;border:2px solid #000!important;color:#fff!important}
#coverage .area-city-pill.area-city-pill-more *{color:#fff!important}
#coverage .area-city-pill.area-city-pill-more .area-city-pill-dot{background:#d5160c!important}
/* ---- PRIMARY CTA: black crate button, snap hover ---- */
#coverage .area-cta-row{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:16px!important;margin:0!important}
#coverage .area-cta-primary{display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:50px!important;background:#000!important;color:#fff!important;padding:14px 26px!important;border:2px solid #000!important;border-radius:0!important;box-shadow:5px 5px 0 #000!important;font-family:var(--ff-display,"Barlow Semi Condensed",sans-serif)!important;font-size:16px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important;text-decoration:none!important;transition:transform .12s ease,box-shadow .12s ease!important}
#coverage .area-cta-primary,#coverage .area-cta-primary *{color:#fff!important}
#coverage .area-cta-primary:hover,#coverage .area-cta-primary:focus-visible{transform:translate(-2px,-2px)!important;box-shadow:7px 7px 0 #000!important;outline:none!important}
#coverage .area-cta-primary:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important}
#coverage .area-cta-primary:active{transform:translate(0,0)!important;box-shadow:2px 2px 0 #000!important}
/* ---- MAP CRATE: black border, hard shadow, sharp corners ---- */
#coverage .area-map-wrap{position:relative!important;border-radius:0!important;overflow:hidden!important;border:3px solid #000!important;box-shadow:8px 8px 0 #000!important;background:#000!important;min-height:520px!important}
#coverage .area-map-wrap #service-map{width:100%!important;height:520px!important;background:#9c9c9c!important;border-radius:0!important}
#coverage .area-map-badge{position:absolute!important;bottom:0!important;left:0!important;background:#000!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:11px 18px!important;border-radius:0!important;border-top:3px solid #d5160c!important;border-right:3px solid #d5160c!important;font-family:var(--ff-display,"Barlow Semi Condensed",sans-serif)!important;font-size:13px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#fff!important;box-shadow:none!important;z-index:1000!important;pointer-events:none!important}
#coverage .area-map-badge *{color:#fff!important}
/* ---- DIVIDER ---- */
#coverage .area-divider{height:3px!important;background:#000!important;margin:48px 0!important;border:0!important;opacity:1!important}
/* ---- COMBO-CTA: recolor off-palette gradient -> black crate ---- */
#coverage .area-combo-cta{background:#000!important;background-image:none!important;border:3px solid #000!important;border-radius:0!important;box-shadow:8px 8px 0 #000!important;padding:36px 28px!important;max-width:680px!important;margin:48px auto 0!important;text-align:center!important}
#coverage .area-combo-cta p:first-child{font-family:var(--ff-display,"Barlow Semi Condensed",sans-serif)!important;color:#d5160c!important;font-size:13px!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase!important;margin:0 0 10px!important}
#coverage .area-combo-cta h3{font-family:var(--ff-display,"Barlow Semi Condensed",sans-serif)!important;color:#fff!important;font-size:clamp(24px,3.4vw,30px)!important;font-weight:800!important;letter-spacing:-.005em!important;text-transform:uppercase!important;margin:0 0 12px!important;line-height:1!important}
#coverage .area-combo-cta>p:not(:first-child){font-family:var(--ff-body,"Barlow",sans-serif)!important;color:#fff!important;opacity:.9!important;font-size:15px!important;line-height:1.55!important;margin:0 0 22px!important}
#coverage .area-combo-cta a[href]{display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:50px!important;background:#d5160c!important;background-image:none!important;color:#fff!important;padding:14px 28px!important;border:2px solid #fff!important;border-radius:0!important;box-shadow:5px 5px 0 #d5160c!important;font-family:var(--ff-display,"Barlow Semi Condensed",sans-serif)!important;font-size:16px!important;font-weight:800!important;letter-spacing:.06em!important;text-transform:uppercase!important;text-decoration:none!important;transition:transform .12s ease,box-shadow .12s ease!important}
#coverage .area-combo-cta a[href] *{color:#fff!important}
#coverage .area-combo-cta a[href]:hover,#coverage .area-combo-cta a[href]:focus-visible{transform:translate(-2px,-2px)!important;box-shadow:7px 7px 0 #d5160c!important;outline:none!important}
#coverage .area-combo-cta a[href]:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important}
#coverage .area-combo-cta a[href]:active{transform:translate(0,0)!important;box-shadow:2px 2px 0 #d5160c!important}
/* ---- RESPONSIVE ---- */
@media(max-width:768px){
#coverage.area-redesign{padding:64px 20px 72px!important}
#coverage .area-title{font-size:clamp(34px,9vw,48px)!important}
#coverage .area-stats{max-width:none!important;box-shadow:5px 5px 0 #000!important}
#coverage .area-stat b{font-size:34px!important}
#coverage .area-top-cities{grid-template-columns:repeat(2,1fr)!important}
#coverage .area-map-wrap{min-height:380px!important;box-shadow:6px 6px 0 #000!important}
#coverage .area-map-wrap #service-map{height:380px!important}
#coverage .area-combo-cta{box-shadow:6px 6px 0 #000!important;padding:30px 22px!important}
}
@media(max-width:480px){
#coverage .area-eyebrow{box-shadow:3px 3px 0 #000!important}
#coverage .area-stats{flex-direction:column!important}
#coverage .area-stat{border-right:0!important;border-bottom:2px solid #d5160c!important;text-align:center!important}
#coverage .area-stat:last-child{border-bottom:0!important}
#coverage .area-top-cities{grid-template-columns:1fr!important}
#coverage .area-city-pill{box-shadow:3px 3px 0 #000!important}
#coverage .area-cta-primary,#coverage .area-combo-cta a[href]{width:100%!important;justify-content:center!important}
}
/* --- SECTION: related --- */
/* SECTION: related — ELEVATION
Intended look: White band, bold black "COMMON QUESTIONS, ANSWERED." header over a short
red eyebrow + red rule. The 5 prose link-paragraphs become a 2-col grid of sharp, 2px black
link-tiles (zero radius). Each tile shows its real anchor as an UPPERCASE Barlow Semi
Condensed label in a red top bar with a red "→"; supporting prose sits below in grey. Hover
lifts the tile with a hard red offset shadow and flips the bar fully red. Pure Milwaukee:
sharp corners, 2px borders, hard offset shadows, red accents only.
Contrast: forced by construction — header #000 on #fff; eyebrow #d5160c on #fff; tile label
#fff on solid #d5160c bar (and stays #fff on hover); body copy #2b2b2b on #fff; arrow #fff
on red. No dark-on-dark or light-on-light anywhere. */
#cluster1-related-services{
background:#ffffff !important;
border-top:2px solid #000 !important;
padding:clamp(48px,6vw,84px) clamp(20px,5vw,32px) !important;
}
/* Widen the column so two tiles fit comfortably */
#cluster1-related-services > div{
max-width:1040px !important;
margin:0 auto !important;
}
/* ── Header: red eyebrow + bold black headline + red rule ── */
#cluster1-related-services .eyebrow{
display:inline-block !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-size:13px !important;
font-weight:700 !important;
letter-spacing:.16em !important;
text-transform:uppercase !important;
color:#fff !important;
background:#d5160c !important;
padding:5px 12px !important;
border-radius:0 !important;
margin:0 0 16px !important;
}
#cluster1-related-services h2{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-size:clamp(28px,4vw,46px) !important;
font-weight:700 !important;
line-height:.98 !important;
text-transform:uppercase !important;
letter-spacing:-.01em !important;
color:#000 !important;
margin:0 0 14px !important;
position:relative !important;
padding-bottom:18px !important;
}
#cluster1-related-services h2::after{
content:"" !important;
position:absolute !important;
left:0 !important;
bottom:0 !important;
width:64px !important;
height:5px !important;
background:#d5160c !important;
}
/* ── Tiles: each link-paragraph becomes a bordered card ── */
#cluster1-related-services > div{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
gap:18px !important;
align-items:stretch !important;
}
/* eyebrow + h2 span the full grid width */
#cluster1-related-services .eyebrow,
#cluster1-related-services h2{
grid-column:1 / -1 !important;
}
#cluster1-related-services p:not(.eyebrow){
position:relative !important;
display:block !important;
margin:0 !important;
background:#fff !important;
border:2px solid #000 !important;
border-radius:0 !important;
padding:54px 22px 24px !important; /* top room for the red label bar */
font-family:"Barlow",sans-serif !important;
font-size:15px !important;
line-height:1.6 !important;
color:#2b2b2b !important;
box-shadow:0 0 0 #d5160c !important; /* base for hover offset shadow */
transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease !important;
}
/* Red top accent bar on every tile (where the anchor label rides) */
#cluster1-related-services p:not(.eyebrow)::before{
content:"" !important;
position:absolute !important;
top:0 !important; left:0 !important; right:0 !important;
height:0 !important;
border-top:6px solid #d5160c !important;
background:transparent !important;
}
/* ── The real anchor → uppercase condensed label with red arrow ── */
#cluster1-related-services p:not(.eyebrow) a{
position:absolute !important;
top:0 !important; left:0 !important; right:0 !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:10px !important;
min-height:44px !important;
padding:0 16px !important;
background:#d5160c !important;
color:#fff !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-size:14.5px !important;
font-weight:700 !important;
letter-spacing:.05em !important;
line-height:1.12 !important;
text-transform:uppercase !important;
text-decoration:none !important;
border:0 !important;
transition:background .14s ease,color .14s ease !important;
}
#cluster1-related-services p:not(.eyebrow) a::after{
content:"\2192" !important; /* → */
flex:0 0 auto !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:700 !important;
font-size:18px !important;
color:#fff !important;
transform:translateX(0) !important;
transition:transform .14s ease !important;
}
/* ── Hover / focus: lift + hard red offset shadow ── */
#cluster1-related-services p:not(.eyebrow):hover,
#cluster1-related-services p:not(.eyebrow):focus-within{
transform:translate(-3px,-3px) !important;
box-shadow:7px 7px 0 #d5160c !important;
border-color:#000 !important;
}
#cluster1-related-services p:not(.eyebrow):hover a::after,
#cluster1-related-services p:not(.eyebrow):focus-within a::after{
transform:translateX(4px) !important;
}
/* Keyboard focus ring on the anchor itself */
#cluster1-related-services p:not(.eyebrow) a:focus-visible{
outline:3px solid #000 !important;
outline-offset:2px !important;
}
/* ── Responsive ── */
@media (max-width:768px){
#cluster1-related-services > div{
grid-template-columns:1fr !important;
gap:14px !important;
}
#cluster1-related-services p:not(.eyebrow){
padding:52px 18px 22px !important;
font-size:14.5px !important;
}
#cluster1-related-services p:not(.eyebrow) a{
font-size:13.5px !important;
}
}
@media (max-width:480px){
#cluster1-related-services h2{
font-size:clamp(26px,8vw,34px) !important;
}
#cluster1-related-services p:not(.eyebrow) a{
padding:0 12px !important;
letter-spacing:.03em !important;
}
}
/* --- SECTION: contact-info --- */
/* SECTION: contact-info (left panel only) — ELEVATION
Intended look: A huge, confident uppercase Barlow Semi Condensed headline ("LET'S TAKE / A LOOK.")
on white, with a short red eyebrow tab and a thick red underline rule cutting across the last word.
The three contact methods become sharp Milwaukee tool-crate tiles: 2px solid black border, hard
offset black shadow, a square red icon badge (white glyph) at left, and a label/value hierarchy
(tiny grey uppercase label over a heavy black value). Hover lifts the tile and flips the shadow red.
Contrast: white panel -> black headline/values + #6b6b6b grey body/label (all dark-on-light, AA+).
Red eyebrow & red icon badge always carry WHITE text/glyph (light-on-red, forced). Tiles stay
white-bg with black text so no dark-on-dark ever occurs. Every property is !important. Scoped to
#contact left column (.contact-inner > div:first-child) + .way info cards; form untouched. */
/* ---- Left column container (left panel only; never the form card) ---- */
#contact .contact-inner > div:first-child {
position: relative !important;
}
/* ---- Eyebrow: sharp red tool tab ---- */
#contact .contact-inner > div:first-child .eyebrow {
display: inline-block !important;
background: #d5160c !important;
color: #fff !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
line-height: 1 !important;
padding: 7px 12px 8px !important;
border-radius: 0 !important;
margin: 0 0 22px !important;
box-shadow: 4px 4px 0 #000 !important;
}
/* ---- Headline: huge confident condensed, red rule under last word ---- */
#contact .contact-inner > div:first-child .h2 {
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 800 !important;
text-transform: uppercase !important;
color: #000 !important;
font-size: clamp(52px, 6vw, 88px) !important;
line-height: .9 !important;
letter-spacing: -.01em !important;
margin: 0 0 4px !important;
position: relative !important;
}
/* red underline accent beneath the headline block */
#contact .contact-inner > div:first-child .h2::after {
content: "" !important;
display: block !important;
width: 96px !important;
height: 8px !important;
background: #d5160c !important;
margin: 18px 0 0 !important;
}
/* ---- Intro body ---- */
#contact .contact-inner > div:first-child .body-lg {
font-family: "Barlow", sans-serif !important;
color: #565656 !important;
font-size: 16.5px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
margin-top: 22px !important;
max-width: 400px !important;
}
/* ---- Info cards wrapper ---- */
#contact .contact-ways {
display: flex !important;
flex-direction: column !important;
gap: 14px !important;
margin-top: 34px !important;
max-width: 440px !important;
}
/* ---- Tool-crate tile ---- */
#contact .contact-ways .way {
display: flex !important;
align-items: center !important;
gap: 16px !important;
background: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 16px 18px !important;
min-height: 64px !important;
text-decoration: none !important;
box-shadow: 5px 5px 0 #000 !important;
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}
#contact .contact-ways a.way:hover,
#contact .contact-ways a.way:focus-visible {
transform: translate(-3px, -3px) !important;
box-shadow: 8px 8px 0 #d5160c !important;
border-color: #000 !important;
outline: none !important;
}
#contact .contact-ways a.way:focus-visible {
outline: 3px solid #d5160c !important;
outline-offset: 3px !important;
}
/* ---- Red square icon badge (white glyph) ---- */
#contact .contact-ways .way .way-ic {
flex: 0 0 auto !important;
width: 46px !important;
height: 46px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #d5160c !important;
color: #fff !important;
border-radius: 0 !important;
font-size: 20px !important;
line-height: 1 !important;
/* render emoji glyph in solid white for guaranteed contrast on red */
filter: grayscale(1) brightness(0) invert(1) !important;
}
/* ---- Label / value hierarchy ---- */
#contact .contact-ways .way .way-label {
font-family: "Barlow Semi Condensed", sans-serif !important;
text-transform: uppercase !important;
letter-spacing: .14em !important;
font-weight: 700 !important;
font-size: 11px !important;
color: #7a7a7a !important;
line-height: 1 !important;
margin-bottom: 5px !important;
}
#contact .contact-ways .way .way-val {
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
font-size: 19px !important;
letter-spacing: .005em !important;
color: #000 !important;
line-height: 1.1 !important;
word-break: break-word !important;
}
/* ---- Responsive: tablet/mobile ---- */
@media (max-width: 768px) {
#contact .contact-inner > div:first-child .h2 {
font-size: clamp(46px, 13vw, 66px) !important;
}
#contact .contact-inner > div:first-child .h2::after {
width: 72px !important;
height: 7px !important;
margin-top: 14px !important;
}
#contact .contact-inner > div:first-child .body-lg {
font-size: 16px !important;
max-width: 100% !important;
}
#contact .contact-ways {
max-width: 100% !important;
margin-top: 26px !important;
}
/* reduce shadow throw so tiles don't overflow on small screens */
#contact .contact-ways .way {
box-shadow: 4px 4px 0 #000 !important;
}
#contact .contact-ways a.way:hover,
#contact .contact-ways a.way:focus-visible {
transform: translate(-2px, -2px) !important;
box-shadow: 6px 6px 0 #d5160c !important;
}
}
@media (max-width: 480px) {
#contact .contact-inner > div:first-child .eyebrow {
font-size: 11px !important;
margin-bottom: 18px !important;
}
#contact .contact-ways .way {
padding: 14px 14px !important;
gap: 13px !important;
}
#contact .contact-ways .way .way-ic {
width: 42px !important;
height: 42px !important;
font-size: 18px !important;
}
#contact .contact-ways .way .way-val {
font-size: 17px !important;
}
}
/* --- SECTION: contact-form --- */
/* SECTION: contact-form — ELEVATION
Intended look: A tool-crate multi-step lead form. Square white card on a 2px black
frame with a hard red offset shadow. A bold red SEGMENTED step-progress bar (4 chunky
cells, filled cells solid #d5160c). Option cards are sharp 2px-black-bordered white
tiles that snap to solid red + white text on hover/check, with a red corner notch.
Inputs are white with dark text, 2px black borders that turn red with a red focus ring.
The primary button is a solid-red, uppercase, condensed slab that lifts on hover
(offset black shadow). Back button is a ghost black-bordered slab.
Contrast: every field forces #111 text on #fff. Labels/eyebrow/headline forced near-black.
Checked/hover option tiles force #fff text + icon on red. Red button forces #fff label.
Trust/summary text forced to dark-on-light. Nothing inherits a dark-on-dark trap.
Scoped: every selector begins with #contact. Responsive: 768px + 480px. */
/* ---- CARD SHELL (the form card only — left info column untouched) ---- */
#contact .form-card-v4 {
background: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
box-shadow: 10px 10px 0 #000 !important;
padding: 30px 30px 26px !important;
position: relative !important;
overflow: hidden !important;
}
#contact .form-card-v4::before {
content: "" !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important;
height: 6px !important;
background: #d5160c !important;
z-index: 2 !important;
}
/* ---- STEP PROGRESS: chunky red segmented bar ---- */
#contact .fw-progress { margin: 8px 0 22px !important; }
#contact .fw-progress-bar {
position: relative !important;
height: 12px !important;
background: repeating-linear-gradient(
to right,
#e6e6e6 0, #e6e6e6 calc(25% - 4px),
#fff calc(25% - 4px), #fff 25%) !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
overflow: hidden !important;
box-shadow: 3px 3px 0 rgba(0,0,0,.18) !important;
}
#contact .fw-progress-fill {
height: 100% !important;
background: #d5160c !important;
border-radius: 0 !important;
transition: width .35s cubic-bezier(.2,.7,.3,1) !important;
box-shadow: none !important;
/* hard segment seams over the red fill */
-webkit-mask: none !important; mask: none !important;
}
#contact .fw-progress-fill::after {
content: "" !important;
position: absolute !important; inset: 0 !important;
background-image:
linear-gradient(to right, transparent 0, transparent calc(25% - 2px), #000 calc(25% - 2px), #000 25%),
linear-gradient(to right, transparent 0, transparent calc(50% - 2px), #000 calc(50% - 2px), #000 50%),
linear-gradient(to right, transparent 0, transparent calc(75% - 2px), #000 calc(75% - 2px), #000 75%) !important;
pointer-events: none !important;
}
#contact .fw-step-label {
margin-top: 9px !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
font-size: 12.5px !important;
color: #111 !important;
}
#contact .fw-step-label [data-fw-current],
#contact .fw-step-label [data-fw-step-label] { color: #d5160c !important; font-weight: 800 !important; }
/* ---- STEP INTRO TEXT ---- */
#contact .fw-step { animation: none !important; }
#contact .form-eyebrow {
display: inline-flex !important; align-items: center !important; gap: 7px !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
text-transform: uppercase !important; letter-spacing: .1em !important;
font-weight: 700 !important; font-size: 11px !important;
color: #d5160c !important;
background: #fff !important;
border: 2px solid #d5160c !important;
padding: 4px 10px !important;
border-radius: 0 !important;
margin-bottom: 12px !important;
}
#contact .form-eyebrow .form-dot {
width: 7px !important; height: 7px !important; border-radius: 0 !important;
background: #d5160c !important; flex: none !important;
}
#contact .form-headline {
font-family: "Barlow Semi Condensed", sans-serif !important;
text-transform: uppercase !important; letter-spacing: -.01em !important;
font-weight: 800 !important;
font-size: clamp(22px, 3vw, 28px) !important;
line-height: 1.02 !important;
color: #000 !important;
margin: 0 0 6px !important;
}
#contact .form-lede {
font-family: "Barlow", sans-serif !important;
color: #3a3a3a !important;
font-size: 14.5px !important;
line-height: 1.45 !important;
margin: 0 0 18px !important;
max-width: 42ch !important;
}
/* ---- OPTION CARDS (Roof repair / Full replacement / …) ---- */
#contact .fw-options,
#contact .fw-options-six {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
margin-bottom: 22px !important;
}
#contact .fw-option {
position: relative !important;
display: flex !important; align-items: center !important; gap: 12px !important;
background: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 14px 14px !important;
min-height: 64px !important;
cursor: pointer !important;
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease !important;
box-shadow: 4px 4px 0 rgba(0,0,0,.14) !important;
}
#contact .fw-option input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
#contact .fw-option .fw-option-icon {
flex: none !important;
width: 40px !important; height: 40px !important;
display: grid !important; place-items: center !important;
background: #f3f3f3 !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
color: #000 !important;
transition: background-color .12s ease, color .12s ease, border-color .12s ease !important;
}
#contact .fw-option .fw-option-icon svg { stroke: currentColor !important; }
#contact .fw-option .fw-option-label {
font-family: "Barlow Semi Condensed", sans-serif !important;
text-transform: uppercase !important; letter-spacing: .01em !important;
font-weight: 700 !important; font-size: 15px !important;
color: #111 !important; line-height: 1.05 !important;
}
#contact .fw-option .fw-option-sub {
font-family: "Barlow", sans-serif !important;
font-size: 12px !important; color: #6a6a6a !important; margin-top: 2px !important;
}
/* hover */
#contact .fw-option:hover {
transform: translate(-2px, -2px) !important;
box-shadow: 6px 6px 0 #d5160c !important;
border-color: #000 !important;
}
#contact .fw-option:hover .fw-option-icon { background: #d5160c !important; color: #fff !important; border-color: #000 !important; }
/* checked = solid red tile, white text */
#contact .fw-option:has(input:checked) {
background: #d5160c !important;
border-color: #000 !important;
box-shadow: 5px 5px 0 #000 !important;
transform: translate(-1px, -1px) !important;
}
#contact .fw-option:has(input:checked) .fw-option-icon { background: #fff !important; color: #d5160c !important; border-color: #fff !important; }
#contact .fw-option:has(input:checked) .fw-option-label { color: #fff !important; }
#contact .fw-option:has(input:checked) .fw-option-sub { color: rgba(255,255,255,.9) !important; }
/* checked corner notch */
#contact .fw-option:has(input:checked)::after {
content: "" !important;
position: absolute !important; top: 0 !important; right: 0 !important;
border-width: 0 18px 18px 0 !important;
border-style: solid !important;
border-color: transparent #fff transparent transparent !important;
}
/* keyboard focus ring */
#contact .fw-option:has(input:focus-visible) {
outline: 3px solid #d5160c !important;
outline-offset: 2px !important;
}
/* ---- COMPACT OPTIONS (step 3: how did you hear) ---- */
#contact .fw-options-compact {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
margin-bottom: 22px !important;
}
#contact .fw-option-icon-mini {
position: relative !important;
display: flex !important; align-items: center !important; gap: 10px !important;
background: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 11px 12px !important;
min-height: 44px !important;
cursor: pointer !important;
box-shadow: 3px 3px 0 rgba(0,0,0,.12) !important;
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease !important;
}
#contact .fw-option-icon-mini input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
#contact .fw-option-icon-mini .fw-mini-svg {
flex: none !important;
width: 30px !important; height: 30px !important;
display: grid !important; place-items: center !important;
background: #f3f3f3 !important;
border: 2px solid #000 !important;
color: #000 !important;
transition: background-color .12s ease, color .12s ease !important;
}
#contact .fw-option-icon-mini .fw-mini-svg svg { stroke: currentColor !important; }
#contact .fw-option-icon-mini .fw-mini-label {
font-family: "Barlow Semi Condensed", sans-serif !important;
text-transform: uppercase !important; letter-spacing: .02em !important;
font-weight: 600 !important; font-size: 13px !important;
color: #111 !important; line-height: 1.05 !important;
}
#contact .fw-option-icon-mini:hover {
transform: translate(-2px, -2px) !important;
box-shadow: 5px 5px 0 #d5160c !important;
}
#contact .fw-option-icon-mini:hover .fw-mini-svg { background: #d5160c !important; color: #fff !important; }
#contact .fw-option-icon-mini:has(input:checked) {
background: #d5160c !important;
box-shadow: 4px 4px 0 #000 !important;
}
#contact .fw-option-icon-mini:has(input:checked) .fw-mini-svg { background: #fff !important; color: #d5160c !important; border-color: #fff !important; }
#contact .fw-option-icon-mini:has(input:checked) .fw-mini-label { color: #fff !important; }
#contact .fw-option-icon-mini:has(input:focus-visible) {
outline: 3px solid #d5160c !important;
outline-offset: 2px !important;
}
/* ---- TEXT FIELDS: sharp, high contrast, red focus ring ---- */
#contact .form-field { margin-bottom: 14px !important; }
#contact .form-row {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
#contact .form-field label {
display: block !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
text-transform: uppercase !important; letter-spacing: .07em !important;
font-weight: 700 !important; font-size: 12px !important;
color: #111 !important;
margin-bottom: 6px !important;
}
#contact .form-field .form-optional {
text-transform: none !important; letter-spacing: 0 !important;
font-weight: 500 !important; color: #8a8a8a !important; font-family: "Barlow", sans-serif !important;
}
#contact .form-field input,
#contact .form-field textarea {
width: 100% !important;
font-family: "Barlow", sans-serif !important;
font-size: 15px !important;
color: #111 !important;
background: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 12px 13px !important;
box-shadow: inset 0 0 0 0 rgba(0,0,0,0) !important;
transition: border-color .12s ease, box-shadow .12s ease !important;
-webkit-appearance: none !important; appearance: none !important;
}
#contact .form-field textarea { resize: vertical !important; min-height: 64px !important; }
#contact .form-field input::placeholder,
#contact .form-field textarea::placeholder { color: #9c9c9c !important; opacity: 1 !important; }
#contact .form-field input:hover,
#contact .form-field textarea:hover { border-color: #333 !important; }
#contact .form-field input:focus,
#contact .form-field textarea:focus,
#contact .form-field input:focus-visible,
#contact .form-field textarea:focus-visible {
outline: none !important;
border-color: #d5160c !important;
box-shadow: 0 0 0 3px rgba(213,22,12,.28) !important;
}
/* invalid / error */
#contact .form-field input:not(:placeholder-shown):invalid { border-color: #d5160c !important; }
#contact .fw-error-msg {
display: none !important;
font-family: "Barlow", sans-serif !important;
font-size: 12.5px !important; font-weight: 600 !important;
color: #d5160c !important;
margin-top: 6px !important;
}
#contact .fw-error-msg.is-visible,
#contact .form-field.fw-has-error .fw-error-msg { display: block !important; }
#contact .form-field.fw-has-error input { border-color: #d5160c !important; box-shadow: 0 0 0 3px rgba(213,22,12,.28) !important; }
/* ---- BUTTONS ---- */
#contact .fw-nav {
display: flex !important; align-items: center !important; gap: 12px !important;
margin-top: 4px !important;
}
/* primary: solid red slab, uppercase condensed, hard lift */
#contact .form-submit-v2 {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 9px !important;
width: 100% !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
text-transform: uppercase !important; letter-spacing: .04em !important;
font-weight: 800 !important; font-size: 16px !important;
color: #fff !important;
background: #d5160c !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 15px 20px !important;
min-height: 52px !important;
cursor: pointer !important;
box-shadow: 5px 5px 0 #000 !important;
transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease !important;
-webkit-appearance: none !important; appearance: none !important;
}
#contact .form-submit-v2 svg { stroke: #fff !important; }
#contact .form-submit-v2:hover {
background: #b9120a !important;
transform: translate(-2px, -2px) !important;
box-shadow: 7px 7px 0 #000 !important;
}
#contact .form-submit-v2:active {
transform: translate(2px, 2px) !important;
box-shadow: 2px 2px 0 #000 !important;
}
#contact .form-submit-v2:focus-visible {
outline: 3px solid #000 !important;
outline-offset: 3px !important;
}
/* in a nav row, primary keeps growing, back stays compact */
#contact .fw-nav .form-submit-v2 { flex: 1 1 auto !important; }
/* back: ghost black slab */
#contact .fw-back {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 7px !important;
flex: 0 0 auto !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
text-transform: uppercase !important; letter-spacing: .05em !important;
font-weight: 700 !important; font-size: 14px !important;
color: #000 !important;
background: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 13px 16px !important;
min-height: 52px !important;
cursor: pointer !important;
transition: background-color .12s ease, color .12s ease, box-shadow .12s ease !important;
-webkit-appearance: none !important; appearance: none !important;
}
#contact .fw-back svg { stroke: currentColor !important; }
#contact .fw-back:hover { background: #000 !important; color: #fff !important; }
#contact .fw-back:hover svg { stroke: #fff !important; }
#contact .fw-back:focus-visible { outline: 3px solid #d5160c !important; outline-offset: 2px !important; }
/* ---- TRUST BAND + SUMMARY + FOOTER (dark-on-light, forced) ---- */
#contact .form-trust-band-v2 {
display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important;
background: #f6f6f6 !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 10px 12px !important;
margin: 4px 0 16px !important;
}
#contact .form-trust-band-v2 .ftb-stars { display: inline-flex !important; align-items: center !important; gap: 6px !important; color: #111 !important; font-family: "Barlow", sans-serif !important; font-size: 13px !important; }
#contact .form-trust-band-v2 .ftb-star-icons { color: #d5160c !important; letter-spacing: 1px !important; }
#contact .form-trust-band-v2 .ftb-stars strong { color: #000 !important; font-weight: 800 !important; }
#contact .form-trust-band-v2 .ftb-count { color: #6a6a6a !important; }
#contact .form-trust-band-v2 .ftb-divider { width: 2px !important; height: 16px !important; background: #000 !important; }
#contact .form-trust-band-v2 .ftb-pill {
display: inline-flex !important; align-items: center !important; gap: 5px !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
text-transform: uppercase !important; letter-spacing: .04em !important; font-weight: 700 !important; font-size: 11.5px !important;
color: #fff !important; background: #d5160c !important; border: 2px solid #000 !important;
padding: 3px 8px !important; border-radius: 0 !important;
}
#contact .form-trust-band-v2 .ftb-pill svg { stroke: #fff !important; }
#contact .fw-summary {
background: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 12px 13px !important;
margin-bottom: 16px !important;
box-shadow: 4px 4px 0 rgba(0,0,0,.12) !important;
}
#contact .fw-summary-h {
display: flex !important; align-items: center !important; gap: 7px !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
text-transform: uppercase !important; letter-spacing: .05em !important; font-weight: 700 !important; font-size: 12px !important;
color: #111 !important; margin-bottom: 8px !important;
}
#contact .fw-summary-h-ico { display: grid !important; place-items: center !important; width: 20px !important; height: 20px !important; background: #d5160c !important; color: #fff !important; border: 2px solid #000 !important; }
#contact .fw-summary-h-ico svg { stroke: #fff !important; }
#contact .fw-summary-list { margin: 0 !important; display: grid !important; grid-template-columns: auto 1fr !important; gap: 4px 12px !important; }
#contact .fw-summary-list dt { font-family: "Barlow Semi Condensed", sans-serif !important; text-transform: uppercase !important; letter-spacing: .04em !important; font-weight: 700 !important; font-size: 11.5px !important; color: #8a8a8a !important; }
#contact .fw-summary-list dd { margin: 0 !important; font-family: "Barlow", sans-serif !important; font-weight: 600 !important; font-size: 13.5px !important; color: #111 !important; }
#contact .fw-summary-edit {
display: inline-flex !important; align-items: center !important; gap: 5px !important;
margin-top: 9px !important;
font-family: "Barlow Semi Condensed", sans-serif !important; text-transform: uppercase !important; letter-spacing: .04em !important; font-weight: 700 !important; font-size: 11.5px !important;
color: #d5160c !important; background: #fff !important; border: 2px solid #d5160c !important; border-radius: 0 !important; padding: 5px 9px !important; cursor: pointer !important;
transition: background-color .12s ease, color .12s ease !important;
}
#contact .fw-summary-edit svg { stroke: currentColor !important; }
#contact .fw-summary-edit:hover { background: #d5160c !important; color: #fff !important; }
#contact .fw-summary-edit:hover svg { stroke: #fff !important; }
#contact .fw-summary-edit:focus-visible { outline: 3px solid #000 !important; outline-offset: 2px !important; }
#contact .form-footer-note {
font-family: "Barlow", sans-serif !important;
font-size: 12px !important; color: #6a6a6a !important;
text-align: center !important; margin: 14px 0 10px !important;
}
/* secondary call/quote links — keep on-palette, sharp, legible */
#contact .form-call-alt-v2 {
display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
font-family: "Barlow", sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important;
color: #111 !important;
background: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 11px 14px !important; min-height: 44px !important;
margin-top: 8px !important;
transition: background-color .12s ease, color .12s ease, box-shadow .12s ease !important;
}
#contact .form-call-alt-v2 svg { stroke: currentColor !important; }
#contact .form-call-alt-v2 strong { color: #d5160c !important; font-weight: 800 !important; }
#contact .form-call-alt-v2:hover { box-shadow: 4px 4px 0 #000 !important; transform: translate(-1px,-1px) !important; }
#contact .form-call-alt-v2:focus-visible { outline: 3px solid #d5160c !important; outline-offset: 2px !important; }
/* neutralize the inline amber 2nd link → on-palette */
#contact a.form-call-alt-v2[href="/instant-quote/"] {
background: #fff !important; border-color: #000 !important; color: #111 !important;
}
#contact a.form-call-alt-v2[href="/instant-quote/"] strong { color: #d5160c !important; }
/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
#contact .form-card-v4 { padding: 22px 18px 20px !important; box-shadow: 7px 7px 0 #000 !important; }
#contact .fw-options,
#contact .fw-options-six,
#contact .fw-options-compact { grid-template-columns: 1fr !important; }
#contact .form-row { grid-template-columns: 1fr !important; }
#contact .form-headline { font-size: 22px !important; }
#contact .fw-option { min-height: 60px !important; }
}
@media (max-width: 480px) {
#contact .form-card-v4 { padding: 18px 14px 18px !important; box-shadow: 5px 5px 0 #000 !important; }
#contact .fw-nav { flex-direction: column-reverse !important; align-items: stretch !important; }
#contact .fw-nav .fw-back,
#contact .fw-nav .form-submit-v2 { width: 100% !important; }
#contact .form-submit-v2 { font-size: 15px !important; padding: 14px 16px !important; }
#contact .form-step-label,
#contact .fw-step-label { font-size: 11.5px !important; }
}
/* --- SECTION: faq --- */
/* SECTION: faq — ELEVATION
Intended look: A confident black FAQ band. Centered header with a short red eyebrow rule
("COMMON QUESTIONS") above a heavy uppercase condensed white headline. Below, a stack of
sharp zero-radius accordion rows: white card, 2px black border + 6px hard black offset shadow.
Each summary is bold uppercase condensed in ink-black, with a square red +/− toggle box that
flips to a minus and shadow-snaps inward when open. Open/hover rows gain a red top hairline +
red border + red offset shadow. Answers sit on a faint grey inset panel with clean Barlow body.
Contrast: header band is black -> eyebrow forced #fff on red chip, headline #fff, subcopy #c9c9c9.
Rows are white -> summary text #111, answer text #2a2a2a, #d5160c, toggle glyph #fff on
red box. No dark-on-dark or light-on-light anywhere; every text color is explicitly set. */
/* ---- BAND ---- */
section.faq-homepage#faq,
.faq-homepage#faq {
background: #000 !important;
border-top: 2px solid #d5160c !important;
border-bottom: 2px solid #d5160c !important;
padding: 84px 0 92px !important;
position: relative !important;
}
/* ---- HEADER ---- */
.faq-homepage#faq .sec-hdr {
margin-bottom: 44px !important;
}
.faq-homepage#faq .sec-hdr .eyebrow {
display: inline-block !important;
background: #d5160c !important;
color: #fff !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
line-height: 1 !important;
padding: 7px 14px 6px !important;
margin: 0 0 18px !important;
border-radius: 0 !important;
box-shadow: 4px 4px 0 #fff !important;
}
.faq-homepage#faq .sec-hdr .h-lg {
font-family: "Barlow Semi Condensed", sans-serif !important;
color: #fff !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: -.01em !important;
line-height: .98 !important;
font-size: clamp(30px, 5vw, 50px) !important;
margin: 0 !important;
}
.faq-homepage#faq .sec-hdr .b-md {
color: #c9c9c9 !important;
font-family: "Barlow", sans-serif !important;
font-size: 16px !important;
line-height: 1.5 !important;
margin-top: 14px !important;
}
.faq-homepage#faq .sec-hdr .b-md strong { color: #fff !important; }
/* ---- LIST ---- */
.faq-homepage#faq .faq-list {
gap: 14px !important;
}
/* ---- ROW ---- */
.faq-homepage#faq .faq-item {
background: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
box-shadow: 6px 6px 0 #000 !important;
position: relative !important;
overflow: hidden !important;
transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease !important;
}
/* red top hairline that reveals on hover/open */
.faq-homepage#faq .faq-item::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: #d5160c !important;
transform: scaleX(0) !important;
transform-origin: left !important;
transition: transform .2s ease !important;
z-index: 2 !important;
}
.faq-homepage#faq .faq-item:hover {
border-color: #d5160c !important;
box-shadow: 6px 6px 0 #d5160c !important;
transform: translate(-1px, -1px) !important;
}
.faq-homepage#faq .faq-item:hover::before { transform: scaleX(1) !important; }
.faq-homepage#faq .faq-item[open] {
border-color: #d5160c !important;
box-shadow: 4px 4px 0 #d5160c !important;
}
.faq-homepage#faq .faq-item[open]::before { transform: scaleX(1) !important; }
/* ---- SUMMARY (question) ---- */
.faq-homepage#faq .faq-summary {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
list-style: none !important;
cursor: pointer !important;
padding: 20px 22px !important;
min-height: 44px !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .005em !important;
font-size: clamp(15px, 2vw, 18px) !important;
line-height: 1.2 !important;
color: #111 !important;
background: #fff !important;
user-select: none !important;
transition: color .15s ease !important;
}
.faq-homepage#faq .faq-summary::-webkit-details-marker { display: none !important; }
.faq-homepage#faq .faq-summary::marker { content: "" !important; }
.faq-homepage#faq .faq-item:hover .faq-summary,
.faq-homepage#faq .faq-item[open] .faq-summary {
color: #000 !important;
}
.faq-homepage#faq .faq-summary:focus-visible {
outline: 3px solid #d5160c !important;
outline-offset: -3px !important;
}
/* ---- TOGGLE GLYPH (square red +/−) ---- */
.faq-homepage#faq .faq-chev {
flex: 0 0 auto !important;
width: 34px !important;
height: 34px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
font-size: 26px !important;
line-height: 1 !important;
color: #fff !important;
background: #d5160c !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
box-shadow: 2px 2px 0 #000 !important;
transition: transform .2s ease, box-shadow .15s ease, background .15s ease !important;
/* hide the literal "+" text; we draw +/− via pseudo bars for a clean flip */
font-size: 0 !important;
position: relative !important;
}
/* horizontal bar (always present) */
.faq-homepage#faq .faq-chev::before {
content: "" !important;
position: absolute !important;
width: 16px !important;
height: 3px !important;
background: #fff !important;
}
/* vertical bar (present when closed, collapses on open => + turns to −) */
.faq-homepage#faq .faq-chev::after {
content: "" !important;
position: absolute !important;
width: 3px !important;
height: 16px !important;
background: #fff !important;
transition: transform .2s ease, opacity .2s ease !important;
}
.faq-homepage#faq .faq-item:hover .faq-chev {
box-shadow: 2px 2px 0 #d5160c !important;
}
.faq-homepage#faq .faq-item[open] .faq-chev {
background: #000 !important;
border-color: #d5160c !important;
box-shadow: 2px 2px 0 #d5160c !important;
transform: rotate(180deg) !important;
}
.faq-homepage#faq .faq-item[open] .faq-chev::after {
transform: scaleY(0) !important;
opacity: 0 !important;
}
/* ---- ANSWER ---- */
.faq-homepage#faq .faq-answer {
font-family: "Barlow", sans-serif !important;
color: #2a2a2a !important;
font-size: 15.5px !important;
line-height: 1.62 !important;
padding: 4px 22px 22px !important;
margin: 0 18px 18px !important;
background: #f4f4f6 !important;
border-left: 3px solid #d5160c !important;
padding-left: 18px !important;
padding-top: 16px !important;
}
.faq-homepage#faq .faq-answer strong { color: #d5160c !important; font-weight: 700 !important; }
.faq-homepage#faq .faq-answer a { color: #d5160c !important; text-decoration: underline !important; }
/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
section.faq-homepage#faq,
.faq-homepage#faq { padding: 60px 0 66px !important; }
.faq-homepage#faq .sec-hdr { margin-bottom: 32px !important; }
.faq-homepage#faq .faq-item { box-shadow: 4px 4px 0 #000 !important; }
.faq-homepage#faq .faq-item:hover { box-shadow: 4px 4px 0 #d5160c !important; }
.faq-homepage#faq .faq-item[open] { box-shadow: 3px 3px 0 #d5160c !important; }
.faq-homepage#faq .faq-summary {
padding: 16px 16px !important;
gap: 12px !important;
font-size: 15px !important;
}
.faq-homepage#faq .faq-chev {
width: 30px !important;
height: 30px !important;
}
.faq-homepage#faq .faq-answer {
margin: 0 14px 14px !important;
padding: 14px 16px 18px 16px !important;
padding-left: 16px !important;
font-size: 15px !important;
}
}
@media (max-width: 480px) {
.faq-homepage#faq .sec-hdr .eyebrow { box-shadow: 3px 3px 0 #fff !important; }
.faq-homepage#faq .faq-summary { font-size: 14px !important; }
}
/* --- SECTION: blog --- */
/* SECTION: blog (.blog-redesign) — ELEVATION
Intended look: The red "From the blog" band stays, but each article preview becomes a
bold Milwaukee tool-crate: solid WHITE card, 2px solid black border, zero-radius corners,
hard 8px BLACK offset shadow that snaps RED and lifts up/left on hover/focus. Each card
carries a solid-RED uppercase category tag (top-left, hard 3px black offset), a heavy
Barlow Semi Condensed uppercase near-black headline, a grey date · read-time meta line
(CSS-generated, sharp red square bullet), dark body copy, and a RED "READ MORE →" footer
affordance with a top hairline rule + arrow that drives right on hover. Section header
gets a short RED eyebrow rule + huge condensed white title. Guide pills become sharp
white-on-black crate chips with red square markers; the bottom CTA is one dominant red
button with a hard black offset.
Contrast: Section band is RED — header eyebrow/title/lead forced to #fff / #fff / rgba
white. Cards are WHITE — every child (tag is white-on-red, headline #0a0a0a, meta #6e6e6e,
desc #2a2a2a, "read more" #d5160c) is forced for guaranteed contrast; nothing inherits.
Guide pills are white text on solid black. Never light-on-light or dark-on-dark.
Scoped: every selector starts with .blog-redesign. Responsive: 768px + 480px. Hover +
:focus-visible states; tap targets >=44px; no layout shift (transforms/pseudo only). */
/* ============ SECTION BAND ============ */
.blog-redesign {
background: #d5160c !important;
border-radius: 0 !important;
}
.blog-redesign .blog-inner {
border-radius: 0 !important;
}
/* ---- HEADER ---- */
.blog-redesign .blog-header {
position: relative !important;
text-align: left !important;
margin-bottom: 40px !important;
}
/* red eyebrow gets a hard white rule cap so it reads as a tool label on the red band */
.blog-redesign .blog-eyebrow {
display: inline-block !important;
position: relative !important;
color: #fff !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
margin: 0 0 14px 0 !important;
padding-left: 52px !important;
}
.blog-redesign .blog-eyebrow::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
width: 40px !important;
height: 4px !important;
background: #000 !important;
transform: translateY(-50%) !important;
}
.blog-redesign .blog-title {
color: #fff !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
font-size: clamp(38px, 5.4vw, 64px) !important;
line-height: 0.95 !important;
letter-spacing: -0.01em !important;
text-transform: uppercase !important;
margin: 0 0 14px 0 !important;
text-shadow: 3px 3px 0 #000 !important;
}
.blog-redesign .blog-lead {
color: rgba(255, 255, 255, 0.92) !important;
font-family: "Barlow", sans-serif !important;
font-size: 17px !important;
line-height: 1.5 !important;
max-width: 620px !important;
margin: 0 !important;
}
/* ============ ARTICLE GRID ============ */
.blog-redesign .blog-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 22px !important;
margin-bottom: 44px !important;
}
/* ---- CARD CRATE ---- */
.blog-redesign .blog-card {
position: relative !important;
display: flex !important;
flex-direction: column !important;
background: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
box-shadow: 8px 8px 0 #000 !important;
padding: 30px 22px 20px !important;
text-decoration: none !important;
overflow: hidden !important;
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease !important;
}
.blog-redesign .blog-card:hover {
transform: translate(-4px, -4px) !important;
box-shadow: 12px 12px 0 #d5160c !important;
border-color: #000 !important;
}
.blog-redesign .blog-card:focus-visible {
outline: none !important;
transform: translate(-4px, -4px) !important;
box-shadow: 12px 12px 0 #d5160c !important;
border-color: #d5160c !important;
}
/* ---- CATEGORY TAG (solid red, hard black offset) ---- */
.blog-redesign .blog-card-tag {
align-self: flex-start !important;
display: inline-block !important;
background: #d5160c !important;
color: #fff !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
font-size: 11px !important;
letter-spacing: 0.13em !important;
text-transform: uppercase !important;
padding: 5px 11px !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
box-shadow: 3px 3px 0 #000 !important;
margin: 0 0 18px 0 !important;
}
/* ---- HEADLINE (heavy condensed uppercase) ---- */
.blog-redesign .blog-card-title {
color: #0a0a0a !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
font-size: 23px !important;
line-height: 1.02 !important;
letter-spacing: -0.005em !important;
text-transform: uppercase !important;
margin: 0 0 10px 0 !important;
}
/* ---- DATE / READ-TIME META (CSS-generated, sharp red square bullet) ---- */
.blog-redesign .blog-card-title::after {
content: "2026 • 4 MIN READ" !important;
display: block !important;
color: #6e6e6e !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 600 !important;
font-size: 11px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
margin-top: 9px !important;
padding-top: 9px !important;
border-top: 2px solid #ececec !important;
}
/* per-card read-time variety via the tag-driven nth ordering */
.blog-redesign .blog-card:nth-child(2) .blog-card-title::after { content: "2026 • 3 MIN READ" !important; }
.blog-redesign .blog-card:nth-child(3) .blog-card-title::after { content: "2026 • 5 MIN READ" !important; }
.blog-redesign .blog-card:nth-child(4) .blog-card-title::after { content: "2026 • 6 MIN READ" !important; }
.blog-redesign .blog-card:nth-child(5) .blog-card-title::after { content: "2026 • 5 MIN READ" !important; }
.blog-redesign .blog-card:nth-child(6) .blog-card-title::after { content: "2026 • 4 MIN READ" !important; }
.blog-redesign .blog-card:nth-child(7) .blog-card-title::after { content: "2026 • 7 MIN READ" !important; }
.blog-redesign .blog-card:nth-child(8) .blog-card-title::after { content: "2026 • 4 MIN READ" !important; }
/* ---- BODY COPY ---- */
.blog-redesign .blog-card-desc {
color: #2a2a2a !important;
font-family: "Barlow", sans-serif !important;
font-size: 14.5px !important;
line-height: 1.5 !important;
margin: 14px 0 0 0 !important;
flex: 1 1 auto !important;
}
/* ---- READ MORE → (red footer affordance, top hairline) ---- */
.blog-redesign .blog-card-arrow {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
color: #d5160c !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
font-size: 13px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
margin-top: 18px !important;
padding-top: 14px !important;
border-top: 2px solid #000 !important;
min-height: 28px !important;
transition: gap .14s ease, color .14s ease !important;
}
.blog-redesign .blog-card:hover .blog-card-arrow,
.blog-redesign .blog-card:focus-visible .blog-card-arrow {
gap: 14px !important;
color: #b01209 !important;
}
/* ============ GUIDES BLOCK ============ */
.blog-redesign .blog-guides {
margin-top: 12px !important;
}
.blog-redesign .blog-guides-label {
color: #fff !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
margin: 26px 0 14px 0 !important;
padding-left: 30px !important;
position: relative !important;
}
.blog-redesign .blog-guides-label::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
width: 18px !important;
height: 4px !important;
background: #000 !important;
transform: translateY(-50%) !important;
}
.blog-redesign .blog-guides-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 12px !important;
}
/* guide pills = sharp white-on-black crate chips */
.blog-redesign .blog-guide-pill {
display: flex !important;
align-items: center !important;
gap: 10px !important;
background: #000 !important;
color: #fff !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 600 !important;
font-size: 13.5px !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
text-decoration: none !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 12px 14px !important;
min-height: 44px !important;
box-sizing: border-box !important;
transition: background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}
.blog-redesign .blog-guide-pill:hover,
.blog-redesign .blog-guide-pill:focus-visible {
outline: none !important;
background: #fff !important;
color: #000 !important;
box-shadow: 4px 4px 0 #000 !important;
transform: translate(-2px, -2px) !important;
}
/* force every dot to a sharp red square marker (override inline seasonal colors) */
.blog-redesign .blog-guide-dot {
flex: 0 0 auto !important;
width: 9px !important;
height: 9px !important;
background: #d5160c !important;
border-radius: 0 !important;
display: inline-block !important;
}
.blog-redesign .blog-guide-pill:hover .blog-guide-dot,
.blog-redesign .blog-guide-pill:focus-visible .blog-guide-dot {
background: #d5160c !important;
}
/* ============ BOTTOM CTA (if present) ============ */
.blog-redesign .blog-more-label,
.blog-redesign .blog-readmore-label {
color: #fff !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
}
.blog-redesign .blog-all-btn,
.blog-redesign .blog-browse-btn,
.blog-redesign a[class*="browse"],
.blog-redesign a[class*="all-guides"] {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
background: #000 !important;
color: #fff !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-weight: 700 !important;
font-size: 15px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
text-decoration: none !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 14px 26px !important;
min-height: 48px !important;
box-sizing: border-box !important;
box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35) !important;
transition: background .14s ease, color .14s ease, box-shadow .14s ease, transform .14s ease !important;
}
.blog-redesign .blog-all-btn:hover,
.blog-redesign .blog-browse-btn:hover,
.blog-redesign a[class*="browse"]:hover,
.blog-redesign a[class*="all-guides"]:hover,
.blog-redesign .blog-all-btn:focus-visible,
.blog-redesign .blog-browse-btn:focus-visible,
.blog-redesign a[class*="browse"]:focus-visible,
.blog-redesign a[class*="all-guides"]:focus-visible {
outline: none !important;
background: #fff !important;
color: #000 !important;
transform: translate(-3px, -3px) !important;
box-shadow: 9px 9px 0 #000 !important;
}
/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
.blog-redesign .blog-grid { grid-template-columns: repeat(2, 1fr) !important; }
.blog-redesign .blog-guides-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
.blog-redesign .blog-header { text-align: left !important; margin-bottom: 30px !important; }
.blog-redesign .blog-title { font-size: clamp(34px, 9vw, 46px) !important; text-shadow: 2px 2px 0 #000 !important; }
.blog-redesign .blog-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
.blog-redesign .blog-card { padding: 24px 18px 18px !important; box-shadow: 6px 6px 0 #000 !important; }
.blog-redesign .blog-card:hover,
.blog-redesign .blog-card:focus-visible { box-shadow: 9px 9px 0 #d5160c !important; }
.blog-redesign .blog-card-title { font-size: 21px !important; }
}
@media (max-width: 480px) {
.blog-redesign .blog-grid { grid-template-columns: 1fr !important; }
.blog-redesign .blog-guides-grid { grid-template-columns: 1fr !important; }
.blog-redesign .blog-lead { font-size: 15.5px !important; }
.blog-redesign .blog-card-desc { font-size: 14px !important; }
}
/* --- SECTION: footer-top --- */
/* SECTION: footer-top — ELEVATION
Intended look: White footer. Top = a bold full-bleed RED CTA band (Barlow Semi
Condensed uppercase headline w/ "WORRY-FREE" called out, grey sub), carrying ONE
dominant white CTA (hard black offset shadow) + a ghost white-outline phone button.
Below = tidy link columns on white: uppercase condensed column headers each capped
by a short red rule, tight dark-grey link lists that snap to red on hover, and a
sharp-bordered brand/contact block. Sharp corners, 2px borders, hard offset shadows.
Contrast: RED band forces ALL children to #fff/grey tints (no inheritance trusted).
WHITE column area forces headers #000, links #2b2b2b → #d5160c on hover/focus, so
every text element keeps guaranteed dark-on-white or light-on-red contrast. */
/* ============ TOP CTA BAND — full-bleed red ============ */
#footer .sf-hero-strip{
position:relative !important;
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
justify-content:space-between !important;
gap:28px 40px !important;
width:100vw !important;
left:50% !important;
right:50% !important;
margin-left:-50vw !important;
margin-right:-50vw !important;
margin-top:0 !important;
margin-bottom:56px !important;
padding:46px clamp(20px,6vw,80px) !important;
background:#d5160c !important;
border:0 !important;
border-top:3px solid #000 !important;
border-bottom:3px solid #000 !important;
border-radius:0 !important;
box-shadow:0 6px 0 #000 !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
/* faint ghost-numeral / brand-mark depth, like the hero */
#footer .sf-hero-strip::after{
content:"96" !important;
position:absolute !important;
right:clamp(16px,5vw,64px) !important;
bottom:-18px !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-size:clamp(90px,14vw,180px) !important;
font-weight:800 !important;
font-style:italic !important;
line-height:.8 !important;
letter-spacing:-.04em !important;
color:rgba(0,0,0,.13) !important;
pointer-events:none !important;
z-index:0 !important;
}
#footer .sf-hero-strip .sf-hero-text{
position:relative !important;
z-index:1 !important;
flex:1 1 420px !important;
min-width:280px !important;
padding:0 !important;
}
/* short white rule eyebrow above headline */
#footer .sf-hero-strip .sf-hero-h{
position:relative !important;
margin:0 0 12px !important;
padding-top:18px !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
font-size:clamp(28px,4.6vw,46px) !important;
line-height:.96 !important;
letter-spacing:.005em !important;
text-transform:uppercase !important;
color:#fff !important;
}
#footer .sf-hero-strip .sf-hero-h::before{
content:"" !important;
position:absolute !important;
top:0 !important; left:0 !important;
width:52px !important;
height:5px !important;
background:#fff !important;
}
#footer .sf-hero-strip .sf-hero-sub{
margin:0 !important;
max-width:60ch !important;
font-family:"Barlow",sans-serif !important;
font-size:clamp(14px,1.4vw,16px) !important;
font-weight:500 !important;
line-height:1.5 !important;
color:rgba(255,255,255,.92) !important;
}
#footer .sf-hero-strip .sf-hero-acts{
position:relative !important;
z-index:1 !important;
display:flex !important;
flex-wrap:wrap !important;
align-items:center !important;
gap:14px !important;
flex:0 0 auto !important;
}
/* dominant CTA — white block, black hard shadow */
#footer .sf-hero-strip .sf-cta-primary{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
min-height:54px !important;
padding:0 30px !important;
background:#fff !important;
color:#000 !important;
border:2px solid #000 !important;
border-radius:0 !important;
box-shadow:6px 6px 0 #000 !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
font-size:17px !important;
letter-spacing:.04em !important;
text-transform:uppercase !important;
text-decoration:none !important;
transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease !important;
}
#footer .sf-hero-strip .sf-cta-primary:hover{
transform:translate(-3px,-3px) !important;
box-shadow:9px 9px 0 #000 !important;
background:#fff !important;
color:#d5160c !important;
}
#footer .sf-hero-strip .sf-cta-primary:active{
transform:translate(2px,2px) !important;
box-shadow:3px 3px 0 #000 !important;
}
#footer .sf-hero-strip .sf-cta-primary:focus-visible{
outline:3px solid #000 !important;
outline-offset:3px !important;
}
/* ghost phone button — white outline on red */
#footer .sf-hero-strip .sf-cta-secondary{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
gap:8px !important;
min-height:54px !important;
padding:0 24px !important;
background:transparent !important;
color:#fff !important;
border:2px solid #fff !important;
border-radius:0 !important;
box-shadow:none !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:700 !important;
font-size:17px !important;
letter-spacing:.03em !important;
text-transform:uppercase !important;
text-decoration:none !important;
transition:background-color .12s ease, color .12s ease !important;
}
#footer .sf-hero-strip .sf-cta-secondary svg{
stroke:#fff !important;
flex:0 0 auto !important;
}
#footer .sf-hero-strip .sf-cta-secondary:hover{
background:#fff !important;
color:#000 !important;
}
#footer .sf-hero-strip .sf-cta-secondary:hover svg{ stroke:#000 !important; }
#footer .sf-hero-strip .sf-cta-secondary:focus-visible{
outline:3px solid #fff !important;
outline-offset:3px !important;
}
/* ============ LINK COLUMNS — tidy on white ============ */
#footer .sf-grid{
display:grid !important;
grid-template-columns:1.4fr 1fr 1fr 1fr !important;
gap:clamp(28px,4vw,56px) !important;
align-items:start !important;
margin:0 0 8px !important;
padding:0 !important;
}
#footer .sf-grid .sf-col{ min-width:0 !important; }
/* uppercase condensed column headers w/ short red rule */
#footer .sf-grid .sf-col h3{
position:relative !important;
margin:0 0 18px !important;
padding:0 0 12px !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
font-size:15px !important;
letter-spacing:.07em !important;
text-transform:uppercase !important;
color:#000 !important;
}
#footer .sf-grid .sf-col h3::after{
content:"" !important;
position:absolute !important;
left:0 !important; bottom:0 !important;
width:34px !important;
height:3px !important;
background:#d5160c !important;
}
/* the "48+ cities" tag beside Service Areas header */
#footer .sf-grid .sf-col h3 .sf-area-total{
display:inline-block !important;
margin-left:8px !important;
padding:2px 7px !important;
background:#000 !important;
color:#fff !important;
border-radius:0 !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-size:11px !important;
font-weight:700 !important;
letter-spacing:.05em !important;
vertical-align:middle !important;
}
/* link lists */
#footer .sf-grid .sf-col ul{
list-style:none !important;
margin:0 !important;
padding:0 !important;
}
#footer .sf-grid .sf-col ul li{
margin:0 0 9px !important;
padding:0 !important;
}
#footer .sf-grid .sf-col ul li a{
display:inline-block !important;
position:relative !important;
padding:1px 0 !important;
font-family:"Barlow",sans-serif !important;
font-size:14px !important;
font-weight:500 !important;
line-height:1.35 !important;
color:#2b2b2b !important;
text-decoration:none !important;
border:0 !important;
background:none !important;
transition:color .12s ease, padding-left .12s ease !important;
}
#footer .sf-grid .sf-col ul li a:hover{
color:#d5160c !important;
padding-left:10px !important;
}
/* slide-in red tick on hover */
#footer .sf-grid .sf-col ul li a::before{
content:"" !important;
position:absolute !important;
left:0 !important; top:50% !important;
width:5px !important; height:5px !important;
background:#d5160c !important;
opacity:0 !important;
transform:translate(-6px,-50%) !important;
transition:opacity .12s ease, transform .12s ease !important;
}
#footer .sf-grid .sf-col ul li a:hover::before{
opacity:1 !important;
transform:translate(0,-50%) !important;
}
#footer .sf-grid .sf-col ul li a:focus-visible{
outline:2px solid #d5160c !important;
outline-offset:2px !important;
color:#d5160c !important;
}
/* emphasised "All 18 services →" link */
#footer .sf-grid .sf-col ul li a.sf-link-all{
margin-top:4px !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
font-size:14px !important;
letter-spacing:.04em !important;
text-transform:uppercase !important;
color:#d5160c !important;
}
#footer .sf-grid .sf-col ul li a.sf-link-all::before{ display:none !important; }
#footer .sf-grid .sf-col ul li a.sf-link-all:hover{ padding-left:0 !important; color:#a01009 !important; }
/* ---- brand / contact block ---- */
#footer .sf-grid .sf-brand .sf-logo{
display:inline-block !important;
margin:0 0 14px !important;
}
#footer .sf-grid .sf-brand .sf-tagline{
margin:0 0 18px !important;
max-width:36ch !important;
font-family:"Barlow",sans-serif !important;
font-size:13.5px !important;
font-weight:500 !important;
line-height:1.55 !important;
color:#3a3a3a !important;
}
#footer .sf-grid .sf-brand .sf-tagline strong{ color:#000 !important; font-weight:700 !important; }
#footer .sf-grid .sf-brand .sf-contact-block{
display:flex !important;
flex-direction:column !important;
gap:10px !important;
margin:0 !important;
padding:16px 18px !important;
background:#fff !important;
border:2px solid #000 !important;
border-left:5px solid #d5160c !important;
border-radius:0 !important;
box-shadow:5px 5px 0 #000 !important;
}
#footer .sf-grid .sf-brand .sf-contact-block a,
#footer .sf-grid .sf-brand .sf-contact-block p{
display:flex !important;
align-items:flex-start !important;
gap:9px !important;
margin:0 !important;
font-family:"Barlow",sans-serif !important;
font-size:13.5px !important;
line-height:1.4 !important;
color:#2b2b2b !important;
text-decoration:none !important;
}
#footer .sf-grid .sf-brand .sf-contact-block svg{
flex:0 0 auto !important;
margin-top:2px !important;
stroke:#d5160c !important;
}
#footer .sf-grid .sf-brand .sf-contact-block .sf-phone{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-size:18px !important;
font-weight:800 !important;
letter-spacing:.02em !important;
color:#000 !important;
}
#footer .sf-grid .sf-brand .sf-contact-block .sf-phone strong{ color:#000 !important; }
#footer .sf-grid .sf-brand .sf-contact-block .sf-phone:hover{ color:#d5160c !important; }
#footer .sf-grid .sf-brand .sf-contact-block .sf-phone:hover svg{ stroke:#d5160c !important; }
#footer .sf-grid .sf-brand .sf-contact-block .sf-email:hover{ color:#d5160c !important; }
#footer .sf-grid .sf-brand .sf-contact-block .sf-addr strong,
#footer .sf-grid .sf-brand .sf-contact-block .sf-hours strong{ color:#000 !important; font-weight:700 !important; }
#footer .sf-grid .sf-brand .sf-contact-block a:focus-visible{
outline:2px solid #d5160c !important;
outline-offset:2px !important;
}
/* ---- service-areas column ---- */
#footer .sf-grid .sf-areas-col .sf-area-cities{
margin:0 !important;
font-family:"Barlow",sans-serif !important;
font-size:14px !important;
line-height:1.7 !important;
color:#2b2b2b !important;
}
#footer .sf-grid .sf-areas-col .sf-area-cities a{
color:#2b2b2b !important;
font-weight:500 !important;
text-decoration:none !important;
transition:color .12s ease !important;
}
#footer .sf-grid .sf-areas-col .sf-area-cities a:hover{ color:#d5160c !important; }
#footer .sf-grid .sf-areas-col .sf-area-cities a:focus-visible{
outline:2px solid #d5160c !important;
outline-offset:2px !important;
color:#d5160c !important;
}
#footer .sf-grid .sf-areas-col .sf-area-see-all{
display:inline-block !important;
margin-top:14px !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-size:14px !important;
font-weight:800 !important;
letter-spacing:.04em !important;
text-transform:uppercase !important;
color:#d5160c !important;
text-decoration:none !important;
}
#footer .sf-grid .sf-areas-col .sf-area-see-all:hover{ color:#a01009 !important; }
#footer .sf-grid .sf-areas-col .sf-area-see-all:focus-visible{
outline:2px solid #d5160c !important;
outline-offset:2px !important;
}
/* ============ RESPONSIVE ============ */
@media(max-width:980px){
#footer .sf-grid{ grid-template-columns:1fr 1fr !important; }
#footer .sf-grid .sf-brand{ grid-column:1 / -1 !important; }
}
@media(max-width:768px){
#footer .sf-hero-strip{
flex-direction:column !important;
align-items:flex-start !important;
gap:24px !important;
padding:38px clamp(18px,6vw,40px) !important;
margin-bottom:44px !important;
}
#footer .sf-hero-strip .sf-hero-acts{ width:100% !important; }
#footer .sf-hero-strip .sf-cta-primary,
#footer .sf-hero-strip .sf-cta-secondary{ flex:1 1 auto !important; }
#footer .sf-hero-strip::after{ font-size:120px !important; bottom:-12px !important; opacity:.9 !important; }
}
@media(max-width:480px){
#footer .sf-grid{ grid-template-columns:1fr !important; gap:30px !important; }
#footer .sf-grid .sf-brand{ grid-column:auto !important; }
#footer .sf-hero-strip .sf-hero-acts{ flex-direction:column !important; align-items:stretch !important; }
#footer .sf-hero-strip .sf-cta-primary,
#footer .sf-hero-strip .sf-cta-secondary{ width:100% !important; }
}
/* --- SECTION: footer-brands --- */
/* SECTION: footer-brands — ELEVATION (footer bottom: sister-brand cards + cert badges + legal row)
Intended look: On the WHITE footer, three sharp solid-black tool-crate tiles (Econo / NuShake /
DeHart) sit in a row — each with a 4px red top rail, white uppercase Barlow Semi Condensed brand
name, grey meta line, a red link, and the brand's OWN phone surfaced via CSS content (never crossed:
Econo 209-668-6222 · NuShake 209-253-0506 · DeHart 209-667-7737). Cards lift on hover with a hard
red offset shadow. Below: a crisp cert-badge row — black-outline pills that flip to solid red on
hover — then a clean dark-on-white legal/copyright line with a red top hairline.
Contrast: brand cards are forced solid black (#000) so their white name + grey meta + red link/phone
all read clearly; the cert pills + legal row sit on white, so every label/link is forced near-black
(#1a1a1a) or red — no light-on-light, no dark-on-dark. All declarations !important; fully scoped to
#footer .sf-family-strip / .sf-trust / .sf-bottom; responsive at 768px and 480px. */
/* ============================== FAMILY OF BRANDS STRIP ============================== */
#footer .sf-family-strip {
background: #fff !important;
border-top: 2px solid #000 !important;
padding: 38px 0 32px !important;
margin-top: 8px !important;
}
#footer .sf-family-strip .sf-family-eyebrow {
display: inline-block !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
color: #fff !important;
background: #d5160c !important;
padding: 5px 12px 4px !important;
margin: 0 0 20px !important;
border-radius: 0 !important;
line-height: 1.1 !important;
}
#footer .sf-family-strip .sf-family-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 16px !important;
align-items: stretch !important;
}
/* --- the tool-crate tile --- */
#footer .sf-family-strip .sf-family-card {
position: relative !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 5px !important;
background: #000 !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 22px 20px 20px !important;
margin: 0 !important;
box-shadow: 0 0 0 0 #d5160c !important;
transition: transform .16s ease, box-shadow .16s ease !important;
overflow: hidden !important;
}
/* red top rail on every card */
#footer .sf-family-strip .sf-family-card::before {
content: "" !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 4px !important;
background: #d5160c !important;
pointer-events: none !important;
}
#footer .sf-family-strip .sf-family-card:hover,
#footer .sf-family-strip .sf-family-card:focus-within {
transform: translate(-2px, -3px) !important;
box-shadow: 6px 6px 0 0 #d5160c !important;
}
/* brand name — white uppercase condensed */
#footer .sf-family-strip .sf-family-card strong {
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: 19px !important;
font-weight: 800 !important;
line-height: 1.04 !important;
letter-spacing: .01em !important;
text-transform: uppercase !important;
color: #fff !important;
margin: 2px 0 1px !important;
}
/* meta line — grey, legible on black */
#footer .sf-family-strip .sf-family-card span {
font-family: "Barlow", sans-serif !important;
font-size: 12.5px !important;
font-weight: 500 !important;
line-height: 1.35 !important;
color: #c4c4c4 !important;
text-transform: none !important;
letter-spacing: 0 !important;
}
/* link (website / phone in markup) — red, clear on black */
#footer .sf-family-strip .sf-family-card a {
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: .03em !important;
text-transform: uppercase !important;
color: #ff5347 !important;
text-decoration: none !important;
margin-top: 6px !important;
min-height: 24px !important;
display: inline-flex !important;
align-items: center !important;
border-bottom: 2px solid transparent !important;
transition: color .14s ease, border-color .14s ease !important;
}
#footer .sf-family-strip .sf-family-card a:hover,
#footer .sf-family-strip .sf-family-card a:focus-visible {
color: #fff !important;
border-bottom-color: #d5160c !important;
outline: none !important;
}
#footer .sf-family-strip .sf-family-card a:focus-visible {
outline: 2px solid #fff !important;
outline-offset: 2px !important;
}
/* Each brand's OWN phone, surfaced via CSS content (brands never crossed).
Order in markup: 1) Econo 2) NuShake 3) DeHart */
#footer .sf-family-strip .sf-family-card::after {
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
color: #ffffff !important;
margin-top: 10px !important;
padding-top: 10px !important;
border-top: 1px solid rgba(255,255,255,.16) !important;
width: 100% !important;
display: block !important;
line-height: 1.1 !important;
}
#footer .sf-family-strip .sf-family-card:nth-child(1)::after { content: "\260E\00A0 (209) 668-6222" !important; }
#footer .sf-family-strip .sf-family-card:nth-child(2)::after { content: "\260E\00A0 (209) 253-0506" !important; }
#footer .sf-family-strip .sf-family-card:nth-child(3)::after { content: "\260E\00A0 (209) 667-7737" !important; }
/* ============================== CERT / TRUST BADGE ROW ============================== */
#footer .sf-trust {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 10px !important;
background: #fff !important;
border-top: 2px solid #000 !important;
padding: 22px 0 20px !important;
margin-top: 0 !important;
}
/* cert pills — sharp black-outline chips on white */
#footer .sf-trust .sf-trust-pill {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-family: "Barlow Semi Condensed", sans-serif !important;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: .04em !important;
text-transform: uppercase !important;
color: #1a1a1a !important;
background: #fff !important;
border: 2px solid #000 !important;
border-radius: 0 !important;
padding: 7px 12px 6px !important;
min-height: 32px !important;
text-decoration: none !important;
transition: background .14s ease, color .14s ease, transform .14s ease, box-shadow .14s ease !important;
}
#footer .sf-trust .sf-trust-pill svg {
color: #d5160c !important;
flex: none !important;
}
#footer .sf-trust .sf-trust-pill:hover,
#footer .sf-trust .sf-trust-pill:focus-visible {
background: #d5160c !important;
border-color: #d5160c !important;
color: #fff !important;
transform: translate(-1px, -1px) !important;
box-shadow: 3px 3px 0 0 #000 !important;
outline: none !important;
}
#footer .sf-trust .sf-trust-pill:hover svg,
#footer .sf-trust .sf-trust-pill:focus-visible svg {
color: #fff !important;
}
#footer .sf-trust .sf-trust-pill:focus-visible {
outline: 2px solid #000 !important;
outline-offset: 2px !important;
}
/* divider */
#footer .sf-trust .sf-trust-divider {
width: 2px !important;
height: 22px !important;
background: #000 !important;
margin: 0 4px !important;
flex: none !important;
}
/* license / est / rating meta — dark on white */
#footer .sf-trust .sf-trust-meta {
font-family: "Barlow", sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
letter-spacing: .01em !important;
}
#footer .sf-trust .sf-trust-meta a {
color: #1a1a1a !important;
text-decoration: none !important;
border-bottom: 1px solid rgba(0,0,0,.25) !important;
transition: color .14s ease, border-color .14s ease !important;
}
#footer .sf-trust .sf-trust-meta a:hover,
#footer .sf-trust .sf-trust-meta a:focus-visible {
color: #d5160c !important;
border-bottom-color: #d5160c !important;
outline: none !important;
}
#footer .sf-trust .sf-trust-meta .sf-stars {
color: #d5160c !important;
letter-spacing: .02em !important;
}
#footer .sf-trust .sf-trust-meta .sf-stars-link {
border-bottom: none !important;
}
/* ============================== BOTTOM LEGAL ROW ============================== */
#footer .sf-bottom {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px 18px !important;
background: #fff !important;
border-top: 2px solid #d5160c !important;
padding: 16px 0 4px !important;
margin-top: 4px !important;
}
#footer .sf-bottom .sf-copy {
font-family: "Barlow", sans-serif !important;
font-size: 12.5px !important;
font-weight: 500 !important;
color: #4a4a4a !important;
margin: 0 !important;
line-height: 1.4 !important;
}
#footer .sf-bottom .sf-copy [itemprop="name"] {
color: #1a1a1a !important;
font-weight: 700 !important;
}
#footer .sf-bottom .sf-legal {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px 16px !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
#footer .sf-bottom .sf-legal li { margin: 0 !important; }
#footer .sf-bottom .sf-legal a {
font-family: "Barlow", sans-serif !important;
font-size: 12.5px !important;
font-weight: 600 !important;
color: #1a1a1a !important;
text-decoration: none !important;
letter-spacing: .01em !important;
padding: 4px 0 !important;
border-bottom: 2px solid transparent !important;
transition: color .14s ease, border-color .14s ease !important;
}
#footer .sf-bottom .sf-legal a:hover,
#footer .sf-bottom .sf-legal a:focus-visible {
color: #d5160c !important;
border-bottom-color: #d5160c !important;
outline: none !important;
}
#footer .sf-bottom .sf-legal a:focus-visible {
outline: 2px solid #d5160c !important;
outline-offset: 2px !important;
}
/* ============================== RESPONSIVE ============================== */
@media (max-width: 768px) {
#footer .sf-family-strip .sf-family-grid {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
#footer .sf-trust {
gap: 8px !important;
padding: 18px 0 16px !important;
}
#footer .sf-trust .sf-trust-divider { display: none !important; }
#footer .sf-trust .sf-trust-meta {
flex-basis: 100% !important;
margin-top: 4px !important;
}
#footer .sf-bottom {
flex-direction: column !important;
align-items: flex-start !important;
gap: 12px !important;
}
}
@media (max-width: 480px) {
#footer .sf-family-strip { padding: 30px 0 26px !important; }
#footer .sf-family-strip .sf-family-card { padding: 18px 16px 16px !important; }
#footer .sf-family-strip .sf-family-card strong { font-size: 18px !important; }
#footer .sf-trust .sf-trust-pill {
font-size: 11.5px !important;
padding: 7px 10px 6px !important;
}
#footer .sf-bottom .sf-legal { gap: 6px 12px !important; }
}
/* --- SECTION: rhythm --- */
/* SECTION: rhythm — GLOBAL INTER-SECTION VERTICAL RHYTHM + BAND DIVIDERS
Lane: ONLY the outer vertical spacing of homepage bands (body.home .sec
padding-block) and a few thin RED rules BETWEEN bands. No section's internal
content is touched — other agents own that.
Intended look: A confident, evenly-stacked column of full-width bands. One
generous breathing unit between every band so the page reads as a deliberate
sequence of tool-crates, never cramped or floaty. Sections that already set
their OWN padding-block (#services, #trust, #coverage — higher ID specificity)
keep it; this file is the global baseline for every other .sec and the source
of truth for the cadence. Transitions into the heavy/colored bands are crisped
with a 2px solid-red signature rule (only on band boxes no other agent has
given a ::before/::after and that don't already carry a top accent), so
white→white seams get a hairline beat and the page never blurs together.
Contrast: this file sets ONLY spacing + a red (#d5160c) divider bar — it never
sets text/background colors and never places text on a band, so it cannot
create a contrast problem. Dividers are solid #d5160c (palette red) against the
adjacent white/grey bands; full-bleed, decorative, pointer-events:none,
aria-hidden by nature (empty content), causing zero layout shift (positioned
absolute / fixed thin height).
Specificity & no-collision design:
- Baseline uses `body.home section.sec` (0-2-1) to decisively beat the engine's
base `body.home section.sec{padding:64px}` (equal specificity, loaded later)
while still LOSING to per-section ID rules (#services.sec, #trust,
#coverage.area-redesign = 1-x-x) which are intentional and owned elsewhere.
- Dividers only attach to band boxes whose ::before AND ::after are unused by
other agents and that lack an existing top accent: #materials (top edge),
#recent-projects, #cluster1-related-services, #contact, #faq, .blog-redesign.
(#trust already has a red top rule; #reviews a hazard stripe; #materials a red
top-border + a ::after corner — so #materials gets its divider on ::before
only, the dark #recent-projects gets a red cap, etc. No ::before/::after is
ever double-declared.)
Scoped to body.home .sec; every property !important; responsive (tighter on
mobile at 768px and 480px). */
/* ═══════════════════════════════════════════════════════════════════════════
1. GLOBAL BAND RHYTHM
One confident breathing unit, applied to every homepage .sec as the baseline.
Per-section ID overrides (services/trust/coverage) win by specificity — by
design — so this governs the remaining bands and the overall cadence.
═══════════════════════════════════════════════════════════════════════════ */
body.home section.sec{
padding-top:clamp(64px,8vw,104px)!important;
padding-bottom:clamp(64px,8vw,104px)!important;
position:relative!important; /* anchor for divider pseudo-elements */
}
/* The hero-adjacent quick-stat strip + the heavy carousel/CTA closers run on a
slightly tighter clamp in the engine; keep them in the same family so the
whole column shares ONE rhythm scale instead of two competing ones. */
body.home section.sec.hd-projects,
body.home section.sec.topical-final{
padding-top:clamp(64px,8vw,104px)!important;
padding-bottom:clamp(64px,8vw,104px)!important;
}
/* ── Adjacent-band seam control ──────────────────────────────────────────────
The engine collapses `.sec + .sec` top padding to 0 (shared seam). Make that
intentional and even: when two bands sit flush, they share a single rhythm gap
(the upper band's bottom padding) instead of doubling — keeps colored→white and
white→white transitions tight and deliberate, not floaty. */
body.home section.sec + section.sec{
padding-top:clamp(64px,8vw,104px)!important; /* re-assert: own the gap, not 0 */
}
/* ═══════════════════════════════════════════════════════════════════════════
2. THIN BAND DIVIDERS (sparing red signature rules BETWEEN bands)
Only on band boxes with FREE pseudo-elements and no pre-existing top accent.
Each is a 2px full-bleed solid-red rule — a crisp beat where bands meet.
Decorative only: empty content, pointer-events:none, no layout shift.
═══════════════════════════════════════════════════════════════════════════ */
/* Shared divider primitive (applied via the section-specific selectors below so
specificity stays in-lane and we never touch a pseudo another agent declared). */
/* #materials — white spec band. It already carries a 3px red top BORDER + a
::after hazard corner, so we do NOT add a top rule here; instead cap its
BOTTOM into the red Reviews band with a 2px red beat on ::before is taken?
::before is FREE on #materials → use it as a bottom seam rule. */
body.home section.sec#materials::before{
content:""!important;
position:absolute!important;
left:0!important; right:0!important; bottom:0!important;
height:2px!important;
background:#d5160c!important;
opacity:.9!important;
pointer-events:none!important;
z-index:1!important;
}
/* #recent-projects — dark project band. ::before/::after both FREE. Crisp red
rule on the TOP edge to slice it cleanly off the red Reviews band above, and a
matching rule on the BOTTOM to lead into Coverage. */
body.home section.sec#recent-projects::before,
body.home section.sec#recent-projects::after{
content:""!important;
position:absolute!important;
left:0!important; right:0!important;
height:2px!important;
background:#d5160c!important;
pointer-events:none!important;
z-index:2!important;
}
body.home section.sec#recent-projects::before{ top:0!important; }
body.home section.sec#recent-projects::after{ bottom:0!important; }
/* #cluster1-related-services — light #fafafa band. ::before FREE. Top red beat
to separate it from the band above. */
body.home section.sec#cluster1-related-services::before{
content:""!important;
position:absolute!important;
left:0!important; right:0!important; top:0!important;
height:2px!important;
background:#d5160c!important;
pointer-events:none!important;
z-index:1!important;
}
/* .blog-redesign — has no id; FREE pseudo. Top red beat. */
body.home section.sec.blog-redesign::before{
content:""!important;
position:absolute!important;
left:0!important; right:0!important; top:0!important;
height:2px!important;
background:#d5160c!important;
pointer-events:none!important;
z-index:1!important;
}
/* #contact — white CTA band. ::before FREE. Top red beat. */
body.home section.sec#contact::before{
content:""!important;
position:absolute!important;
left:0!important; right:0!important; top:0!important;
height:2px!important;
background:#d5160c!important;
pointer-events:none!important;
z-index:1!important;
}
/* #faq — #fafafc band. ::before FREE. Top red beat closing the rhythm before the
final topical band. */
body.home section.sec#faq::before{
content:""!important;
position:absolute!important;
left:0!important; right:0!important; top:0!important;
height:2px!important;
background:#d5160c!important;
pointer-events:none!important;
z-index:1!important;
}
/* ═══════════════════════════════════════════════════════════════════════════
3. RESPONSIVE — tighter, still confident, on smaller screens
═══════════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
body.home section.sec,
body.home section.sec.hd-projects,
body.home section.sec.topical-final,
body.home section.sec + section.sec{
padding-top:clamp(48px,9vw,64px)!important;
padding-bottom:clamp(48px,9vw,64px)!important;
}
/* keep dividers crisp but a touch thinner on mobile */
body.home section.sec#materials::before,
body.home section.sec#recent-projects::before,
body.home section.sec#recent-projects::after,
body.home section.sec#cluster1-related-services::before,
body.home section.sec.blog-redesign::before,
body.home section.sec#contact::before,
body.home section.sec#faq::before{
height:2px!important;
}
}
@media(max-width:480px){
body.home section.sec,
body.home section.sec.hd-projects,
body.home section.sec.topical-final,
body.home section.sec + section.sec{
padding-top:clamp(40px,11vw,52px)!important;
padding-bottom:clamp(40px,11vw,52px)!important;
}
}
/* --- SECTION: interactions --- */
/* SECTION: interactions — GLOBAL MICRO-INTERACTIONS + BUTTON SYSTEM (ELEVATION)
Intended look: one tactile Milwaukee interaction language across every homepage CTA,
card, and link. Hard, snappy 0.12s transforms (no soft easing). Buttons lift 2px on
hover with a hard offset shadow that SHIFTS to red (#d5160c), then press flat + inset
on :active. Cards lift 4px on hover, their black offset shadow rotating to red. Plain
in-copy links grow a red underline on hover. Every focusable element gets a 2px solid
red :focus-visible outline with a white gap — high-contrast on any band, light or dark.
Lane: ONLY motion/hover/active/focus + a card-lift utility. No base colors/layout set
here (other agents own those). prefers-reduced-motion strips all transforms.
Contrast: focus ring is red on a 2px white outline-offset gap, so it reads on red,
black, and white surfaces alike; no text colors are changed, so no band ever loses
legibility from this layer. Tap targets kept >=44px on touch CTAs. Scoped to body.home,
!important throughout, responsive + reduced-motion guarded. */
/* ============================================================
1. SHARED TRANSITION TOKEN — hard + snappy (0.12s), Milwaukee
Applied to every interactive surface. Transitions are cheap
(transform/box-shadow/outline/border/background) so no jank.
============================================================ */
body.home .btn,
body.home .btn-red,
body.home .btn-ghost,
body.home .btn-outline,
body.home a.btn-red,
body.home .hd-projects__btn,
body.home .svc-link,
body.home .blog-card-arrow,
body.home .sf-link-all,
body.home .sf-stars-link,
body.home .home-toc-link,
body.home .area-city-pill,
body.home .svc-card,
body.home .review-card,
body.home .blog-card,
body.home .sf-family-card,
body.home .card {
transition: transform .12s cubic-bezier(.2,.8,.2,1),
box-shadow .12s cubic-bezier(.2,.8,.2,1),
background-color .12s linear,
border-color .12s linear,
color .12s linear,
outline-color .12s linear !important;
will-change: transform !important;
}
/* ============================================================
2. BUTTON SYSTEM — hover lift + offset-shadow shift to red
We DO NOT set base bg/text color (section agents own those).
We only add the motion + shadow + press language.
============================================================ */
/* --- Primary red CTA: lift + hard RED offset shadow on hover --- */
body.home .btn-red:hover,
body.home a.btn-red:hover,
body.home .btn.btn-red:hover,
body.home .hd-projects__btn:hover {
transform: translate(-2px, -2px) !important;
box-shadow: 4px 4px 0 #000 !important;
}
/* Active: slam flat into the surface (tactile click) */
body.home .btn-red:active,
body.home a.btn-red:active,
body.home .btn.btn-red:active,
body.home .hd-projects__btn:active {
transform: translate(0, 0) !important;
box-shadow: 1px 1px 0 #000 !important;
}
/* --- Ghost / outline buttons: lift + RED offset shadow + red edge --- */
body.home .btn-ghost:hover,
body.home .btn.btn-ghost:hover,
body.home .btn-outline:hover,
body.home .btn.btn-outline:hover {
transform: translate(-2px, -2px) !important;
box-shadow: 4px 4px 0 #d5160c !important;
border-color: #d5160c !important;
}
body.home .btn-ghost:active,
body.home .btn.btn-ghost:active,
body.home .btn-outline:active,
body.home .btn.btn-outline:active {
transform: translate(0, 0) !important;
box-shadow: 1px 1px 0 #d5160c !important;
}
/* --- Generic .btn (no variant): same lift, neutral black shadow --- */
body.home .btn:not(.btn-red):not(.btn-ghost):not(.btn-outline):hover {
transform: translate(-2px, -2px) !important;
box-shadow: 4px 4px 0 #000 !important;
}
body.home .btn:not(.btn-red):not(.btn-ghost):not(.btn-outline):active {
transform: translate(0, 0) !important;
box-shadow: 1px 1px 0 #000 !important;
}
/* Touch targets: keep CTAs comfortably >=44px tall, no layout shift */
body.home .btn,
body.home .btn-red,
body.home .btn-ghost,
body.home .btn-outline,
body.home .hd-projects__btn {
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
/* ============================================================
3. CARD HOVER-LIFT UTILITY — consistent across all card types
translateY(-4px) + offset shadow that shifts from black to red.
Base shadow softens via box-shadow on hover only (no base change).
============================================================ */
body.home .svc-card:hover,
body.home .review-card:hover,
body.home .blog-card:hover,
body.home .sf-family-card:hover,
body.home .card.svc-card:hover {
transform: translateY(-4px) !important;
box-shadow: 6px 6px 0 #d5160c !important;
border-color: #d5160c !important;
z-index: 2 !important;
}
/* Pressing a card (e.g. tapping its link area) eases the lift back */
body.home .svc-card:active,
body.home .review-card:active,
body.home .blog-card:active,
body.home .sf-family-card:active {
transform: translateY(-1px) !important;
box-shadow: 3px 3px 0 #d5160c !important;
}
/* ============================================================
4. CARD-INTERNAL LINK ACCENT — arrow link nudges right on hover
Card "Roof Repair →" style links + project / blog arrows.
============================================================ */
body.home .svc-link:hover,
body.home .blog-card-arrow:hover,
body.home .sf-link-all:hover {
transform: translateX(3px) !important;
}
/* When the parent card is hovered, gently advance the arrow too */
body.home .svc-card:hover .svc-link,
body.home .blog-card:hover .blog-card-arrow {
transform: translateX(3px) !important;
}
/* ============================================================
5. GENERIC IN-COPY LINKS — red underline grows on hover
Targets prose links inside section bodies. We add the underline
motion only; link color is owned by section agents.
============================================================ */
body.home .body-md a:hover,
body.home .body-lg a:hover,
body.home .svc-desc a:hover,
body.home .home-lede a:hover,
body.home .area-lead a:hover,
body.home .hero-sub a:hover {
text-decoration: underline !important;
text-decoration-color: #d5160c !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
}
/* TOC + city pills: hairline lift, no color override */
body.home .home-toc-link:hover,
body.home .area-city-pill:hover {
transform: translateY(-1px) !important;
}
/* ============================================================
6. ACCESSIBLE FOCUS RINGS — red :focus-visible, white gap
2px white outline-offset gap makes the red ring legible on red,
black AND white bands. Applies to every focusable homepage
control/link. Mouse clicks (no :focus-visible) stay clean.
============================================================ */
body.home a:focus-visible,
body.home button:focus-visible,
body.home .btn:focus-visible,
body.home .btn-red:focus-visible,
body.home .btn-ghost:focus-visible,
body.home .btn-outline:focus-visible,
body.home .hd-projects__btn:focus-visible,
body.home .svc-link:focus-visible,
body.home .home-toc-link:focus-visible,
body.home .area-city-pill:focus-visible,
body.home .blog-card-arrow:focus-visible,
body.home .sf-link-all:focus-visible,
body.home .sf-stars-link:focus-visible,
body.home .svc-card a:focus-visible,
body.home .review-card a:focus-visible,
body.home .blog-card:focus-visible {
outline: 2px solid #d5160c !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 2px #fff !important;
border-radius: 0 !important;
}
/* Suppress legacy soft glow only when our hard ring is showing */
body.home a:focus-visible,
body.home button:focus-visible {
-webkit-tap-highlight-color: transparent !important;
}
/* ============================================================
7. RESPONSIVE — full-width tap targets, slightly larger press
============================================================ */
@media (max-width: 768px) {
body.home .btn,
body.home .btn-red,
body.home .btn-ghost,
body.home .btn-outline,
body.home .hd-projects__btn {
min-height: 48px !important;
}
/* Touch devices have no true hover: ease lifts so they don't "stick" */
body.home .svc-card:hover,
body.home .review-card:hover,
body.home .blog-card:hover,
body.home .sf-family-card:hover {
transform: translateY(-2px) !important;
box-shadow: 4px 4px 0 #d5160c !important;
}
body.home .btn-red:hover,
body.home a.btn-red:hover,
body.home .btn-ghost:hover,
body.home .btn-outline:hover,
body.home .hd-projects__btn:hover {
transform: translate(-1px, -1px) !important;
}
}
@media (max-width: 480px) {
/* Keep focus ring fully visible even with tight section padding */
body.home a:focus-visible,
body.home button:focus-visible,
body.home .btn:focus-visible {
outline-offset: 1px !important;
}
}
/* ============================================================
8. REDUCED MOTION — strip every transform/transition, keep
focus rings + shadow state changes (instant, no movement).
============================================================ */
@media (prefers-reduced-motion: reduce) {
body.home .btn,
body.home .btn-red,
body.home .btn-ghost,
body.home .btn-outline,
body.home .hd-projects__btn,
body.home .svc-link,
body.home .blog-card-arrow,
body.home .sf-link-all,
body.home .home-toc-link,
body.home .area-city-pill,
body.home .svc-card,
body.home .review-card,
body.home .blog-card,
body.home .sf-family-card,
body.home .card {
transition: none !important;
will-change: auto !important;
}
body.home .btn:hover,
body.home .btn-red:hover,
body.home a.btn-red:hover,
body.home .btn-ghost:hover,
body.home .btn-outline:hover,
body.home .hd-projects__btn:hover,
body.home .svc-card:hover,
body.home .review-card:hover,
body.home .blog-card:hover,
body.home .sf-family-card:hover,
body.home .svc-link:hover,
body.home .blog-card-arrow:hover,
body.home .sf-link-all:hover,
body.home .home-toc-link:hover,
body.home .area-city-pill:hover,
body.home .svc-card:hover .svc-link,
body.home .blog-card:hover .blog-card-arrow {
transform: none !important;
}
/* Hover still gives a non-motion cue: the red offset shadow + edge */
body.home .svc-card:hover,
body.home .review-card:hover,
body.home .blog-card:hover,
body.home .sf-family-card:hover {
box-shadow: 0 0 0 2px #d5160c !important;
}
}
/* ================= end hd27 ================= */
/* ===== hd27 integration fixes ===== */
/* process: defeat -webkit-text-fill masking on the white/grey step cards */
body.home #process .home-step__title{color:#111 !important;-webkit-text-fill-color:#111 !important}
body.home #process .home-step__body{color:#2a2a2a !important;-webkit-text-fill-color:#2a2a2a !important}
body.home #process .home-step__num{color:#fff !important;-webkit-text-fill-color:#fff !important}
/* founder: force the intended BLACK band so red frame/tab/CTA read (was a leftover red) */
body.home #mario,body.home #mario.home-section--soft{background:#000 !important}
body.home #mario .home-section__inner,body.home #mario .home-section__inner--narrow{background:transparent !important}
/* ===== end hd27 fixes ===== */
/* hero proof-tag: prior .hero-overlay::after set right/bottom:0 — constrain back to content size so it stops covering the photo */
body.home #hero .hero-overlay::after{right:auto !important;bottom:auto !important;width:auto !important;height:auto !important;max-width:none !important}
/* ===== hd29: multi-platform review proof strip ===== */
body.home .rev-platforms{display:flex !important;flex-wrap:wrap !important;gap:10px !important;justify-content:center !important;align-items:stretch !important;margin:28px auto 0 !important;padding:0 !important;max-width:780px !important}
body.home .rev-platforms .revp{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:4px !important;background:#000 !important;border:2px solid #000 !important;border-top:3px solid #d5160c !important;border-radius:0 !important;padding:12px 16px !important;min-width:108px !important;box-shadow:4px 4px 0 rgba(0,0,0,.25) !important}
body.home .rev-platforms .revp__site{font-family:"Barlow Semi Condensed",sans-serif !important;font-weight:700 !important;font-size:12px !important;letter-spacing:.06em !important;text-transform:uppercase !important;color:#fff !important;-webkit-text-fill-color:#fff !important;line-height:1 !important}
body.home .rev-platforms .revp__rate{font-family:"Barlow Semi Condensed",sans-serif !important;font-weight:800 !important;font-size:22px !important;color:#fff !important;-webkit-text-fill-color:#fff !important;display:inline-flex !important;align-items:center !important;gap:4px !important;line-height:1 !important}
body.home .rev-platforms .revp__star{color:#d5160c !important;-webkit-text-fill-color:#d5160c !important;font-size:15px !important}
body.home .rev-platforms .revp__count{font-family:"Barlow",sans-serif !important;font-weight:500 !important;font-size:11px !important;letter-spacing:.04em !important;text-transform:uppercase !important;color:#9c9c9c !important;-webkit-text-fill-color:#9c9c9c !important;line-height:1.2 !important}
@media(max-width:600px){body.home .rev-platforms{gap:8px !important}body.home .rev-platforms .revp{min-width:0 !important;flex:1 1 28% !important;padding:10px 6px !important}body.home .rev-platforms .revp__rate{font-size:18px !important}body.home .rev-platforms .revp__site{font-size:11px !important}}
/* ===== end hd29 ===== */
/* ===== hd30: trust section V7+V8 blend ===== */
/* TRUST — "V7+V8 BLEND" (final synthesis, voted 8–1)
───────────────────────────────────────────────────────────────────────────
CONCEPT: White Milwaukee-industrial band that answers "why choose us" with a
bold red-✓ CHECKLIST (V8 structural base), opened by a SINCE 1996 ·
FAMILY-OWNED, LATINO-OWNED heritage cue (V7 framing), and closed by ONE
full-bleed RED proof bar — the section's single accent moment.
RATING STATED ONCE (Contrarian's binding constraint): the visible 5-platform
.rev-platforms strip + a single ".rev-headline" line ("4.9★ · 241 verified
reviews · 5 platforms"). The duplicate rating UI is removed.
WHAT'S HIDDEN:
• .ring-wrap → display:none (kills the standalone 4.9 ring AND its
.ring-stats 99%/∞/30yr — both duplicated the strip/checklist/proof bar).
Nothing else is hidden; every credential keeps its text label.
PERFORMANCE / A11Y mandate (no shortcuts):
• NO copy baked into ::before/::after content — every word lives in real
DOM (see blend-html-edits.md): heritage line, rating line, benefit tails,
proof-bar text. The only ::before/::after here are non-text decoration
(the red top rule, the eyebrow tick).
• NO CSS counters. NO load-bearing display:contents.
• The checklist ✓ is a real white glyph inside a red square (colorblind-safe:
shape + glyph, not color alone) and each row keeps its written title.
CONTRAST INTENT (by construction, AA+):
• White band → all body/title text forced near-#000 on #fff.
• Red ✓ squares carry a #fff glyph (#fff on #d5160c ≈ 4.5:1).
• Red proof bar → #fff text + bold #fff on #d5160c.
• Review chips → #000-on-#fff. No dark-on-dark / light-on-light anywhere.
PALETTE (strict): #d5160c · #9c9c9c · #000 · #fff. Type: Barlow Semi
Condensed (display) + Barlow (body). Sharp corners, 2px borders, hard offset
shadows. Scoped to body.home #trust; every property !important (integration).
─────────────────────────────────────────────────────────────────────────── */
/* ============================== SECTION SHELL ============================== */
body.home #trust{
background:#fff !important;
color:#000 !important;
border-top:3px solid #000 !important;
border-bottom:3px solid #000 !important;
padding:clamp(52px,6.5vw,96px) 0 0 !important;
position:relative !important;
overflow:hidden !important;
}
/* single thin red top rule — decoration only, no text */
body.home #trust::before{
content:"" !important;
position:absolute !important;
top:0 !important; left:0 !important; right:0 !important;
height:5px !important;
background:#d5160c !important;
z-index:3 !important;
}
/* trust-inner: single-column flow; ring-wrap removed, guarantee → proof bar */
body.home #trust .trust-inner{
display:block !important;
max-width:1120px !important;
margin:0 auto !important;
padding:0 clamp(18px,4vw,48px) clamp(40px,5vw,72px) !important;
position:relative !important;
z-index:1 !important;
}
/* intro
(eyebrow/h2/body-lg/strip/checklist) spans full width */
body.home #trust .trust-inner>div:first-child{
display:block !important;
max-width:none !important;
width:100% !important;
}
/* ============================== HERITAGE CUE (V7) ========================== */
/* real element added via HTML-edits, immediately above the eyebrow */
body.home #trust .trust-heritage{
display:inline-flex !important;
align-items:center !important;
gap:10px !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.14em !important;
font-size:clamp(12px,1.3vw,15px) !important;
line-height:1 !important;
color:#fff !important;
background:#000 !important;
border:2px solid #000 !important;
box-shadow:4px 4px 0 #d5160c !important;
padding:8px 14px !important;
margin:0 0 16px !important;
}
body.home #trust .trust-heritage b,
body.home #trust .trust-heritage strong{
color:#d5160c !important;
font-weight:800 !important;
}
/* ============================== HEADER (leads) ============================ */
body.home #trust .eyebrow{
display:inline-flex !important;
align-items:center !important;
gap:10px !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:.18em !important;
font-size:13px !important;
line-height:1 !important;
color:#d5160c !important;
margin:0 0 14px !important;
}
body.home #trust .eyebrow::before{
content:"" !important; /* decorative tick, no text */
width:38px !important;
height:4px !important;
background:#d5160c !important;
display:inline-block !important;
}
body.home #trust .h2{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:-.01em !important;
line-height:.92 !important;
font-size:clamp(34px,5vw,62px) !important;
color:#000 !important;
margin:0 !important;
max-width:18ch !important;
}
body.home #trust .body-lg{
font-family:"Barlow",sans-serif !important;
color:rgba(0,0,0,.82) !important;
font-size:clamp(15px,1.4vw,17px) !important;
line-height:1.6 !important;
max-width:64ch !important;
margin:16px 0 0 !important;
}
body.home #trust .body-lg a{
color:#d5160c !important;
font-weight:700 !important;
text-decoration:none !important;
border-bottom:2px solid rgba(213,22,12,.35) !important;
transition:border-color .15s ease,background .15s ease !important;
}
body.home #trust .body-lg a:hover,
body.home #trust .body-lg a:focus-visible{
border-bottom-color:#d5160c !important;
background:rgba(213,22,12,.08) !important;
outline:2px solid #d5160c !important;
outline-offset:2px !important;
}
/* ===================== REVIEW STRIP + SINGLE RATING LINE =================== */
/* rating headline is a REAL element (.rev-headline) added directly before the
strip — NOT injected via ::before. State the rating ONCE, here. */
body.home #trust .rev-headline{
display:block !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.04em !important;
font-size:clamp(15px,1.7vw,21px) !important;
line-height:1.1 !important;
color:#000 !important;
margin:clamp(28px,3.5vw,42px) 0 12px !important;
padding:0 0 0 16px !important;
position:relative !important;
}
body.home #trust .rev-headline::before{
content:"" !important; /* decorative red bar, no text */
position:absolute !important;
left:0 !important; top:50% !important;
transform:translateY(-50%) !important;
width:6px !important;
height:1.05em !important;
background:#d5160c !important;
}
body.home #trust .rev-headline .rev-headline__star{
color:#d5160c !important;
font-weight:800 !important;
}
body.home #trust .rev-platforms{
display:flex !important;
flex-wrap:wrap !important;
gap:10px !important;
margin:0 !important;
padding:0 !important;
border:0 !important;
}
body.home #trust .revp{
display:flex !important;
align-items:center !important;
gap:8px !important;
background:#fff !important;
border:2px solid #000 !important;
border-radius:0 !important;
box-shadow:3px 3px 0 #d5160c !important;
padding:9px 13px !important;
min-height:44px !important; /* ≥44px tap target */
flex:0 0 auto !important;
}
body.home #trust .revp__site{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:700 !important;
text-transform:uppercase !important;
letter-spacing:.04em !important;
font-size:12px !important;
color:#000 !important;
}
body.home #trust .revp__rate{
display:inline-flex !important;
align-items:center !important;
gap:3px !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
font-size:14px !important;
color:#000 !important;
}
body.home #trust .revp__star{ color:#d5160c !important; font-size:13px !important; }
body.home #trust .revp__count{
font-family:"Barlow",sans-serif !important;
font-size:11px !important;
color:rgba(0,0,0,.55) !important;
white-space:nowrap !important;
}
/* ============================== THE CHECKLIST (V8) ======================== */
body.home #trust .cred-list{
display:flex !important;
flex-direction:column !important;
gap:0 !important;
margin:clamp(30px,4vw,46px) 0 0 !important;
border:3px solid #000 !important;
border-radius:0 !important;
box-shadow:9px 9px 0 #000 !important;
background:#fff !important;
}
body.home #trust .cred-row{
display:grid !important;
grid-template-columns:auto auto 1fr !important;
align-items:center !important;
gap:clamp(14px,2vw,22px) !important;
background:#fff !important;
border:0 !important;
border-top:2px solid #000 !important;
border-radius:0 !important;
box-shadow:none !important;
padding:clamp(16px,2.2vw,24px) clamp(16px,2.4vw,28px) !important;
position:relative !important;
min-height:64px !important;
transition:background .14s ease !important;
}
body.home #trust .cred-row:first-child{ border-top:0 !important; }
body.home #trust .cred-row:hover{ background:rgba(213,22,12,.05) !important; }
body.home #trust .cred-row::before{ content:none !important; }
/* RED ✓ SQUARE — repurposes the floating .cred-badge into the lead checkmark.
Hide the badge's own text (Top 1% / ✓ / ∞ / 24h) and paint a real ✓ glyph.
Colorblind-safe: it is a SHAPE + glyph; the row title still carries the words. */
body.home #trust .cred-badge{
order:-1 !important;
align-self:center !important;
width:clamp(44px,4.4vw,56px) !important;
height:clamp(44px,4.4vw,56px) !important;
min-width:0 !important;
padding:0 !important;
background:#d5160c !important;
border:0 !important;
border-radius:0 !important;
box-shadow:3px 3px 0 #000 !important;
color:transparent !important;
font-size:0 !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
white-space:nowrap !important;
position:relative !important;
}
body.home #trust .cred-badge::before{
content:"\2713" !important; /* ✓ glyph — decorative, title holds meaning */
color:#fff !important;
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
font-size:clamp(26px,2.8vw,34px) !important;
line-height:1 !important;
}
/* small icon chip — kept, de-emphasized vs the red ✓ */
body.home #trust .cred-ic{
width:clamp(38px,3.6vw,46px) !important;
height:clamp(38px,3.6vw,46px) !important;
flex:0 0 auto !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:clamp(18px,1.9vw,22px) !important;
line-height:1 !important;
background:#000 !important;
border:0 !important;
border-radius:0 !important;
color:#fff !important;
}
body.home #trust .cred-ic img{
width:30px !important;
height:30px !important;
object-fit:contain !important;
filter:none !important;
}
body.home #trust .cred-title{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.005em !important;
font-size:clamp(16px,1.8vw,21px) !important;
line-height:1.08 !important;
color:#000 !important;
}
body.home #trust .cred-sub{
font-family:"Barlow",sans-serif !important;
font-size:clamp(12.5px,1.25vw,14.5px) !important;
line-height:1.45 !important;
color:rgba(0,0,0,.62) !important;
margin-top:5px !important;
}
/* ====================== DUPLICATE RATING UI — REMOVED ===================== */
/* the whole ring column goes: standalone 4.9 ring + its 99%/∞/30yr stats.
(No display:contents — a plain display:none on the wrapper, since it holds
only .ring and .ring-stats, both intentionally dropped.) */
body.home #trust .ring-wrap{ display:none !important; }
/* ============== ONE FULL-BLEED RED PROOF BAR (repurpose .trust-guarantee) == */
/* the section's single accent moment. Text is real DOM (replaced via
HTML-edits): SINCE 1996 · CSLB #749551 · BBB A+ · Family-owned, Latino-owned.
No rating repeated here. */
body.home #trust .trust-guarantee{
display:flex !important;
align-items:center !important;
gap:16px !important;
max-width:none !important;
margin:clamp(38px,5vw,64px) 0 0 !important;
/* full-bleed past the .trust-inner side padding */
margin-left:calc(-1 * clamp(18px,4vw,48px)) !important;
margin-right:calc(-1 * clamp(18px,4vw,48px)) !important;
padding:clamp(18px,2.6vw,26px) clamp(18px,5vw,72px) !important;
background:#d5160c !important;
border:0 !important;
border-top:3px solid #000 !important;
border-radius:0 !important;
box-shadow:none !important;
position:relative !important;
}
body.home #trust .trust-guarantee::before{ content:none !important; }
body.home #trust .trust-guarantee-icon{
width:34px !important;
height:34px !important;
flex:0 0 34px !important;
color:#fff !important;
stroke:#fff !important;
margin:0 !important;
}
body.home #trust .trust-guarantee-text{
font-family:"Barlow",sans-serif !important;
font-size:clamp(13px,1.4vw,16px) !important;
line-height:1.5 !important;
color:#fff !important;
margin:0 !important;
}
body.home #trust .trust-guarantee-text strong{
font-family:"Barlow Semi Condensed",sans-serif !important;
font-weight:800 !important;
text-transform:uppercase !important;
letter-spacing:.03em !important;
color:#fff !important;
}
/* keep scroll-reveal classes from hiding content */
body.home #trust .rv{ opacity:1 !important; transform:none !important; }
/* ============================== RESPONSIVE — ≤768 ========================= */
@media (max-width:768px){
body.home #trust{ padding:46px 0 0 !important; }
body.home #trust .cred-list{ box-shadow:6px 6px 0 #000 !important; }
body.home #trust .cred-row{
grid-template-columns:auto auto 1fr !important;
gap:12px !important;
padding:14px 14px !important;
}
body.home #trust .cred-badge{ box-shadow:2px 2px 0 #000 !important; }
body.home #trust .revp{ box-shadow:2px 2px 0 #d5160c !important; }
/* platform strip GRID-LOCKED 2-up — never a single stacked list */
body.home #trust .rev-platforms{
display:grid !important;
grid-template-columns:repeat(2,1fr) !important;
gap:10px !important;
}
body.home #trust .revp{
justify-content:flex-start !important;
flex:1 1 auto !important;
min-width:0 !important;
}
}
/* ============================== RESPONSIVE — ≤480 ========================= */
@media (max-width:480px){
body.home #trust .h2{ font-size:clamp(30px,9vw,40px) !important; }
body.home #trust .trust-heritage{ font-size:12px !important; box-shadow:3px 3px 0 #d5160c !important; }
body.home #trust .rev-headline{ font-size:15px !important; }
/* checklist rows stack cleanly: red ✓ + text; drop the small icon chip */
body.home #trust .cred-row{
grid-template-columns:auto 1fr !important;
gap:12px !important;
align-items:center !important;
min-height:64px !important;
}
body.home #trust .cred-ic{ display:none !important; } /* red ✓ is the single mark on tiny screens */
body.home #trust .cred-badge{ order:-1 !important; align-self:center !important; }
body.home #trust .cred-title{ font-size:clamp(15px,5vw,18px) !important; }
/* strip stays 2-up (grid from ≤768 holds) */
body.home #trust .rev-platforms{ grid-template-columns:repeat(2,1fr) !important; }
}
/* fix: platform chips were white-on-white (names+ratings invisible). Force black chips w/ visible text — matches the reviews-section strip. */
body.home #trust .rev-platforms .revp{background:#000 !important;border:2px solid #000 !important;border-top:3px solid #d5160c !important}
body.home #trust .rev-platforms .revp__site{color:#fff !important;-webkit-text-fill-color:#fff !important}
body.home #trust .rev-platforms .revp__rate{color:#fff !important;-webkit-text-fill-color:#fff !important}
body.home #trust .rev-platforms .revp__star{color:#d5160c !important;-webkit-text-fill-color:#d5160c !important}
body.home #trust .rev-platforms .revp__count{color:#9c9c9c !important;-webkit-text-fill-color:#9c9c9c !important}