@font-face{font-family:"Anton";src:url("../fonts/anton.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{--ink:#1A1819;--floor:#E8E9EB;--yellow:#FFF200;--red:#DA1F26;--blue:#00A3DC;--pad:48px;--max:1344px}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:clip;background:#fff;color:var(--ink);font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:18px;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
section{scroll-margin-top:84px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--ink);padding:12px 18px;z-index:100;font-weight:700}
.skip:focus{left:8px;top:8px}
.wrap{max-width:var(--max);margin:0 auto}
.display{font-family:"Anton",Impact,"Arial Narrow",sans-serif;font-weight:400;text-transform:uppercase;line-height:1.02;letter-spacing:.005em}
.h-xl{font-size:clamp(48px,6vw,92px)}
.h-lg{font-size:clamp(44px,5vw,76px)}
.lede{font-size:clamp(18px,1.5vw,21px);line-height:1.5}

/* Buttons */
.plate{display:inline-block;background:var(--yellow);color:var(--ink);font-family:"Anton",Impact,sans-serif;letter-spacing:.03em;text-decoration:none;line-height:1.2;white-space:nowrap;border-radius:10px;box-shadow:0 6px 0 var(--sh,#1A1819);transition:transform .12s ease,box-shadow .12s ease}
.plate:hover{transform:translateY(3px);box-shadow:0 3px 0 var(--sh,#1A1819)}
.plate:active{transform:translateY(6px);box-shadow:0 0 0 var(--sh,#1A1819)}
.plate--xl{font-size:clamp(36px,4vw,48px);padding:8px 26px 4px;border:4px solid var(--ink)}
.plate--lg{font-size:38px;padding:6px 22px 3px;border:4px solid var(--ink)}
.plate--sm{font-size:26px;padding:6px 16px 4px;border-radius:6px}
.plate--text{font-family:inherit;font-size:17px;font-weight:700;letter-spacing:0;padding:14px 22px;border-radius:6px}
.on-dark{--sh:#8F8700}
.btn{display:inline-block;background:var(--ink);color:#fff;border-radius:6px;padding:17px 24px;font-size:17px;font-weight:600;text-decoration:none;transition:background-color .15s ease}
.btn:hover{background:#000}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--floor)}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff;padding:12px var(--pad) 15px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 32px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.site-header .logo img{height:48px;width:auto}
.nav{display:flex;flex-wrap:wrap;gap:10px 30px;font-size:17px;font-weight:500}
.nav a{text-decoration:none}
.nav a:hover,.nav a[aria-current]{text-decoration:underline;text-underline-offset:6px}
.head-right{display:flex;align-items:center;gap:12px 20px}
.status{display:flex;align-items:center;gap:10px;font-size:15px}
.dot{width:10px;height:10px;border-radius:50%;background:#9A9A9D;flex:none}
.dot.is-open{background:#4ADE80}.dot.is-closed{background:#FF5A60}
.on-light .dot.is-open{background:#15803D}.on-light .dot.is-closed{background:var(--red)}
.prog{position:absolute;left:0;right:0;bottom:0;height:5px;transform-origin:0 50%;background:linear-gradient(90deg,var(--yellow) 0 33.3%,var(--red) 33.3% 66.6%,var(--blue) 66.6% 100%)}

/* Hero */
.hero{position:relative;overflow:clip;background:radial-gradient(ellipse 70% 80% at 30% 35%,#F6F6F7 0%,#DCDDE0 100%);display:flex;flex-wrap:wrap;align-items:stretch}
.hero-copy{flex:1 1 560px;padding:80px var(--pad) 150px;display:flex;flex-direction:column;justify-content:center;gap:28px;position:relative;z-index:2}
.hero h1{font-size:clamp(52px,7.4vw,112px);line-height:1}
.ln{display:block;overflow:clip;padding-bottom:.06em;margin-bottom:-.06em}
.ln>span{display:block}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:18px 22px}
.hero-note{font-size:16px;color:#3D3D40}
.hero-art{flex:1 1 480px;position:relative;min-height:640px}
.layer{position:absolute}
.slab-layer{top:0;bottom:0;left:56px;right:-90px;transform:translate(calc(var(--px,0) * -14px),calc(var(--py,0) * -10px))}
.slab{position:absolute;inset:0;display:flex;gap:10px;transform:skewX(-10deg);filter:drop-shadow(-26px 30px 36px rgba(0,0,0,.38))}
.stripe{width:26px;flex:none}
.s-y{background:var(--yellow)}.s-r{background:var(--red)}.s-b{background:var(--blue)}
.wipe{flex:1;clip-path:inset(0 0 0 0);background:#D5D6D9}
.wipe img{width:134%;height:100%;margin-left:-17%;max-width:none;object-fit:cover;object-position:62% 55%;transform:skewX(10deg)}
.patch-layer{left:8px;bottom:120px;z-index:3;transform:translate(calc(var(--px,0) * 26px),calc(var(--py,0) * 18px))}
.patch{width:160px;height:160px;border-radius:50%;transform:rotate(-9deg);filter:drop-shadow(0 16px 18px rgba(0,0,0,.45))}
.card-layer{right:40px;top:56px;z-index:3;transform:translate(calc(var(--px,0) * 40px),calc(var(--py,0) * 28px))}
.float-card{background:#fff;border-radius:14px;padding:16px 20px;box-shadow:0 24px 50px rgba(0,0,0,.35);transform:rotate(2deg);display:flex;flex-direction:column;gap:4px}
.float-card .status{font-size:17px;font-weight:700}
.float-card small{font-size:15px;color:#3D3D40}

/* Tape */
.tape{position:relative;z-index:5;height:150px;margin:-75px 0;overflow-x:clip}
.ribbon{position:absolute;left:-5%;width:110%;padding:12px 0 9px}
.ribbon--a{top:22px;transform:rotate(-2.2deg);background:var(--ink);color:var(--yellow);box-shadow:0 14px 30px rgba(0,0,0,.35)}
.ribbon--b{top:62px;transform:rotate(1.6deg);background:#fff;color:var(--ink);box-shadow:0 14px 30px rgba(0,0,0,.3)}
.track{display:flex;width:max-content}
.track span{display:flex;align-items:center;gap:26px;padding-right:26px;font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:34px;line-height:1.1;white-space:nowrap}
.track i{width:14px;height:22px;transform:skewX(-10deg);display:block}

/* MOT date tool */
.motband{background:var(--yellow);padding:150px var(--pad) 88px}
.motband--plain{padding-top:96px}
.motband .wrap{display:flex;flex-wrap:wrap;gap:40px 64px;align-items:stretch}
.mot-form{flex:1 1 440px;display:flex;flex-direction:column;gap:20px}
.mot-form p{max-width:480px}
.field{display:flex;flex-direction:column;gap:8px;max-width:360px}
.field label{font-size:16px;font-weight:600}
.field input{font:inherit;font-size:22px;font-weight:600;padding:14px 16px;border:4px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);min-height:44px;box-shadow:0 6px 0 var(--ink);width:100%}
.mot-out{flex:1 1 440px;display:flex}
.panel{flex:1;background:var(--ink);color:#fff;border-radius:18px;padding:44px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;min-height:260px;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.mot-out .panel{transform:rotate(1.2deg)}
.panel .big{font-size:clamp(32px,3.4vw,52px);line-height:1.08}
.panel p{color:#E6E6E8}

/* Finder */
.finder{padding:112px var(--pad)}
.finder .cols{display:flex;flex-wrap:wrap;gap:40px 56px;align-items:flex-start;margin-top:44px}
.chips{flex:1 1 520px;display:flex;flex-wrap:wrap;gap:12px}
.chip{cursor:pointer;text-align:left;font:inherit;font-size:17px;font-weight:500;padding:14px 18px;border-radius:6px;border:2px solid var(--ink);background:#fff;color:var(--ink);min-height:44px;transition:background-color .15s ease,color .15s ease,transform .15s ease}
.chip:hover{transform:translateY(-2px)}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff}
.answer{flex:1 1 440px;position:relative}
.answer-back{position:absolute;inset:0;border-radius:18px;transform:rotate(-2.5deg) translate(-10px,10px);background:var(--yellow);transition:background-color .3s ease}
.answer .panel{position:relative;box-shadow:0 30px 60px rgba(0,0,0,.3);min-height:300px}
.answer .kicker{font-size:17px;font-weight:600;color:#D8D8DA}
.answer-links{display:flex;flex-direction:column;gap:6px}
.answer-links a{font-family:"Anton",Impact,sans-serif;text-transform:uppercase;font-size:clamp(38px,4vw,60px);line-height:1.08;text-underline-offset:8px;text-decoration-thickness:3px}

/* Services deck */
.deck{background:var(--ink);color:#fff;padding:112px var(--pad) 84px}
.deck h2{margin-bottom:56px}
.card{border-radius:28px;padding:48px;margin-bottom:28px;box-shadow:0 -14px 44px rgba(0,0,0,.4);display:flex;flex-wrap:wrap;gap:28px 56px;min-height:430px}
.card-head{flex:1 1 300px;display:flex;flex-direction:column;gap:14px}
.card-head h3{font-size:clamp(48px,6vw,96px);line-height:1}
.card-head p{max-width:340px}
.card-links{flex:2 1 480px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 40px;align-content:start}
.slink{display:block;padding:14px 0;text-decoration:none;border-top:2px solid var(--line);transition:transform .18s ease}
.slink:hover{transform:translateX(8px)}
.slink b{display:block;font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:34px;line-height:1.1}
.slink span{display:block;margin-top:6px;font-size:16px;line-height:1.45}
.c-y{background:var(--yellow);color:var(--ink);--line:rgba(26,24,25,.35)}
.c-r{background:var(--red);color:#fff;--line:rgba(255,255,255,.5)}
.c-b{background:var(--blue);color:var(--ink);--line:rgba(26,24,25,.35)}
.c-w{background:#fff;color:var(--ink);--line:rgba(26,24,25,.3)}
@media (min-width:900px) and (min-height:700px){.card{position:sticky}.card:nth-of-type(1){top:104px}.card:nth-of-type(2){top:128px}.card:nth-of-type(3){top:152px}.card:nth-of-type(4){top:176px}}

/* Classes */
.classes{display:flex;flex-wrap:wrap;overflow:clip}
.classes-head{flex:1 1 100%;padding:104px var(--pad) 44px}
.class{flex:1 1 440px;padding:56px var(--pad);display:flex;flex-wrap:wrap;gap:20px 36px;align-items:flex-start;text-decoration:none}
.class--4{background:var(--blue);color:var(--ink)}
.class--7{background:var(--red);color:#fff}
.num{display:block;font-family:"Anton",Impact,sans-serif;font-size:clamp(180px,22vw,300px);line-height:.85;text-shadow:10px 10px 0 rgba(0,0,0,.2);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.class:hover .num{transform:scale(1.06) rotate(-3deg)}
.class-copy{flex:1 1 240px;display:flex;flex-direction:column;gap:12px;padding-top:8px}
.class-copy b{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:44px;line-height:1}
.class-copy span{max-width:360px}
.class-copy u{font-size:17px;font-weight:700;text-underline-offset:5px}

/* Workshop */
.workshop{background:var(--ink);color:#fff;padding-bottom:96px}
.zoom{position:relative;height:clamp(420px,54vw,760px);clip-path:inset(0 0 round 0px);background:#232122}
.zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.zoom::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(26,24,25,.9) 0%,rgba(26,24,25,0) 55%)}
.zoom h2{position:absolute;z-index:1;left:var(--pad);right:var(--pad);bottom:36px;font-size:clamp(40px,6.4vw,104px);line-height:1}
.workshop .wrap{max-width:calc(var(--max) + 2 * var(--pad));padding:48px var(--pad) 0;display:flex;flex-wrap:wrap;gap:24px 64px}
.workshop .wrap>*{flex:1 1 420px;max-width:600px}

/* Find us */
.find{background:var(--floor);padding:112px var(--pad);overflow-x:clip}
.find .wrap{display:flex;flex-wrap:wrap;gap:48px 72px;align-items:flex-start}
.find-main{flex:1.3 1 520px;display:flex;flex-direction:column;gap:22px;min-width:0}
.postcode{font-family:"Anton",Impact,sans-serif;font-size:clamp(72px,13vw,208px);line-height:.92;letter-spacing:.01em;white-space:nowrap;text-shadow:8px 8px 0 #fff}
.find-cta{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center}
.hours-wrap{flex:1 1 360px}
.hours{background:#fff;border-radius:18px;padding:32px 32px 20px;box-shadow:0 30px 60px rgba(0,0,0,.18);transform:rotate(-1.2deg)}
.hours h3{font-size:40px;margin-bottom:6px}
.hours .status{font-size:16px;margin-bottom:18px}
.hours dl{margin:0}
.hours dl div{display:flex;justify-content:space-between;gap:16px;padding:12px;margin:0 -12px;font-size:18px;border-top:1px solid #D5D6D9}
.hours dd{margin:0}
.hours .today{background:var(--yellow);font-weight:700}

/* Footer */
.site-footer{background:var(--ink);color:#D8D8DA;padding:56px var(--pad) 40px;font-size:16px}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:32px 56px;align-items:flex-start}
.site-footer img{width:150px;height:auto}
.foot-col{flex:1 1 200px}
.foot-col h2{font-family:inherit;font-size:16px;font-weight:700;color:#fff;margin-bottom:10px;text-transform:none}
.foot-col ul{list-style:none;padding:0}
.foot-col li{margin-bottom:6px}
.foot-col a{text-decoration:none}
.foot-col a:hover{text-decoration:underline}
.legal{max-width:var(--max);margin:36px auto 0;padding-top:20px;border-top:1px solid #4A4849;font-size:14px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

/* Mobile call bar */
.callbar{display:none}

/* Service pages */
.svc-hero{position:relative;overflow:clip;background:var(--ink);color:#fff;display:flex;flex-wrap:wrap;align-items:stretch}
.svc-hero .hero-copy{padding:56px var(--pad) 96px;gap:24px}
.svc-hero h1{font-size:clamp(48px,6.6vw,104px);line-height:1}
.svc-hero .hero-art{min-height:520px}
.svc-hero .slab{filter:drop-shadow(-26px 30px 36px rgba(0,0,0,.6))}
.crumbs{font-size:15px;color:#D8D8DA}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li+li::before{content:"/";margin-right:8px;color:#8F8F92}
.bar3{display:flex;gap:8px}
.bar3 i{display:block;width:44px;height:10px;transform:skewX(-10deg)}
.detail{padding:104px var(--pad)}
.detail .wrap{display:flex;flex-wrap:wrap;gap:56px 72px}
.detail .col{flex:1 1 420px}
.detail h2{font-size:clamp(36px,3.8vw,56px);margin-bottom:28px}
.ticks{list-style:none;padding:0}
.ticks li{position:relative;padding:16px 0 16px 44px;border-top:2px solid var(--ink);font-size:19px}
.ticks li::before{content:"";position:absolute;left:4px;top:22px;width:20px;height:14px;transform:skewX(-10deg);background:var(--mark,var(--yellow))}
.ticks li:nth-child(3n+2){--mark:var(--red)}
.ticks li:nth-child(3n){--mark:var(--blue)}
.cta-band{background:var(--yellow);padding:80px var(--pad)}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:28px 56px;align-items:center;justify-content:space-between}
.cta-band p{max-width:520px;margin-top:12px}
.faq{background:var(--floor);padding:104px var(--pad)}
.faq .wrap{max-width:920px}
.faq h2{margin-bottom:36px}
.faq details{background:#fff;border-radius:14px;margin-bottom:14px;box-shadow:0 10px 24px rgba(0,0,0,.08)}
.faq summary{cursor:pointer;list-style:none;padding:22px 64px 22px 26px;font-size:20px;font-weight:700;position:relative;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:26px;top:12px;font-family:"Anton",Impact,sans-serif;font-size:36px;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 26px 24px;max-width:70ch}
.related{background:var(--ink);color:#fff;padding:104px var(--pad)}
.related h2{margin-bottom:40px}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.rel{border-radius:22px;padding:32px;min-height:220px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;text-decoration:none;transition:transform .2s ease;box-shadow:0 20px 40px rgba(0,0,0,.35)}
.rel:hover{transform:translateY(-6px) rotate(-1deg)}
.rel b{font-family:"Anton",Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:40px;line-height:1.05}
.rel span{font-size:16px}
.prose{padding:88px var(--pad)}
.prose .wrap{max-width:760px}
.prose h1{font-size:clamp(44px,6vw,84px);margin-bottom:28px}
.prose h2{font-family:inherit;text-transform:none;font-size:24px;font-weight:700;margin:36px 0 10px}
.prose p{margin-bottom:14px}
.todo{border:2px dashed currentColor;padding:14px 16px;font-size:17px}

/* Small screens */
@media (max-width:760px){
  :root{--pad:22px}
  .site-header{padding:10px var(--pad) 13px;gap:8px 16px}
  .site-header .logo img{height:38px}
  .site-header .status{display:none}
  .nav{order:3;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;gap:22px;font-size:16px;padding:6px 0 2px;scrollbar-width:none;white-space:nowrap}
  .nav::-webkit-scrollbar{display:none}
  .hero-copy{padding:48px var(--pad) 56px}
  .hero-art{min-height:440px;flex-basis:100%}
  .svc-hero .hero-art{min-height:340px}
  .svc-hero .hero-copy{padding:36px var(--pad) 48px}
  .slab-layer{left:40px}
  .patch{width:112px;height:112px}
  .patch-layer{bottom:100px}
  .card-layer{right:16px;top:28px}
  .motband{padding:130px var(--pad) 64px}
  .motband--plain{padding-top:64px}
  .panel{padding:30px}
  .finder,.deck,.find,.detail,.faq,.related{padding-top:72px;padding-bottom:72px}
  .card{padding:30px 24px;min-height:0;border-radius:22px}
  .classes-head{padding-top:72px}
  .class{padding:40px var(--pad)}
  .hours{transform:none}
  .mot-out .panel{transform:none}
  .postcode{text-shadow:5px 5px 0 #fff}
  body{padding-bottom:68px}
  .callbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--ink);padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -8px 24px rgba(0,0,0,.3)}
  .callbar a{flex:1;text-align:center;border-radius:8px;padding:13px 8px;font-weight:700;font-size:17px;text-decoration:none;min-height:44px}
  .callbar .call{background:var(--yellow);color:var(--ink)}
  .callbar .dir{background:#fff;color:var(--ink)}
}

/* Motion */
@media (prefers-reduced-motion:no-preference){
  .ln>span{animation:rise .9s cubic-bezier(.2,.8,.2,1) backwards}
  .ln:nth-child(2)>span{animation-delay:.1s}.ln:nth-child(3)>span{animation-delay:.2s}.ln:nth-child(4)>span{animation-delay:.3s}
  @keyframes rise{from{transform:translateY(105%)}}
  .stripe{transform-origin:50% 100%;animation:grow .8s cubic-bezier(.2,.8,.2,1) backwards}
  .s-y{animation-delay:.1s}.s-r{animation-delay:.2s}.s-b{animation-delay:.3s}
  @keyframes grow{from{transform:scaleY(0)}}
  .wipe{animation:wipe 1.1s cubic-bezier(.2,.8,.2,1) .45s backwards}
  @keyframes wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  .patch{animation:patch .6s cubic-bezier(.2,1.4,.4,1) 1.2s backwards}
  @keyframes patch{from{opacity:0;transform:rotate(-30deg) scale(.5)}}
  .float-card{animation:bob 6s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(-10px) rotate(1deg)}}
  .layer{transition:transform .3s ease-out}
  .track{animation:tick 46s linear infinite}
  .ribbon--b .track{animation-direction:reverse}
  @keyframes tick{to{transform:translateX(-50%)}}
  .pop{animation:pop .45s cubic-bezier(.2,.8,.2,1)}
  @keyframes pop{from{opacity:0;transform:translateY(18px) rotate(-1.5deg)}}

  @supports (animation-timeline:view()){
    .prog{animation:prog linear both;animation-timeline:scroll(root)}
    @keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
    .hd{animation:hd linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    @keyframes hd{from{clip-path:inset(0 100% 0 0);transform:translateX(-48px)}to{clip-path:inset(0 0 0 0);transform:none}}
    .par{animation:par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes par{from{transform:translateY(var(--from,60px))}to{transform:translateY(var(--to,-60px))}}
    .wipe img{animation:hout linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    @keyframes hout{from{transform:skewX(10deg) translateY(0) scale(1)}to{transform:skewX(10deg) translateY(110px) scale(1.1)}}
    .zoom{animation:zoom linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
    @keyframes zoom{from{clip-path:inset(16% 14% round 28px)}to{clip-path:inset(0 0 round 0px)}}
    .zoom img{animation:zimg linear both;animation-timeline:view();animation-range:entry 0% cover 70%}
    @keyframes zimg{from{transform:scale(1.4)}to{transform:scale(1)}}
    .postcode{animation:slide linear both;animation-timeline:view()}
    @keyframes slide{from{transform:translateX(14%)}to{transform:translateX(-5%)}}
  }
}
@media (max-width:760px){.par{animation:none!important}}