/* ==========================================================================
   ورشة الآن · WorkshopNow — public site
   One navy screen. The home page opens on one first screen — the message, the main action and the visitor's
   choices as tiles — and goes on in short sections; every other page is one panel under the same three-line
   head. Nothing moves by itself, and nothing needs the script.
   Typefaces first, then tokens, chrome (top bar, menu), what every page shares, the home page, the panels and
   pages, the account, the footer and the phone bar. Spacing comes from one scale: --s1 … --s5 (8, 16, 24, 32,
   48 px).
   ========================================================================== */

/* The site's own copies of Changa and Tajawal (SIL Open Font License, beside them in fonts/): no other
   origin is asked for anything, and the text shows in a fallback face until they arrive. */
@font-face{font-family:"Tajawal";src:url("../fonts/Tajawal-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Tajawal";src:url("../fonts/Tajawal-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Tajawal";src:url("../fonts/Tajawal-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Changa";src:url("../fonts/Changa-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Changa";src:url("../fonts/Changa-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}

:root{
  --navy:#061437; --navy-2:#0B1F52; --blue:#1F5EFF;
  --gold:#F5B82E; --gold-2:#FFD166; --white:#FFFFFF; --mist:rgba(255,255,255,.72); --mist-2:rgba(255,255,255,.55);
  --line:rgba(255,255,255,.16); --panel:rgba(9,29,78,.66); --panel-line:rgba(255,255,255,.14);
  --field:rgba(255,255,255,.07); --field-line:rgba(255,255,255,.28); --error:#FF8A80; --ok:#7CE0B3;
  --f-display:"Changa","Tajawal","Segoe UI",sans-serif; --f-text:"Tajawal","Segoe UI",Tahoma,sans-serif;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px;
  --top:68px; --gutter:var(--s2); --pw:min(calc(100% - 2 * var(--gutter)),1180px);
  color-scheme:dark;
}
/* The margin at the sides of the screen grows with it, a step of the scale at a time. */
@media (min-width:560px){:root{--gutter:var(--s3)}}
@media (min-width:860px){:root{--gutter:var(--s4)}}
@media (min-width:1280px){:root{--gutter:var(--s5)}}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{min-height:100%}
body{margin:0;background:var(--navy);color:var(--white);font:400 18px/1.75 var(--f-text);-webkit-font-smoothing:antialiased;overflow-x:clip}
html[lang=en] body{line-height:1.55}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
::selection{background:var(--gold);color:var(--navy)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* A figure keeps its own order inside a sentence of either language: a number, a code, a phone or an e-mail reads left
   to right; one written with Arabic words or letters ("115.00 ر.س", "8:37 م", a plate's letters) reads the way they do,
   its number on the right. The direction is the figure's own, from its first letter. */
.num{direction:ltr;unicode-bidi:isolate;unicode-bidi:plaintext;font-variant-numeric:tabular-nums}
b.num{white-space:nowrap}
.skip{position:fixed;top:-60px;inset-inline-start:12px;z-index:200;background:var(--gold);color:var(--navy);padding:10px 16px;border-radius:8px;font:700 14px var(--f-text);text-decoration:none}
.skip:focus{top:12px}

/* backdrop */
.glow{position:fixed;inset:0;pointer-events:none;z-index:0;background:
  radial-gradient(760px 560px at 85% 8%,rgba(31,94,255,.42),transparent 70%),
  radial-gradient(560px 460px at 8% 100%,rgba(31,94,255,.18),transparent 70%)}
.gridbg{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.14;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 30%,transparent 100%)}

/* ---------- top bar + menus ---------- */
.top{position:fixed;top:0;inset-inline:0;z-index:20;height:calc(var(--top) + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);padding-inline:var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
/* The corners of the mark's own tile (22 on its 96 grid), so the glow follows its outline. */
.brand img{width:42px;height:42px;border-radius:23%;box-shadow:0 8px 24px -8px rgba(31,94,255,.9)}
.brand b{display:block;font:800 21px/1 var(--f-display)}
.brand small{display:block;margin-top:5px;font:700 10.5px/1 var(--f-text);letter-spacing:.28em;color:var(--mist)}
.menu{display:flex;gap:26px;margin:0;padding:0;list-style:none}
.menu a{display:inline-flex;align-items:center;min-height:44px;padding:0;font:500 15.5px/1 var(--f-text);color:var(--mist);position:relative;text-decoration:none;white-space:nowrap}
.menu a::after{content:"";position:absolute;inset-inline:0;bottom:6px;height:2px;background:var(--gold);transform:scaleX(0);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.menu a:hover,.menu a.on{color:var(--white)}
.menu a.on::after{transform:scaleX(1)}
.top-actions{display:flex;align-items:center;gap:8px;flex:none}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:rgba(255,255,255,.06);font:700 15px/1 var(--f-text);text-decoration:none;transition:background-color .2s,border-color .2s;white-space:nowrap}
.pill:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.pill.gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.pill.gold:hover{background:var(--gold-2);border-color:var(--gold-2)}
.pill svg{width:16px;height:16px}
/* One gold action on a screen: where the page itself has its gold button (the booking on the home page, "continue"
   at the sign-in), the bar's booking — and the phone bar's — wear the plain pill's look instead. */
body:has(main .btn-gold) .pill.gold{background:rgba(255,255,255,.06);border-color:var(--line);color:var(--white)}
body:has(main .btn-gold) .pill.gold:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
body:has(main .btn-gold) .phonebar a.gold{background:none;border-color:var(--line);color:var(--white)}
/* "Book" and "a visit" are one phrase: no gap of the pill between them, the word space kept. */
.pill.book-top{gap:0}
.pill.book-top .wide{white-space:pre}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:rgba(255,255,255,.06);position:relative;padding:0}
.burger span{position:absolute;left:13px;right:13px;height:1.5px;background:var(--white);transition:transform .3s,top .3s}
.burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:27px}
.menu-open .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){transform:scaleX(0)}
.menu-open .burger span:nth-child(3){top:22px;transform:rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:15;background:rgba(6,20,55,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:calc(var(--top) + 24px + env(safe-area-inset-top,0px)) var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow:auto}
.sheet nav{display:grid;gap:2px}
.sheet nav a{padding:8px 0;text-align:start;font:800 clamp(26px,7vw,40px)/1.45 var(--f-display);color:var(--white);display:flex;align-items:baseline;gap:14px;text-decoration:none}
.sheet nav a.sub{padding:4px 0;padding-inline-start:18px;font:700 clamp(17px,4.4vw,22px)/1.5 var(--f-text);color:var(--mist)}
.sheet nav a[aria-current=page]{color:var(--gold)}
.sheet-foot{display:grid;gap:10px}
@media (max-width:1040px){.menu{display:none}.burger{display:block}}
/* On a phone the bar keeps the booking pill: the pills tighten, "book a visit" shortens to "book", the name
   gives way before the pills do, and on the narrowest screens the logo stands without the name beside it. */
@media (max-width:640px){.top{gap:8px}.top-actions{gap:6px}.brand{flex:0 1 auto;min-width:0}.brand img{flex:none}.brand > span{min-width:0;overflow:hidden}.brand b{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand small{display:none}.pill{padding:0 14px}.pill .wide{display:none}.pill.call-top span{display:none}.pill.call-top{width:44px;padding:0}}
@media (max-width:480px){.brand > span{display:none}}

/* ---------- what every page shares: the small gold line, titles, lead, buttons ---------- */
.label{margin:0 0 var(--s2);font:700 14px/1.4 var(--f-text);color:var(--gold);display:flex;align-items:center;gap:var(--s1)}
.label::before{content:"";width:22px;height:2px;background:var(--gold);border-radius:1px;flex:none}
.label a{color:inherit;text-decoration:none;border-bottom:1.5px solid rgba(245,184,46,.45)}
html[lang=en] .label{font-size:12px;letter-spacing:.2em;text-transform:uppercase}
h1,h2{margin:0;font-family:var(--f-display);font-weight:800;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(50px,7.6vw,108px);line-height:1.05}
h2{font-size:clamp(36px,5vw,66px)}
/* Latin letters run larger than Arabic at one size. Held at the weight of a bare element, so a heading that a
   block sizes for itself (a panel's title, a card's name) is that size in both languages. */
:where(html[lang=en]) h1{font-size:clamp(42px,5.8vw,86px)}
:where(html[lang=en]) h2{font-size:clamp(32px,4.2vw,58px)}
.lead{margin:var(--s2) 0 0;max-width:46ch;color:var(--mist);font-size:clamp(17px,1.35vw,20px);text-wrap:pretty}
.desc{margin:var(--s1) 0 0;max-width:52ch;color:var(--mist-2);font-size:16px}
.note{margin:var(--s2) 0 0;font:500 14px/1.6 var(--f-text);color:var(--mist-2)}
.ctas{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:54px;padding:0 var(--s3);border-radius:14px;font:700 16px/1 var(--f-text);text-decoration:none;border:1.5px solid transparent;background:none;transition:transform .2s,background-color .2s,border-color .2s,color .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-2)}
.btn-ghost{border-color:rgba(255,255,255,.45);color:var(--white)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
/* The third way after the gold button and the outlined one: a faint line, the text in mist. */
.btn-quiet{border-color:var(--line);color:var(--mist)}
.btn-quiet:hover{border-color:rgba(255,255,255,.45);color:var(--white)}
/* A link that leads on to a page: plain text, and an arrow that points the way the text reads. */
.more{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;margin-top:var(--s2);font:700 15.5px/1.4 var(--f-text);color:var(--white);text-decoration:none}
.more:hover{color:var(--gold)}
.more svg,.cue svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[lang=en] .more svg,html[lang=en] .cue svg{transform:scaleX(-1)}
/* A division's (or roadside's) drawing, in the colour of the text around it; the line keeps its width at any size. */
.line-icon{display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.line-icon *{vector-effect:non-scaling-stroke}

/* photos */
.photo{position:relative;width:100%;max-width:520px;aspect-ratio:4/3;justify-self:center;border-radius:20px;overflow:hidden;border:1px solid var(--panel-line);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.inline{margin-top:var(--s3);max-width:none}

/* quiet blocks: where the work is done — in the workshop, on the customer's site — side by side from 760 px */
.ways{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);margin-top:var(--s3)}
.way{min-width:0;padding:var(--s3);border-radius:16px;border:1.5px solid var(--line);background:rgba(255,255,255,.05)}
.way h2,.way h3{margin:0 0 var(--s1);font:800 22px/1.3 var(--f-display)}
.way p{margin:0;color:var(--mist);font-size:16px}
.way p + p{margin-top:var(--s1)}
@media (min-width:760px){.ways{grid-template-columns:repeat(2,minmax(0,1fr))}.ways > :only-child{grid-column:1 / -1}}

/* a branch's address, numbers and hours; the hiring line; the roadside faults and their fees */
.contact{margin:var(--s3) 0 0;display:grid;gap:var(--s2);padding:0}
.contact div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s1) var(--s2);align-items:baseline}
.contact dt{font:700 14px/1.6 var(--f-text);color:var(--gold)}
html[lang=en] .contact dt{letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.contact dd{margin:0;font:500 clamp(18px,1.6vw,22px)/1.5 var(--f-text)}
.contact dd a,.reach a,.reach-mail a{text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.35)}
.contact dd a:hover,.reach a:hover,.reach-mail a:hover{border-color:var(--gold)}
.contact .phones,.reach .phones{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2)}
.hire{margin-top:var(--s3);padding-top:var(--s3);border-top:1.5px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s3)}
.hire p{margin:0;color:var(--mist);font-size:16px;max-width:44ch}
.hire .more{margin-top:0}
.faults{display:grid;gap:var(--s1);margin:var(--s3) 0 0;padding:0;list-style:none}
.faults li{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:var(--s1) var(--s2);border-radius:12px;border:1.5px solid var(--line);background:rgba(255,255,255,.05);font:500 15.5px/1.3 var(--f-text)}
.faults li b{font:700 15px/1 var(--f-text);color:var(--gold);white-space:nowrap;text-align:end}
.faults li b small{display:block;margin-top:5px;font:500 12.5px/1 var(--f-text);color:var(--mist)}
/* a roadside service's own line icon, before its name in the list and in the request form */
.faults li > span{display:flex;align-items:center;gap:var(--s1)}
.faults .line-icon,.choice .line-icon{flex:none;width:22px;height:22px;color:var(--gold)}

/* the stages of a job, numbered in the order a job goes: one under the other, in a row from 860 px with each
   as tall as the tallest */
.steps{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);counter-reset:step}
.step{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-content:start;gap:var(--s1) var(--s2);padding:var(--s3);border-radius:18px;border:1.5px solid var(--line);background:rgba(255,255,255,.04);counter-increment:step}
.step::before{content:counter(step);grid-column:1;grid-row:1 / span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);font:800 16px/1 var(--f-display)}
.step > *{grid-column:2;min-width:0}
.step h2,.step h3{margin:0;align-self:center;font:800 clamp(20px,1.8vw,24px)/1.3 var(--f-display)}
.step > p{margin:0;color:var(--mist);font-size:16px}
.panel .step ul.points{margin:0}
@media (min-width:860px){.steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}

/* ---------- the home page ---------- */
/* The first screen — the message and the main action beside the visitor's choices — then the cover photo and
   short sections, each a heading over a few quiet blocks, all the same distance apart. */
.home{position:relative;z-index:1;padding:calc(var(--top) + var(--s3) + env(safe-area-inset-top,0px)) 0 var(--s5)}
.home > *{width:var(--pw);margin-inline:auto}
.home [id]{scroll-margin-top:calc(var(--top) + var(--s2))}
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4);align-items:center}
.hero-text{min-width:0}
/* The number is part of the call button here: on a phone it gets a row of its own. */
.hero .btn-quiet .num{display:inline}
.facts{margin:var(--s3) 0 0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);color:var(--mist);font:500 15px/1.6 var(--f-text)}
.facts span{display:inline-flex;align-items:flex-start;gap:var(--s1)}
.facts svg{width:18px;height:18px;flex:none;margin-top:.2em;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1040px){.hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--s5)}}

/* what do you need: a tile per division, two to a row at every width, and roadside across the row in gold */
.need{min-width:0;padding:var(--s4);border-radius:28px;background:var(--panel);border:1px solid var(--panel-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 50px 90px -50px rgba(0,0,0,.85)}
.need h2{margin:0 0 var(--s2);font-size:clamp(22px,2vw,26px);line-height:1.3}
.need-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.need-tiles > li{display:flex;min-width:0}
.need-tiles > li.road,.need-tiles > li.alone{grid-column:1 / -1}
.need-tile{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--s1);padding:var(--s2);border-radius:16px;border:1.5px solid var(--line);background:rgba(255,255,255,.05);text-decoration:none;transition:border-color .2s,background-color .2s}
.need-tile:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08)}
.need-tile .line-icon{width:40px;height:40px;flex:none;align-self:flex-start}
.need-tile h3{margin:0;font:700 17px/1.4 var(--f-text);overflow-wrap:break-word}
/* The owner's line wraps rather than being cut: a tile is as tall as its row asks. */
.need-line{margin:0;color:var(--mist);font-size:14.5px;line-height:1.5}
.need-meta{margin:auto 0 0;color:var(--gold);font:700 13.5px/1.4 var(--f-text)}
.road .need-tile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"icon name fee" "icon line fee";align-items:center;gap:0 var(--s2);border-color:rgba(245,184,46,.5);background:rgba(245,184,46,.08)}
.road .need-tile:hover{border-color:var(--gold);background:rgba(245,184,46,.08)}
.road .line-icon{grid-area:icon;align-self:center;color:var(--gold)}
.road h3{grid-area:name}
.road .need-line{grid-area:line}
.road .need-meta{grid-area:fee;margin:0;font-size:15px;white-space:nowrap}
/* On a phone the fee goes under the words, so the name keeps one line beside the drawing. */
@media (max-width:560px){
  .road .need-tile{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icon name" "icon line" "icon fee"}
  .road .need-meta{margin-top:var(--s1)}
}

/* the cover photo, when the owner has published one: wide, its box held before it arrives */
.wide-photo{margin-top:var(--s5);border-radius:28px;overflow:hidden;border:1px solid var(--panel-line);background:var(--panel);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.wide-photo img{width:100%;aspect-ratio:16/9;object-fit:cover}
@media (min-width:760px){.wide-photo img{aspect-ratio:16/7}}

/* the sections, and how to reach each branch: a row a branch — where it is, its hours, its numbers */
.band{margin-top:var(--s5)}
.band-h{font-size:clamp(26px,2.6vw,34px);line-height:1.25}
.reach{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s2)}
.reach-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);padding:var(--s3);border-radius:18px;border:1.5px solid var(--line);background:rgba(255,255,255,.04)}
.reach-place{min-width:0}
.reach-place h3{margin:0;font:800 20px/1.35 var(--f-display)}
.reach-place p{margin:var(--s1) 0 0;color:var(--mist);font-size:16px}
.reach-place a{display:inline-block;margin-top:var(--s1);font-size:15.5px}
.reach-cell{margin:0;min-width:0}
.reach-cell dt{font:700 13px/1.6 var(--f-text);color:var(--gold)}
html[lang=en] .reach-cell dt{letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.reach-cell dd{margin:0;font:500 16px/1.6 var(--f-text);overflow-wrap:anywhere}
.reach-mail{margin-top:var(--s2)}
@media (min-width:760px){.reach-row{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--s3)}}

/* ---------- single-panel pages ---------- */
/* Every other page is one panel, headed the same way — the small gold line, the title, one lead sentence — with
   at most one gold button. */
.page{position:relative;z-index:1;min-height:70vh;padding:calc(var(--top) + var(--s3) + env(safe-area-inset-top,0px)) 0 var(--s5)}
.panel{width:var(--pw);max-width:1180px;margin:0 auto;border-radius:28px;background:var(--panel);border:1px solid var(--panel-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 50px 90px -50px rgba(0,0,0,.85);padding:var(--s3) var(--s2);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s4) var(--s5);align-items:start}
@media (min-width:861px){.panel{padding:var(--s4)}}
@media (min-width:1280px){.panel{padding:var(--s5)}}
/* An e-mail address is one long word: it breaks at the panel's edge instead of running past it. */
.panel{overflow-wrap:break-word}
.panel.one{grid-template-columns:minmax(0,1fr);max-width:820px}
.panel.one.wide{max-width:1180px}
.panel h1{font-size:clamp(36px,4.6vw,60px);line-height:1.15}
html[lang=en] .panel h1{font-size:clamp(32px,4vw,52px)}
.panel .lead{font-size:17px}
.panel ul.points{margin:var(--s2) 0 0;padding:0;list-style:none;display:grid;gap:var(--s1);color:var(--mist);font-size:16px}
.panel ul.points li{display:flex;gap:var(--s1);align-items:flex-start}
.panel ul.points li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;margin-top:.55em}
.sub-h{margin:0 0 var(--s2);font-size:clamp(22px,2.2vw,28px)}
* + .sub-h{margin-top:var(--s4)}
/* One column that is the form's width: a long address in it breaks rather than widening the column. */
.form,.form form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
.form h2{font-size:clamp(24px,2.4vw,30px)}
.form .sub{margin:calc(-1 * var(--s1)) 0 0;color:var(--mist-2);font-size:15px}
.field{display:grid;gap:var(--s1)}
fieldset.field{min-width:0;margin:0;padding:0;border:0}
.field label,.field legend{font:700 14px/1.4 var(--f-text);color:var(--mist)}
.field legend{padding:0;margin-bottom:var(--s1)}
.field .opt{font-weight:500;color:var(--mist-2)}
.input{width:100%;min-height:50px;padding:var(--s1) var(--s2);border-radius:12px;border:1.5px solid var(--field-line);background:var(--field);color:var(--white);font:500 16px/1.4 var(--f-text);transition:border-color .2s,background-color .2s}
.input:focus{outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold);background:rgba(255,255,255,.1)}
.input[aria-invalid=true]{border-color:var(--error)}
.input::placeholder{color:var(--mist-2)}
.field-error{margin:0;font:500 14px/1.5 var(--f-text);color:var(--error)}
/* choices: a radio or a tick with its label, as one large target */
.choices{display:grid;gap:var(--s1)}
.choices.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.choices.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.field .choice{display:flex;align-items:center;gap:var(--s1);min-height:46px;padding:var(--s1) var(--s2);border-radius:12px;border:1.5px solid var(--field-line);background:var(--field);font:500 15.5px/1.4 var(--f-text);color:var(--white);cursor:pointer}
.choice input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--gold)}
.field .choice:has(input:checked){border-color:var(--gold);background:rgba(245,184,46,.08)}
.field .choice.sub{min-height:42px;font-size:14.5px;border-color:var(--line)}
.choice .price{margin-inline-start:auto;font:700 13.5px/1.3 var(--f-text);color:var(--gold);white-space:nowrap}
.choice .tag{padding:4px 8px;border-radius:999px;border:1px solid var(--line);font:700 12px/1 var(--f-text);color:var(--mist);white-space:nowrap}
.division,.services{display:grid;gap:var(--s1)}
.services{padding-inline-start:var(--s2)}
/* Nothing can be hidden for a visitor without the script unless the browser can tell from the form itself:
   a division's services while it is not the chosen one, the site address while the visit is to the workshop. */
@supports selector(:has(*)){
  .division:not(:has(> .choice input:checked)) .services{display:none}
  form:not(:has(#book-kind-site:checked)) .onsite-only{display:none}
  form:not(:has([data-tow]:checked)) .tow-only{display:none}
  form:not(:has(#join-vehicle:checked)) .vehicle-only{display:none}
}

/* The application to join: four steps in order, each numbered as the steps of «how it works» are, and each document a box
   of its own — what it takes, what was picked (or taken by an earlier sending), and what is wrong with it. On a wide screen
   the page's lead stays in sight beside the steps. */
@media (min-width:861px){.panel.join > div:first-child{position:sticky;top:calc(var(--top) + var(--s3))}}
.join-steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);counter-reset:join}
.join-step{min-width:0;display:grid;gap:var(--s2);padding:var(--s3) var(--s2);border-radius:18px;border:1.5px solid var(--line);background:rgba(255,255,255,.04);counter-increment:join}
@media (min-width:560px){.join-step{padding:var(--s3)}}
.join-step > h2{display:flex;align-items:center;gap:var(--s2);font-size:clamp(22px,2.2vw,28px)}
.join-step > h2::before{content:counter(join);flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);font:800 16px/1 var(--f-display)}
.join-step > .sub{margin:calc(-1 * var(--s1)) 0 0;color:var(--mist-2);font-size:15px}
/* A field beside a taller one (the e-mail with its line under it) keeps its own height; a document's number and date line up
   at their boxes when one label takes two lines. */
.join-step .field{align-content:start}
.doc-field .form-grid{align-items:end}
.doc-field .form-grid > :only-child{grid-column:1 / -1}
/* Steps in a narrow panel (what happens after an application is sent): one under another at every width. */
.steps.stacked{grid-template-columns:minmax(0,1fr);grid-auto-flow:row}
.doc-field{padding:var(--s2);border-radius:14px;border:1.5px solid var(--line);background:rgba(255,255,255,.03)}
.doc-field[hidden]{display:none}
.doc-input{min-height:auto;padding:var(--s1);font-size:14.5px}
.doc-input::file-selector-button{margin-inline-end:var(--s2);padding:10px 16px;border-radius:10px;border:1.5px solid rgba(255,255,255,.45);background:none;color:var(--white);font:700 14px/1 var(--f-text);cursor:pointer}
.doc-input::file-selector-button:hover{background:rgba(255,255,255,.1)}
.doc-held{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);padding:var(--s1) var(--s2);border-radius:12px;border:1.5px solid rgba(124,224,179,.5);background:rgba(124,224,179,.12);font:500 14.5px/1.5 var(--f-text)}
.doc-held .choice{margin-inline-start:auto}
.doc-preview{display:flex;align-items:center;gap:var(--s2);min-width:0;font:500 13.5px/1.5 var(--f-text);color:var(--mist);overflow-wrap:anywhere}
.doc-preview img{flex:none;width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--panel-line)}
.doc-reason{margin:0;padding:var(--s1) var(--s2);border-radius:12px;background:rgba(255,138,128,.12);border:1.5px solid rgba(255,138,128,.5);color:#FFD7D3;font:500 14.5px/1.5 var(--f-text)}
/* The documents a link asks for again, set apart from the greeting above them. */
.join-again{margin-top:var(--s3)}
.join-summary{display:grid;gap:4px;font:500 15px/1.6 var(--f-text)}
.join-summary p{margin:0}
.doc-more{justify-self:start;min-height:44px}
/* the field no person fills (see FormGuard): out of sight, out of the tab order, still in the form */
.hp{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
select.input option{color:var(--navy)}
textarea.input{min-height:120px;resize:vertical}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.form-actions{margin-top:var(--s1)}
.form>.ctas{margin-top:0}
/* A button in a form of its own (a vehicle's "delete") sits in its row like the links beside it. */
.ctas > form{display:contents}
/* Under a page's lead in its narrow column: the gold button across it, then the ways to reach the workshop two to a
   row, one left over taking the row — never a button alone at the end of a short row. */
.panel .ctas.split > .btn{flex:1 1 40%;min-width:0}
.panel .ctas.split > .btn-gold{flex-basis:100%}
/* A line that introduces the buttons under it stands apart from what is above it, and close to them. */
.desc.lead-in{margin-top:var(--s3)}
.desc.lead-in + .ctas{margin-top:var(--s2)}
.hintline{margin:0;font:500 13.5px/1.6 var(--f-text);color:var(--mist-2)}
.consent{margin:var(--s1) 0 0;font:500 13.5px/1.6 var(--f-text);color:var(--mist-2)}
.consent a{color:var(--white)}
.alert{padding:var(--s2);border-radius:12px;background:rgba(255,138,128,.12);border:1.5px solid rgba(255,138,128,.5);color:#FFD7D3;font:500 15px/1.5 var(--f-text)}
.alert a{margin-inline-start:var(--s1);font-weight:700;color:var(--white)}
.note a{color:var(--white)}
.success{padding:var(--s2) var(--s3);border-radius:16px;background:rgba(124,224,179,.12);border:1.5px solid rgba(124,224,179,.5);font:500 16px/1.7 var(--f-text)}
.success strong{display:block;font:800 20px/1.4 var(--f-display);margin-bottom:4px}
.success:focus{outline:2px solid var(--ok);outline-offset:3px}
.plate{margin:var(--s3) 0 0;display:inline-flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border-radius:14px;border:1.5px solid var(--line);background:rgba(255,255,255,.05);font:800 20px/1 var(--f-display)}
.plate .num{color:var(--gold);font-size:28px}

/* the services page: each division a card that is one link — four across from 1100 px, two from 560 px, one
   below: never three with one left over */
.cat-grid{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
.cat-grid > li{display:flex;min-width:0}
.cat-card{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--s1);padding:var(--s2);border-radius:18px;border:1.5px solid var(--line);background:rgba(255,255,255,.05);text-decoration:none;transition:border-color .2s,background-color .2s}
.cat-card:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.08)}
.cat-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px}
.cat-card h2{font-size:clamp(22px,2vw,26px);overflow-wrap:break-word}
.cat-card p{margin:0;color:var(--mist);font-size:15.5px}
.cat-card .meta{color:var(--gold);font:700 13.5px/1.4 var(--f-text)}
.cue{margin-top:auto;padding-top:var(--s1);display:inline-flex;align-items:center;gap:var(--s1);font:700 14.5px/1.4 var(--f-text)}
.cat-grid + .ways{margin-top:var(--s4)}
@media (min-width:560px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* a division's page: its services */
.svc-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1)}
.svc-list > li{padding:var(--s2);border-radius:14px;border:1.5px solid var(--line);background:rgba(255,255,255,.05)}
.svc-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.svc-head h3{margin:0;font:700 17px/1.4 var(--f-text)}
.svc-head .price{font:700 14px/1.3 var(--f-text);color:var(--gold);white-space:nowrap}
.svc-head .price.inspect{font-weight:500;color:var(--mist)}
.svc-list > li > p{margin:var(--s1) 0 0;color:var(--mist);font-size:15px}
.svc-meta{list-style:none;margin:var(--s1) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s1)}
.svc-meta li{padding:4px 10px;border-radius:999px;border:1px solid var(--line);font:500 12.5px/1.4 var(--f-text);color:var(--mist)}

/* the contact page: a block per branch, its week, whether it is open now */
.branch{margin-top:var(--s3);padding:var(--s3);border-radius:18px;border:1.5px solid var(--line);background:rgba(255,255,255,.04)}
.branch-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap}
.branch-head h2{font-size:clamp(24px,2.6vw,32px)}
/* The branch's own pill: a request's or a job's current stage is "now" too, and its words wrap inside their box. */
.branch-head .now{padding:6px 12px;border-radius:999px;border:1.5px solid var(--line);font:700 13px/1 var(--f-text);color:var(--mist);white-space:nowrap}
.branch-head .now.open{color:var(--ok);border-color:rgba(124,224,179,.5);background:rgba(124,224,179,.1)}
.week{margin-top:var(--s2);border-collapse:collapse;font-size:15.5px;min-width:min(100%,360px)}
.week caption{text-align:start;font:700 14px/1.6 var(--f-text);color:var(--gold);padding-bottom:var(--s1)}
.week th{text-align:start;font-weight:500;padding:5px 0;padding-inline-end:var(--s4);color:var(--mist)}
.week td{padding:5px 0}
.week tr.closed td{color:var(--mist-2)}

/* the owner's legal texts */
.policy > p:not(.label){margin:var(--s2) 0 0;max-width:72ch;color:var(--mist);font-size:16.5px}

@media (max-width:860px){.panel{grid-template-columns:minmax(0,1fr)}.form-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- the customer's account: its pages, lists, estimates and answers ---------- */
.acct-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:18px 0 22px}
.acct-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);font:700 14px/1 var(--f-text);text-decoration:none;color:var(--mist)}
.acct-nav a:hover{color:var(--white);border-color:rgba(255,255,255,.4)}
.acct-nav a[aria-current=page]{color:var(--navy);background:var(--gold);border-color:var(--gold)}
.acct-out{margin-inline-start:auto}
.acct-out .pill{min-height:40px;color:var(--mist)}
.acct-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.acct-list > li,.acct-card{padding:16px 18px;border-radius:16px;border:1.5px solid var(--line);background:rgba(255,255,255,.04)}
.acct-head{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:17px}
.acct-meta{margin:6px 0 0;color:var(--mist);font-size:15px}
/* The last line of the account's details: deleting the account, apart from everything above it. */
.acct-end{margin:var(--s5) 0 0}
/* The code that deletes the account, set apart from the list of what deleting it does. */
.acct-step{margin:var(--s4) 0 0;display:grid;gap:var(--s2)}
.acct-facts{margin:10px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px 18px}
.acct-facts div{min-width:0}
.acct-facts dt{font:700 12.5px/1.4 var(--f-text);color:var(--mist-2)}
.acct-facts dd{margin:2px 0 0;font-size:15.5px;overflow-wrap:anywhere}
/* A figure reads its own way (a serial left to right, a plate with Arabic letters right to left), and still lines up
   under its label like the words around it, on the side of the page's language. */
html[dir=rtl] .acct-facts dd{text-align:right}
html[dir=ltr] .acct-facts dd{text-align:left}
/* The details page's four cards: one under the other, two to a row from 900 px — never three with one left over.
   Two passwords side by side need the room of a wide card. */
.acct-forms{display:grid;gap:22px;grid-template-columns:minmax(0,1fr);margin-top:8px}
@media (min-width:900px){.acct-forms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1099px){.acct-forms .form-grid{grid-template-columns:minmax(0,1fr)}}
.acct-forms > .form,.answer > .form{padding:18px 20px;border-radius:18px;border:1.5px solid var(--line);background:rgba(255,255,255,.03);align-content:start}
.acct-forms h2,.answer h2{font-size:clamp(22px,2.2vw,26px)}
/* The reminders the customer keeps: a card of its own under the four, as wide as its sentences need. */
.form.reminders{max-width:760px;padding:18px 20px;border-radius:18px;border:1.5px solid var(--line);background:rgba(255,255,255,.03)}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;border:1px solid var(--line);font:700 12.5px/1.2 var(--f-text);color:var(--mist);white-space:nowrap}
.badge.on{color:var(--navy);background:var(--gold);border-color:var(--gold)}
/* The notifications: how many are unread beside their link, as the app's bell shows it; and each one a button that opens
   what it is about, the unread ones in gold. */
.acct-nav .count{display:inline-grid;place-items:center;min-width:22px;height:22px;margin-inline-start:8px;padding:0 6px;border-radius:999px;background:var(--gold);color:var(--navy);font:700 12.5px/1 var(--f-text)}
.acct-nav a[aria-current=page] .count{background:var(--navy);color:var(--gold)}
.notes-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px}
.notes-head .acct-meta{margin:0}
.notes-head .btn{min-height:44px;padding:0 16px;font-size:15px}
.notes > li{padding:0;border:0;background:none}
.note-open{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 14px;width:100%;padding:16px 18px;border-radius:16px;border:1.5px solid var(--line);background:rgba(255,255,255,.04);color:var(--white);font:inherit;text-align:start;cursor:pointer;transition:border-color .2s}
.note-open:hover{border-color:rgba(255,255,255,.4)}
.note-open .line-icon{grid-row:span 3;width:24px;height:24px;margin-top:4px;color:var(--gold)}
.note-open > :not(.line-icon){grid-column:2;min-width:0;overflow-wrap:anywhere}
.note-open .acct-meta{margin:0}
/* On the English page the messages are still Arabic: they read right to left, and line up under their titles on the left. */
html[dir=ltr] .note-open > [dir=rtl]{text-align:left}
.note-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font:700 16.5px/1.5 var(--f-text)}
.note-open.unread{border-color:rgba(245,184,46,.5);background:rgba(245,184,46,.08)}
.note-open.unread:hover{border-color:var(--gold)}
.ctas.row{margin-top:12px;gap:8px}
.ctas.row .btn{min-height:44px;padding:0 16px;font-size:15px}
.pick{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pick a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px;padding:8px 14px;border-radius:12px;border:1.5px solid var(--field-line);background:var(--field);text-decoration:none;font:500 15.5px/1.4 var(--f-text)}
.pick a[aria-current=true]{border-color:var(--gold);background:rgba(245,184,46,.08)}
.pick small{color:var(--mist-2);font-size:13px}
.stages{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.stages li{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;border:1.5px solid var(--line);color:var(--mist-2);font-size:13.5px}
.stages li b{font:700 14px/1.4 var(--f-text)}
.stages li.done{color:var(--mist);border-color:rgba(124,224,179,.4)}
.stages li.now{color:var(--white);border-color:var(--gold);background:rgba(245,184,46,.08)}
.estimate{margin-top:20px;display:grid;gap:10px}
.estimate h3{margin:10px 0 0;font:700 15px/1.4 var(--f-text);color:var(--gold)}
.estimate > p{margin:0;color:var(--mist);font-size:16px}
.table-wrap{overflow-x:auto}
.lines{width:100%;min-width:480px;border-collapse:collapse;font-size:15px}
.lines caption{text-align:start;font:700 14px/1.6 var(--f-text);color:var(--gold);padding-bottom:6px}
.lines th,.lines td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:start}
.lines thead th{font:700 13px/1.4 var(--f-text);color:var(--mist-2)}
.lines td.num,.lines th .num{white-space:nowrap}
.lines tr.group th{font:700 13.5px/1.4 var(--f-text);color:var(--mist);background:rgba(255,255,255,.04)}
.lines tfoot th{font-weight:500;color:var(--mist)}
.lines tr.total th,.lines tr.total td{font:800 17px/1.4 var(--f-display);color:var(--white);border-bottom:none}
/* A line kept in the language it was written in, and a figure that reads its own way (a quantity left to right, an
   amount in riyals right to left), sit on the side of the table's own language, under their headings. */
html[dir=ltr] .lines td[dir],html[dir=ltr] .lines td.num{text-align:left}
html[dir=rtl] .lines td[dir],html[dir=rtl] .lines td.num{text-align:right}
.answer{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));margin-top:20px}
.input.digits{max-width:12ch;letter-spacing:.3em}
/* The photos and videos of the fault, beside what they show: of the fault as a whole above the lines, of a line in a
   row of its own under it. A photo fills its frame and opens whole; a video keeps its own shape inside it. */
.proofs{list-style:none;margin:0;padding:0;display:grid;gap:var(--s1);grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}
.proofs figure{margin:0;display:grid;gap:4px;min-width:0}
.proofs img,.proofs video{display:block;width:100%;aspect-ratio:4/3;border-radius:12px;border:1.5px solid var(--line);background:var(--navy-2)}
.proofs img{object-fit:cover}
.proofs video{object-fit:contain}
.proofs figcaption{font-size:14px;line-height:1.5;color:var(--mist);overflow-wrap:anywhere}
.lines tr.proof-row td{padding-top:0}
.lines tr:has(+ tr.proof-row) > *{border-bottom:none}
.old-part{display:inline-block;font-size:14px;color:var(--mist)}
.old-part .num{white-space:nowrap}
/* The warranty a line of work carries, under it on the estimate and the invoice. */
.warranty{display:inline-block;font-size:14px;color:var(--mist)}
/* The inspection report: what was found, red first. Each point wears its colour as a dot and as the colour's word beside
   its name, never the colour alone; a red or yellow point is edged in its colour too. */
.report{display:grid;gap:8px}
.report-sum{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--mist)}
.report-tally{display:inline-flex;align-items:center;gap:6px}
.report-points{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.report-point{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:start;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:rgba(255,255,255,.03)}
.report-point p{margin:2px 0 0;color:var(--mist);font-size:15px;overflow-wrap:anywhere}
.report-point .report-head{margin:0;color:var(--white)}
.report-point .proofs{margin-top:8px}
.report-said{font:700 13.5px/1.4 var(--f-text);margin-inline-start:6px;white-space:nowrap}
.report-line{font-size:13.5px}
.report-mark{display:inline-block;width:12px;height:12px;border-radius:50%;flex:none;background:var(--mist-2)}
.report-point > .report-mark{margin-top:.55em}
.is-red .report-mark{background:var(--error)}
.is-amber .report-mark{background:var(--gold)}
.is-green .report-mark{background:var(--ok)}
.report-point.is-red{border-color:rgba(255,138,128,.55)}
.report-point.is-amber{border-color:rgba(245,184,46,.5)}
.is-red .report-said{color:var(--error)}
.is-amber .report-said{color:var(--gold)}
.is-green .report-said{color:var(--ok)}
.is-na .report-said{color:var(--mist-2)}

/* ---------- the account's invoices: a tax invoice that prints as it reads ---------- */
.invoice{margin-top:var(--s3);padding:var(--s3);border-radius:18px;border:1.5px solid var(--line);background:rgba(255,255,255,.03);display:grid;gap:var(--s2)}
.inv-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:var(--s2) var(--s4)}
.inv-seller{display:flex;gap:var(--s2);align-items:flex-start;min-width:0}
.inv-seller img{width:44px;height:44px;border-radius:23%;flex:none}
.inv-seller b{display:block;font:800 19px/1.35 var(--f-display)}
.inv-seller p{margin:2px 0 0;color:var(--mist);font-size:14px}
.inv-title{text-align:end}
.invoice .inv-title h2{font-size:clamp(20px,2vw,24px);line-height:1.3}
.inv-title p{margin:4px 0 0;color:var(--mist);font-size:14.5px}
/* Four facts to a row on paper and on a tablet, rather than three and one left over. */
.invoice .acct-facts{margin:0;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.lines tr.due th,.lines tr.due td{font-weight:700;color:var(--gold);border-bottom:none}
.inv-foot{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s3)}
.inv-paid{flex:1 1 260px;min-width:0}
.inv-paid p{margin:0}
.inv-payments{list-style:none;margin:var(--s1) 0 0;padding:0;display:grid;gap:4px;color:var(--mist);font-size:14.5px}
/* The code is dark on white whatever the page around it, with its quiet zone inside the white. */
.qr-box{margin:0;display:grid;gap:6px;justify-items:center;flex:none}
.qr{display:block;width:148px;height:148px;border-radius:8px;background:#fff}
.qr-box figcaption{font:500 12.5px/1.4 var(--f-text);color:var(--mist-2);text-align:center;max-width:160px}
/* The number in the page's title is one word: it moves to a line of its own rather than breaking at its dashes. */
.panel h1 .num{white-space:nowrap}
/* On a phone a table of lines becomes a list, so no figure is out of sight: each line its name across, under it
   "quantity × unit price" and its amount at the end; each total its name and, at the end of its row, its figure. The
   figures sit by the page's direction and read by their own; a line written in the other language keeps its own. */
@media (max-width:640px){
  .lines.stack{min-width:0}
  .lines.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .lines.stack caption,.lines.stack tbody,.lines.stack tfoot{display:block}
  .lines.stack tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s1);padding:var(--s1) 0;border-bottom:1px solid var(--line)}
  .lines.stack tr.total,.lines.stack tr.due{border-bottom:none}
  .lines.stack th,.lines.stack td{display:block;padding:0;border:0}
  .lines.stack td.num{direction:inherit}
  html .lines.stack td[dir]{text-align:start}
  .lines.stack th{flex:1 1 auto;min-width:0}
  .lines.stack tbody td:first-child{flex:1 1 100%}
  .lines.stack tbody td:nth-child(2):not(:last-child),.lines.stack tbody td:nth-child(3):not(:last-child){color:var(--mist)}
  .lines.stack tbody td:nth-child(3):not(:last-child)::before{content:"× "}
  .lines.stack td:last-child{margin-inline-start:auto}
  .lines.stack tbody td:nth-child(4){font-weight:700}
  .lines.stack tr.proof-row td{flex:1 1 100%;margin-inline-start:0;font-weight:400}
  /* What is said under a line (its warranty, its old part, its photos) reads as the line's, not as a row of its own. */
  .lines.stack tr:has(+ tr.proof-row){border-bottom:none;padding-bottom:2px}
  /* A fleet's statement on a phone: each movement its date and item on a line, then its figures, each named. */
  .lines.ledger{min-width:0}
  .lines.ledger thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .lines.ledger tbody,.lines.ledger tfoot{display:block}
  .lines.ledger tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s2);padding:var(--s1) 0;border-bottom:1px solid var(--line)}
  .lines.ledger th,.lines.ledger td{display:block;padding:0;border:0}
  .lines.ledger td:empty{display:none}
  .lines.ledger tbody tr:not(.group) td:nth-child(2){flex:1 1 100%}
  .lines.ledger td[data-label]::before{content:attr(data-label) " ";color:var(--mist-2)}
  .lines.ledger td:last-child,.lines.ledger tr > th + td{margin-inline-start:auto;font-weight:700}
}

/* ---------- roadside from the browser: the request, its estimate, and the request as it goes ---------- */
.locate{justify-self:start}
/* The estimate's usual four facts (the fault, where, the address, the vehicle) two to a row where two fit, one under the
   other where they do not: never three and one left over. Two, three or five keep the account's own grid. */
.quote-facts:has(> div:nth-child(4):last-child){grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}
.reach-now{display:flex;flex-wrap:wrap;gap:var(--s1)}
@media (max-width:860px){.reach-now .btn{flex:1;min-height:50px;padding:0 var(--s2)}}
.quote{padding:var(--s2);border-radius:14px;border:1.5px solid rgba(245,184,46,.5);background:rgba(245,184,46,.08)}
.quote p{margin:0}
.quote p + p{margin-top:var(--s1)}
.quote-total{font:800 clamp(24px,2.6vw,30px)/1.3 var(--f-display)}
.form-actions.answer-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
/* Where the request stands across the page; under it what it is (the technician, what waits for an answer, the price,
   the bill) beside what the customer may do with it (rate it, cancel it) from 1000 px, one under the other below.
   Every column is as wide as the page allows and no wider: a long button or table never pushes it past the screen. */
.road-live{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
/* Its six stages in rows that come out even, never one left alone: two to a row, three from 640 px, all six from 1100. */
.road-live > .stages{margin-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.road-live > .stages{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.road-live > .stages{grid-template-columns:repeat(6,minmax(0,1fr))}}
.road-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4) var(--s5);align-items:start}
.road-main,.road-side{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2);min-width:0}
.road-main > .note,.road-main > .acct-meta{margin:0}
.road-main > .sub-h{margin:var(--s2) 0 0}
.road-side .sub-h{margin-top:0}
/* With nothing left to do (cancelled, or done and rated) the request's column keeps the width it has beside the other. */
@media (min-width:1000px){.road-cols{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}}
/* The technician's card: his photo (or his initial) and who he is side by side at any width, and under them, at the
   card's end, the ways to reach him. */
.tech{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding:var(--s2);border-radius:16px;border:1.5px solid var(--line);background:rgba(255,255,255,.04)}
.tech-who{flex:1 1 0;min-width:0}
.tech .ctas.row{margin:0;flex:1 1 100%;justify-content:flex-end}
.avatar{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--navy-2);border:1.5px solid var(--line);font:800 26px/1 var(--f-display);color:var(--white)}
/* His initial lies under his photo: it shows while the photo comes, and stays if the photo cannot be shown. */
.face{position:relative;flex:none;width:64px;height:64px}
.face > img.avatar{position:absolute;inset:0;background:none}
.tech .acct-head{display:block;font-size:16px}
/* His plate is one word: it moves to a line of its own rather than part its letters from its number. */
.tech-who .num{white-space:nowrap}
.tech .stars{color:var(--gold);margin-inline-end:.3em}
.tech .arrive b{color:var(--gold)}
/* The live map above the card: as tall as a phone can spare, taller on a wide screen. Google draws it left to right
   inside its canvas; the button that frames the technician and the customer again sits on it at the line's start. */
.road-map{position:relative;height:300px;border-radius:16px;overflow:hidden;border:1.5px solid var(--line);background:var(--navy-2)}
.road-map[hidden]{display:none}
@media (min-width:860px){.road-map{height:380px}}
.road-map-canvas{position:absolute;inset:0;direction:ltr}
.road-map-center{position:absolute;z-index:2;inset-block-start:12px;inset-inline-start:12px;min-height:40px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line);background:rgba(6,20,55,.9);color:var(--white);font:700 14px/1 var(--f-text);cursor:pointer}
.road-map-center[hidden]{display:none}
.road-map-center:hover{border-color:var(--gold)}
/* The truck is centred on his point, and turns about its own middle. */
.road-mark.is-truck{transform:translateY(50%)}
.road-mark-truck{display:block;transform-origin:50% 50%;transition:transform .5s ease-out;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.road-mark-pin{display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
.ask{display:grid;gap:var(--s1);padding:var(--s2) var(--s3);border-radius:16px;border:1.5px solid rgba(245,184,46,.55);background:rgba(245,184,46,.07)}
.ask h2{font-size:clamp(20px,2vw,24px)}
.ask > p{margin:0}
.ask .answer{margin-top:var(--s1)}
/* A button that carries an amount takes two lines on a phone rather than run past its box. */
.ask .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.35;padding-block:var(--s1)}
.rate .stars{color:var(--gold);letter-spacing:.1em}
@media (max-width:640px){.ask{padding:var(--s2)}}
/* ---------- the one way in: one question a screen ---------- */
/* A narrow column in the middle of the page: the mark on its navy tile, the question, one field, one gold button.
   On the first screen the other ways in follow "or" as outlined buttons, stacked so another fits above the e-mail
   one, then a quiet line to find an account and the small consent. Every later screen opens with the way back. */
.panel.door{max-width:480px;gap:var(--s2)}
.door h1{font-size:clamp(28px,3.4vw,38px);line-height:1.3}
html[lang=en] .door h1{font-size:clamp(26px,3vw,34px)}
.door .lead{margin:0;font-size:16.5px}
.door .label{margin:0}
.door ul.points{margin:0}
.door .ctas{margin-top:0}
.door-cover{display:grid;place-items:center;padding:var(--s4) var(--s2);border-radius:20px;background:linear-gradient(135deg,#17399A,#040C26);border:1px solid var(--panel-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.door-cover img{width:104px;height:104px;border-radius:23%;box-shadow:0 18px 40px -16px rgba(31,94,255,.95)}
.door-form{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
.btn.door-main,.door-ways .btn,.door > .btn{width:100%}
/* The fixed country code and the number, read left to right in either language. */
.phone-in{display:flex;align-items:stretch}
.phone-in .cc{flex:none;display:flex;align-items:center;padding:0 var(--s2);border:1.5px solid var(--field-line);border-right:0;border-radius:12px 0 0 12px;background:rgba(255,255,255,.04);font:700 16px/1 var(--f-text);color:var(--mist);font-variant-numeric:tabular-nums}
.phone-in .input{min-width:0;border-radius:0 12px 12px 0}
.input.code-in{font-size:22px;letter-spacing:.35em;text-align:center;font-variant-numeric:tabular-nums}
.door-or{display:flex;align-items:center;gap:var(--s2);margin:0;color:var(--mist-2);font:500 14px/1 var(--f-text)}
.door-or::before,.door-or::after{content:"";flex:1;height:1px;background:var(--line)}
.door-ways{display:grid;gap:var(--s1)}
.door-ways svg,.door-find svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.door-rule{height:1px;background:var(--line)}
.door-find{display:inline-flex;align-items:center;gap:var(--s1);justify-self:start;min-height:44px;color:var(--mist);font:500 15px/1.4 var(--f-text);text-decoration:none}
.door-find:hover{color:var(--white)}
.door-consent{margin:0;color:var(--mist-2);font:500 13px/1.6 var(--f-text)}
.door-back-form{margin:0}
.door-back{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:rgba(255,255,255,.06);color:var(--white)}
.door-back:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.door-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* The arrow points back the way the text came from. */
html[lang=en] .door-back svg{transform:scaleX(-1)}
.door-quiet{display:grid;gap:4px;justify-items:start}
.door-quiet p{margin:0;color:var(--mist);font-size:15px}
.door .choice a{color:var(--white)}
/* A form's button that reads as a link: the quiet ways under a code. */
.link-btn{justify-self:start;min-height:44px;padding:0;border:0;background:none;color:var(--white);font:700 15px/1.4 var(--f-text);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:5px}
.link-btn:hover{text-decoration-color:var(--gold)}
.link-btn.quiet{color:var(--mist);font-weight:500}
.link-btn[disabled]{color:var(--mist-2);cursor:default;text-decoration-color:transparent}

/* In the bar, the account's way in keeps its icon on a phone and gives way first on the narrowest screens. */
@media (max-width:640px){.pill.account-top span{display:none}.pill.account-top{width:44px;padding:0}}
@media (max-width:380px){.pill.account-top{display:none}}

/* ---------- footer ---------- */
.foot{position:relative;z-index:1;border-top:1px solid var(--line);background:rgba(6,20,55,.72);padding:36px var(--gutter) calc(36px + env(safe-area-inset-bottom,0px))}
.foot-in{width:100%;max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,.8fr);gap:28px}
.foot-id{display:flex;gap:14px;align-items:flex-start}
.foot-id img{width:40px;height:40px;border-radius:23%;flex:none}
.foot-id b{display:block;font:800 18px/1.3 var(--f-display)}
.foot p{margin:4px 0 0;color:var(--mist-2);font-size:14.5px;line-height:1.6}
.foot .foot-h{margin:0 0 6px;font:700 13px/1.4 var(--f-text);color:var(--gold)}
.foot-col{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.foot-col a{color:var(--mist);text-decoration:none;font-size:14.5px;line-height:1.6}
.foot-col a:hover{color:var(--white)}
.foot-branch{display:flex;flex-direction:column;gap:2px;align-items:flex-start;margin-bottom:8px}
.foot-branch b{font:700 15px/1.5 var(--f-text)}
@media (max-width:860px){.foot-in{grid-template-columns:minmax(0,1fr)}}

/* ---------- the phone bar: call, WhatsApp, book — under the thumb on every page ---------- */
.phonebar{display:none}
@media (max-width:640px){
  .phonebar{position:fixed;bottom:0;inset-inline:0;z-index:14;display:flex;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(6,20,55,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .phonebar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:12px;border:1.5px solid var(--line);font:700 15px/1 var(--f-text);text-decoration:none;color:var(--white)}
  .phonebar a.gold{background:var(--gold);border-color:var(--gold);color:var(--navy)}
  .phonebar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}
}

/* ---------- phone ---------- */
@media (max-width:860px){
  h1{font-size:clamp(44px,13vw,64px)}
  h2{font-size:clamp(30px,8.6vw,42px)}
  .lead{font-size:16.5px;margin-top:var(--s1)}
  .ctas{gap:var(--s1);margin-top:var(--s3)}
  .ctas .btn{min-height:50px;padding:0 var(--s2);flex:1}
  .btn .num{display:none}
  .way{padding:var(--s2)}
  .way h2,.way h3{font-size:19px}
  .way p,.hire p{font-size:15px}
  .contact dd{font-size:17px}
  /* the home page: the same parts closer together, so the whole of it is a few screens */
  .home{padding-top:calc(var(--top) + var(--s2) + env(safe-area-inset-top,0px));padding-bottom:var(--s4)}
  .hero{gap:var(--s3)}
  .facts{margin-top:var(--s2);font-size:14.5px}
  .need{padding:var(--s2);border-radius:24px}
  .need-tiles{gap:var(--s1)}
  .band,.wide-photo{margin-top:var(--s4)}
  .steps,.ways,.reach{margin-top:var(--s2);gap:var(--s1)}
  .step,.reach-row{padding:var(--s2)}
  /* a step's number beside its title, its text the full width under both */
  .step::before{grid-row:1}
  .step > p,.step > ul{grid-column:1 / -1}
  .step > p{font-size:15px}
  .more{margin-top:var(--s1)}
  .hire{margin-top:var(--s2);padding-top:var(--s2)}
}
@media (prefers-reduced-motion:reduce){
  .menu a::after,.btn,.need-tile,.cat-card,.road-mark-truck{transition:none}
  .btn:hover{transform:none}
}
/* What only paper needs, such as the full address of a link. */
.print-only{display:none}
@media print{
  .print-only{display:inline}
  body{background:#fff;color:#000;padding-bottom:0}
  .top,.glow,.gridbg,.sheet,.phonebar,.skip{display:none!important}
  .home,.page{padding-top:0}
  .panel,.need{background:#fff;color:#000;border:1px solid #999;box-shadow:none;backdrop-filter:none}
  /* An invoice on paper (or in a PDF) is the invoice alone, black on white: no menu, no buttons, no footer. */
  .foot,.acct-nav,.no-print,.ctas,form,.alert,.success{display:none!important}
  .page{min-height:0;padding-bottom:0}
  .panel{border:0;padding:0}
  .invoice{border:0;padding:0;background:none}
  .invoice,.invoice *{color:#000!important}
  .lines th,.lines td{border-bottom-color:#999}
  .lines tr.group th{background:none}
  .badge,.badge.on{border-color:#999;background:none}
  .table-wrap{overflow:visible}
  .lines{min-width:0}
  /* A line, the head and the code each stay whole on one sheet; the code is drawn at a size a reader scans on paper. */
  .lines tr,.inv-head,.inv-foot{break-inside:avoid}
  .qr{width:35mm;height:35mm}
  /* The report on paper: black words, each point's colour kept in its dot. */
  .report-point{background:none;border-color:#999;break-inside:avoid}
  .report-point p,.report-point .report-head,.report-said,.report-sum{color:#000!important}
  .report-mark{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* The trial copy (Staging): a band above the top bar of every page, saying it is not the real one. On paper it stays. */
.trial-band{position:fixed;top:0;inset-inline:0;z-index:300;min-height:28px;padding:4px var(--gutter);display:flex;align-items:center;justify-content:center;background:#B3261E;color:#fff;font:700 13px/1.4 var(--f-text);text-align:center}
body:has(.trial-band){padding-top:28px}
body:has(.trial-band) .top,body:has(.trial-band) .sheet{top:28px}