/* ------------------------------------------------------------------
   A to Z Autoparts (Midlands) Ltd — atoz-factor.css
   Motor factor, Highgate, Birmingham. Company No. 05210705.

   Full-page layout in the manner of a mid-2010s trade supplier site:
   nothing is boxed. The masthead, the title band, the photographic
   strips, the dark particulars band and the footer all run the whole
   width of the window; a 1280px measure is centred inside each. The
   left-hand navigation column stays, and the content column takes the
   rest of the width. Sections are told apart by ground colour, not by
   outlines — the stylesheet carries eight hairline rules in total.
   Written for this site only.
   ------------------------------------------------------------------ */

:root{
  --blue:#0b5c99;
  --blue-dp:#0a4a7c;
  --blue-md:#1a72b4;
  --blue-pale:#cfdcea;
  --blue-rule:#2a6395;
  --blue-wash:#eaf0f6;
  --red:#c62111;
  --red-dk:#98190c;
  --grey:#e8eaed;
  --paper:#eef2f6;
  --paper-dk:#e2e8ee;
  --white:#fff;
  --ink:#1a1e24;
  --muted:#4a525e;
  --line:#b9c0c8;
  --line-lt:#d3d8de;

  /* one measure for the whole site. Every band is as wide as the window;
     --edge is the space either side that holds its contents to the measure. */
  --shell:1280px;
  --pad:30px;
  --nav:210px;
  --gap:36px;
  --edge:max(var(--pad), calc(50vw - var(--shell)/2 + var(--pad)));

  --sans:"Segoe UI",Tahoma,Geneva,Verdana,Arial,sans-serif;
  --mono:"Lucida Console","Courier New",Courier,monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--white);height:100%}
/* the bands stack; the nav/content band takes up any slack so that a short
   page still puts its footer at the bottom of the window */
body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  min-height:100%;
  display:flex;
  flex-direction:column;
}
body > *{flex:0 0 auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
a:hover{color:var(--red-dk)}
h1,h2,h3,h4{line-height:1.24;font-weight:700;color:var(--blue-dp)}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--red);
  outline-offset:1px;
}

/* every full-width band holds its content to the same centred measure */
.az-shell,.az-wrap{
  max-width:none;margin:0;
  padding-left:var(--edge);padding-right:var(--edge);
}
.az-mt{margin-top:16px}

.az-skip{
  position:absolute;left:-9999px;top:0;background:var(--red);
  color:var(--white);padding:8px 14px;font-weight:700;font-size:13px;z-index:200;
}
.az-skip:focus{left:0}

/* ---------- masthead: deep blue band, wordmark left, enquiry block right ---------- */
.az-plate{
  background:var(--blue-dp);
  background:linear-gradient(#0d5589,var(--blue-dp));
  border-bottom:3px solid var(--red);
  color:#dbe6f0;
}
.az-plate-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding-top:15px;padding-bottom:15px;
}
.az-plate a:focus-visible,.az-plate button:focus-visible{outline-color:var(--white)}

.az-mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.az-mark svg{flex:none;display:block;width:48px;height:48px}
.az-mark-name{
  display:block;font-size:26px;font-weight:700;color:var(--white);
  letter-spacing:.01em;line-height:1.15;
}
.az-mark-sub{
  display:block;font-size:11.5px;color:#b8d2e6;
  text-transform:uppercase;letter-spacing:.11em;margin-top:2px;
}

.az-call{
  flex:none;text-align:right;border:1px solid #3c7bad;
  background:#08406c;padding:8px 14px;border-radius:2px;max-width:380px;
}
.az-call-h{
  display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:#b8d2e6;
}
.az-call-no{
  display:block;font-family:var(--mono);font-size:15px;font-weight:700;
  color:var(--white);margin:2px 0 1px;
}
.az-call-no a{color:var(--white);text-decoration:none}
.az-call-no a:hover{text-decoration:underline}
.az-call-sub{display:block;font-size:11.5px;color:#bcd3e6;line-height:1.5}
.az-call-sub b{color:var(--white);font-weight:700}

.az-menu{
  display:none;font-family:inherit;font-size:13px;font-weight:700;
  color:var(--white);background:#08406c;border:1px solid #3c7bad;
  border-radius:2px;padding:7px 14px;cursor:pointer;
}

/* ---------- home introduction: full-width band under the masthead ---------- */
.az-hero{
  background:linear-gradient(#eff4f9,#d9e4ee);
  border-bottom:4px solid var(--blue);
}
.az-hero-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:44px;align-items:center;
  padding-left:var(--edge);padding-right:var(--edge);
}
.az-hero-copy{padding:34px 0 36px}
.az-kicker{
  display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--red-dk);border-bottom:2px solid var(--red);
  padding-bottom:3px;margin-bottom:12px;
}
.az-hero h1{font-size:37px;line-height:1.15;margin-bottom:10px;max-width:15em}
.az-hero h1 em{font-style:normal;color:var(--red-dk)}
.az-hero p{margin-top:9px;font-size:15.5px;color:#333a44;max-width:44em}
.az-hero-art{align-self:stretch;display:flex}
.az-hero-art img{width:100%;height:100%;min-height:250px;object-fit:cover}

/* ---------- page title: full-width band under the masthead ---------- */
.az-pagehead{
  background:linear-gradient(#eff4f9,#d9e4ee);
  border-bottom:4px solid var(--blue);
  padding:30px 0 28px;
}
.az-pagehead h1{font-size:33px}
.az-pagehead p{margin-top:9px;font-size:15.5px;color:#39424e;max-width:56em}

/* ---------- page frame: left navigation column, content takes the rest ---------- */
.az-page{
  display:grid;grid-template-columns:var(--nav) minmax(0,1fr);
  column-gap:var(--gap);align-items:start;
  padding-bottom:0;
  background:var(--white);
  flex:1 0 auto;
}

/* the rail is one continuous ground the height of the content beside it,
   in the manner of a faux column, rather than a stack of boxed panels */
.az-col{
  position:relative;z-index:1;align-self:stretch;
  background:#f3f6f9;padding:0 0 30px;
}
.az-side{background:transparent}
.az-side-h{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--white);background:var(--blue);padding:9px 14px;
}
.az-side ul{list-style:none}
.az-side li{border-top:1px solid #e3e9ee}
.az-side li:first-child{border-top:0}
.az-side a{
  display:block;padding:10px 14px;font-size:14px;font-weight:700;
  color:var(--blue-dp);text-decoration:none;
}
.az-side a:hover{background:var(--paper-dk);color:var(--red-dk)}
.az-side a[aria-current="page"]{
  background:var(--white);color:var(--red-dk);
  box-shadow:inset 4px 0 0 var(--red);
}

/* the contact panel that sits under the navigation in the left column */
.az-sidebox{margin-top:22px}
.az-sidebox-in{padding:12px 14px 0;font-size:13px;line-height:1.5;color:var(--muted)}
.az-sidebox-in p{margin-bottom:11px}
.az-sidebox-in b{
  display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;color:var(--blue-dp);
}
.az-sidebox-in a{color:var(--blue);font-weight:700}
.az-sidebox-in .az-sb-em{font-size:12px;word-break:break-all}

/* inside the content column the measure is already set by the column itself,
   except for running prose, which is held to a readable line length */
#main{min-width:0}
#main .az-wrap{max-width:none;margin:0;padding:0}
#main .az-prose{max-width:54em}

/* ---------- buttons ---------- */
.az-btnrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.az-btn{
  display:inline-block;font-family:inherit;font-size:13px;font-weight:700;
  line-height:1.5;padding:8px 18px;border:1px solid;border-radius:2px;
  text-decoration:none;cursor:pointer;
}
.az-btn-red{
  background:linear-gradient(#d5301e,#b81c0e);border-color:#8f1509;color:var(--white);
}
.az-btn-red:hover{background:#98190c;color:var(--white)}
.az-btn-blue{
  background:linear-gradient(#1a72b4,#0b5c99);border-color:#084670;color:var(--white);
}
.az-btn-blue:hover{background:#0a4a7c;color:var(--white)}
.az-btn-ghost{
  background:linear-gradient(#fdfdfe,#e4e7eb);border-color:#a9b1bb;color:var(--blue-dp);
}
.az-btn-ghost:hover{background:#e8eaed;color:var(--red-dk)}

/* ---------- content bands: ground colour separates them, nothing else ---------- */
.az-sec{padding:38px 0;background:var(--white)}
.az-sec-white{background:var(--white)}
/* the pale band widens past the text on both sides without leaving the column */
.az-sec-paper{
  background:var(--paper);
  margin-left:-16px;margin-right:-16px;
  padding-left:16px;padding-right:16px;
}
/* the dark band sits outside the nav/content grid and crosses the whole window,
   a shade lighter than the footer it runs into */
.az-sec-ink{
  background:linear-gradient(#0e6299,#0a5386);color:#dbe6f0;
  padding:48px 0 52px;
}
.az-sec-ink .az-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.az-sec-ink h2,.az-sec-ink h3{color:var(--white)}
.az-sec-ink a{color:#cfe0ef}
.az-sec-ink .az-btn-ghost{color:var(--blue-dp)}
.az-sec-ink .az-btn-ghost:hover{color:var(--red-dk)}
.az-sec-ink .az-btn-red,.az-sec-ink .az-btn-blue{color:var(--white)}
.az-sec-ink .az-kicker{color:#ffc7bd;border-bottom-color:#ffc7bd}

.az-head{margin-bottom:20px}
.az-num{
  display:block;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--red-dk);margin-bottom:5px;
}
.az-sec-ink .az-num{color:#ffb3a6}
.az-head h2{font-size:25px;letter-spacing:-.005em}
.az-head p{margin-top:10px;color:var(--muted);max-width:54em;font-size:14.5px}
.az-sec-ink .az-head p{color:#c3d6e6}

.az-prose{max-width:52em}
.az-prose p{margin-bottom:12px}
.az-prose h2{font-size:19px;margin:24px 0 8px}
.az-prose h3{font-size:14.5px;margin:18px 0 5px;color:var(--ink)}
.az-prose ul{margin:0 0 12px 20px}
.az-prose li{margin-bottom:4px}
.az-prose a{font-weight:700}

/* ---------- ticket blocks, laid across the full column width ---------- */
.az-tickets{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.az-ticket{background:var(--paper);border-top:3px solid var(--blue);padding:16px 18px}
.az-sec-paper .az-ticket{background:var(--white)}
.az-sec-ink .az-ticket{background:#0d5589;border-top-color:var(--red)}
.az-ref{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--red-dk);margin-bottom:6px;
}
.az-sec-ink .az-ref{color:#ffb3a6}
.az-ticket h3{font-size:15.5px}
.az-ticket p{margin-top:6px;color:var(--muted);font-size:13.5px}
.az-sec-ink .az-ticket p{color:#c3d6e6}

/* ---------- split blocks ---------- */
.az-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
.az-split-3{grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr)}
.az-figure{background:var(--paper);padding:8px}
.az-sec-paper .az-figure{background:var(--white)}
.az-figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.az-figure figcaption{
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:7px 2px 2px;
}

/* ---------- photographic strip, window edge to window edge ---------- */
.az-band{position:relative;background:var(--blue-dp)}
.az-band img{width:100%;height:210px;object-fit:cover;opacity:.42}
.az-band-txt{
  position:absolute;inset:0;display:flex;align-items:center;
  padding-left:var(--edge);padding-right:var(--edge);
}
.az-band-txt p{
  color:var(--white);font-size:26px;font-weight:700;
  line-height:1.3;text-shadow:0 1px 0 #062f4f;
}
.az-band-txt span{color:#ffc7bd}

/* ---------- numbered steps, run across the column ---------- */
.az-steps{
  counter-reset:step;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2px;
  background:var(--paper-dk);
}
.az-step{background:var(--paper);padding:18px 20px 20px}
.az-sec-paper .az-step{background:var(--white)}
.az-step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  display:block;font-family:var(--mono);font-size:28px;font-weight:700;
  color:#9db6cd;line-height:1;margin-bottom:10px;
}
.az-step h3{font-size:15px;margin-bottom:4px}
.az-step p{color:var(--muted);font-size:13.5px}

/* ---------- particulars table, full width of whatever holds it ---------- */
.az-spec{width:100%;border-collapse:collapse}
.az-spec th,.az-spec td{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-lt);
  font-size:14px;vertical-align:top;
}
.az-spec tr:first-child th,.az-spec tr:first-child td{border-top:1px solid var(--line-lt)}
.az-spec th{
  width:24%;background:var(--paper);font-weight:700;color:var(--blue-dp);
}
.az-spec td{font-family:var(--mono);font-size:13px;color:var(--ink)}
.az-spec caption{text-align:left;margin-bottom:8px}
.az-sec-paper .az-spec th{background:var(--paper-dk)}
.az-sec-ink .az-spec th{background:#083a63;color:#cfe0ef}
.az-sec-ink .az-spec td{color:#e2edf6}
.az-sec-ink .az-spec th,.az-sec-ink .az-spec td{border-color:var(--blue-rule)}
.az-sec-ink .az-spec caption{color:#ffb3a6}

/* ---------- checklist ---------- */
.az-check{list-style:none;margin:0}
.az-check li{position:relative;padding:6px 0 6px 18px;border-bottom:1px dotted var(--line)}
.az-check li:last-child{border-bottom:0}
.az-check li::before{
  content:"";position:absolute;left:0;top:13px;width:7px;height:7px;background:var(--red);
}
.az-sec-ink .az-check li{border-bottom-color:var(--blue-rule)}

/* ---------- callout ---------- */
.az-callout{background:var(--paper);border-left:4px solid var(--blue);padding:16px 20px}
.az-sec-paper .az-callout{background:var(--white)}
.az-callout h2,.az-callout h3{
  font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);
  margin-bottom:8px;
}
.az-callout p{color:var(--muted);font-size:14px}
.az-callout p + p{margin-top:9px}

/* ---------- contact ---------- */
.az-contact-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:44px;align-items:start}

.az-form{background:var(--paper);padding:20px 22px}
.az-sec-paper .az-form{background:var(--white)}
.az-field{margin-bottom:14px}
.az-field label{
  display:block;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;margin-bottom:4px;color:var(--blue-dp);
}
.az-field input,.az-field select,.az-field textarea{
  width:100%;padding:8px 10px;border:1px solid #96a0ac;
  background:var(--white);font-family:inherit;font-size:14px;color:var(--ink);border-radius:2px;
}
.az-field textarea{min-height:110px;resize:vertical}
.az-field input:focus,.az-field select:focus,.az-field textarea:focus{background:#fffdf6}
.az-hint{font-size:12.5px;color:var(--muted);margin-top:3px}
.az-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.az-notice{
  background:var(--blue-wash);border-left:4px solid var(--blue);
  padding:10px 14px;font-size:13.5px;margin-bottom:16px;
}
.az-formstate{
  margin-top:14px;padding:10px 13px;border:2px dashed var(--red);
  background:#fdf1ef;font-size:13.5px;
}
.az-formstate[hidden]{display:none}

.az-addr{font-style:normal;font-size:14px;line-height:1.75}
.az-ph{
  font-family:var(--mono);font-size:12.5px;background:var(--paper-dk);
  padding:2px 6px;display:inline-block;color:#2c3440;
}

/* ---------- credits table ---------- */
.az-credits{width:100%;border-collapse:collapse}
.az-credits th,.az-credits td{
  padding:10px 14px;border-bottom:1px solid var(--line-lt);font-size:13.5px;text-align:left;
}
.az-credits th{
  background:var(--blue);color:var(--white);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.08em;
}
.az-credits tr:nth-child(even) td{background:var(--paper)}
.az-credits td:first-child{font-family:var(--mono);font-size:12.5px}
.az-tablewrap{overflow-x:auto}

/* ---------- footer band ---------- */
.az-foot{
  background:var(--blue-dp);border-top:4px solid var(--red);
  color:#bcd3e6;font-size:13.5px;padding-top:34px;
}
.az-foot-grid{
  display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1.2fr);
  gap:56px;padding-bottom:30px;
}
.az-foot h2{
  color:var(--white);font-size:11.5px;text-transform:uppercase;letter-spacing:.14em;
  border-bottom:1px solid var(--blue-rule);padding-bottom:6px;margin-bottom:10px;
}
.az-foot ul{list-style:none}
.az-foot li{margin-bottom:5px;padding-bottom:5px;border-bottom:1px dotted #235684}
.az-foot li:last-child{border-bottom:0}
.az-foot a{color:#cfe0ef;text-decoration:none}
.az-foot a:hover{color:var(--white);text-decoration:underline}
.az-foot .az-addr{color:#cfe0ef}
/* the registration particulars, set once, quietly, at the foot of every page */
.az-legal p{font-size:12.5px;line-height:1.75;color:#a4bfd6}
.az-legal-lbl{
  margin-top:14px;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;color:#8dafca;
}
.az-legal .az-addr{font-size:13px;line-height:1.7;margin-top:3px}
.az-foot .az-ph{background:#08406c;color:#e2edf6}
.az-foot-btm{background:#083a63;font-size:12.5px}
.az-foot-btm .az-wrap{
  display:flex;flex-wrap:wrap;gap:4px 28px;justify-content:space-between;
  padding-top:12px;padding-bottom:12px;
}

/* ---------- cookie notice ---------- */
.az-cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:var(--blue-dp);border-top:4px solid var(--red);color:#dbe6f0;padding:14px 0;
}
.az-cookie[hidden]{display:none}
.az-cookie .az-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between}
.az-cookie p{font-size:13.5px;max-width:72em}
.az-cookie a{color:#cfe0ef}
.az-cookie-btns{display:flex;gap:9px}

/* ---------- 404 ---------- */
.az-404{
  background:var(--paper);border-top:4px solid var(--red);
  padding:70px 30px 76px;text-align:center;
}
.az-404 .az-ref{letter-spacing:.22em}
.az-404 h1{font-size:34px;margin:6px 0 12px}
.az-404 p{color:var(--muted);max-width:52em;margin:0 auto 14px}
.az-404 .az-btnrow{justify-content:center}

/* ---------- one column ---------- */
@media (max-width:900px){
  :root{--nav:0px;--gap:0px}
  .az-plate-in{flex-wrap:wrap;gap:12px}
  .az-call{text-align:left;max-width:none;flex:1 1 auto}
  .az-menu{display:block}
  .az-page{display:block}
  .az-col{padding:0;background:none}
  .az-side{display:none;margin-top:18px;background:var(--paper)}
  .az-side.is-open{display:block}
  .az-sidebox{display:none}
  .az-hero-grid{grid-template-columns:1fr;gap:0}
  .az-hero-copy{padding:26px 0 28px}
  .az-hero-art{order:-1;margin-left:calc(-1 * var(--edge));margin-right:calc(-1 * var(--edge))}
  .az-hero-art img{min-height:0;height:190px}
  .az-hero h1{font-size:30px}
  .az-pagehead h1{font-size:28px}
  .az-split,.az-split-3,.az-contact-grid,
  .az-sec-ink .az-split{grid-template-columns:minmax(0,1fr);gap:26px}
  .az-sec-ink{padding:34px 0 38px}
  .az-foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  .az-sec{padding:30px 0}
  .az-sec-paper{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .az-head h2{font-size:22px}
  .az-band img{height:150px}
  .az-band-txt p{font-size:21px}
  .az-404{padding-top:52px;padding-bottom:56px}
}
@media (max-width:560px){
  :root{--pad:16px}
  .az-mark-name{font-size:21px}
  .az-mark svg{width:40px;height:40px}
  .az-hero h1{font-size:25px}
  .az-pagehead h1{font-size:24px}
  .az-pagehead{padding:22px 0 20px}
  .az-head h2{font-size:20px}
  .az-field-row{grid-template-columns:1fr}
  .az-foot-grid{grid-template-columns:minmax(0,1fr)}
  .az-tickets{grid-template-columns:minmax(0,1fr)}
  .az-steps{grid-template-columns:minmax(0,1fr)}
  .az-spec th,.az-spec td{display:block;width:100%}
  .az-spec th{border-bottom:0}
  .az-spec tr:first-child td{border-top:0}
  .az-spec td{padding-top:0}
  .az-band img{height:120px}
  .az-band-txt p{font-size:17px}
  .az-404 h1{font-size:26px}
  .az-foot{padding-top:26px}
}