/* Poppins, served from this site. Loading it from Google Fonts would send every
   visitor's IP address to Google on page load — a disclosure the privacy notice
   would then have to make, and one German readers react to. Subset to Latin,
   about 40 kB for all three weights. */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url("b95c9b8c3c489b1d.woff") format("woff")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url("d6c5f4913d6742cf.woff") format("woff")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url("0bce852d3ad26304.woff") format("woff")}

/* CANDEO — trade site.
   Dark ground throughout. The palette is the logo's own letter colours:
   C #881088 purple · N #e1662b orange · D #108888 teal · E #6060ff blue
   · O #e4ad2c gold. Each section takes one of them and carries it in its
   ground, its heading, its rules and its cards. Neutrals are the company
   profile's: ink #23282f, charcoal #2b3138, slate #3c444e. Type: Poppins. */
:root{
  /* logo colours, and the lifted variants that survive a dark ground */
  --purple:#881088; --purple-lt:#d071d0; --purple-bg:#4a1152;
  --orange:#e1662b; --orange-lt:#f5985f; --orange-bg:#7d3210;
  --teal:#108888;   --teal-lt:#45c2c2;   --teal-bg:#0d5757;
  --blue:#6060ff;   --blue-lt:#9d9dff;   --blue-bg:#2b2b7a;
  --gold:#e4ad2c;   --gold-lt:#f0c65e;   --gold-bg:#6a4a0c;

  --ink:#1b2026; --ground:#23282f; --ground2:#2b3138; --slate:#3c444e;
  --text:#dfe4e9; --text-dim:#a8b1bb; --line:rgba(255,255,255,.13);
  --max:1180px; --gut:clamp(20px,5vw,56px);
  --sec:var(--teal-lt); --sec-solid:var(--teal);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:120px}
body{margin:0;background:var(--ground);color:var(--text);
  font:400 17px/1.62 Poppins,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:60;background:rgba(27,32,38,.94);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.09)}
header.site:before{content:"";display:block;height:4px;
  background:linear-gradient(90deg,var(--purple) 0 20%,var(--orange) 20% 40%,
    var(--teal) 40% 60%,var(--blue) 60% 80%,var(--gold) 80% 100%)}
.bar{display:flex;align-items:center;gap:26px;height:64px}
.brand{display:flex;align-items:center;padding:4px 0;text-decoration:none}
.brand img{height:23px;width:auto}
.bar .right{margin-left:auto;display:flex;align-items:center;gap:20px}
.bar .tel{font-size:14px;color:var(--text-dim);text-decoration:none}
.bar .tel:hover{color:var(--teal-lt)}
@media(max-width:680px){.bar .tel{display:none}}

/* ---------- section rail ---------- */
.rail{position:sticky;top:68px;z-index:55;background:var(--ink);
  border-bottom:1px solid rgba(255,255,255,.09)}
.rail-in{display:flex;overflow-x:auto;scrollbar-width:none}
.rail-in::-webkit-scrollbar{display:none}
.rail a{flex:0 0 auto;display:flex;align-items:baseline;gap:8px;padding:13px 18px;
  text-decoration:none;color:var(--text-dim);font-size:14px;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,background .15s}
.rail a i{font-style:normal;font-size:11px;letter-spacing:.1em;font-weight:600}
.rail a:hover{color:#fff;background:rgba(255,255,255,.06)}
.rail a.on{color:#fff}
.rail a:nth-child(1) i{color:var(--purple-lt)} .rail a:nth-child(1).on{border-bottom-color:var(--purple-lt)}
.rail a:nth-child(2) i{color:var(--teal-lt)}   .rail a:nth-child(2).on{border-bottom-color:var(--teal-lt)}
.rail a:nth-child(3) i{color:var(--blue-lt)}   .rail a:nth-child(3).on{border-bottom-color:var(--blue-lt)}
.rail a:nth-child(4) i{color:var(--orange-lt)} .rail a:nth-child(4).on{border-bottom-color:var(--orange-lt)}
.rail a:nth-child(5) i{color:var(--gold-lt)}   .rail a:nth-child(5).on{border-bottom-color:var(--gold-lt)}
.rail a:nth-child(6) i{color:var(--purple-lt)} .rail a:nth-child(6).on{border-bottom-color:var(--purple-lt)}
.rail a:nth-child(7) i{color:var(--teal-lt)}   .rail a:nth-child(7).on{border-bottom-color:var(--teal-lt)}
.rail a.last{margin-left:auto;background:var(--orange);color:#fff;font-weight:500}
.rail a.last i{color:rgba(255,255,255,.8)}
.rail a.last:hover{background:var(--orange-lt);color:var(--ink)}
@media(max-width:1040px){.rail a.last{margin-left:0}}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.12;color:#fff}
h1{font-size:clamp(33px,5.2vw,60px);letter-spacing:-.032em;line-height:1.04}
h2{font-size:clamp(26px,3.4vw,40px)}
h3{font-size:clamp(19px,2vw,23px);letter-spacing:-.012em;color:var(--sec)}
p{margin:0 0 18px;color:var(--text)}
.lead{font-size:clamp(17px,1.9vw,20px);line-height:1.58;color:var(--text-dim)}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--sec);margin:0 0 18px;display:flex;align-items:center;gap:12px}
.eyebrow b{display:inline-block;background:var(--sec);color:var(--ink);
  padding:3px 8px;border-radius:2px;font-weight:700;letter-spacing:.1em}
.eyebrow:after{content:"";flex:1;height:1px;background:var(--sec);opacity:.4;max-width:140px}
.mute{color:var(--text-dim)}
.small{font-size:14.5px;line-height:1.55}
.cap{font-size:12.5px;color:var(--text-dim);margin-top:9px}

/* ---------- sections ---------- */
section{padding:clamp(56px,8vw,100px) 0;background:var(--ground);position:relative}
section:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,var(--sec),transparent 55%);opacity:.55}
section.first:before{display:none}
section.tint{background:var(--ground2)}
section.dark{background:var(--sec-bg,var(--ink))}
.head{max-width:790px;margin-bottom:clamp(30px,4vw,50px)}
.head p:last-child{margin-bottom:0}
.head h2+p,.head h2+.lead{margin-top:16px}
.split h3+p,.split h3+.lead{margin-top:12px}

/* section colour assignment */
#what-we-are  {--sec:var(--purple-lt);--sec-solid:var(--purple);--sec-bg:var(--purple-bg)}
#the-case     {--sec:var(--teal-lt);  --sec-solid:var(--teal);  --sec-bg:var(--teal-bg)}
#product      {--sec:var(--blue-lt);  --sec-solid:var(--blue);  --sec-bg:var(--blue-bg)}
#casegoods    {--sec:var(--blue-lt);  --sec-solid:var(--blue)}
#doors        {--sec:var(--blue-lt);  --sec-solid:var(--blue)}
#matched      {--sec:var(--purple-lt);--sec-solid:var(--purple);--sec-bg:var(--purple-bg)}
#plant        {--sec:var(--orange-lt);--sec-solid:var(--orange);--sec-bg:var(--orange-bg)}
#finishing    {--sec:var(--orange-lt);--sec-solid:var(--orange)}
#quality      {--sec:var(--gold-lt);  --sec-solid:var(--gold);  --sec-bg:var(--gold-bg)}
#traceability {--sec:var(--gold-lt);  --sec-solid:var(--gold);  --sec-bg:var(--gold-bg)}
#delivery     {--sec:var(--purple-lt);--sec-solid:var(--purple);--sec-bg:var(--purple-bg)}
#programme    {--sec:var(--teal-lt);  --sec-solid:var(--teal)}
#contact      {--sec:var(--orange-lt);--sec-solid:var(--orange);--sec-bg:var(--orange-bg)}

/* ---------- hero ---------- */
.hero{padding:clamp(58px,8vw,104px) 0 clamp(40px,5vw,62px);overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(52rem 26rem at 88% -12%, rgba(96,96,255,.30), transparent 62%),
    radial-gradient(44rem 24rem at 8% 8%,  rgba(136,16,136,.26), transparent 60%),
    radial-gradient(40rem 22rem at 62% 108%, rgba(16,136,136,.28), transparent 62%),
    radial-gradient(30rem 18rem at 96% 78%, rgba(225,102,43,.22), transparent 62%)}
.hero .wrap{position:relative;z-index:1}
.hero h1{max-width:15ch}
.hero .lead{max-width:58ch;margin-top:24px;color:var(--text)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.btn{display:inline-block;text-decoration:none;font-size:15px;font-weight:500;
  padding:14px 26px;border-radius:2px;border:1px solid var(--teal);
  background:var(--teal);color:#fff}
.btn:hover{background:var(--teal-lt);border-color:var(--teal-lt);color:var(--ink)}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.bar .btn{padding:11px 20px;background:var(--orange);border-color:var(--orange)}
.bar .btn:hover{background:var(--orange-lt);border-color:var(--orange-lt);color:var(--ink)}

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:clamp(36px,5vw,56px)}
.facts div{background:var(--ground2);padding:22px 20px;border-top:3px solid}
.facts div:nth-child(1){border-top-color:var(--purple-lt)}
.facts div:nth-child(2){border-top-color:var(--orange-lt)}
.facts div:nth-child(3){border-top-color:var(--teal-lt)}
.facts div:nth-child(4){border-top-color:var(--blue-lt)}
.facts b{display:block;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.022em;
  line-height:1.1;font-weight:600;color:#fff}
.facts div:nth-child(1) b{color:var(--purple-lt)}
.facts div:nth-child(2) b{color:var(--orange-lt)}
.facts div:nth-child(3) b{color:var(--teal-lt)}
.facts div:nth-child(4) b{color:var(--blue-lt)}
.facts span{display:block;font-size:12px;color:var(--text-dim);margin-top:7px;
  letter-spacing:.06em;text-transform:uppercase}
@media(max-width:760px){.facts{grid-template-columns:repeat(2,1fr)}}

/* ---------- grids ---------- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,52px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px)}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,26px)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,60px);align-items:start}
@media(max-width:900px){.g2,.g3,.g4,.split{grid-template-columns:1fr}}
@media(max-width:900px) and (min-width:560px){.g4{grid-template-columns:1fr 1fr}}

/* ---------- cards ---------- */
.card{background:rgba(255,255,255,.045);border:1px solid var(--line);
  border-top:3px solid var(--sec);padding:clamp(22px,3vw,30px)}
.card h3{margin-bottom:12px;color:var(--sec)}
.card p{color:var(--text-dim)}
.card p:last-child{margin-bottom:0}
.card .num{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--sec);
  display:block;margin-bottom:13px}
.g3 .card:nth-child(1){border-top-color:var(--purple-lt)}
.g3 .card:nth-child(2){border-top-color:var(--orange-lt)}
.g3 .card:nth-child(3){border-top-color:var(--teal-lt)}
.g3 .card:nth-child(4){border-top-color:var(--blue-lt)}
.g3 .card:nth-child(5){border-top-color:var(--gold-lt)}
.g3 .card:nth-child(6){border-top-color:var(--purple-lt)}
.g3 .card:nth-child(1) h3,.g3 .card:nth-child(1) .num{color:var(--purple-lt)}
.g3 .card:nth-child(2) h3,.g3 .card:nth-child(2) .num{color:var(--orange-lt)}
.g3 .card:nth-child(3) h3,.g3 .card:nth-child(3) .num{color:var(--teal-lt)}
.g3 .card:nth-child(4) h3{color:var(--blue-lt)}
.g3 .card:nth-child(5) h3{color:var(--gold-lt)}
.g3 .card:nth-child(6) h3{color:var(--purple-lt)}
.g4 .card{padding:22px 20px}
.g4 .card h3{font-size:19px;margin-bottom:10px}
.g4 .card p{font-size:15px;line-height:1.55}
.g4 .card:nth-child(1){border-top-color:var(--purple-lt)}
.g4 .card:nth-child(2){border-top-color:var(--orange-lt)}
.g4 .card:nth-child(3){border-top-color:var(--gold-lt)}
.g4 .card:nth-child(4){border-top-color:var(--blue-lt)}
.g4 .card:nth-child(1) h3{color:var(--purple-lt)}
.g4 .card:nth-child(2) h3{color:var(--orange-lt)}
.g4 .card:nth-child(3) h3{color:var(--gold-lt)}
.g4 .card:nth-child(4) h3{color:var(--blue-lt)}

/* ---------- figures ---------- */
figure{margin:0}
.shot{background:rgba(255,255,255,.05);overflow:hidden;border:1px solid var(--line);
  border-bottom:2px solid var(--sec)}
.shot img{width:100%;height:100%;object-fit:cover}
.h-sm .shot{height:190px}
.h-md .shot{height:270px}
.h-lg .shot{height:clamp(280px,38vw,450px)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:15.5px}
caption{text-align:left;font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sec);padding-bottom:12px}
th,td{text-align:left;padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{width:34%;font-weight:600;color:#fff}
td{color:var(--text-dim)}
tr:last-child th,tr:last-child td{border-bottom:0}
.tbl{border:1px solid var(--line);border-left:3px solid var(--sec);
  padding:8px clamp(16px,2.4vw,26px);background:rgba(255,255,255,.04)}

/* ---------- lists ---------- */
ul.ticks{list-style:none;margin:0;padding:0}
ul.ticks li{position:relative;padding:0 0 12px 24px;color:var(--text)}
ul.ticks li:before{content:"";position:absolute;left:0;top:10px;width:12px;height:2px;
  background:var(--sec)}
ul.ticks li:last-child{padding-bottom:0}

/* ---------- flow ---------- */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.flow div{background:var(--ground);padding:20px 18px;border-top:3px solid}
.flow div:nth-child(1){border-top-color:var(--purple-lt)}
.flow div:nth-child(2){border-top-color:var(--orange-lt)}
.flow div:nth-child(3){border-top-color:var(--teal-lt)}
.flow div:nth-child(4){border-top-color:var(--blue-lt)}
.flow div:nth-child(5){border-top-color:var(--gold-lt)}
.flow b{display:block;font-size:11px;letter-spacing:.18em;margin-bottom:9px;font-weight:700}
.flow div:nth-child(1) b{color:var(--purple-lt)}
.flow div:nth-child(2) b{color:var(--orange-lt)}
.flow div:nth-child(3) b{color:var(--teal-lt)}
.flow div:nth-child(4) b{color:var(--blue-lt)}
.flow div:nth-child(5) b{color:var(--gold-lt)}
.flow p{margin:0;font-size:14.5px;line-height:1.5;color:var(--text-dim)}
.flow strong{color:#fff}
@media(max-width:900px){.flow{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.flow{grid-template-columns:1fr}}

/* ---------- form ---------- */
form.enq{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.enq .full{grid-column:1/-1}
label{display:block;font-size:13px;font-weight:600;letter-spacing:.03em;
  margin-bottom:7px;color:#fff}
input,select,textarea{width:100%;font:inherit;font-size:15.5px;padding:12px 13px;
  border:1px solid rgba(255,255,255,.28);border-radius:2px;
  background:rgba(0,0,0,.28);color:#fff}
::placeholder{color:rgba(255,255,255,.5)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold-lt);outline-offset:-2px}
textarea{min-height:130px;resize:vertical}
button.btn{cursor:pointer;font-family:inherit;background:var(--gold);border-color:var(--gold);color:var(--ink)}
button.btn:hover{background:var(--gold-lt);border-color:var(--gold-lt)}
@media(max-width:700px){form.enq{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:var(--text-dim);
  padding:clamp(46px,6vw,70px) 0 32px;font-size:14.5px;
  border-top:4px solid transparent;
  border-image:linear-gradient(90deg,var(--purple),var(--orange),var(--teal),var(--blue),var(--gold)) 1}
footer.site a{color:#e6eaee;text-decoration:none}
footer.site a:hover{color:var(--teal-lt)}
footer.site h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:16px;font-weight:600}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,4vw,44px)}
.fgrid>div:nth-child(1) h4{color:var(--purple-lt)}
.fgrid>div:nth-child(2) h4{color:var(--orange-lt)}
.fgrid>div:nth-child(3) h4{color:var(--teal-lt)}
.fgrid>div:nth-child(4) h4{color:var(--gold-lt)}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fnav{list-style:none;margin:0;padding:0}
.fnav li{margin-bottom:10px}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:clamp(30px,4vw,46px);
  padding-top:22px;display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:#8a939c}
.legal span:first-child{margin-right:auto}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* text sitting on a saturated band needs more weight than the neutral ground */
section.dark p,section.dark .lead,section.dark ul.ticks li,section.dark td{color:rgba(255,255,255,.86)}
section.dark .cap,section.dark .small.mute{color:rgba(255,255,255,.7)}
section.dark .card{background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.2)}
section.dark .card p{color:rgba(255,255,255,.84)}
section.dark .tbl{background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.2)}
section.dark th,section.dark td{border-bottom-color:rgba(255,255,255,.18)}


/* =========================================================================
   RESTRAINT PASS
   The dark ground stays. The colour comes back to two places per section:
   the number chip and one hairline. Everything that was a saturated field,
   a gradient or a coloured heading is now neutral.
   ========================================================================= */

/* one accent for interaction, not five */
.btn,.bar .btn,button.btn{background:var(--teal);border-color:var(--teal);color:#fff}
.btn:hover,.bar .btn:hover,button.btn:hover{background:#159c9c;border-color:#159c9c;color:#fff}
.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.btn.ghost:hover{background:#fff;color:var(--ink);border-color:#fff}

/* no gradient wash behind the hero */
.hero:after{display:none}

/* header and footer strips: a hairline, not a flag */
header.site:before{height:2px;opacity:.8}
footer.site{border-top:1px solid rgba(255,255,255,.12);border-image:none}

/* saturated bands become deep neutral grounds with one coloured edge */
section.dark{background:var(--ink);border-top:2px solid var(--sec)}
section.dark:before{display:none}
section.dark .card{background:rgba(255,255,255,.045);border-color:var(--line)}
section.dark .tbl{background:rgba(255,255,255,.04);border-color:var(--line)}
section.dark th,section.dark td{border-bottom-color:var(--line)}
section.dark p,section.dark .lead,section.dark ul.ticks li,section.dark td{color:var(--text-dim)}
section.dark .cap,section.dark .small.mute{color:var(--text-dim)}
section:before{background:var(--sec);opacity:.5;height:1px}

/* headings are white everywhere; colour no longer sets type */
h3,.card h3,.g3 .card h3,.g4 .card h3,
.g3 .card:nth-child(1) h3,.g3 .card:nth-child(2) h3,.g3 .card:nth-child(3) h3,
.g3 .card:nth-child(4) h3,.g3 .card:nth-child(5) h3,.g3 .card:nth-child(6) h3,
.g4 .card:nth-child(1) h3,.g4 .card:nth-child(2) h3,.g4 .card:nth-child(3) h3,
.g4 .card:nth-child(4) h3{color:#fff}
.eyebrow{color:var(--text-dim)}

/* cards: one thin rule in the section's colour, nothing else */
.card{border-top-width:2px;border-top-color:var(--sec)}
.g3 .card:nth-child(1),.g3 .card:nth-child(2),.g3 .card:nth-child(3),
.g3 .card:nth-child(4),.g3 .card:nth-child(5),.g3 .card:nth-child(6),
.g4 .card:nth-child(1),.g4 .card:nth-child(2),.g4 .card:nth-child(3),
.g4 .card:nth-child(4){border-top-color:var(--sec)}
.g3 .card:nth-child(1) .num,.g3 .card:nth-child(2) .num,.g3 .card:nth-child(3) .num{color:var(--text-dim)}
.card .num{color:var(--text-dim)}

/* stats: white figures, one shared hairline */
.facts div,.facts div:nth-child(1),.facts div:nth-child(2),
.facts div:nth-child(3),.facts div:nth-child(4){border-top:2px solid var(--line)}
.facts b,.facts div:nth-child(1) b,.facts div:nth-child(2) b,
.facts div:nth-child(3) b,.facts div:nth-child(4) b{color:#fff}

/* process steps and tables: neutral markers */
.flow div,.flow div:nth-child(1),.flow div:nth-child(2),.flow div:nth-child(3),
.flow div:nth-child(4),.flow div:nth-child(5){border-top:1px solid var(--line)}
.flow b,.flow div:nth-child(1) b,.flow div:nth-child(2) b,.flow div:nth-child(3) b,
.flow div:nth-child(4) b,.flow div:nth-child(5) b{color:var(--text-dim)}
caption{color:var(--text-dim)}
.tbl{border-left:1px solid var(--line)}
ul.ticks li:before{background:var(--text-dim);height:1px}
.shot{border-bottom:1px solid var(--line)}

/* rail: grey numerals, white active marker */
.rail a i,.rail a:nth-child(1) i,.rail a:nth-child(2) i,.rail a:nth-child(3) i,
.rail a:nth-child(4) i,.rail a:nth-child(5) i,.rail a:nth-child(6) i,
.rail a:nth-child(7) i{color:#7f8992}
.rail a.on i{color:#fff}
.rail a.on,.rail a:nth-child(1).on,.rail a:nth-child(2).on,.rail a:nth-child(3).on,
.rail a:nth-child(4).on,.rail a:nth-child(5).on,.rail a:nth-child(6).on,
.rail a:nth-child(7).on{border-bottom-color:#fff}
.rail a.last{background:var(--teal);color:#fff}
.rail a.last i{color:rgba(255,255,255,.75)}
.rail a.last:hover{background:#159c9c;color:#fff}

/* footer headings back to white */
.fgrid>div:nth-child(1) h4,.fgrid>div:nth-child(2) h4,
.fgrid>div:nth-child(3) h4,.fgrid>div:nth-child(4) h4{color:#fff}
footer.site a:hover{color:#fff;text-decoration:underline}

/* form focus follows the single accent */
input:focus,select:focus,textarea:focus{outline-color:var(--teal-lt)}

/* =========================================================================
   FINAL PASS — my own call.
   Colour lives in the logo and in one interaction accent (teal). Everything
   structural is neutral. A full-bleed plant photograph sits under the hero,
   because proving the factory exists is the page's first job.
   ========================================================================= */
.band{position:relative;height:clamp(240px,40vw,440px);overflow:hidden;background:var(--ink)}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.band:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(27,32,38,.55) 0%,rgba(27,32,38,.08) 38%,
    rgba(35,40,47,.85) 88%,var(--ground) 100%)}

/* number chips and section edges go neutral */
.eyebrow b{background:rgba(255,255,255,.1);color:#fff}
.eyebrow:after{background:var(--line);opacity:1}
section:before{background:var(--line);opacity:1}
section.dark{border-top:1px solid var(--line)}
.card{border-top-color:var(--line)}
.g3 .card:nth-child(1),.g3 .card:nth-child(2),.g3 .card:nth-child(3),
.g3 .card:nth-child(4),.g3 .card:nth-child(5),.g3 .card:nth-child(6),
.g4 .card:nth-child(1),.g4 .card:nth-child(2),.g4 .card:nth-child(3),
.g4 .card:nth-child(4){border-top-color:var(--line)}
header.site:before{opacity:1}

/* =========================================================================
   LIGHT SECTIONS
   The product chapter and the quality and programme sections run light, so
   the page alternates instead of being dark end to end.
   ========================================================================= */
section.tint,#product,#doors,#quality{background:#f3f3f1;color:#23282f}
section.tint:before,#product:before,#doors:before,#quality:before{background:#dcdcd8}
section.tint h1,section.tint h2,section.tint h3,section.tint h4,
#product h1,#product h2,#product h3,#product h4,
#doors h1,#doors h2,#doors h3,#doors h4,
#quality h1,#quality h2,#quality h3,#quality h4{color:#23282f}
section.tint p,#product p,#doors p,#quality p{color:#3c444e}
section.tint .lead,#product .lead,#doors .lead,#quality .lead{color:#4a525c}
section.tint .eyebrow,#product .eyebrow,#doors .eyebrow,#quality .eyebrow{color:#6f7783}
section.tint .eyebrow b,#product .eyebrow b,#doors .eyebrow b,#quality .eyebrow b{
  background:#23282f;color:#fff}
section.tint .eyebrow:after,#product .eyebrow:after,#doors .eyebrow:after,
#quality .eyebrow:after{background:#dcdcd8}
section.tint .card,#product .card,#doors .card,#quality .card{
  background:#fff;border-color:#e2e2de;border-top-color:#c9c9c4}
section.tint .card p,#product .card p,#doors .card p,#quality .card p{color:#3c444e}
section.tint .card .num,#product .card .num,#quality .card .num{color:#6f7783}
section.tint .tbl,#product .tbl,#doors .tbl,#quality .tbl{
  background:#fff;border-color:#e2e2de;border-left-color:#e2e2de}
section.tint th,#product th,#doors th,#quality th{color:#23282f}
section.tint td,#product td,#doors td,#quality td{color:#3c444e}
section.tint th,section.tint td,#product th,#product td,#doors th,#doors td,
#quality th,#quality td{border-bottom-color:#e2e2de}
section.tint caption,#product caption,#doors caption,#quality caption{color:#6f7783}
section.tint .shot,#product .shot,#doors .shot,#quality .shot{
  background:#e9e9e5;border-color:#e2e2de;border-bottom-color:#d5d5d0}
section.tint .cap,#product .cap,#doors .cap,#quality .cap,
section.tint .mute,#product .mute,#doors .mute,#quality .mute{color:#6f7783}
section.tint ul.ticks li,#product ul.ticks li,#doors ul.ticks li,#quality ul.ticks li{color:#3c444e}
section.tint ul.ticks li:before,#product ul.ticks li:before,#doors ul.ticks li:before,
#quality ul.ticks li:before{background:#9aa1aa}
section.tint .flow,#product .flow,#doors .flow,#quality .flow{background:#e2e2de;border-color:#e2e2de}
section.tint .flow div,#product .flow div{background:#fff;border-top-color:#e2e2de}
section.tint .flow p,#product .flow p{color:#3c444e}
section.tint .flow strong,#product .flow strong{color:#23282f}
section.tint .flow b,#product .flow b{color:#6f7783}

/* =========================================================================
   CALL TO ACTION — no accent hue. Solid ink on light, solid white on dark.
   ========================================================================= */
.btn,.bar .btn,button.btn{background:#23282f;border-color:#23282f;color:#fff}
.btn:hover,.bar .btn:hover,button.btn:hover{background:#000;border-color:#000;color:#fff}
section.dark .btn,.hero .btn{background:#fff;border-color:#fff;color:#23282f}
section.dark .btn:hover,.hero .btn:hover{background:#dfe4e9;border-color:#dfe4e9;color:#23282f}
.hero .btn.ghost,section.dark .btn.ghost{background:transparent;color:#fff;
  border-color:rgba(255,255,255,.4)}
.hero .btn.ghost:hover,section.dark .btn.ghost:hover{background:#fff;color:#23282f;border-color:#fff}
section.tint .btn,#product .btn,#doors .btn,#quality .btn{
  background:#23282f;border-color:#23282f;color:#fff}
.rail a.last{background:#3c444e;color:#fff}
.rail a.last:hover{background:#fff;color:#1b2026}
.rail a.last i{color:rgba(255,255,255,.7)}
input:focus,select:focus,textarea:focus{outline-color:#fff}

/* the five-colour strip above the header is gone — the logo carries the palette */
header.site:before{display:none}

/* =========================================================================
   PRODUCT CONFIGURATOR
   One picture, a row of options; pressing an option swaps the picture.
   ========================================================================= */
.cfg{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(20px,3vw,36px);align-items:start}
.cfg-view{background:#fff;border:1px solid #e2e2de;display:flex;align-items:center;
  justify-content:center;padding:14px;min-height:clamp(320px,42vw,520px)}
.cfg-view img{max-height:clamp(292px,40vw,492px);width:auto;object-fit:contain}
.cfg-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.cfg-tab{font:inherit;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:9px 16px;border:1px solid #d2d2cd;background:#fff;
  color:#6f7783;border-radius:2px;cursor:pointer}
.cfg-tab.on{background:#23282f;border-color:#23282f;color:#fff}
.cfg-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cfg-opt{font:inherit;text-align:left;background:#fff;border:1px solid #e2e2de;
  border-radius:2px;padding:8px 8px 10px;cursor:pointer;display:flex;
  flex-direction:column;gap:6px;transition:border-color .12s,box-shadow .12s}
.cfg-opt:hover{border-color:#b4b4ae}
.cfg-opt.on{border-color:#23282f;box-shadow:inset 0 0 0 1px #23282f}
.cfg-thumb{display:block;background:#f6f6f4;height:86px;overflow:hidden}
.cfg-thumb img{width:100%;height:100%;object-fit:contain}
.cfg-lb{font-size:13.5px;font-weight:600;color:#23282f;line-height:1.25}
.cfg-sb{font-size:11.5px;color:#6f7783;line-height:1.3}
.cfg-read{margin-top:20px;padding-top:16px;border-top:1px solid #e2e2de}
.cfg-read strong{display:block;font-size:19px;font-weight:600;color:#23282f;margin-bottom:5px}
.cfg-read span{font-size:15px;color:#3c444e;line-height:1.5}
.cfg-note{margin:16px 0 0}
@media(max-width:1000px){.cfg{grid-template-columns:1fr}
  .cfg-view{min-height:340px}.cfg-view img{max-height:320px}}
@media(max-width:560px){.cfg-panel{grid-template-columns:1fr 1fr}.cfg-thumb{height:104px}}
/* kitchen thumbnails are landscape renders, not cut-outs */
#cfg-kitchens .cfg-thumb img{object-fit:cover}
#cfg-kitchens .cfg-thumb{height:64px}
#cfg-kitchens .cfg-view img{width:100%;height:auto;max-height:none}
#cfg-kitchens .cfg-view{min-height:0;padding:0;border:0}

/* display:grid beat the hidden attribute — panels must actually hide */
.cfg-panel[hidden]{display:none}
/* the kitchen control sits inside a half-width column: stack it */
#cfg-kitchens{grid-template-columns:1fr}
#cfg-kitchens .cfg-panel{grid-template-columns:repeat(3,1fr)}
#cfg-kitchens .cfg-thumb{height:78px}
#cfg-kitchens .cfg-tabs{display:none}

/* the band photo is portrait-derived: bias the crop up so the line itself shows */
.band img{object-position:50% 26%}

/* =========================================================================
   PHONE
   The header stops being sticky so the rail alone holds the top — two sticky
   bars eat an eighth of a phone screen. Tap targets go to 44px, and the spec
   tables stop being tables, because a 34% label column leaves nothing for the
   value.
   ========================================================================= */
@media(max-width:700px){
  html{scroll-padding-top:64px}

  header.site{position:static}
  .bar{height:auto;padding:12px 0;gap:14px}
  .brand img{height:20px}
  .bar .right{gap:10px}
  .bar .btn{padding:12px 16px;font-size:14px;white-space:nowrap}

  .rail{top:0}
  .rail a{padding:15px 16px;min-height:46px;align-items:center;font-size:15px}
  .rail a i{font-size:11.5px}
  /* a fade on the right edge says: there is more of this to scroll */
  .rail{position:sticky;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
        mask-image:linear-gradient(90deg,#000 88%,transparent)}

  section{padding:44px 0}
  .hero{padding:36px 0 34px}
  .band{height:220px}

  /* tables become label-over-value blocks */
  .tbl{padding:6px 16px}
  table,tbody,tr,th,td{display:block;width:100%}
  thead{display:none}
  tr{padding:14px 0;border-bottom:1px solid var(--line)}
  tr:last-child{border-bottom:0}
  th{width:auto;padding:0 0 5px;border:0;font-size:14px;letter-spacing:.01em}
  td{padding:0;border:0;font-size:15.5px;line-height:1.5}
  caption{padding-bottom:10px}

  /* small type lifted to something readable at arm's length */
  .cap{font-size:13px}
  .card .num{font-size:12px}
  .cfg-sb{font-size:12.5px}
  .facts span{font-size:12.5px}
  .eyebrow{font-size:12.5px}

  .cfg-opt{padding:10px 10px 12px}
  .cfg-tab{padding:12px 18px;font-size:13.5px}
  .btn{padding:15px 24px}
  .actions{gap:10px}
  .actions .btn{flex:1 1 auto;text-align:center}

  form.enq{gap:14px}
  input,select,textarea{font-size:16px;padding:14px 13px}   /* 16px stops iOS zooming on focus */
  label{font-size:13.5px}

  footer.site{padding:40px 0 26px}
  .legal{gap:10px;font-size:12.5px}
}
@media(max-width:700px){
  /* footer and in-copy links need thumb-sized hit areas too */
  .fnav li{margin-bottom:2px}
  .fnav li a{display:block;padding:11px 0;min-height:44px;line-height:1.4}
  .legal a{display:inline-block;padding:11px 0;min-height:44px}
  ul.ticks li a{display:inline-block;padding:9px 0}
  .brand{padding:8px 0}
  .bar .tel{display:none}
}


/* =========================================================================
   CONFIGURATOR — radio + :checked, no JavaScript.
   Rebuilt because an .htm opened from a phone's mail or files preview runs no
   scripts: the script version simply did nothing there.
   ========================================================================= */
.cfg-r{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cfg-view img{display:none}          /* the checked radio reveals exactly one */
.cfg-rd{display:none}
.cfg-gl{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#6f7783;margin:0 0 10px}
.cfg-side .cfg-gl+.cfg-panel{margin-bottom:18px}
.cfg-read{margin-top:20px;padding-top:16px;border-top:1px solid #e2e2de}
.cfg-rd strong{display:block;font-size:19px;font-weight:600;color:#23282f;margin-bottom:5px}
.cfg-rd span{font-size:15px;color:#3c444e;line-height:1.5}
label.cfg-opt{font:inherit;text-align:left;background:#fff;border:1px solid #e2e2de;
  border-radius:2px;padding:8px 8px 10px;cursor:pointer;display:flex;flex-direction:column;
  gap:6px;transition:border-color .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent}
label.cfg-opt:hover{border-color:#b4b4ae}
/* keyboard focus must still be visible with the real input hidden */
.cfg-r:focus-visible+.cfg-view~.cfg-side .cfg-opt{outline:none}
.cfg-r:focus-visible~.cfg-side label.cfg-opt{outline:2px solid #23282f;outline-offset:2px}
#cfg-kitchens .cfg-gl{display:none}

/* =========================================================================
   CLOSING ACTION
   Each section ends with the next step that follows from what was just read,
   rather than sending every reader to the same generic contact button.
   ========================================================================= */
.cta-row{display:flex;align-items:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap;
  margin-top:clamp(32px,4vw,46px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line)}
.cta-row p{margin:0;flex:1 1 340px;font-size:16px;line-height:1.55;color:var(--text-dim)}
.cta-row .btn{flex:0 0 auto}
section.tint .cta-row,#product .cta-row,#doors .cta-row,#quality .cta-row{border-top-color:#dcdcd8}
section.tint .cta-row p,#product .cta-row p,#doors .cta-row p,#quality .cta-row p{color:#3c444e}
@media(max-width:700px){
  .cta-row{gap:16px;margin-top:28px;padding-top:22px}
  .cta-row p{flex:1 1 100%;font-size:15.5px}
  .cta-row .btn{width:100%;text-align:center}
}
/* a .wrap nested inside another must not indent or narrow a second time */
.wrap .wrap{max-width:none;padding-left:0;padding-right:0}

/* =========================================================================
   PRODUCTS DROPDOWN
   <details>, so it opens with no JavaScript. The rail scrolls horizontally on
   a phone and would clip an absolutely positioned menu, so below 900px the
   dropdown is swapped for a plain link to the section.
   ========================================================================= */
.rail-dd{display:none}
.rail-flat{display:flex}
.rail-dd summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:8px;
  padding:13px 18px;color:var(--text-dim);font-size:14px;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,background .15s}
.rail-dd summary::-webkit-details-marker{display:none}
.rail-dd summary i{font-style:normal;font-size:11px;letter-spacing:.1em;font-weight:600;color:#7f8992}
.rail-dd summary:hover{color:#fff;background:rgba(255,255,255,.06)}
.rail-dd[open] summary{color:#fff;background:rgba(255,255,255,.06)}
/* the scroll position marks it too, so Products lights up unopened */
.rail-dd.on summary{color:#fff;border-bottom-color:#fff}
.rail-dd.on summary i{color:#fff}
.car{width:0;height:0;margin-left:2px;align-self:center;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.75}
.rail-dd[open] .car{transform:rotate(180deg)}
.rail-menu{position:absolute;top:100%;left:0;min-width:270px;background:var(--ink);
  border:1px solid var(--line);border-top:0;padding:6px 0;z-index:70;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7)}
.rail-menu a{display:block;padding:12px 18px;color:var(--text-dim);text-decoration:none;
  font-size:14.5px;white-space:nowrap;border:0}
.rail-menu a:hover{color:#fff;background:rgba(255,255,255,.07)}

@media(min-width:901px){
  .rail-in{overflow:visible}          /* seven items fit; nothing needs to scroll */
  .rail-dd{display:block;position:relative}
  /* must out-specify `.rail a`, which also sets display */
  .rail a.rail-flat{display:none}
}

/* the scope statement — moved here when the programme section was removed */
.scope{margin-top:clamp(28px,4vw,40px);padding-top:clamp(22px,3vw,30px);
  border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,40px)}
.scope p{margin:0;color:var(--text-dim);font-size:16px;line-height:1.6}
@media(max-width:900px){.scope{grid-template-columns:1fr;gap:16px}}

/* =========================================================================
   FIT THE SCREEN
   The configurator picture and its options must be visible at the same time —
   otherwise pressing a thumbnail changes something you have already scrolled
   past. The picture is capped to the viewport and sticks while the options
   scroll, and every section starts below the sticky rail when jumped to.
   ========================================================================= */
/* html already sets scroll-padding-top; adding scroll-margin here doubled it */

@media(min-width:901px){
  .cfg{align-items:start}
  .cfg-view{position:sticky;top:132px;
    max-height:calc(100svh - 176px);min-height:0;padding:14px}
  .cfg-view img{max-height:calc(100svh - 210px);width:auto;margin:0 auto}
  #cfg-kitchens .cfg-view img{width:100%;height:auto;max-height:calc(100svh - 210px);
    object-fit:cover}
  #cfg-kitchens .cfg-view{padding:0;border:1px solid var(--line)}
  /* the kitchen control now has the full width: six programmes in two rows */
  #cfg-kitchens{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  #cfg-kitchens .cfg-panel{grid-template-columns:repeat(3,1fr)}
  #cfg-kitchens .cfg-thumb{height:74px}
}

/* the construction table sits under the picker, in two columns so it does not
   run to a single long ribbon */
.tblwrap{margin-top:clamp(28px,4vw,40px)}
@media(min-width:901px){
  .tblwrap table{column-count:2;column-gap:44px}
  .tblwrap tbody{display:block}
  .tblwrap tr{display:block;break-inside:avoid;padding:11px 0;
    border-bottom:1px solid var(--line)}
  .tblwrap th,.tblwrap td{display:block;width:auto;border:0;padding:0}
  .tblwrap th{padding-bottom:4px}
  .tblwrap thead{display:none}
}

/* specification detail folds away so the pictures fit one screen; <details>
   again, so it opens with no JavaScript */
details.spec{margin-top:clamp(24px,3vw,34px);border-top:1px solid var(--line);
  padding-top:clamp(18px,2.4vw,24px)}
details.spec>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:10px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-dim);padding:8px 0}
details.spec>summary::-webkit-details-marker{display:none}
details.spec>summary:after{content:"";width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid currentColor;opacity:.8}
details.spec[open]>summary:after{transform:rotate(180deg)}
details.spec>summary:hover{color:#fff}
details.spec>*:not(summary){margin-top:18px}
#product details.spec>summary,#doors details.spec>summary{color:#6f7783}
#product details.spec>summary:hover,#doors details.spec>summary:hover{color:#23282f}
#product details.spec,#doors details.spec{border-top-color:#dcdcd8}
details.spec>summary+.tbl{margin-top:18px}

/* tighter vertical rhythm so a section is about one screen */
section{padding:clamp(44px,5.6vw,76px) 0}
.head{margin-bottom:clamp(24px,3vw,36px)}
@media(min-width:901px){
  #cfg-doors .cfg-view{max-height:calc(100svh - 330px)}
  #cfg-doors .cfg-view img{max-height:calc(100svh - 360px)}
  #cfg-doors .cfg-thumb{height:74px}
  #cfg-kitchens .cfg-view,#cfg-kitchens .cfg-view img{max-height:calc(100svh - 300px)}
  /* the delivery terms read as two columns rather than one long ribbon */
  #delivery .tbl table{column-count:2;column-gap:44px}
  #delivery .tbl tbody{display:block}
  #delivery .tbl tr{display:block;break-inside:avoid;padding:10px 0}
  #delivery .tbl th,#delivery .tbl td{display:block;width:auto;border:0;padding:0}
  #delivery .tbl th{padding-bottom:3px}
  #delivery .tbl thead{display:none}
  .g3 .card{padding:22px 22px}
}
/* column-count is ignored on display:table — the element has to become a block */
@media(min-width:901px){
  #delivery .tbl table,.tblwrap table{display:block}
}
/* the picture must clear the fold when the section is jumped to */
@media(min-width:901px){
  #cfg-doors .cfg-view{max-height:calc(100svh - 430px)}
  #cfg-doors .cfg-view img{max-height:calc(100svh - 460px)}
}
/* short laptop screens: shrink the kitchen picture further so picture and
   thumbnails still share one screen */
@media(min-width:901px) and (max-height:880px){
  #cfg-kitchens .cfg-view,#cfg-kitchens .cfg-view img{max-height:calc(100svh - 400px)}
  #cfg-kitchens .cfg-thumb{height:60px}
  #cfg-doors .cfg-view{max-height:calc(100svh - 400px)}
  #cfg-doors .cfg-view img{max-height:calc(100svh - 430px)}
  #cfg-doors .cfg-thumb{height:62px}
}

/* =========================================================================
   SHOWROOM BAND — real photographs, two wide then three across
   ========================================================================= */
.srgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,22px);
  margin-bottom:clamp(34px,4.5vw,54px)}
.srgrid .sr-a{grid-column:span 3}
.srgrid .sr-b{grid-column:span 2}
@media(max-width:900px){
  .srgrid{grid-template-columns:1fr}
  .srgrid .sr-a,.srgrid .sr-b{grid-column:auto}
}

/* project references — a short credibility strip, not a case-study section */
.refs{margin-top:clamp(30px,4vw,44px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line)}
#doors .refs{border-top-color:#dcdcd8}
.refs .g2{gap:clamp(16px,2.2vw,24px)}

/* the second plant sits under the main equipment grid, clearly its own block */
.plant2{margin-top:clamp(30px,4vw,44px);padding-top:clamp(24px,3vw,32px);
  border-top:1px solid var(--line)}
.plant2 .g2{gap:clamp(16px,2.2vw,24px)}

/* looping plant footage — muted, no controls, treated as a moving photograph */
.vid{margin:0}
.vidbox{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;
  background:#000;border:1px solid var(--line)}
/* contain, not cover — the whole frame stays visible, uncropped */
.vidbox video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
@media(prefers-reduced-motion:reduce){
  /* the poster still stands in when motion is unwelcome */
  .vidbox video{display:none}
  .vidbox{background:#000 url(../img/p2_cnc_poster.jpg) center/cover no-repeat}
}


/* second plant: the portrait loop beside the stills */
.p2grid{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(16px,2.4vw,26px);align-items:start}
@media(max-width:900px){
  .p2grid{grid-template-columns:1fr}
  .p2grid .vidbox{max-width:360px;margin:0 auto}
}

/* =========================================================================
   DESIGN SYSTEM PASS
   The page had grown 16 font sizes and 20 spacing values — the underlying
   reason it read as assembled rather than designed. Everything below reduces
   that to one type scale and one 8px spacing scale, and applies them
   consistently. Nothing is removed; the palette, the dark/light chapters and
   all media stay exactly as they are.
   ========================================================================= */
:root{
  /* spacing — linear 8px steps, the enterprise convention (Atlassian) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px;
  --s6:48px; --s7:64px; --s8:80px; --s9:96px;

  /* type — six steps, ratio held near 1.2 so nothing blows out */
  --t-xs:12.5px;   /* eyebrows, captions, legal */
  --t-sm:15px;     /* secondary and supporting text */
  --t-base:17px;   /* body */
  --t-lg:20px;     /* standfirst */
  --t-h3:23px;
  --t-h2:clamp(28px,3.2vw,40px);
  --t-h1:clamp(34px,5vw,58px);

  --measure:68ch;  /* 60–80 characters is the readable band */
}

/* ---------- rhythm: 2–2.5x more space between sections than within ---------- */
section{padding:clamp(56px,7vw,var(--s9)) 0}
.head{margin-bottom:var(--s6)}
.head h2+p,.head h2+.lead,.head h1+p,.head h1+.lead{margin-top:var(--s2)}
.split h3+p,.split h3+.lead{margin-top:var(--s2)}
p{margin:0 0 var(--s2)}

/* ---------- one type scale ---------- */
body{font-size:var(--t-base);line-height:1.6}
h1{font-size:var(--t-h1)}
h2,h1.as-h2{font-size:var(--t-h2)}
h3{font-size:var(--t-h3)}
.lead{font-size:var(--t-lg);line-height:1.55}
.small,.cap,.cfg-sb,.facts span,.legal,footer.site{font-size:var(--t-sm)}
.cap,.legal{font-size:var(--t-xs)}
.eyebrow,.card .num,.flow b,caption,.cfg-gl,footer.site h4,
details.spec>summary,.rail a i,.pg span{font-size:var(--t-xs);letter-spacing:.16em}
.cfg-lb,.tbl th,.tbl td,table{font-size:var(--t-sm)}
.rail a,.rail-dd summary,.rail-menu a,.bar .tel,.btn,label,input,select,textarea{font-size:var(--t-sm)}

/* ---------- measure: no line of body copy runs past ~68 characters ---------- */
.head p,.head .lead,.scope p,.cta-row p,.card p,.flow p,ul.ticks li{max-width:var(--measure)}
section>.wrap>p{max-width:var(--measure)}

/* ---------- consistent component padding ---------- */
.card,.g3 .card,.g4 .card{padding:var(--s3)}
.facts div{padding:var(--s3) var(--s3)}
.flow div{padding:var(--s3) var(--s3)}
.tbl{padding:var(--s1) var(--s3)}
th,td{padding:14px 14px 14px 0}

/* ---------- one grid gap ---------- */
.g2,.g3,.g4{gap:var(--s3)}
.split{gap:var(--s6)}
.srgrid,.refs .g2,.plant2 .g2,.p2grid{gap:var(--s3)}

/* ---------- section-level actions are secondary; the primary ask is the header,
   the hero and the contact form, so those stay solid ---------- */
.cta-row .btn{background:transparent;border-color:var(--line2);color:var(--ink)}
.cta-row .btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
section.dark .cta-row .btn{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
section.dark .cta-row .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
#product .cta-row .btn,#doors .cta-row .btn,#quality .cta-row .btn,
section.tint .cta-row .btn{border-color:#c9c9c4;color:#23282f;background:transparent}
#product .cta-row .btn:hover,#doors .cta-row .btn:hover,#quality .cta-row .btn:hover,
section.tint .cta-row .btn:hover{background:#23282f;color:#fff;border-color:#23282f}

/* ---------- sub-sections read as subordinate, not as new top-level sections --- */
#casegoods h3,#doors h1.as-h2,#doors h2,#finishing h3,#product h3{letter-spacing:-.018em}
.plant2 h3,.refs h3,#product>.wrap>h3{font-size:var(--t-h3)}
/* remaining strays, folded into the scale */
.facts span,.cfg-gl,.cfg-sb,.pill span,.legal span{font-size:var(--t-xs)}
.cta-row p,.scope p{font-size:var(--t-base)}
.cfg-rd strong,.pg b,.idx strong,.brand{font-size:var(--t-lg)}
.rail a i,.card .num,.flow b,caption,details.spec>summary,.eyebrow,
footer.site h4,.cfg-gl{font-size:var(--t-xs)}

/* every run of body copy is capped, wherever it sits */
p,ul.ticks li,.cfg-rd span{max-width:var(--measure)}
td p,.cap,footer.site p,.idx .d,.flow p,.card p{max-width:none}
/* last two strays */
.pill span{font-size:var(--t-sm)}
.cfg-lb{font-size:var(--t-sm)}

/* =========================================================================
   MACHINE SECTION — the portrait loop beside what the machine actually does
   ========================================================================= */
.machine{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr);
  gap:clamp(28px,4vw,var(--s7));align-items:start}
.machine .vidbox{position:sticky;top:132px}
.machine-copy .eyebrow{margin-bottom:var(--s2)}
.machine-copy h2{margin-bottom:var(--s3)}
.machine-copy .tbl{margin-top:var(--s4);margin-bottom:var(--s2)}
#cx100{--sec:var(--orange-lt);--sec-solid:var(--orange);--sec-bg:var(--ink)}
@media(max-width:900px){
  .machine{grid-template-columns:1fr;gap:var(--s4)}
  .machine .vidbox{position:static;max-width:360px;margin:0 auto}
}

/* the machine section is meant to be read with the film in view: cap the frame
   to the viewport, give it a proper border, and tighten the section around it */
#cx100{padding-top:clamp(40px,5vw,var(--s7));padding-bottom:clamp(40px,5vw,var(--s7))}
.machine .vidbox{max-height:calc(100svh - 210px);aspect-ratio:9/16;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.85);padding:0}
.machine .vid .cap{margin-top:var(--s2)}
.machine-copy h2{margin-bottom:var(--s2)}
.machine-copy .tbl{margin-top:var(--s3)}
#cx100{padding-top:clamp(36px,4vw,var(--s6));padding-bottom:clamp(36px,4vw,var(--s6))}
.machine{gap:clamp(24px,3vw,var(--s6))}
.machine-copy p{margin-bottom:var(--s2)}
.machine .vidbox{max-height:calc(100svh - 190px)}

/* =========================================================================
   USABILITY PASS
   Findings measured on the built page rather than guessed at. Four defects
   and two gaps, fixed here so nothing above has to be disturbed.
   ========================================================================= */

/* 1. THE INVISIBLE BUTTON. #delivery is a dark section but carries no `dark`
   class, so it missed the light-surface list and fell through to the default —
   dark text and a dark border on a dark ground, measured at 1.11:1 against its
   own background. The button was there and could not be seen.
   The logic is inverted here: the dark-ground treatment is now the DEFAULT and
   only the light surfaces, which are enumerated everywhere else in this file,
   opt out. A new dark section can no longer inherit an unreadable control. */
.cta-row .btn{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.cta-row .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
section.tint .cta-row .btn,#product .cta-row .btn,
#doors .cta-row .btn,#quality .cta-row .btn{
  background:transparent;border-color:#75756f;color:#23282f}
section.tint .cta-row .btn:hover,#product .cta-row .btn:hover,
#doors .cta-row .btn:hover,#quality .cta-row .btn:hover{
  background:#23282f;border-color:#23282f;color:#fff}

/* 2. THE HEADER ASK HAD NO SHAPE. Measured at 1.11:1 against the header bar —
   a near-black button on a near-black ground. It is the only control on screen
   at all times, so it now takes the same solid white pill as the hero primary
   and the form's submit: across the whole site, a filled button means
   "request a quote" and an outlined one means "read more". */
.bar .btn{background:#fff;border-color:#fff;color:#1b2026}
.bar .btn:hover{background:var(--teal-lt);border-color:var(--teal-lt);color:#1b2026}

/* 3. KEYBOARD FOCUS WAS INVISIBLE. The page had no :focus rule of any kind, so
   a keyboard user saw only the browser default — which all but disappears on a
   dark ground. An outline, not a colour change, because a stroke survives both
   grounds and does not rely on colour perception. */
:root{--ring:#9d9dff}
section.tint,#product,#doors,#quality,footer.site{--ring:#3535cc}
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.rail a:focus-visible,.rail-dd summary:focus-visible{outline-offset:-3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px}
.cfg-r:focus-visible+*,.cfg-r:focus-visible~.cfg-side .cfg-opt{outline:3px solid var(--ring)}
/* the configurator is driven by hidden radios; the visible label has to show
   the focus that the input actually holds */
.cfg-opt:has(input:focus-visible),
.cfg-side label:focus-within{outline:3px solid var(--ring);outline-offset:2px}

/* 4. CAPTION TEXT MISSED AA. Measured 4.07:1 at 12.5px, where 4.5:1 is the
   threshold for text this size. Lifted only these two classes rather than
   moving the whole dim-text token, which passes everywhere else. */
.cap,.small.mute,section.dark .cap,section.dark .small.mute{color:#bcc4cd}
section.tint .cap,#product .cap,#doors .cap,#quality .cap,
section.tint .mute,#product .mute,#doors .mute,#quality .mute{color:#61686f}

/* 5. A WAY PAST THE MENU. Fourteen sections means a keyboard user tabs through
   the whole rail before reaching the page. Hidden until focused. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;
  background:#fff;color:#1b2026;padding:12px 20px;font-weight:500;
  border-radius:0 0 3px 0;text-decoration:none}
.skip:focus{left:0}

/* 6. OPTIONAL FIELDS SAID SO. Six of the nine fields are optional; nothing on
   the form admitted it, so it read as nine things to fill in. */
.enq label .opt{font-weight:400;font-size:12.5px;color:#8b939c;
  letter-spacing:.02em;margin-left:6px}

/* A wide band for the loading-bay photograph in Delivery: the frame follows the
   picture's own proportions instead of cropping it to a fixed height. */
.h-band{margin:0 0 clamp(28px,4vw,40px)}
.h-band .shot{height:auto;aspect-ratio:1.92}
@media(max-width:700px){.h-band .shot{aspect-ratio:1.5}}

#kitchens-noir:checked~.cfg-view .k-noir{display:block}
#kitchens-noir:checked~.cfg-side .r-noir{display:block}
#kitchens-noir:checked~.cfg-side .o-noir{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#kitchens-soft:checked~.cfg-view .k-soft{display:block}
#kitchens-soft:checked~.cfg-side .r-soft{display:block}
#kitchens-soft:checked~.cfg-side .o-soft{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#kitchens-prest:checked~.cfg-view .k-prest{display:block}
#kitchens-prest:checked~.cfg-side .r-prest{display:block}
#kitchens-prest:checked~.cfg-side .o-prest{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#kitchens-lum:checked~.cfg-view .k-lum{display:block}
#kitchens-lum:checked~.cfg-side .r-lum{display:block}
#kitchens-lum:checked~.cfg-side .o-lum{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#kitchens-royal:checked~.cfg-view .k-royal{display:block}
#kitchens-royal:checked~.cfg-side .r-royal{display:block}
#kitchens-royal:checked~.cfg-side .o-royal{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#kitchens-ivory:checked~.cfg-view .k-ivory{display:block}
#kitchens-ivory:checked~.cfg-side .r-ivory{display:block}
#kitchens-ivory:checked~.cfg-side .o-ivory{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#doors-line:checked~.cfg-view .k-line{display:block}
#doors-line:checked~.cfg-side .r-line{display:block}
#doors-line:checked~.cfg-side .o-line{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#doors-line01:checked~.cfg-view .k-line01{display:block}
#doors-line01:checked~.cfg-side .r-line01{display:block}
#doors-line01:checked~.cfg-side .o-line01{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#doors-line02:checked~.cfg-view .k-line02{display:block}
#doors-line02:checked~.cfg-side .r-line02{display:block}
#doors-line02:checked~.cfg-side .o-line02{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#doors-line03:checked~.cfg-view .k-line03{display:block}
#doors-line03:checked~.cfg-side .r-line03{display:block}
#doors-line03:checked~.cfg-side .o-line03{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#doors-oak:checked~.cfg-view .k-oak{display:block}
#doors-oak:checked~.cfg-side .r-oak{display:block}
#doors-oak:checked~.cfg-side .o-oak{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#doors-walnut:checked~.cfg-view .k-walnut{display:block}
#doors-walnut:checked~.cfg-side .r-walnut{display:block}
#doors-walnut:checked~.cfg-side .o-walnut{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#doors-darkoak:checked~.cfg-view .k-darkoak{display:block}
#doors-darkoak:checked~.cfg-side .r-darkoak{display:block}
#doors-darkoak:checked~.cfg-side .o-darkoak{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
#doors-walnut9005:checked~.cfg-view .k-walnut9005{display:block}
#doors-walnut9005:checked~.cfg-side .r-walnut9005{display:block}
#doors-walnut9005:checked~.cfg-side .o-walnut9005{border-color:#fff;box-shadow:inset 0 0 0 1px #fff}
.pv-note{background:var(--charcoal3);color:#9aa1a7;font-size:12.5px;letter-spacing:.04em;
  padding:9px 16px;text-align:center}
.pv-note b{color:#fff;font-weight:600}

.hero-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}.hero-layout h1{font-size:clamp(34px,4vw,56px)}.hero-layout img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:8px}.hero .facts{margin-top:36px}.hero-layout .lead{font-size:18px}.process{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:24px}.process article{border-top:2px solid var(--teal-lt);padding-top:18px}.process h3{font-size:19px}.process p{font-size:15px}.retail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.retail-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}.retail-grid h2{font-size:26px;margin:16px 0}.retail-grid article{padding-bottom:24px}.page-main{max-width:850px;margin:auto;padding:60px 24px}.page-main h1{font-size:38px;margin-bottom:24px}.page-main h2{font-size:24px;margin:28px 0 14px}input[type=file]{max-width:100%}.form-status{color:#fff}.legal a{min-height:44px;display:inline-flex;align-items:center}.mobile-contact{display:none}
@media(max-width:760px){.hero-layout{grid-template-columns:1fr;gap:24px}.hero-layout img{aspect-ratio:4/3}.hero .facts{display:grid;grid-template-columns:1fr 1fr}.process,.retail-grid{grid-template-columns:1fr}.bar{gap:12px}.bar .right{gap:10px}.brand img{max-width:140px}.mobile-contact{display:block;position:sticky;bottom:0;background:#1b2026;padding:12px 20px;text-align:center;z-index:70}.mobile-contact .btn{width:100%}.hero.first{padding-top:36px}.rail{top:68px}body{overflow-wrap:break-word} .wrap{min-width:0} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

.hero-layout img,.retail-grid img{height:auto}.hero-layout img{max-height:620px}.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.facts b,.facts span{display:block}@media(max-width:760px){.hero-layout img{max-height:none}.hero .facts{grid-template-columns:1fr 1fr}}

@media(max-width:760px){header.site .bar{padding-left:20px;padding-right:20px}header.site .brand{flex-shrink:0}header.site .brand img{width:125px;height:auto}.bar .btn{padding:12px 14px}}

.language-switch{display:flex;gap:2px;align-items:center;flex-shrink:0}.language-switch a{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:44px;padding:5px 8px;text-decoration:none;font-size:13px;color:#c3c7cc;border:1px solid transparent}.language-switch a[aria-current=page]{color:white;border-color:#687078;border-radius:4px}.file-picker{display:flex;align-items:center;gap:12px;position:relative;flex-wrap:wrap}.file-picker span{font-size:14px;overflow-wrap:anywhere}.file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.file-picker:focus-within{outline:2px solid var(--ring);outline-offset:3px}
@media(max-width:760px){header.site .bar{height:auto;min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:8px}header.site .right{gap:8px;flex-wrap:wrap;justify-content:flex-end}header.site .brand img{width:100px}header.site .bar .btn{font-size:12px;padding:10px}.language-switch a{min-width:32px;padding:4px;min-height:40px}.bar .right>a:not(.btn):not(.tel){font-size:12px;max-width:130px} .rail{top:0}}

/* Showroom photographs retain their original proportions without cropping. */
.srgrid .shot{height:auto;aspect-ratio:auto}.srgrid .shot img{display:block;width:100%;height:auto;object-fit:contain}.srgrid .shot a{display:block;cursor:zoom-in}.srgrid{align-items:start}

/* Portrait production film: keep the full frame visible on every screen. */
.production-film{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:clamp(24px,5vw,64px);align-items:center;margin-top:40px;padding:clamp(20px,4vw,40px);background:var(--ground);border:1px solid var(--line)}
.production-film figure{margin:0;width:100%}
.production-film video{display:block;width:100%;height:auto;aspect-ratio:9/16;background:#111;border-radius:6px}
.production-film-copy h3{margin-top:0}
.production-film-hint{font-size:14px}
@media(max-width:700px){.production-film{grid-template-columns:1fr}.production-film figure{max-width:360px;justify-self:center}}

.imprint{display:grid;grid-template-columns:minmax(160px,240px) 1fr;gap:10px 24px;margin:0 0 28px}.imprint dt{font-weight:600}.imprint dd{margin:0}@media(max-width:600px){.imprint{grid-template-columns:1fr;gap:2px}.imprint dd{margin-bottom:12px}}