*{box-sizing:border-box;margin:0;padding:0}
:root{--acc:#0B6070;--acc2:#084A57;--ink:#14161A;--ink2:#4A5158;--ink3:#5C646C;
 --paper:#fff;--paper2:#F5F6F7;--line:#E3E5E8;--dark:#101215;
 --d:'Oswald',Impact,sans-serif;--b:'Public Sans',-apple-system,Helvetica,sans-serif}
html{scroll-behavior:smooth}
body{font-family:var(--b);font-size:17px;line-height:1.65;color:var(--ink);background:var(--paper);
 -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.w{max-width:1140px;margin:0 auto;padding:0 22px}
.bar{background:var(--acc);color:#fff;padding:13px 0}
.bar .w{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap;
 font-size:16px;font-weight:600}
.bar .now{display:inline-flex;align-items:center;gap:9px;font-size:18px}
.bar .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:bl 1.6s ease-in-out infinite}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.3}}
.bar a.tel{font-family:var(--d);font-size:21px;color:#fff;letter-spacing:.01em}
.bar .ts{display:flex;gap:22px;font-size:14.5px;font-weight:500;opacity:.94}
.bar .ts span{white-space:nowrap}
@media(max-width:820px){.bar .ts{display:none}.bar .w{gap:12px}}
@media(prefers-reduced-motion:reduce){.bar .dot{animation:none}}
header{position:sticky;top:0;z-index:50;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);
 box-shadow:0 1px 0 rgba(0,0,0,.03)}
header .w{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px}
header img{height:66px;width:auto}
nav{display:flex;gap:28px;font-size:16.5px;font-weight:600}
nav a{padding:6px 0;border-bottom:2px solid transparent;min-height:40px;display:inline-flex;align-items:center}
nav a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.callwrap{text-align:right}
.callwrap .lbl{display:block;font-size:12.5px;font-weight:700;letter-spacing:.11em;
 text-transform:uppercase;color:var(--ink3);margin-bottom:4px}
.call{display:inline-block;background:var(--acc);color:#fff;font-family:var(--d);font-size:24px;
 padding:13px 26px;border-radius:5px;white-space:nowrap;letter-spacing:.005em}
.call:hover{background:var(--acc2)}
@media(max-width:1050px){nav{display:none}}
@media(max-width:560px){header img{height:48px}.call{font-size:19px;padding:11px 17px}}
.trust{background:var(--paper2);border-bottom:1px solid var(--line)}
.trust .w{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;padding:13px 22px;
 font-size:15px;font-weight:600;color:var(--ink2)}
.trust b{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.trust svg{width:17px;height:17px;flex:none;color:var(--acc)}
@media(max-width:760px){.trust .w{gap:16px;font-size:13.5px}}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;
 background:var(--acc);color:#fff;padding:13px 18px;align-items:center;justify-content:space-between;
 box-shadow:0 -4px 18px rgba(0,0,0,.22)}
.sticky b{font-family:var(--d);font-size:21px}
.sticky span{font-size:13px;opacity:.9;display:block}
@media(max-width:820px){.sticky{display:flex}body{padding-bottom:70px}}
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.hero .bg{position:absolute;inset:0;background-size:cover;background-position:50% 32%;opacity:.62}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
 background:linear-gradient(100deg,rgba(16,18,21,.94) 0%,rgba(16,18,21,.6) 46%,rgba(16,18,21,.12) 100%)}
.hero .w{position:relative;z-index:2;padding:76px 22px 84px;display:grid;
 grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
@media(max-width:960px){.hero .w{grid-template-columns:1fr;gap:30px;padding:52px 22px 60px}}
h1{font-family:var(--d);font-size:clamp(34px,5.4vw,58px);line-height:1.02;letter-spacing:-.02em;
 text-wrap:balance}
.hero p.s{font-size:19px;color:#D3D8DD;margin-top:16px;max-width:48ch}
.badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.badges span{border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.06);
 padding:8px 13px;font-size:14px;border-radius:3px}
.cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:28px}
.btn{background:var(--acc);color:#fff;font-family:var(--d);font-size:21px;padding:15px 26px;border-radius:4px}
.btn2{border:1.5px solid rgba(255,255,255,.4);color:#fff;font-weight:600;font-size:16px;
 padding:15px 22px;border-radius:4px}
.card{background:var(--paper);color:var(--ink);border-radius:8px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);
 overflow:hidden}
.card h3,.card h2{font-family:var(--d);font-size:21px;padding:19px 22px 0}
.card p.h{font-size:15px;color:var(--ink2);padding:5px 22px 0}
form{padding:16px 22px 22px;display:grid;gap:11px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:11px}
label{display:grid;gap:4px;font-size:15px;font-weight:600;color:var(--ink2)}
input,select,textarea{font-family:var(--b);font-size:16px;padding:11px 12px;border:1.5px solid var(--line);
 border-radius:4px;background:var(--paper2);width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);background:var(--paper);color:var(--ink)}
button.sub{background:var(--dark);color:#fff;font-family:var(--d);font-size:18px;padding:15px;
 border:none;border-radius:4px;cursor:pointer}
button.sub:hover{background:var(--acc)}
.fine{font-size:14.5px;color:var(--ink3);text-align:center}
.msg{font-size:14.5px;padding:9px 12px;border-radius:4px;display:none}
.msg.ok{display:block;background:#E7F3EE;color:#0B6B4E}
.msg.err{display:block;background:#FBEEEB;color:#94382A}
.strip{background:var(--paper2);border-bottom:1px solid var(--line)}
.strip .w{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);padding:0}
.strip div{background:var(--paper2);padding:20px 16px;text-align:center}
.strip b{display:block;font-family:var(--d);font-size:15px}
.strip span{font-size:13px;color:var(--ink3);display:block;margin-top:3px}
@media(max-width:760px){.strip .w{grid-template-columns:repeat(2,1fr)}}
section{padding:62px 0}
.sh{margin-bottom:26px}
.sh span{font-size:13.5px;font-weight:700;color:var(--acc);letter-spacing:.08em;text-transform:uppercase}
h2{font-family:var(--d);font-size:clamp(26px,3.6vw,38px);line-height:1.1;letter-spacing:-.015em;
 margin-top:7px;text-wrap:balance}
.sh p{color:var(--ink2);margin-top:11px;max-width:64ch}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.ic{position:relative;aspect-ratio:3/4;border-radius:8px;overflow:hidden;background:var(--dark);
 display:block;transition:transform .2s}
.ic:hover{transform:translateY(-5px);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
.ic:hover .bg{transform:scale(1.04)}
.ic .bg{transition:transform .4s ease}
.ic .bg{position:absolute;inset:0;background-size:cover;background-position:50% 32%;opacity:1}
.ic .sc{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,9,11,.96) 0%,rgba(8,9,11,.82) 32%,rgba(8,9,11,.28) 62%,rgba(8,9,11,.06) 100%)}
.ic .tx{position:absolute;inset:auto 0 0 0;padding:24px 22px;color:#fff}
.ic h3{font-size:22px;line-height:1.15;font-weight:500}
.ic h3 b{display:block;font-family:var(--d);font-size:1.08em;font-weight:400}
.ic .go{margin-top:13px;font-weight:700;font-size:14.5px;letter-spacing:.06em;text-transform:uppercase;
 color:var(--acc)}
.ic .eta{margin-top:5px;font-size:14px;color:#BFC5CB}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:26px}}
.two img{border-radius:8px;width:100%;height:auto;object-fit:contain}
ul.li{list-style:none;margin-top:16px}
ul.li li{padding:13px 0 13px 26px;position:relative;border-bottom:1px solid var(--line)}
ul.li li:last-child{border:none}
ul.li li::before{content:"";position:absolute;left:0;top:23px;width:13px;height:3px;
 background:var(--acc);border-radius:2px}
ul.li b{display:block;margin-bottom:2px}
ul.li span{color:var(--ink2);font-size:16px}
.band{background:var(--dark);color:#fff}
.band h2{color:#fff}
.band .sh span{color:color-mix(in srgb,var(--acc) 45%,#fff)}
.band p{color:#C3C9CF}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
@media(max-width:800px){.steps{grid-template-columns:1fr}}
.steps div{border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:22px}
.steps b{display:block;font-family:var(--d);font-size:19px;color:color-mix(in srgb,var(--acc) 38%,#fff);margin-bottom:6px}
.strip3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.strip3 img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
@media(max-width:760px){.strip3{grid-template-columns:1fr}}
footer{background:#0B0C0E;color:#9AA1A8;padding:44px 0 60px;font-size:15px}
footer .w{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
@media(max-width:800px){footer .w{grid-template-columns:1fr;gap:22px}}
footer h2,footer h4{color:#fff;font-family:var(--d);font-size:16px;margin-bottom:9px}
footer a:hover{color:#fff}
footer .bot{border-top:1px solid #1C1F23;margin-top:30px;padding-top:20px;font-size:13.5px;color:#6B7278}


.crumb{background:var(--paper2);border-bottom:1px solid var(--line);font-size:13.5px;padding:9px 0;color:var(--ink3)}
.crumb a{color:var(--ink2);font-weight:600}.crumb span{margin:0 6px}
.pbanner{color:#fff;position:relative;overflow:hidden;padding:52px 0}
.pbanner h1{font-size:clamp(30px,4.6vw,48px)}
.pbanner.dark{background:var(--dark);padding:64px 0;min-height:360px;display:flex;align-items:center}
.pbanner.dark>.w{width:100%}
@media(max-width:700px){.pbanner.dark{min-height:270px;padding:44px 0}}
.pbanner.dark .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42}
.pbanner.dark .w{position:relative;z-index:2}
.pbanner.dark p{color:#C9CFD6;margin-top:12px;max-width:60ch;font-size:18px}
.pbanner.img{background:var(--dark);padding:110px 0 70px;min-height:420px;display:flex;align-items:flex-end}
.pbanner.img>.w{width:100%}
@media(max-width:700px){.pbanner.img{min-height:300px;padding:70px 0 44px}}
.pbanner.img .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55}
.pbanner.img .w{position:relative;z-index:2}
.pbanner.img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,11,13,.85),rgba(10,11,13,.15))}
.pbanner.img .w{z-index:3}
.pbanner.light{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line);padding:64px 0 40px}
.pbanner.light h1{color:var(--ink)}
.lede{font-size:19.5px;color:var(--ink2);max-width:66ch;line-height:1.7}
section.tight{padding:44px 0}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:800px){.checks{grid-template-columns:1fr}}
.chk{display:flex;gap:14px;border:1px solid var(--line);border-radius:8px;padding:18px;background:var(--paper)}
.chk{align-items:flex-start}
.chk>span{flex:none;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--acc) 80%,#000);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;margin-top:2px}
.chk b{display:block;margin-bottom:4px}.chk p{color:var(--ink2);font-size:15.5px}
.fq{border:1px solid var(--line);border-radius:7px;background:var(--paper);margin-bottom:10px;padding:0 18px}
.fq summary{cursor:pointer;font-weight:700;padding:15px 0;list-style:none;position:relative;padding-right:30px}
.fq summary::after{content:"+";position:absolute;right:2px;top:12px;font-size:22px;color:var(--acc)}
.fq[open] summary::after{content:"\2212"}
.fq p{color:var(--ink2);padding:0 0 16px}
.ctaband{background:var(--dark);color:#fff;padding:44px 0}
.ctaband .w{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ctaband h2{color:#fff;font-size:clamp(22px,3vw,30px)}
.ctaband p{color:#BEC5CC;margin-top:6px}
.related{border-top:1px solid var(--line);padding:18px 0;font-size:15px}
.related .w{display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.related span{color:var(--ink3);font-weight:600}
.related a{font-weight:700;color:var(--acc)}
.withrail{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
@media(max-width:960px){.withrail{grid-template-columns:1fr}}
.art h3,.art>h2{font-family:var(--d);font-size:21px;margin:26px 0 8px}
.art h3:first-child,.art>h2:first-child{margin-top:0}
.art p{color:var(--ink2);margin-bottom:6px}
.artimg{margin:26px 0}
.artimg img{border-radius:10px;width:100%;max-height:340px;object-fit:cover}
.artimg figcaption{font-size:13.5px;color:var(--ink3);margin-top:8px}
.artchecks{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
/* column count must equal item count or the last card orphans onto a half-empty row */
.artchecks.n1{grid-template-columns:1fr}
.artchecks.n3{grid-template-columns:repeat(3,1fr)}
.artchecks.n4{grid-template-columns:repeat(2,1fr)}
@media(max-width:700px){.artchecks,.artchecks.n3,.artchecks.n4{grid-template-columns:1fr}}
.artchecks>div{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:15px;background:var(--paper2)}
.artchecks span{flex:none;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--acc) 82%,#000);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:2px}
.artchecks b{display:block;margin-bottom:3px;font-size:15.5px}
.artchecks p{font-size:14.5px;margin:0}
.rail{position:sticky;top:120px;display:grid;gap:14px}
.railcard{border:1px solid var(--line);border-radius:9px;padding:18px;background:var(--paper)}
.railcard.phone{background:var(--acc);color:#fff;text-align:center}
.railcard.phone span{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.85;display:block}
.railcard.phone a{font-family:var(--d);font-size:26px;color:#fff;display:block;margin-top:4px}
.railcard b{display:block;margin-bottom:9px}
.railcard p{color:var(--ink2);font-size:14.5px}
form.mini{display:grid;gap:9px}
form.mini input{font-family:var(--b);font-size:15px;padding:10px 11px;border:1.5px solid var(--line);
 border-radius:5px;background:var(--paper2);width:100%}
form.mini .sub{padding:11px;font-size:15px}
.railor{text-align:center;font-size:13.5px;color:var(--ink3);margin-top:8px}
.railor a{font-weight:700;color:var(--acc)}
.ic .tx{text-shadow:0 1px 10px rgba(0,0,0,.75)}
.ic .sc{background:linear-gradient(to top,rgba(8,9,11,.97) 0%,rgba(8,9,11,.85) 30%,rgba(8,9,11,.45) 60%,rgba(8,9,11,.12) 100%)!important}
.pbanner.dark .bg{opacity:.38}
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.on{opacity:1;transform:none}
.hero h1,.hero p.s,.hero .badges,.hero .cta,.hero .card{animation:fadeup .7s ease both}
.hero p.s{animation-delay:.12s}.hero .badges{animation-delay:.22s}
.hero .cta{animation-delay:.32s}.hero .card{animation-delay:.25s}
@keyframes fadeup{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}
.hero h1,.hero p.s,.hero .badges,.hero .cta,.hero .card{animation:none}}
.herocenter .w h1{font-size:clamp(32px,4.4vw,56px)}
.gridbx{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gridbx.n1{grid-template-columns:1fr}.gridbx.n3{grid-template-columns:repeat(3,1fr)}
.gridbx>div{border:1px solid var(--line);background:var(--paper2);border-radius:6px;
 padding:18px 20px;background:var(--paper)}
.gridbx b{display:block;font-size:17.5px;margin-bottom:5px}
.gridbx p{color:var(--ink2);font-size:16px}
@media(max-width:760px){.gridbx{grid-template-columns:1fr}}
ol.steps{list-style:none;margin-top:16px}
ol.steps li{counter-increment:s;padding:14px 0 14px 54px;position:relative;border-bottom:1px solid var(--line)}
ol.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:12px;
 font-family:var(--d);font-size:22px;color:var(--acc)}
ol.steps b{display:block;margin-bottom:3px}
ol.steps span{color:var(--ink2);font-size:16px}
/* interaction layer (ui-ux-pro-max): press feedback, hover lifts, touch hygiene */
a,button,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.btn,.call,.sub,.btn2{cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,filter .2s ease}
.btn:active,.call:active,.sub:active,.btn2:active{transform:scale(.96)}
@media(hover:hover){
.ic,.chk,.gridbx>div,.railcard,.fq{transition:transform .25s ease,box-shadow .25s ease}
.ic:hover,.chk:hover,.gridbx>div:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.14)}
.ic img{transition:transform .55s ease}.ic:hover img{transform:scale(1.05)}
.btn:hover,.sub:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 10px 24px color-mix(in srgb,var(--acc) 30%,transparent)}
nav a{position:relative}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--acc);transition:right .25s ease}
nav a:hover::after{right:0}
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.sticky a{min-height:48px;display:flex;align-items:center;justify-content:center}
img{max-width:100%;height:auto}
h2{text-wrap:balance}
@media(prefers-reduced-motion:reduce){.btn,.call,.sub,.btn2,.ic,.ic img,.chk,.gridbx>div{transition:none}}
.btn.bigcall{font-size:clamp(22px,2.4vw,28px);padding:16px 34px}
/* --- mobile overhaul (audit fixes) --- */
@media(max-width:560px){
.trust .w{display:flex;overflow-x:auto;gap:18px;flex-wrap:nowrap;padding-top:8px;padding-bottom:8px;
 -webkit-overflow-scrolling:touch;scrollbar-width:none}
.trust .w::-webkit-scrollbar{display:none}
.trust b{white-space:nowrap;font-size:12.5px}
.badges{gap:7px}.badges span{font-size:12px;padding:6px 10px}
.badges span:nth-child(n+3){display:none}
section{padding-top:44px;padding-bottom:44px}
.cards{gap:12px}
.cards .ic{aspect-ratio:auto;height:190px;max-height:none;width:100%;overflow:hidden}
.cards .ic img{height:190px;object-fit:cover}
h1{font-size:clamp(27px,7.5vw,34px)}
h2{font-size:clamp(21px,5.6vw,26px)}
.strip3{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.strip3 img{height:130px;object-fit:cover;width:100%}
.strip3 img:nth-child(3){display:none}
.bento{gap:10px}
.b-img{min-height:150px}
.b-call{min-height:130px}
.bx{padding:16px}
.poster h1{font-size:clamp(30px,6.4vw,46px)}
.sp-l{padding:34px 20px}
.splith{min-height:0}
.ffh .w{padding-top:8px}
footer{padding-bottom:84px}
}
/* the bento had NO rule under 400px, so a 390px phone kept the desktop 4 columns
   and every box became a sliver with one word per line */
@media(max-width:560px){
 .bento{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
 .bento>*{grid-column:1/-1!important;grid-row:auto!important;min-height:0}
 .b-call{padding:22px}
 .b-call b{font-size:34px;white-space:nowrap}
 .b-img{min-height:190px;background-size:cover;background-position:center}
 .bx{padding:18px}
}
@media(min-width:561px) and (max-width:820px){
 .bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
 .b-call{grid-column:span 2}.b-stat{grid-column:span 2}
}
/* accessibility: visible focus */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
/* --- header variants --- */
.hmast .w{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-top:14px;padding-bottom:14px}
.hmast .call{justify-self:start}
.hmast img{justify-self:center}
.hmast .mast-note{justify-self:end;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);font-weight:600}
.tabnav{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.tabnav nav{display:flex;justify-content:center;gap:0}
.tabnav nav a{padding:13px 22px;font-weight:700;font-size:15.5px;border-bottom:3px solid transparent}
@media(hover:hover){.tabnav nav a:hover{border-bottom-color:var(--acc);color:var(--acc)}}
.hmin .w{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:16px}
.hmin nav{display:flex;gap:26px;font-weight:600;font-size:15.5px}
.callband{display:flex;align-items:center;justify-content:center;gap:18px;background:var(--acc);color:#fff;padding:13px 20px;text-align:center;flex-wrap:wrap}
.callband span{font-size:15.5px;font-weight:600}
.callband b{font-family:var(--d);font-size:24px;letter-spacing:.02em}
.hpill .w{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:13px;padding-bottom:13px}
.pillnav{display:flex;gap:4px;background:var(--paper2);border:1px solid var(--line);border-radius:40px;padding:5px}
.pillnav a{padding:9px 18px;border-radius:30px;font-weight:700;font-size:14.5px}
@media(hover:hover){.pillnav a:hover{background:var(--paper);box-shadow:0 2px 8px rgba(0,0,0,.1)}}
.call.rnd{border-radius:40px}
.hdark{background:var(--dark);color:#fff}
.hdark .w{display:flex;align-items:center;justify-content:space-between;padding-top:16px;padding-bottom:12px}
.hdark img{background:none;padding:0}
.hdark .lbl{color:#9AA1A8}
.hdark .tabsrow{border-top:1px solid #262B31;padding-top:0;padding-bottom:0;justify-content:flex-start}
.hdark .tabsrow nav{display:flex;gap:0}
.hdark .tabsrow nav a{color:#D5DAE0;padding:12px 20px 12px 0;margin-right:20px;font-weight:600;font-size:15px;border-bottom:3px solid transparent}
@media(hover:hover){.hdark .tabsrow nav a:hover{color:#fff;border-bottom-color:var(--acc)}}
.hside .w{display:flex;align-items:center;gap:16px;padding-top:15px;padding-bottom:15px}
.brandrule{width:5px;align-self:stretch;background:var(--acc);border-radius:3px}
.scnav{margin-left:auto;display:flex;align-items:center;gap:24px;font-size:13.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:700}
.navtel{font-family:var(--d);font-size:19px;letter-spacing:.01em;color:var(--acc);text-transform:none}
/* --- mobile menu (measured: 8 of 10 ranking locksmith sites have one) --- */
.hcall{display:none;margin-left:auto;background:var(--acc);color:#fff;font-weight:800;
  font-size:16px;padding:11px 16px;border-radius:100px;text-decoration:none;white-space:nowrap;
  position:relative;z-index:90;font-family:var(--b)}
.burger{position:relative;z-index:90;display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  border:0;background:transparent;cursor:pointer;padding:0;margin-right:auto}
.burger span{display:block;width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.22s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.hdark .burger span{background:#fff}
.mnav{position:fixed;inset:0;z-index:80;background:var(--paper);overflow-y:auto;
  padding:96px 22px 40px;animation:mnfade .18s ease-out}
@keyframes mnfade{from{opacity:0}to{opacity:1}}
.mnav-in{display:flex;flex-direction:column}
.mnav a{display:block;padding:17px 4px;font-size:19px;font-weight:600;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line)}
.mnav a:last-child{border-bottom:0}
.mnav .mnav-call{margin-top:20px;background:var(--acc);color:#fff;text-align:center;
  border-radius:10px;padding:16px;font-size:19px;font-weight:700}
@media(max-width:1050px){header{position:relative;z-index:90;background:var(--paper)}.hcall{display:inline-block;order:3;margin-left:0}
header .w{display:flex;align-items:center;gap:10px}
header .w .burger{order:1}
header .w a:has(img),header .w .logo,header .w img{order:2;margin:0 auto;max-height:38px;width:auto}
header nav,header .callwrap{display:none}.tabnav nav,.hmin nav,.hdark .tabsrow,.scnav a:not(.navtel),.pillnav{display:none}
.burger{display:flex}
/* one phone call-to-action at the top, not three competing */
.bar,.callband{display:none}   /* the header pill already carries the number; three was absurd */
.mast-note,.callwrap .lbl{display:none}
.splith{grid-template-columns:1fr!important;position:relative;min-height:0}
.sp-r{position:absolute!important;inset:0;width:100%!important;max-width:none!important;
  margin:0!important;height:100%!important;max-height:none!important;z-index:0}
.splith::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,12,15,.55) 0%,rgba(10,12,15,.86) 68%,rgba(10,12,15,.94) 100%)}
.sp-l{position:relative;z-index:2;background:transparent!important;padding:34px 22px 30px}

.sp-l{padding:30px 22px 34px}
/* the ranking sites keep hero photos small - median 64px tall. ours ate the screen */
.hero,.splith{min-height:0}
.hero img,.sp-r,.hero .bg{max-height:220px}
h1{font-size:clamp(27px,7.4vw,34px);line-height:1.12}
body{font-size:16px}
.hero p.s,.sp-l p.s{font-size:16.5px;line-height:1.5}
.cards{grid-template-columns:1fr}
.cards .ic{aspect-ratio:16/9}
.hmast .w{grid-template-columns:auto 1fr;gap:12px}.hmast .mast-note{display:none}}
/* --- split-screen hero --- */
.splith{display:grid;grid-template-columns:1fr 1fr;min-height:78vh}
.sp-l{background:var(--dark);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:64px 7vw 64px 6vw}
.sp-l h1{font-size:clamp(34px,3.8vw,54px);color:#fff}
.sp-l p.s{color:#C7CDD4;margin:16px 0 22px;font-size:18.5px}
.sp-badges{list-style:none;margin:0 0 28px;display:grid;gap:10px}
.sp-badges li{padding-left:26px;position:relative;color:#DDE2E7;font-size:16px}
.sp-badges li::before{content:"✓";position:absolute;left:0;color:var(--acc);font-weight:700}
.sp-l .btn{align-self:flex-start;font-size:20px}
.sp-r{background-size:cover;background-position:center;min-height:320px}
/* grid items default to min-width:auto, so a wide child pushes the column past 1fr
   and the whole page picks up a horizontal scrollbar */
.splith>*{min-width:0}
@media(max-width:900px){.splith{grid-template-columns:1fr}.sp-r{order:-1;min-height:240px}.sp-l{padding:44px 24px}}
/* --- typographic poster hero + ticker --- */
.poster{background:var(--paper);padding:84px 0 64px;border-bottom:1px solid var(--line)}
.poster .kick{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:18px}
.poster h1{font-size:clamp(40px,5.6vw,68px);line-height:1.04;letter-spacing:-.02em;color:var(--ink);max-width:16ch}
.poster p.s{font-size:19px;color:var(--ink2);max-width:56ch;margin:22px 0 26px}
@media(max-width:700px){.poster{padding:52px 0 44px}}
.ticker{overflow:hidden;background:var(--dark);color:#fff;padding:13px 0;white-space:nowrap}
.tk-in{display:inline-block;font-family:var(--d);font-size:15px;letter-spacing:.14em;text-transform:uppercase;animation:tkm 26s linear infinite}
@keyframes tkm{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tk-in{animation:none}}
/* --- form-first funnel hero --- */
.ffh{position:relative;background:var(--dark);padding:56px 0 64px;overflow:hidden}
.ffh .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.25}
.ffh .w{position:relative;z-index:2;max-width:660px;text-align:center}
.ffh h1{color:#fff;font-size:clamp(30px,4.4vw,46px)}
.ffh p.s{color:#C7CDD4;margin:14px auto 26px;max-width:52ch}
.ffcard{text-align:left}
.ffor{margin-top:18px;color:#B9C0C8;font-size:15.5px}
.ffor a{color:#fff;font-weight:800;font-family:var(--d);font-size:19px}
/* --- bento grid --- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;grid-auto-rows:184px;align-items:stretch}
.bx{border:1px solid var(--line);border-radius:12px;padding:22px;background:var(--paper);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.b-call{grid-column:span 2;grid-row:span 2;background:var(--dark);color:#fff;border:none;display:flex;flex-direction:column;justify-content:center;gap:8px}
.b-call span{font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);font-weight:700}
.b-call b{font-family:var(--d);font-size:clamp(30px,3.4vw,44px)}
.b-call i{font-style:normal;color:#B9C0C8;font-size:15px}
.b-svc b{display:block;font-family:var(--d);font-size:19px;margin-bottom:6px}
.b-svc p{color:var(--ink2);font-size:15px}
.b-img{background-size:cover;background-position:center;min-height:150px}
.b-stat{background:color-mix(in srgb,var(--acc) 10%,var(--paper));display:flex;flex-direction:column;justify-content:center}
.b-stat b{font-family:var(--d);font-size:34px;color:var(--acc)}
.b-stat span{color:var(--ink2);font-size:14.5px}
@media(hover:hover){.bx{transition:transform .22s ease,box-shadow .22s ease}.bx:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.12)}}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}.b-call{grid-column:span 2}}
@media(max-width:560px){.bento{grid-template-columns:1fr}.b-call{grid-column:span 1}}
/* --- editorial service index --- */
.svcidx{display:grid}
.svcidx a{display:grid;grid-template-columns:64px 1fr auto;gap:18px;align-items:center;padding:22px 4px;border-top:1px solid var(--line)}
.svcidx a:last-child{border-bottom:1px solid var(--line)}
.svcidx em{font-family:var(--d);font-style:normal;font-size:26px;color:var(--ink3)}
.svcidx b{font-family:var(--d);font-size:clamp(20px,2.6vw,30px)}
.svcidx span{display:none}
.svcidx i{font-style:normal;font-size:26px;color:var(--acc);transition:transform .22s ease}
@media(min-width:760px){.svcidx a{grid-template-columns:64px 1fr 1fr auto}.svcidx span{display:block;color:var(--ink2);font-size:15.5px}}
@media(hover:hover){.svcidx a:hover{background:var(--paper2)}.svcidx a:hover i{transform:translateX(6px)}.svcidx a:hover em{color:var(--acc)}}

.htypo{background:var(--paper2);border-bottom:1px solid var(--line);padding:56px 0 48px}
.htypo .kick{font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:700;margin-bottom:18px}
.htypo h1{font-family:var(--d);font-size:clamp(34px,5.2vw,68px);line-height:1.0;letter-spacing:-.01em;max-width:26ch}
/* 14ch boxed the headline into a tall narrow column with the right half of the hero
   empty. The copy already carries its own <br>, so give it room to use it. */
.htypo .ht-row{display:grid;gap:26px;margin-top:30px;align-items:end}
.htypo .w{display:grid;gap:30px}
.ht-img{background-size:cover;background-position:center;border-radius:10px;
        aspect-ratio:4/3;min-height:230px;order:-1}
@media(min-width:900px){.htypo .w{grid-template-columns:1.02fr .98fr;align-items:center}
.ht-img{order:0;aspect-ratio:3/2;min-height:340px}
/* the headline shares the row with the photo now, so it cannot run at full hero size */
.htypo h1{font-size:clamp(30px,3.1vw,46px);max-width:none}
.htypo .ht-row{grid-template-columns:1fr;gap:20px}
.htypo .ht-row .cta{justify-self:start}}
.htypo .s{font-size:19px;max-width:52ch;color:var(--ink2)}
@media(min-width:860px){.htypo .ht-row{grid-template-columns:1fr auto}.htypo{padding:84px 0 72px}}
.hpl{display:grid;background:var(--dark);color:#fff}
.hpl-img{min-height:260px;background-size:cover;background-position:center 30%}
.hpl-txt{padding:40px 22px 46px}
.hpl h1{font-family:var(--d);font-size:clamp(34px,4.6vw,60px);line-height:1.02}
.hpl .s{margin-top:16px;font-size:18px;color:#D6DADF;max-width:48ch}
.hpl .sp-badges{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.hpl .sp-badges li{border:1px solid rgba(255,255,255,.28);padding:6px 11px;border-radius:4px;font-size:14px}
.hpl .cta{margin-top:26px}
@media(min-width:900px){.hpl{grid-template-columns:46% 1fr;min-height:560px}.hpl-txt{padding:72px 56px;align-self:center}}
.hov{position:relative;min-height:520px;background:var(--dark);padding:200px 0 0}
.hov .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.78}
.hov .w{position:relative}
.hov-card{background:var(--paper);color:var(--ink);padding:30px 24px 32px;max-width:640px;margin-bottom:-56px;box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.hov-card h1{font-family:var(--d);font-size:clamp(32px,4.4vw,56px);line-height:1.04}
.hov-card .s{margin-top:14px;color:var(--ink2);font-size:17.5px}
.hov-card .cta{margin-top:22px}
.hov + section,.hov + div{padding-top:96px}
.strip4{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.strip4 img{width:100%;height:210px;object-fit:cover;border-radius:8px;display:block}@media(min-width:820px){.strip4{grid-template-columns:repeat(4,1fr);gap:16px}.strip4 img{height:260px}}
@media(max-width:900px){nav a,.tabsrow a,.pillnav a,.tabs a{min-height:40px;display:inline-flex;align-items:center}}
@media(min-width:900px){.hov{padding-top:300px}.hov-card{padding:44px 44px 46px}}

.hero h1{font-size:clamp(32px,4.4vw,56px);letter-spacing:-.02em;line-height:1.05;text-transform:uppercase}
.ic,.card,.btn,.call,.btn2,.chk,.gridbx>div,.railcard,.fq{border-radius:0}
.btn,.sub{letter-spacing:.06em;text-transform:uppercase;font-weight:800}
.btn2{border:none;border-bottom:3px solid var(--acc);border-radius:0!important;padding-left:2px;padding-right:2px;background:none}
h2{font-size:clamp(26px,3.6vw,40px);letter-spacing:-.01em;text-transform:uppercase}
h2.sh::after,section>.w>h2::after{content:"";display:block;width:100%;max-width:120px;height:6px;background:var(--acc);margin-top:14px}
.ctaband h2::after{display:none}
section{padding-top:72px;padding-bottom:72px}
.strip b{font-size:24px}
@media(hover:hover){.svcidx a:hover em{transform:rotate(-8deg) scale(1.15);display:inline-block}
.btn:hover,.sub:hover{text-shadow:0 0 12px rgba(255,255,255,.45)}}
.svcidx em{transition:transform .25s ease}
@media(hover:hover){.btn:hover,.call:hover,.sub:hover{transform:translateY(-2px)}.btn,.call,.sub{transition:transform .18s cubic-bezier(.22,1,.36,1)}.strip3 img:hover{filter:saturate(1.15) contrast(1.04)}.strip3 img{transition:filter .25s ease-out}}
.snap{margin:0 auto;max-width:440px}.snap img{display:block;width:100%;height:auto;border-radius:3px;box-shadow:0 10px 30px rgba(0,0,0,.18);transform:rotate(-.6deg)}@media(max-width:560px){.snap{max-width:100%}.snap img{transform:none}}.pbanner{position:relative;width:100%;aspect-ratio:2/1;padding:0;display:flex;align-items:flex-end}.pbanner .w{position:relative;padding-bottom:38px}.pbanner .bg{background-position:50% 38%}.hero{min-height:clamp(420px,46vw,660px)}.hero .bg{background-position:50% 36%}.sp-r{aspect-ratio:3/2;min-height:0}@media(min-width:901px){.sp-r{aspect-ratio:auto;height:100%}}.hpl-img{aspect-ratio:3/2;min-height:0}.strip3 img,.strip4 img{aspect-ratio:3/2;height:auto;object-fit:cover}.cards .ic{aspect-ratio:4/5}.b-img{aspect-ratio:3/2;min-height:0}@media(max-width:820px){.pbanner{aspect-ratio:3/2;max-height:none}.hero{min-height:clamp(380px,86vw,560px)}.cards .ic{aspect-ratio:3/2;height:auto}.strip3 img,.strip4 img{aspect-ratio:3/2}}header,.bar,.trust,.strip,.card,.fq,.gridbx>div,.chk{color:var(--ink)}.ctaband,.ctaband *,.hdark,.hdark *,.pbanner,.pbanner *,.hpl,.hpl *{color:#fff}.hdark .lbl{color:#C7CDD4}.hpl .s{color:#D6DADF}.ic .tx,.ic h3,.ic .go,.ic .eta{color:#fff}.ic .go{opacity:.92}.ic h3 b{color:#fff}@media(max-width:900px){.related a{min-height:40px;display:inline-flex;align-items:center;padding:0 6px}.htypo .kick{font-size:14px}}@media(max-width:560px){.bento{grid-template-columns:1fr;grid-auto-rows:auto;gap:10px}.bento>*{grid-column:1/-1;grid-row:auto;min-height:0;height:auto}.bx{padding:16px 18px;display:block}.b-svc b{display:block;font-size:19px;margin-bottom:3px}.b-svc p{margin:0;font-size:15.5px;line-height:1.45}.b-call{padding:20px 18px;display:block}.b-call b{display:block;font-size:32px;white-space:nowrap;margin:4px 0}.b-img{width:100%;height:auto;aspect-ratio:16/9;background-size:cover;background-position:center}.b-stat{padding:18px}}@media(min-width:561px) and (max-width:820px){.bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto}.b-call,.b-stat{grid-column:span 2}}.strip3.n2,.strip4.n2,.checks.n2{grid-template-columns:repeat(2,1fr)}.strip3.n3,.strip4.n3,.checks.n3{grid-template-columns:repeat(3,1fr)}.strip3.n4,.strip4.n4,.checks.n4{grid-template-columns:repeat(4,1fr)}.strip3.n1,.strip4.n1,.checks.n1{grid-template-columns:1fr}@media(max-width:820px){.strip3.n3,.strip3.n4,.strip4.n3,.strip4.n4,.checks.n3,.checks.n4{grid-template-columns:repeat(2,1fr)}}@media(min-width:821px){.strip3,.strip4{gap:18px;width:calc(100vw - 52px);max-width:calc(100vw - 52px);margin-left:calc(50% - 50vw + 26px);margin-right:calc(50% - 50vw + 26px)}.strip3 img,.strip4 img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}}.poster .w{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center}.po-r img{width:100%;height:100%;max-height:420px;object-fit:cover;border-radius:12px;display:block}@media(max-width:820px){.poster .w{grid-template-columns:1fr;gap:22px}.po-r img{max-height:230px}}.strip .w{grid-template-columns:repeat(3,1fr)}@media(max-width:820px){body{padding-bottom:104px}}@media(min-width:901px){.bento.b7>.bx:nth-last-child(1),.bento.b7>.bx:nth-last-child(2){grid-column:span 2}.bento.b6>.bx:nth-last-child(1){grid-column:span 3}}.steps.n1{grid-template-columns:1fr}.steps.n2{grid-template-columns:1fr 1fr}.steps.n4{grid-template-columns:repeat(2,1fr)}@media(max-width:760px){.gridbx,.gridbx.n1,.gridbx.n3,.steps,.steps.n1,.steps.n2,.steps.n4,.checks,.checks.n1,.checks.n3,.checks.n4,.artchecks,.artchecks.n1,.artchecks.n3,.artchecks.n4{grid-template-columns:1fr}}.sp-r,.hpl-img,.ht-img,.po-r{position:relative;isolation:isolate}.sp-r::after,.hpl-img::after,.ht-img::after,.po-r::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit}.po-r::after{border-radius:12px}.hero::after,.ffh::after,.hov::after{background:linear-gradient(90deg,rgba(16,18,21,.94),rgba(16,18,21,.52) 52%,rgba(16,18,21,.30)),linear-gradient(0deg,rgba(16,18,21,.72),transparent 60%)!important}.sp-r::after,.hpl-img::after,.ht-img::after,.po-r::after{background:linear-gradient(90deg,rgba(16,18,21,.30),rgba(16,18,21,.04))}.two>div:empty{display:none}.two:has(>div:empty){grid-template-columns:1fr}@media(max-width:560px){.strip .w{grid-template-columns:1fr}}@media(min-width:821px){.pbanner{aspect-ratio:auto;height:clamp(300px,38vh,430px);max-height:430px}.pbanner .bg{background-position:50% 30%}.pbanner .w{padding-bottom:30px}.pbanner h1{font-size:clamp(30px,3.2vw,46px)}}@media(max-width:700px){.strip3,.strip4{grid-template-columns:1fr 1fr}.strip3 img:nth-of-type(n+3),.strip4 img:nth-of-type(n+3){display:none}}@media(max-width:1050px){body{overflow-x:visible}html{overflow-x:hidden}.navtel,.bar .tel,header .callwrap,.brandrule,.fine{display:none!important}header .w>a.call{display:none!important}header .w>a:has(img){order:2;margin:0 auto;flex:0 0 auto}header .w>a>img,header .w>img,header .logo img{height:40px;width:auto;max-width:100%;object-fit:contain}.hcall{font-size:15px;padding:10px 18px;letter-spacing:.02em;text-transform:uppercase}}
/* trust-wrap */@media(max-width:760px){.trust .w{flex-wrap:wrap;overflow:visible;justify-content:center;row-gap:6px}.trust b{white-space:normal}}

/* recent-jobs */.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}@media(max-width:900px){.jobs{grid-template-columns:1fr}}.job{background:var(--paper2,#fff);border:1px solid var(--line,#e3e5e8);padding:16px 18px;border-radius:8px}.job h3{font-size:19px;margin:0 0 8px}.job p{font-size:15px;margin:0 0 8px}.job .jm{font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.7;margin:6px 0 0}.svcmap{margin-top:22px}.svcmap iframe{border:0;display:block;border-radius:8px;width:100%;filter:saturate(.92)}.svcmap .mapcap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}



/* legal pages */
main.legal{max-width:760px;margin:0 auto;padding:38px 22px 56px}
main.legal h1{margin-bottom:14px}
main.legal h2{margin-top:30px}
main.legal p,main.legal li{max-width:68ch}
main.legal ul,main.legal ol{padding-left:22px}



/* svc-depth */.svcd{margin-top:6px}
.svcd ol.steps{margin-top:18px}
.svcd p{max-width:74ch}

/* header fits a phone */
@media(max-width:430px){
  header .w{gap:10px}
  /* Some sites lay the header out with grid rather than flex, and with
     no explicit columns the call button dropped to a second row on its
     own, hard left, while the logo sat far right. One row, three cells.
     grid-template-columns / grid-auto-flow / justify-self are inert on a
     flex container, so this is safe on both kinds of header. */
  header .w{grid-template-columns:auto 1fr auto;grid-auto-flow:column;
            align-items:center}
  header .w>a:not([class]){justify-self:center}
  header .w>.hcall{justify-self:end}
  header .w>a>img,header .w img{max-width:158px;height:auto}
  .hcall{padding:9px 13px;font-size:13.5px;white-space:nowrap}
}
@media(max-width:360px){
  header .w>a>img,header .w img{max-width:130px}
  .hcall{padding:8px 10px;font-size:12.5px}
}

/* a call button in the header on a phone, on the sites that lack one */
/* The garage header emits `.callwrap` only, and `@media(max-width:1050px)`
   hides it - so on a phone those sites had a burger and a logo and no way
   to call from the top of the page. The locksmith header has `.hcall`
   already, and the operator has banned two call affordances in one header,
   so this only applies where `.hcall` is absent. Browsers without :has()
   ignore the whole rule and keep today's behaviour. */
@media(max-width:1050px){
  header .w:not(:has(.hcall)) .callwrap{display:block!important;
    text-align:right;margin-left:auto}
  header .w:not(:has(.hcall)) .callwrap .lbl{display:none!important}
  /* font-size:0 hides the anchor's own text - the number - and the
     pseudo-element carries the label. Both live here, in the block with the
     highest specificity on the page, because the earlier attempt put them in
     two different blocks and the weaker one lost. */
  header .w:not(:has(.hcall)) .callwrap a.call{display:inline-block;
    background:var(--acc);color:#fff;padding:11px 16px;border-radius:8px;
    font-size:0;font-weight:800;white-space:nowrap;line-height:1}
  header .w:not(:has(.hcall)) .callwrap a.call::before{content:"CALL NOW";
    font-size:15px;letter-spacing:.06em}
  /* ...and the logo gives way before the row does. Three sites carry a wider
     logo than the rest; with `width:auto` on a fixed-height image the header
     row could not fit 390px and the page scrolled sideways. */
  header .w>a:has(img),header .w>a.logo{min-width:0;flex:0 1 auto;overflow:hidden}
  header .w>a>img,header .w>img,header .logo img{max-width:100%;height:auto}
}

/* the hero grows instead of cropping its own heading */
/* `@media(max-width:820px){.pbanner{aspect-ratio:3/2}}` fixed the hero
   height at 2/3 of the viewport width - 260px on a 390px phone. The
   banner is a flex box with align-items:center and overflow:hidden, so
   content taller than that was pushed out BOTH ends and the top of the
   h1 was sliced off. min-height keeps the shape when the copy is short
   and lets the box grow when it is not; `safe center` stops centring
   the moment content would overflow. */
@media(max-width:820px){
  .pbanner{aspect-ratio:auto;min-height:min(66vw,300px);max-height:none;
           height:auto}
  .pbanner.dark,.pbanner.img{align-items:safe center;height:auto;
                             max-height:none}
  .pbanner.img{align-items:safe flex-end}
}

/* things you tap with a thumb are at least 44px tall */
/* Measured at 390px on 40 live pages: every one had targets under 40px.
   The footer links sat at 16-20px tall, and the FAQ questions - the most
   tapped thing on a service page - at 26px. Google reports both, and on
   a phone they are genuinely fiddly. Padding only; nothing moves. */
/* !important on purpose: on the garage network this block is baked into
   the base stylesheet and the per-site look packs are appended AFTER it,
   so a plain rule here loses. These four properties only enlarge a hit
   area - they cannot change a layout. */
@media(max-width:700px){
  footer a,footer .w a{display:inline-block!important;
    padding:12px 0!important;line-height:1.25!important}
  .fq summary,details>summary{min-height:44px!important;display:flex;
    align-items:center;padding-top:10px!important;padding-bottom:10px!important}
  header .w>a{min-height:44px;display:inline-flex;align-items:center}
  /* The breadcrumb is `.crumb a` on the locksmith sites and a plain
     inline-styled div on the garage ones, so both shapes are named. */
  .crumb a,div[style*="font-size:13.5px"]>a{display:inline-block;
    padding:11px 0!important}
  .burger{min-width:44px!important;min-height:44px!important;
    display:inline-flex!important;align-items:center;justify-content:center}
  /* Safari on iOS ZOOMS the page when you tap a field whose text is under
     16px - the layout jumps as the customer starts typing their name.
     Measured at 15px on two sites' lead forms. 16px stops it dead. */
  form input,form select,form textarea{font-size:16px!important;
    min-height:44px!important}
  form button{min-height:44px!important;font-size:16px!important}
}

/* the logo keeps its proportions when the row runs out of room */
/* `header img{height:66px;width:auto}` fixes the height, and when the
   container clamps the width with max-width:100% the picture is simply
   squashed - measured 5.44 rendered against 5.90 intrinsic. Letting the
   height follow, capped, scales it instead. */
header img{height:auto;max-height:66px;width:auto;max-width:100%;object-fit:contain}

/* bar contrast */
.bar{color:#fff}.bar a.tel{color:#fff}.bar .dot{background:#fff}


/* garage additions */
@media(min-width:1001px){.cards{grid-template-columns:repeat(3,1fr)}}
.two figure.ph{margin:0}.two figure.ph img,figure.ph img{transition:transform .5s ease,box-shadow .5s ease}.two figure.ph:hover img,figure.ph:hover img{transform:scale(1.02);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.two .sh{margin-top:0}
@media(max-width:900px){.two figure.ph{order:-1}}
.strip3 figure.ph{margin:0}.strip3 img{width:100%;aspect-ratio:4/3;object-fit:cover}.band .two figure.ph img{box-shadow:none}
@media(max-width:1000px){header .w img,.logo img{max-height:54px;height:54px}}
header .w img,.logo img,header .w>a>img{width:auto!important;max-width:min(60vw,420px);object-fit:contain}
table.bt{min-width:0;table-layout:fixed}table.bt td,table.bt th{overflow-wrap:anywhere}
@media(max-width:1000px){.two{grid-template-columns:1fr}.two img{max-height:360px;object-fit:cover}}
@media(max-width:1000px){header .callwrap,.call{display:flex!important}header .callwrap{order:3;margin-left:auto}header .call{font-size:0;padding:0 14px;height:44px;align-items:center;justify-content:center;border-radius:8px;background:var(--acc);color:#fff;font-weight:800;letter-spacing:.04em}header .call::before{content:"CALL";font-size:15px}header .w img,.logo img{max-height:46px;height:46px}.sticky{position:fixed;left:0;right:0;bottom:0;z-index:95;display:flex}body{padding-bottom:64px}}
.sh h2,.fq summary,p,li{overflow-wrap:anywhere}
footer .w>div>a{display:block;padding:3px 0}
@media(min-width:1001px){header nav{flex-wrap:nowrap;min-width:0;gap:4px}header nav a{white-space:nowrap;font-size:clamp(13px,1.05vw,16px);padding:8px 8px;letter-spacing:0}header .w>a[aria-label]{flex-shrink:1;min-width:0}header .w>a[aria-label] img{max-width:min(20vw,300px)}header .callwrap{flex-shrink:0}}
@media(max-width:760px){.trust .w{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:8px;justify-items:start;align-items:start;overflow:visible;padding-top:12px;padding-bottom:12px}.trust b{white-space:normal;align-items:flex-start}.trust svg{margin-top:2px}}
.two>div{min-width:0;max-width:100%}.tw{max-width:100%;overflow-x:auto}.w{min-width:0}
@media(max-width:640px){table.bt,table.bt tbody,table.bt tr,table.bt td,table.bt th{display:block;width:100%;min-width:0;box-sizing:border-box}table.bt thead{display:none}table.bt td:first-child{border-bottom:0;padding-bottom:2px;background:var(--paper2)}table.bt td{padding:10px 12px}}
@media(min-width:1151px){header .w{flex-wrap:nowrap;gap:14px}header .w>a[aria-label]{flex:0 0 auto;min-width:0}header .w>a[aria-label] img{height:auto!important;width:auto!important;max-height:60px!important;max-width:300px!important;object-fit:contain}header .w nav{flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:0;justify-content:center;align-items:center}header .w nav a{font-size:clamp(11.5px,.86vw,13.5px)!important;padding:8px 6px!important;letter-spacing:.01em!important;white-space:nowrap}header .w .callwrap{flex:0 0 auto;margin-left:auto;white-space:nowrap}}
@media(max-width:1150px){header nav{display:none!important}header .burger{display:inline-flex!important}header .callwrap,.call{display:flex!important}header .callwrap{order:3;margin-left:auto}}
.w.rv .ic,.w.rv .job,.w.rv figure.ph,.w.rv .steps>div,.w.rv .two>div>p,.w.rv table.bt{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}.w.rv.on .ic,.w.rv.on .job,.w.rv.on figure.ph,.w.rv.on .steps>div,.w.rv.on .two>div>p,.w.rv.on table.bt{opacity:1;transform:none}.w.rv.on .ic:nth-child(2),.w.rv.on .job:nth-child(2),.w.rv.on .steps>div:nth-child(2){transition-delay:.07s}.w.rv.on .ic:nth-child(3),.w.rv.on .job:nth-child(3),.w.rv.on .steps>div:nth-child(3){transition-delay:.14s}.w.rv.on .ic:nth-child(4),.w.rv.on .steps>div:nth-child(4){transition-delay:.21s}.w.rv.on .ic:nth-child(5){transition-delay:.28s}.w.rv.on .ic:nth-child(6){transition-delay:.35s}figure.ph img,.ic img,.two img{transition:transform .6s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}figure.ph{overflow:hidden;border-radius:8px}figure.ph:hover img,.two:hover img{transform:scale(1.035)}.ic{transition:transform .35s ease,box-shadow .35s ease}.ic:hover{transform:translateY(-4px)}.hero h1,.hero .s,.hero .badges,.hero .cta{animation:heroin .7s cubic-bezier(.22,.61,.36,1) both}.hero .s{animation-delay:.06s}.hero .badges{animation-delay:.12s}.hero .cta{animation-delay:.18s}@keyframes heroin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}.w.rv .svcmap{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;transition-delay:.2s}.w.rv.on .svcmap{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.w.rv .ic,.w.rv .job,.w.rv figure.ph,.w.rv .steps>div,.w.rv .two>div>p,.w.rv table.bt,.w.rv .svcmap{opacity:1;transform:none;transition:none}.hero h1,.hero .s,.hero .badges,.hero .cta{animation:none}figure.ph:hover img,.two:hover img,.ic:hover{transform:none}}
@media(min-width:1001px){.cards>.ic{aspect-ratio:auto!important;height:clamp(230px,21vw,310px)!important}}@media(max-width:1000px){.cards>.ic{aspect-ratio:auto!important;height:220px!important}}
.bar,.bar .w,.bar .now,.bar .ts,.bar .ts span,.bar b,.bar strong,.bar span,.bar a{color:#fff!important}.bar .ts{opacity:.92}
.hero .card,.hero .card *:not(.btn):not(.btn2):not(.sub):not(button):not(select),.card,.card *:not(.btn):not(.btn2):not(.sub):not(button):not(select){color:#14161A}.hero .card p.h,.hero .card .h,.card p.h{color:#5A626A!important}.hero .card label,.card label,.card form label{color:#3C4652!important}.steps b,.steps li b,ol.steps b,.two b,.jobs .job b{color:inherit}.svcmap .mapcap{color:inherit!important;opacity:.72}.svcmap .mapcap b{color:inherit!important;opacity:1}
.jobs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}@media(max-width:900px){.jobs{grid-template-columns:1fr}}.job{background:var(--paper2);border:1px solid var(--line);padding:18px 20px;border-radius:8px}.job h3{font-family:var(--d);font-size:20px;margin:0 0 8px}.job p{font-size:15px;margin:0 0 8px}.job .jm{font-family:var(--m,monospace);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);margin:6px 0 0}.svcmap{margin-top:26px}.svcmap iframe{border:0;display:block;border-radius:10px;width:100%;filter:saturate(.9)}.svcmap .mapcap{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;font-family:var(--m,monospace);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}.svcmap .mapcap b{color:var(--acc)}
.steps{grid-template-columns:repeat(4,1fr)}.two .steps{grid-template-columns:1fr 1fr}@media(max-width:900px){.steps,.two .steps{grid-template-columns:1fr 1fr}}@media(max-width:560px){.steps,.two .steps{grid-template-columns:1fr}}

/* look */
.ic{border-radius:0}.card{border-radius:0}.btn,.call,.btn2{border-radius:0}
.hero::after{background:linear-gradient(0deg,rgba(16,18,21,.95) 8%,rgba(16,18,21,.45) 55%,rgba(16,18,21,.2) 100%)!important}
h1,h2{text-transform:uppercase}
.btn,.sub{border:2px solid #0B0C0E;box-shadow:4px 4px 0 #0B0C0E}
.btn:active,.sub:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #0B0C0E}
.chk,.gridbx>div{border:2px solid #14161A;border-radius:0;box-shadow:5px 5px 0 rgba(11,12,14,.85)}
@media(hover:hover){.chk:hover,.gridbx>div:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(11,12,14,.85)}}
.btn,.sub{background-image:linear-gradient(115deg,var(--acc) 0%,var(--acc2) 55%,var(--acc) 100%);background-size:220% 100%;background-position:0% 0;transition:background-position .4s ease,transform .15s ease,box-shadow .2s ease}
@media(hover:hover){.btn:hover,.sub:hover{background-position:95% 0}
.ic:hover,.chk:hover{transform:translateY(-6px)}}
@media(hover:hover){.ic:hover{box-shadow:inset 0 0 0 2px var(--acc)}.ic{transition:box-shadow .2s ease-out}.fq summary:hover{color:var(--acc)}.svcidx a:hover em{transform:scale(1.15)}.svcidx em{transition:transform .2s ease-out}}
@media(min-width:1001px){header{background:var(--paper2);box-shadow:0 10px 26px -20px rgba(0,0,0,.45)}header .w{border-bottom:3px solid var(--acc)}}
@media(min-width:1001px){.hero .w{grid-template-columns:1fr;justify-items:center;text-align:center}.hero .w>div:first-child{max-width:780px}.hero .badges,.hero .cta{justify-content:center}.hero .card{max-width:660px;width:100%}}
@media(min-width:900px){.cards{grid-template-columns:repeat(2,1fr)}.ic{aspect-ratio:21/9}}
.btn,.btn2,.call,.sub{border-radius:999px!important;padding-left:28px;padding-right:28px}.ic,.card{border-radius:12px!important}
section{padding:74px 0}.sh h2{letter-spacing:-.01em}.sh{margin-bottom:22px}
.fq[open]{background:var(--paper2);padding:0 14px;margin:0 -14px}

/* short links are still 44px wide */
@media(max-width:700px){
  /* A tap target is 44px in BOTH directions. The vertical half was already
     there; min-width supplies the horizontal half without shifting a single
     element - horizontal padding did shift them, see the module docstring. */
  footer a,footer .w a{display:inline-block;min-width:44px;
    padding-top:13px!important;padding-bottom:13px!important}
  /* The markup puts no whitespace between the footer links, so once they
     are inline-block they butt together - the live page read
     "All service areasPrivacyTerms". Margin separates them without
     moving the left edge the way padding would. */
  footer .bot a,footer .w>div>a+a,footer a+a{margin-left:16px}
  .crumb a,div[style*="font-size:13.5px"]>a{display:inline-block;
    min-width:44px;padding-top:12px!important;padding-bottom:12px!important}
}