/* Pear Tree Garage website, "Workshop" design (v2). Built by Vacom Computing.
   The look borrows from a real British garage and the road outside it:
   number-plate buttons, double-yellow-line underlines, a job-card booking form,
   road-sign area links, tax-disc badges and photos taped to the board.
   The earlier "Orchard" design is kept in design-archive/. */
/* The two fonts are hosted here, not loaded from Google, so no visitor data goes to Google when a page opens.
   Both are from Google Fonts under the SIL Open Font License (free to self-host). Latin characters only, which
   covers everything on the site, including the pound sign. A new version of a font needs a new file name,
   because /assets/ files are cached for a year. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;
  src:url(../fonts/archivo-v25-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/caveat-v23-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  --green:#173A2A; --green-2:#0E2419; --leaf:#2A6E45; --sign:#00703C;
  /* the gold is sampled from the pears in the logo */
  --yellow:#E4B44A; --yellow-2:#B38627; --paper:#F0EBDC; --paper-2:#E3DBC7; --white:#FBF8EF;
  --ink:#111611; --muted:#4A534A; --red:#B93A24; --blue:#1D4FA3;
  /* where the gold is used as paint rather than as an accent */
  --slab:var(--green); --slab-ink:#fff; --slab-soft:#DCE5D8; --slab-accent:var(--yellow);
  --slab-hatch:rgba(255,255,255,.07); --slab-edge:#060F0A;
  --hl:var(--paper-2); --pop:var(--yellow); --num:var(--yellow); --hazard:var(--yellow);
  --tape:var(--yellow); --tape-ink:var(--ink); --tape-dot:var(--ink); --sticky:rgba(228,180,74,.9);
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --hand:"Caveat","Segoe Script","Comic Sans MS",cursive;
  /* one corner radius, one pair of easing curves, one shadow tint (dark green, never plain black) */
  --r:6px; --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --shade:rgba(8,24,16,.3); --deep:#060F0A;
}
/* These are the "Calmer" colours, chosen 7 Oct 2026. The two options that weren't chosen are in
   design-archive/colour-options-not-chosen.css. */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
html:has(a[href^="#"]:focus-visible){scroll-behavior:auto}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* Phones: no wait after a tap, and holding a finger on a control doesn't select its label */
a,button,summary,label,select{touch-action:manipulation}
button,.btn,.menu-btn,.chip span,nav.main a,.mnav a{-webkit-user-select:none;user-select:none}
p a,.prose a,li a,.small a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--yellow-2)}
.wrap{max-width:1240px;margin:0 auto;padding:0 max(40px,env(safe-area-inset-right)) 0 max(40px,env(safe-area-inset-left))}
.wrap.narrow{max-width:940px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:var(--r)}
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--ink);padding:12px 18px;z-index:100;font-weight:800}
.skip:focus{left:0}

/* ---------- Type ---------- */
h1,h2,.fs legend,.wordmark{font-family:var(--display);font-stretch:66%;font-weight:900;text-transform:uppercase;line-height:.93;letter-spacing:.002em}
h1{font-size:clamp(46px,7.3vw,104px)}
h2{font-size:clamp(36px,4.5vw,60px)}
h3{font-size:20px;line-height:1.25;font-weight:800}
h1,h2,h3,legend{text-wrap:balance}
p,li,small{text-wrap:pretty}
h1 em,h2 em{font-style:normal;background:linear-gradient(transparent 60%,var(--yellow) 60%,var(--yellow) 94%,transparent 94%)}
.h-md{font-size:clamp(30px,3.2vw,42px);margin-top:8px}
.h-lg{font-size:clamp(40px,5vw,64px);margin:14px 0 12px}
.lead{font-size:19px;color:var(--muted);max-width:600px}
.lead.wide{max-width:72ch;margin-top:14px}
.lead.gap{margin:10px 0 24px;max-width:none}
.lead.center{margin:10px auto 0}
.small{font-size:14.5px;color:var(--muted);margin:12px 0}
.center{text-align:center}
.gapt{margin-top:18px}.gapt2{margin-top:36px}.gapb{margin-bottom:28px}.mb{margin-bottom:12px}
.rel{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--display);font-stretch:92%;font-weight:800;font-size:14px;letter-spacing:.17em;text-transform:uppercase;color:var(--leaf);line-height:1.4}
.eyebrow:before{content:"";width:26px;height:9px;border-top:3px solid var(--yellow-2);border-bottom:3px solid var(--yellow-2);flex:none}
.eyebrow + h2{margin-top:14px}
h1 .eyebrow{display:flex;margin-bottom:18px;font-size:15px}
/* double yellow lines under section headings */
.sec-head h2:after,.split h2:after,.band h2:after,.svc-main > h2:after,.prose > h2:after,.dbl:after{content:"";display:block;width:96px;height:12px;margin-top:16px;border-top:4px solid var(--yellow);border-bottom:4px solid var(--yellow)}

/* ---------- Preview notices ---------- */
.draftbar{background:#22262B;color:#E6E8EA;font-size:13px;font-weight:600;padding:7px 16px;display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;align-items:center;text-align:center}
.draftbar a{text-decoration:underline;margin-left:6px;font-weight:800}
.tbc{text-decoration:underline dotted #E0782B 2.5px;text-underline-offset:4px;cursor:help}
.tbc-note{display:block;background:#FFF1E4;color:#8A3F0B;border:2px dashed #E0A06A;font-size:13.5px;font-weight:700;padding:6px 12px;border-radius:var(--r);margin:0 0 14px;text-transform:none;letter-spacing:0;font-family:var(--sans);font-stretch:100%;line-height:1.4}

/* ---------- Top bar and header ---------- */
.topbar{background:var(--ink);color:#E9E6D8;font-size:13.5px;font-variant-numeric:tabular-nums}
.topbar .wrap{display:flex;flex-wrap:wrap;align-content:flex-start;height:38px;overflow:hidden;column-gap:28px;max-width:1340px}
.topbar .wrap > span{flex:none;white-space:nowrap;line-height:38px}
.topbar .open{display:inline-flex;align-items:center;gap:8px}
.topbar svg.i{width:15px;height:15px;color:var(--yellow)}
.topbar .push{margin-left:auto}
.topbar a{text-decoration:underline;text-underline-offset:3px}
header.site{background:var(--paper);border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:40}
header.site .wrap{display:flex;align-items:center;height:76px;gap:26px;max-width:1340px}
.brand{display:flex;align-items:center;gap:13px}
.brand img{width:52px;height:52px}
.brand b{display:block;font-family:var(--display);font-stretch:62%;font-weight:900;font-size:30px;line-height:.86;text-transform:uppercase;white-space:nowrap}
.brand small{display:block;white-space:nowrap;font-size:10px;letter-spacing:.2em;color:var(--leaf);font-weight:800;margin-top:5px}
nav.main{display:flex;gap:22px;margin-left:auto;white-space:nowrap}
nav.main a{font-family:var(--display);font-stretch:84%;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:15.5px;padding:10px 0;position:relative}
nav.main a.on:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:8px;border-top:2.5px solid var(--yellow-2);border-bottom:2.5px solid var(--yellow-2)}
.head-cta{display:flex;align-items:center;gap:18px}
.phone{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-stretch:74%;font-weight:900;font-size:25px;white-space:nowrap;line-height:1;font-variant-numeric:tabular-nums}
.menu-btn{display:none;width:48px;height:48px;border-radius:var(--r);border:2.5px solid var(--ink);background:var(--white);color:var(--ink);align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
.mnav{display:none}
/* the fold-away menu (the button that opens it only shows when the links don't fit) */
.mnav.on{display:block;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:3px solid var(--ink);box-shadow:0 20px 30px rgba(8,24,16,.2);padding:6px max(20px,env(safe-area-inset-right)) 22px max(20px,env(safe-area-inset-left))}
.mnav a{display:block;padding:14px 4px 12px;border-bottom:2px solid var(--ink);font-family:var(--display);font-stretch:72%;font-weight:900;text-transform:uppercase;font-size:27px;line-height:1}
.mnav .btn{margin-top:18px;width:100%;border:2.5px solid var(--ink);font-size:18px;padding:15px 22px 14px}

/* ---------- Buttons are number plates ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-stretch:80%;font-weight:800;font-size:18px;letter-spacing:.035em;text-transform:uppercase;line-height:1;padding:15px 22px 14px;border-radius:var(--r);border:2.5px solid var(--ink);background:var(--yellow);color:var(--ink);cursor:pointer;white-space:nowrap;
  /* --d is how far the plate stands off the page, --edge the colour of its side. Hover and press are in "Hover and press" below. */
  --d:4px;--edge:var(--ink);box-shadow:0 var(--d) 0 var(--edge);transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out)}
.btn-line,.btn-white{background:var(--white)}
.btn-ghost{background:transparent;color:#fff;border-color:#fff;--edge:rgba(255,255,255,.3)}
.btn-sm{font-size:15px;padding:11px 16px 10px;--d:3px}
.btn-block{width:100%}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin:30px 0 0}
.band .actions,.panel .actions,.cta .actions{margin:0}

/* ---------- Sections ---------- */
section{scroll-margin-top:92px}
.section{padding:92px 0}
.section.tight{padding:64px 0}
.bg-white{background:var(--white);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.sec-head{margin-bottom:38px}
.sec-head p{max-width:62ch;color:var(--muted);font-size:17.5px;margin-top:18px;text-wrap:balance}
.sec-head.with-link{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.sec-head p a{font-weight:700}

/* ---------- Photos: prints taped to the board ---------- */
.photo{position:relative;min-height:260px;background-color:#2B5A3F;background-image:radial-gradient(rgba(255,255,255,.17) 1.6px,transparent 1.8px);background-size:11px 11px;border:8px solid var(--white);box-shadow:0 12px 26px var(--shade)}
.photo.dark{background-color:#22392C}
.photo:before,.photo:after{content:"";position:absolute;top:-18px;width:96px;height:30px;background:var(--sticky);box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:2}
.photo:before{left:20px;transform:rotate(-7deg)}
.photo:after{right:20px;transform:rotate(5deg)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo .tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);background:var(--paper);color:var(--ink);font-family:var(--hand);font-size:25px;line-height:1.1;padding:10px 18px 8px;width:max-content;max-width:82%;text-align:center;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.card .photo,.vcard .photo{border:0;box-shadow:none;transform:none}
.card .photo:before,.card .photo:after,.vcard .photo:before,.vcard .photo:after{display:none}
/* the photo of the unit's sign in the "Finding us" box sits flat, like the drawn map it replaces */
.info .photo{height:210px;min-height:0;border:2px solid var(--ink);border-radius:var(--r);box-shadow:none;overflow:hidden}
.info .photo:before,.info .photo:after{display:none}
/* three prints pinned up side by side: different sizes and angles, the middle one lower */
.prints{display:grid;grid-template-columns:1.2fr .85fr 1fr;gap:38px;align-items:start}
.prints .photo{min-height:0}
.prints .photo:nth-child(1){height:330px;rotate:-1.6deg}
.prints .photo:nth-child(2){height:270px;rotate:1.8deg;margin-top:54px}
.prints .photo:nth-child(3){height:300px;rotate:-.8deg;margin-top:14px}
.prints-wrap{padding-top:0}

/* ---------- Home hero ---------- */
/* The headline runs the full width, like the sign over the workshop door. Under it sit the photo,
   with the tax discs stuck to its corner, and the job card. */
.hero{background:var(--green);color:var(--paper);padding:30px 0 0;position:relative;overflow:hidden}
.hero:after,.page-hero:after{content:"";position:absolute;left:0;right:0;bottom:26px;height:6px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 48px,transparent 48px 96px)}
.hero .wrap{padding-bottom:112px;position:relative;z-index:1}
.hero h1{color:#fff;font-size:clamp(40px,min(8.4vw,16.5vh),112px)}
.hero h1 .eyebrow{margin-bottom:14px}
.hero h1 em{display:block}
.hero h1 em,.page-hero h1 em,.band h2 em{background:none;color:var(--yellow)}
.hero .eyebrow,.page-hero .eyebrow,.band .eyebrow{color:var(--yellow)}
.hero .eyebrow:before,.page-hero .eyebrow:before,.band .eyebrow:before{border-color:var(--yellow)}
.hero .lead,.page-hero .lead{color:#DCE5D8;margin-top:22px}
.hero .lead{font-size:20px;max-width:none;margin-top:16px}
.hero .btn,.page-hero .btn,.band .btn:not(.btn-ghost){--edge:var(--deep)}
.hero-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:start;margin-top:28px}
.hero-media{position:relative;padding-bottom:58px}
.hero-media .photo{height:370px;min-height:0;rotate:-1.4deg}
.hero-media .photo .tag{left:40%;top:36%}
.discs{position:absolute;left:30px;bottom:0;display:flex;gap:20px;z-index:2}
.disc{width:126px;height:126px;border-radius:50%;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1;outline:3px dotted rgba(243,238,223,.85);outline-offset:4px;box-shadow:0 6px 14px var(--shade)}
.disc b{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:28px;text-transform:uppercase}
.disc span{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;max-width:92px;margin-top:5px;line-height:1.25}
.disc:nth-child(1){rotate:-7deg}
.disc:nth-child(2){rotate:4deg;background:var(--pop);outline-color:var(--pop)}
.disc:nth-child(3){rotate:-3deg}
.hero-card{position:relative;margin:52px 0 0 -56px;z-index:3}
.hero-card .book-card{rotate:1.6deg}
.scribble{position:absolute;right:6px;top:-70px;font-family:var(--hand);font-size:30px;line-height:1;color:var(--yellow);rotate:5deg;z-index:3;white-space:nowrap}
.scribble svg{display:block;width:54px;height:44px;margin:4px 0 0 34px;fill:none;stroke:var(--yellow);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transform:scaleX(-1)}

/* ---------- Job card (booking) ---------- */
.book-card{background:var(--white);color:var(--ink);border:2.5px solid var(--ink);border-radius:var(--r);padding:0 22px 20px;box-shadow:8px 8px 0 var(--deep);position:relative;z-index:2}
.book-card h3{font-family:var(--display);font-stretch:70%;font-weight:900;text-transform:uppercase;font-size:27px;line-height:1;margin:0 -22px 16px;padding:13px 22px 12px;background:var(--pop);border-bottom:2.5px dashed var(--ink);border-radius:3px 3px 0 0}
.book-card h3:before{content:"Job card";display:block;font-stretch:100%;font-size:10.5px;letter-spacing:.24em;font-weight:800;margin-bottom:5px}
.book-card p.s{font-size:14px;color:var(--muted);margin:0 0 12px}
.book-card label.f{font-size:13.5px;margin-bottom:5px}
.book-card .note{font-size:13.5px;color:var(--muted);text-align:center;margin-top:14px}
.side .book-card{box-shadow:6px 6px 0 var(--ink)}
.plate{display:flex;border-radius:var(--r);overflow:hidden;border:2.5px solid var(--ink);height:58px;margin-bottom:12px;background:var(--yellow)}
.plate .gb{width:36px;background:var(--blue);color:#fff;font-size:10px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:6px;flex:none}
.plate .gb i{width:14px;height:14px;border-radius:50%;border:2px dotted #FFD83D;display:block;margin-bottom:auto;margin-top:8px}
.plate input{flex:1;width:0;min-width:0;border:0;background:transparent;text-align:center;font-family:var(--display);font-stretch:78%;font-weight:900;font-size:31px;line-height:1;letter-spacing:.09em;color:var(--ink);text-transform:uppercase}
.plate input::placeholder{color:rgba(17,22,17,.6)}
.plate input:focus{outline:none}
.plate:focus-within{box-shadow:0 0 0 4px var(--blue)}
.plate.big{height:72px}.plate.big input{font-size:40px}

/* ---------- Forms ---------- */
label.f{display:block;font-size:14.5px;font-weight:700;margin-bottom:6px}
.input,select.input,textarea.input{width:100%;border:2px solid var(--ink);border-radius:var(--r);padding:12px 14px;font:500 16px/1.4 var(--sans);color:var(--ink);background:#fff}
textarea.input{min-height:110px;resize:vertical}
.input:focus{outline:none;box-shadow:0 0 0 4px var(--yellow)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fgrid .full{grid-column:1/-1}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.check input{margin-top:3px;width:20px;height:20px;accent-color:var(--green);flex:none}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;gap:8px;border:2px solid var(--ink);background:#fff;border-radius:var(--r);padding:10px 14px;font-weight:700;font-size:15px;cursor:pointer}
.chip span svg{width:18px;height:18px}
.chip input:checked + span{background:var(--yellow);box-shadow:0 3px 0 var(--ink)}
.chip input:focus-visible + span{outline:3px solid var(--blue);outline-offset:2px}
.form-msg{display:none;margin-top:16px;font-weight:700;font-size:15px;padding:12px 16px;border-radius:var(--r);border:2px solid var(--ink)}
.form-msg.on{display:block}
.form-msg.ok{background:#DDEFD9}
.form-msg.bad{background:#FBE0DA}
.err{color:var(--red);font-size:14.5px;font-weight:800;margin-top:10px;display:none}
.err.on{display:block}

/* ---------- Yellow tape strip ---------- */
.tape-wrap{overflow:hidden;padding:16px 0;margin:-46px 0 -16px;position:relative;z-index:3}
.tape{background:var(--tape);color:var(--tape-ink);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(-1.2deg) scale(1.03);overflow:hidden}
.tape .run{display:flex;width:max-content;animation:run 46s linear infinite}
.tape span{font-family:var(--display);font-stretch:70%;font-weight:900;text-transform:uppercase;font-size:24px;letter-spacing:.05em;padding:10px 0 9px;white-space:nowrap;line-height:1}
.tape span:after{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--tape-dot);margin:0 26px;vertical-align:3px}
@keyframes run{to{transform:translateX(-50%)}}

/* ---------- Boards: services, guides ---------- */
.board{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:3px solid var(--ink)}
.board.one{grid-template-columns:1fr}
.row-svc{display:grid;grid-template-columns:1fr 30px;gap:16px;align-items:center;padding:20px 12px 18px 6px;border-bottom:2px solid var(--ink);transition:background-color .15s ease}
.row-svc > span:first-child,.row-svc .go{transition:transform .2s var(--ease-out)}
.row-svc b{display:block;font-family:var(--display);font-stretch:70%;font-weight:900;text-transform:uppercase;font-size:32px;line-height:1}
.row-svc small{display:block;color:var(--muted);font-size:15px;margin-top:6px;line-height:1.35}
.row-svc .go{font-size:26px;font-weight:900;line-height:1}
.more{font-family:var(--display);font-stretch:88%;font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
/* the guides: one as a manual cover, the rest as its contents page */
.shelf{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:stretch}
.manual{background:var(--green);color:#fff;border:2.5px solid var(--ink);border-radius:var(--r);padding:30px 30px 28px 50px;position:relative;display:flex;flex-direction:column;gap:14px;min-height:330px;box-shadow:8px 8px 0 var(--ink);rotate:-1.2deg;transition:rotate .25s var(--ease-out),translate .25s var(--ease-out),transform .12s var(--ease-out)}
.manual:before{content:"";position:absolute;left:0;top:0;bottom:0;width:18px;background:var(--yellow);border-right:2.5px solid var(--ink);border-radius:3px 0 0 3px}
.manual small{font-size:11px;letter-spacing:.2em;font-weight:800;color:var(--yellow);text-transform:uppercase}
.manual h3{font-family:var(--display);font-stretch:66%;font-weight:900;text-transform:uppercase;font-size:clamp(40px,4.6vw,62px);line-height:.93;color:#fff}
.manual p{color:#DCE5D8;font-size:17px;max-width:34ch}
.manual .more{margin-top:auto;color:var(--yellow)}

/* ---------- MOT reminder band ---------- */
.motband{background:var(--slab);color:var(--slab-ink);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:76px 0;position:relative;overflow:hidden}
.motband:before{content:"";position:absolute;left:0;top:0;bottom:0;width:120px;background:repeating-linear-gradient(45deg,transparent 0 17px,var(--slab-hatch) 17px 20px),repeating-linear-gradient(-45deg,transparent 0 17px,var(--slab-hatch) 17px 20px)}
.page-hero + .motband{--slab:var(--green-2)}
.motband .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative}
.motband h2{font-size:clamp(44px,6.2vw,88px)}
.motband .eyebrow{color:var(--slab-accent)}
.motband .eyebrow:before{border-color:var(--slab-accent)}
.motband p.lead{color:var(--slab-soft);font-weight:500;margin-top:18px;max-width:500px}
.motband .small{color:var(--slab-ink);font-weight:700;margin-top:16px}
.motband .small a{text-decoration-color:var(--slab-accent)}
.mot-form{background:var(--white);color:var(--ink);border:2.5px solid var(--ink);border-radius:var(--r);padding:24px;box-shadow:8px 8px 0 var(--slab-edge);transform:rotate(1deg)}
.mot-form .btn{margin-top:14px}
.mot-form .check{margin-top:12px}
.mot-result{display:none;background:var(--white);color:var(--ink);border:2.5px solid var(--ink);border-radius:var(--r);padding:26px;box-shadow:8px 8px 0 var(--slab-edge)}
.mot-result.on{display:block}
.mot-result .veh{font-family:var(--display);font-stretch:84%;font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:14px;color:var(--leaf)}
.mot-result .due{font-family:var(--display);font-stretch:66%;font-weight:900;text-transform:uppercase;font-size:clamp(34px,4vw,52px);line-height:.95;margin:8px 0 12px}
.mot-result p{color:var(--muted)}
.mot-result .actions{margin-top:18px}
.mot-result .stamp{margin:6px 0 2px}
.mot-page .mot-form{transform:none}

/* ---------- How it goes ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);counter-reset:s;border-top:3px solid var(--ink)}
.step{padding:30px 30px 6px 0;position:relative}
.step + .step{padding-left:30px;border-left:2px dashed var(--ink)}
.step:before{counter-increment:s;content:counter(s);display:block;font-family:var(--display);font-stretch:66%;font-weight:900;font-size:112px;line-height:.8;color:var(--num);-webkit-text-stroke:2.5px var(--ink);margin-bottom:16px}
.step h3{font-family:var(--display);font-stretch:72%;font-weight:900;text-transform:uppercase;font-size:28px;line-height:1;margin-bottom:8px}
.step p{color:var(--muted);font-size:16px}
.step .stamp{position:absolute;right:20px;top:36px}
.stamp{display:inline-block;font-family:var(--display);font-stretch:84%;font-weight:900;text-transform:uppercase;letter-spacing:.09em;font-size:15px;line-height:1.15;color:var(--red);border:3px double var(--red);border-radius:var(--r);padding:9px 13px 7px;rotate:-7deg;text-align:center;background:rgba(255,253,247,.7)}

/* ---------- Trade band ---------- */
.band{background:var(--green-2);color:var(--paper);padding:0 0 100px;position:relative}
.band:before{content:"";display:block;height:20px;background:repeating-linear-gradient(-45deg,var(--hazard) 0 22px,var(--ink) 22px 44px);margin-bottom:86px}
.band .wrap{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.band h2{color:#fff}
.band p{color:#CBD3C8;margin:20px 0 24px;font-size:18px}
.band ul{list-style:none;display:grid;gap:11px;margin-bottom:32px}
.band li{display:flex;gap:12px;align-items:center;font-weight:600}
.band li svg{color:var(--yellow)}
.band .photo{height:410px;transform:rotate(1.6deg)}
.small.light{color:#CBD3C8;margin-top:20px}
.quote{position:absolute;left:-30px;bottom:-36px;background:var(--pop);color:var(--ink);border:2.5px solid var(--ink);padding:14px 18px 12px;width:240px;rotate:-4deg;box-shadow:6px 6px 0 var(--deep);z-index:3}
.quote b{display:block;font-family:var(--display);font-stretch:66%;font-weight:900;font-size:66px;line-height:.84;text-transform:uppercase}
.band .quote p{color:var(--ink);font-size:14px;margin:8px 0 0;font-weight:600;line-height:1.35}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split .photo{height:450px;transform:rotate(-1.6deg)}
.split p{color:var(--muted);font-size:17.5px;margin:16px 0}
/* a photo is never repeated on a page, so a section can end up without one: it then runs as a single column */
.split:has(> :only-child),.band .wrap:has(> .rel:empty){grid-template-columns:minmax(0,760px)}
.band .rel:empty{display:none}

/* ---------- Cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-3.top{align-items:start}
.card{background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:10px;transition:transform .15s var(--ease-out),box-shadow .15s var(--ease-out)}
.card h3{font-family:var(--display);font-stretch:72%;font-weight:900;text-transform:uppercase;font-size:27px;line-height:1;margin-top:4px}
.card p{font-size:15.5px;color:var(--muted)}
.card .more{margin-top:auto;padding-top:8px}
/* advice guides look like workshop manuals */
.card.guide{padding:0;overflow:hidden}
.card.guide .cover{background:var(--green);color:#fff;padding:18px 22px 20px 34px;border-bottom:2.5px solid var(--ink);position:relative;min-height:150px}
.card.guide .cover:before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--yellow);border-right:2.5px solid var(--ink)}
.card.guide .cover small{font-size:11px;letter-spacing:.2em;font-weight:800;color:var(--yellow);text-transform:uppercase}
.card.guide .cover h3{color:#fff;font-size:31px;margin-top:10px}
.card.guide .body{padding:18px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
/* area cards carry a road sign */
.card.town .sign{align-self:flex-start}
.card.person{padding:0;overflow:hidden}
.card.person .photo{height:260px}
.card.person > div:last-child{padding:20px 24px}
.card.person h3{overflow-wrap:anywhere}
/* two people sit as a pair, not as two-thirds of a row of three */
.grid-3:has(> .person:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,380px))}

/* Lee's cars: prints pinned to the board, each its own size and angle, with a handwritten caption */
.carboard{columns:4 220px;column-gap:28px;margin-top:4px}
.carboard figure{break-inside:avoid;display:inline-block;width:100%;background:var(--white);padding:8px 8px 4px;margin:22px 0 12px;box-shadow:0 10px 22px var(--shade);position:relative}
.carboard figure:nth-child(4n+1){rotate:-1.4deg}
.carboard figure:nth-child(4n+2){rotate:1.1deg}
.carboard figure:nth-child(4n+3){rotate:-.6deg}
.carboard figure:nth-child(4n){rotate:1.7deg}
.carboard figure:before{content:"";position:absolute;top:-12px;left:50%;width:76px;height:24px;margin-left:-38px;background:var(--sticky);rotate:-3deg;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.carboard img{width:100%;height:auto;display:block}
.carboard figcaption{font-family:var(--hand);font-size:23px;line-height:1.1;text-align:center;padding:8px 4px 2px;color:var(--ink)}

/* ---------- Road signs ---------- */
.areas{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.sign,.areas a,.areas span{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-stretch:88%;font-weight:700;font-size:18px;line-height:1;padding:11px 15px 10px;border-radius:var(--r);white-space:nowrap}
.sign,.areas a{background:var(--sign);color:#fff;box-shadow:inset 0 0 0 2.5px #fff,0 0 0 2.5px var(--sign)}
.sign i,.areas a i{font-style:normal;color:#FFD200;font-weight:800}
.areas span,.sign.local{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--ink)}
.sign,.areas a{transition:transform .15s var(--ease-out)}
.areas a:after{content:"→";font-weight:900}

/* ---------- CTA ---------- */
.cta{background:var(--slab);color:var(--slab-ink);border:3px solid var(--ink);border-radius:var(--r);padding:44px 48px;display:flex;justify-content:space-between;align-items:center;gap:30px;position:relative;overflow:hidden;box-shadow:8px 8px 0 var(--ink)}
.cta:after{content:"";position:absolute;right:0;top:0;bottom:0;width:130px;background:repeating-linear-gradient(45deg,transparent 0 17px,var(--slab-hatch) 17px 20px),repeating-linear-gradient(-45deg,transparent 0 17px,var(--slab-hatch) 17px 20px)}
.cta > *{position:relative;z-index:1}
.cta h2{font-size:clamp(34px,4.2vw,56px)}
.cta p{margin-top:10px;font-weight:500;color:var(--slab-soft)}
.cta .btn{--edge:var(--slab-edge)}

/* ---------- Inner page hero ---------- */
.page-hero{background:var(--green);color:var(--paper);padding:24px 0 84px;position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:1}
.page-hero .cols{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center}
.page-hero h1{color:#fff;font-size:clamp(36px,4.6vw,64px);margin-top:6px}
.page-hero .photo{height:310px;transform:rotate(2deg)}
.crumbs{font-size:13.5px;color:#B9C6B6;display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.crumbs a{text-decoration:underline;text-underline-offset:3px;color:#E5ECE2}

/* ---------- Service, area and guide pages ---------- */
.svc{display:grid;grid-template-columns:1fr 372px;gap:60px;align-items:start}
.svc-main h2{font-size:clamp(30px,3.4vw,42px);margin:48px 0 18px}
.svc-main > h2:first-child,.svc-main > .meta + h2{margin-top:0}
.svc-main > p{color:#333B33;font-size:17.5px;margin-bottom:14px;max-width:68ch}
.ticklist{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:13px 24px;margin:8px 0}
.ticklist li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.ticklist .c,.done .big{background:var(--yellow);border:2px solid var(--ink);display:grid;place-items:center;flex:none}
.ticklist .c{width:25px;height:25px;border-radius:var(--r);margin-top:1px}
.ticklist .c svg{width:15px;height:15px;stroke-width:3}
.ticklist.warn .c{background:var(--white);color:var(--red);border-color:var(--red);border-radius:50%}
/* questions and answers, shown in full: the question on the left, the answer beside it */
.qa{border-top:3px solid var(--ink)}
.qa > div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:8px 32px;padding:20px 0;border-bottom:2px solid var(--paper-2)}
.qa h3{font-size:18px;line-height:1.3}
.qa > div > p{color:#333B33;margin:0;font-size:16.5px}
.side{position:sticky;top:100px;display:grid;gap:26px}
.info{background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r);padding:20px}
/* beside a page, only the job card is a card: the rest are plain ruled blocks so the card stands out */
.side .info{background:none;border:0;border-top:3px solid var(--ink);border-radius:0;padding:18px 0 0}
.info h2,.label{display:inline-block;font-family:var(--display);font-stretch:92%;font-weight:800;font-size:12.5px;letter-spacing:.18em;line-height:1.3;background:var(--yellow);padding:5px 9px 3px;margin-bottom:12px}
.info ul{list-style:none;display:grid}
.info li a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:2px solid var(--paper-2);font-weight:700;text-decoration:none}
.info li:last-child a{border-bottom:0;padding-bottom:2px}
.info .row{display:flex;gap:12px;align-items:flex-start;padding:7px 0;font-size:16px}
.info .row svg{margin-top:3px}
.hours{width:100%;border-collapse:collapse;font-size:15.5px;font-variant-numeric:tabular-nums}
.hours td{padding:8px 0;border-bottom:2px solid var(--paper-2)}
.hours td:last-child{text-align:right;font-weight:800}
.article{max-width:820px}
.article .meta{font-size:14px;color:var(--muted);margin-bottom:24px;font-weight:600}
.article p{color:#333B33;font-size:17.5px;margin-bottom:14px;max-width:68ch}
.article ol,.article ul:not(.ticklist){padding-left:24px;margin:0 0 16px}
.article li{color:#333B33;font-size:17.5px;margin-bottom:10px;max-width:66ch}
.article li b{color:var(--ink)}
.why{display:grid;margin:8px 0}
.why{border-top:3px solid var(--ink);gap:0}
.why > div{padding:18px 0;border-bottom:2px solid var(--paper-2)}
.why h3{margin-bottom:4px}
.why p{margin:0;font-size:16px}

.terms{display:grid;grid-template-columns:1fr 1fr;column-gap:56px;border-top:3px solid var(--ink)}
.terms > div{padding:22px 0 24px;border-bottom:2px solid var(--ink)}
.terms h3{font-family:var(--display);font-stretch:72%;font-weight:900;text-transform:uppercase;font-size:28px;line-height:1;margin-bottom:8px}
.terms p{color:var(--muted);font-size:16.5px;max-width:46ch}

/* contact page: the phone number is the biggest thing on it, and the map is the only card */
.contact-page{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:70px;align-items:start}
.contact-page > div:first-child{container-type:inline-size}
.bigphone{display:inline-block;font-family:var(--display);font-stretch:66%;font-weight:900;font-size:clamp(44px,7vw,104px);font-size:min(104px,16.5cqi);line-height:.9;white-space:nowrap;font-variant-numeric:tabular-nums;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:.08em;text-underline-offset:.12em}
.contact-page .rows{display:grid;gap:10px;margin:30px 0 40px;font-size:18px}
.contact-page .row{display:flex;gap:12px;align-items:flex-start}
.contact-page .row svg{margin-top:4px}
.contact-page .hours{max-width:460px;font-size:17px}

/* ---------- Booking page ---------- */
.book-layout{display:grid;grid-template-columns:1fr 380px;gap:52px;align-items:start}
.panel{background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r);padding:34px}
.panel.row{display:flex;gap:30px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.panel.row .lead{margin-top:8px}
.stepper{display:none;gap:8px;margin-bottom:26px}
.js .stepper{display:flex}
.stepper span{flex:1;height:10px;border-radius:2px;background:var(--paper-2);border:2px solid var(--ink);position:relative;overflow:hidden}
.stepper span:after{content:"";position:absolute;inset:0;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%}
.stepper span.on:after{transform:none}
.fs{border:0;margin:0 0 34px;padding:0;min-width:0}
.js .fs{display:none;margin:0}
.js .fs.on{display:block}
.fs legend{font-size:clamp(32px,3.6vw,44px);margin-bottom:8px}
.fs .hint{display:block;color:var(--muted);margin-bottom:20px}
[data-next],[data-back]{display:none}
.js [data-next],.js [data-back]{display:inline-flex}
.nav-row{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.done{display:none;text-align:center;padding:30px 10px}
.done.on{display:block}
.done .big{width:84px;height:84px;border-radius:50%;margin:0 auto 20px;border-width:2.5px}
.done .big svg{width:42px;height:42px;stroke-width:3}
.preview-only{display:none;margin-top:18px}
.local .preview-only{display:block}
.map{height:210px;border-radius:var(--r);border:2px solid var(--ink);background:repeating-linear-gradient(0deg,#DDD5BF 0 1px,transparent 1px 34px),repeating-linear-gradient(90deg,#DDD5BF 0 1px,transparent 1px 34px),var(--paper);position:relative;overflow:hidden}
.map:before{content:"";position:absolute;left:-10%;right:-10%;top:50%;height:18px;background:#fff;transform:rotate(-8deg);box-shadow:0 0 0 2px var(--ink)}
.map:after{content:"";position:absolute;left:34%;top:-10%;bottom:-10%;width:13px;background:#fff;transform:rotate(12deg);box-shadow:0 0 0 2px var(--ink)}
.pin{position:absolute;left:50%;top:26%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:5px}
.pin b{background:var(--sign);color:#fff;font-family:var(--display);font-stretch:88%;font-size:13px;padding:6px 10px 5px;border-radius:var(--r);white-space:nowrap;box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--sign)}
.pin i{width:16px;height:16px;border-radius:50%;background:var(--yellow);border:3px solid var(--ink)}

/* ---------- Reviews, vehicles, tables, prose ---------- */
.rgrid{columns:3;column-gap:22px}
.rcard{background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r);padding:24px;break-inside:avoid;margin-bottom:22px}
/* the home page shows up to three, side by side, each cut short after six lines (the link beside the heading has them in full) */
.rgrid.top3{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.rgrid.top3 .rcard{margin:0}
.rgrid.top3 .rcard p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;line-clamp:6;overflow:hidden}
.rgrid.top3:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
.rgrid.top3:has(> :only-child){grid-template-columns:minmax(0,620px)}
.stars{color:var(--yellow-2);letter-spacing:2px;font-size:20px}
.rcard p{color:#333B33;margin:10px 0 16px;overflow-wrap:anywhere}
.rcard > p:first-child{margin-top:0}
.rcard .who{display:flex;gap:10px;align-items:center;font-weight:800;font-size:15px}
.rcard .who i{width:30px;height:30px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);display:block;flex:none}
.rcard .who span{min-width:0;overflow-wrap:anywhere}
.gbadge{display:inline-flex;gap:10px;align-items:center;background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r);padding:10px 16px;font-weight:800;font-size:14.5px}
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.vcard{background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:1fr 1fr}
.vcard .photo{min-height:100%}
.vcard.no-photo{grid-template-columns:1fr}
.vcard .body{padding:24px;min-width:0}
.vcard h3{overflow-wrap:anywhere}
.vcard .badge{margin-bottom:10px}
.vcard .price{font-family:var(--display);font-stretch:66%;font-weight:900;font-size:44px;line-height:1;margin:6px 0 14px;font-variant-numeric:tabular-nums}
.vcard .price.long{font-size:28px;line-height:1.05}
.vcard .price small{display:block;font-family:var(--sans);font-stretch:100%;font-weight:600;font-size:14.5px;line-height:1.35;color:var(--muted);margin-top:7px}
.vcard.sold h3,.vcard.sold .price,.vcard.sold dl{opacity:.55}
.vcard dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px;margin-bottom:18px}
.vcard dt{color:var(--muted)}.vcard dd{font-weight:700}
.badge{display:inline-block;background:var(--red);color:#fff;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r)}
.olist{width:100%;border-collapse:collapse;margin:10px 0 28px;background:var(--white);border:2.5px solid var(--ink);font-variant-numeric:tabular-nums}
.olist th,.olist td{text-align:left;padding:12px 16px;border-bottom:2px solid var(--paper-2);vertical-align:top;font-size:15.5px}
.olist th{font-family:var(--display);font-stretch:92%;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;background:var(--hl);border-bottom:2.5px solid var(--ink)}
.olist td{overflow-wrap:break-word}
.olist:not(.prices) td{overflow-wrap:anywhere}
.olist tr:last-child td{border-bottom:0}
.olist .note{display:block;font-size:14.5px;color:var(--muted);margin-top:4px;max-width:60ch}
.olist td:last-child{color:var(--muted);width:34%}
.olist.prices td:last-child{width:28%;text-align:right;font-weight:800;color:var(--ink);font-size:18px}
.olist.prices th:last-child{text-align:right}
.prose{max-width:800px}
.prose.wide{max-width:980px}
.prose h2{font-size:clamp(28px,3vw,38px);margin:42px 0 14px}
.prose p,.prose li{color:#333B33;margin-bottom:12px;max-width:68ch}
.prose ul{padding-left:24px;margin-bottom:14px}
.prose-list{list-style:none;display:grid;gap:10px;font-weight:800}

/* ---------- Footer ---------- */
footer.site{background:#0C150F;color:#C5CEC1;overflow:hidden}
.wordmark{font-size:clamp(44px,11.6vw,184px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px #3E6049;white-space:nowrap;text-align:center;padding:46px 0 0;user-select:none;letter-spacing:.005em}
footer.site .wrap{padding-top:54px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
footer.site h2{font-family:var(--display);font-stretch:92%;font-weight:800;font-size:13px;letter-spacing:.18em;line-height:1.3;color:var(--yellow);margin-bottom:16px}
footer.site ul{list-style:none;display:grid;gap:9px;font-size:16px}
footer.site a,footer.site li a{color:inherit;text-decoration:none}
footer.site .fb{display:flex;align-items:center;gap:12px;margin-bottom:16px}
footer.site .fb img{width:54px;height:54px}
footer.site .fb b{font-family:var(--display);font-stretch:66%;font-weight:900;font-size:30px;color:#fff;line-height:.9;text-transform:uppercase}
footer.site p{font-size:15.5px;color:#A9B5A5}
footer.site .contact li{display:flex;gap:10px;align-items:flex-start}
footer.site .contact li > :last-child,.info .row > :last-child,.contact-page .row > :last-child{min-width:0;overflow-wrap:anywhere}
footer.site .contact svg{color:var(--yellow);margin-top:4px;width:18px;height:18px}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:42px;height:42px;border-radius:50%;border:2px solid #3E6049;display:grid;place-items:center;color:#fff}
footer.site .also{margin-top:46px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:15px}
footer.site .also b{color:#fff;font-weight:700;margin-right:4px}
footer.site .also .sign{font-size:15px;padding:8px 12px 7px}
footer.site .legal{border-top:2px solid #26382C;margin-top:30px;padding:22px 0 28px;display:flex;justify-content:space-between;gap:20px;font-size:13.5px;color:#8E9A89;flex-wrap:wrap}
footer.site .legal a,footer.site .legal .linkbtn{text-decoration:underline;text-underline-offset:3px}
footer.site .legal .links{display:flex;flex-wrap:wrap;gap:6px 22px}

/* ---------- Mobile bar and cookie banner ---------- */
.mbar{display:none}
.cookie{position:fixed;left:20px;bottom:20px;max-width:420px;background:var(--white);border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 rgba(8,24,16,.4);padding:20px;z-index:60;display:none}
.cookie.on{display:block}
.cookie b{font-family:var(--display);font-stretch:72%;font-weight:900;text-transform:uppercase;font-size:24px;line-height:1}
.cookie p{font-size:14.5px;color:var(--muted);margin:8px 0 16px}
.cookie .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cookie a.btn{background:none;border:0;--d:0px;text-decoration:underline;padding-left:6px;padding-right:6px}

/* ---------- Hover and press ---------- */
/* Hover only where there is a mouse: on a phone a hover style sticks after a tap. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(calc(var(--d) / 2));box-shadow:0 calc(var(--d) / 2) 0 var(--edge)}
  nav.main a:hover:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:8px;border-top:2.5px solid var(--yellow-2);border-bottom:2.5px solid var(--yellow-2)}
  .row-svc:hover{background:var(--hl)}
  .row-svc:hover > span:first-child{transform:translateX(10px)}
  .row-svc:hover .go{transform:translateX(4px)}
  .row-svc:hover small{color:var(--ink)}
  a.card:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--ink)}
  .manual:hover{rotate:0deg;translate:0 -4px}
  a.sign:hover,.areas a:hover{transform:translateY(-2px)}
  .info li a:hover{color:var(--leaf)}
  footer.site a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--yellow)}
  footer.site .also .sign:hover{text-decoration:none}
}
/* Press: everything you can tap answers the moment it is touched. */
.btn:active{transform:translateY(var(--d));box-shadow:0 0 0 var(--edge)}
.btn[disabled]{opacity:.6;cursor:wait;transform:none;box-shadow:0 var(--d) 0 var(--edge)}
.menu-btn{transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out)}
.menu-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.row-svc:active,.mnav a:active{background:var(--hl)}
a.card:active,.manual:active{transform:scale(.985)}
a.sign:active,.areas a:active,.chip input:active + span{transform:scale(.97)}
.chip span{transition:transform .12s var(--ease-out),background-color .12s ease,box-shadow .12s ease}

/* ---------- Motion ---------- */
/* Small, and each for a reason: things settle into place once when the page opens, the yellow lines
   are painted on as a heading comes into view, and anything that appears (menu, result, next form
   step) eases in so it doesn't jolt. All of it is off for anyone who has asked for less motion. */
@media (prefers-reduced-motion:no-preference){
  /* Home page, once, as it opens. The headline and the job card are never hidden: the card only slides
     up into place, because it is the thing people have come to use. The decoration fades and settles. */
  .hero-media .photo{animation:settle .7s var(--ease-out) both}
  .hero-card .book-card{animation:rise .5s var(--ease-out) both}
  .hero .disc{animation:stick .45s var(--ease-out) both}
  .hero .disc:nth-child(1){animation-delay:.4s}
  .hero .disc:nth-child(2){animation-delay:.47s}
  .hero .disc:nth-child(3){animation-delay:.54s}
  .scribble{animation:fade .4s ease .85s both}
  @keyframes settle{from{rotate:0deg;translate:0 14px}}
  @keyframes rise{from{translate:0 20px}}
  @keyframes stick{from{opacity:0;scale:1.25}}
  @keyframes fade{from{opacity:0}}

  /* Painted-on yellow lines and the stamps. site.js puts .reveal on the page once it is ready to watch
     for them, then .in on each one the first time it scrolls into view. If the script never runs,
     .reveal is never set and everything simply shows. */
  .reveal .sec-head h2:after,.reveal .split h2:after,.reveal .band h2:after,.reveal .svc-main > h2:after,.reveal .prose > h2:after,.reveal .dbl:after{transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease-out) .08s}
  .reveal h2.in:after{transform:none}
  .reveal .stamp:not(.now){opacity:0;scale:1.5;transition:opacity .12s ease,scale .2s var(--ease-out)}
  .reveal .stamp.in:not(.now){opacity:1;scale:1}

  /* Things that appear ease in, so nothing jolts. They leave instantly. */
  .mnav.on,.cookie.on,.mot-result.on,.js .fs.on,.done.on,.form-msg.on,.err.on{transition:opacity .22s var(--ease-out),translate .22s var(--ease-out)}
  @starting-style{
    .mnav.on{opacity:0;translate:0 -8px}
    .cookie.on{opacity:0;translate:0 14px}
    .mot-result.on,.js .fs.on,.done.on{opacity:0;translate:0 8px}
    .form-msg.on,.err.on{opacity:0}
  }
  .mbar{transition:translate .2s var(--ease-out)}
  .stepper span:after{transition:transform .25s var(--ease-out)}

  /* The two moments that have earned a flourish, each seen once: a booking sent, and a reminder set. */
  .done.on .big{transition:opacity .3s var(--ease-out),scale .3s var(--ease-out)}
  .done.on .big svg{clip-path:inset(0 0 0 0);transition:clip-path .35s var(--ease-out) .2s}
  .mot-result.on .stamp.now{transition:opacity .12s ease .3s,scale .2s var(--ease-out) .3s}
  @starting-style{
    .done.on .big{opacity:0;scale:.9}
    .done.on .big svg{clip-path:inset(0 100% 0 0)}
    .mot-result.on .stamp.now{opacity:0;scale:1.5}
  }
}
/* Asked for less motion: nothing slides, settles or scrolls smoothly, but things that appear still fade in,
   because a quick fade helps you see what changed. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.card,.row-svc,.row-svc > span,.manual,.sign,.areas a,.chip span{transition:none}
  .tape .run{animation:none}
  .mnav.on,.cookie.on,.mot-result.on,.js .fs.on,.done.on,.form-msg.on,.err.on{transition:opacity .2s ease}
  @starting-style{
    .mnav.on,.cookie.on,.mot-result.on,.js .fs.on,.done.on,.form-msg.on,.err.on{opacity:0}
  }
}

/* Grid and flex children may shrink below their content width */
.hero .wrap > *,.page-hero .cols > *,.band .wrap > *,.split > *,.svc > *,.book-layout > *,.motband .wrap > *{min-width:0}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .scribble{display:none}
}
@media (max-width:900px){
  body{font-size:16.5px}
  .wrap{padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
  .head-cta .btn,.topbar .hide-m{display:none}
  header.site .wrap{height:68px;gap:12px}
  .brand{gap:10px}.brand img{width:44px;height:44px}.brand b{font-size:24px}.brand small{font-size:8px;letter-spacing:.12em}
  .topbar .wrap{justify-content:center;height:auto;min-height:34px;font-size:12.5px}
  .topbar .wrap > span{flex:0 1 auto;white-space:normal;line-height:1.35;padding:7px 0;text-align:center}
  .hero{padding:26px 0 0}
  .hero .wrap{padding-bottom:84px}
  .hero h1{font-size:clamp(40px,8.4vw,76px)}
  .hero .lead{font-size:18px}
  .hero-row{grid-template-columns:1fr;margin-top:26px}
  .hero-card{order:-1;margin:0}
  .hero-card .book-card{rotate:-1deg}
  .hero-media{padding-bottom:0;margin-top:34px}
  .hero-media .photo{height:230px;rotate:-1deg}
  .hero-media .photo:not(.has-img){display:none}
  .discs{position:static;gap:14px}
  /* with a photo above them the three discs sit centred over its bottom edge */
  .hero-media .photo.has-img + .discs{position:relative;left:auto;bottom:auto;margin:-40px 0 0;justify-content:center}
  .page-hero .cols,.band .wrap,.split,.svc,.book-layout,.motband .wrap{grid-template-columns:1fr;gap:34px}
  .lead{font-size:17.5px}
  .actions .btn{flex:1}
  .disc{width:min(100px,calc((100% - 28px) / 3));height:auto;aspect-ratio:1}
  .disc b{font-size:22px}.disc span{font-size:9px;max-width:78px}
  .tape span{font-size:19px}
  .section{padding:62px 0}
  .section.tight{padding:48px 0}
  .sec-head{margin-bottom:28px}
  .sec-head.with-link{flex-direction:column;align-items:flex-start;gap:14px}
  .board,.grid-3,.rgrid.top3,.vgrid,.terms,.shelf,.grid-3:has(> .person:nth-child(2):last-child){grid-template-columns:1fr}
  .rgrid{columns:1}
  .rgrid.top3:has(> :nth-child(2):last-child),.rgrid.top3:has(> :only-child){grid-template-columns:1fr}
  .shelf{gap:34px}
  .manual{min-height:0;padding:26px 24px 24px 42px;rotate:-1deg;box-shadow:6px 6px 0 var(--ink)}
  .row-svc{grid-template-columns:1fr 24px;gap:12px;padding:17px 6px 15px 2px}
  .row-svc b{font-size:27px}
  .qa > div{grid-template-columns:1fr}
  .contact-page{grid-template-columns:1fr;gap:40px}
  .terms h3{font-size:25px}
  .steps{grid-template-columns:1fr}
  .step,.step + .step{padding:26px 0 22px;border-left:0}
  .step + .step{border-top:2px dashed var(--ink)}
  .step:before{font-size:88px}
  .motband{padding:56px 0}
  .motband:before{display:none}
  .mot-form{transform:none;padding:18px}
  .band{padding-bottom:86px}
  .band:before{margin-bottom:58px}
  .band .photo,.split .photo{height:270px}
  .prints{grid-template-columns:1fr 1fr;gap:22px 18px}
  .carboard{columns:2;column-gap:16px}
  .carboard figcaption{font-size:19px}
  .prints .photo:nth-child(1){grid-column:1 / -1;height:230px}
  .prints .photo:nth-child(2),.prints .photo:nth-child(3){height:150px;margin-top:0}
  .quote{left:10px;bottom:-30px;width:210px}
  .quote b{font-size:52px}
  .cta{flex-direction:column;align-items:flex-start;padding:32px 26px}
  .cta:after{display:none}
  .page-hero{padding:18px 0 70px}
  .page-hero .photo:not(.has-img){display:none}
  .page-hero .photo.has-img{height:230px;min-height:0;margin:4px 6px 0;transform:rotate(-1deg)}
  .ticklist{grid-template-columns:1fr}
  .side{position:static}
  .fgrid{grid-template-columns:1fr}
  .panel{padding:22px}
  .vcard{grid-template-columns:1fr}
  .vcard .photo{min-height:200px}
  footer.site .cols{grid-template-columns:1fr 1fr}
  footer.site{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:var(--paper);border-top:3px solid var(--ink);z-index:50}
  .mbar .btn{padding:14px 10px 13px;--d:3px}
  .cookie{left:12px;right:12px;bottom:calc(92px + env(safe-area-inset-bottom));max-width:none}
  /* while someone is typing, the Call / Book bar gets out of the way of the keyboard */
  body:has(:is(input:not([type=checkbox]):not([type=radio]),textarea,select):focus) .mbar{translate:0 120%}
}
@media (max-width:600px){
  .hero h1{font-size:13vw}
}
@media (max-width:520px){
  /* a lone button in a panel ("Visit the LJB website") takes the full width and may wrap. Buttons in a
     pair stay on one line each and stack instead, so a label or phone number is never split */
  .panel.row > .btn{white-space:normal;text-align:center;width:100%}
  .panel.row .actions{width:100%}
  .vcard .price{font-size:36px}
  footer.site .cols{grid-template-columns:1fr}
  .brand small{display:none}
  .plate.big{height:62px}.plate.big input{font-size:32px}
}
@media (max-width:360px){
  /* the narrowest phones: the logo, name and menu button only (Call is in the bar at the bottom) */
  .brand b{font-size:21px}
  .brand img{width:38px;height:38px}
  .head-cta .phone{display:none}
  .discs{gap:10px}
  .disc{width:calc((100% - 20px) / 3);height:auto;aspect-ratio:1}
  .disc b{font-size:18px}
  .disc span{font-size:8px;max-width:64px}
}