*,*::before,*::after{box-sizing:border-box}
:root{
  --navy:#0B1B2B; --navy-2:#132a40;
  --amber:#D62839; --amber-dk:#A81F2E; --amber-rgb:214,40,57;
  --green:#58BB00; --green-dk:#2A5C00;
  --paper:#F7F4EF; --paper-2:#FBF9F6; --white:#fff;
  --ink:#0B1B2B; --body:#42505f; --mute:#7b8794; --line:#e4ded4;
  --header-bg:rgba(247,244,239,.92);
  --max:1160px; --r:16px;
  --head:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* dark theme -- follows system preference by default ("system", no attribute),
   or an explicit user choice via [data-theme] set by app.js + localStorage */
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14181c; --paper-2:#1a1f25; --white:#1f242b;
    --ink:#f2efe8; --body:#c7ccd3; --mute:#8993a1; --line:#2b323b;
    --header-bg:rgba(20,24,28,.86);
  }
}
:root[data-theme="dark"]{
  --paper:#14181c; --paper-2:#1a1f25; --white:#1f242b;
  --ink:#f2efe8; --body:#c7ccd3; --mute:#8993a1; --line:#2b323b;
  --header-bg:rgba(20,24,28,.86);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--body);overflow-x:hidden;
  transition:background-color .2s ease,color .2s ease;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
  linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;
  background-attachment:fixed;
  font:17px/1.65 "Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2,h3,h4{font-family:var(--head);color:var(--ink);line-height:1.08;
  letter-spacing:-.025em;margin:0 0 .5em;font-weight:800}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4vw,3rem)}
h3{font-size:1.18rem;line-height:1.25;letter-spacing:-.01em}
em.hl{font-style:italic;font-weight:600;color:var(--amber-dk)}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.lede{font-size:clamp(1.05rem,1.6vw,1.22rem);max-width:60ch;color:var(--body)}
.grid-bg{}
/* micro label */
.tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  background:var(--white);border:1px solid var(--line);padding:7px 14px;border-radius:999px}
.tag b{color:var(--ink);font-weight:500}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
/* header */
header{position:sticky;top:0;z-index:60;background:var(--header-bg);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:1px solid var(--line);background:var(--white);border-radius:12px;cursor:pointer;
  font-size:18px;line-height:1;color:var(--ink)}
.theme-toggle:hover{border-color:var(--navy)}
.theme-toggle .i-dark{display:none}
:root[data-theme="dark"] .theme-toggle .i-light{display:none}
:root[data-theme="dark"] .theme-toggle .i-dark{display:inline}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-light{display:none}
  :root:not([data-theme="light"]) .theme-toggle .i-dark{display:inline}
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;height:64px;min-width:0}
.logo{font-family:var(--head);font-weight:800;font-size:1.05rem;color:var(--ink);
  text-decoration:none;letter-spacing:-.03em;white-space:nowrap;flex:none}
.logo i{font-style:normal;color:var(--amber-dk)}
nav.main{display:none;gap:28px}
nav.main a{color:var(--body);text-decoration:none;font-weight:600;font-size:15px}
nav.main a:hover,nav.main a[aria-current]{color:var(--ink)}
@media(min-width:960px){.bar{height:72px}.logo{font-size:1.2rem}}
@media(max-width:479px){.hdr .btn-a{display:none}}
.hdr{display:flex;align-items:center;gap:9px}
.burger{display:inline-flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--line);background:var(--white);
  border-radius:12px;cursor:pointer;text-decoration:none}
.burger i{display:block;width:17px;height:2px;background:var(--ink);border-radius:2px}
#m{display:none;border-top:1px solid var(--line);background:var(--white)}
#m:target{display:block}
#m a{display:block;padding:15px 20px;border-bottom:1px solid var(--line);
  text-decoration:none;font-weight:700;color:var(--ink)}
@media(min-width:960px){nav.main{display:flex}.burger{display:none}}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 24px;border-radius:999px;
  font-weight:700;text-decoration:none;font-size:15px;border:2px solid transparent;
  cursor:pointer;transition:.15s;font-family:inherit}
.btn-p{background:var(--navy);color:#fff}.btn-p:hover{background:var(--navy-2)}
.btn-a{background:var(--amber);color:#fff}.btn-a:hover{background:var(--amber-dk)}
.btn-o{border-color:var(--line);background:var(--white);color:var(--ink)}
.btn-o:hover{border-color:var(--navy)}
.btn-l{border-color:rgba(255,255,255,.35);color:#fff}.btn-l:hover{background:#fff;color:var(--navy)}
/* hero */
.hero{position:relative;padding:74px 0 66px;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 46% 42% at 82% 6%,rgba(var(--amber-rgb),.30),transparent 62%),
  radial-gradient(ellipse 40% 40% at 2% 96%,rgba(88,187,0,.14),transparent 62%)}
.hero>*{position:relative;z-index:1}
.hero .tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-grid{display:grid;gap:40px;align-items:start;min-width:0}
.hero-grid>*{min-width:0}
/* cinematic full-width article hero (industry pages, etc.) */
.article-hero{position:relative;height:46vh;min-height:320px;max-height:540px;overflow:hidden}
.article-hero img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.article-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,27,43,.1) 0%,rgba(11,27,43,.35) 55%,rgba(11,27,43,.88) 100%)}
.article-hero .wrap{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  justify-content:flex-end;padding-bottom:36px}
.article-hero .crumb{color:#c9d4de}
.article-hero .crumb a{color:#e7ecf1}
.article-hero .tag{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#e7ecf1}
.article-hero .tag b{color:#fff}
.article-hero h1{color:#fff;max-width:22ch;margin-top:14px}
.article-hero .lede{color:#dbe2e9;max-width:60ch;margin-top:10px}
.article-credit{font-size:12px;color:var(--mute);margin:10px 0 0}
/* article + sidebar layout */
.article-layout{display:grid;gap:40px;align-items:start;min-width:0;margin-top:0}
.article-layout>*{min-width:0}
@media(min-width:960px){.article-layout{grid-template-columns:7fr 3fr}}
.article-sidebar{display:flex;flex-direction:column;gap:20px}
@media(min-width:960px){.article-sidebar{position:sticky;top:88px}}
.side-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.side-card h4{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin:0 0 14px}
.side-links{display:flex;flex-direction:column;gap:10px}
.side-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border:1px solid var(--line);border-radius:11px;text-decoration:none;
  color:var(--ink);font-weight:600;font-size:14px;background:var(--paper-2)}
.side-links a:hover{border-color:var(--navy)}
.side-links a::after{content:"→";color:var(--amber-dk);font-weight:700}
@media(min-width:1000px){.hero-grid{grid-template-columns:1.15fr .85fr;gap:56px}}
/* marquee */
.mq{border-block:1px solid var(--line);background:var(--white);overflow:hidden;padding:15px 0}
.mq-t{display:flex;gap:38px;width:max-content;animation:sc 38s linear infinite;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.mq-t span{display:flex;align-items:center;gap:38px;white-space:nowrap}
.mq-t span::after{content:"/";color:var(--amber-dk)}
@keyframes sc{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq-t{animation:none}}
/* sections */
section{padding:74px 0}
section.tint{background:var(--paper-2);border-block:1px solid var(--line)}
.head-2{max-width:56ch;margin-bottom:14px}
.grid{display:grid;gap:18px;margin-top:36px}
.grid>*{min-width:0}
@media(min-width:640px){.grid.c2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.grid.c3{grid-template-columns:repeat(3,1fr)}
  .grid.c4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:28px;transition:.18s}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(11,27,43,.07)}
.card p:last-child{margin-bottom:0}
.chip{width:44px;height:44px;border-radius:13px;display:flex;align-items:center;
  justify-content:center;font-size:21px;margin-bottom:16px;background:rgba(var(--amber-rgb),.22)}
.chip.g{background:rgba(88,187,0,.16)}.chip.n{background:rgba(11,27,43,.08)}
a.card{text-decoration:none;display:block}
a.card h3{display:flex;justify-content:space-between;align-items:center;gap:10px}
a.card h3::after{content:"→";color:var(--amber-dk);font-weight:700}
/* stat band */
.band{background:var(--navy);color:#c9d4de;padding:74px 0;position:relative;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 40% 60% at 88% 10%,rgba(var(--amber-rgb),.16),transparent 60%)}
.band>*{position:relative;z-index:1}
.band h2{color:#fff}
.band .tag{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#9fb0c0}
.band .tag b{color:#fff}
.stats{display:grid;gap:0;margin-top:38px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r);overflow:hidden;min-width:0}
@media(min-width:700px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:30px 26px;border-bottom:1px solid rgba(255,255,255,.14)}
@media(min-width:700px){.stat{border-bottom:0;border-right:1px solid rgba(255,255,255,.14)}
  .stat:last-child{border-right:0}}
.stat b{display:block;font-family:var(--head);font-size:clamp(2rem,4vw,2.8rem);
  color:#fff;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat span{display:block;margin-top:10px;color:#e7ecf1;font-weight:600;font-size:15px}
.stat small{display:block;margin-top:4px;font-family:var(--mono);font-size:11.5px;color:#8fa1b3}
/* ticks */
ul.ticks{list-style:none;padding:0;margin:24px 0 0}
ul.ticks li{padding-left:32px;position:relative;margin-bottom:13px}
ul.ticks li::before{content:"";position:absolute;left:2px;top:7px;width:15px;height:8px;
  border-left:3px solid var(--green);border-bottom:3px solid var(--green);
  transform:rotate(-45deg);border-radius:1px}
/* calculator */
.calc{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:34px;
  display:flex;flex-direction:column;height:100%}
.calc label{display:block;font-weight:700;color:var(--ink);margin-bottom:6px;font-size:15px}
.calc .row{margin-bottom:22px}
.calc input[type=range]{width:100%;accent-color:var(--amber-dk)}
.calc .out{font-family:var(--head);font-size:2.6rem;font-weight:800;color:var(--ink);
  letter-spacing:-.03em;line-height:1}
.calc .sub{font-family:var(--mono);font-size:12px;color:var(--mute);margin-top:6px}
.calc-tier-items{margin-bottom:22px;padding:16px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.calc-items[hidden]{display:none}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{flex:1;min-width:88px;padding:11px 8px;border-radius:11px;border:1.5px solid var(--line);
  background:var(--white);font:600 14px/1 "Manrope",sans-serif;color:var(--body);cursor:pointer}
.seg button[aria-pressed=true]{border-color:var(--navy);background:var(--navy);color:#fff}
/* forms */
form.lead{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:38px}
form.lead .f{margin-bottom:20px}
form.lead label{display:block;font-weight:700;font-size:15px;color:var(--ink);margin-bottom:7px}
form.lead input,form.lead select,form.lead textarea{width:100%;padding:15px 17px;
  border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:16px;
  background:var(--paper-2);color:var(--ink)}
form.lead input:focus,form.lead select:focus,form.lead textarea:focus{
  outline:none;border-color:var(--navy);background:var(--white)}
form.lead textarea{min-height:130px;resize:vertical}
form.lead input[type=file]{padding:12px 15px;font-size:14.5px;cursor:pointer}
/* quote page: blurred factory-photo hero + matched two-panel layout */
.quote-hero{position:relative;padding:64px 0;overflow:hidden;background:var(--navy)}
.quote-hero .bgimg{position:absolute;inset:-20px;background-size:cover;background-position:center 35%;
  filter:blur(6px) brightness(.55) saturate(1.1);transform:scale(1.05)}
.quote-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,27,43,.55),rgba(11,27,43,.85));}
.quote-hero>.wrap{position:relative;z-index:1;text-align:center}
.quote-hero h1{color:#fff}
.quote-hero .lede{color:#dbe2e9;margin-inline:auto}
.quote-hero .tag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.22);color:#dbe2e9}
.quote-hero .tag b{color:#fff}
.quote-panels{display:grid;gap:24px;margin-top:0;align-items:stretch;min-width:0}
.quote-panels>*{min-width:0}
@media(min-width:900px){.quote-panels{grid-template-columns:.85fr 1.15fr}}
.quote-info{background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:34px;display:flex;flex-direction:column}
.quote-info h3{margin-top:0}
.quote-info .ticks{flex:1}
form.lead .hp{position:absolute;left:-9999px}
.prefill-note{background:rgba(214,40,57,.08);border:1px solid rgba(214,40,57,.25);
  border-radius:11px;padding:14px 16px;margin-bottom:18px;font-size:14px;color:var(--ink)}
.prefill-note b{color:var(--amber-dk)}
.note{font-size:13px;color:var(--mute);margin-top:12px}
.two{display:grid;gap:16px}
@media(min-width:560px){.two{grid-template-columns:1fr 1fr}}
/* q&a */
details.q{background:var(--white);border:1px solid var(--line);border-radius:13px;
  padding:18px 22px;margin-bottom:11px}
details.q[open]{border-color:var(--amber-dk)}
details.q summary{font-weight:700;color:var(--ink);cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:flex-start;font-size:16.5px}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+";color:var(--amber-dk);font-weight:800;font-size:20px;line-height:1}
details.q[open] summary::after{content:"–"}
details.q p{margin:13px 0 0;color:var(--body)}
#qsearch{width:100%;padding:15px 18px;border:1.5px solid var(--line);border-radius:13px;
  font:inherit;font-size:16px;background:var(--white)}
.qcount{font-family:var(--mono);font-size:12px;color:var(--mute);margin-top:10px}
/* q&a answers, voting, ask/answer forms */
.q-ans-primary p,.q-ans-extra p{margin:13px 0 0;color:var(--body)}
.q-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.q-author{font-family:var(--mono);font-size:11.5px;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.vote-w .vote{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;
  border:1.5px solid var(--line);background:var(--paper-2);font:600 13px/1 "Manrope",sans-serif;
  color:var(--body);cursor:pointer;transition:.15s}
.vote-w .vote:hover{border-color:var(--green)}
.vote-w .vote[data-voted=true]{border-color:var(--green);color:var(--green-dk);background:rgba(88,187,0,.1);cursor:default}
.q-more{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.q-more summary{font-family:var(--mono);font-size:12px;color:var(--mute);cursor:pointer;
  text-transform:uppercase;letter-spacing:.06em}
.q-more .q-ans-extra{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.q-actions{display:flex;align-items:center;gap:18px;margin-top:16px;flex-wrap:wrap}
.q-toggle{background:none;border:none;padding:0;font:700 13.5px/1 "Manrope",sans-serif;
  color:var(--amber-dk);cursor:pointer}
.q-perma{font:600 13px/1 "Manrope",sans-serif;color:var(--mute);text-decoration:none}
.q-perma:hover{color:var(--ink);text-decoration:underline}
.q-answer-form{margin-top:16px;padding:20px}
.ask-block{margin-top:40px;padding:28px;background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
/* floating cta */
.float{position:fixed;right:18px;bottom:18px;z-index:70;box-shadow:0 10px 30px rgba(11,27,43,.28)}
@media(max-width:520px){.float{right:12px;bottom:12px;padding:12px 18px;font-size:14px}}
/* breadcrumb */
.crumb{font-size:14px;color:var(--mute);margin-bottom:18px}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
/* prose */
.prose{max-width:72ch}
.prose h2{margin-top:1.8em}
.prose h3{margin-top:1.5em}
.prose ul{padding-left:22px}
.prose li{margin-bottom:9px}
.pull{border-left:3px solid var(--amber);padding:6px 0 6px 20px;margin:26px 0;
  font-size:1.1rem;color:var(--ink);font-weight:600}
/* footer */
footer{background:var(--navy);color:#a9b8c6;padding:56px 0 34px;font-size:15px}
footer h4{color:#fff;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;margin:0 0 14px;font-weight:500}
/* the footer's grid is defined once, in the e2 block at the end of this
   stylesheet; the fixed six-column version that used to live here is what
   stranded the seventh column on a row of its own */
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:9px}
footer a{color:#c9d4de;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
.legal{margin-top:38px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  color:#8296a8;font-size:13px;line-height:1.6}

/* ---- homepage scale ---- */
.hero-xl{padding:44px 0 40px}
.hero-xl .tags{margin-bottom:16px}
.hero-xl .hero-cta{margin-top:20px}
h1.xl{font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.03em}
.lede.big{font-size:clamp(1.02rem,1.5vw,1.15rem);max-width:52ch;margin-bottom:0}
.btn-lg{padding:17px 30px;font-size:16.5px}
.hero-ticks{margin-top:20px;columns:1}
@media(min-width:620px){.hero-ticks{columns:2;column-gap:30px}}
.hero-ticks li{break-inside:avoid}
.mq-brands .mq-t{font-size:13.5px;color:var(--ink);font-weight:500;letter-spacing:.06em}
/* reveal on scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* tabs */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px;margin-top:30px;
  scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tabs button{flex:none;padding:11px 18px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--white);font:700 14.5px/1 "Manrope",sans-serif;color:var(--body);cursor:pointer;
  white-space:nowrap;transition:.15s}
.tabs button:hover{border-color:var(--navy)}
.tabs button[aria-selected=true]{background:var(--navy);border-color:var(--navy);color:#fff}
/* kit panels */
.kits{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:32px;margin-top:6px}
.kit[hidden]{display:none}
.kit{display:grid;gap:28px;min-width:0}
.kit>*{min-width:0}
@media(min-width:760px){.kit{grid-template-columns:1.3fr 1fr;align-items:start}}
.kit-ico{font-size:36px;margin-bottom:10px}
.kit-cta{background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:26px}
.kit-items{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
.kit-items-h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);margin:0 0 12px}
.kit-item{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.kit-item:last-of-type{border-bottom:none}
.kit-item-qty{font-family:var(--mono);font-size:13px;color:var(--mute);flex:none;width:26px}
.kit-item-name{flex:1;min-width:0;overflow-wrap:break-word;color:var(--ink);text-decoration:none;font-weight:600;font-size:14.5px}
.kit-item-name:hover{text-decoration:underline}
.kit-item-price{font-family:var(--mono);font-size:14px;color:var(--body);flex:none}
.kit-price{margin:8px 0 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.kit-price b{font-family:var(--head);font-size:2.5rem;font-weight:800;color:var(--ink);letter-spacing:-.03em}
.kit-price span{font-family:var(--mono);font-size:12px;color:var(--mute)}
/* steps */
ol.steps{list-style:none;padding:0;margin:38px 0 0;counter-reset:s}
ol.steps li{display:flex;gap:20px;align-items:flex-start;padding:24px 0;border-top:1px solid var(--line)}
ol.steps li:last-child{border-bottom:1px solid var(--line)}
ol.steps .n{flex:none;width:46px;height:46px;border-radius:14px;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:800;font-size:1.15rem}
ol.steps h3{margin-bottom:.3em}
ol.steps p{margin:0;font-size:15.5px}
/* comparison */
.cmp{display:grid;gap:18px;margin-top:36px;min-width:0}
.cmp>*{min-width:0}
@media(min-width:820px){.cmp{grid-template-columns:1fr 1fr}}
.cmp-col{border-radius:var(--r);padding:28px;border:1px solid var(--line);background:var(--white)}
.cmp-col h3{margin-bottom:16px}
.cmp-col ul{list-style:none;padding:0;margin:0}
.cmp-col li{padding-left:30px;position:relative;margin-bottom:12px;font-size:15.5px}
.cmp-col.bad{background:#fdf6f5;border-color:#f0d9d5}
.cmp-col.bad h3{color:#1a1210}
.cmp-col.bad li{color:#5c4a46}
.cmp-col.bad li::before{content:"\2715";position:absolute;left:4px;top:0;color:#c0523f;font-weight:800}
.cmp-col.good li::before{content:"";position:absolute;left:2px;top:7px;width:14px;height:8px;
  border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg)}
/* final */
.final{background:var(--paper-2);border-top:1px solid var(--line)}

/* ─────────────────────────────────────────────────────────────────────
   e2 — the identity this site wears from 2026-10-18.

   Imran: "theme will be https://webprintsigns.co.uk/?wps_v3_skin=e2". That
   skin is editorial and square: white ground, ink #2a2c31, rules at full ink
   strength, one crimson accent #c8102e, Host Grotesk, no radius anywhere and
   no shadows. The same identity is on the shop behind this site, so the two
   halves read as one place.

   This block only redefines the tokens the whole stylesheet already reads,
   plus the handful of components that hard-coded a colour, so nothing above
   it had to be rewritten. It also neutralises the old dark theme: e2 is a
   single light look, and a half-inverted version of it looked like neither.
   ───────────────────────────────────────────────────────────────────── */
:root,:root[data-theme="dark"],:root[data-theme="light"]{
  --navy:#2a2c31; --navy-2:#44474e;
  --amber:#c8102e; --amber-dk:#a30d26; --amber-rgb:200,16,46;
  --green:#c8102e; --green-dk:#a30d26;
  --paper:#fff; --paper-2:#f6f6f7; --white:#fff;
  --ink:#2a2c31; --body:#4a4d54; --mute:#6b6f78; --line:#d8dade;
  --header-bg:#fff;
  --r:0;
  --head:"Host Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#fff; --paper-2:#f6f6f7; --white:#fff;
    --ink:#2a2c31; --body:#4a4d54; --mute:#6b6f78; --line:#d8dade;
    --header-bg:#fff;
  }
}
/* Square, always. Half-rounded is worse than either. */
*,*::before,*::after{border-radius:0!important}
.dot{border-radius:50%!important}

body{background:#fff;background-image:none;
  font:16px/1.6 "Host Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif}
h1,h2,h3,h4{letter-spacing:-.02em;font-weight:800}
em.hl{color:var(--amber);font-style:italic}

/* Header: a white bar with one ink rule, no blur. */
header{background:#fff;backdrop-filter:none;border-bottom:1px solid #2a2c31}
nav.main a:hover,nav.main a[aria-current]{color:var(--amber)}
.theme-toggle{display:none}

/* Buttons: crimson fill, or an ink outline. */
.btn{font-weight:700;letter-spacing:.01em}
.btn-a,.btn-p{background:var(--amber);border-color:var(--amber);color:#fff}
.btn-a:hover,.btn-p:hover{background:var(--amber-dk);border-color:var(--amber-dk);color:#fff}
.btn-l,.btn-o{background:#fff;border:1px solid #2a2c31;color:#2a2c31}
.btn-l:hover,.btn-o:hover{background:#2a2c31;border-color:#2a2c31;color:#fff}

/* Surfaces: a rule, never a shadow. */
.card,a.card,.side-card,.kit,.calc,.quote-info,.cmp-col,form.lead,.stat,.chip,.tag{
  box-shadow:none;border:1px solid var(--line);background:#fff}
.card:hover,a.card:hover{border-color:#2a2c31;transform:none;box-shadow:none}
.tag{border-color:var(--line);color:var(--mute)}
.tag b{color:#2a2c31}
section.tint{background:#f6f6f7}

/* The dark band is ink, with the accent on the heading clause. */
.band{background:#2a2c31;color:#fff}
.band h2{color:#fff}
.band .tag{background:transparent;border-color:#5a5d64;color:#d8dade}
.band .tag b{color:#fff}
.band::after{display:none}

/* Hero: white, with the grid off and the rule under it doing the work. */
.hero::after,.article-hero::after,.quote-hero::after{display:none}
.hero,.hero-xl{background:#fff}
.article-hero,.quote-hero{background:#f6f6f7;border-bottom:1px solid #2a2c31}

footer{background:#2a2c31;color:#d8dade}
footer h4{color:#fff}
footer a:hover{color:#fff}
.legal{color:#9a9ea6}
.float{background:var(--amber);border-color:var(--amber);color:#fff}

/* ── footer ───────────────────────────────────────────────────
   Six link columns in a six-column grid left the seventh child, Company, on
   a row of its own with five empty cells beside it — the hole Imran
   photographed. The columns now fill whatever width they are given, and the
   footer opens with the three facts that close a sale here. */
/* ── density pass ──────────────────────────────────────────────────
   Imran 2026-10-19, with a screenshot of the lower half: "so much dead space
   everywhere". The page was built on a content site's rhythm — 74px of air
   above and below every section, 28px inside every card, a 36px gap before
   every grid — which on a shop reads as half-empty. Tightened to a shop's
   rhythm, and the four-reason cards become a row rather than four tall
   boxes with one sentence each in them. */
section{padding:44px 0}
section.tint{padding:44px 0}
.band{padding:46px 0}
.head-2{margin-bottom:10px}
.lede{font-size:16.5px}
.grid{gap:14px;margin-top:22px}
.card{padding:18px 18px 20px;border-radius:0}
.card h3{font-size:1.06rem;margin-bottom:6px}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(16,20,24,.08)}
.tag{padding:6px 12px;font-size:11px}
ol.steps{margin-top:22px}
ol.steps li{padding:16px 0;gap:16px}
ol.steps .n{width:38px;height:38px;border-radius:0;font-size:15px}
ol.steps h3{font-size:1.02rem;margin-bottom:2px}
ol.steps p{margin-bottom:0;font-size:14.5px}
.kits{margin-top:18px}
.tabs{margin-top:18px}
.cmp{gap:14px;margin-top:22px}
.cmp-col{padding:20px}
.final{padding:46px 0}
.mq{padding:11px 0}

/* the four reasons: a row of facts, not four tall boxes */
.reasons{display:grid;gap:12px;margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.reason{display:flex;gap:14px;align-items:flex-start;background:var(--white);
  border:1px solid var(--line);padding:16px}
.reason-mark{flex:0 0 42px;height:42px;display:grid;place-items:center;background:var(--ink);
  color:#fff;font-family:var(--head);font-weight:800;font-size:15px}
.reason b{display:block;font-family:var(--head);font-size:15.5px;color:var(--ink);margin-bottom:3px}
.reason p{margin:0;font-size:14px;line-height:1.5}
@media(max-width:620px){
  section,section.tint{padding:32px 0}
  .band{padding:34px 0}
}

/* Two sections back to back stacked 44px of padding on 44px: the gap read as
   a missing block rather than a break. */
section + section{padding-top:26px}
section + section.tint{padding-top:44px}
.band + section{padding-top:34px}
.band .wrap p{max-width:60ch;margin-inline:auto}

/* ── the dense hero and price band ─────────────────────────────────
   Built to the FatPrint shape (Imran 2026-10-19: "follow theme styles of FP
   and IB - busy - assertive and authoritive"), in e2's own colours: ink
   ground, crimson knock-out line, a white card of real stock beside it, and
   a promises strip welded to the bottom of the hero rather than floating
   under it. */
/* The hero ground. A flat ink rectangle read as "too basic, boring and
   dull" (Imran 2026-10-19), which it was: FatPrint's hero carries a graded
   navy, a dot field, a ghost word behind the headline and a glow behind its
   subject. This is the same idea in e2's colours — graded ink, a dot field
   over the right half, one huge ghosted word, and a crimson wedge behind the
   stock card so the card sits on something. */
.fphero{position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(1200px 520px at 78% 18%, rgba(200,16,46,.22), transparent 62%),
    linear-gradient(152deg,#3a3d45 0%,#2e3036 38%,#26282d 72%,#1f2126 100%)}
.fphero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(100deg,transparent 38%,#000 72%);
  mask-image:linear-gradient(100deg,transparent 38%,#000 72%)}
.fphero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--amber) 0 38%,transparent 38%)}
.fphero-ghost{position:absolute;left:-2%;top:48%;transform:translateY(-50%);
  font-family:var(--head);font-weight:800;font-size:clamp(9rem,22vw,20rem);line-height:.8;
  letter-spacing:-.06em;color:rgba(255,255,255,.035);pointer-events:none;user-select:none;z-index:0}
.fphero-wedge{position:absolute;right:-90px;top:-70px;width:520px;height:520px;
  background:var(--amber);opacity:.14;transform:rotate(18deg);pointer-events:none;z-index:0}
.fphero>.wrap,.fphero .fpstrip{position:relative;z-index:1}
.fphero-grid{display:grid;gap:34px;align-items:start;padding:38px 20px 34px}
.fphero-main{min-width:0}
.fphero-badge{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;
  background:var(--amber);color:#fff;padding:7px 14px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.fphero-h1{font-family:var(--head);font-weight:800;line-height:.98;letter-spacing:-.03em;
  font-size:clamp(2.6rem,5.4vw,4.3rem);color:#fff;margin:0 0 16px}
.fphero-h1 span{color:var(--amber)}
.fphero-lead{font-size:16.5px;line-height:1.6;color:#c9cbd0;max-width:56ch;margin:0 0 20px}
.fphero-search{display:flex;background:#fff;border:2px solid #fff;max-width:620px;margin-bottom:18px}
.fphero-search input[type=search]{flex:1 1 auto;min-width:0;border:0;padding:14px 16px;
  font:inherit;font-size:15.5px;color:var(--ink)}
.fphero-search input[type=search]:focus{outline:none}
.fphero-search button{border:0;background:var(--amber);color:#fff;font:inherit;font-weight:800;
  font-size:15px;padding:0 26px;cursor:pointer}
.fphero-search button:hover{background:var(--amber-dk)}
.fphero-pop-h{margin:0 0 9px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#9aa0a8}
.fphero-pop{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.fphero-pop a{background:#3a3d44;color:#e7e9ec;font-size:13.5px;font-weight:600;
  padding:8px 13px;text-decoration:none;border:1px solid #4a4e56}
.fphero-pop a:hover{background:#fff;color:var(--ink);border-color:#fff}
.fphero-cta{display:flex;gap:10px;flex-wrap:wrap}
.fphero-cta .btn-o{border-color:#fff;color:#fff;background:transparent}
.fphero-cta .btn-o:hover{background:#fff;color:var(--ink)}

.fphero-card{position:relative;background:#fff;color:var(--ink);padding:16px;align-self:start;
  border-top:4px solid var(--amber);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.fphero-card-h{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.shelf-rows{display:grid}
.shelf-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:9px 0;text-decoration:none;border-top:1px solid var(--line)}
.shelf-row:first-child{border-top:0}
.shelf-row:hover .shelf-name b{color:var(--amber)}
.shelf-shot img{width:52px;height:52px;object-fit:cover;background:var(--paper-2);display:block}
.shelf-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.shelf-name b{font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shelf-name small{font-size:11.5px;color:var(--mute)}
.shelf-price{font-family:var(--head);font-weight:800;font-size:17px;color:var(--ink);white-space:nowrap}
.shelf-btn{width:100%;justify-content:center;margin-top:14px}
.shelf-note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--mute)}

.fpstrip{position:relative;z-index:1;background:rgba(26,28,32,.72);border-top:1px solid #3a3d44;
  backdrop-filter:blur(2px)}
.fpstrip .wrap{display:flex;flex-wrap:wrap;gap:10px 40px;justify-content:space-between;
  padding:13px 20px;font-size:13.5px;color:#c9cbd0}
.fpstrip b{color:#fff;margin-right:6px}

.pband{padding-block:40px 44px;background:var(--paper-2);border-bottom:1px solid var(--line)}
.pband-eyebrow{margin:0 0 6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);font-weight:500}
.pband-h{font-family:var(--head);font-weight:800;font-size:clamp(1.7rem,2.9vw,2.4rem);
  letter-spacing:-.02em;color:var(--ink);margin:0 0 22px}
.pband-h em{font-style:italic;color:var(--amber)}
.pband-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(282px,1fr))}
.pband-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--ink);
  padding:0;text-decoration:none;display:flex;align-items:stretch;gap:0;
  transition:transform .15s ease,border-color .15s ease}
.pband-shot{flex:0 0 96px;background:var(--paper-2)}
.pband-shot img{width:96px;height:100%;min-height:128px;object-fit:cover;display:block}
.pband-txt{display:flex;flex-direction:column;gap:4px;justify-content:center;padding:14px 15px;min-width:0}
.pband-card small{font-size:12.5px;color:var(--body);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pband-card:hover{transform:translateY(-2px);border-color:var(--ink)}
.pband-card.is-t0{border-top-color:var(--amber)}
.pband-card.is-t1{border-top-color:var(--ink)}
.pband-card.is-t2{border-top-color:#8d939c}
.pband-card.is-t3{border-top-color:var(--amber-dk)}
.pband-card b{font-size:14.5px;color:var(--ink);line-height:1.25}
.pband-card i{font-style:normal;font-family:var(--head);font-weight:800;font-size:30px;
  color:var(--ink);line-height:1;display:flex;align-items:baseline;gap:7px}
.pband-card i em{font-style:normal;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.pband-card span{font-size:12.5px;color:var(--mute)}

@media(min-width:1000px){
  .fphero-grid{grid-template-columns:minmax(0,1fr) 380px;gap:48px;padding:52px 20px 44px}
}
@media(max-width:620px){
  .fphero-grid{padding:26px 20px 24px;gap:24px}
  .fphero-cta .btn{flex:1 1 100%;justify-content:center}
  .fpstrip .wrap{gap:8px 20px;font-size:12.5px}
  .pband-grid{grid-template-columns:minmax(0,1fr)}
  .pband-card i{font-size:26px}
  .pband-shot{flex-basis:84px}
  .pband-shot img{width:84px;min-height:106px}
}

/* ── header, in the FatPrint idiom ─────────────────────────────
   A strip, a dark bar with a real search in it, and a row of departments.
   The old header was a wordmark, seven text links and a button on white,
   which is what left the top of the page empty (Imran 2026-10-19: "too much
   dead space ... busy, assertive and authoritive"). */
.topbar{background:var(--amber);color:#fff}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:6px 28px;justify-content:center;
  padding:7px 20px;font-size:12.5px;font-weight:600;letter-spacing:.01em}
.topbar span{display:flex;align-items:center;gap:8px}
.topbar span+span::before{content:"·";opacity:.7;margin-right:10px;font-weight:700}

header{position:sticky;top:0;z-index:60;background:var(--ink);border-bottom:0;backdrop-filter:none}
/* height:auto, not the 64px the old bar carried: once the search wraps onto
   its own line on a phone the fixed height let it spill over the department
   row below. */
header .bar{display:flex;align-items:center;gap:22px;padding-block:13px;height:auto}
header .logo{color:#fff;font-size:1.35rem;white-space:nowrap}
header .logo i{color:var(--amber);font-style:normal}
.hsearch{flex:1 1 auto;display:flex;min-width:0;background:#fff;border:2px solid #fff}
.hsearch input[type=search]{flex:1 1 auto;min-width:0;border:0;padding:11px 14px;font:inherit;
  font-size:14.5px;color:var(--ink);background:#fff}
.hsearch input[type=search]:focus{outline:none}
.hsearch button{flex:0 0 auto;border:0;background:var(--amber);color:#fff;font:inherit;
  font-weight:800;font-size:14px;padding:0 20px;cursor:pointer}
.hsearch button:hover{background:var(--amber-dk)}
header .hdr{display:flex;align-items:center;gap:18px}
.hlink{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.hlink b{color:#fff;font-size:14px}
.hlink span{color:#b9bdc4;font-size:11.5px}
.hlink:hover b{color:var(--amber)}
header .btn-a{padding:12px 18px;font-size:14.5px}
header .burger{display:none;width:42px;height:42px;border:1px solid #4a4e56;background:transparent;
  border-radius:0;flex-direction:column;align-items:center;justify-content:center;gap:4px}
header .burger i{display:block;width:18px;height:2px;background:#fff;border-radius:0}

.deptbar{background:#22242a;border-top:1px solid #3a3d44}
/* One line, always: at 1440 the eight departments plus the kit pill filled
   the row exactly, so the pill wrapped onto a line of its own and left a
   black band under the nav. The row scrolls sideways instead, the way
   FatPrint's does. */
.deptbar .wrap{display:flex;flex-wrap:nowrap;align-items:center;gap:0;padding-block:0;
  overflow-x:auto;scrollbar-width:none}
.deptbar .wrap::-webkit-scrollbar{display:none}
.deptbar a{color:#d6d9de;font-size:13.5px;font-weight:600;padding:11px 13px;white-space:nowrap;
  text-decoration:none}
.deptbar a:hover{background:var(--ink);color:#fff;text-decoration:none}
.deptbar-kit{margin-left:auto;background:var(--amber);color:#fff!important;font-weight:800;
  flex:0 0 auto}
.deptbar-kit:hover{background:var(--amber-dk)!important}

@media(max-width:1100px){
  .hlink{display:none}
  .deptbar-kit{margin-left:0}
}
@media(max-width:820px){
  header .bar{flex-wrap:wrap;gap:12px}
  .hsearch{order:3;flex-basis:100%}
  header .burger{display:inline-flex}
  header .btn-a{display:none}
  .topbar .wrap{font-size:11.5px;gap:4px 16px}
  .topbar span:nth-child(3){display:none}
}

/* ── the shop sections on the homepage ───────────────────────────
   Imran 2026-10-19: "home needs to be mega and sales and conversion
   related". The page now opens on the shelf rather than on a lead form, so
   it needs the furniture a shop front uses: a price panel in the hero, a
   department grid with real photographs, and a product row. Every photo
   comes through /img.php, so the page carries no re-hosted images. */

/* hero price panel */
.hero-shelf{background:#fff;border:1px solid var(--line);padding:22px}
.hero-shelf-h{display:flex;align-items:center;gap:9px;margin:0 0 16px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.hero-plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}
.plead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:11px 13px;background:var(--paper-2);border:1px solid var(--line);text-decoration:none}
.plead:hover{border-color:var(--ink);background:#fff}
.plead b{font-size:14.5px;color:var(--ink)}
.plead i{font-style:normal;font-weight:800;font-size:14.5px;color:var(--amber)}
.hero-pshots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:14px}
.hero-pshots .pcard b,.hero-pshots .pcard .pcard-go{display:none}
.hero-pshots .pcard{padding:0;border:1px solid var(--line)}
.hero-pshots .pcard i{position:absolute;left:0;bottom:0;background:var(--ink);color:#fff;
  font-style:normal;font-size:12px;font-weight:800;padding:3px 7px}

/* department grid */
.shelves{padding-block:52px 44px}
.depts{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:26px}
.dept{display:flex;align-items:stretch;gap:0;border:1px solid var(--line);background:#fff;
  text-decoration:none;overflow:hidden;transition:border-color .15s ease,transform .15s ease}
.dept:hover{border-color:var(--ink);transform:translateY(-2px)}
.dept-shot{flex:0 0 108px;background:var(--paper-2);display:block}
.dept-shot img{width:108px;height:100%;min-height:118px;object-fit:cover;display:block}
.dept-txt{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:14px 16px;min-width:0}
.dept-txt b{font-family:var(--head);font-size:17px;color:var(--ink);line-height:1.15}
.dept-txt small{font-size:13.5px;color:var(--body);line-height:1.4}
.dept-txt i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--amber);font-weight:500;margin-top:2px}

/* product row */
.pgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:26px}
.pcard{position:relative;display:flex;flex-direction:column;gap:7px;padding:10px 10px 14px;
  background:#fff;border:1px solid var(--line);text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.pcard:hover{border-color:var(--ink);transform:translateY(-2px)}
.pcard-shot{display:block;background:var(--paper-2);aspect-ratio:1/1;overflow:hidden}
.pcard-shot img{width:100%;height:100%;object-fit:cover;display:block}
.pcard b{font-size:14px;line-height:1.3;color:var(--ink);font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard i{font-style:normal;font-family:var(--head);font-weight:800;font-size:19px;color:var(--ink)}
.pcard-go{font-size:12.5px;color:var(--amber);font-weight:700}
@media(max-width:620px){
  .hero-plist{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dept-shot{flex-basis:92px}
  .dept-shot img{width:92px;min-height:104px}
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* the article sidebar now holds the shop cards, so it needs their styling
   and the dead gap under a brand/guide hero goes */
.article-sidebar .rail-card{background:var(--white);border:1px solid var(--line);padding:18px}
.article-sidebar .rail-cta{background:var(--ink);border-color:var(--ink)}
.article-sidebar{gap:14px}
.side-card{padding:18px;border-radius:0}
.side-card h4{font-size:15px;margin-bottom:10px}
.article-hero{height:auto;min-height:0;max-height:none;padding:30px 0 26px}
.article-hero h1{margin-bottom:6px}
.article-layout{gap:30px;margin-top:26px}
.prose h2{margin-top:26px}

.brand-grid{display:grid;gap:12px;margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.brand-grid .pcard{padding:8px 8px 12px}
.brand-grid .pcard b{font-size:13px}
.brand-grid .pcard i{font-size:17px}

.shelf-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px;
  border-top:1px solid var(--line);padding-top:12px}
.shelf-facts span{display:flex;flex-direction:column;gap:1px;font-size:11.5px;color:var(--mute);line-height:1.3}
.shelf-facts b{font-family:var(--head);font-weight:800;font-size:17px;color:var(--ink)}

/* the closing section's left column, which used to end three ticks in while
   the form ran on for another 500px */
.final-next{margin-top:22px;border-top:1px solid var(--line);padding-top:18px}
.final-next-h{margin:0 0 10px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
.final-next ol{list-style:none;margin:0;padding:0;counter-reset:fn;display:grid;gap:10px}
/* The sentence after <b> was a bare text node, so the grid treated it as its
   own item and dropped it into the 26px number column — one word per line,
   which is what Imran photographed. Each step is one <span> now. */
.final-next li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;
  font-size:14.5px;line-height:1.5;color:var(--body)}
.final-next li>span{grid-column:2;min-width:0}
.final-next li::before{counter-increment:fn;content:counter(fn);width:26px;height:26px;
  display:grid;place-items:center;background:var(--ink);color:#fff;font-family:var(--head);
  font-weight:800;font-size:12.5px}
.final-next b{display:block;color:var(--ink);font-family:var(--head);font-size:14.5px}
.final-shelf{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.final-shelf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(max-width:620px){.final-shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.final .hero-grid{align-items:stretch}
.final .hero-grid>div:first-child{display:flex;flex-direction:column;justify-content:space-between;gap:16px}
.final .final-next,.final .final-shelf{margin-top:0}

/* collection pages (women's, waterproof, winter, summer, near me) */
.coll-head{background:var(--paper-2);border-bottom:1px solid var(--line);padding:26px 0 24px}
.coll-head .crumb{margin-bottom:10px}
.coll-head h1{font-size:clamp(2rem,3.6vw,2.9rem);letter-spacing:-.02em;margin-bottom:10px}
.coll-head .lede{max-width:62ch}

/* PPE pages: supplier cards and the per-page Q&A.
   A PPE card is not a product card — there is no price on it, because PPE is
   brought in to order and the quantity and the standard move the price. It
   shows the real style, the real brand and the real standards the supplier
   publishes, and its action is the request form, never a basket. */
.ppe-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:12px}
.ppecard{display:flex;flex-direction:column;gap:7px;padding:11px;background:var(--paper);
  border:1px solid var(--line);text-decoration:none;color:inherit;transition:border-color .12s}
.ppecard:hover{border-color:var(--amber)}
.ppecard-shot{display:block;aspect-ratio:1/1;background:var(--paper-2);overflow:hidden}
.ppecard-shot img{width:100%;height:100%;object-fit:contain;display:block}
.ppecard b{font-size:14px;line-height:1.3}
.ppecard .ppecard-brand{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--mute)}
.ppecard .ppecard-std{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}
.ppecard .ppecard-std span{font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:2px 5px;background:var(--amber);color:#fff}
.ppecard .ppecard-go{font-size:12px;font-weight:700;color:var(--amber)}
.ppe-note{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;
  background:var(--paper-2);border-left:3px solid var(--amber);font-size:14.5px}
.ppe-form .f input::placeholder,.ppe-form .f textarea::placeholder{opacity:.62}

.faq-wrap{padding:30px 0}
.faq-head{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:14px}
.faq-list{display:flex;flex-direction:column;gap:8px;max-width:78ch}
.faq-q{background:var(--paper);border:1px solid var(--line);padding:12px 14px}
.faq-q summary{font-weight:700;cursor:pointer;line-height:1.35;font-size:15.5px}
.faq-q summary::marker{color:var(--amber)}
.faq-q[open] summary{margin-bottom:8px}
.faq-a p{font-size:15px;line-height:1.6;margin:0 0 8px}
.faq-a p:last-child{margin-bottom:0}

/* ── compaction pass ───────────────────────────────────────────────
   Imran 2026-10-19: "shit dead design - why such empty gaps - make whole
   site compact".

   The measurements behind this (a probe that walks the rendered page and
   reports gaps over 90px and columns more than 220px shorter than their
   neighbour):
     home  — hero card 971px against a 1,554px column
     kits  — 968px gap, rail 1,039 against 1,899
     brand — 1,276px gap, prose 468 against a 1,752 sidebar

   So: the hero's two columns are stretched to the same height and the card
   spreads to fill it; the page runs on a tighter scale throughout; and the
   content column is wider, which is the cheapest way to stop a page looking
   half empty. */
:root{--max:1280px}
.fphero-grid{align-items:stretch;padding:34px 20px 28px}
@media(min-width:1000px){.fphero-grid{padding:40px 20px 32px;gap:40px}}
.fphero-card{display:flex;flex-direction:column}
.shelf-rows{flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between}
.shelf-row{padding:7px 0}
.fphero-h1{font-size:clamp(2.4rem,4.8vw,3.9rem);margin-bottom:12px}
.fphero-lead{font-size:16px;margin-bottom:16px}
.fphero-search{margin-bottom:14px}
.fphero-pop{margin-bottom:18px}

section{padding:34px 0}
section.tint{padding:34px 0}
section + section{padding-top:20px}
.band{padding:36px 0}
.final{padding:36px 0}
.grid{gap:12px;margin-top:18px}
.card{padding:15px 15px 17px}
.depts{gap:12px;margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.pgrid{gap:12px;margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(168px,1fr))}
.pband-grid{gap:10px;grid-template-columns:repeat(auto-fit,minmax(252px,1fr))}
.pband{padding-block:32px 34px}
.pband-h{margin-bottom:18px}
.head-2{margin-bottom:8px}
.lede{margin-bottom:0}
ol.steps li{padding:13px 0}
.article-layout{gap:26px;margin-top:20px}
.article-hero{padding:24px 0 20px}
footer .fg{padding:26px 0 6px;gap:22px 24px}
.foot-top{padding:20px 0}
.legal{margin-top:18px;padding-top:14px}
@media(max-width:620px){
  section,section.tint{padding:26px 0}
  .band,.final{padding:28px 0}
}

/* ── the audit pass ───────────────────────────────────────────────
   Imran 2026-10-19: "so many sections have dead space till the end, make
   backgrounds like you done with hero - do this to footer as well", and
   then "audit all bullshit designs".

   Three real faults, not taste:

   1. FULL-BLEED BANDS WERE TRAPPED IN THE RAIL COLUMN. Every page except the
      homepage is wrapped in .railed, so the dark CTA band rendered at the
      width of the text column with white gutters either side and the rail's
      empty column beside it — the band in his screenshot. They break out to
      the viewport now, and their own .wrap keeps the words centred.
   2. FLAT GROUNDS. The hero got depth; everything below it stayed a white
      rectangle. The dark bands and the footer now carry the same graded
      ground, dot field and crimson slab, and the tinted sections carry a
      faint version of it.
   3. THE RAIL RAN OUT. It is sticky, so on a long page the column below it
      was empty to the bottom. It now stops being sticky and the main column
      widens once there is nothing left to stick. */

/* 1 — full-bleed blocks are kept OUT of the rail wrapper by render.py
   rather than being dragged back out with 100vw, which only worked from the
   page's centre and not from a column's. */

/* 2 — grounds with depth */
.band{position:relative;overflow:hidden;
  background:
    radial-gradient(900px 420px at 82% 12%, rgba(200,16,46,.26), transparent 60%),
    linear-gradient(152deg,#3a3d45 0%,#2e3036 42%,#26282d 74%,#1f2126 100%);
  color:#d7d9de}
.band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(100deg,transparent 42%,#000 78%);
  mask-image:linear-gradient(100deg,transparent 42%,#000 78%)}
.band::after{content:"";position:absolute;right:-120px;top:-90px;width:420px;height:420px;
  background:var(--amber);opacity:.13;transform:rotate(18deg);pointer-events:none;display:block}
.band>*{position:relative;z-index:1}
.band h2{color:#fff}

section.tint{position:relative;
  background:
    radial-gradient(760px 320px at 92% 0%, rgba(200,16,46,.05), transparent 60%),
    linear-gradient(180deg,#f8f8f9 0%,#f2f2f4 100%)}
section.tint::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(42,44,49,.08) 1px,transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:linear-gradient(100deg,transparent 55%,#000 92%);
  mask-image:linear-gradient(100deg,transparent 55%,#000 92%)}
section.tint>*{position:relative;z-index:1}

footer{position:relative;overflow:hidden;
  background:
    radial-gradient(900px 420px at 88% 0%, rgba(200,16,46,.22), transparent 62%),
    linear-gradient(160deg,#34373e 0%,#2b2d33 46%,#232529 100%)}
footer::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(100deg,transparent 46%,#000 84%);
  mask-image:linear-gradient(100deg,transparent 46%,#000 84%)}
footer::after{content:"";position:absolute;left:-140px;bottom:-180px;width:460px;height:460px;
  background:var(--amber);opacity:.10;transform:rotate(22deg);pointer-events:none}
footer>.wrap{position:relative;z-index:1}
.foot-top{border-bottom-color:rgba(255,255,255,.14)}
.legal{border-top-color:rgba(255,255,255,.14)}

/* 3 — the rail lets go once the page outruns it */
@media(min-width:1080px){
  .rail{align-self:start}
}

/* ── the shop rail ─────────────────────────────────────────
   "side bar needed on all pages except home page" (Imran 2026-10-19). Every
   page that did not already carry one gets this column: the departments with
   their entry prices, the kit builder and the buying rules. It drops under
   the page on anything narrower than a laptop. */
.railed{display:grid;gap:34px;align-items:start;max-width:var(--max);margin:0 auto;padding:0 20px}
.railed-main{min-width:0}
.railed-main>section>.wrap,.railed-main>div>.wrap,.railed-main .wrap{padding-left:0;padding-right:0;max-width:none}
.rail{display:grid;gap:14px;align-content:start}
.rail-card{background:var(--white);border:1px solid var(--line);padding:18px}
.rail-card h4{font-family:var(--head);font-size:15px;font-weight:800;color:var(--ink);margin:0 0 12px}
.rail-card p{font-size:14px;line-height:1.55;margin:0 0 14px}
.rail-depts,.rail-facts{list-style:none;margin:0;padding:0}
.rail-depts li+li{border-top:1px solid var(--line)}
.rail-depts a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:9px 0;font-size:14.5px;text-decoration:none;color:var(--body)}
.rail-depts a:hover{color:var(--ink)}
.rail-depts i{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--amber)}
.rail-facts li{display:flex;flex-direction:column;gap:1px;padding:8px 0;font-size:13.5px;line-height:1.45}
.rail-facts li+li{border-top:1px solid var(--line)}
.rail-facts b{color:var(--ink);font-size:14.5px}
.rail-btn{width:100%;justify-content:center;margin-top:12px}
.rail-cta{background:var(--ink);border-color:var(--ink);color:#fff}
.rail-cta h4,.rail-cta p{color:#fff}
.rail-cta p{opacity:.9}
@media(min-width:1080px){
  .railed{grid-template-columns:minmax(0,1fr) 300px;gap:44px}
  /* clears the strip + bar + department row, which together stand ~140px */
  .rail{position:sticky;top:152px}
}

footer{background:#2a2c31;color:#c9cbd0;padding-top:0}
.foot-top{display:flex;flex-wrap:wrap;gap:20px 36px;align-items:center;justify-content:space-between;
  padding:26px 0;border-bottom:1px solid #3c4046}
.foot-promises{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 34px;font-size:14.5px}
.foot-promises li{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.foot-promises b{color:#fff;font-size:15.5px;font-weight:700}
.foot-act{display:flex;gap:10px;flex-wrap:wrap}
.foot-act .btn{padding:12px 20px;font-size:14.5px}
.foot-act .btn-l{background:transparent;border:1px solid #6d7279;color:#fff}
.foot-act .btn-l:hover{background:#fff;border-color:#fff;color:#2a2c31}

/* Explicit tracks, not auto-fit: with auto-fit the brand block's two
   columns pushed the sixth list onto a row of its own, which is the hole in
   the screenshot. Six items, six tracks, one row. */
footer .fg{display:grid;gap:28px 26px;padding:34px 0 10px;
  grid-template-columns:1.7fr repeat(5,minmax(0,1fr))}
.foot-brand{max-width:420px}
@media(max-width:1040px){
  footer .fg{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1;max-width:640px}
}
@media(max-width:620px){
  footer .fg{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
.foot-mark{font-family:var(--head);font-size:1.35rem;font-weight:800;color:#fff;margin-bottom:10px}
.foot-mark span{color:var(--amber)}
.foot-brand p{font-size:14.5px;line-height:1.6}
.foot-phone{margin-top:16px}
.foot-phone a{color:#fff;font-weight:700;border-bottom:2px solid var(--amber);padding-bottom:2px}
.foot-phone a:hover{color:var(--amber)}
footer h4{color:#fff;font-family:var(--head);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:12px}
footer li{margin-bottom:8px}
footer a{color:#c9cbd0;text-decoration:none;font-size:14.5px}
footer a:hover{color:#fff}
.legal{border-top:1px solid #3c4046;margin-top:24px;padding-top:18px;font-size:12.5px;
  line-height:1.65;color:#8f949b;max-width:none}
.zz-credit{font-size:12px;line-height:1.6;text-align:center;padding:4px 12px 16px;color:#70757c}
.zz-credit a{color:inherit;font-size:12px}
@media(max-width:620px){
  .foot-top{padding:20px 0}
  .foot-promises{gap:10px 20px;font-size:13.5px}
  .foot-act{width:100%}
  .foot-act .btn{flex:1 1 100%;text-align:center;justify-content:center}
}