/* fuelfixer.scot
   Register: an established recovery operator, not a consumer app. The reference points
   are Ordnance Survey sheets and engineering documentation — hairline rules, near-square
   corners, one signal colour used only where an action happens, and operational data
   (postcodes, prices, times) set in mono throughout. */

:root{
  --ink:#141B22;          /* near-black slate, body text */
  --ink2:#0E141A;         /* header, answer block */
  --ink3:#26313B;
  --paper:#F6F5F2;        /* warm off-white, paper stock */
  --paper2:#FFFFFF;
  --line:#D8D5CE;         /* hairline rules */
  --line2:#E7E4DE;
  --slate:#5D6771;        /* secondary text */
  --navy:#173A57;         /* primary brand, map highlight */
  --steel:#1F5578;        /* links */
  --signal:#9E2416;       /* the call action. Nothing else uses it. */
  --signal2:#7E1C10;
  --land:#D6DEE4;         /* map fill */
  --land2:#BECCD6;        /* map hover */
  --coast:#A2B1BC;        /* council boundaries */
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Charter","Bitstream Charter","Source Serif 4","Sitka Text",Georgia,"Times New Roman",serif;
  --wrap:1140px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16.5px/1.62 var(--sans);
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--steel);text-underline-offset:2px;text-decoration-thickness:.06em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--steel);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--ink2);color:#fff;padding:10px 14px}

/* ---------- header ---------- */
.top{
  background:var(--ink2);color:#fff;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:16px;padding:0 clamp(14px,4vw,30px);min-height:62px;
  border-bottom:1px solid #000;
}
.brand{display:flex;align-items:center;gap:11px;color:#fff;text-decoration:none}
.brand svg{flex:none}
.brand span{font:600 18px/1.05 var(--serif);letter-spacing:.005em}
.brand small{
  display:block;font:500 9.5px/1.4 var(--mono);letter-spacing:.22em;
  text-transform:uppercase;color:#93A3AF;
}
.top nav{display:flex;flex-wrap:wrap;gap:0 20px;justify-content:center}
.top nav a{color:#C3CDD5;text-decoration:none;font-size:14px;white-space:nowrap}
.top nav a:hover{color:#fff;text-decoration:underline}
.tel{
  background:var(--signal);color:#fff;text-decoration:none;font-weight:600;
  padding:9px 15px;border-radius:2px;white-space:nowrap;font-size:14.5px;
  border:1px solid var(--signal2);letter-spacing:.005em;
}
.tel:hover{background:var(--signal2);color:#fff}

.crumbs{
  max-width:var(--wrap);margin:0 auto;padding:14px clamp(14px,4vw,30px) 0;
  font:400 12px/1.6 var(--mono);color:var(--slate);
}
.crumbs a{color:var(--slate);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs i{font-style:normal;opacity:.5;padding:0 6px}

main{max-width:var(--wrap);margin:0 auto;padding:6px clamp(14px,4vw,30px) 52px}

/* ---------- type ---------- */
h1{
  font:600 clamp(29px,4.4vw,43px)/1.14 var(--serif);
  letter-spacing:-.012em;margin:26px 0 20px;text-wrap:balance;max-width:24ch;
}
h2{
  font:600 clamp(21px,2.6vw,26px)/1.24 var(--serif);
  letter-spacing:-.008em;margin:46px 0 14px;padding-top:18px;
  border-top:1px solid var(--line);text-wrap:balance;
}
h3{font:600 17px/1.35 var(--serif);margin:24px 0 9px}
p{margin:0 0 15px;max-width:72ch}

/* ---------- answer-first block ---------- */
.ans{
  background:var(--ink2);color:#E4E9ED;
  padding:clamp(20px,3vw,28px);margin:0 0 24px;
  border-left:2px solid var(--signal);
}
.ansl{
  display:block;font:500 10px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:#8B9AA6;margin-bottom:13px;
}
.ans p{margin:0 0 13px;font-size:clamp(16.5px,1.7vw,18px);line-height:1.6;max-width:66ch;color:#E4E9ED}
.ans p:last-of-type{margin-bottom:0}
.ansc{margin-top:19px!important}
.cta{
  display:inline-block;background:var(--signal);color:#fff!important;text-decoration:none;
  font-weight:600;padding:11px 19px;border-radius:2px;border:1px solid var(--signal2);
  font-size:15.5px;letter-spacing:.005em;
}
.cta:hover{background:var(--signal2)}

/* ---------- hero ---------- */
.hero{display:grid;gap:24px;align-items:start}
@media(min-width:940px){.hero{grid-template-columns:1.1fr .9fr}.hero .ans{margin-bottom:0}}

/* ---------- map: cartographic, light stock ---------- */
.mapfig{
  margin:0 0 24px;background:var(--paper2);border:1px solid var(--line);padding:14px;
}
.scotmap{display:block;width:100%;height:var(--maph,500px);max-height:72vh}
.cc{fill:var(--land);stroke:var(--coast);stroke-width:.8;transition:fill .12s ease}
a:hover .cc,.cc:hover{fill:var(--land2)}
a:focus-visible .cc{fill:var(--land2);stroke:var(--steel);stroke-width:1.6}
.cc.on{fill:var(--navy);stroke:#FFFFFF;stroke-width:1}
.pin .dot{fill:var(--signal);stroke:#fff;stroke-width:2}
.pin .pulse{fill:none;stroke:#fff;stroke-width:1;opacity:.65}
/* the pin always sits inside its own council, which is filled navy, so the label is
   set white on a dark halo rather than the other way round */
.pinlab{
  /* sized in SVG user units, so it renders consistently at any container width */
  fill:#fff;font:500 21px var(--mono);
  paint-order:stroke;stroke:#0E141A;stroke-width:5px;stroke-linejoin:round;
}
.mapfig figcaption{
  color:var(--slate);font:400 12px/1.6 var(--mono);margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line2);
}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%;margin:0 0 20px;background:var(--paper2);font-size:15px}
caption{
  text-align:left;color:var(--slate);font:400 12.5px/1.6 var(--mono);
  padding:0 0 10px;max-width:74ch;
}
th,td{border:1px solid var(--line2);padding:10px 13px;text-align:left;vertical-align:top}
thead th{
  background:var(--ink2);color:#fff;font:600 11px/1.4 var(--mono);
  letter-spacing:.11em;text-transform:uppercase;
}
tbody th{background:#F1EFEA;font-weight:600;width:33%;font-size:14.5px}
td:nth-child(3),td:nth-child(4){font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.facts td{font-family:var(--mono);font-size:13.5px}
.facts tbody th{width:36%;font-family:var(--sans)}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 20px}
.chips li{
  font:500 12px/1 var(--mono);letter-spacing:.06em;background:var(--paper2);
  color:var(--slate);border:1px solid var(--line);padding:7px 10px;
}

/* ---------- cards ---------- */
.cards{display:grid;gap:1px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  background:var(--line2);border:1px solid var(--line2);margin:0 0 22px}
.card{
  display:block;background:var(--paper2);padding:16px 17px;
  text-decoration:none;color:var(--ink);
}
.card:hover{background:#FBFAF8}
.card b{display:block;font:600 16px/1.3 var(--serif);margin-bottom:6px}
.card:hover b{color:var(--steel)}
.card span{display:block;color:var(--slate);font-size:14px;line-height:1.5}

/* ---------- procedure ---------- */
.howto{counter-reset:s;list-style:none;padding:0;margin:0 0 20px;border-top:1px solid var(--line2)}
.howto li{
  counter-increment:s;position:relative;padding:14px 0 14px 46px;
  border-bottom:1px solid var(--line2);
}
.howto li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:0;top:14px;
  font:500 13px/1.55 var(--mono);color:var(--slate);
}

/* ---------- link mesh ---------- */
.meshbox{margin:28px 0}
.meshbox h3{
  font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--slate);margin:0 0 11px;padding-bottom:9px;border-bottom:1px solid var(--line2);
}
.mesh{display:flex;flex-wrap:wrap;gap:6px}
.mesh a{
  background:var(--paper2);border:1px solid var(--line);
  padding:6px 11px;font-size:13.5px;text-decoration:none;color:var(--ink);
}
.mesh a:hover{border-color:var(--steel);color:var(--steel)}
.mesh a i{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--slate)}

/* ---------- faq ---------- */
.faq{margin:0 0 22px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line2)}
.faq summary{cursor:pointer;padding:14px 4px;font-weight:600;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";float:right;font-family:var(--mono);color:var(--slate);font-weight:400}
.faq details[open] summary::before{content:"\2212"}
.faq p{padding:0 4px 15px;margin:0;color:#38424C}

.terms{columns:2 200px;gap:24px;padding-left:17px;margin:0 0 20px;color:var(--slate);font-size:14px}

/* ---------- reviews ---------- */
.revs{margin:46px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.revs h2{margin-top:0;border:0;padding-top:0}
.revlede{color:var(--slate);font-size:14.5px}
.revagg{font:400 15px/1.6 var(--sans);color:var(--ink);margin-bottom:12px}
.revagg b{font-family:var(--mono);font-weight:600}
.revw{background:var(--paper2);border:1px solid var(--line);padding:17px;min-height:100px}
.revfall{margin:0;color:var(--slate);font:400 13.5px/1.6 var(--mono)}
.rgrid{display:grid;gap:1px;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));background:var(--line2)}
.rcard{padding:15px;background:var(--paper2)}
.rcard .stars{color:var(--navy);font:500 13px/1 var(--mono);letter-spacing:.14em}
.rcard p{font-size:14.5px;margin:8px 0;color:#38424C}
.rcard cite{font:500 12.5px var(--mono);color:var(--slate);font-style:normal}

/* ---------- network panel ---------- */
.net{margin:44px 0 0;border:1px solid var(--line);background:var(--paper2);padding:clamp(18px,2.6vw,26px)}
.net h3{
  margin:0 0 9px;font:500 10.5px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);
}
.net>p{color:var(--ink);font-size:14.5px;max-width:78ch}
.netl{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:1px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));background:var(--line2);border:1px solid var(--line2)}
.netl a{display:block;background:var(--paper2);padding:13px 14px;text-decoration:none;color:var(--ink)}
.netl a:hover{background:#FBFAF8}
.netl b{display:block;font:600 15px/1.3 var(--serif);margin-bottom:4px}
.netl a:hover b{color:var(--steel)}
.netl span{display:block;color:var(--slate);font-size:13px;line-height:1.45}

.src{color:var(--slate);font-size:13.5px;border-top:1px solid var(--line);padding-top:14px;margin-top:28px}

/* ---------- provenance mark ---------- */
.owned{
  display:flex;gap:13px;align-items:flex-start;background:var(--paper2);
  border:1px solid var(--line);padding:14px 16px;margin:0 0 22px;
}
.owned svg{flex:none;margin-top:1px}
.owned p{margin:0;font-size:14.5px;color:var(--ink)}
.owned b{
  display:block;font:500 10px/1.5 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--slate);
}

/* ---------- footer ---------- */
.foot{
  background:var(--ink2);color:#9DAAB4;padding:40px clamp(14px,4vw,30px) 88px;
  font-size:14px;
}
.foot>*{max-width:var(--wrap);margin-left:auto;margin-right:auto}
.foot p{max-width:min(var(--wrap),88ch);margin:0 auto 13px}
.foot strong{color:#fff;font-weight:600}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 auto 18px;padding:17px 0;
  border-block:1px solid var(--ink3)}
.foot a{color:#B8C6D0}
.foot a:hover{color:#fff}
.foot .legal{font-size:12.5px;color:#78868F;line-height:1.7}
.ffline{font-size:14.5px}

.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none}
.sticky a{
  display:block;background:var(--signal);color:#fff;text-align:center;
  padding:14px;font-weight:600;text-decoration:none;font-size:16px;
  border-top:1px solid var(--signal2);
}
@media(max-width:760px){
  .sticky{display:block}
  .foot{padding-bottom:88px}
  .top{grid-template-columns:1fr auto;gap:10px;padding-block:10px}
  .top nav{grid-column:1/-1;justify-content:flex-start;order:3;gap:2px 15px;
    padding-top:9px;border-top:1px solid var(--ink3)}
  h1{margin-top:20px}
  h2{margin-top:36px}
  .terms{columns:1}
  td:nth-child(3),td:nth-child(4){white-space:normal}
}
@media print{.top,.sticky,.net,.mapfig{display:none}}