/* ------------------------------------------------------------------
   schucobifolddoorslondon.co.uk — shared stylesheet
   Palette taken from the materials themselves: matt anthracite (close to
   RAL 7016), mill-finish aluminium grey, and the green you see on the
   edge of a sheet of float glass.
------------------------------------------------------------------- */

:root{
  --ink:#151b1e;
  --ink-2:#3a474d;
  --slate:#63727a;
  --line:#d3dbdd;
  --line-soft:#e4e9ea;
  --paper:#e8ecec;
  --surface:#ffffff;
  --glass:#0b6b5b;
  --glass-dk:#074a3f;
  --glass-wash:#eaf3f0;

  --measure:40rem;
  --gutter:clamp(1.15rem, 4vw, 2.5rem);

  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:1.0625rem;
  line-height:1.72;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}

img,svg{max-width:100%;height:auto}

a{color:var(--glass-dk);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--glass);outline-offset:3px}

h1,h2,h3,h4{font-family:var(--f-display);font-weight:650;line-height:1.14;letter-spacing:-.02em;margin:0}
h1{font-size:clamp(1.95rem,1.35rem + 2.5vw,3.15rem);letter-spacing:-.033em}
h2{font-size:clamp(1.35rem,1.1rem + 1.05vw,1.85rem);margin:2.6rem 0 .85rem}
h3{font-size:clamp(1.08rem,1rem + .35vw,1.22rem);margin:1.9rem 0 .5rem}

p{margin:0 0 1.15rem}
ul,ol{margin:0 0 1.25rem;padding-left:1.15rem}
li{margin-bottom:.5rem}
strong{font-weight:650}

.wrap{width:min(100% - (var(--gutter) * 2),70rem);margin-inline:auto}
.mono{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:99;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:2px}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:40;
  background:rgba(232,236,236,.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);flex:0 0 auto}
.brand svg{display:block;flex:0 0 auto}
.brand b{font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.025em;display:block;line-height:1.15}
.brand em{font-family:var(--f-mono);font-size:.6rem;font-style:normal;letter-spacing:.17em;text-transform:uppercase;color:var(--slate);display:block}
@media (max-width:420px){.brand b{font-size:.92rem}.brand em{font-size:.53rem;letter-spacing:.13em}}

.site-nav{margin-left:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.site-nav::-webkit-scrollbar{display:none}
.site-nav ul{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0;white-space:nowrap}
.site-nav li{margin:0}
.site-nav a{
  font-family:var(--f-display);font-size:.87rem;font-weight:500;
  color:var(--ink-2);text-decoration:none;padding:.25rem 0;
  border-bottom:2px solid transparent;display:block;
}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--glass)}

@media (max-width:720px){
  .head-in{padding:.6rem 0 0}
  .site-nav{flex:1 0 100%;margin:0;border-top:1px solid var(--line-soft);padding:.45rem 0}
  .site-nav ul{gap:1.1rem}
}

/* ---------- hero ---------- */
.hero{padding:clamp(2.2rem,6vw,4.4rem) 0 clamp(1.8rem,4vw,3rem);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.15fr .85fr}}
.hero .lede{font-size:1.17rem;color:var(--ink-2);max-width:34rem;margin-top:1.1rem}
.eyebrow{display:block;margin-bottom:1rem;color:var(--glass-dk)}
.section-fig{background:var(--surface);border:1px solid var(--line);padding:1.2rem}
.section-fig figcaption{margin-top:.7rem;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);line-height:1.6}

/* ---------- spec strip ---------- */
.spec{
  display:flex;flex-wrap:wrap;gap:.35rem 1.6rem;
  border-top:1px solid var(--ink);border-bottom:1px solid var(--line);
  padding:.65rem 0;margin:1.6rem 0 0;
}
.spec div{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.spec b{color:var(--ink);font-weight:500}

/* ---------- sections ---------- */
.band{padding:clamp(2.2rem,5vw,3.6rem) 0}
.band + .band{border-top:1px solid var(--line)}
.band-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.band-head h2{margin:0}

/* ---------- cards ---------- */
.cards{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);list-style:none;padding:0;margin:0}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}}
.cards li{margin:0;background:var(--surface);display:flex}
.card{display:flex;flex-direction:column;padding:1.5rem 1.4rem;text-decoration:none;color:inherit;width:100%}
.card:hover{background:var(--glass-wash)}
.card h3{margin:.55rem 0 .5rem;font-size:1.09rem;line-height:1.25}
.card p{font-size:.94rem;color:var(--ink-2);margin:0 0 1.1rem}
.card .more{margin-top:auto;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--glass-dk)}

.card-feature{background:var(--ink);color:#f2f5f5}
.card-feature h3{color:#fff}
.card-feature p{color:#c3cccd}
.card-feature .mono{color:#8fb3ab}
.card-feature .more{color:#7ec7b5}
.card-feature:hover{background:#0e1416}

/* ---------- article ---------- */
.crumbs{padding:1.3rem 0 0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase}
.crumbs li{margin:0;color:var(--slate)}
.crumbs li + li::before{content:"/";margin-right:.5rem;color:var(--line)}
.crumbs a{color:var(--slate);text-decoration:none}
.crumbs a:hover{color:var(--glass-dk);text-decoration:underline}

.post-head{padding:1.1rem 0 0}
.post-head h1{max-width:22ch}
.standfirst{font-size:1.15rem;color:var(--ink-2);max-width:var(--measure);margin-top:1rem}

.post{padding:2.2rem 0 3rem}
.post > *{max-width:var(--measure)}
.post h2{max-width:26ch}
.post ul li::marker{color:var(--glass)}

.note{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--glass);
  padding:1.1rem 1.2rem;margin:1.7rem 0;font-size:.99rem;
}
.note p:last-child{margin-bottom:0}
.note .mono{display:block;margin-bottom:.45rem;color:var(--glass-dk)}
.note-check{border-left-color:var(--ink)}
.note-check .mono{color:var(--ink)}

.tbl-wrap{overflow-x:auto;margin:1.7rem 0;border:1px solid var(--line);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:32rem;font-size:.92rem}
th,td{text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--line-soft)}
th{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:var(--slate);font-weight:400;background:#f4f7f7}
td.num{font-family:var(--f-mono);font-size:.83rem;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}

.byline{
  border-top:1px solid var(--ink);border-bottom:1px solid var(--line);
  padding:.8rem 0;margin-top:1.6rem;
  display:flex;flex-wrap:wrap;gap:.3rem 1.5rem;
}
.byline p{margin:0;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.byline b{color:var(--ink);font-weight:500}

.faq{margin-top:2.6rem}
.faq details{border-top:1px solid var(--line);padding:.9rem 0}
.faq details:last-of-type{border-bottom:1px solid var(--line)}
.faq summary{
  font-family:var(--f-display);font-weight:600;font-size:1.02rem;cursor:pointer;
  list-style:none;display:flex;gap:.8rem;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";font-family:var(--f-mono);color:var(--glass);flex:0 0 auto;line-height:1.4}
.faq details[open] summary::before{content:"–"}
.faq details p{margin:.75rem 0 0}

.post-foot{border-top:1px solid var(--line);padding-top:1.4rem;margin-top:2.6rem;max-width:var(--measure)}
.post-foot p{font-size:.95rem;color:var(--ink-2)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:0}
.chips li{margin:0}
.chips span,.chips a{
  display:inline-block;background:var(--surface);border:1px solid var(--line);
  padding:.32rem .7rem;font-family:var(--f-mono);font-size:.66rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink-2);text-decoration:none;
}
.chips a:hover{border-color:var(--glass);color:var(--glass-dk)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#b9c4c6;padding:2.8rem 0 2rem;font-size:.92rem;margin-top:0}
.site-foot a{color:#e4eceb}
.foot-grid{display:grid;gap:2rem}
@media (min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.site-foot h2{font-size:.7rem;font-family:var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#7d8d8f;margin:0 0 .9rem;font-weight:400}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:.45rem}
.site-foot p{margin:0 0 .9rem;max-width:34rem}
.legal{border-top:1px solid #2b3639;margin-top:2.2rem;padding-top:1.2rem;font-size:.78rem;color:#7d8d8f;line-height:1.65}
.legal a{color:#9fb0b1}