/* C&B Auto Glass Service — Direction A "The Card"
Ink header + bands like his black business card, lime from his logo,
Michroma for the card's wide squared caps, Hubot Sans for reading. */
:root{
--ink:#0E100F; --ink-2:#171B19; --ink-3:#22272A;
--lime:#8CCD40; --lime-d:#4E9C26; --green:#3A7D1B;
--white:#FFFFFF; --tint:#F3F5F6; --rule:#E1E5E8; --rule-ink:rgba(255,255,255,.13);
--text:#16191B; --muted:#5B636B; --muted-ink:#A9B1B8;
--f-disp:'Michroma','Eurostile','Arial Black',sans-serif;
--f-body:'Hubot Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
--e-out:cubic-bezier(.22,.61,.36,1); --e-io:cubic-bezier(.65,0,.35,1); --e-settle:cubic-bezier(.16,1,.3,1);
--t1:180ms; --t2:280ms; --t3:420ms; --t4:560ms; --t5:720ms; --t6:900ms;
--hh:76px; --g:clamp(16px,4vw,48px); --max:1280px; --r:3px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hh) + 12px)}
body{margin:0;background:#FFFFFF;color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.6;font-stretch:100%;letter-spacing:0;word-spacing:.04em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:800;line-height:1.05}
ul,ol{margin:0;padding:0;list-style:none}
figure,blockquote,dl,dd{margin:0}
/* Hubot Sans only has a slashed zero: years/times/phone digits in copy wear Michroma */
.num{font-family:var(--f-disp);font-weight:400;letter-spacing:.02em;font-size:.92em;word-spacing:0;white-space:nowrap}
p .num,blockquote .num,.spec-v .num{font-family:inherit;font-size:inherit;letter-spacing:inherit;font-weight:inherit}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--g)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--lime);color:var(--ink);padding:10px 14px;font-weight:700}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.ink :focus-visible{outline-color:var(--lime)}
/* ---------- Ink bands (any dark container carries .ink) ---------- */
.ink{background:var(--ink);color:#fff}
.ink :where(a:not(.btn)){color:#fff}
.ink :where(p){color:#D5DADE}
/* ---------- Type ---------- */
h2{text-wrap:balance;font-family:var(--f-body);font-stretch:82%;font-weight:850;font-size:clamp(32px,4.4vw,58px);letter-spacing:-.012em;line-height:1;color:var(--ink)}
.ink h2{color:#fff}
h3{font-family:var(--f-body);font-stretch:88%;font-weight:750;font-size:21px;letter-spacing:-.005em;line-height:1.15}
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--f-disp);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:0 0 18px;line-height:1.4}
.eyebrow.on-ink,.ink .eyebrow{color:var(--lime)}
.speed{flex:none;stroke:var(--lime-d);stroke-width:1.6;stroke-linecap:square}
.ink .speed{stroke:var(--lime)}
.sec{padding-block:clamp(72px,10vw,136px)}
.tint{background:var(--tint)}
/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:var(--r);font-family:var(--f-body);font-weight:750;font-stretch:92%;font-size:16px;letter-spacing:.01em;line-height:1.1;text-decoration:none;white-space:nowrap;overflow:hidden;isolation:isolate;border:1.5px solid transparent;cursor:pointer}
.btn svg{flex:none}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:translateX(-101%)}
.btn:hover::before{transform:translateX(0);transition:transform var(--t2) var(--e-out)}
.btn:hover{transform:translateY(-1px);transition:transform var(--t2) var(--e-out)}
.btn-lg{min-height:56px;padding:15px 26px;font-size:17px}
a.btn.b-lime,.ink a.btn.b-lime,.hero a.btn.b-lime{background:var(--lime);color:var(--ink);border-color:var(--lime)}
a.btn.b-lime::before{background:#A4DE5E}
a.btn.b-ghost,.ink a.btn.b-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
a.btn.b-ghost::before{background:rgba(255,255,255,.12)}
a.btn.b-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
a.btn.b-ink::before{background:var(--ink-3)}
.tlink{display:inline-flex;align-items:center;gap:10px;font-weight:750;font-stretch:90%;font-size:16px;color:var(--ink);text-decoration:none;padding-block:6px;border-bottom:1.5px solid var(--lime-d)}
.tlink svg{transition:transform var(--t2) var(--e-out)}
.tlink:hover svg{transform:translateX(5px)}
.ink .tlink,.tlink.on-ink{color:#fff;border-color:var(--lime)}
/* ---------- Lime retention tape (from his finished jobs) ---------- */
.tape{position:absolute;z-index:2;width:22px;height:78px;background:var(--lime);opacity:.93;clip-path:polygon(0 3%,18% 0,40% 4%,62% 0,82% 3%,100% 0,100% 97%,80% 100%,58% 96%,38% 100%,18% 96%,0 100%);pointer-events:none}
/* ---------- Frames ---------- */
.frame{position:relative;overflow:hidden;background:var(--ink-2)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.r-43{aspect-ratio:4/3}
/* ---------- Progress ---------- */
.progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:80;pointer-events:none}
.progress span{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}
/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:60;height:var(--hh);border-bottom:1px solid transparent}
.hdr.solid{border-bottom-color:var(--rule-ink);transition:border-color var(--t3) var(--e-io)}
.hdr-in{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:none;position:relative;z-index:62}
.brand-mark{width:auto;height:40px}
.brand-word{display:flex;flex-direction:column;font-family:var(--f-disp);text-transform:uppercase;line-height:1.15;color:#fff}
.bw-1{font-size:14px;letter-spacing:.06em}
.bw-2{font-size:8.5px;letter-spacing:.32em;color:var(--lime);margin-top:3px}
.nav{display:flex;gap:30px;margin-left:auto}
.nav a{position:relative;font-family:var(--f-disp);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:#C9CFD3;padding-block:10px}
.ink .nav a{color:#C9CFD3}
.ink .nav a:hover,.ink .nav a[aria-current="page"]{color:#fff}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:0 50%}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);transition:transform var(--t2) var(--e-out)}
.hdr-call{flex:none;min-height:44px;padding:10px 18px;font-size:15px}
.hc-short{display:none}
.nav-toggle{display:none}
.mpanel{display:none}
/* ---------- Hero + the Wiper ---------- */
.hero{position:relative;overflow:hidden;min-height:min(calc(100svh - var(--hh)),880px);display:flex;align-items:flex-end;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.hero-scrim{position:absolute;inset:0;z-index:1;background:
linear-gradient(90deg,rgba(14,16,15,.78) 0%,rgba(14,16,15,.5) 36%,rgba(14,16,15,0) 64%),
linear-gradient(0deg,rgba(14,16,15,.88) 0%,rgba(14,16,15,.55) 30%,rgba(14,16,15,0) 58%),
linear-gradient(180deg,rgba(14,16,15,.22) 0%,rgba(14,16,15,0) 16%)}
.wiper{display:none}
.hero-copy{position:relative;z-index:3;padding-block:0 clamp(40px,6vw,76px)}
.hero-eyebrow{font-family:var(--f-disp);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:#fff;margin:0 0 20px;display:flex;align-items:center;gap:14px}
.hero-eyebrow::before{content:"";width:44px;height:2px;background:var(--lime)}
.hero-name{font-family:var(--f-disp);font-weight:400;text-transform:uppercase;color:#fff;font-size:clamp(27px,4.6vw,66px);line-height:1.08;letter-spacing:.005em;margin:0 0 26px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero-name .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero-name .ln>span{display:block}
.hero-name .ln:last-child>span{color:var(--lime)}
.hero-lede{max-width:34em;font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:#E8ECEE;margin:0 0 30px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
/* Wiper curtain: an ink panel the size of a half-disc, pivoting from the
hero's bottom-centre like a wiper arm. Sits UNDER the copy (z 2 < 3). */
.js .wiper{display:block;position:absolute;z-index:2;--L:max(82vw,112vh,720px);width:calc(var(--L) * 2);height:var(--L);left:calc(50% - var(--L));bottom:0;background:var(--ink);transform-origin:50% 100%;transform:rotate(0deg);pointer-events:none}
.js .wiper-blade{position:absolute;left:0;bottom:-2px;width:50%;height:4px;background:var(--lime)}
.js .hero.go .wiper{transform:rotate(180deg);transition:transform 1050ms var(--e-io)}
.js .hero.done .wiper{display:none}
/* Hero entrance (core): headline mask + fade/rise <=14px */
.js .hero-name .ln>span{transform:translateY(105%)}
.js .hero.go .hero-name .ln>span{transform:none;transition:transform var(--t4) var(--e-out)}
.js .hero.go .hero-name .ln+.ln>span{transition-delay:70ms}
.js .h-in{opacity:0;transform:translateY(12px)}
.js .hero.go .h-in{opacity:1;transform:none;transition:opacity var(--t3) var(--e-out),transform var(--t3) var(--e-out)}
.js .hero.go .h-in-2{transition-delay:90ms}
.js .hero.go .h-in-3{transition-delay:140ms}
/* ---------- Spec strip ---------- */
.spec{border-top:1px solid var(--rule-ink)}
.spec-in{display:grid;grid-template-columns:repeat(4,1fr)}
.spec li{display:flex;flex-direction:column;gap:6px;padding:22px 24px 24px;border-left:1px solid var(--rule-ink)}
.spec li:first-child{border-left:0;padding-left:0}
.spec-k{font-family:var(--f-disp);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--lime)}
.spec-v{font-weight:650;font-stretch:92%;font-size:16px;color:#fff;line-height:1.3}
/* ---------- Services index ---------- */
.svc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,112px);align-items:start}
.svc-head{position:sticky;top:calc(var(--hh) + 40px)}
.svc-intro{color:var(--muted);font-size:18px;max-width:30em;margin:22px 0 30px}
.svc-fig{margin-bottom:28px}
.svc-list{counter-reset:none;border-top:1px solid var(--ink)}
.svc-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 20px;padding:28px 0 30px;border-bottom:1px solid var(--rule);align-items:start}
.svc-row.has-thumb{grid-template-columns:72px minmax(0,1fr) 168px}
.svc-n{font-family:var(--f-disp);font-size:13px;letter-spacing:.1em;color:var(--green);padding-top:5px}
.svc-t h3{font-size:clamp(22px,2.1vw,28px);margin-bottom:8px}
.svc-t p{color:var(--muted);margin:0;max-width:34em}
.svc-thumb{border-radius:var(--r)}
/* ---------- Mobile service split (ink) ---------- */
.mob{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:0}
.mob-media{position:relative;align-self:stretch;min-height:560px}
.mob-frame{position:absolute;inset:0}
.mob-frame img{object-position:50% 28%}
.tab{display:inline-block;background:var(--lime);color:var(--ink);font-family:var(--f-disp);font-size:11px;letter-spacing:.18em;line-height:1;text-transform:uppercase;padding:9px 12px 8px;border-radius:2px}
.mob-media .tab{position:absolute;z-index:2;left:clamp(16px,3vw,40px);top:clamp(16px,3vw,36px)}
.mob-copy{padding:clamp(56px,8vw,120px) clamp(24px,6vw,96px) clamp(56px,8vw,120px) clamp(32px,5vw,80px);max-width:640px}
.mob-copy h2{margin-bottom:22px}
.pull{margin:34px 0 34px;padding:4px 0 4px 26px;border-left:3px solid var(--lime)}
.pull p{font-size:19px;line-height:1.5;color:#fff;font-stretch:96%;font-weight:500;margin:0 0 14px}
.pull footer,.q footer{display:flex;gap:14px;align-items:baseline;font-family:var(--f-disp);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.who{color:#fff}
.when{color:var(--muted-ink)}
/* ---------- How it works ---------- */
.how-head{display:flex;flex-direction:column;margin-bottom:clamp(40px,6vw,72px)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;position:relative;border-top:1px solid var(--ink)}
.step{position:relative;padding:34px 40px 8px 0}
.step+.step{padding-left:40px;border-left:1px solid var(--rule)}
.step-n{display:block;font-family:var(--f-disp);font-size:clamp(44px,5vw,68px);line-height:1;color:var(--ink);margin-bottom:26px;letter-spacing:-.02em}
.step:first-child .step-n{color:var(--green)}
.step h3{font-size:23px;margin-bottom:12px;max-width:14em}
.step p{color:var(--muted);max-width:26em}
.step .tlink{margin-top:4px}
.step::before{content:"";position:absolute;top:-2px;left:0;width:56px;height:3px;background:var(--lime-d)}
.step+.step::before{left:40px}
/* ---------- Recent jobs ---------- */
.jobs{padding-top:0}
.jobs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}
.jobs-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;height:clamp(440px,46vw,620px)}
.job{position:relative;display:block;border-radius:var(--r);overflow:hidden}
.job .frame{position:absolute;inset:0}
.job-xl{grid-column:span 2;grid-row:span 2}
.job img{transform:scale(1.001)}
.job:hover img{transform:scale(1.04);transition:transform var(--t5) var(--e-out)}
/* ---------- Reviews (ink) ---------- */
.rev{padding-block:clamp(80px,10vw,140px)}
.rev-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px) clamp(40px,6vw,96px)}
.rev-head{grid-column:1/-1}
.q{position:relative}
.q p{color:#fff;font-weight:500;font-stretch:96%;margin:0 0 18px}
.q-big{padding-top:40px}
.q-big p{font-size:clamp(23px,2.5vw,34px);line-height:1.32;font-weight:550;letter-spacing:-.005em}
.tape-q{top:0;left:0;width:84px;height:16px;transform:rotate(-2deg)}
.q-stack{display:flex;flex-direction:column;gap:40px;padding-top:44px}
.q-stack .q{padding-top:28px;border-top:1px solid var(--rule-ink)}
.q-stack .q p{font-size:18px;line-height:1.5}
/* ---------- Owner ---------- */
.own-grid{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:clamp(40px,8vw,128px);align-items:center}
.own-fig{position:relative;max-width:480px;width:100%}
.own-frame{aspect-ratio:4/5;border-radius:var(--r)}
.own-frame img{object-position:42% 50%}
.tape-c{top:-16px;left:28px;transform:rotate(-5deg)}
.tape-d{top:-16px;right:28px;transform:rotate(4deg)}
.own-copy{max-width:560px}
.own-copy h2{margin-bottom:26px}
.own-lede{font-size:clamp(20px,1.8vw,24px);line-height:1.4;color:var(--ink);font-weight:600;font-stretch:95%}
.own-copy p{color:#40474D}
.own-copy p.own-lede{color:var(--ink)}
.own-sig{display:flex;flex-direction:column;gap:4px;margin-top:30px;padding-top:22px;border-top:1px solid var(--rule)}
.sig-name{font-family:var(--f-disp);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.sig-role{font-size:14px;color:var(--muted)}
/* owner fact strip (graft from B): every item a fact */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:start;border-top:1px solid var(--ink);margin:30px 0 0}
.facts div{padding:18px 36px 0 0}
.facts dt{font-family:var(--f-disp);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);margin-bottom:10px}
.facts dd{margin:0;font-family:var(--f-disp);font-size:clamp(15px,1.4vw,19px);letter-spacing:.03em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px)}
.faq-list{border-top:1px solid var(--ink)}
.qa{border-bottom:1px solid #D3D9DD}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-weight:700;font-stretch:92%;font-size:clamp(18px,1.6vw,21px);color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--ink),var(--ink)) 50%/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) 50%/2px 14px no-repeat}
.qa[open] summary::after{background:linear-gradient(var(--green),var(--green)) 50%/14px 2px no-repeat;transform:rotate(180deg);transition:transform var(--t2) var(--e-out)}
.qa p{margin:0;padding:0 48px 26px 0;color:#40474D;max-width:40em}
/* ---------- Closing band ---------- */
.close{position:relative;overflow:hidden;padding-block:clamp(80px,10vw,140px)}
.close-media{position:absolute;inset:0 0 0 46%;z-index:0}
.close-media img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.42}
.close-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink) 0%,rgba(14,16,15,.6) 40%,rgba(14,16,15,.35) 100%)}
.close-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,6vw,96px);align-items:end}
.close-copy h2{font-size:clamp(34px,4.8vw,64px);max-width:11em;margin-bottom:22px}
.close-copy>p:not(.eyebrow){max-width:32em;font-size:18px}
.close-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* giant phone number (graft from B), set in Michroma like his card */
.bt-k{font-family:var(--f-disp);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--lime)!important;margin:34px 0 10px}
.bigtel{display:inline-block;font-family:var(--f-disp);font-size:clamp(26px,4.3vw,60px);line-height:1.1;letter-spacing:.01em;color:#fff;text-decoration:none;white-space:nowrap;padding-bottom:14px;background:linear-gradient(var(--lime),var(--lime)) 0 100%/100% 6px no-repeat}
.ink a.bigtel{color:#fff}
.bigtel:hover{background-size:100% 10px;transition:background-size var(--t2) var(--e-out)}
.close-copy .close-ctas{margin-top:26px}
.hours{background:rgba(14,16,15,.82);border:1px solid var(--rule-ink);border-top:3px solid var(--lime);padding:28px 28px 22px}
.hours-h{font-family:var(--f-disp);font-weight:400;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin:0 0 12px}
.hours-t{margin:0 0 26px}
.hours-t div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule-ink);font-size:15.5px}
.hours-t dt{color:#D5DADE}
.hours-t dd{color:#fff;font-weight:650;text-align:right}
.hours-t div.today dt,.hours-t div.today dd{color:var(--lime)}
.hours-t div.today dt::after{content:" \00b7 today";font-size:12px;letter-spacing:.06em}
.hours-area{font-size:15.5px;margin:0}
/* ---------- Sub-page banner (deep pages) ----------
...![]()
*/
.pbanner{position:relative;overflow:hidden;min-height:min(52vh,540px);display:flex;align-items:flex-end;isolation:isolate}
.pb-media{position:absolute;inset:0;z-index:0}
.pb-media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.pb-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,16,15,.8) 0%,rgba(14,16,15,.45) 45%,rgba(14,16,15,.1) 75%),linear-gradient(0deg,rgba(14,16,15,.85) 0%,rgba(14,16,15,0) 62%)}
.pb-copy{position:relative;z-index:2;padding-block:48px clamp(36px,5vw,60px)}
.pbanner h1{font-family:var(--f-disp);font-weight:400;text-transform:uppercase;font-size:clamp(28px,4.2vw,58px);letter-spacing:.01em;line-height:1.08;color:#fff;margin:0 0 16px}
.pb-lede{max-width:36em;font-size:18px;color:#E8ECEE;margin:0 0 26px}
.pb-ctas{display:flex;flex-wrap:wrap;gap:12px}
.pbanner .eyebrow{color:#fff}
.js .pbanner .pb-copy>*{opacity:0;transform:translateY(12px)}
.js .pbanner.go .pb-copy>*{opacity:1;transform:none;transition:opacity var(--t3) var(--e-out),transform var(--t3) var(--e-out)}
/* ---------- Shared deep-page components ---------- */
/* Alternating split feature rows:
Even rows flip automatically; add .split-flip to force a flip. */
.splits{display:flex;flex-direction:column;gap:clamp(64px,9vw,128px)}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:center}
.split:nth-child(even)>.split-media,.split.split-flip>.split-media{order:2}
.split-media{position:relative}
.split-media .frame{border-radius:var(--r)}
.split-media .tab{position:absolute;z-index:2;left:16px;top:16px}
.split-copy h2{margin-bottom:20px}
.split-copy>p:not(.eyebrow){color:var(--muted);max-width:32em}
.ink .split-copy>p:not(.eyebrow){color:#D5DADE}
.split-copy ul.ticks{margin:22px 0 0;border-top:1px solid var(--rule)}
.ticks li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--rule)}
.ticks li::before{content:"";position:absolute;left:0;top:22px;width:14px;height:3px;background:var(--lime-d)}
.ink .ticks,.ink .ticks li{border-color:var(--rule-ink)}
.ink .ticks li::before{background:var(--lime)}
/* Quote block on light grounds (.q / .q-big / .pull are ink-first; these restate for white/tint) */
:where(.sec:not(.ink),.tint) .q p,:where(.sec:not(.ink),.tint) .pull p{color:var(--ink)}
:where(.sec:not(.ink),.tint) .who{color:var(--ink)}
:where(.sec:not(.ink),.tint) .when{color:var(--muted)}
:where(.sec:not(.ink),.tint) .pull{border-left-color:var(--lime-d)}
:where(.sec:not(.ink),.tint) .q-stack .q{border-top-color:var(--rule)}
.qgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.qgrid .q{padding-top:26px;border-top:3px solid var(--lime-d)}
.ink .qgrid .q{border-top-color:var(--lime)}
.qgrid .q p{font-size:18px;line-height:1.5}
/* Closing call band = the home .close section (ink, optional .close-media photo, .close-grid,
.close-copy with h2 + .bt-k "Call or text" + .bigtel data-callcta + .close-ctas ghost Text) + .hours card.
Hours list on a light ground: add .hours-light */
.hours-light{background:#fff;border:1px solid var(--rule);border-top:3px solid var(--lime-d)}
.hours-light .hours-h{color:var(--green)}
.hours-light .hours-t div{border-bottom-color:var(--rule)}
.hours-light .hours-t dt{color:var(--muted)}
.hours-light .hours-t dd{color:var(--ink)}
.hours-light .hours-t div.today dt,.hours-light .hours-t div.today dd{color:var(--green)}
.hours-light .hours-area{color:var(--text)}
/* FAQ: .faq-grid > .faq-head + .faq-list > details.qa > summary + p (works on white or .tint) */
/* ---------- Footer ---------- */
.ftr{padding-top:clamp(64px,8vw,104px);border-top:3px solid var(--lime)}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:40px}
.ftr-brand img{width:150px;height:auto;margin-bottom:18px}
.ftr-name{font-family:var(--f-disp);text-transform:uppercase;font-size:14px;letter-spacing:.08em;line-height:1.5;color:#fff;margin:0 0 18px}
.ftr-speed{stroke:var(--lime);stroke-width:1.5}
.ftr-col p{font-size:15.5px;color:#C9CFD3;margin:0 0 12px}
.ftr-k{font-family:var(--f-disp);font-size:9.5px!important;letter-spacing:.22em;text-transform:uppercase;color:var(--lime)!important;margin:0 0 12px!important}
.ftr-col p+.ftr-k{margin-top:22px!important}
.ftr-phone{color:#C9CFD3}
.ftr-nav{display:flex;flex-direction:column;gap:8px}
.ftr-nav a{font-size:15.5px;text-decoration:none;color:#C9CFD3}
.ftr .ftr-nav a:hover,.ftr .ftr-col a:hover{color:var(--lime)}
.ftr-base{margin-top:64px;padding-block:22px 28px;background:linear-gradient(var(--rule-ink),var(--rule-ink)) var(--g) 0/calc(100% - 2*var(--g)) 1px no-repeat}
.ftr-base p{font-size:13px;color:var(--muted-ink);margin:0}
/* ---------- Call bar + back to top ---------- */
.callbar{display:none}
.totop{position:fixed;right:24px;bottom:24px;z-index:40;width:46px;height:46px;display:grid;place-items:center;background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:var(--r);opacity:0;visibility:hidden;transform:translateY(8px)}
.totop.on{opacity:1;visibility:visible;transform:none;transition:opacity var(--t3) var(--e-io),transform var(--t3) var(--e-io)}
/* ---------- Reveal ---------- */
.js .rv{opacity:0;transform:translateY(12px)}
.js .rv.in{opacity:1;transform:none;transition:opacity var(--t4) var(--e-out),transform var(--t4) var(--e-out)}
.js .rv-2.in{transition-delay:80ms}
.js .rv-3.in{transition-delay:150ms}
/* ======================= Responsive ======================= */
@media (max-width:1100px){
.nav{gap:22px}
.bw-1{font-size:12.5px}
.spec-in{grid-template-columns:repeat(2,1fr)}
.spec li:nth-child(3){border-left:0;padding-left:0}
.spec li:nth-child(n+3){border-top:1px solid var(--rule-ink)}
}
@media (max-width:900px){
:root{--hh:64px}
.brand-mark{height:32px}
.nav{display:none}
.brand{margin-right:auto}
.js .nav-toggle{display:inline-flex;align-items:center;gap:10px;position:relative;z-index:62;min-height:44px;padding:0 4px 0 12px;background:none;border:0;color:#fff;font-family:var(--f-disp);font-size:10px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer}
.nt-bars{display:grid;gap:6px;width:22px}
.nt-bars i{display:block;height:2px;background:currentColor}
.nav-toggle[aria-expanded="true"] .nt-bars i:first-child{transform:translateY(4px) rotate(45deg);transition:transform var(--t2) var(--e-io)}
.nav-toggle[aria-expanded="true"] .nt-bars i:last-child{transform:translateY(-4px) rotate(-45deg);transition:transform var(--t2) var(--e-io)}
html:not(.js) .nav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-left:0}
html:not(.js) .hdr{height:auto}
html:not(.js) .hdr-in{flex-wrap:wrap;padding-block:12px}
.js .mpanel{display:block;position:fixed;inset:0;z-index:58;padding-top:var(--hh);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden}
.js .mpanel.open{opacity:1;visibility:visible;transition:opacity var(--t2) var(--e-io)}
.mpanel-in{min-height:100%;display:flex;flex-direction:column;justify-content:space-between;padding-block:24px 36px;border-top:1px solid var(--rule-ink)}
.mp-nav{display:flex;flex-direction:column}
.mp-nav a{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--rule-ink);font-weight:800;font-stretch:85%;font-size:clamp(28px,8vw,40px);line-height:1.1;text-decoration:none;color:#fff}
.mp-nav a[aria-current="page"]{color:var(--lime)}
.mp-n{font-family:var(--f-disp);font-size:10px;letter-spacing:.14em;color:var(--lime);font-weight:400;min-width:24px}
.mp-foot{padding-top:28px}
.mp-foot .btn{width:100%}
.mp-foot .btn+.btn{margin-top:10px}
.mp-hours{font-size:14.5px;color:var(--muted-ink)!important;margin:18px 0 0}
body.nav-open{overflow:hidden}
body.nav-open .hdr-call{visibility:hidden}
.svc-grid{grid-template-columns:1fr}
.svc-head{position:static}
.svc-fig{display:none}
.mob{grid-template-columns:1fr}
.mob-media{min-height:0;aspect-ratio:4/3}
.mob-copy{max-width:none;padding:56px var(--g) 72px}
.steps{grid-template-columns:1fr}
.step,.step+.step{padding:30px 0 22px;border-left:0;border-top:1px solid var(--rule)}
.step:first-child{border-top:0}
.step+.step::before{left:0}
.step-n{margin-bottom:16px}
.rev-grid,.own-grid,.faq-grid,.close-grid{grid-template-columns:1fr}
.q-stack{padding-top:0}
.own-fig{max-width:420px}
.close-media{inset:0}
.close-media img{opacity:.28}
.close-media::after{background:linear-gradient(180deg,rgba(14,16,15,.75),var(--ink) 75%)}
.ftr-grid{grid-template-columns:1fr 1fr}
.ftr-brand{grid-column:1/-1}
.split{grid-template-columns:1fr}
.split:nth-child(even)>.split-media,.split.split-flip>.split-media{order:0}
.qgrid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:759px){
.hero{min-height:min(calc(100svh - var(--hh)),800px)}
.hero-media img{object-position:50% 50%}
.hero-scrim{background:linear-gradient(0deg,rgba(14,16,15,.94) 0%,rgba(14,16,15,.72) 34%,rgba(14,16,15,.1) 60%,rgba(14,16,15,0) 70%),linear-gradient(180deg,rgba(14,16,15,.35) 0%,rgba(14,16,15,0) 16%)}
.hero-eyebrow{font-size:9.5px;letter-spacing:.2em;margin-bottom:14px;gap:10px}
.hero-eyebrow::before{width:28px}
.hero-name{margin-bottom:16px;font-size:clamp(22px,6.4vw,40px)}
.hero-name .ln>span{white-space:nowrap}
.hero-lede{font-size:16px;margin-bottom:20px}
.hero-copy{padding-bottom:28px}
.hero-ctas{display:grid;grid-template-columns:1.25fr 1fr;gap:10px}
.hero-ctas .btn{padding-inline:12px;font-size:16px}
.hero-ctas .b-ghost svg{display:none}
.hero-ctas .btn{gap:8px}
.js .hdr-call{display:none}
html.js.hdr-call-on .hdr-call{display:inline-flex}
.callbar{display:grid;grid-template-columns:1fr auto;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px var(--g) calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--rule-ink);transform:translateY(110%);visibility:hidden}
.callbar.show{transform:none;visibility:visible;transition:transform var(--t3) var(--e-out)}
.callbar .btn{min-height:48px}
.totop{display:none}
.jobs-strip{display:flex;height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--g);gap:10px;padding-bottom:6px;scrollbar-width:none}
.jobs-strip::-webkit-scrollbar{display:none}
.job,.job-xl{flex:0 0 78%;aspect-ratio:4/3;scroll-snap-align:start}
.jobs-head{flex-direction:column;align-items:flex-start;margin-bottom:28px}
.jobs-head .tlink{order:2}
.svc-row,.svc-row.has-thumb{grid-template-columns:44px minmax(0,1fr)}
.svc-thumb{grid-column:2;margin-top:18px;max-width:280px;width:100%}
.q-big p{font-size:22px}
.ftr-grid{grid-template-columns:1fr 1fr;gap:34px 20px}
.ftr-brand,.ftr-col:nth-child(2){grid-column:1/-1}
.ftr-base{margin-top:40px;padding-bottom:96px}
}
@media (max-width:559px){
.hc-long{display:none}
.hc-short{display:inline}
.brand-word .bw-1{font-size:11px;letter-spacing:.04em}
.bw-2{font-size:7.5px}
.brand{gap:10px}
.brand-mark{height:28px}
.hdr-in{gap:10px}
.js .nav-toggle{padding:0 0 0 6px;min-width:36px;justify-content:flex-end}
.js .nt-label{display:none}
.hdr-call{padding:8px 12px;gap:6px}
.spec li{padding:16px 14px 18px}
.spec-v{font-size:14.5px}
.close-ctas{display:grid;grid-template-columns:1fr}
.facts{grid-template-columns:1fr 1fr;gap:0}
.facts div{padding-right:16px}
.mob-media .tab{font-size:10px}
.bigtel{font-size:clamp(26px,7.6vw,34px)}
.hours{padding:22px 18px 18px}
.hours-t dt{white-space:nowrap}
.hours-t .num{font-size:.86em}
}
@media (max-width:399px){
.brand{gap:8px}
.brand-mark{height:22px}
.brand-word .bw-1{font-size:10px;letter-spacing:.02em}
.bw-2{font-size:7px;letter-spacing:.26em}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.js .wiper{display:none!important}
.js .rv,.js .h-in,.js .hero-name .ln>span,.js .pbanner .pb-copy>*{opacity:1!important;transform:none!important}
}
/* @page services */
.sv-banner .pb-scrim{background:linear-gradient(90deg,rgba(14,16,15,.9) 0%,rgba(14,16,15,.66) 46%,rgba(14,16,15,.34) 80%),linear-gradient(0deg,rgba(14,16,15,.9) 0%,rgba(14,16,15,.2) 66%)}
.sv-banner .pb-media img{object-position:50% 38%}
.sv-index{border-bottom:1px solid var(--rule)}
.sv-index-in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.sv-index a{display:flex;align-items:baseline;gap:12px;padding:22px 16px 22px 0;font-weight:750;font-stretch:90%;font-size:16px;color:var(--ink);text-decoration:none;border-top:3px solid transparent;margin-top:-1px}
.sv-index a:hover{border-top-color:var(--lime-d);transition:border-color var(--t2) var(--e-out)}
.sv-ix{font-family:var(--f-disp);font-size:10.5px;letter-spacing:.12em;color:var(--green)}
.sv-cal{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:start;margin-top:clamp(48px,6vw,80px);padding-top:30px;border-top:1px solid var(--ink)}
.sv-cal-k{display:flex;flex-direction:column;gap:14px}
.sv-cam{color:var(--green)}
.sv-cal-k h3{font-size:clamp(22px,2.1vw,28px)}
.sv-cal-p{color:var(--muted);margin:0}
.sv-cal-q{padding-left:22px;border-left:3px solid var(--lime-d)}
.sv-cal-q p{font-size:clamp(19px,1.7vw,22px);line-height:1.4;font-weight:600;font-stretch:95%;color:var(--ink);margin:0 0 12px}
.sv-cal-q footer{display:flex;gap:14px;font-family:var(--f-disp);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.sv-cal-q .who{color:var(--ink)}.sv-cal-q .when{color:var(--muted)}
.sv-chip-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.sv-chip-fig{margin:0;width:100%}
.sv-chip-fig .frame{border-radius:var(--r)}
.sv-chip-copy h2{margin-bottom:22px}
.sv-chip-lede{font-size:clamp(20px,1.8vw,24px);line-height:1.4;font-weight:600;font-stretch:95%;color:var(--ink);max-width:24em}
.sv-chip-copy p:not(.eyebrow):not(.sv-chip-lede){color:var(--muted);max-width:32em}
.sv-side{padding-top:clamp(72px,10vw,136px)}
.sv-ws{padding-top:clamp(56px,7vw,96px)}
.sv-duo{padding-bottom:clamp(60px,8vw,110px)}
.sv-duo-a{width:86%}
.sv-duo-b{position:absolute;right:0;bottom:0;width:38%;max-width:260px}
.sv-duo-bf{aspect-ratio:723/960;border-radius:var(--r);outline:8px solid #fff}
.sv-tape-1{top:-18px;left:18px;transform:rotate(-5deg);height:64px}
.sv-tape-2{top:-18px;right:18px;transform:rotate(4deg);height:64px}
.sv-back{padding-top:0}
.sv-back-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(32px,4vw,52px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--ink)}
.sv-back-head h2{margin:0}
.sv-back-head>p{color:var(--muted);margin:0;max-width:32em}
.sv-back-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px;align-items:end}
.sv-back-a{aspect-ratio:4/3;border-radius:var(--r)}
.sv-back-b{aspect-ratio:2/1;border-radius:var(--r)}
.sv-back-b img{object-position:50% 0%}
.sv-tint{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sv-tint-in{display:grid;grid-template-columns:72px minmax(0,5fr) minmax(0,7fr);gap:20px;align-items:baseline;padding-block:36px}
.sv-tint-n{font-family:var(--f-disp);font-size:13px;letter-spacing:.1em;color:var(--green);margin:0}
.sv-tint h2{font-size:clamp(26px,2.6vw,34px)}
.sv-tint-p{color:var(--muted);margin:0;font-size:18px}
.sv-vin{padding-block:clamp(64px,8vw,108px)}
.sv-vin-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,6vw,96px);align-items:end}
.sv-vin-copy{position:relative}
.sv-vin-tape{top:calc(-1 * clamp(64px,8vw,108px) - 10px);left:0;width:22px;height:70px;transform:rotate(-3deg)}
.sv-vin-copy h2{margin-bottom:18px;max-width:12em}
.sv-vin-copy>p:not(.eyebrow){max-width:30em;font-size:18px;margin-bottom:28px}
.sv-vin-where{border-top:1px solid var(--rule-ink)}
.sv-vin-where div{padding:18px 0;border-bottom:1px solid var(--rule-ink)}
.sv-vin-where dt{font-family:var(--f-disp);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-bottom:8px}
.sv-vin-where dd{color:#fff;font-size:17px;line-height:1.45}
.sv-kelly-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px)}
.sv-kelly .q-big{padding-top:44px}
.sv-kelly .q-big p{font-size:clamp(23px,2.6vw,36px)}
.sv-kelly .tape-q{background:var(--lime-d)}
@media (max-width:900px){
.sv-index-in{grid-template-columns:repeat(3,minmax(0,1fr))}
.sv-cal{grid-template-columns:1fr}
.sv-chip-grid,.sv-back-head,.sv-vin-grid,.sv-kelly-grid{grid-template-columns:1fr}
.sv-tint-in{grid-template-columns:44px minmax(0,1fr)}
.sv-tint-p{grid-column:2}
}
@media (max-width:759px){
.sv-index-in{display:flex;overflow-x:auto;scrollbar-width:none;gap:22px}
.sv-index-in::-webkit-scrollbar{display:none}
.sv-index li{flex:none}
.sv-index a{padding:16px 0;font-size:15px}
.sv-duo{padding-bottom:64px}
.sv-duo-a{width:100%}
.sv-duo-b{width:40%;right:12px;bottom:0}
.sv-duo-bf{outline-width:6px}
.sv-tape-1,.sv-tape-2{height:46px;width:18px;top:-14px}
.sv-back-pair{grid-template-columns:1fr;gap:8px}
.sv-vin-tape{display:none}
.sv-vin .btn{width:100%}
}
/* @end services */
/* @page mobile-service */
.ms-banner .pb-media img{object-position:50% 34%}
.ms-free-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start}
.ms-state{font-family:var(--f-body);font-stretch:82%;font-weight:850;font-size:clamp(30px,3.6vw,48px);line-height:1.05;letter-spacing:-.01em;color:var(--ink);margin:0 0 24px;padding-bottom:22px;background:linear-gradient(var(--lime-d),var(--lime-d)) 0 100%/72px 3px no-repeat}
.ms-free-body>p:not(.ms-state){color:var(--muted);font-size:18px;max-width:34em}
.ms-free-body>p:first-child{color:var(--ink);font-size:clamp(19px,1.7vw,21px);font-weight:500;line-height:1.5}
.ms-where{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px;border-top:1px solid var(--ink)}
.ms-where li{display:flex;flex-direction:column;gap:6px;padding:18px 20px 0 0;color:var(--muted);font-size:16px}
.ms-where li+li{padding-left:20px;border-left:1px solid var(--rule)}
.ms-where-k{font-family:var(--f-disp);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.ms-area{padding-block:clamp(72px,9vw,128px);border-top:1px solid var(--rule-ink)}
.ms-area-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:center}
.ms-area h2{margin-bottom:20px}
.ms-area-p{max-width:26em;font-size:18px;margin:0}
.ms-towns{border-top:1px solid var(--rule-ink)}
.ms-towns li{display:flex;align-items:center;gap:22px;padding:24px 0;border-bottom:1px solid var(--rule-ink);font-family:var(--f-disp);text-transform:uppercase;font-size:clamp(26px,3.8vw,52px);line-height:1.05;letter-spacing:.01em;color:#fff}
.ms-towns .speed{width:46px;height:14px}
.ms-towns li.ms-towns-more{font-family:var(--f-body);text-transform:none;font-stretch:90%;font-weight:600;font-size:clamp(18px,1.6vw,21px);color:var(--muted-ink);letter-spacing:0;padding-left:68px;border-bottom:0}
.ms-how-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px)}
.ms-how-head{position:sticky;top:calc(var(--hh) + 40px);align-self:start}
.ms-steps{position:relative}
.ms-steps::before{content:"";position:absolute;left:39px;top:12px;bottom:12px;width:1px;background:var(--rule)}
.ms-step{position:relative;display:grid;grid-template-columns:80px minmax(0,1fr);gap:28px;padding:0 0 clamp(40px,5vw,60px)}
.ms-step:last-child{padding-bottom:0}
.ms-step-n{position:relative;z-index:1;display:grid;place-items:center;width:80px;height:80px;background:#fff;border:1px solid var(--ink);border-radius:50%;font-family:var(--f-disp);font-size:20px;color:var(--ink)}
.ms-step:first-child .ms-step-n{background:var(--ink);color:var(--lime);border-color:var(--ink)}
.ms-step h3{font-size:clamp(22px,2.1vw,28px);margin:22px 0 12px}
.ms-step p{color:var(--muted);max-width:34em}
.ms-proof-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px)}
.ms-proof .q-big{padding-top:44px}
.ms-proof .q-big p{font-size:clamp(23px,2.6vw,36px)}
.ms-proof .tape-q{background:var(--lime-d)}
.ms-pair{padding-block:clamp(56px,7vw,96px) 0}
.ms-pair-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:12px;align-items:stretch}
.ms-pair-a{aspect-ratio:16/9;border-radius:var(--r)}
.ms-pair-a img{object-position:50% 0%}
.ms-pair-b{position:relative;max-width:480px}
.ms-pair-bf{position:absolute;inset:0;border-radius:var(--r)}
.ms-hours{margin-top:clamp(56px,7vw,96px);padding-block:clamp(40px,5vw,60px);border-top:1px solid var(--rule)}
.ms-hours-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,6vw,96px);align-items:center}
.ms-hours .ms-hours-h{font-size:clamp(28px,3vw,40px)}
.ms-hours-t{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--ink)}
.ms-hours-t div{flex-direction:column;justify-content:flex-start;gap:6px;padding:16px 20px 0 0;border-bottom:0}
.ms-hours-t div+div{padding-left:20px;border-left:1px solid #D3D9DD}
.ms-hours-t dt{font-family:var(--f-disp);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ms-hours-t dd{text-align:left;color:var(--ink);font-size:18px;font-weight:700;font-stretch:92%}
.ms-hours-t div.today dt{color:var(--green)}
.ms-hours-t div.today dd{color:var(--ink)}
.ms-hours-t div.today{box-shadow:inset 0 3px 0 var(--lime-d)}
.ms-hours-t div.today dt::after{font-size:inherit;letter-spacing:inherit}
.ms-close .close-grid{grid-template-columns:minmax(0,1fr)}
.ms-close .close-media{inset:0 0 0 40%}
@media (max-width:900px){
.ms-free-grid,.ms-area-grid,.ms-how-grid,.ms-proof-grid,.ms-hours-grid{grid-template-columns:1fr}
.ms-how-head{position:static}
.ms-close .close-media{inset:0}
}
@media (max-width:759px){
.ms-where{grid-template-columns:1fr}
.ms-where li,.ms-where li+li{padding:14px 0;border-left:0;border-bottom:1px solid var(--rule);flex-direction:row;justify-content:space-between;align-items:baseline}
.ms-towns li{gap:14px;padding:18px 0}
.ms-towns .speed{width:30px;height:10px}
.ms-towns li.ms-towns-more{padding-left:44px}
.ms-steps::before{left:27px}
.ms-step{grid-template-columns:56px minmax(0,1fr);gap:18px}
.ms-step-n{width:56px;height:56px;font-size:15px}
.ms-step h3{margin-top:12px}
.ms-pair-grid{grid-template-columns:1fr;gap:8px}
.ms-pair-b{max-width:none}
.ms-pair-bf{position:relative;inset:auto;aspect-ratio:4/5}
.ms-hours-t{grid-template-columns:1fr}
.ms-hours-t div,.ms-hours-t div+div{flex-direction:row;justify-content:space-between;align-items:baseline;padding:14px 0;border-left:0;border-bottom:1px solid #D3D9DD}
.ms-hours-t div.today{box-shadow:inset 3px 0 0 var(--lime-d);padding-left:12px}
.ms-hours-t dt{letter-spacing:.14em}
.ms-hours-t dd{white-space:nowrap;text-align:right;font-size:16px}
.ms-hours-t .num{font-size:.86em}
}
/* @end mobile-service */
/* @page gallery */
.pb-slim{min-height:0}
.pb-slim .pb-copy{padding-block:clamp(44px,5vw,72px) clamp(40px,5vw,64px)}
.pb-lines{position:absolute;z-index:1;right:max(var(--g),calc((100% - var(--max))/2 + var(--g)));top:50%;width:min(44vw,560px);height:auto;transform:translateY(-50%);fill:none;stroke:var(--lime);stroke-width:1.5;opacity:.55}
.gal{padding-top:clamp(40px,5vw,64px)}
.g-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(clamp(56px,5vw,72px),auto);gap:12px}
.g{position:relative;min-width:0}
.g-btn{position:relative;display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:var(--ink-2);border-radius:var(--r);overflow:hidden;font:inherit;color:inherit}
.js .g-btn{cursor:zoom-in}
.g-btn .frame{display:block;width:100%;height:100%}
.g-btn img{transform:scale(1.001)}
.g-btn:hover img{transform:scale(1.04);transition:transform var(--t5) var(--e-out)}
.g-btn:focus-visible{outline-offset:3px}
.g-a{grid-column:1/8;grid-row:1/8}
.g-b{grid-column:8/13;grid-row:1/5}
.g-q1{grid-column:8/13;grid-row:5/8}
.g-c{grid-column:1/5;grid-row:8/13}
.g-d{grid-column:5/9;grid-row:8/15}
.g-e{grid-column:9/13;grid-row:8/12}
.g-f{grid-column:9/13;grid-row:12/15}
.g-g{grid-column:1/5;grid-row:13/18}
.g-q2{grid-column:5/13;grid-row:15/18}
.g-h{grid-column:1/8;grid-row:18/23}
.g-i{grid-column:8/13;grid-row:18/23}
.g-a .frame img{object-position:50% 40%}
.g-d .frame img{object-position:50% 35%}
.g-lbl{position:absolute;z-index:2;left:12px;bottom:12px;max-width:calc(100% - 24px);margin:0;display:inline-flex;align-items:baseline;gap:10px;background:var(--ink);color:#fff;border-left:3px solid var(--lime);border-radius:2px;padding:8px 12px 8px 10px;font-weight:650;font-stretch:92%;font-size:13.5px;line-height:1.3;pointer-events:none}
.g-n{flex:none;font-family:var(--f-disp);font-size:9.5px;letter-spacing:.14em;color:var(--lime)}
.g-tape{top:-14px;left:32px;width:20px;height:64px;transform:rotate(-4deg)}
.g-tape-d{left:auto;right:32px;transform:rotate(5deg)}
.g-quote{height:100%;display:flex;flex-direction:column;justify-content:center;padding:30px clamp(22px,2.6vw,40px) 26px;border-radius:var(--r)}
.g-quote p{font-size:clamp(17px,1.45vw,19px);line-height:1.45;margin:0 0 16px}
.g-quote.ink p{color:#fff}
.g-quote.ink .who{color:#fff}
.g-quote.ink .when{color:var(--muted-ink)}
.g-quote .tape-q{top:-8px;left:28px}
.g-quote-w{background:var(--tint);border-left:4px solid var(--lime-d)}
.g-quote-w p{font-size:clamp(19px,1.9vw,26px);line-height:1.38;font-weight:550;letter-spacing:-.005em;max-width:30em}
/* lightbox */
.lb{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(14,16,15,.97);color:#fff}
.lb::backdrop{background:rgba(14,16,15,.9)}
html:has(.lb[open]){overflow:hidden}
.lb-in{display:flex;flex-direction:column;height:100%;padding:clamp(12px,3vw,32px)}
.lb-stage{flex:1;min-height:0;display:grid;place-items:center}
.lb-stage img{width:auto;height:auto;max-width:100%;max-height:calc(100svh - 140px);border-radius:var(--r)}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule-ink)}
.lb-cap{margin:0;font-family:var(--f-disp);font-size:10.5px;letter-spacing:.16em;line-height:1.5;text-transform:uppercase;color:#fff}
.lb-nav{display:flex;gap:8px;flex:none}
.lb-btn{display:inline-grid;place-items:center;width:48px;height:48px;padding:0;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.32);border-radius:var(--r);cursor:pointer}
.lb-btn:hover{color:var(--lime);border-color:var(--lime);transition:color var(--t1) var(--e-out),border-color var(--t1) var(--e-out)}
@media (max-width:900px){
.pb-lines{top:auto;bottom:24px;transform:none;width:200px;opacity:.35}
.g-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;grid-auto-flow:row dense;gap:10px}
.g{grid-column:auto;grid-row:auto}
.g-a,.g-q1,.g-f,.g-q2,.g-i{grid-column:1/-1}
.g-btn{height:auto;aspect-ratio:4/5}
.g-a .g-btn,.g-f .g-btn,.g-i .g-btn{aspect-ratio:3/2}
.g-q1{margin-block:10px}
.g-q2{margin-block:10px}
}
@media (max-width:559px){
.pb-lines{display:none}
.g-lbl{left:8px;bottom:8px;max-width:calc(100% - 16px);font-size:12.5px;padding:6px 9px 6px 8px;gap:7px}
.g-a .g-lbl,.g-f .g-lbl,.g-i .g-lbl{font-size:13px}
.g-tape{height:52px;top:-12px}
.lb-cap{font-size:9.5px;letter-spacing:.12em}
.lb-btn{width:44px;height:44px}
}
/* @end gallery */
/* @page contact */
.pb-short{min-height:min(42vh,420px)}
.pb-short .pb-media img{object-position:50% 55%}
.ct-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,7vw,112px);align-items:center}
.ct-copy h2{margin-bottom:26px}
.ct a.ct-tel{color:var(--ink);font-size:clamp(28px,3.5vw,50px)}
.ct-ways{margin:36px 0 0;border-top:1px solid var(--ink)}
.ct-ways li{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--rule)}
.ct-k{font-family:var(--f-disp);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.ct-ways .btn{justify-self:start}
.ct-mail{justify-self:start;overflow-wrap:anywhere}
.ct-note{margin:24px 0 0;color:var(--muted);max-width:30em}
.ct-card-wrap{position:relative;display:grid;place-items:center;padding:clamp(44px,6vw,88px) clamp(24px,4vw,56px);background:var(--tint);border-radius:var(--r)}
.ct-card{position:relative;width:100%;max-width:520px;transform:rotate(-3deg)}
.ct-card img{width:100%;border-radius:10px;box-shadow:0 1px 2px rgba(14,16,15,.18),0 10px 20px -6px rgba(14,16,15,.28),0 34px 60px -18px rgba(14,16,15,.42)}
.ct-tape-a{top:-14px;left:50%;width:22px;height:60px;transform:translateX(-50%) rotate(84deg)}
/* free quote: a stepped ramp, not the home's ruled columns */
.vin{padding-block:clamp(72px,9vw,128px)}
.vin-head{margin-bottom:clamp(40px,5vw,64px)}
.vin-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.vin-step{position:relative;padding-top:26px;border-top:1px solid var(--rule-ink)}
.vin-step::before{content:"";position:absolute;top:-2px;left:0;width:56px;height:3px;background:var(--lime)}
.vin-step:nth-child(2){margin-top:56px}
.vin-step:nth-child(3){margin-top:112px}
.vin-n{display:block;font-family:var(--f-disp);font-size:11px;letter-spacing:.2em;color:var(--lime);margin-bottom:20px}
.vin-ico{display:block;color:#fff;margin-bottom:20px}
.vin-step h3{color:#fff;font-size:clamp(22px,2vw,26px);margin-bottom:10px}
.vin-step p{max-width:24em}
.area-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,96px);align-items:center}
.area-grid{align-items:start}
.area-media{position:sticky;top:calc(var(--hh) + 48px);margin-top:16px}
.area-media .frame{border-radius:var(--r)}
.area-media .frame img{object-position:50% 30%}
.area-tape-a{top:-16px;left:18%;transform:rotate(-5deg)}
.area-tape-b{top:-16px;right:18%;transform:rotate(4deg)}
.area-copy h2{margin-bottom:28px}
.area .hours-t div.today{box-shadow:inset 3px 0 var(--lime-d);padding-left:12px}
@media (max-width:900px){
.ct-grid,.area-grid{grid-template-columns:1fr}
.area-media{position:relative;top:auto}
.vin-steps{grid-template-columns:1fr;gap:0}
.vin-step,.vin-step:nth-child(2),.vin-step:nth-child(3){margin-top:0;padding:26px 0 30px}
.vin-ico{position:absolute;right:0;top:26px;margin:0}
}
@media (max-width:759px){
.pb-short .pb-scrim{background:linear-gradient(0deg,rgba(14,16,15,.92) 0%,rgba(14,16,15,.66) 55%,rgba(14,16,15,.35) 100%)}
}
@media (max-width:559px){
.ct-ways li{grid-template-columns:1fr;gap:10px}
.ct-ways .btn{width:100%}
.ct-card-wrap{padding:40px 22px}
.ct-card{transform:rotate(-2.5deg)}
.vin-ico{width:48px;height:30px}
}
/* @end contact */
/* @golive 2026-10-11 — client site (cbautoglassok.com): permanent mobile call bar, quote form,
services hub, service pages, service-area directions link. */
.nav a[aria-current="true"]::after{transform:scaleX(1)}
.cta-m{display:none}
.svc-t h3 a{color:inherit;text-decoration:none;background:linear-gradient(var(--lime-d),var(--lime-d)) 0 100%/0 2px no-repeat}
.svc-t h3 a:hover{background-size:100% 2px;transition:background-size var(--t2) var(--e-out)}
@media (min-width:901px){.ftr-grid{grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr))}}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}
.ftr-base .ftr-credit a{color:#C9CFD3}
.hours-dir{margin:16px 0 0}
.hours-dir .tlink{font-size:15px}
.ms-area-dir{margin:26px 0 0}
.ct-map{justify-self:start}
.pb-lede a{color:#fff}
.pb-msg{min-height:min(60vh,560px)}
/* Reviews band on light ground (service pages) */
.rv-band .rev-h{margin-bottom:clamp(32px,4vw,52px)}
.qgrid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Services hub */
.hub-head{max-width:40em;margin-bottom:clamp(36px,5vw,64px)}
.hub-intro{color:var(--muted);font-size:18px;margin:18px 0 0}
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(24px,3vw,44px)}
.hub-link{display:block;text-decoration:none;color:inherit}
.hub-link .frame{border-radius:var(--r);margin-bottom:22px}
.hub-link .frame img{transition:transform var(--t3) var(--e-out)}
.hub-link:hover .frame img{transform:scale(1.03)}
.hub-n{display:block;font-family:var(--f-disp);font-size:11px;letter-spacing:.2em;color:var(--green);margin-bottom:10px}
.hub-card h3{font-size:clamp(24px,2.3vw,30px);margin:0 0 10px;color:var(--ink)}
.hub-card p{color:var(--muted);margin:0 0 16px;max-width:30em}
/* Quote form — plain POST to /quote (server 303s to thanks.html); no client-side "sent" state */
.quote-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,96px);align-items:start}
.quote-head{position:sticky;top:calc(var(--hh) + 40px)}
.quote-head h2{margin-bottom:20px}
.quote-head p{color:var(--muted);max-width:28em}
.quote-alt a{color:var(--ink);font-weight:700}
.qf{position:relative;display:grid;gap:18px;background:#fff;border:1px solid var(--rule);border-top:3px solid var(--lime-d);border-radius:var(--r);padding:clamp(22px,3vw,36px)}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.qf-f{display:grid;gap:8px;margin:0}
.qf-f>span{font-weight:750;font-stretch:92%;font-size:15px;color:var(--ink)}
.qf-f em{font-style:normal;font-weight:500;color:var(--muted)}
.qf input,.qf select,.qf textarea{width:100%;box-sizing:border-box;min-height:50px;padding:12px 14px;border:1.5px solid #9AA3A9;border-radius:var(--r);background:#fff;color:var(--ink);font:inherit;font-size:16px;line-height:1.3}
.qf select{-webkit-appearance:none;appearance:none;padding-right:42px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%230E100F' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center}
.qf textarea{min-height:120px;resize:vertical}
.qf input::placeholder{color:#7A848B}
.qf input:focus,.qf select:focus,.qf textarea:focus{outline:3px solid var(--lime);outline-offset:0;border-color:var(--ink)}
.qf-hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;opacity:0;pointer-events:none}
.qf-send{justify-self:start;margin-top:4px;background:var(--lime);color:var(--ink);border-color:var(--lime)}
.qf-send::before{background:#A4DE5E}
.qf-note{font-size:14px;color:var(--muted);margin:0}
.qf-err{margin:0;padding:14px 16px;border-left:4px solid #B3261E;background:#FDECEA;color:#5C1410;font-weight:600}
.qf-err[hidden]{display:none}
@media (max-width:900px){
.quote-grid{grid-template-columns:1fr}
.quote-head{position:static}
}
@media (max-width:759px){
/* the permanent bar is the call button on phones: one call affordance per screen */
.cta-d{display:none!important}
.cta-m{display:inline-flex}
.hdr-call,.js .hdr-call,html.js.hdr-call-on .hdr-call{display:none!important}
.callbar{transform:none;visibility:visible}
/* the hero fills the first screen: end it above the bar so its own buttons stay visible */
.hero{min-height:min(calc(100svh - var(--hh) - 68px - env(safe-area-inset-bottom)),760px)}
body.typing .callbar{transform:translateY(110%);visibility:hidden}
body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
.ftr-base{padding-bottom:28px}
.close .bt-k,.close a.bigtel{display:none}
.close-copy .close-ctas{margin-top:22px}
/* the bar already offers Call + Get a quote; the hero/banner add the third channel only */
.hero-ctas .cta-quote,.pb-ctas .cta-quote{display:none}
.hero-ctas,.pb-ctas{display:grid;grid-template-columns:1fr;gap:10px}
.hub-grid,.qgrid-2{grid-template-columns:1fr}
.qf-row{grid-template-columns:1fr}
.qf-send{justify-self:stretch}
.ftr-base{flex-direction:column}
}
.ws-banner h1,.chip-banner h1,.sb-banner h1,.sv-banner h1{font-size:clamp(26px,3.2vw,46px)}
@media (max-width:559px){
/* service-page h1s ("Windshield Replacement in Ponca City, OK") in the wide display face */
.pbanner h1{font-size:clamp(21px,6vw,28px);line-height:1.12}
}
/* @end golive */