/*
Theme Name: Raise The Roof AZ
Theme URI: https://raisetheroofaz.com
Author: Magnet Marketing SEO
Description: Custom homepage theme for Raise The Roof AZ, LLC. Phoenix roofing contractor.
Version: 1.0.0
License: Proprietary
Text Domain: raisetheroof
*/
/* ============================================================ FONTS */
@font-face{font-family:BarlowCond;src:url(assets/fonts/bc-bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/b-reg.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(assets/fonts/b-med.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap}
/* ============================================================ TOKENS */
:root{
--ink:#0B1220;
--ink-2:#131E33;
--ink-3:#1E2B45;
--blue:#0152E3;
--blue-dk:#0A3AA8;
--blue-lt:#4C8CFF;
--paper:#fff;
--mist:#F1F5FA;
--mist-2:#E4EBF4;
--line:rgba(11,18,32,.13);
--line-d:rgba(255,255,255,.15);
--amber:#FFB020;
--muted:#5A6880;
--wrap:1200px;
--r:4px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
font-family:Barlow,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
color:var(--ink);background:var(--paper);
font-size:17px;line-height:1.6;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3,h4,.dsp{
font-family:BarlowCond,"Barlow Condensed","Arial Narrow",Arial,sans-serif;
font-weight:700;line-height:1.02;letter-spacing:-.005em;text-transform:uppercase;
}
.eyebrow{
font-family:Barlow,sans-serif;font-weight:500;font-size:13px;letter-spacing:.22em;
text-transform:uppercase;
}
/* ============================================================ BUTTONS */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;
letter-spacing:.05em;font-size:20px;line-height:1;
padding:19px 30px;border-radius:var(--r);border:2px solid transparent;
transition:transform .12s ease, background .15s ease, color .15s ease;
white-space:nowrap;cursor:pointer;
}
.btn:hover{transform:translateY(-2px)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-dk)}
.btn-amber{background:var(--amber);color:var(--ink)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-3)}
/* ============================================================ UTILITY BAR */
.util{background:var(--ink);color:rgba(255,255,255,.82);font-size:13.5px}
.util .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:42px}
.util b{color:#fff;font-weight:500}
.util .roc{letter-spacing:.14em;text-transform:uppercase;font-size:12px;color:var(--blue-lt);font-weight:500}
.util .r{display:flex;align-items:center;gap:22px}
.util a:hover{color:#fff}
@media(max-width:820px){.util .hide-sm{display:none}}
@media(max-width:560px){
.util .wrap{height:auto;padding-top:8px;padding-bottom:8px;gap:10px}
.util .roc{font-size:10.5px;letter-spacing:.10em;line-height:1.3}
.util .r a{white-space:nowrap}
}
/* ============================================================ HEADER */
.hdr{background:var(--ink-2);border-bottom:1px solid var(--line-d);position:sticky;top:0;z-index:60}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:22px;height:84px}
.hdr .logo img{height:44px;width:auto}
.nav{display:flex;align-items:center;gap:26px}
.nav a{
font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;
font-size:17px;letter-spacing:.05em;color:rgba(255,255,255,.86);
padding:6px 0;border-bottom:2px solid transparent;
}
.nav a:hover,.nav a.on{color:#fff;border-bottom-color:var(--blue-lt)}
.hdr .cta{display:flex;align-items:center;gap:14px}
.hdr .tel{font-family:BarlowCond,sans-serif;font-weight:700;font-size:26px;color:#fff;letter-spacing:.01em}
.hdr .tel span{display:block;font-family:Barlow,sans-serif;font-weight:500;font-size:11px;
letter-spacing:.2em;color:var(--blue-lt);text-transform:uppercase;line-height:1;margin-bottom:3px}
.hdr .btn{padding:14px 22px;font-size:17px}
@media(max-width:1080px){.nav{display:none}}
@media(max-width:560px){.hdr .tel{display:none}.hdr .wrap{height:72px}}
/* ============================================================ HERO */
.hero{position:relative;height:750px;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:62% 42%;filter:saturate(1.06) contrast(1.03)}
/* the subject sits right of center in this frame, so pull focus right and let the
sky carry the headline on the left */
.hero .scrim{
position:absolute;inset:0;
background:
linear-gradient(100deg,rgba(11,18,32,.94) 0%,rgba(11,18,32,.86) 32%,rgba(11,18,32,.50) 62%,rgba(11,18,32,.24) 100%),
linear-gradient(180deg,rgba(11,18,32,.55) 0%,rgba(11,18,32,0) 26%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-in{max-width:720px;color:#fff}
.hero .eyebrow{color:var(--blue-lt);margin-bottom:16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero .eyebrow i{display:inline-block;width:26px;height:2px;background:var(--blue-lt);font-style:normal}
.hero h1{font-size:76px;color:#fff;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--blue-lt);display:block}
.hero p.lead{font-size:20px;line-height:1.5;color:rgba(255,255,255,.9);max-width:600px;margin-bottom:30px}
.hero .acts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.hero .pts{display:flex;gap:26px;flex-wrap:wrap;list-style:none}
.hero .pts li{
font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;font-size:17px;
letter-spacing:.04em;color:#fff;display:flex;align-items:center;gap:9px;
}
.hero .pts li::before{content:"";width:9px;height:9px;background:var(--amber);border-radius:50%;flex:0 0 auto}
@media(max-width:1080px){.hero{height:620px}.hero h1{font-size:58px}}
@media(max-width:640px){
.hero{height:auto;min-height:540px;padding:54px 0 46px}
.hero h1{font-size:42px}
.hero p.lead{font-size:17.5px}
.hero .acts .btn{width:100%}
.hero .scrim{background:linear-gradient(180deg,rgba(11,18,32,.93) 0%,rgba(11,18,32,.88) 60%,rgba(11,18,32,.93) 100%)}
}
/* ============================================================ BADGE STRIP */
.badges{background:var(--mist);border-bottom:1px solid var(--line)}
.badges .wrap{display:flex;align-items:center;gap:34px;flex-wrap:wrap;justify-content:space-between;padding-top:22px;padding-bottom:22px}
.badges .lbl{font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;
font-size:16px;letter-spacing:.12em;color:var(--muted);max-width:180px;line-height:1.15}
.badges .row{display:flex;align-items:center;gap:36px;flex-wrap:wrap}
.badges img{height:46px;width:auto;opacity:.9}
@media(max-width:640px){.badges .row{gap:22px}.badges img{height:34px}}
/* ============================================================ STATS */
.stats{background:var(--blue);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
.stat{padding:36px 26px;border-right:1px solid rgba(255,255,255,.22)}
.stat:last-child{border-right:0}
.stat .n{font-family:BarlowCond,sans-serif;font-weight:700;font-size:52px;line-height:.95;letter-spacing:-.01em}
.stat .l{font-size:15px;line-height:1.35;color:rgba(255,255,255,.92);margin-top:6px}
@media(max-width:860px){
.stats .wrap{grid-template-columns:repeat(2,1fr)}
.stat{border-bottom:1px solid rgba(255,255,255,.22)}
.stat:nth-child(2n){border-right:0}
.stat:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:420px){.stat .n{font-size:42px}}
/* ============================================================ SECTION SHELL */
.sec{padding:96px 0}
.sec.tight{padding:76px 0}
.sec.mist{background:var(--mist)}
.sec.dark{background:var(--ink);color:#fff}
.sec.dark .kick{color:var(--blue-lt)}
.kick{color:var(--blue);margin-bottom:14px}
.sec h2{font-size:52px;margin-bottom:16px;max-width:900px}
.sec .sub{font-size:19px;color:var(--muted);max-width:760px;line-height:1.55}
.sec.dark .sub{color:rgba(255,255,255,.78)}
.hd-split{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:52px;flex-wrap:wrap}
.hd-split>div{flex:1 1 440px;min-width:0}
.hd-split .sub{flex:1 1 400px;max-width:520px;padding-bottom:6px}
@media(max-width:760px){.sec{padding:64px 0}.sec h2{font-size:38px}.sec .sub{font-size:17.5px}}
/* ============================================================ SERVICES */
.svcs{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc{
background:#fff;border:1px solid var(--line);border-radius:var(--r);
padding:34px 30px 30px;position:relative;overflow:hidden;
transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.svc::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--blue);
transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.svc:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,18,32,.10);border-color:transparent}
.svc:hover::before{transform:scaleX(1)}
.svc .tag{font-family:Barlow,sans-serif;font-weight:500;font-size:11.5px;letter-spacing:.2em;
text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.svc.res .tag{color:#B8721A}
.svc.res::before{background:var(--amber)}
.svc h3{font-size:29px;margin-bottom:10px}
.svc p{font-size:16.5px;color:var(--muted);line-height:1.5;margin-bottom:18px}
.svc ul{list-style:none;border-top:1px solid var(--line);padding-top:16px}
.svc li{font-size:15.5px;padding:5px 0 5px 20px;position:relative;color:var(--ink-3)}
.svc li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:50%;background:var(--mist-2)}
@media(max-width:980px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.svcs{grid-template-columns:1fr}}
/* ============================================================ WHY (dark, 2 col) */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line-d);border:1px solid var(--line-d)}
.why .cell{background:var(--ink);padding:32px 30px}
.why .cell h4{font-size:25px;color:#fff;margin-bottom:8px;display:flex;align-items:baseline;gap:12px}
.why .cell h4 span{font-family:Barlow,sans-serif;font-weight:500;font-size:13px;color:var(--blue-lt);letter-spacing:.16em}
.why .cell p{font-size:16px;color:rgba(255,255,255,.74);line-height:1.5}
@media(max-width:760px){.why{grid-template-columns:1fr}}
/* ============================================================ PROCESS */
.proc{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s}
.step{padding:0 26px 0 0;position:relative}
.step::after{content:"";position:absolute;right:13px;top:20px;bottom:0;width:1px;background:var(--line)}
.step:last-child::after{display:none}
.step .n{
counter-increment:s;font-family:BarlowCond,sans-serif;font-weight:700;font-size:15px;
width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;
display:flex;align-items:center;justify-content:center;margin-bottom:16px;letter-spacing:.04em;
}
.step .n::before{content:"0" counter(s)}
.step h4{font-size:22px;margin-bottom:7px}
.step p{font-size:15.5px;color:var(--muted);line-height:1.5}
@media(max-width:980px){.proc{grid-template-columns:repeat(2,1fr);gap:34px 22px}.step::after{display:none}}
@media(max-width:520px){.proc{grid-template-columns:1fr}}
/* ============================================================ AREAS */
.areas-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.areas-grid span{
font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;font-size:19px;
letter-spacing:.03em;padding:11px 20px;border:1px solid var(--line);border-radius:var(--r);
background:#fff;color:var(--ink);
}
.areas-grid span.hq{background:var(--ink);color:#fff;border-color:var(--ink)}
.areas-split{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center}
@media(max-width:900px){.areas-split{grid-template-columns:1fr;gap:34px}}
/* ============================================================ FAQ */
.faqs{max-width:900px;margin:0 auto;border-top:1px solid var(--line)}
.faq{border-bottom:1px solid var(--line)}
.faq summary{
list-style:none;cursor:pointer;padding:24px 46px 24px 0;position:relative;
font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;
font-size:25px;line-height:1.15;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
content:"";position:absolute;right:8px;top:32px;width:14px;height:14px;
border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);
transform:rotate(45deg);transition:transform .18s ease;
}
.faq[open] summary::after{transform:rotate(-135deg);top:36px}
.faq .a{padding:0 46px 26px 0;font-size:17px;color:var(--muted);line-height:1.6}
@media(max-width:640px){.faq summary{font-size:21px}}
/* ============================================================ CTA BAND */
.band{background:var(--blue);color:#fff;padding:64px 0}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap}
.band h2{font-size:46px;color:#fff;max-width:640px}
.band p{color:rgba(255,255,255,.9);font-size:18px;margin-top:10px;max-width:560px}
.band .acts{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.band .tel{font-family:BarlowCond,sans-serif;font-weight:700;font-size:44px;color:#fff;line-height:1}
@media(max-width:760px){.band h2{font-size:34px}.band .tel{font-size:34px}}
/* ============================================================ FOOTER */
.ftr{background:var(--ink);color:rgba(255,255,255,.72);padding:64px 0 0}
.ftr-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:42px;padding-bottom:48px}
.ftr img.logo{height:50px;width:auto;margin-bottom:20px}
.ftr h5{font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;font-size:19px;
letter-spacing:.08em;color:#fff;margin-bottom:16px}
.ftr a:hover{color:#fff}
.ftr ul{list-style:none}
.ftr li{padding:5px 0;font-size:16px}
.ftr .roc{margin-top:18px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-lt)}
.ftr .bot{border-top:1px solid var(--line-d);padding:22px 0;font-size:14.5px;
display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:900px){.ftr-cols{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:520px){.ftr-cols{grid-template-columns:1fr}}
/* ============================================================ MOBILE CALL BAR */
.callbar{display:none}
@media(max-width:640px){
.callbar{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;
background:var(--ink);border-top:2px solid var(--blue);
}
.callbar a{flex:1 1 0;text-align:center;padding:15px 8px;color:#fff;
font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;font-size:18px;letter-spacing:.05em}
.callbar a+a{background:var(--blue)}
body{padding-bottom:56px}
}
/* ==========================================================================
"THE PITCH" — v1.1 design layer
One idea, applied consistently: a roof pitch is an angle, so the page's
band transitions are angled and they ALTERNATE direction as you scroll,
the way a roofline profile does. Everything below serves that idea or the
legibility of it. Nothing here is decoration for its own sake.
Angles are done with clip-path, never rotate, because a rotated block
overflows the viewport and a clipped one cannot.
========================================================================== */
:root{ --pitch: 42px; }
/* --- 1. THE PITCH: alternating angled band edges ------------------------- */
.hero{
clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--pitch)), 0 100%);
margin-bottom:calc(var(--pitch) * -1);
padding-bottom:var(--pitch);
}
.badges{
/* the stats band's angled top edge overlaps this strip by --pitch, so the
badges need that much clearance top AND bottom or the right-hand ones
get eaten by the angle */
padding-top:var(--pitch);
padding-bottom:calc(var(--pitch) + 6px);
}
.stats{
clip-path:polygon(0 var(--pitch), 100% 0, 100% 100%, 0 100%);
margin-top:calc(var(--pitch) * -1);
padding-top:var(--pitch);
position:relative;z-index:2;
}
.sec.dark{
clip-path:polygon(0 0, 100% var(--pitch), 100% 100%, 0 calc(100% - var(--pitch)));
margin:calc(var(--pitch) * -1) 0;
padding-top:calc(96px + var(--pitch));
padding-bottom:calc(96px + var(--pitch));
position:relative;
}
.band{
clip-path:polygon(0 var(--pitch), 100% 0, 100% 100%, 0 100%);
margin-top:calc(var(--pitch) * -1);
padding-top:calc(64px + var(--pitch));
}
@media(max-width:760px){ :root{ --pitch:24px } }
/* --- 2. Hero: grain + a credential plate that breaks the band ------------ */
.hero .grain{
position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
background-image:url("data:image/svg+xml,");
mix-blend-mode:overlay;
}
.plate{
position:absolute;right:24px;bottom:calc(var(--pitch) + 34px);z-index:3;
background:rgba(11,18,32,.86);border:1px solid rgba(76,140,255,.45);
border-left:4px solid var(--amber);
padding:20px 26px;max-width:250px;backdrop-filter:blur(3px);
}
.plate .n{font-family:BarlowCond,sans-serif;font-weight:700;font-size:52px;line-height:.9;color:#fff}
.plate .t{font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;
font-size:16px;letter-spacing:.09em;color:var(--amber);margin-top:4px}
.plate .s{font-size:14px;color:rgba(255,255,255,.72);margin-top:8px;line-height:1.4}
@media(max-width:1180px){.plate{display:none}}
/* --- 3. Roof-mark watermark in the dark band ---------------------------- */
/* 🔴 overflow:hidden is load-bearing. Without it this watermark sits 90px past
the viewport and adds 90px of horizontal scroll to the WHOLE document.
clip-path on the parent does NOT stop that: it clips painting, not the
scrollable overflow region. The element-by-element h-scroll check misses it
too, because a ::before is not in querySelectorAll('body *'). scrollWidth
vs clientWidth is the only test that catches it. */
.sec.dark{overflow:hidden}
.sec.dark::before{
content:"";position:absolute;right:-60px;top:50%;transform:translateY(-50%);
width:520px;height:520px;pointer-events:none;opacity:.055;
background:url("data:image/svg+xml,") no-repeat center/contain;
}
/* --- 4. Service cards: ghost numeral + notched corner -------------------- */
.svcs{counter-reset:svc}
.svc{counter-increment:svc}
.svc::after{
content:"0" counter(svc);
position:absolute;right:16px;bottom:6px;
font-family:BarlowCond,sans-serif;font-weight:700;font-size:104px;line-height:1;
color:var(--ink);opacity:.045;pointer-events:none;letter-spacing:-.03em;
}
.svc{clip-path:polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%)}
/* --- 5. Stat numerals get a hairline rule, so the band reads as a ledger - */
.stat .n{position:relative;display:inline-block;padding-bottom:10px}
.stat .n::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:3px;background:rgba(255,255,255,.55)}
/* --- 6. Process: connect the steps with a rule the dots sit on ----------- */
.proc{position:relative}
@media(min-width:981px){
.proc::before{content:"";position:absolute;left:21px;right:21px;top:20px;height:2px;background:var(--mist-2);z-index:0}
.step{position:relative;z-index:1}
.step .n{box-shadow:0 0 0 8px var(--mist)}
.step::after{display:none}
}
/* --- 7. Area pills: the HQ pill earns its emphasis ----------------------- */
.areas-grid span{transition:transform .13s ease, border-color .13s ease, color .13s ease}
.areas-grid span:hover{transform:translateY(-2px);border-color:var(--blue);color:var(--blue)}
.areas-grid span.hq{position:relative;padding-left:38px}
.areas-grid span.hq::before{
content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);
width:8px;height:8px;border-radius:50%;background:var(--amber);
box-shadow:0 0 0 4px rgba(255,176,32,.28);
}
/* --- 8. Section headings: a pitch tick before the eyebrow ---------------- */
.kick{display:inline-flex;align-items:center;gap:10px}
.kick::before{
content:"";width:16px;height:9px;flex:0 0 auto;
background:currentColor;
clip-path:polygon(0 100%, 50% 0, 100% 100%, 76% 100%, 50% 38%, 24% 100%);
}
/* --- 9. Reveal on scroll, and honor reduced motion --------------------- */
/* 🔴 NEVER start real content at opacity 0. A reveal that depends on JS or on an
observer firing can leave a screen of blank white under the hero, and that is what
a client reports as a broken page (Raise The Roof, 2026-08-21). The entrance is now
a TRANSFORM only: with no JS, a slow script or a missed observer, every word is
still on the page and readable. */
[data-rv]{transform:translateY(16px);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
[data-rv].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
[data-rv]{opacity:1;transform:none;transition:none}
.btn:hover,.svc:hover,.areas-grid span:hover{transform:none}
}
/* --- 10. Focus states, because keyboard users exist ---------------------- */
a:focus-visible,summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:2px}
/* ==========================================================================
v1.2 — PHOTOGRAPHY
Images are pulled from the client's own media library (their gallery set),
filtered to the frames that are region-neutral: roof texture, crews at work,
aerial commercial. The wide "house on a green lawn" frames are deliberately
NOT used, they are visibly not Arizona. See LOG.md 2026-08-20.
========================================================================== */
/* --- service cards get a photo head --------------------------------------- */
.svc{padding:0;display:flex;flex-direction:column}
.svc .ph{position:relative;overflow:hidden;aspect-ratio:760/532;background:var(--mist-2)}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.svc:hover .ph img{transform:scale(1.055)}
.svc .ph::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,18,32,0) 45%,rgba(11,18,32,.42) 100%)}
.svc .bd{padding:26px 30px 30px;display:flex;flex-direction:column;flex:1 1 auto}
.svc .tag{position:absolute;left:0;bottom:0;z-index:2;margin:0;
background:var(--blue);color:#fff;padding:8px 14px;letter-spacing:.18em;font-size:11px}
.svc.res .tag{background:var(--amber);color:var(--ink)}
.svc ul{margin-top:auto}
.svc::after{bottom:auto;top:calc(aspect-ratio);display:none} /* ghost numeral moves */
.svc .bd::after{
content:"0" attr(data-n);position:absolute;right:14px;bottom:4px;
font-family:BarlowCond,sans-serif;font-weight:700;font-size:92px;line-height:1;
color:var(--ink);opacity:.045;pointer-events:none;letter-spacing:-.03em;
}
.svc .bd{position:relative}
/* --- THE WORK strip ------------------------------------------------------- */
.work{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.work a,.work figure{position:relative;display:block;overflow:hidden;aspect-ratio:1/1;
border-radius:var(--r);background:var(--ink-2)}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.work figure:hover img{transform:scale(1.07)}
.work figure::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(11,18,32,0) 55%,rgba(11,18,32,.5) 100%);opacity:0;transition:opacity .25s}
.work figure:hover::after{opacity:1}
@media(max-width:900px){.work{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.work{grid-template-columns:repeat(2,1fr);gap:10px}}
/* --- why section gets a photo column -------------------------------------- */
.why-wrap{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:stretch}
.why-photo{position:relative;overflow:hidden;border:1px solid var(--line-d);min-height:100%}
.why-photo img{width:100%;height:100%;object-fit:cover;display:block}
.why-photo figcaption{
position:absolute;left:0;right:0;bottom:0;padding:22px 20px;
background:linear-gradient(180deg,rgba(11,18,32,0),rgba(11,18,32,.94) 62%);
font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;
font-size:21px;line-height:1.12;color:#fff;
}
.why-photo figcaption span{display:block;font-family:Barlow,sans-serif;font-weight:400;
text-transform:none;font-size:14.5px;color:rgba(255,255,255,.76);margin-top:6px;letter-spacing:0}
@media(max-width:1000px){.why-wrap{grid-template-columns:1fr}.why-photo{min-height:280px;order:-1}}
/* --- areas band gets the aerial ------------------------------------------- */
.sec.areas{position:relative;overflow:hidden}
.sec.areas .bgimg{position:absolute;right:0;top:0;bottom:0;width:46%;z-index:0}
.sec.areas .bgimg img{width:100%;height:100%;object-fit:cover}
.sec.areas .bgimg::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.86) 26%,rgba(255,255,255,.30) 100%)}
.sec.areas .wrap{position:relative;z-index:1}
@media(max-width:900px){.sec.areas .bgimg{display:none}}
/* ==========================================================================
v1.3 — CREDENTIALS BAND
Replaces the old .badges strip + .stats band. They were two flat bands
stacked, both saying "we are legitimate", both mostly empty space, and the
blue stats block fought the blue CTA band further down. One dark band now
carries both, which also lets the brand blue read as an accent again.
The old .badges / .stats rules are left in place but unused.
========================================================================== */
.creds{
/* v1.4: was near-black navy. Two dark bands back to back (hero + this) made the
top of the page heavy, and it is the thing loadingkun reacted to. A light
ground gives the page a breath after the hero and, more usefully, lets the
five white logo plates finally read as a set instead of as cut-outs. */
background:#F4F7FB;color:var(--ink);position:relative;overflow:hidden;
clip-path:polygon(0 var(--pitch), 100% 0, 100% 100%, 0 100%);
margin-top:calc(var(--pitch) * -1);
padding:calc(52px + var(--pitch)) 0 0;
z-index:2;
}
.creds::before{ /* faint pitch mark, ties it to the dark band further down */
content:"";position:absolute;left:-70px;bottom:-140px;width:420px;height:420px;
opacity:.05;pointer-events:none;filter:invert(1);
background:url("data:image/svg+xml,") no-repeat center/contain;
}
.creds-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center;padding-bottom:44px}
.creds h2{font-size:40px;color:var(--ink);margin-bottom:14px;line-height:1.03}
.creds .chips{display:flex;gap:10px;flex-wrap:wrap}
.creds .chip{
font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;
font-size:15px;letter-spacing:.09em;padding:9px 15px;border-radius:2px;
border:1px solid rgba(11,18,32,.22);color:var(--ink);background:#fff;
}
/* amber on a light ground has to darken or it fails contrast */
.creds .chip.amber{border-color:#C98A0A;color:#8F6205;background:#FFF8E8}
/* uniform white plates, so five logos of five different shapes stop fighting */
.plates{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.plates .p{
background:#fff;border-radius:3px;height:82px;
border:1px solid rgba(11,18,32,.13);box-shadow:0 2px 10px rgba(11,18,32,.05);
display:flex;align-items:center;justify-content:center;padding:12px;
transition:transform .15s ease;
}
.plates .p:hover{transform:translateY(-3px)}
.plates img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:1040px){
.creds-top{grid-template-columns:1fr;gap:30px}
.creds h2{font-size:33px}
}
@media(max-width:620px){
.plates{grid-template-columns:repeat(3,1fr);gap:9px}
.plates .p{height:64px;padding:9px}
.plates .p:nth-child(4){grid-column:1/2}
}
/* the numbers, as a ledger rule rather than a color block */
.ledger{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(11,18,32,.14)}
.ledger .i{padding:30px 26px 34px;border-right:1px solid rgba(11,18,32,.14);position:relative}
.ledger .i:last-child{border-right:0}
.ledger .n{
font-family:BarlowCond,sans-serif;font-weight:700;font-size:58px;line-height:.9;
color:var(--blue);letter-spacing:-.015em;
}
.ledger .i:nth-child(2) .n,.ledger .i:nth-child(4) .n{color:var(--ink)}
.ledger .l{font-size:15px;line-height:1.35;color:var(--muted);margin-top:10px;max-width:190px}
.ledger .i::after{content:"";position:absolute;left:26px;top:0;width:30px;height:3px;background:var(--amber)}
@media(max-width:860px){
.ledger{grid-template-columns:repeat(2,1fr)}
.ledger .i{border-bottom:1px solid rgba(11,18,32,.14)}
.ledger .i:nth-child(2n){border-right:0}
.ledger .i:nth-last-child(-n+2){border-bottom:0}
}
@media(max-width:400px){.ledger .n{font-size:46px}}
/* ============================================================ INNER PAGES
Added 2026-08-21 for the services hub and the six service pages. Reuses the
homepage's tokens, buttons, .faqs and .band wholesale; only the page hero, the
breadcrumb, the prose column and the sticky rail are new. The inner hero is
deliberately shorter than the homepage's fixed 750px: on a subpage the visitor
came for the copy, so the band introduces the page and gets out of the way. */
.phero{position:relative;min-height:460px;display:flex;align-items:center;
overflow:hidden;background:var(--ink);padding:112px 0 56px}
.phero .bg{position:absolute;inset:0}
.phero .bg img{width:100%;height:100%;object-fit:cover;object-position:60% 45%;
filter:saturate(1.04) contrast(1.02)}
.phero .scrim{position:absolute;inset:0;
background:linear-gradient(90deg,rgba(11,18,32,.95) 0%,rgba(11,18,32,.88) 46%,
rgba(11,18,32,.55) 78%,rgba(11,18,32,.42) 100%),
linear-gradient(180deg,rgba(11,18,32,.86) 0%,transparent 34%)}
.phero .grain{position:absolute;inset:0;opacity:.5;pointer-events:none;
background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 0);
background-size:3px 3px}
.phero .wrap{position:relative;z-index:2;width:100%}
.phero-in{max-width:760px;color:#fff}
.phero .eyebrow{color:var(--blue-lt);margin-bottom:14px;display:flex;align-items:center;
gap:12px;flex-wrap:wrap}
.phero .eyebrow i{display:inline-block;width:26px;height:2px;background:var(--blue-lt);
font-style:normal}
.phero h1{font-size:56px;color:#fff;margin-bottom:18px}
.phero p.lead{font-size:19px;line-height:1.55;color:rgba(255,255,255,.9);
max-width:660px;margin-bottom:28px}
.phero .acts{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.phero .pts{display:flex;gap:24px;flex-wrap:wrap;list-style:none}
.phero .pts li{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.9);
font-size:15px;font-weight:500}
.phero .pts li::before{content:"";width:9px;height:9px;background:var(--amber);
border-radius:50%;flex:0 0 auto}
.crumbs{position:relative;z-index:2;font-size:14px;color:rgba(255,255,255,.66);
margin-bottom:26px;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs b{color:#fff;font-weight:500}
.crumbs span{opacity:.5}
/* ---- prose + rail ---- */
.prose-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start}
.prose{max-width:74ch}
.prose h2{font-size:38px;margin:0 0 18px}
.prose h3{font-size:27px;margin:44px 0 14px}
.prose h2+h3{margin-top:28px}
.prose p{margin:0 0 18px;color:#28374F}
.prose ul{margin:0 0 22px;padding:0;list-style:none}
.prose ul li{position:relative;padding:0 0 0 30px;margin:0 0 12px;color:#28374F}
.prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:11px;height:11px;
background:var(--amber);transform:rotate(45deg)}
.prose ul li b,.prose ul li strong{color:var(--ink)}
.rail{position:sticky;top:24px;display:flex;flex-direction:column;gap:18px}
.rail .card{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);
padding:26px}
.rail .card .eyebrow{color:var(--blue);margin-bottom:8px}
.rail .card h3{font-size:26px;margin-bottom:10px}
.rail .card p{font-size:15px;color:var(--muted);margin-bottom:16px}
.rail .card .btn{width:100%;font-size:18px;padding:15px 20px;margin-bottom:9px}
.rail .card .meta{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
font-size:13px;color:var(--muted);line-height:1.7}
.rail .card.alt{background:var(--ink);border-color:transparent;color:#fff}
.rail .card.alt h4{font-size:20px;margin-bottom:12px;color:#fff}
.rail .card.alt ul{list-style:none}
.rail .card.alt li{border-top:1px solid var(--line-d)}
.rail .card.alt li a{display:block;padding:11px 0;font-size:15px;color:rgba(255,255,255,.82)}
.rail .card.alt li a:hover{color:var(--amber)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
/* ---- "View service" affordance on the shared card grid ---- */
.svc .bd h3 a{color:inherit}
.svc .bd h3 a:hover{color:var(--blue)}
.svc .more{display:inline-flex;align-items:center;gap:8px;margin-top:14px;
font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;font-size:16px;color:var(--blue)}
.svc .more::after{content:"";width:16px;height:2px;background:var(--blue);
transition:width .15s ease}
.svc:hover .more::after{width:26px}
@media (max-width:1000px){
.prose-wrap{grid-template-columns:1fr;gap:40px}
.rail{position:static;flex-direction:row;flex-wrap:wrap}
.rail .card{flex:1 1 300px}
}
@media (max-width:760px){
.phero{min-height:0;padding:96px 0 44px}
.phero h1{font-size:38px}
.phero p.lead{font-size:17px}
.prose h2{font-size:30px}
.prose h3{font-size:23px}
.rail{flex-direction:column}
}
/* ============================================================ CONTACT / ABOUT
Added 2026-08-21. Contact grid, the quote form, the thank-you steps and the
values grid on About. Reuses tokens, buttons, .phero and .band. */
.phero.short{min-height:380px;padding:104px 0 44px}
.contact-wrap{display:grid;grid-template-columns:340px minmax(0,1fr);gap:56px;align-items:start}
.cinfo{display:flex;flex-direction:column;gap:14px}
.ccard{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.ccard .eyebrow{color:var(--blue);margin-bottom:8px}
.ccard .big{font-family:BarlowCond,sans-serif;font-weight:700;font-size:34px;color:var(--ink);
display:block;line-height:1}
.ccard .big:hover{color:var(--blue)}
.ccard .mid{font-weight:500;font-size:17px;color:var(--ink);display:block;word-break:break-word}
.ccard .mid:hover{color:var(--blue)}
.ccard p{font-size:15px;color:var(--muted);margin-top:8px}
.ccard.lic{background:var(--ink);color:#fff;font-size:14px;letter-spacing:.04em;line-height:1.7}
.cform .eyebrow{color:var(--blue);margin-bottom:8px}
.cform h2{font-size:40px;margin-bottom:12px}
.cform .sub{color:var(--muted);max-width:60ch;margin-bottom:26px}
/* ---- the form ---- */
.qform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qform .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qform label{display:block;margin-bottom:16px;font-size:14px;font-weight:500;
color:var(--ink-3);letter-spacing:.02em}
.qform label span{color:#B3261E}
.qform input,.qform select,.qform textarea{
width:100%;margin-top:7px;padding:14px 15px;font:inherit;font-size:16px;
color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r);
transition:border-color .15s ease, box-shadow .15s ease}
.qform input:focus,.qform select:focus,.qform textarea:focus{
outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(1,82,227,.14)}
.qform textarea{resize:vertical;min-height:112px}
.qform button{width:100%;margin-top:6px}
.qform .fnote{font-size:14px;color:var(--muted);margin-top:12px;text-align:center}
.qform .ferr{background:#FDECEA;border:1px solid #F5C2BE;color:#8C1D18;padding:12px 14px;
border-radius:var(--r);font-size:15px;margin-bottom:16px}
/* ---- thank-you steps ---- */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.steps3>div{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);padding:28px}
.steps3 b{font-family:BarlowCond,sans-serif;font-size:44px;color:var(--blue);line-height:1;
display:block;margin-bottom:10px}
.steps3 h3{font-size:24px;margin-bottom:8px}
.steps3 p{font-size:16px;color:var(--muted)}
/* ---- values on About ---- */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vals article{background:rgba(255,255,255,.04);border:1px solid var(--line-d);
border-radius:var(--r);padding:30px}
.vals b{font-family:BarlowCond,sans-serif;font-size:15px;letter-spacing:.2em;
color:var(--amber);display:block;margin-bottom:14px}
.vals h3{font-size:26px;color:#fff;margin-bottom:12px}
.vals p{font-size:15.5px;color:#C3CEE4;margin-bottom:12px;line-height:1.6}
.vals p:last-child{margin-bottom:0}
@media (max-width:1000px){
.contact-wrap{grid-template-columns:1fr;gap:38px}
.vals{grid-template-columns:1fr}
.steps3{grid-template-columns:1fr}
}
@media (max-width:760px){
.qform .frow{grid-template-columns:1fr;gap:0}
.cform h2{font-size:31px}
.phero.short{min-height:0;padding:92px 0 36px}
}
/* ============================================================ BLOG */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{background:var(--mist);border:1px solid var(--line);border-radius:var(--r);
overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease}
.pcard:hover{transform:translateY(-3px)}
.pcard .ph{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .bd{padding:24px;display:flex;flex-direction:column;flex:1}
.pmeta{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted);
text-transform:uppercase;letter-spacing:.12em;font-weight:500;margin-bottom:10px}
.pmeta .cat{color:var(--blue)}
.pcard h2{font-size:26px;margin-bottom:10px;line-height:1.08}
.pcard h2 a:hover{color:var(--blue)}
.pcard p{font-size:16px;color:var(--muted);margin-bottom:16px;flex:1}
.pcard .more{font-family:BarlowCond,sans-serif;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;font-size:16px;color:var(--blue);display:inline-flex;
align-items:center;gap:8px}
.pcard .more::after{content:"";width:16px;height:2px;background:var(--blue);
transition:width .15s ease}
.pcard:hover .more::after{width:26px}
.pager{margin-top:40px}
.pager .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;
min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);
border-radius:var(--r);font-weight:500}
.pager .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.prose .tags{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.prose .tags span{font-size:13px;letter-spacing:.16em;text-transform:uppercase;
color:var(--muted);font-weight:500}
.prose .tags em{font-style:normal;font-size:14px;background:var(--mist);
border:1px solid var(--line);border-radius:999px;padding:6px 14px;color:var(--ink-3)}
@media(max-width:980px){.posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.posts{grid-template-columns:1fr}}
/* ---------- Gallery (page-gallery.php) ---------------------------------- */
/* Shorter hero for the pages that are mostly grid. */
.phero.phero-sm{min-height:520px}
.gal{
display:grid;grid-template-columns:1fr;gap:10px;margin-top:36px;
}
/* 🔴 display:grid BEATS the [hidden] attribute, so the "show more" block rendered
permanently open. Any custom display value needs this line or `hidden` is a no-op. */
.gal[hidden]{display:none}
.gal a.gtile{
display:block;position:relative;overflow:hidden;border-radius:var(--r);
background:var(--mist-2);aspect-ratio:4/3;cursor:zoom-in;
}
.gal a.gtile img{
width:100%;height:100%;object-fit:cover;display:block;
transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.gal a.gtile:hover img{transform:scale(1.05)}
.gal a.gtile:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.gal-more-wrap{display:flex;justify-content:center;margin-top:32px}
.gal-rest{margin-top:10px}
@media (min-width:560px){ .gal{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .gal{grid-template-columns:repeat(3,1fr);gap:14px} }
@media (min-width:1200px){ .gal{grid-template-columns:repeat(4,1fr)} }
/* Lightbox. Plain, and it closes on backdrop, button or Escape. */
.glb{
position:fixed;inset:0;z-index:9999;background:rgba(6,10,18,.94);
display:flex;align-items:center;justify-content:center;padding:28px;
}
.glb[hidden]{display:none}
.glb img{max-width:min(1400px,94vw);max-height:90vh;width:auto;height:auto;
border-radius:var(--r);box-shadow:0 30px 90px rgba(0,0,0,.6)}
.glb-x{
position:absolute;top:16px;right:20px;width:48px;height:48px;line-height:1;
font-size:34px;color:#fff;background:rgba(255,255,255,.12);border:0;
border-radius:50%;cursor:pointer;
}
.glb-x:hover{background:rgba(255,255,255,.24)}
/* Areas We Serve city list. Reads as a list, not as buttons. */
.areas-grid{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
gap:10px 20px;margin:18px 0 26px;padding:0}
.areas-grid li{padding:12px 14px;background:var(--mist);border-left:3px solid var(--blue);
font-weight:600;font-size:16px}
@media (min-width:700px){ .areas-grid{grid-template-columns:repeat(3,1fr)} }
/* ---------- Nav: services dropdown + mobile menu ----------------------- */
.navitem{position:relative;display:flex;align-items:center}
.nav .caret{width:0;height:0;margin-left:7px;border:4px solid transparent;
border-top-color:currentColor;border-bottom:0;display:inline-block;
transform:translateY(1px);transition:transform .2s}
.has-sub:hover .caret,.has-sub:focus-within .caret{transform:translateY(1px) rotate(180deg)}
.sub{
position:absolute;top:100%;left:-18px;min-width:340px;background:var(--ink-2);
border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:10px;
box-shadow:0 24px 60px rgba(0,0,0,.45);
opacity:0;visibility:hidden;transform:translateY(8px);
transition:opacity .18s ease,transform .18s ease,visibility .18s;z-index:60;
}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:translateY(0)}
/* A hover bridge, so the pointer can cross the gap without the menu closing. */
.has-sub::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.sub a{
display:block;padding:11px 14px;border:0;color:rgba(255,255,255,.86);
font-size:15.5px;line-height:1.35;border-radius:calc(var(--r) - 1px);
}
.sub a b{
display:block;font-family:BarlowCond,"Barlow Condensed",sans-serif;font-size:11.5px;
letter-spacing:.16em;text-transform:uppercase;color:var(--blue-lt);margin-bottom:2px;
}
.sub a:hover{background:var(--blue);color:#fff}
.sub a:hover b{color:rgba(255,255,255,.85)}
.sub .sub-all{margin-top:6px;border-top:1px solid rgba(255,255,255,.12);
border-radius:0;color:var(--amber);font-weight:600}
.sub .sub-all:hover{background:transparent;color:#fff}
/* Burger. Hidden on desktop, the only navigation below 1080. */
.burger{display:none;width:46px;height:46px;background:transparent;border:0;cursor:pointer;
padding:11px 10px;flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2.5px;background:#fff;border-radius:2px;
transition:transform .25s,opacity .2s}
.burger.x span:nth-child(1){transform:translateY(9.5px) rotate(45deg)}
.burger.x span:nth-child(2){opacity:0}
.burger.x span:nth-child(3){transform:translateY(-9.5px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:120;background:var(--ink);overflow-y:auto;
padding:86px 22px 40px}
.mnav[hidden]{display:none} /* display is set below, so this line is required */
.mnav__in{display:flex;flex-direction:column;gap:2px;max-width:520px;margin:0 auto}
.mnav__in > a{
font-family:BarlowCond,"Barlow Condensed",sans-serif;font-weight:700;
font-size:30px;letter-spacing:.01em;text-transform:uppercase;color:#fff;
padding:13px 4px;border-bottom:1px solid rgba(255,255,255,.10);
}
.mnav__in > a.on{color:var(--blue-lt)}
.mnav__in > a.btn{font-size:17px;margin-top:10px;border-bottom:0;text-align:center}
.mnav__in > a.btn-line{color:#fff;border-color:rgba(255,255,255,.4)}
.mnav__sub{display:flex;flex-direction:column;padding:8px 0 12px 14px;
border-left:2px solid var(--blue);margin:6px 0 10px}
.mnav__sub a{color:rgba(255,255,255,.78);font-size:16px;padding:8px 0}
.mnav__sub a:hover{color:#fff}
.mnav__meta{margin-top:22px;color:rgba(255,255,255,.55);font-size:14.5px;line-height:1.6}
@media(max-width:1080px){
.burger{display:flex}
.hdr .cta .tel{display:none}
}
@media(max-width:560px){.hdr .cta{display:none}}
.mnav__sub a span{display:block;font-family:BarlowCond,"Barlow Condensed",sans-serif;
font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-lt);
margin-bottom:1px}
.mnav__sub a{padding:9px 0}
.mnav__sub .msub-all{color:var(--amber);font-weight:600;margin-top:4px}
/* Location pages: the sidebar photo, and city links inside the areas list. */
.railshot{margin-top:18px;border-radius:var(--r);overflow:hidden;line-height:0}
.railshot img{width:100%;height:auto;display:block}
.areas-grid li a{color:inherit;display:block}
.areas-grid li:hover{background:var(--mist-2)}
.areas-grid li a:hover{color:var(--blue)}