/* Layout: a workshop bench. Quiet antistatic-mat ground, one loud object (the yellow-banded job ticket) in the hero, plain ruled lists everywhere else. */
:root{
  --bg:#E8EDF1; --surface:#F6F8FA; --ticket:#FCFBF4;
  --ink:#10202E; --ink-2:#4A5B6A; --line:#C2CDD7;
  --metal:#C5CFD8; --platter:#F2F5F7; --chip:#1B2733; --pcb:#1F7150; --trace:#49A680; --copper:#D39A35; --err:#B3261E;
  --accent:#F2C200; --accent-ink:#1A1500; --link:#1B5FA6; --ok:#1C7448;
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1620; --surface:#122130; --ticket:#172A3B;
    --ink:#E6EDF3; --ink-2:#9DB0C0; --line:#2B3F52;
    --metal:#3B4F62; --platter:#6F879C; --chip:#080F16; --pcb:#1A5C42; --trace:#2F8463; --copper:#D39A35; --err:#FF8A80;
    --accent:#F2C200; --accent-ink:#1A1500; --link:#7DB7F0; --ok:#5FCB95;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1620; --surface:#122130; --ticket:#172A3B;
  --ink:#E6EDF3; --ink-2:#9DB0C0; --line:#2B3F52;
    --metal:#3B4F62; --platter:#6F879C; --chip:#080F16; --pcb:#1A5C42; --trace:#2F8463; --copper:#D39A35; --err:#FF8A80;
  --accent:#F2C200; --accent-ink:#1A1500; --link:#7DB7F0; --ok:#5FCB95;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;margin:0}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
a{color:var(--link);text-underline-offset:3px}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--link);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1;margin:0;text-wrap:balance;text-transform:uppercase;letter-spacing:.005em}
h1{font-size:clamp(2.6rem,7.2vw,5rem)}
h2{font-size:clamp(2rem,4.6vw,3.1rem)}
h3{font-size:1.5rem;font-weight:600}
p{margin:0}
.label{font-family:var(--mono);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2)}
.lede{font-size:1.14rem;color:var(--ink-2);max-width:56ch}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1.5px solid var(--ink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:12px}
.mark{font-family:var(--display);font-weight:700;font-size:1.35rem;text-transform:uppercase;line-height:1;color:var(--ink);text-decoration:none}
.mark b{background:var(--accent);color:var(--accent-ink);padding:0 .22em;font-weight:700}
.top nav{display:flex;gap:22px;align-items:center}
.top nav a{color:var(--ink);text-decoration:none;font-size:.95rem;font-weight:500}
.top nav a:hover{text-decoration:underline}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);font-family:var(--display);font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:.03em;padding:9px 16px;border:1.5px solid var(--ink);border-radius:3px;text-decoration:none;cursor:pointer;line-height:1.1}
.btn:hover{filter:brightness(1.06)}
.top nav a.btn{color:var(--accent-ink);font-size:1.05rem;font-weight:700;padding:7px 13px}
@media (max-width:820px){.top nav a:not(.btn){display:none}}

/* hero */
.hero{padding-block:clamp(36px,6vw,72px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:start}
.hero-copy{display:flex;flex-direction:column;gap:22px;min-width:0}
.hero h1 em{font-style:normal;background:var(--accent);color:var(--accent-ink);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.builder{display:flex;flex-direction:column;gap:18px;margin-top:8px;padding-top:22px;border-top:1.5px solid var(--line)}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:block;padding:7px 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);font-size:.95rem;font-weight:500;cursor:pointer}
.chip input:checked + span{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip input:focus-visible + span{outline:2px solid var(--link);outline-offset:2px}
.row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px}
select,input[type=text]{font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:3px;padding:10px 12px;width:100%;min-width:0}
input[type=text]{font-family:var(--mono);text-transform:uppercase}
input[type=text]::placeholder{color:var(--ink-2);opacity:.75}

/* the job ticket */
.ticket{position:relative;background:var(--ticket);border:1.5px solid var(--ink);border-radius:4px;transform:rotate(-1.2deg);box-shadow:6px 7px 0 var(--line);min-width:0}
.ticket-head{background:var(--accent);color:var(--accent-ink);border-bottom:1.5px solid var(--ink);padding:26px 18px 10px;display:flex;justify-content:space-between;gap:10px;align-items:baseline;border-radius:2px 2px 0 0}
.ticket-head strong{font-family:var(--display);font-size:1.7rem;text-transform:uppercase;line-height:1}
.ticket-head span{font-family:var(--mono);font-size:.74rem;letter-spacing:.09em}
.ticket::before{content:"";position:absolute;top:8px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ink)}
.ticket dl{margin:0;padding:6px 18px 4px}
.ticket dl div{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:10px;padding:11px 0;border-bottom:1px dashed var(--line)}
.ticket dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);padding-top:3px}
.ticket dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.ticket dd.plan{font-weight:400;font-size:.96rem}
.ticket dd .state{display:block;font-weight:400;font-size:.9rem;color:var(--ink-2);margin-top:2px}
.ticket dd .state.ok{color:var(--ok)}
.ticket-foot{padding:14px 18px 18px;display:flex;flex-direction:column;gap:10px}
.ticket-foot .btn{width:100%;text-align:center}
.ticket-foot p{font-size:.86rem;color:var(--ink-2)}
#copyOut{font-family:var(--mono);font-size:.8rem;width:100%;min-height:9.5em;background:var(--surface);color:var(--ink);border:1.5px solid var(--line);border-radius:3px;padding:8px}
@media (max-width:860px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .ticket{transform:none;box-shadow:4px 5px 0 var(--line)}
}
@media (max-width:480px){.row{grid-template-columns:minmax(0,1fr)}}

/* sections */
section{padding-block:clamp(40px,6vw,76px);border-top:1.5px solid var(--ink)}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px)}
.col{display:flex;flex-direction:column;gap:6px;min-width:0}
.col h3{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1.5px solid var(--ink)}
.col h3 small{font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:.09em;color:var(--ink-2)}
.jobs{list-style:none;margin:0;padding:0}
.jobs li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.jobs strong{font-weight:600}
.jobs span{color:var(--ink-2);font-size:.96rem}
.notice{margin-top:30px;background:var(--surface);border:1.5px solid var(--line);border-left:8px solid var(--accent);padding:16px 18px;max-width:74ch}
.notice strong{font-weight:600}
.makes{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:30px;font-family:var(--mono);font-size:.9rem;color:var(--ink-2)}
.makes b{color:var(--ink);font-weight:500}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:8px;min-width:0}
.steps li::before{content:counter(s);font-family:var(--display);font-weight:700;font-size:2.4rem;line-height:1;width:1.25em;text-align:center;background:var(--accent);color:var(--accent-ink);border:1.5px solid var(--ink)}
.steps h3{font-size:1.3rem}
.steps p{color:var(--ink-2);font-size:.96rem}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}

.nations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.nations div{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1.5px solid var(--ink);min-width:0}
.nations code{font-family:var(--mono);font-size:.84rem;color:var(--ink-2);overflow-wrap:anywhere}
.nations p{font-size:.96rem;color:var(--ink-2)}
.finder{display:flex;flex-direction:column;gap:8px;max-width:420px;margin-bottom:28px}
.finder #town{font-family:var(--body);text-transform:none}
.finder p{font-size:.92rem;color:var(--ink-2);min-height:1.5em}
.regions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 32px}
.region{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1.5px solid var(--ink);min-width:0}
.region code{font-family:var(--mono);font-size:.78rem;color:var(--ink-2);overflow-wrap:anywhere}
.region ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:3px 14px;font-size:.96rem}
@media (max-width:900px){.regions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.regions{grid-template-columns:minmax(0,1fr)}}
.fine{margin-top:26px;color:var(--ink-2);max-width:70ch;font-size:.96rem}
@media (max-width:820px){.two{grid-template-columns:minmax(0,1fr)}.nations{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.nations{grid-template-columns:minmax(0,1fr)}}

.faq{max-width:76ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 0;font-weight:600;font-size:1.06rem}
.faq details p{padding:0 0 18px;color:var(--ink-2)}

.contact{background:var(--ink);color:var(--bg);border-top:0}
.contact h2{color:var(--bg)}
.contact .lede{color:var(--bg);opacity:.82}
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:8px}
.cgrid div{display:flex;flex-direction:column;gap:8px;min-width:0}
.cgrid .label{color:var(--bg);opacity:.7}
.todo{font-family:var(--mono);font-size:.86rem;border:1.5px dashed var(--accent);color:var(--accent);padding:8px 10px;border-radius:3px;overflow-wrap:anywhere}
@media (max-width:820px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:440px){.cgrid{grid-template-columns:minmax(0,1fr)}}
footer{padding-block:22px;font-size:.88rem;color:var(--ink-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
section[id],div[id="start"]{scroll-margin-top:76px}

/* --- added: booking form --- */
.book{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;max-width:860px;position:relative}
.book .full{grid-column:1/-1}
.book input,.book textarea{font:inherit;font-family:var(--body);text-transform:none;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:3px;padding:10px 12px;width:100%;min-width:0}
.book #bk-postcode{text-transform:uppercase}
.book #bk-postcode::placeholder{text-transform:none}
.book textarea{min-height:9em;resize:vertical;line-height:1.5}
.book textarea:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.hp{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.form-status{grid-column:1/-1;margin:0;padding:12px 14px;background:var(--surface);border:1.5px solid var(--line);border-left:8px solid var(--ok)}
.form-status.err{border-left-color:var(--err)}
.form-check{grid-column:1/-1}
.send{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 20px}
.send .btn{font-size:1.3rem;padding:12px 22px}
.send .btn[disabled]{opacity:.6;cursor:default}
.formnote{font-size:.9rem;color:var(--ink-2)}
#book{scroll-margin-top:76px}
footer .legal{flex-basis:100%}
@media (max-width:600px){.book{grid-template-columns:minmax(0,1fr)}}

/* --- added: hosting reset, graphics, price list, town pages --- */
img,svg{max-width:100%}
[hidden]{display:none!important}
.region a{color:var(--ink);text-decoration:none}
.region a:hover{color:var(--link);text-decoration:underline}
.figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-bottom:28px}
.fig{margin:0;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-content:start;background:var(--surface);border:1.5px solid var(--line);padding:22px;min-width:0}
.fig svg{display:block;width:100%;height:auto;max-height:440px}
.fig figcaption{display:flex;flex-direction:column;gap:12px;min-width:0}
.fig.wide{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:28px;margin-bottom:56px}
.fignote{font-size:.92rem;color:var(--ink-2)}
.legend{margin:0;padding:0;list-style:none;counter-reset:l;display:flex;flex-direction:column;gap:9px;font-size:.95rem;color:var(--ink-2)}
.legend li{counter-increment:l;display:grid;grid-template-columns:1.7em minmax(0,1fr);gap:10px;align-items:start}
.legend li::before{content:counter(l);font-family:var(--display);font-weight:700;font-size:1rem;line-height:1;background:var(--accent);color:var(--accent-ink);border:1.5px solid var(--ink);border-radius:50%;width:1.6em;height:1.6em;display:grid;place-items:center}
.legend b{color:var(--ink);font-weight:600}
.g-case{fill:var(--metal);stroke:var(--ink);stroke-width:1.5}
.g-plat{fill:var(--platter);stroke:var(--ink);stroke-width:1.5}
.g-ring{fill:none;stroke:var(--ink-2);stroke-width:1;opacity:.45}
.g-chip{fill:var(--chip)}
.g-coil{fill:var(--copper);stroke:var(--ink);stroke-width:1.5}
.g-flex{fill:none;stroke:var(--copper);stroke-width:9;stroke-linecap:round}
.g-screw{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.g-pcb{fill:var(--pcb);stroke:var(--ink);stroke-width:1.5}
.g-trace{fill:none;stroke:var(--trace);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.g-via{fill:var(--trace)}
.g-cu{fill:var(--copper)}
.g-hole{fill:var(--surface);stroke:var(--copper);stroke-width:3}
.g-pins{fill:none;stroke:var(--copper);stroke-width:7;stroke-dasharray:3 4}
.g-pads{fill:none;stroke:var(--copper);stroke-width:8;stroke-dasharray:5 4}
.g-fingers{fill:none;stroke:var(--copper);stroke-width:18;stroke-dasharray:4 3}
.g-num circle{fill:var(--accent);stroke:var(--ink);stroke-width:1.5}
.g-num text{font:700 15px var(--display);fill:var(--accent-ink);text-anchor:middle}
.sub{font-size:clamp(1.7rem,3.6vw,2.4rem);font-weight:700;margin-bottom:6px;scroll-margin-top:76px}
.price-wrap{overflow-x:auto}
.prices{width:100%;max-width:880px;border-collapse:collapse}
.prices thead th{font-family:var(--mono);font-size:.72rem;font-weight:400;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);text-align:left;padding:6px 0}
.prices .grp th{font-family:var(--display);font-size:1.4rem;font-weight:600;text-transform:uppercase;text-align:left;padding:26px 0 8px;border-bottom:1.5px solid var(--ink)}
.prices .grp small{font-family:var(--body);font-size:.88rem;font-weight:400;text-transform:none;color:var(--ink-2);margin-left:6px}
.prices td{padding:13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.prices td:first-child{padding-right:20px;font-weight:500}
.prices td:first-child span{display:block;font-weight:400;color:var(--ink-2);font-size:.92rem;margin-top:3px;max-width:58ch}
.prices td:last-child{width:40%;font-family:var(--mono);font-size:.93rem;font-weight:500;font-variant-numeric:tabular-nums}
.contact a{color:var(--bg);overflow-wrap:anywhere}
.contact a.big{font-family:var(--display);font-size:2rem;font-weight:700;line-height:1;text-decoration:none}
.appt{align-self:flex-start;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px}
.crumb{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink-2)}
.crumb a{color:var(--ink-2)}
.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,48px);align-items:start}
.near{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.near a{color:var(--ink)}
.ticket a.btn{color:var(--accent-ink)}
@media (max-width:820px){.figs,.fig.wide,.split{grid-template-columns:minmax(0,1fr)}}
.prices .grp small{display:block;margin:3px 0 0}
.mark{white-space:nowrap}
.top nav{gap:18px}
.top nav a{white-space:nowrap;font-size:.92rem}
@media (max-width:1040px){.top nav a:not(.btn){display:none}}
@media (max-width:520px){.mark{white-space:normal}}