/* services.html: page styles on top of system.css (tokens only). Contra 0.1 */
.svc{--sv-acc:var(--sign);--sv-bg:var(--ink)}
.svc .light{--sv-acc:var(--fascia);--sv-bg:var(--brick)}
.svc .fascia-field{--sv-acc:var(--sign);--sv-bg:var(--fascia)}
.sv-num{font-size:clamp(3.4rem,8vw,8.5rem);color:transparent;-webkit-text-stroke:1.5px var(--sv-acc);margin:0;line-height:.8}
.sv-src{color:var(--sv-acc);margin:.9em 0 0}
.light .sv-src{color:var(--fascia)}

/* hero */
.sv-hero{padding-top:calc(var(--hdr) + clamp(32px,7vh,96px));padding-bottom:clamp(48px,8vh,110px)}
.sv-hero__grid{row-gap:clamp(32px,5vw,56px);align-items:end}
.sv-hero__copy{grid-column:1/-1}
.sv-hero__art{grid-column:1/-1}
.sv-kick{color:var(--sign);margin-bottom:1.4em}
.sv-hero h1{margin-bottom:.22em;margin-left:-.04em}
.sv-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.sv-hero-art{width:100%;height:auto;color:var(--brick)}
@media (min-width:1100px){.sv-hero__copy{grid-column:1/span 6;align-self:center}.sv-hero__art{grid-column:7/span 6;margin-right:calc(var(--edge) * -.5)}.sv-hero h1{font-size:clamp(4.5rem,7.4vw,7rem)}}
/* hero drive-in: one shot on load, transform/opacity only */
.sv-hero-art .h-car{transform-box:view-box;transform-origin:500px 330px;animation:svDrive 2.6s var(--ease-ramp) .3s both}
.sv-hero-art .h-lamp{animation:svLamp 1.2s var(--ease-ramp) 2.4s both}
.sv-hero-art .h-tubes{animation:svTubes 1.6s steps(4,end) .1s both}
@keyframes svDrive{from{transform:scale(.28);opacity:0}25%{opacity:1}to{transform:none;opacity:1}}
@keyframes svLamp{from{opacity:0}to{opacity:1}}
@keyframes svTubes{from{opacity:0}to{opacity:.55}}

/* sign */
.sv-sign .grid{row-gap:40px;align-items:center}
.sv-sign__photo,.sv-sign__copy{grid-column:1/-1}
.sv-strip{font-size:clamp(1.15rem,2.1vw,1.9rem);line-height:1.12;color:var(--ink);margin:.7em 0 1em;letter-spacing:.01em}
.sv-strip span[aria-hidden]{color:var(--fascia);font-weight:400}
.sv-idx{list-style:none;margin:0;padding:0;counter-reset:i;columns:2;column-gap:var(--gutter)}
.sv-idx li{counter-increment:i;break-inside:avoid;border-top:1px solid var(--line-l)}
.sv-idx a{display:flex;align-items:baseline;gap:12px;min-height:48px;padding:12px 0;text-decoration:none;font-weight:560;transition:transform .5s var(--ease-ramp)}
.sv-idx a::before{content:counter(i,decimal-leading-zero);font-stretch:75%;font-weight:650;font-size:.8125rem;letter-spacing:.06em;color:var(--fascia)}
.sv-idx a:hover{transform:translateX(6px)}
@media (max-width:399px){.sv-idx{columns:1}}
@media (min-width:1100px){.sv-sign__photo{grid-column:1/span 7}.sv-sign__copy{grid-column:8/span 5}}

/* MOT */
.sv-mot__head{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(16px,3vw,48px);align-items:end}
.sv-mot .sv-num{-webkit-text-stroke-color:var(--sign)}
.sv-owner{margin:clamp(40px,7vh,88px) 0 0;border-left:6px solid var(--sign);padding:4px 0 4px clamp(16px,2.4vw,36px);max-width:1180px}
.sv-owner blockquote{margin:0}
.sv-owner p{font-size:clamp(1.35rem,3.3vw,3.4rem);line-height:.98;margin:0}
.sv-owner figcaption{margin-top:16px;color:var(--brick)}
.sv-veh{list-style:none;margin:clamp(48px,8vh,96px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px var(--gutter)}
.veh{display:flex;flex-direction:column;gap:6px;padding-top:14px;border-top:1px solid rgba(236,233,225,.3)}
.veh svg{width:100%;height:auto;margin-bottom:8px;overflow:visible;color:var(--brick)}
.veh .vl{font-weight:600;line-height:1.25}
.veh .vs{font-stretch:75%;font-weight:650;text-transform:uppercase;letter-spacing:.06em;font-size:.8125rem;color:var(--sign)}
.veh.nope .vs{color:var(--brick);text-decoration:line-through 2px var(--oxide)}
.veh.nope .vb{opacity:.45;stroke-dasharray:5 6}
.vm path{stroke-width:3.4}
@media (min-width:768px){.sv-veh{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sv-mot__qs{margin-top:clamp(56px,9vh,120px);display:grid;gap:48px var(--gutter)}
.sv-mot__more{display:grid;gap:32px}
@media (min-width:1100px){.sv-mot__qs{grid-template-columns:7fr 5fr;align-items:start}}

/* quotes */
.sv-q{margin:0}
.sv-q blockquote{margin:0}
.sv-q blockquote p{margin:0}
.sv-q .quote-body{font-size:clamp(1.125rem,1.4vw,1.35rem);font-style:italic;font-variation-settings:"opsz" 36}
.sv-q figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px}
.sv-q figcaption cite{margin:0;font-style:normal}
.fascia-field .stars i{background:var(--brick)}.fascia-field .stars i.on{background:var(--sign)}
.fascia-field .muted{color:rgba(236,233,225,.78)}

/* ---------- services sequence: varied rhythm ---------- */
.sv-list{padding-bottom:0}
.sv-list__h{color:var(--steel);margin-bottom:18px}
.sv-s,.sv-pin{overflow-x:clip}
.sv-s{position:relative;padding-block:clamp(72px,14vh,180px)}
.sv-s__head{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(14px,2.4vw,40px);align-items:end}
.sv-s__head h3.t2{font-size:clamp(2.3rem,5.4vw,5.6rem)}
.sv-s__head h3.t1{font-size:clamp(1.9rem,8.2vw,9.5rem)}
@media (max-width:599px){.sv-s__head{grid-template-columns:1fr;row-gap:10px}}
.sv-s__qs{display:grid;gap:30px;margin-top:clamp(32px,5vh,56px)}
.sv-art .ic,.art-xl,.art-wide{width:100%;height:auto;color:var(--brick);overflow:visible}
.light .art-xl{color:var(--ink)}
[data-scene] svg *{transform-box:fill-box;transform-origin:center}

/* 02 split, drawing bleeds off the right edge */
.sv-s--split .grid{row-gap:24px;align-items:center}
.sv-s__copy{grid-column:1/-1}
.sv-s__art{grid-column:1/-1;max-width:520px;margin-inline:auto 0}
@media (min-width:900px){.sv-s__copy{grid-column:1/span 6}.sv-s__art{grid-column:7/-1;max-width:none;margin-right:calc(var(--edge) * -1.2)}}
.sv-s--split{--a:clamp(0,(var(--p,1) - .12) / .45,1)}
.oc-can{transform-origin:0% 100%!important;transform:rotate(calc(var(--a) * -16deg))}
.oc-drip{transform:translateY(calc(var(--a) * 70px));opacity:var(--a)}

/* 03 full-bleed band with a wide scan */
.sv-s--band{background:var(--ink-2);--a:clamp(0,(var(--p,1) - .18) / .5,1)}
.sv-wide{padding-inline:var(--edge);margin-block:clamp(36px,6vh,72px)}
.sv-wide svg{max-width:1680px;margin-inline:auto}
.dg-bar{transform:translateX(calc(var(--a) * 1080px))}
.dg-lamp{opacity:calc(1 - .82 * clamp(0,(var(--a) - .55) * 4,1))}
.dg-ok{opacity:clamp(0,(var(--a) - .75) * 5,1);transform:scale(calc(.8 + .2 * clamp(0,(var(--a) - .75) * 5,1)))}
.dg-wave{opacity:calc(.25 + .45 * var(--a))}
.sv-s__qs2{row-gap:40px;align-items:end}
.sv-s__qs2>*{grid-column:1/-1}
@media (min-width:900px){.sv-s__qs2>:first-child{grid-column:1/span 8}.sv-s__qs2>:last-child{grid-column:9/span 4}}

/* 04 oversize caps running off the grid */
.sv-s--mega{--a:clamp(0,(var(--p,1) - .1) / .5,1);overflow:clip}
.sv-mega-h{font-size:clamp(2rem,9.4vw,15rem);line-height:.82;margin:12px 0 0 -.05em;white-space:nowrap}
.sv-mega-h span{display:block}
.sv-mega-h span+span{padding-left:min(30vw,40%);color:var(--sign)}
.sv-mega__row{margin-top:clamp(24px,4vh,48px);row-gap:28px;align-items:center}
.sv-mega__art{grid-column:1/-1;max-width:420px}
.sv-mega__copy{grid-column:1/-1}
@media (min-width:900px){.sv-mega__art{grid-column:1/span 5;max-width:none;margin-top:-5vw}.sv-mega__copy{grid-column:7/-1}}
.rp-spanner{transform-box:view-box!important;transform-origin:350px 200px!important;transform:rotate(calc((var(--a) - 1) * 50deg))}
.rp-nut{transform:rotate(calc(var(--a) * 60deg))}

/* 05 pinned: clutch engages, caliper clamps, shock compresses */
.sv-pin{--c:clamp(0,var(--p,1) / .28,1);--b:clamp(0,(var(--p,1) - .34) / .28,1);--s:clamp(0,(var(--p,1) - .68) / .28,1);border-top:1px solid var(--line-d)}
.sv-pin__stick{padding-block:clamp(56px,10vh,120px)}
.sv-pin__grid{row-gap:24px;align-items:center}
.sv-pin__copy,.sv-pin__stage{grid-column:1/-1}
.sv-pin__words{list-style:none;margin:16px 0 0;padding:0}
.pw{border-top:1px solid var(--line-d);padding-block:8px}
.pw .display{font-size:clamp(2.4rem,6vw,7rem)}
.sv-pin__bar{display:none}
.sv-pin__stage{display:grid;gap:32px}
.pp{margin:0}
.pp figcaption{margin-top:8px;color:var(--steel)}
.cl-press{transform:translateX(calc((1 - var(--c)) * 130px))}
.cl-plate{transform:translateX(calc((1 - var(--c)) * 46px))}
.cl-fork{transform-origin:50% 0%!important;transform:rotate(calc((1 - var(--c)) * -14deg))}
.br-padL{transform:translateX(calc(var(--b) * 34px))}
.br-padR{transform:translateX(calc(var(--b) * -34px))}
.br-face{transform:rotate(calc(var(--b) * 420deg))}
.sh-top{transform:translateY(calc(var(--s) * 60px))}
.sh-coil{transform-origin:50% 100%!important;transform:scaleY(calc(1 - var(--s) * .25))}
@media (min-width:768px){.sv-pin__stage{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the pinned sequence only runs with JS and full motion; otherwise all three sit side by side in their final pose */
.js:not(.rm) .sv-pin{height:300vh;height:300svh}
.js:not(.rm) .sv-pin__stick{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-block:calc(var(--hdr) + 12px) 24px}
.js:not(.rm) .sv-pin__stage{display:block;position:relative;aspect-ratio:600/460}
.js:not(.rm) .pp{position:absolute;inset:0}
.js:not(.rm) .pp figcaption{display:none}
.js:not(.rm) .pp1{opacity:clamp(0,(.36 - var(--p,1)) * 18,1)}
.js:not(.rm) .pp2{opacity:calc(clamp(0,(var(--p,1) - .3) * 18,1) * clamp(0,(.7 - var(--p,1)) * 18,1))}
.js:not(.rm) .pp3{opacity:clamp(0,(var(--p,1) - .64) * 18,1)}
/* words: steel base layer (readable on ink) under a brick layer that fades in for the active word; opacity only */
.pw .display{display:grid}
.pw .display>span{grid-area:1/1}
.pw-b{display:none;color:var(--steel)}
.js:not(.rm) .pw-b{display:block}
.js:not(.rm) .pw-a{transition:opacity .4s}
.js:not(.rm) .pw1 .pw-a{opacity:clamp(0,(.36 - var(--p,1)) * 18,1)}
.js:not(.rm) .pw2 .pw-a{opacity:calc(clamp(0,(var(--p,1) - .3) * 18,1) * clamp(0,(.7 - var(--p,1)) * 18,1))}
.js:not(.rm) .pw3 .pw-a{opacity:clamp(0,(var(--p,1) - .64) * 18,1)}
.js:not(.rm) .sv-pin__bar{display:block;height:3px;background:var(--line-d);margin-top:24px;overflow:hidden}
.js:not(.rm) .sv-pin__bar i{display:block;height:100%;background:var(--sign);transform-origin:left;transform:scaleX(var(--p,1))}
@media (min-width:900px){.sv-pin__copy{grid-column:1/span 5}.sv-pin__stage{grid-column:6/-1}.js:not(.rm) .sv-pin__stage{grid-column:6/-1}}
@media (max-width:899px){.js:not(.rm) .sv-pin{height:200vh;height:200svh}.js:not(.rm) .pw .display{font-size:clamp(2rem,9vw,4rem)}.js:not(.rm) .sv-pin__stage{max-height:42vh;aspect-ratio:600/460;margin-inline:auto;width:min(100%,calc(42vh * 600 / 460))}}

/* 06 full-bleed tyre moment */
.sv-s--tyre{--a:clamp(0,(var(--p,1) - .12) / .5,1);--w:clamp(0,(var(--p,1) - .62) / .2,1);border-top:1px solid var(--line-d)}
.sv-wide--tyre{padding-inline:0;overflow:clip}
.ty-roll{transform:translateX(calc((var(--a) - 1) * 900px))}
.ty-spin{transform:rotate(calc((var(--a) - 1) * 720deg))}
.ty-weight{opacity:var(--w);transform:translateY(calc((1 - var(--w)) * 24px))}
.ty-needle{transform-origin:50% 100%!important;transform:rotate(calc((1 - var(--w)) * -48deg))}
.sv-tw{list-style:none;margin:0;padding:0}
.sv-tw li{display:flex;align-items:center;gap:clamp(12px,2vw,28px);border-top:1px solid var(--line-d);padding-block:10px}
.sv-tw li:last-child{border-bottom:1px solid var(--line-d)}
.sv-tw__n{color:var(--sign);min-width:2.2em}
.sv-tw .display{font-size:clamp(2rem,7.4vw,8rem);flex:1}
.sv-tw .ic{width:clamp(56px,8vw,120px);height:auto;flex:none;color:var(--brick)}
.sv-tw li:nth-child(even){padding-left:clamp(0px,8vw,160px)}

/* from the reviews */
.sv-also__item{--a:clamp(0,(var(--p,1) - .1) / .45,1)}
.bt-clampL,.bt-clampR{transform:translateY(calc((var(--a) - 1) * 56px))}
.bt-c1{opacity:clamp(0,(var(--a) - .55) * 6,1)}.bt-c2{opacity:clamp(0,(var(--a) - .7) * 6,1)}.bt-c3{opacity:clamp(0,(var(--a) - .84) * 6,1)}
.vn-lamp{transform-origin:50% 100%!important;transform:rotate(calc((var(--a) - 1) * 46deg))}
.sv-also .grid{row-gap:56px;align-items:start}
.sv-also__head{grid-column:1/-1}
.sv-also__item{grid-column:1/-1}
.sv-also__top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line-l);padding-bottom:18px;margin-bottom:22px}
.sv-also__item .sv-num{-webkit-text-stroke-color:var(--fascia);font-size:clamp(3rem,5vw,5.5rem)}
.sv-also__item .sv-art{width:clamp(140px,15vw,260px);flex:0 1 auto;min-width:0}.sv-also{overflow-x:clip}
.sv-also__item h3{margin-bottom:18px}
@media (min-width:768px){.sv-also__head{grid-column:1/span 12}.sv-also__item{grid-column:span 6}}
@media (min-width:1100px){.sv-also__head{grid-column:1/span 4}.sv-also__item{grid-column:6/span 3}.sv-also__item+.sv-also__item{grid-column:10/span 3;margin-top:140px}}

/* scroll-driven drawing parts: core.js sets --p 0..1 on [data-scene]; without it --p is 1 (final pose) */
.svc [data-scene] .ic [class^="a-"]{transform-box:fill-box;transform-origin:center}
.svc .a-spin{transform:rotate(calc((var(--p,1) - 1) * 220deg))}
.svc .a-drip{transform:translateY(calc((var(--p,1) - 1) * 14px))}
.svc .a-lamp{opacity:calc(.2 + .8 * var(--p,1))}
.svc .a-scan{transform:translateX(calc(var(--p,1) * 76px))}
.svc .a-turn{transform-origin:30% 80%;transform:rotate(calc((var(--p,1) - .5) * 18deg))}
.svc .a-coil{transform:scaleY(calc(1 - .14 * var(--p,1)))}
.svc .a-rock{transform:rotate(calc((var(--p,1) - .5) * 20deg))}
.svc .a-plug{transform:translateY(calc((var(--p,1) - 1) * 18px))}
.svc .a-swapL{transform:translateX(calc(var(--p,1) * 52px))}
.svc .a-swapR{transform:translateX(calc(var(--p,1) * -52px))}
.svc .a-charge{opacity:calc(.25 + .75 * var(--p,1))}
.svc .a-sweep{transform-origin:50% 100%;transform:rotate(calc((var(--p,1) - .5) * 26deg))}
.svc .a-stamp{transform:scale(calc(.9 + .1 * var(--p,1)))}
@media (prefers-reduced-motion:reduce){
 .sv-hero-art .h-car,.sv-hero-art .h-lamp,.sv-hero-art .h-tubes{animation:none!important;opacity:1}
 .sv-hero-art .h-tubes{opacity:.55}
 .svc [data-scene]{--p:1!important}
}

/* QA fix: tighter servicing close + diagnostics open on small screens */
@media (max-width:767px){.sv-s--split{padding-bottom:36px}.sv-s--split .sv-s__art{max-width:300px;margin-top:-8px}.sv-s--split+.sv-s--band{padding-top:64px}}
@media (min-width:768px) and (max-width:899px){.sv-s--split{padding-bottom:56px}}