/*
  Sheds.ie: THE TRADE DOCKET
  One stylesheet for every page (blog.css is folded in here).

  Type:   Archivo (narrow cuts, 800, for headings; normal width for body)
          IBM Plex Mono (field labels, codes, numbers, references)
  Scale:  1.25 from 16px: 13 / 16 / 20 / 25 / 31 / 39 / 49 / 61 / 76
  Space:  4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96
  Colour roles:
    --paper  #F2EEE3  page ground (merchant docket stock)
    --sheet  #FBF9F3  printed sheets and fields
    --ink    #15171A  print: text, rules, dark bands
    --muted  #4F4C44  secondary text
    --rule   #B9B3A3  hairlines only, never text
    --pen    #1F3C9C  ballpoint blue: anything you act on (buttons, links, tick boxes, the stamp)
    --pen-dark        pressed / hover state of the pen
    --carbon #D6DCEC  the duplicate copy behind a sheet (keep a record)
*/

:root{
  --paper:#F2EEE3; --sheet:#FBF9F3; --ink:#15171A; --muted:#4F4C44; --rule:#B9B3A3;
  --pen:#1F3C9C; --pen-dark:#142A72; --carbon:#D6DCEC;
  --t-1:0.8125rem; --t0:1rem; --t1:1.25rem; --t2:1.5625rem; --t3:1.953rem; --t4:2.441rem; --t5:3.052rem; --t6:3.815rem; --t7:4.768rem;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --sans:'Archivo', 'Arial Narrow', Arial, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --wrap:1312px;
  --measure:68ch;
  --narrow:calc(68ch + 2 * var(--s6));
}

/* ======================================================
   Base
   ====================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--t0);line-height:1.5;font-variation-settings:"wdth" 100}
img,svg{max-width:100%}
img{height:auto;display:block}
a{color:var(--pen)}
a:hover{color:var(--pen-dark)}
a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--pen);outline-offset:3px}
p{margin:0 0 var(--s4)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:800;line-height:1.1;margin:0 0 var(--s3);color:var(--ink)}
h1{font-size:var(--t5);font-variation-settings:"wdth" 72;line-height:1;letter-spacing:-0.01em}
h2{font-size:var(--t3);font-variation-settings:"wdth" 75}
h3{font-size:var(--t1);font-variation-settings:"wdth" 80}
h4{font-size:var(--t0);font-variation-settings:"wdth" 85}
strong,b{font-weight:700}
hr{border:0;border-top:2px solid var(--ink);margin:var(--s7) 0}
.wrap,.container{max-width:var(--wrap);margin:0 auto;padding:0 var(--s6)}
.container.narrow,.narrow{max-width:var(--narrow)}
.cond{font-stretch:75%;font-variation-settings:"wdth" 75}
.mono{font-family:var(--mono)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--s4);top:-64px;z-index:10;background:var(--pen);color:var(--sheet);padding:var(--s2) var(--s4);font-weight:700;text-decoration:none}
.skip:focus{top:var(--s2);color:var(--sheet)}

/* ======================================================
   Header
   ====================================================== */
.top{border-bottom:2px solid var(--ink);background:var(--paper);position:relative}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:64px}
.brand{display:flex;align-items:center;gap:var(--s3);color:var(--ink);text-decoration:none}
.brand:hover{color:var(--ink)}
.brand svg{width:36px;height:36px;flex:none}
.brand b{display:block;font-size:var(--t2);font-weight:800;font-variation-settings:"wdth" 75;letter-spacing:0;line-height:1}
.brand small{display:block;font-family:var(--mono);font-size:var(--t-1);color:var(--muted);line-height:1.2;margin-top:2px}
.nav{display:flex;align-items:center;gap:var(--s1)}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;padding:var(--s2) var(--s3);border:2px solid transparent}
.nav a:hover{border-color:var(--ink);color:var(--ink)}
.nav a[aria-current="page"]{border-color:var(--ink);background:var(--sheet)}
.nav a.quote{background:var(--pen);color:var(--sheet);border-color:var(--pen);margin-left:var(--s2)}
.nav a.quote:hover{background:var(--pen-dark);border-color:var(--pen-dark);color:var(--sheet)}
.nav a.quote[aria-current="page"]{background:var(--pen-dark);border-color:var(--ink);box-shadow:4px 4px 0 var(--carbon)}

/* ======================================================
   Buttons
   ====================================================== */
.btn{display:inline-flex;align-items:center;gap:var(--s3);font-family:var(--sans);font-weight:700;font-size:var(--t1);line-height:1.2;text-decoration:none;padding:var(--s3) var(--s5);border:2px solid var(--pen);min-height:56px;cursor:pointer}
.btn > .n{margin-left:calc(-1 * var(--s3))}
.btn .n{font-family:var(--mono);font-size:var(--t0);font-weight:600;display:inline-grid;place-items:center;width:32px;height:32px;border:2px solid currentColor;flex:none}
.btn-fill,.btn-primary{background:var(--pen);color:var(--sheet)}
.btn-fill:hover,.btn-primary:hover{background:var(--pen-dark);border-color:var(--pen-dark);color:var(--sheet)}
.btn-line,.btn-outline,.btn-ghost{background:var(--sheet);color:var(--pen)}
.btn-line:hover,.btn-outline:hover,.btn-ghost:hover{background:var(--sheet);color:var(--pen);box-shadow:4px 4px 0 var(--pen)}
.btn-large{min-height:56px}
.btn-wide{width:100%;justify-content:center}
button.btn{font-family:var(--sans)}
.actions{display:flex;flex-wrap:wrap;gap:var(--s4);margin:var(--s5) 0 0}
.link-arrow{font-weight:700;text-decoration:none;border-bottom:2px solid var(--pen);color:var(--pen)}
.link-arrow:hover{background:var(--carbon);color:var(--pen-dark)}

/* ======================================================
   Homepage: hero and the docket (spec sheet)
   ====================================================== */
.home-hero{padding:var(--s7) 0 var(--s8);min-height:min(calc(100vh - 66px),820px);display:flex;align-items:center}
.home-hero .wrap{width:100%;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:var(--s8);align-items:start}
.kicker{font-family:var(--mono);font-size:var(--t0);color:var(--muted);margin:0 0 var(--s4);display:flex;gap:var(--s3);align-items:center}
.kicker::before{content:"";width:24px;height:2px;background:var(--ink);flex:none}
.home-hero h1{font-size:var(--t6);font-weight:800;font-variation-settings:"wdth" 72;line-height:0.98;margin:0 0 var(--s5);letter-spacing:-0.01em;max-width:13ch}
.lead{font-size:var(--t1);line-height:1.45;max-width:34em;margin:0 0 var(--s6);color:var(--ink)}
.lead strong{font-weight:700}
.home-hero .actions{margin:0}

.docket{position:relative;margin-right:var(--s2)}
.docket::before{content:"";position:absolute;inset:0;transform:translate(8px,8px);background:var(--carbon);border:2px solid var(--ink)}
.sheet{position:relative;background:var(--sheet);border:2px solid var(--ink)}
.sheet-head{display:grid;grid-template-columns:1fr auto;gap:var(--s4);padding:var(--s4) var(--s4) var(--s3);border-bottom:2px solid var(--ink);min-height:96px}
.sheet-head h2{font-size:var(--t3);font-weight:800;font-variation-settings:"wdth" 75;line-height:1;margin:0 0 var(--s2)}
.sheet-head p{margin:0;font-size:var(--t0);color:var(--muted)}
.stamp{align-self:center;transform:rotate(-7deg);color:var(--pen);border:3px solid var(--pen);padding:3px;margin-right:var(--s2);opacity:.92}
.stamp span{display:block;border:1.5px solid var(--pen);padding:var(--s1) var(--s3);text-align:center}
.stamp b{display:block;font-size:var(--t2);font-weight:800;font-variation-settings:"wdth" 70;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.stamp i{display:block;font-style:normal;font-family:var(--mono);font-size:var(--t-1);font-weight:600;line-height:1.3}
.fields{list-style:none;margin:0;padding:0}
.fields li{display:grid;grid-template-columns:44px 132px minmax(0,1fr) 44px;align-items:stretch;border-bottom:1px solid var(--ink);min-height:46px}
.fields li:last-child{border-bottom:0}
.fields .no{font-family:var(--mono);font-size:var(--t-1);font-weight:600;display:grid;place-items:center;border-right:1px solid var(--ink);background:var(--paper)}
.fields .lbl{font-weight:700;font-size:var(--t1);font-variation-settings:"wdth" 80;display:flex;align-items:center;padding:0 var(--s3);border-right:1px solid var(--rule)}
.fields .lbl em{display:none;font-style:normal;font-family:var(--mono);font-weight:400;font-size:var(--t0);color:var(--muted);font-variation-settings:normal;line-height:1.35;margin-top:2px}
.fields .hint{font-family:var(--mono);font-size:var(--t0);color:var(--muted);display:flex;align-items:center;padding:0 var(--s3);background-image:linear-gradient(var(--rule),var(--rule));background-size:calc(100% - 24px) 1px;background-position:12px calc(100% - 8px);background-repeat:no-repeat}
.fields .box{display:grid;place-items:center;border-left:1px solid var(--ink)}
.fields .box i{width:20px;height:20px;border:2px solid var(--pen);display:block}
.sheet-foot{display:flex;justify-content:space-between;gap:var(--s4);border-top:2px solid var(--ink);padding:var(--s2) var(--s4);font-family:var(--mono);font-size:var(--t-1);color:var(--muted)}

/* ---------- homepage section scaffolding ---------- */
.sec{padding:var(--s8) 0;border-top:2px solid var(--ink)}
.sec-head{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--s5);margin-bottom:var(--s6);align-items:start}
.code{font-family:var(--mono);font-weight:600;font-size:var(--t2);width:64px;height:64px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--sheet)}
.sec-head h2{font-size:var(--t5);font-weight:800;font-variation-settings:"wdth" 75;line-height:1;margin:0 0 var(--s3)}
.sec-head p{margin:0;max-width:40em;font-size:var(--t1);line-height:1.45;color:var(--muted)}

/* B. planning numbers */
.plan{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s7);align-items:start}
.nums{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink);background:var(--sheet)}
.num{padding:var(--s4) var(--s5) var(--s5);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.num:nth-child(2n){border-right:0}
.num:nth-last-child(-n+1){border-bottom:0}
.num.wide{grid-column:1 / -1;border-right:0;display:flex;gap:var(--s4);align-items:baseline;flex-wrap:wrap}
.num b{display:block;font-size:var(--t6);font-weight:800;font-variation-settings:"wdth" 70;line-height:1;margin-bottom:var(--s2)}
.num b sup{font-size:.45em;vertical-align:.9em}
.num.wide b{font-size:var(--t3);margin:0}
.num p{margin:0;max-width:30ch}
.num .tag{font-family:var(--mono);font-size:var(--t-1);color:var(--muted);display:block;margin-bottom:var(--s2)}
.note{margin:var(--s5) 0 0;padding:var(--s4) var(--s5);border-left:4px solid var(--pen);background:var(--sheet);max-width:40em}
.note p{margin:0 0 var(--s2)}
.note p:last-child{margin:0}
.src{font-family:var(--mono);font-size:var(--t0);color:var(--muted);margin:var(--s4) 0 0}
figure.drawing{margin:0;border:2px solid var(--ink);background:var(--sheet)}
figure.drawing svg{display:block;width:100%;height:auto}
figure.drawing figcaption{border-top:1px solid var(--ink);padding:var(--s3) var(--s4);display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s3);font-size:var(--t0)}
figure.drawing figcaption b{font-family:var(--mono);font-weight:600}
.drawing-title{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) var(--s4);border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:var(--t-1);color:var(--muted)}

/* C. order of work */
.steps{border:2px solid var(--ink);background:var(--sheet)}
.steps-row{display:grid;grid-template-columns:80px minmax(0,0.9fr) minmax(0,1.6fr) minmax(0,0.7fr);border-bottom:1px solid var(--ink)}
.steps-row:last-child{border-bottom:0}
.steps-row > *{padding:var(--s4) var(--s5);border-right:1px solid var(--rule);margin:0}
.steps-row > *:last-child{border-right:0}
.steps-row.th{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:var(--t-1)}
.steps-row.th > *{padding:var(--s2) var(--s5);border-color:var(--muted)}
.steps .big{font-size:var(--t5);font-weight:800;font-variation-settings:"wdth" 70;line-height:1;border-right:1px solid var(--ink)}
.steps h3{margin:0;font-size:var(--t2);font-weight:800;font-variation-settings:"wdth" 75;line-height:1.1}
.steps p{margin:0}
.steps .go a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--pen)}
.steps .go a:hover{background:var(--carbon)}

/* D. guides */
.guides{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s7);border-top:2px solid var(--ink)}
.guide{display:grid;grid-template-columns:56px minmax(0,1fr) 32px;gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--ink);color:var(--ink);text-decoration:none}
.guide:hover{color:var(--ink);background:var(--sheet)}
.guide .gno{font-family:var(--mono);font-weight:600;padding-top:6px}
.guide h3{margin:0 0 var(--s1);font-size:var(--t2);font-weight:800;font-variation-settings:"wdth" 75;line-height:1.1;color:var(--pen)}
.guide p{margin:0 0 var(--s2);max-width:46ch}
.guide .gtag{font-family:var(--mono);font-size:var(--t0);color:var(--muted)}
.guide .arr{font-size:var(--t2);color:var(--pen);padding-top:2px;transition:transform .15s}
.guide:hover .arr{transform:translateX(4px)}
.guide:hover h3{text-decoration:underline;text-underline-offset:4px}

/* E. sources */
.sources{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--ink);background:var(--sheet)}
.source{padding:var(--s5);border-right:1px solid var(--ink);color:var(--ink);text-decoration:none;display:flex;flex-direction:column;gap:var(--s2)}
.source:hover{color:var(--ink)}
.source:last-child{border-right:0}
.source .host{font-family:var(--mono);font-size:var(--t0);color:var(--muted)}
.source h3{margin:0;font-size:var(--t2);font-weight:800;font-variation-settings:"wdth" 75;line-height:1.1;color:var(--pen)}
.source p{margin:0}
.source:hover h3{text-decoration:underline;text-underline-offset:4px}
.disclaim{font-size:var(--t0);color:var(--muted);max-width:60em;margin:var(--s5) 0 0}

/* F. quotes band */
.quotes{background:var(--ink);color:var(--paper);padding:var(--s8) 0;border-top:2px solid var(--ink)}
.quotes .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);align-items:center}
.quotes .code{background:transparent;border-color:var(--paper);color:var(--paper);margin-bottom:var(--s5)}
.quotes h2{font-size:var(--t5);font-weight:800;font-variation-settings:"wdth" 75;line-height:1;margin:0 0 var(--s4);color:var(--paper)}
.quotes p{font-size:var(--t1);line-height:1.45;margin:0 0 var(--s6);max-width:32em;color:var(--paper)}
.quotes .btn-fill{border-color:var(--paper)}
.quotes .btn-line{background:transparent;color:var(--paper);border-color:var(--paper)}
.quotes .btn-line:hover{background:var(--paper);color:var(--ink);box-shadow:none}
.bands{background:var(--sheet);color:var(--ink);border:2px solid var(--paper);box-shadow:8px 8px 0 var(--carbon)}
.bands h3{margin:0;padding:var(--s3) var(--s4);border-bottom:2px solid var(--ink);font-size:var(--t1);font-weight:800;font-variation-settings:"wdth" 80;display:flex;justify-content:space-between;gap:var(--s4)}
.bands h3 span{font-family:var(--mono);font-size:var(--t-1);font-weight:500;color:var(--muted);align-self:center}
.bands ul{list-style:none;margin:0;padding:0}
.bands li{display:grid;grid-template-columns:52px 1fr;align-items:center;border-bottom:1px solid var(--ink);min-height:48px;font-family:var(--mono);font-size:var(--t0)}
.bands li:last-child{border-bottom:0}
.bands li i{width:20px;height:20px;border:2px solid var(--pen);justify-self:center}

/* ======================================================
   Content pages: layout
   ====================================================== */
#main{counter-reset:sec}
.article{padding:var(--s5) 0 var(--s8)}
.breadcrumb{font-family:var(--mono);font-size:var(--t0);color:var(--muted);margin:0;padding:var(--s4) 0 0}
.breadcrumb a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.breadcrumb a:hover{color:var(--pen)}
.article-header,.article-head{padding:var(--s6) 0 var(--s5);margin:0 0 var(--s6);border-bottom:2px solid var(--ink)}
.article-header h1,.article-head h1,.article > .container > h1,.article .narrow > h1{font-size:var(--t5);max-width:20ch;margin:0 0 var(--s4)}
.article > .narrow > h1:first-child{margin-top:var(--s7)}
.article-lede{font-size:var(--t1);line-height:1.45;margin:0 0 var(--s4);max-width:var(--measure)}
.article-meta{font-family:var(--mono);font-size:var(--t0);color:var(--muted);margin:0}
.article-body,.article-content{padding:0}
.article-body > *:first-child,.article-content > *:first-child{margin-top:0}

/* Plain article typography */
.article p,.article li,.content-section p,.content-section li{max-width:var(--measure)}
.article-body p,.article-content p,.article .narrow > p{line-height:1.6;margin:0 0 var(--s4)}
.article-body h3,.article-content h3,.article .narrow > h3{font-size:var(--t2);font-variation-settings:"wdth" 75;margin:var(--s6) 0 var(--s3)}
.article-body h4,.article-content h4{font-size:var(--t1);font-variation-settings:"wdth" 80;margin:var(--s5) 0 var(--s2)}

/* Lettered sections, like a form */
.article-body > h2,.article-content > h2,.article .narrow > h2,.content-section > h2{position:relative;font-size:var(--t3);font-variation-settings:"wdth" 75;line-height:1.05;margin:var(--s7) 0 var(--s4);padding:calc(var(--s5) + var(--s2)) 0 0 calc(48px + var(--s4));min-height:calc(48px + var(--s5));border-top:2px solid var(--ink)}
.article-body > h2::before,.article-content > h2::before,.article .narrow > h2::before,.content-section > h2::before{counter-increment:sec;content:counter(sec, upper-alpha);position:absolute;left:0;top:var(--s5);font-family:var(--mono);font-weight:600;font-size:var(--t1);line-height:1;width:48px;height:48px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--sheet);font-variation-settings:normal}
.article-body > h2.numbered::before,.article-content > h2.numbered::before,.article .narrow > h2.numbered::before,.content-section > h2.numbered::before{content:none}
h2.numbered .h-num{position:absolute;left:0;top:var(--s5);font-family:var(--mono);font-weight:600;font-size:var(--t1);line-height:1;width:48px;height:48px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--sheet);font-variation-settings:normal}
.article-header + h2,.article-head + h2,.article-header + .article-body > h2:first-child,.article-head + .article-content > h2:first-child{margin-top:0;border-top:0;padding-top:var(--s2)}
.article-header + h2::before,.article-head + h2::before,.article-header + .article-body > h2:first-child::before,.article-head + .article-content > h2:first-child::before{top:0}

/* Lists: numbered rows and square bullets */
.article-body ul,.article-content ul,.article .narrow > ul,.content-section ul{list-style:none;margin:0 0 var(--s5);padding:0}
.article-body ul > li,.article-content ul > li,.article .narrow > ul > li,.content-section ul > li{position:relative;padding-left:var(--s5);margin:0 0 var(--s2);line-height:1.6}
.article-body ul > li::before,.article-content ul > li::before,.article .narrow > ul > li::before,.content-section ul > li::before{content:"";position:absolute;left:0;top:0.6em;width:8px;height:8px;background:var(--ink)}
.article-body ol,.article-content ol,.article .narrow > ol,.content-section ol{list-style:none;counter-reset:row;margin:0 0 var(--s5);padding:0;border-top:1px solid var(--ink);max-width:var(--measure)}
.article-body ol > li,.article-content ol > li,.article .narrow > ol > li,.content-section ol > li{counter-increment:row;position:relative;padding:var(--s3) 0 var(--s3) calc(48px + var(--s4));border-bottom:1px solid var(--ink);line-height:1.6;margin:0}
.article-body ol > li::before,.article-content ol > li::before,.article .narrow > ol > li::before,.content-section ol > li::before{content:counter(row, decimal-leading-zero);position:absolute;left:0;top:var(--s3);font-family:var(--mono);font-weight:600;font-size:var(--t0);line-height:1.6;color:var(--ink)}
li > ul,li > ol{margin-top:var(--s2)}

/* Tables: ruled, like a docket */
.table-wrap{margin:var(--s5) 0 var(--s6);overflow-x:auto;border:2px solid var(--ink);background:var(--sheet)}
.table-wrap:focus-visible{outline:3px solid var(--pen);outline-offset:3px}
.article table,.content-section table,table.compare-table,table.cost-table,table.price-table,table.rule-table{width:100%;border-collapse:collapse;background:var(--sheet);font-size:var(--t0);margin:0}
.article th,.article td,.content-section th,.content-section td{padding:var(--s3) var(--s4);text-align:left;vertical-align:top;border-bottom:1px solid var(--ink);border-right:1px solid var(--rule);line-height:1.45}
.article th:last-child,.article td:last-child,.content-section th:last-child,.content-section td:last-child{border-right:0}
.article tbody tr:last-child td,.content-section tbody tr:last-child td{border-bottom:0}
.article th,.content-section th{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:var(--t-1);font-weight:600;border-right-color:var(--muted);border-bottom:0}
.article td.label,.content-section td.label,.cost-table .label,.compare-table .label,.price-table .label{font-weight:700}
.cost-table .timber,.cost-table .steel,.price-table .total{font-family:var(--mono);font-variant-numeric:tabular-nums}
.price-table .total{font-weight:600}
.cost-table .total-row td,.price-table .total-row td,.total-row td{font-weight:700;background:var(--paper);border-top:2px solid var(--ink)}
.article blockquote,.article-content blockquote{margin:var(--s5) 0;padding:var(--s3) var(--s5);border-left:4px solid var(--ink);background:var(--sheet);max-width:var(--measure)}

/* details / summary */
details{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:var(--s3) 0;margin:0 0 -1px;max-width:var(--measure)}
summary{cursor:pointer;font-weight:700;font-size:var(--t1);font-variation-settings:"wdth" 80;list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 32px;gap:var(--s3);align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);font-weight:600;font-size:var(--t1);width:32px;height:32px;display:grid;place-items:center;border:2px solid var(--pen);color:var(--pen)}
details[open] > summary::after{content:"\2212"}
details > *:not(summary){margin-top:var(--s3)}

/* ======================================================
   Callouts
   ====================================================== */
.key-box,.tip-box,.warn-box{margin:var(--s6) 0;padding:var(--s4) var(--s5);background:var(--sheet);max-width:var(--measure)}
.key-box{border-left:4px solid var(--pen)}
.tip-box{border:1px solid var(--ink);border-left:4px solid var(--ink)}
.warn-box{position:relative;border:2px solid var(--ink);padding-left:calc(var(--s5) + 12px)}
.warn-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:12px;border-right:2px solid var(--ink);background:repeating-linear-gradient(-45deg,var(--ink) 0 2px,var(--sheet) 2px 8px)}
.key-box p,.tip-box p,.warn-box p{margin:0 0 var(--s2);line-height:1.6}
.key-box p:last-child,.tip-box p:last-child,.warn-box p:last-child{margin:0}

/* the quote form, set as a docket sheet with its carbon copy */
.quote-box{position:relative;background:var(--sheet);border:2px solid var(--ink);margin:var(--s6) var(--s2) var(--s7) 0;box-shadow:8px 8px 0 -2px var(--carbon),8px 8px 0 0 var(--ink)}
.quote-box .sheet-head{margin:0}
.quote-box form{padding:var(--s5);counter-reset:field}
.quote-box .sheet-foot{margin:0}

/* the end-of-article quote prompt */
.article-cta{position:relative;background:var(--sheet);border:2px solid var(--ink);padding:var(--s5);margin:var(--s7) var(--s2) 0 0;box-shadow:8px 8px 0 -2px var(--carbon),8px 8px 0 0 var(--ink);max-width:var(--measure)}
.article-cta h3{font-size:var(--t2);font-variation-settings:"wdth" 75;margin:0 0 var(--s2)}
.article-cta p{margin:0 0 var(--s4)}
.article-cta .btn{margin-top:var(--s1)}

/* full-width quote band at the foot of county and blog pages */
.enquire-cta{background:var(--ink);color:var(--paper);padding:var(--s8) 0;border-top:2px solid var(--ink);margin-top:var(--s7)}
.enquire-cta h2{color:var(--paper);font-size:var(--t4);font-variation-settings:"wdth" 75;line-height:1;margin:0 0 var(--s4)}
.enquire-cta p{color:var(--paper);font-size:var(--t1);line-height:1.45;max-width:var(--measure);margin:0 0 var(--s5)}
.enquire-cta .btn-primary{border-color:var(--paper)}
.enquire-cta p.enquire-fineprint{font-size:var(--t0);margin:var(--s5) 0 0}
.enquire-cta a:not(.btn){color:var(--paper)}

/* ======================================================
   Cards and lists
   ====================================================== */
.content-section{padding:var(--s5) 0 var(--s4);counter-reset:faq}
.content-section > :last-child{margin-bottom:0}
.content-section > h2{margin-top:0}
.content-section > p{line-height:1.6}
.small-print{font-size:var(--t0);color:var(--muted);margin-top:var(--s4)}

.supplier-row{background:var(--sheet);border:2px solid var(--ink);margin:0 0 var(--s4);max-width:var(--measure)}
.supplier-row > *{margin-left:var(--s5);margin-right:var(--s5)}
.supplier-row h3{font-size:var(--t2);font-variation-settings:"wdth" 75;margin-top:var(--s4);margin-bottom:var(--s1)}
.supplier-row .tag-line,.tag-line{font-family:var(--mono);font-size:var(--t0);color:var(--muted);margin-bottom:var(--s3)}
.supplier-row .tag-line{margin:0;padding:0 var(--s5) var(--s3);margin-left:0;margin-right:0;border-bottom:1px solid var(--ink)}
.supplier-row p{margin-top:var(--s3);margin-bottom:var(--s3);line-height:1.6}
.supplier-row p:last-child{margin-bottom:var(--s4)}

.faq-item{border-top:1px solid var(--ink);padding:var(--s4) 0;margin:0;max-width:var(--measure)}
.faq-item:last-of-type{border-bottom:1px solid var(--ink)}
.faq-item h3{position:relative;padding-left:calc(48px + var(--s4));font-size:var(--t1);margin:0 0 var(--s2)}
.faq-item h3::before{counter-increment:faq;content:"Q" counter(faq);position:absolute;left:0;top:2px;font-family:var(--mono);font-weight:600;font-size:var(--t0);color:var(--muted);font-variation-settings:normal}
.faq-item p{margin:0 0 0 calc(48px + var(--s4));line-height:1.6}

.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--ink);background:var(--sheet);margin:var(--s5) 0}
.step-card{padding:var(--s4) var(--s5) var(--s5);border-right:1px solid var(--ink)}
.step-card:last-child{border-right:0}
.step-num{display:block;font-size:var(--t5);font-weight:800;font-variation-settings:"wdth" 70;line-height:1;margin-bottom:var(--s3)}
.step-card h3{margin:0 0 var(--s2)}
.step-card p{margin:0;max-width:30ch}

.guide-grid{display:grid;grid-template-columns:1fr;border-top:2px solid var(--ink);margin:var(--s5) 0 var(--s6)}
.guide-card{position:relative;display:block;padding:var(--s5) var(--s7) var(--s5) 0;border-bottom:1px solid var(--ink);color:var(--ink);text-decoration:none}
.guide-card::after{content:"\2192";position:absolute;right:var(--s2);top:var(--s5);font-size:var(--t2);color:var(--pen);transition:transform .15s}
.guide-card:hover{background:var(--sheet);color:var(--ink)}
.guide-card:hover::after{transform:translateX(4px)}
.guide-card h3{font-size:var(--t2);font-variation-settings:"wdth" 75;color:var(--pen);margin:0 0 var(--s1)}
.guide-card:hover h3{text-decoration:underline;text-underline-offset:4px}
.guide-card p{margin:0 0 var(--s2);line-height:1.5}
.guide-tag{display:inline-block;font-family:var(--mono);font-size:var(--t0);color:var(--muted)}

.material-card{background:var(--sheet);border:2px solid var(--ink);margin:var(--s5) 0;padding:var(--s4) var(--s5);max-width:var(--measure)}
.material-card h3{margin:0 0 var(--s3);font-size:var(--t2);font-variation-settings:"wdth" 75}
.verdict-tag{display:inline-block;font-family:var(--mono);font-size:var(--t0);font-weight:600;line-height:1.3;padding:var(--s1) var(--s3);border:2px solid var(--ink);margin:0 0 var(--s3)}
.tag-yes{background:var(--ink);color:var(--paper)}
.tag-caution{border-style:dashed;background:var(--sheet);color:var(--ink)}
.tag-no{border:4px double var(--ink);background:var(--sheet);color:var(--ink)}
.spec-row{display:grid;margin:0 0 var(--s4);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font-family:var(--mono);font-size:var(--t0);color:var(--muted)}
.spec-row span{padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.spec-row span:last-child{border-bottom:0}
.spec-row strong{color:var(--ink);font-weight:600}

.year-block{background:var(--sheet);border:2px solid var(--ink);margin:var(--s5) 0;max-width:var(--measure)}
.year-block h3{margin:0;padding:var(--s3) var(--s4);border-bottom:2px solid var(--ink);font-size:var(--t1)}
.year-block .costs,.costs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--ink)}
.cost-col{padding:var(--s3) var(--s4);border-right:1px solid var(--ink)}
.cost-col:last-child{border-right:0}
.cost-col strong{display:block;font-family:var(--mono);font-size:var(--t0);font-weight:600;color:var(--muted)}
.cost-col span{display:block;font-size:var(--t4);font-weight:800;font-variation-settings:"wdth" 70;line-height:1.1;font-variant-numeric:tabular-nums}
.year-block p{margin:0;padding:var(--s3) var(--s4) var(--s4);line-height:1.6}

.verdict{background:var(--ink);color:var(--paper);padding:var(--s5);margin:var(--s6) 0 var(--s4);border:2px solid var(--ink);max-width:var(--measure)}
.verdict h3{color:var(--paper);font-size:var(--t2);font-variation-settings:"wdth" 75;margin:0 0 var(--s2)}
.verdict p{color:var(--paper);margin:0;line-height:1.6}
.verdict-alt{background:var(--sheet);color:var(--ink);box-shadow:8px 8px 0 var(--carbon)}
.verdict-alt h3,.verdict-alt p{color:var(--ink)}

.layer-diagram{background:var(--sheet);border:2px solid var(--ink);margin:var(--s5) 0;max-width:var(--measure)}
.layer-diagram h4{margin:0;padding:var(--s3) var(--s4);border-bottom:2px solid var(--ink);font-size:var(--t1)}
.layer-diagram ol{border-top:0;margin:0}
.layer-diagram ol > li{padding:var(--s3) var(--s4) var(--s3) calc(40px + var(--s4))}
.layer-diagram ol > li::before{left:var(--s4)}
.layer-diagram ol > li:last-child{border-bottom:0}
.layer-diagram p{padding:var(--s3) var(--s4);margin:0}

/* trust strip on the quote page */
.trust-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--ink);background:var(--sheet);margin:0 0 var(--s6)}
.trust-item{padding:var(--s4);border-right:1px solid var(--ink)}
.trust-item:last-child{border-right:0}
.trust-item strong{display:block;font-size:var(--t1);font-weight:800;font-variation-settings:"wdth" 80;line-height:1.15;margin-bottom:var(--s1)}
.trust-item span{display:block;font-family:var(--mono);font-size:var(--t0);color:var(--muted);line-height:1.4}

/* ======================================================
   Forms
   ====================================================== */
.form-row{margin:0 0 var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.form-row label{display:flex;align-items:center;gap:var(--s3);font-weight:700;font-size:var(--t0);line-height:1.3}
.quote-box .form-row label::before{counter-increment:field;content:counter(field, decimal-leading-zero);font-family:var(--mono);font-size:var(--t-1);font-weight:600;width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--ink);background:var(--paper);flex:none}
.form-row input,.form-row select,.form-row textarea{width:100%;min-height:48px;padding:var(--s3);font-family:var(--sans);font-size:var(--t0);line-height:1.4;color:var(--ink);background:var(--sheet);border:2px solid var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
.form-row select{padding-right:var(--s7);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%231F3C9C' stroke-width='2.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--s4) center}
.form-row textarea{min-height:96px;resize:vertical}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--muted);opacity:1}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:3px solid var(--pen);outline-offset:2px}
.form-row [aria-invalid="true"]{border-width:3px;border-style:dashed}
.form-error{font-family:var(--mono);font-size:var(--t0);color:var(--ink);font-weight:600;margin:0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
.form-note{font-size:var(--t0);color:var(--muted);margin:var(--s4) 0 0;line-height:1.5}
.hp-field{position:absolute !important;left:-9999px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important;opacity:0 !important}

/* ======================================================
   County page header
   ====================================================== */
.hero{padding:var(--s6) 0 var(--s5)}
.hero .hero-content{max-width:var(--narrow);margin:0 auto;padding:0 var(--s6)}
.hero h1{font-size:var(--t6);line-height:0.98;max-width:14ch;margin:0 0 var(--s5)}
.hero-subtitle{font-size:var(--t1);line-height:1.45;max-width:40em;margin:0 0 var(--s6)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s4)}
.county-body > .container{max-width:var(--narrow)}

/* ======================================================
   404 and thank-you
   ====================================================== */
.err-page{padding:var(--s8) 0 var(--s9)}
.err-content{max-width:var(--wrap);margin:0 auto;padding:0 var(--s6)}
.err-code{display:inline-block;font-size:var(--t7);font-weight:800;font-variation-settings:"wdth" 70;line-height:1;padding:var(--s2) var(--s4);border:2px solid var(--ink);background:var(--sheet);box-shadow:8px 8px 0 -2px var(--carbon),8px 8px 0 0 var(--ink);margin:0 0 var(--s6)}
.err-content h1{font-size:var(--t5);max-width:16ch;margin:0 0 var(--s4)}
.err-content p{font-size:var(--t1);line-height:1.45;max-width:var(--measure)}

/* ======================================================
   Blog listing (folded from blog.css)
   ====================================================== */
.blog-hero{padding:var(--s7) 0 var(--s6);border-bottom:2px solid var(--ink)}
.blog-hero p{font-size:var(--t1);max-width:var(--measure)}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:2px solid var(--ink);background:var(--sheet);max-width:var(--wrap);margin:var(--s6) auto}
.blog-card{padding:var(--s5);border-right:1px solid var(--ink);display:flex;flex-direction:column;gap:var(--s2)}
.blog-card:nth-child(3n){border-right:0}
.blog-card h2{font-size:var(--t2);font-variation-settings:"wdth" 75;margin:0}
.blog-card h2 a{text-decoration:none}
.blog-card h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.blog-card p{margin:0}
.blog-tag,.blog-card-meta{font-family:var(--mono);font-size:var(--t0);color:var(--muted)}
.article-footer{border-top:2px solid var(--ink);margin-top:var(--s7);padding-top:var(--s4);font-family:var(--mono);color:var(--muted)}

/* ======================================================
   Footer
   ====================================================== */
.foot{background:var(--paper);border-top:2px solid var(--ink);padding:var(--s7) 0 var(--s6)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s6)}
.foot h2{font-family:var(--mono);font-size:var(--t-1);font-weight:600;line-height:1.5;margin:0 0 var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--ink);font-variation-settings:normal}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 var(--s2)}
.foot li a{color:var(--ink);text-decoration:none}
.foot li a:hover{color:var(--pen);text-decoration:underline}
.foot .about p{margin:var(--s3) 0 0;max-width:30ch;color:var(--muted)}
.foot-bottom{margin-top:var(--s7);padding-top:var(--s4);border-top:2px solid var(--ink);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3) var(--s5);font-size:var(--t0);color:var(--muted)}
.foot-bottom p{margin:0}
.foot-bottom a{color:var(--muted)}
.foot-bottom a:hover{color:var(--pen)}
.foot-related{flex-basis:100%}

/* ======================================================
   Responsive
   ====================================================== */
@media (max-width:1180px){
  .home-hero .wrap{gap:var(--s7)}
  .home-hero h1{font-size:var(--t5)}
  .fields li{grid-template-columns:40px 116px minmax(0,1fr) 40px}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
  .foot .about{grid-column:1 / -1}
}
@media (max-width:960px){
  .home-hero .wrap,.plan,.quotes .wrap{grid-template-columns:1fr}
  .guides{grid-template-columns:1fr}
  .sources{grid-template-columns:1fr}
  .source{border-right:0;border-bottom:1px solid var(--ink)}
  .source:last-child{border-bottom:0}
  .steps-row{grid-template-columns:64px minmax(0,1fr) minmax(0,1.6fr)}
  .steps-row .go{grid-column:2 / -1;border-top:1px solid var(--rule)}
  .steps-row.th .go{display:none}
  .blog-grid{grid-template-columns:1fr}
  .blog-card{border-right:0;border-bottom:1px solid var(--ink)}
  .blog-card:last-child{border-bottom:0}
  .hero h1{font-size:var(--t5)}
}
@media (max-width:760px){
  .wrap,.container,.hero .hero-content,.err-content{padding:0 var(--s4)}
  .top .wrap{flex-wrap:wrap;gap:0;padding-top:var(--s2)}
  .brand small{display:none}
  .nav{width:calc(100% + 32px);margin:var(--s2) -16px 0;border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;justify-content:space-between;padding:0 var(--s3)}
  .nav a{padding:var(--s2) var(--s1);font-size:var(--t0);white-space:nowrap}
  .nav a.quote{position:absolute;top:var(--s3);right:var(--s4);margin:0;padding:var(--s2) var(--s3)}
  .home-hero{padding:var(--s5) 0 var(--s7)}
  .home-hero h1{font-size:var(--t5);max-width:none}
  .lead{font-size:var(--t0);margin-bottom:var(--s5)}
  .kicker{margin-bottom:var(--s3)}
  .actions,.hero-ctas{flex-direction:column;gap:var(--s3)}
  .btn{width:100%;font-size:var(--t1)}
  .sheet-head{grid-template-columns:1fr;min-height:0;padding-right:var(--s4)}
  .stamp{justify-self:start;margin:var(--s2) 0 var(--s1) var(--s1)}
  .stamp b{font-size:var(--t1)}
  .sheet-head h2{font-size:var(--t2)}
  .fields li{grid-template-columns:36px minmax(0,1fr) 40px;min-height:56px}
  .fields .lbl{flex-direction:column;align-items:flex-start;justify-content:center;border-right:0;padding:var(--s2) var(--s3);font-size:var(--t0)}
  .fields .lbl em{display:block}
  .fields .hint{display:none}
  .sheet-foot{flex-direction:column;gap:var(--s1)}
  .sec{padding:var(--s7) 0}
  .sec-head{grid-template-columns:48px minmax(0,1fr);gap:var(--s4)}
  .code{width:48px;height:48px;font-size:var(--t1)}
  .sec-head h2,.quotes h2{font-size:var(--t4)}
  .sec-head p{font-size:var(--t0)}
  .nums{grid-template-columns:1fr}
  .num{border-right:0}
  .num b{font-size:var(--t5)}
  .steps-row{grid-template-columns:56px minmax(0,1fr)}
  .steps-row > *{padding:var(--s3) var(--s4)}
  .steps-row .what{grid-column:2 / -1;border-top:1px solid var(--rule);border-right:0}
  .steps-row h3{border-right:0}
  .steps .big{grid-row:span 3;font-size:var(--t4)}
  .steps-row.th{display:none}
  .guide{grid-template-columns:40px minmax(0,1fr) 24px;gap:var(--s3)}
  .quotes .wrap{gap:var(--s7)}
  .quotes p{font-size:var(--t0)}
  .foot-grid{grid-template-columns:1fr 1fr}

  /* content pages */
  .article{padding-bottom:var(--s7)}
  .article-header,.article-head{padding:var(--s5) 0 var(--s4);margin-bottom:var(--s5)}
  .article-header h1,.article-head h1,.article .narrow > h1,.err-content h1{font-size:var(--t4)}
  .article-lede{font-size:var(--t0)}
  .hero{padding:var(--s5) 0 var(--s4)}
  .hero h1{font-size:var(--t4);max-width:none}
  .hero-subtitle{font-size:var(--t0);margin-bottom:var(--s5)}
  .article-body > h2,.article-content > h2,.article .narrow > h2,.content-section > h2{padding-left:calc(32px + var(--s3));padding-top:calc(var(--s5) + 2px);min-height:calc(32px + var(--s5));font-size:var(--t2);margin-top:var(--s6)}
  .article-body > h2::before,.article-content > h2::before,.article .narrow > h2::before,.content-section > h2::before,h2.numbered .h-num{width:32px;height:32px;font-size:var(--t0)}
  .content-section > h2{margin-top:0}
  .article-body h3,.article-content h3,.article .narrow > h3{font-size:var(--t1)}
  .article-body ol > li,.article-content ol > li,.article .narrow > ol > li,.content-section ol > li{padding-left:calc(32px + var(--s3))}
  .layer-diagram ol > li{padding-left:calc(32px + var(--s4) + var(--s3))}
  .article th,.article td,.content-section th,.content-section td{padding:var(--s2) var(--s3)}
  .key-box,.tip-box,.warn-box{padding:var(--s3) var(--s4)}
  .warn-box{padding-left:calc(var(--s4) + 12px)}
  .supplier-row > *{margin-left:var(--s4);margin-right:var(--s4)}
  .supplier-row .tag-line{padding:0 var(--s4) var(--s3)}
  .faq-item h3{padding-left:calc(32px + var(--s3))}
  .faq-item p{margin-left:0}
  .steps-grid,.trust-row{grid-template-columns:1fr}
  .step-card,.trust-item{border-right:0;border-bottom:1px solid var(--ink)}
  .step-card:last-child,.trust-item:last-child{border-bottom:0}
  .step-num{font-size:var(--t4)}
  .cost-col span{font-size:var(--t3)}
  .form-grid{grid-template-columns:1fr}
  .quote-box form{padding:var(--s4)}
  .quote-box,.article-cta{margin-right:var(--s2)}
  .article-cta{padding:var(--s4)}
  .verdict{padding:var(--s4)}
  .enquire-cta{padding:var(--s7) 0}
  .enquire-cta h2{font-size:var(--t3)}
  .enquire-cta p{font-size:var(--t0)}
  .err-page{padding:var(--s7) 0}
  .err-code{font-size:var(--t6)}
  .err-content p{font-size:var(--t0)}
  .guide-card{padding-right:var(--s6)}
  .guide-card h3{font-size:var(--t1)}
}
@media (min-width:1600px) and (min-height:800px){
  :root{--wrap:1504px}
  .home-hero h1{font-size:var(--t7)}
  .lead{font-size:var(--t2);max-width:30em}
  .fields li{min-height:56px;grid-template-columns:48px 176px minmax(0,1fr) 48px}
  .fields .lbl{font-size:var(--t2)}
  .fields .hint{font-size:var(--t1)}
  .sheet-head h2{font-size:var(--t4)}
  .home-hero .btn{font-size:var(--t2);min-height:64px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important}
}
@media print{
  .top .nav,.enquire-cta,.foot,.skip{display:none}
  body{background:var(--sheet)}
}