:root{
  --p:#067590;--pd:#055265;--accent:#9e2407;--on-accent:#ffffff;
  --ink:#182029;--muted:#5c6773;--bg:#ffffff;--soft:#f5f7f9;--soft2:#eef2f6;
  --line:#e3e8ee;--card:#ffffff;--radius:16px;--btn-r:999px;--maxw:1180px;
  --shadow:0 1px 2px rgba(16,32,48,.05),0 8px 24px rgba(16,32,48,.06);
  --shadow-lg:0 12px 40px rgba(16,32,48,.14);
  --disp:'Exo 2',system-ui,sans-serif;--body:'Mulish',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.65;font-size:17px}
h1,h2,h3,h4{font-family:var(--disp);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;font-weight:700}
h1{font-size:clamp(2.1rem,4.2vw,3.3rem);font-weight:800}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.25rem}
p{margin:0 0 1rem}
a{color:var(--p);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--disp);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;color:var(--accent);margin:0 0 .6rem}
.sec{padding:76px 0}
.sec--soft{background:var(--soft)}
.sec-head{max-width:720px;margin:0 auto 46px;text-align:center}
.sec-head p{color:var(--muted);font-size:1.08rem;margin:0}
/* buttons — always high contrast */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:1rem;
  padding:14px 26px;border-radius:var(--btn-r);border:2px solid transparent;cursor:pointer;transition:.16s;white-space:nowrap;text-decoration:none}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{filter:brightness(1.06);text-decoration:none;transform:translateY(-1px)}
.btn--dark{background:var(--p);color:#fff}
.btn--dark:hover{background:var(--pd);text-decoration:none;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--ghost:hover{background:rgba(255,255,255,.12);text-decoration:none}
.btn--outline{background:#fff;color:var(--p);border-color:var(--line)}
.btn--outline:hover{border-color:var(--p);text-decoration:none}
/* navbar click-to-call CTA: phone icon + number (replaces the quote button) */
.btn--call{gap:8px}
.btn--call svg{flex:0 0 auto}
.hd .btn--call{padding:13px 20px}
/* header */
.top{background:var(--pd);color:#fff;font-size:.85rem}
.top .wrap{display:flex;align-items:center;gap:14px;padding:8px 24px}
.top a{color:#fff;font-weight:600}
.top a svg{width:12px;height:12px;fill:var(--accent);vertical-align:-1px;margin-right:4px}
.top .dot{opacity:.4}
.top .tsp{flex:1}
/* desktop: the navbar call button already shows the number, so hide the top-bar copy
   to avoid the same number twice. It reappears at <=1120px where the navbar CTA collapses. */
.top-tel{display:none}
.nav-cta-m{display:none}
.nav-quote{display:none}
header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd{display:flex;align-items:center;gap:12px;padding:12px 24px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:800;font-size:.9rem;color:var(--ink);flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand>span{white-space:nowrap;line-height:1.08}
.brand__chip{width:42px;height:42px;border-radius:11px;flex:0 0 auto;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;padding:5px}
.brand__chip img{width:100%;height:100%;object-fit:contain;display:block}
.brand__logo{height:56px;width:auto;max-width:260px;object-fit:contain;display:block;flex:0 0 auto}
.brand__mark{height:62px;width:auto;max-width:74px;object-fit:contain;display:block;flex:0 0 auto}
/* tablet + mobile: logo only -- hide the brand-name text (keep the SVG chip when present) */
@media(max-width:960px){.brand>span:not(.brand__chip){display:none}}
@media(max-width:520px){.brand__logo{height:48px;max-width:210px}.brand__mark{height:54px}}
.brand__full{display:inline-flex;align-items:center;flex:0 0 auto}
.brand__full img{height:44px;width:auto;max-width:250px;object-fit:contain;display:block}
.brand__full--ft{background:#fff;border-radius:12px;padding:8px 12px;box-shadow:var(--shadow)}
.brand__full--ft img{height:40px;max-width:230px}
@media(max-width:560px){.brand__full img{height:38px;max-width:180px}}
.brand small{display:block;font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:1px}
nav.main{margin-left:auto;display:flex;align-items:center;gap:2px;flex:0 1 auto}
nav.main>a,.nav-item>button{font-family:var(--disp);font-weight:600;font-size:.88rem;color:var(--ink);background:none;border:0;padding:8px 9px;border-radius:10px;cursor:pointer;white-space:nowrap}
nav.main>a:hover,.nav-item>button:hover{background:var(--soft);text-decoration:none}
.nav-item{position:relative}
.nav-item>button::after{content:"";display:inline-block;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-left:7px;vertical-align:2px}
.mega{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:14px;min-width:280px;opacity:0;visibility:hidden;transition:.16s;z-index:70}
.nav-item:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega a{display:block;padding:9px 12px;border-radius:9px;color:var(--ink);font-size:.94rem;font-weight:500}
.mega a:hover{background:var(--soft);color:var(--p);text-decoration:none}
.mega--areas{min-width:380px;display:grid;grid-template-columns:1fr 1fr;gap:2px 8px}
.mega--areas .mega-all{grid-column:1/-1;font-weight:700;color:var(--p);border-bottom:1px solid var(--line);border-radius:0;margin-bottom:6px}
.hd .tel{margin-left:4px;display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:700;color:var(--p);white-space:nowrap;flex:0 0 auto;font-size:.95rem}
.hd .tel svg{fill:var(--accent);flex:0 0 auto}
.hd .btn{margin-left:2px;flex:0 0 auto;padding:12px 20px}
.burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2.5px;background:var(--ink);border-radius:2px;margin:5px 0;transition:transform .3s cubic-bezier(.2,.75,.25,1),opacity .2s ease}
.burger.is-open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* hero (variant-aware) */
.hero{position:relative;background:linear-gradient(155deg,var(--pd),var(--p));color:#fff;overflow:hidden}
.hero::after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;background:var(--accent);opacity:.14}
.hero h1{color:#fff}
.hero .eyebrow{color:#fff;opacity:.85}
.hero .lead{font-size:1.18rem;color:rgba(255,255,255,.9);max-width:42ch;margin:0 0 26px}
.hero .cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px}
.hero .chips{display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;padding:0;margin:0}
.hero .chips li{display:flex;align-items:center;gap:8px;font-size:.94rem;color:rgba(255,255,255,.92)}
.hero .chips svg{width:18px;height:18px;fill:var(--accent)}
.hero__media{position:relative}
.hero__media img{border-radius:calc(var(--radius) + 4px);box-shadow:var(--shadow-lg);aspect-ratio:4/3;object-fit:cover;width:100%}
.hero__badge{position:absolute;left:-18px;bottom:-18px;background:#fff;color:var(--ink);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px}
.hero__badge b{font-family:var(--disp);font-size:1.5rem;display:block;line-height:1;color:var(--p)}
.hero__badge span{font-size:.8rem;color:var(--muted)}
/* -- split (right/left) -- */
.hero--split .wrap{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;padding:76px 24px 82px}
.hero--left .wrap{grid-template-columns:.95fr 1.05fr}
/* -- stacked: centered copy, wide image below -- */
.hero--stacked .wrap{position:relative;padding:66px 24px 0;text-align:center}
.hero--stacked .hero__copy{max-width:760px;margin:0 auto}
.hero--stacked .lead{margin:0 auto 26px}
.hero--stacked .cta,.hero--stacked .chips{justify-content:center}
.hero__media--wide{margin:36px auto -64px;max-width:1000px}
.hero__media--wide img{width:100%;aspect-ratio:21/9;object-fit:cover;border-radius:calc(var(--radius) + 4px) calc(var(--radius) + 4px) 0 0;box-shadow:var(--shadow-lg)}
/* -- center: big centered copy on gradient + faint photo, no side image -- */
.hero--center{background:linear-gradient(155deg,color-mix(in srgb,var(--pd) 90%,transparent),color-mix(in srgb,var(--p) 84%,transparent)),var(--hero-bg) center/cover no-repeat}
.hero--center .wrap{position:relative;text-align:center;padding:96px 24px 104px;max-width:840px}
.hero--center h1{font-size:clamp(2.4rem,5vw,3.9rem)}
.hero--center .lead{margin:0 auto 26px}
.hero--center .cta,.hero--center .chips{justify-content:center}
/* -- banner: full-bleed photo + dark overlay, centered copy -- */
.hero--banner{background:linear-gradient(rgba(11,18,28,.74),rgba(11,18,28,.66)),var(--hero-bg) center/cover no-repeat}
.hero--banner::after{display:none}
.hero--banner .wrap{position:relative;padding:106px 24px;max-width:840px;text-align:center}
.hero--banner .cta,.hero--banner .chips{justify-content:center}
.hero--banner .lead{margin:0 auto 26px}
/* -- overlap: full-bleed photo with a floating copy card over it -- */
.hero--overlap{position:relative;background:none;color:#fff;overflow:hidden}
.hero--overlap::after{display:none}
.hero__bgimg{position:absolute;inset:0;z-index:0}
.hero__bgimg img{width:100%;height:100%;object-fit:cover;display:block}
.hero__bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,18,28,.58),rgba(11,18,28,.14) 60%,rgba(11,18,28,0))}
.hero--overlap .wrap{position:relative;z-index:1;margin-top:0;min-height:clamp(440px,48vw,580px);display:flex;align-items:center;padding:56px 24px}
.hero__card{background:linear-gradient(155deg,var(--pd),var(--p));border-radius:calc(var(--radius) + 6px);padding:clamp(28px,4vw,46px);max-width:600px;box-shadow:var(--shadow-lg)}
.hero--overlap .eyebrow{color:#fff;opacity:.85}
/* -- navbar variants -- */
.lay-nav-center .hd{position:relative;flex-wrap:wrap;justify-content:center;row-gap:4px;padding:12px 24px 10px}
.lay-nav-center .brand{margin:2px auto}
.lay-nav-center nav.main{order:5;flex-basis:100%;justify-content:center;margin-left:0;gap:2px}
.lay-nav-center .hd>.btn{order:4;position:absolute;right:0;top:14px}
.lay-nav-pill nav.main{background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px 7px;gap:2px}
.lay-nav-pill nav.main>a,.lay-nav-pill .nav-item>button{border-radius:999px;padding:9px 14px}
.lay-nav-pill nav.main>a:hover,.lay-nav-pill .nav-item>button:hover{background:#fff}
/* -- section band rhythm -- */
.lay-bands-flat .sec--soft{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lay-bands-flat .trust{background:var(--pd)}
/* trust bar */
.trust{background:var(--p);color:#fff}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:22px 24px}
.trust div{display:flex;align-items:center;gap:12px;justify-content:center;font-weight:600;font-size:.96rem}
.trust svg{fill:none;stroke:var(--accent);color:var(--accent);flex:0 0 auto}
.trust b{color:var(--accent)}
/* generic grid */
.grid{display:grid;gap:24px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* service cards */
.scard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.18s;display:flex;flex-direction:column}
.scard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.scard img{aspect-ratio:16/10;object-fit:cover;width:100%}
.scard__b{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.scard h3{margin:0 0 6px;font-size:1.12rem}
.scard p{color:var(--muted);font-size:.94rem;margin:0 0 14px;flex:1}
.scard .more{font-family:var(--disp);font-weight:700;color:var(--p);display:inline-flex;align-items:center;gap:6px;font-size:.92rem}
.scard .more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
/* -- service-card style variants (What We Rent) -- */
/* overlay: photo-forward, title + arrow over a gradient */
.scards--overlay .scard{position:relative}
.scards--overlay .scard img{aspect-ratio:3/4}
.scards--overlay .scard__b{position:absolute;inset:auto 0 0 0;background:linear-gradient(to top,rgba(10,14,20,.9) 12%,rgba(10,14,20,.45) 55%,transparent);padding:18px 20px 18px}
.scards--overlay .scard h3{color:#fff;margin:0 0 4px}
.scards--overlay .scard p{display:none}
.scards--overlay .scard .more{color:#fff}
.scards--overlay .scard .more svg{stroke:#fff}
/* side: horizontal card, image left */
.scards--side{grid-template-columns:repeat(2,1fr)}
.scards--side .scard{flex-direction:row;align-items:stretch}
.scards--side .scard img{width:42%;aspect-ratio:auto;object-fit:cover;flex:0 0 42%}
.scards--side .scard__b{padding:20px 22px}
/* bold: accent top bar, uppercase title, whole card is the link (no "more" row) */
.scards--bold .scard{border-top:4px solid var(--accent)}
.scards--bold .scard h3{text-transform:uppercase;letter-spacing:.02em;font-size:1.06rem}
.scards--bold .scard .more{display:none}
.scards--bold .scard__b{padding-bottom:22px}
/* feature tiles */
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow)}
.feat .ic{width:50px;height:50px;border-radius:13px;background:color-mix(in srgb,var(--accent) 16%,#fff);color:var(--p);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.feat .ic svg{fill:none;stroke:currentColor;color:var(--p)}
.feat h3{margin:0 0 6px;font-size:1.08rem}
.feat p{color:var(--muted);font-size:.95rem;margin:0}
/* steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{position:relative;padding:28px 24px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-18px;left:24px;width:44px;height:44px;border-radius:12px;background:var(--p);color:#fff;font-family:var(--disp);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.step h3{margin:14px 0 6px}
.step p{color:var(--muted);margin:0;font-size:.95rem}
.step__b{min-width:0}
/* -- feature-section variants (Why Us) -- */
.feats--list .feat{display:flex;gap:16px;align-items:flex-start}
.feats--list .feat .ic{margin-bottom:0;flex:0 0 50px}
.feats--bar .feat{border-top:3px solid var(--accent)}
.feats--minimal{gap:0}
.feats--minimal .feat{display:flex;gap:16px;align-items:flex-start;background:none;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;padding:22px 4px}
.feats--minimal .feat .ic{background:none;width:36px;height:36px;margin-bottom:0;color:var(--accent);flex:0 0 36px}
.feats--minimal .feat .ic svg{color:var(--accent)}
/* -- how-it-works variants -- */
.steps--bignum{grid-template-columns:1fr;gap:0}
.steps--bignum .step{display:flex;gap:22px;align-items:center;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:22px 2px}
.steps--bignum .step:last-child{border-bottom:0}
.steps--bignum .step::before{position:static;width:auto;height:auto;min-width:54px;background:none;border-radius:0;color:var(--accent);font-size:2.8rem;line-height:1;display:block;text-align:center}
.steps--bignum .step h3{margin:0 0 4px}
.steps--timeline{position:relative}
.steps--timeline .step{text-align:center;background:none;border:0;box-shadow:none;padding:58px 12px 0}
.steps--timeline .step::before{left:50%;transform:translateX(-50%);top:4px}
.steps--timeline .step h3{margin:0 0 6px}
@media(min-width:721px){.steps--timeline::before{content:"";position:absolute;top:26px;left:16.6%;right:16.6%;height:2px;background:var(--line);z-index:0}.steps--timeline .step::before{z-index:1}}
/* pricing */
.pricewrap{max-width:760px;margin:0 auto}
.pricewrap table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
.pricewrap th,.pricewrap td,.tw th,.tw td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line)}
.pricewrap thead th,.tw thead th{background:var(--p);color:#fff;font-family:var(--disp);border-bottom:0}
.pricewrap tbody tr:last-child td{border-bottom:0}
.pricewrap tbody tr:nth-child(even){background:var(--soft)}
.pricenote{text-align:center;color:var(--muted);margin:18px 0 0;font-size:.92rem}
/* areas */
.areas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:900px;margin:0 auto}
.areas a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-weight:600;font-size:.95rem;color:var(--ink);box-shadow:var(--shadow)}
.areas a:hover{border-color:var(--p);color:var(--p);text-decoration:none}
/* faq */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--disp);font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.5rem;color:var(--accent);font-weight:400;transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 22px 20px;color:var(--muted)}
.faq .a p{margin:0 0 .7rem}
/* cta band */
.cta-band{background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;border-radius:24px;padding:52px;text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.cta-band h2{color:#fff;margin:0 0 10px}
.cta-band p{color:rgba(255,255,255,.9);max-width:52ch;margin:0 auto 26px}
.cta-band .cta{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
/* footer */
footer.site{background:#0f151b;color:#aeb9c5;padding:60px 0 26px;margin-top:0}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:34px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
footer.site h4{color:#fff;font-size:.95rem;margin:0 0 14px;letter-spacing:.04em;text-transform:uppercase}
footer.site a{color:#c4cdd8;display:block;padding:5px 0;font-size:.95rem}
footer.site a:hover{color:#fff}
footer.site .fbrand p{font-size:.95rem;max-width:32ch}
footer.site .flogo{display:flex;align-items:center;gap:10px;color:#fff;font-family:var(--disp);font-weight:800;font-size:1.15rem;margin-bottom:14px}
footer.site .addr{font-style:normal;line-height:1.7;font-size:.95rem}
footer.site .addr a{display:inline;padding:0;color:#fff;font-weight:700}
.legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;font-size:.86rem;color:#7d8894}
/* -- footer variants (footer.site prefix so they beat the base specificity) -- */
footer.site.ft--dark{border-top:4px solid var(--accent)}
footer.site.ft--brand{background:var(--pd)}
footer.site.ft--brand h4{color:var(--accent)}
footer.site.ft--light{background:var(--soft);color:var(--muted);border-top:1px solid var(--line)}
footer.site.ft--light h4{color:var(--ink)}
footer.site.ft--light a{color:var(--muted)}
footer.site.ft--light a:hover{color:var(--p)}
footer.site.ft--light .flogo{color:var(--ink)}
footer.site.ft--light .addr,footer.site.ft--light .fbrand p{color:var(--muted)}
footer.site.ft--light .addr a{color:var(--p)}
footer.site.ft--light .cols{border-bottom-color:var(--line)}
footer.site.ft--light .legal{color:var(--muted)}
footer.site.ft--cta .ft-cta{background:linear-gradient(135deg,var(--p),var(--pd))}
.ft-cta{padding:40px 0;margin-bottom:44px}
.ft-cta__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ft-cta h3{color:#fff;margin:0 0 4px;font-size:clamp(1.3rem,2.4vw,1.8rem)}
.ft-cta p{color:rgba(255,255,255,.88);margin:0}
.ft-cta__btns{display:flex;gap:16px;flex-wrap:wrap}
footer.site.ft--center{text-align:center;background:var(--soft);color:var(--muted);border-top:1px solid var(--line)}
footer.site.ft--center .flogo{justify-content:center;color:var(--ink);font-size:1.3rem}
footer.site.ft--center .ft-tag{max-width:52ch;margin:0 auto 18px}
footer.site.ft--center .ft-inline{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;margin:0 auto 18px;max-width:820px}
footer.site.ft--center .ft-inline a{color:var(--muted);padding:3px 0;font-weight:600}
footer.site.ft--center .ft-inline a:hover{color:var(--p)}
footer.site.ft--center .addr{color:var(--muted)}
footer.site.ft--center .addr a{color:var(--p)}
footer.site.ft--center .legal{justify-content:center;border-top:1px solid var(--line);margin-top:22px}
footer.site.ft--split .ft-split{display:grid;grid-template-columns:1.1fr 1.9fr;gap:40px;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
footer.site.ft--split .ft-panel{background:var(--pd);border-radius:calc(var(--radius) + 4px);padding:28px}
footer.site.ft--split .ft-panel .btn{margin-top:8px}
footer.site.ft--split .ft-links{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* restore .btn styling inside footers (base "footer.site a" would clobber it) */
footer.site a.btn{display:inline-flex;padding:14px 26px;font-size:1rem}
footer.site a.btn--primary,footer.site a.btn--primary:hover{color:var(--on-accent)}
footer.site a.btn--ghost,footer.site a.btn--ghost:hover{color:#fff}
/* inner page */
.page-hero{background:linear-gradient(155deg,var(--pd),var(--p));color:#fff;padding:52px 0}
.page-hero .crumb{font-size:.85rem;color:rgba(255,255,255,.7);margin-bottom:10px}
.page-hero .crumb a{color:rgba(255,255,255,.85)}
.page-hero h1{color:#fff;margin:0}
.article{display:grid;grid-template-columns:1fr 320px;gap:48px;padding:56px 0}
.article .body>h2{margin-top:1.8em}
.article .body>h2:first-child{margin-top:0}
.article .body img{border-radius:14px;margin:1.2em 0}
.article .body ul,.article .body ol{padding-left:1.2em}
.article .body li{margin:.35em 0}
.article .tw{overflow-x:auto;margin:1.4em 0}
.aside{position:sticky;top:96px;align-self:start}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px;text-align:center}
.qcard h3{margin:0 0 8px}
.qcard p{color:var(--muted);font-size:.94rem}
.qcard .tel{font-family:var(--disp);font-weight:800;font-size:1.5rem;color:var(--p);display:block;margin:8px 0 16px}
.qcard .btn{width:100%;justify-content:center;margin-bottom:10px}
.article .faq{margin:1.4em 0 0}
/* GoHighLevel quote form embed (+ shimmer skeleton) */
.quote-embed{padding:clamp(1.6rem,3.5vw,2.8rem) 0;background:var(--soft)}
.quote-embed .wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,4vw,44px)}
.quote-embed__h{font-family:var(--disp);margin:0 0 1rem;font-weight:700;font-size:clamp(1.4rem,2.6vw,2rem)}
.quote-embed__box{position:relative;min-height:720px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}
.quote-embed__frame{position:relative;z-index:1;display:block;width:100%;min-height:720px;border:0;background:transparent}
.quote-embed__skel{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;gap:12px;padding:clamp(20px,4vw,30px);transition:opacity .4s ease}
.quote-embed__box.is-loaded .quote-embed__skel{opacity:0}
.sk-f{display:flex;flex-direction:column;gap:6px}
.sk-r{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sk-l,.sk-i,.sk-btn{border-radius:6px;background:linear-gradient(90deg,#e9e9e9 25%,#f5f5f5 37%,#e9e9e9 63%);background-size:400% 100%;animation:sk 1.4s ease infinite}
.sk-l{height:10px;width:32%}
.sk-i{height:40px}
.sk-i--area{height:88px}
.sk-i--cb{height:14px;width:82%}
.sk-btn{height:44px;width:100%;margin-top:4px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
/* request-a-quote: two-column form layout (form focus + phone/assurances sidebar) */
.qz{padding:clamp(1.8rem,4vw,3.2rem) 0;background:var(--soft)}
.qz>.wrap{max-width:1140px}
.qz-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(24px,3vw,40px);align-items:start}
.qz-form{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:clamp(20px,3vw,36px)}
.qz-form__h{font-family:var(--disp);font-weight:800;font-size:clamp(1.35rem,2.4vw,1.95rem);margin:0 0 8px}
.qz-form__lead{color:var(--muted);margin:0 0 20px;max-width:54ch}
.qz-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.qz-side .qcard{margin:0}
.qz-assure{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 24px}
.qz-assure h3{margin:0 0 14px;font-size:1.05rem}
.qz-assure ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.qz-assure li{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:.95rem;line-height:1.4}
.qz-assure li svg{width:20px;height:20px;flex:0 0 auto;color:var(--p);margin-top:1px}
.article--full{grid-template-columns:1fr;max-width:820px;margin-inline:auto}
.quote-embed__box--flush{box-shadow:none;border:1px solid var(--line);border-radius:14px;min-height:680px}
@media(max-width:900px){.qz-grid{grid-template-columns:1fr}.qz-side{position:static}}
/* animations -- scroll reveal only (gated on .anim, respects reduced-motion). The first screen
   (top bar, header, hero, H1, page hero) is never animated: it must be fully visible at first
   paint (FLEETGUARD-01 PERF-04), so the old page-load entrance effects were removed. */
@media (prefers-reduced-motion: no-preference){
  html.anim .reveal{opacity:0;transform:translateY(14px);transition:opacity .28s ease-out,transform .28s ease-out}
  html.anim .reveal.in{opacity:1;transform:none}
}
/* the header drop-in is a one-time page-load effect. The open mobile menu has to cancel it (its
   filled transform would trap the fixed menu panel inside the header), and switching it back on
   at close would replay it -- so once the menu is used (NAVJS sets .nav-used) it is retired. */
html.nav-used header.site{animation:none}
@keyframes aUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes aFade{from{opacity:0}to{opacity:1}}
@keyframes aPop{from{opacity:0;transform:scale(.96) translateY(10px)}to{opacity:1;transform:none}}
@keyframes aDrop{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
/* responsive */
@media(max-width:1120px){
  nav.main{display:none;position:fixed;top:var(--hdr,103px);left:0;right:0;bottom:0;z-index:130;background:#fff;border-top:1px solid var(--line);flex-direction:column;align-items:stretch;padding:12px 12px calc(12px + env(safe-area-inset-bottom));gap:2px;box-shadow:var(--shadow-lg);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  nav.main.open{display:flex}
  html.nav-open header.site{z-index:130;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}
  /* pill-nav variant: reset the desktop pill so the mobile panel isn't a giant ellipse */
  .lay-nav-pill nav.main{border-radius:0;padding:12px;gap:2px;background:#fff}
  .lay-nav-pill nav.main>a,.lay-nav-pill .nav-item>button{border-radius:10px;padding:12px 14px}
  nav.main>a,.nav-item>button{width:100%;text-align:left;font-size:1rem;padding:12px 14px}
  .nav-item{position:static}
  .mega{position:static;transform:none;opacity:1;visibility:visible;box-shadow:none;border:0;padding:2px 10px 12px;min-width:0;left:auto}
  .nav-item:hover .mega,.nav-item.open .mega{transform:none;left:auto}
  .mega--areas{min-width:0;grid-template-columns:1fr}
  .nav-item .mega{display:none}.nav-item.open .mega{display:block}
  .nav-cta-m{display:block}
  .nav-quote{display:block;background:var(--accent);color:var(--on-accent);text-align:center;font-weight:700;margin-top:10px;padding:13px}
  .brand{margin-right:auto}
  .burger{display:block;order:3}
  .hd .btn{display:none}
  .hd .tel{display:none}
  .top-tel{display:inline-flex;align-items:center}
}
@media(max-width:720px){
  .top .wrap{gap:10px;font-size:.8rem;justify-content:center}
  .top span,.top .dot{display:none}
  .top a:not([href^="tel"]){display:none}
}
@media(max-width:960px){
  .hero--split .wrap{grid-template-columns:1fr;gap:32px;padding:52px 24px}
  .hero--split .hero__media{order:-1}
  .hero--overlap .wrap{min-height:auto;padding:40px 20px}
  .hero--overlap .hero__card{width:100%;min-width:0}
  .trust .wrap{grid-template-columns:repeat(2,1fr);gap:16px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3,.steps{grid-template-columns:1fr}
  .article{grid-template-columns:1fr}
  .aside{position:static}
  footer.site .cols{grid-template-columns:1fr 1fr}
  footer.site.ft--split .ft-split{grid-template-columns:1fr}
  .ft-cta__in{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  body{font-size:16px}
  .sec{padding:52px 0}
  .wrap{padding:0 18px}
  .g4,.g3{grid-template-columns:1fr}
  .scards--side{grid-template-columns:1fr}
  .trust .wrap{grid-template-columns:1fr}
  .cta-band{padding:34px 20px}
  .hero h1{font-size:2rem}
  .hero .cta .btn,.cta-band .cta .btn{width:100%;justify-content:center}
  .brand small{display:none}
  footer.site .cols{grid-template-columns:1fr}
  footer.site.ft--split .ft-links{grid-template-columns:1fr}
}

/* ===== garage-door overrides ===== */
/* What We Do — image-overlay service cards with an icon chip */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.svc-card{position:relative;min-height:322px;border-radius:var(--radius);overflow:hidden;display:flex;align-items:flex-end;box-shadow:var(--shadow);text-decoration:none;isolation:isolate;transition:transform .2s,box-shadow .2s}
.svc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s ease}
.svc-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,17,24,0) 28%,rgba(12,17,24,.55) 62%,rgba(12,17,24,.93) 100%)}
.svc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.svc-card:hover img{transform:scale(1.07)}
.svc-card__ic{position:absolute;top:16px;left:16px;width:46px;height:46px;border-radius:13px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.svc-card__ic svg{width:24px;height:24px}
.svc-card__b{position:relative;padding:22px 22px 24px}
.svc-card__b h3{margin:0 0 6px;font-size:1.24rem;color:#fff;font-family:var(--disp)}
.svc-card__b p{margin:0 0 12px;color:rgba(255,255,255,.87);font-size:.93rem;line-height:1.5}
.svc-card__b .more{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:700;font-size:.9rem;color:#fff}
.svc-card__b .more svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.svc-card:hover .more svg{transform:translateX(4px)}
@media(max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}.svc-card{min-height:250px}}

/* "View all areas" pill — inline arrow icon instead of literal text */
.areas__all{display:inline-flex;align-items:center;gap:7px}
.areas__all svg{width:16px;height:16px}
.areas__all:hover svg{transform:translateX(3px);transition:transform .2s}

/* Footer — CTA strip + columns + trust row + legal */
.gfooter{background:#0e141b;color:#aeb9c5;margin-top:0}
.gf-cta{background:linear-gradient(135deg,var(--p),var(--pd))}
.gf-cta__in{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:34px 0}
.gf-cta h3{color:#fff;margin:0;font-size:clamp(1.3rem,2.5vw,1.75rem);font-family:var(--disp)}
.gf-cta p{color:rgba(255,255,255,.85);margin:5px 0 0;font-size:.98rem}
.gf-cta__btns{display:flex;gap:13px;flex-wrap:wrap}
.gfooter .gf-cta .btn--ghost{color:#fff;border:1px solid rgba(255,255,255,.55);background:transparent}
.gfooter .gf-cta .btn--ghost:hover{background:rgba(255,255,255,.14)}
.gf-main{padding:56px 0 24px}
.gf-cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:34px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1)}
.gf-cols h2{color:#fff;font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;margin:0 0 14px}
.gf-cols a{color:#b9c3ce;display:block;padding:5px 0;font-size:.94rem;text-decoration:none}
.gf-cols a:hover{color:#fff}
.gf-logo{display:flex;align-items:center;gap:11px;color:#fff;font-family:var(--disp);font-weight:800;font-size:1.2rem;margin-bottom:14px;text-decoration:none}
.gf-mark{width:42px;height:42px;border-radius:11px;background:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.gf-logo-img{height:56px;width:auto;max-width:230px;object-fit:contain;display:block}
.gf-logo-img--chip{background:#fff;padding:9px 14px;border-radius:12px;max-width:250px;box-sizing:border-box}
.gf-brand p{font-size:.95rem;max-width:34ch;line-height:1.6;color:#9aa6b2;margin:0}
.gf-addr{font-style:normal;line-height:1.7;font-size:.94rem;margin-top:12px;color:#9aa6b2}
.gf-addr a{color:#fff;font-weight:700;text-decoration:none}
.gf-trust{display:flex;flex-wrap:wrap;gap:14px 30px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.gf-trust div{display:flex;align-items:center;gap:10px;font-size:.9rem;color:#c9d2dc}
.gf-trust svg{width:20px;height:20px;color:var(--accent);flex:0 0 auto}
.gf-legal{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:20px;font-size:.85rem;color:#7d8894}
.gf-legal a{color:#aeb9c5;text-decoration:underline;text-underline-offset:2px}
.gf-cols--noareas{grid-template-columns:1.7fr 1fr 1fr}
@media(max-width:820px){.gf-cols{grid-template-columns:1fr 1fr}.gf-brand{grid-column:1/-1}}
@media(max-width:520px){.gf-cols{grid-template-columns:1fr}.gf-cta__in{flex-direction:column;align-items:flex-start}}

/* trust bar sits on the dark --p background: a coloured --accent highlight can't hit
   4.5:1 on many themes, so highlights go white (emphasis via weight), regular text is
   dimmed so the bold still pops, and only the decorative icons keep a lightened accent */
.trust span{color:#fff}
.trust b{color:#fff}
.trust svg{stroke:color-mix(in srgb, var(--accent) 30%, #fff);color:color-mix(in srgb, var(--accent) 30%, #fff)}

/* ===== showcase homepage variant ===== */
/* split "why us": copy + checklist beside an image with an optional review badge */
.whyx{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center}
.whyx h2{margin:.3rem 0 .9rem}
.whyx__img{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);min-height:340px}
.whyx__img img{width:100%;height:100%;object-fit:cover;display:block}
.rev-badge{position:absolute;left:18px;bottom:18px;background:#fff;border-radius:14px;padding:11px 15px;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:11px}
.rev-badge .stars{display:flex;gap:1px}
.rev-badge .stars svg{width:13px;height:13px;color:var(--accent)}
.rev-badge b{display:block;font-family:var(--disp);font-size:1.15rem;color:var(--ink);line-height:1.05}
.rev-badge span{font-size:.78rem;color:var(--muted)}
.checklist{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:13px}
.checklist li{display:flex;align-items:flex-start;gap:11px;font-weight:600;color:var(--ink)}
.checklist svg{width:22px;height:22px;color:var(--accent);flex:0 0 auto;margin-top:1px}
@media(max-width:820px){.whyx{grid-template-columns:1fr;gap:28px}.whyx__img{min-height:250px}}

/* stat / credibility row */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 18px;text-align:center}
.stat b{display:block;font-family:var(--disp);font-size:1.85rem;color:var(--p);line-height:1}
.stat span{display:block;margin-top:7px;font-size:.85rem;color:var(--muted)}
@media(max-width:700px){.stats{grid-template-columns:1fr 1fr}}

/* homepage contact block — its own tinted background, distinct from the gradient CTA band */
.sec--contact{background:color-mix(in srgb, var(--accent) 9%, #fff);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.contact{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.contact__c{display:flex;flex-direction:column;gap:6px}
.contact__c .lbl{display:flex;align-items:center;gap:8px;font-family:var(--disp);font-weight:700;color:var(--ink);font-size:.92rem}
.contact__c .lbl svg{width:18px;height:18px;color:var(--accent);flex:0 0 auto}
.contact__c a,.contact__c .v{color:var(--muted);font-size:.95rem;word-break:break-word;text-decoration:none}
.contact__c a:hover{color:var(--p)}
.contact__cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:28px}
@media(max-width:700px){.contact{grid-template-columns:1fr 1fr;gap:22px 16px}}
@media(max-width:430px){.contact{grid-template-columns:1fr}}
/* We offer same-day service -- image + copy band */
.sd__grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.sd__copy h2{margin:.4rem 0 .7rem}
.sd .cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.sd__list{list-style:none;margin:18px 0 26px;padding:0;display:grid;gap:11px}
.sd__list li{display:flex;align-items:center;gap:11px;font-weight:600;color:var(--ink)}
.sd__list svg{fill:none;stroke:var(--accent);color:var(--accent);flex:0 0 auto;width:22px;height:22px}
.sd__media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3}
.sd__media img{width:100%;height:100%;object-fit:cover;display:block}
.sd__badge{position:absolute;left:16px;bottom:16px;display:flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent);padding:9px 15px;border-radius:999px;font-size:.9rem;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.sd__badge svg{width:19px;height:19px;fill:none;stroke:currentColor}
@media(max-width:820px){.sd__grid{grid-template-columns:1fr;gap:26px}.sd__media{order:-1}}
/* Our Work -- homepage photo gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal__item{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;box-shadow:var(--shadow)}
.gal__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.gal__item:hover img{transform:scale(1.06)}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}}
@media(max-width:430px){.gallery{grid-template-columns:1fr}}
.gallery--featured{grid-template-columns:1.6fr 1fr;align-items:stretch}
.gallery--featured .gal__item--lead{aspect-ratio:auto}
.gallery--featured .gal-thumbs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.gallery--featured .gal-thumbs .gal__item{aspect-ratio:4/3}
@media(max-width:760px){.gallery--featured{grid-template-columns:1fr}.gallery--featured .gal__item--lead{aspect-ratio:16/10}}
@media(max-width:430px){.gallery--featured .gal-thumbs{grid-template-columns:repeat(2,1fr)}}
.gallery--bento{grid-auto-rows:150px}
.gallery--bento .gal__item{aspect-ratio:auto}
.gallery--bento .gal__item:nth-child(1){grid-column:span 2;grid-row:span 2}
.gallery--bento .gal__item:nth-child(6){grid-column:span 2}
.gallery--bento .gal__item:nth-child(8){grid-row:span 2}
@media(max-width:760px){.gallery--bento{grid-auto-rows:120px}.gallery--bento .gal__item:nth-child(n){grid-column:auto;grid-row:auto}}
.gallery--justified{display:flex;flex-wrap:wrap}
.gallery--justified .gal__item{height:210px;flex:1 1 auto;aspect-ratio:auto}
.gallery--justified .gal__item:nth-child(3n+1){flex-basis:340px}
.gallery--justified .gal__item:nth-child(3n+2){flex-basis:230px}
.gallery--justified .gal__item:nth-child(3n){flex-basis:290px}
@media(max-width:520px){.gallery--justified .gal__item{height:170px;flex-basis:45% !important}}
.gallery--staggered{gap:16px;align-items:start}
.gallery--staggered .gal__item{aspect-ratio:3/4}
.gallery--staggered .gal__item:nth-child(even){margin-top:38px}
@media(max-width:760px){.gallery--staggered{grid-template-columns:repeat(2,1fr)}.gallery--staggered .gal__item:nth-child(even){margin-top:24px}}
.gallery--panels{display:flex;gap:12px;height:340px}
.gallery--panels .gal__item{flex:1;transition:flex .45s cubic-bezier(.22,.61,.36,1);position:relative;min-width:0;aspect-ratio:auto}
.gallery--panels .gal__item:hover{flex:3.4}
.gallery--panels figcaption{position:absolute;inset:auto 0 0 0;padding:22px 14px 14px;color:#fff;font-family:var(--disp);font-weight:700;white-space:nowrap;background:linear-gradient(to top,rgba(10,16,24,.8),transparent)}
@media(max-width:760px){.gallery--panels{height:auto;flex-direction:column}.gallery--panels .gal__item{height:110px}.gallery--panels .gal__item:hover{flex:1}}
/* home content sections as alternating image + text rows */
.hc-rows{display:flex;flex-direction:column;gap:44px;max-width:1060px;margin:0 auto}
.hc-row{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.hc-row--alt .hc-row__media{order:1}
.hc-row__media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.hc-row__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.hc-row:hover .hc-row__media img{transform:scale(1.04)}
.hc-row__text h3{font-family:var(--disp);font-weight:700;font-size:1.42rem;line-height:1.2;margin:0 0 12px;color:var(--ink)}
.hc-row__b{color:var(--muted);font-size:1rem;line-height:1.68}
.hc-row__b p{margin:0 0 12px}.hc-row__b p:last-child{margin:0}
.hc-row__b ul,.hc-row__b ol{margin:0 0 12px;padding-left:18px}
@media(max-width:760px){.hc-row{grid-template-columns:1fr;gap:18px}.hc-row--alt .hc-row__media{order:0}}
/* ===== header on scroll (anim.js toggles .scrolled) ===== */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--accent),var(--p));z-index:200;pointer-events:none}
header.site{transition:box-shadow .3s ease,background-color .3s ease}
header.site.scrolled{box-shadow:0 10px 30px -8px rgba(12,17,24,.18);background:rgba(255,255,255,.97)}
.top{overflow:hidden;max-height:80px;transition:max-height .4s ease,opacity .3s ease}
.top>.wrap{transition:padding .4s ease}
html.scrolled .top{max-height:0;opacity:0}
html.scrolled .top>.wrap{padding-top:0;padding-bottom:0}
.svc-card,.feat,.gal__item,.sd__media{will-change:transform}
/* sticky call / quote bar -- mobile + tablet only */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:120;display:none;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);backdrop-filter:saturate(1.1) blur(8px);
  border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(12,17,24,.12)}
.mcta a{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 10px;
  border-radius:12px;font-weight:700;font-size:1rem;white-space:nowrap;text-decoration:none;box-shadow:var(--shadow)}
.mcta a:active{transform:translateY(1px)}
.mcta .mcta-call{background:var(--accent);color:var(--on-accent)}
.mcta .mcta-quote{background:var(--p);color:#fff}
.mcta svg{width:20px;height:20px;flex:0 0 auto}
@media(max-width:960px){.mcta{display:flex}body{padding-bottom:74px}}
/* keep both labels on one line on very narrow phones (~320px) instead of wrapping tall */
@media(max-width:380px){.mcta{gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .mcta a{gap:6px;padding:13px 6px;font-size:.94rem}.mcta svg{width:18px;height:18px}}
/* roomier navbar on mobile + tablet */
@media(max-width:960px){header.site .hd{padding-top:16px;padding-bottom:16px}}
/* ===== Where We Work variants (layout.areas: cards | tiers | columns; chips = base) ===== */
.areas--left,.areas.areas--left{justify-content:flex-start;max-width:none;margin:0}
.areas-more{display:flex;justify-content:center;margin-top:26px}
.areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.area-card{display:flex;align-items:center;gap:10px;padding:15px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem;transition:border-color .2s,transform .2s,box-shadow .2s}
.area-card:hover{border-color:var(--p);transform:translateY(-2px);box-shadow:var(--shadow);color:var(--p);text-decoration:none}
.area-card svg{width:18px;height:18px;fill:none;stroke:var(--accent);color:var(--accent);flex:0 0 auto}
.areas-tiers{display:grid;grid-template-columns:1fr 1fr;gap:34px;max-width:960px;margin:0 auto}
.areas-tiers--single{grid-template-columns:1fr;max-width:860px}
.areas-tiers--single .areas-tier{text-align:center}
.areas-tiers--single .areas--left{justify-content:center;max-width:none}
.areas-tier h3{font-family:var(--disp);font-size:1.1rem;margin:0 0 14px;color:var(--ink);padding-bottom:8px;border-bottom:2px solid var(--accent);display:inline-block}
.areas-cols{column-count:4;column-gap:30px;max-width:980px;margin:0 auto}
.area-col-link{display:block;padding:9px 2px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500;break-inside:avoid;transition:color .15s,padding-left .15s}
.area-col-link:hover{color:var(--p);padding-left:6px;text-decoration:none}
@media(max-width:900px){.areas-grid{grid-template-columns:repeat(2,1fr)}.areas-cols{column-count:2}.areas-tiers{grid-template-columns:1fr;gap:26px}}
@media(max-width:520px){.areas-grid{grid-template-columns:1fr}.areas-cols{column-count:1}}
/* How It Works -- "cards" step variant: accent number badge + hover lift */
.steps--cards{margin-top:22px}
.steps--cards .step{transition:transform .2s,box-shadow .2s}
.steps--cards .step:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.steps--cards .step::before{background:var(--accent);color:var(--on-accent)}
/* ===== Request-a-Quote form (placeholder mailto form) ===== */
.qf{max-width:880px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(24px,4vw,42px)}
.qf h2{margin:0 0 6px}
.qf__lead{color:var(--muted);margin:0 0 24px;max-width:60ch}
.qf__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px}
.qf__field{display:flex;flex-direction:column;gap:7px}
.qf__field--full{grid-column:1/-1}
.qf__field>span{font-family:var(--disp);font-weight:700;font-size:.92rem;color:var(--ink)}
.qf__field b{color:var(--accent);font-weight:700}
.qf input,.qf select,.qf textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft);font:inherit;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.qf input:focus,.qf select:focus,.qf textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.qf textarea{resize:vertical;min-height:118px}
.qf__btn{width:100%;justify-content:center;margin-top:24px;text-transform:uppercase;letter-spacing:.05em}
.qf__note{text-align:center;color:var(--muted);font-size:.9rem;margin:14px 0 0}
@media(max-width:640px){.qf__grid{grid-template-columns:1fr}}
/* Contact-page map embed */
.map-embed{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);aspect-ratio:16/7;max-width:1000px;margin:0 auto}
.map-embed iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:640px){.map-embed{aspect-ratio:4/3}}
/* ===== Guides / Resources index page ===== */
.crumbbar{background:var(--soft);border-bottom:1px solid var(--line)}
.crumbbar .wrap{padding:11px 24px}
.crumbbar .crumb{margin:0;font-size:.9rem;color:var(--muted)}
.crumbbar .crumb a{color:var(--muted);text-decoration:none}
.crumbbar .crumb a:hover{color:var(--p)}
.guide-feat{display:grid;grid-template-columns:1fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:inherit;margin-bottom:26px;transition:box-shadow .2s,transform .2s}
.guide-feat:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);text-decoration:none}
.guide-feat__img img{width:100%;height:100%;min-height:250px;object-fit:cover;display:block}
.guide-feat__b{padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;justify-content:center}
.guide-feat__b h2{margin:0 0 10px;font-size:1.4rem}
.guide-feat__b p{color:var(--muted);margin:0 0 16px}
@media(max-width:720px){.guide-feat{grid-template-columns:1fr}.guide-feat__img img{min-height:200px}}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.guide-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.guide-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);text-decoration:none}
.guide-card__img{aspect-ratio:16/10;overflow:hidden}
.guide-card__img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}
.guide-card:hover .guide-card__img img{transform:scale(1.05)}
.guide-card__b{padding:20px;display:flex;flex-direction:column;flex:1}
.guide-card__b h3{margin:0 0 8px;font-size:1.08rem}
.guide-card__b p{color:var(--muted);font-size:.93rem;margin:0 0 14px;flex:1}
.read-more{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-family:var(--disp);font-weight:700;font-size:.92rem}
.read-more svg{width:16px;height:16px;fill:none;stroke:currentColor;transition:transform .2s}
.guide-card:hover .read-more svg,.guide-feat:hover .read-more svg{transform:translateX(4px)}
@media(max-width:860px){.guide-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.guide-grid{grid-template-columns:1fr}}
.sec-head--left{text-align:left;max-width:none;margin-left:0;margin-right:0}
.gsvc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gsvc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:box-shadow .2s,transform .2s}
.gsvc:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px);text-decoration:none}
.gsvc__ic{width:46px;height:46px;border-radius:12px;background:rgba(0,0,0,.05);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.gsvc__ic svg{width:24px;height:24px}
.gsvc h3{margin:0 0 8px;font-size:1.1rem}
.gsvc p{color:var(--muted);font-size:.93rem;margin:0}
@media(max-width:760px){.gsvc-grid{grid-template-columns:1fr}}
/* responsive images: <img> now carries width/height (aspect ratio, no layout shift); height:auto
   keeps the old intrinsic sizing wherever no slot rule sets a height (slot rules still win) */
img{height:auto}
/* banner / center heroes: the photo is a real <img> (alt text + srcset) covering the section,
   with the layout's colour overlay on ::before above it -- same look as the old CSS background */
.hero--img{isolation:isolate;background:#0b121c}
.hero--img .hero__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.hero--img::before{content:"";position:absolute;inset:0;z-index:-1}
.hero--center.hero--img::before{background:linear-gradient(155deg,color-mix(in srgb,var(--pd) 90%,transparent),color-mix(in srgb,var(--p) 84%,transparent))}
.hero--banner.hero--img::before{background:linear-gradient(rgba(11,18,28,.74),rgba(11,18,28,.66))}
/* 404 page */
.page-hero .eyebrow{color:#fff;opacity:.85;margin:0 0 6px}
.nf{max-width:760px}
.nf .lead{font-size:1.12rem;color:var(--ink);line-height:1.6;margin:0 0 22px}
.nf .cta{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 34px}
.nf h2{font-size:1.25rem;margin:0 0 12px}
.nf__links{columns:2;column-gap:28px;padding-left:18px;margin:0}
.nf__links li{margin:0 0 8px;break-inside:avoid}
@media(max-width:560px){.nf__links{columns:1}}

/* per-site badge logo size (sites.json logo_badge_h) */
.brand__mark{height:58px;max-width:99px;width:auto}
.gf-logo-img{height:110px;max-width:200px}
@media(max-width:520px){.brand__mark{height:48px;max-width:81px}}

/* self-hosted fonts (fetch_fonts.py) */
@font-face{font-family:'Exo 2';font-style:normal;font-weight:600 800;font-display:swap;src:url(/assets/fonts/exo-2-display-600-800.4a259dde.woff2) format('woff2')}
@font-face{font-family:'Exo 2 Fallback';src:local('Arial'),local('ArialMT');size-adjust:103.45%;ascent-override:96.56%;descent-override:19.43%;line-gap-override:0.00%}
@font-face{font-family:'Mulish';font-style:normal;font-weight:400 700;font-display:optional;src:url(/assets/fonts/mulish-body-400-700.8d1d33d6.woff2) format('woff2')}
@font-face{font-family:'Mulish Fallback';src:local('Arial'),local('ArialMT');size-adjust:101.48%;ascent-override:99.04%;descent-override:24.64%;line-gap-override:0.00%}
:root{--disp:'Exo 2','Exo 2 Fallback',system-ui,sans-serif;--body:'Mulish','Mulish Fallback',system-ui,sans-serif}

/* skip link, picture wrappers, related links */
.skip{position:absolute;left:-9999px;top:8px;z-index:1000;background:#fff;color:#111;padding:10px 16px;border-radius:8px;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.25)}
.skip:focus{left:12px}
picture{display:contents}
.rel-links{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 0;padding:0;list-style:none}
.rel-links a{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card,#fff);color:var(--ink);font-weight:600;font-size:.94rem;text-decoration:none}
.rel-links a:hover{border-color:var(--p);color:var(--p)}
.rel-box{margin:34px 0 0;padding:22px 24px;border:1px solid var(--line);border-radius:var(--radius,14px);background:var(--soft,#f6f7f9)}
.rel-box h2{font-size:1.2rem;margin:0 0 10px}
.rel-box h3{font-size:1.05rem;margin:0 0 8px}
.byline{color:var(--muted);font-size:.92rem;margin:0 0 18px}
.toc{border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 24px;background:var(--soft,#f6f7f9)}
.toc p{font-weight:700;margin:0 0 6px}.toc ul{margin:0;padding-left:18px}.toc li{margin:3px 0}
@media(max-width:767px){.hero--split .hero__media{order:1}.hero--split .hero__copy{order:0}.hero--split .wrap{padding-top:28px;gap:22px}}