/* ============================================================
   SPACING AND TYPE SCALE
   Fifty different pixel values and thirty font sizes is not a system,
   it is fifty and thirty separate decisions. These are the only steps
   anything should use. Everything below was snapped onto them.
   ============================================================ */
/* Section rhythm — three densities, not seven arbitrary values.
   A page reads as one document when the gap between its parts is consistent. */
/* Measure — three widths, chosen by what is being read, not per component.
   Long-form wants a narrow measure; a specification note can run wider. */
:root{
  --measure-read:66ch;   /* continuous prose: blog, legal            */
  --measure-body:70ch;   /* standard body copy and section intros    */
  --measure-note:52ch;   /* short notes beside an image              */
}

:root{
  --block:64px;        /* the standard gap between two sections        */
  --block-tight:44px;  /* inside a column that already has a container */
  --block-loose:88px;  /* full-bleed photographic bands and the closer */
}

:root{
  /* 4px grid */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:48px; --s10:64px;
  /* type: each step is distinguishable from the one below it */
  --t1:10px;   /* mono labels, table headers          */
  --t2:12px;   /* captions, hints, legal              */
  --t3:14px;   /* table body, card copy               */
  --t4:16px;   /* body copy                           */
  --t5:19px;   /* lead paragraphs, card headings       */
  --t6:23px;   /* section headings                    */
  --t7:31px;   /* page section titles                 */
  /* one shadow language, three depths */
  --lift1:0 18px 36px -26px rgba(23,48,71,.42);
  --lift2:0 24px 48px -28px rgba(23,48,71,.48);
  --lift3:0 50px 110px -50px rgba(0,0,0,.8);
}

:root{
  --deep:#173047; --steel:#243E53; --tech:#516070;   /* deepened from #60717F: on the icy ground a card takes on
                       hover it was 3.94:1, and a hover state should be clearer
                       than the resting one, not murkier. 5.05 / 6.45 / 5.95 now. */ --cold:#F4F6F7;
  --fiber:#D9E0E4; --orange:#E7652E;          /* the brand colour — large type, rules, icon strokes */
  --orange-btn:#C64C1B;     /* solid fills carrying small white text */
  --orange-btn-h:#A83E14;
  --orange-ink:#A83E14;     /* small orange TEXT on a light ground */
  --orange-lit:#F07A44;     /* small orange TEXT on the deep navy ground */ --icy:#D9E6E8; --white:#FFFFFF;
  --gut:24px; --maxw:1360px;
  --pad:40px; --railw:238px; --railgap:var(--s9);
}
*{box-sizing:border-box}
html{overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cold);color:var(--deep);
  font-family:'Inter',system-ui,sans-serif;font-size:var(--t4);line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Inter Tight',sans-serif;font-weight:600;letter-spacing:-.03em;margin:0;line-height:1.04}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}

/* ==== SCENE PHOTOGRAPHY (replace the 4 url()s with your own) ==== */
.scene{position:relative;isolation:isolate;color:var(--white);
  background-color:var(--deep);background-size:cover;background-position:center;background-repeat:no-repeat}
.scene::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, rgba(23,48,71,.94) 0%, rgba(23,48,71,.80) 38%, rgba(36,62,83,.44) 68%, rgba(23,48,71,.62) 100%)}
.scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(23,48,71,.92) 0%, rgba(23,48,71,.10) 46%, rgba(23,48,71,.42) 100%)}
.scene > *{position:relative;z-index:2}
.scene > .meta{z-index:41}
.scene > nav.mast{z-index:40}
/* the photo credit must stay out of flow. The rule above sets position on every
   direct child, which would otherwise turn the credit into a block sitting above
   the utility bar and push the entire masthead down the page. */
.scene > .credit{position:absolute;right:14px;bottom:12px;top:auto;left:auto;z-index:3}
.scene-plant{background-image:url('https://images.unsplash.com/photo-1741176508460-2001b928a0e7?fm=jpg&q=80&w=2400&auto=format&fit=crop');background-position:center 42%}
.scene-logistics{background-image:url('https://images.unsplash.com/photo-1645736315000-6f788915923b?fm=jpg&q=80&w=2400&auto=format&fit=crop')}
.scene-home{background-image:url('https://images.unsplash.com/photo-1758273238415-01ec03d9ef27?fm=jpg&q=80&w=2400&auto=format&fit=crop');background-position:center 40%}
.scene-commercial{background-image:url('https://images.unsplash.com/photo-1631365696563-4990f4e9302c?fm=jpg&q=80&w=2400&auto=format&fit=crop');background-position:center 45%}
.credit{position:absolute;right:14px;bottom:12px;z-index:3;font-family:'Roboto Mono',monospace;
  font-size:var(--t1);letter-spacing:.06em;color:rgba(217,230,232,.55);background:rgba(23,48,71,.5);padding:var(--s1) var(--s2)}

/* ==== HERO + MASTHEAD — unchanged ==== */
.meta{background:var(--deep);border-bottom:1px solid rgba(217,230,232,.18);position:relative;z-index:40}
.meta .wrap{display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  font-family:'Roboto Mono',monospace;font-size:var(--t2);letter-spacing:.07em;color:#93AABC;
  padding-top:var(--s2);padding-bottom:var(--s2);text-transform:uppercase}
.meta b{color:var(--white);font-weight:400}
nav.mast{position:relative;z-index:40;border-bottom:1px solid rgba(217,230,232,.18);
  background:rgba(23,48,71,.58);backdrop-filter:blur(10px)}
nav.mast .wrap{display:flex;align-items:center;gap:var(--s7);height:76px}
nav.mast img{height:28px;filter:brightness(0) invert(1)}
.nl{display:flex;gap:var(--s6);margin-left:auto;margin-right:var(--s2);font-size:var(--t3);font-weight:500;
  color:#CBD9E2;font-family:'Inter Tight',sans-serif;letter-spacing:-.012em}
.nl a{padding-bottom:3px;border-bottom:1px solid transparent}
.nl a:hover{color:var(--white);border-color:var(--orange)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:'Roboto Mono',monospace;font-size:var(--t2);letter-spacing:.1em;text-transform:uppercase;
  padding:var(--s3) var(--s5);border:1px solid transparent;transition:.16s}
/* the brand orange on white text is 3.33:1 — fine for a 24px headline, short of
   the 4.5:1 that 11.5px button type needs. Solid buttons use a deeper step of the
   same hue; the brand colour is unchanged everywhere it is not carrying small text. */
.btn-o{background:var(--orange-btn);color:var(--white);border-color:var(--orange-btn)}
.btn-o:hover{background:var(--orange-btn-h);border-color:var(--orange-btn-h)}
.btn-w{border-color:rgba(255,255,255,.6);color:var(--white)}
.btn-w:hover{background:var(--white);color:var(--deep)}
.btn-d{background:var(--deep);color:var(--white);border-color:var(--deep)}
.btn-d:hover{background:var(--steel);border-color:var(--steel)}
.btn-l{border-color:var(--deep);color:var(--deep)}
.btn-l:hover{background:var(--deep);color:var(--white)}
/* every button needs a visible focus ring; the offset keeps it clear of the fill */
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.btn-o:focus-visible,.btn-d:focus-visible{outline-color:var(--deep);
  box-shadow:0 0 0 5px rgba(255,255,255,.9)}
.pagehero .btn:focus-visible,.endband .btn:focus-visible,.hero .btn:focus-visible{
  outline-color:var(--white);box-shadow:0 0 0 5px rgba(23,48,71,.7)}
.hero{min-height:92vh;min-height:92svh;display:flex;flex-direction:column}
.hero .body{flex:1;display:flex;align-items:flex-end}
.hero .body .wrap{width:100%;padding-top:90px;padding-bottom:60px}
.tagline{font-family:'Roboto Mono',monospace;font-size:var(--t2);letter-spacing:.16em;text-transform:uppercase;
  color:var(--icy);padding-bottom:var(--s3);border-bottom:1px solid rgba(217,230,232,.3);margin-bottom:var(--s7);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;max-width:760px}
.tagline em{font-style:normal;color:var(--orange)}
.hero h1{font-size:clamp(36px,5vw,66px);color:var(--white);letter-spacing:-.042em;line-height:1.0;max-width:19ch}
.hero h1 .o{color:var(--orange)}
.hero .lede{color:#C0D2DD;font-size:var(--t4);max-width:50ch;margin:var(--s6) 0 var(--s7);line-height:1.55}
.hbtns{display:flex;gap:var(--s3);flex-wrap:wrap}
.hero .locus{margin-top:44px;display:flex;align-items:center;gap:var(--s3);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;color:#8FA9BB}
.hero .locus::before{content:"";width:34px;height:1px;background:var(--orange)}
.statbar{position:relative;z-index:3;background:rgba(23,48,71,.82);backdrop-filter:blur(6px);
  border-top:1px solid rgba(217,230,232,.24)}
.statbar .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:0}
.statbar div{padding:var(--s5) var(--s6) var(--s5) 0;border-right:1px solid rgba(217,230,232,.18)}
.statbar div:not(:first-child){padding-left:var(--s6)}
.statbar div:last-child{border-right:0}
.statbar dt{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase;
  color:#8FA6B6;margin-bottom:var(--s1)}
.statbar dd{margin:0;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t5);
  letter-spacing:-.028em;color:var(--white)}
.statbar dd em{font-style:normal;color:var(--orange-lit)}

/* ============================================================
   L — STICKY INDEX RAIL + TECHNICAL DOSSIER CONTENT
   ============================================================ */
.dossier{background:var(--cold)}
.dossier .wrap{display:grid;grid-template-columns:var(--railw) minmax(0,1fr);gap:var(--railgap);align-items:start}
.doscol{min-width:0}

/* full-bleed photo bands break out of the content column and pass over the rail */
/* full-bleed photo bands: the content column breaks out to the whole viewport.
   The sticky rail sits above them and grows a solid card so it stays readable. */
.bleed{position:relative;z-index:2;width:100vw;
  margin-left:calc(-1 * ((100vw - min(100vw, var(--maxw)))/2 + var(--pad) + var(--railw) + var(--railgap)))}
.bleed > .wrap{max-width:var(--maxw);margin:0 auto;
  padding:0 var(--pad) 0 calc(var(--pad) + var(--railw) + var(--railgap))}

/* ---------- left rail ---------- */
.rail{position:sticky;top:20px;z-index:6;padding:56px var(--s5) var(--s8) 0;
  border-right:1px solid var(--fiber);margin-right:-26px;
  transition:border-color .2s ease}
/* frosted backing — appears only while the rail is over a photo band.
   Translucent so the photograph still reads through it. */
.rail::before{content:"";position:absolute;z-index:-1;inset:38px -14px 22px -18px;
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);
  backdrop-filter:blur(20px) saturate(1.15);
  border:1px solid rgba(255,255,255,.45);
  box-shadow:var(--lift2);
  opacity:0;transition:opacity .22s ease;pointer-events:none}
.rail.floating::before{opacity:1}
.rail.floating{border-right-color:transparent}
/* at 52% the panel is see-through, so every label goes to the darkest ink and
   the hierarchy is carried by weight and size instead of by grey steps */
.rail.floating .head,
.rail.floating nav a,
.rail.floating nav a .n,
.rail.floating .railnote,
.rail.floating .railnote a,
.rail.floating .railnote small{color:var(--deep)}
.rail.floating nav a{font-weight:600}
.rail.floating nav a .n{opacity:.8}
.rail.floating nav a.on .n{color:#B34418;opacity:1}
.rail.floating nav a.on{border-left-color:#B34418}
.rail.floating nav a:hover{background:rgba(255,255,255,.6)}
.rail.floating nav a.on{background:rgba(255,255,255,.72)}
.rail.floating .head::after{background:rgba(23,48,71,.28)}
/* browsers without backdrop-filter get a more opaque panel instead */
@supports not (backdrop-filter: blur(1px)){
  .rail::before{background:rgba(255,255,255,.86)}
}

.rail .head{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.15em;
  text-transform:uppercase;color:var(--tech);display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.rail .head::after{content:"";flex:1;height:1px;background:var(--fiber)}

/* reset: this <nav> must not inherit the masthead nav styling */
.rail nav{position:static;z-index:auto;background:transparent;border:0;backdrop-filter:none;display:block}

.rail nav a{display:grid;grid-template-columns:24px 1fr;gap:var(--s3);align-items:baseline;
  padding:var(--s3) var(--s3) var(--s3) var(--s3);border-left:2px solid var(--fiber);
  font-family:'Inter Tight',sans-serif;font-size:var(--t3);font-weight:500;letter-spacing:-.02em;
  color:var(--tech);background:transparent;transition:.15s}
.rail nav a + a{margin-top:1px}
.rail nav a .n{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.08em;color:#AAB7BF}
.rail nav a:hover{background:var(--white);color:var(--deep);border-left-color:var(--tech)}
.rail nav a:hover .n{color:var(--tech)}
.rail nav a.on{background:var(--white);color:var(--deep);font-weight:600;border-left-color:var(--orange)}
.rail nav a.on .n{color:var(--orange-lit)}

.railcta{margin-top:var(--s6);display:grid;gap:var(--s2)}
.railcta .btn{width:100%;white-space:nowrap;font-size:var(--t2);letter-spacing:.07em;padding:var(--s3) var(--s3)}

.railnote{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--fiber);
  font-size:var(--t2);color:var(--tech);line-height:1.6}
.railnote b{display:block;font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--deep);margin-bottom:var(--s2);font-weight:400}
.railnote a{display:block;color:var(--deep);font-weight:500;letter-spacing:-.01em}
.railnote a:hover{color:var(--orange)}
.railnote small{display:block;margin-top:var(--s2);font-size:var(--t2);color:var(--tech)}

/* right column blocks */
.blk{padding:var(--block) 0;border-bottom:1px solid var(--fiber)}
.blk:last-of-type{border-bottom:0}
.blkhead{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
  padding-bottom:var(--s4);border-bottom:2px solid var(--deep);margin-bottom:var(--s7)}
.blkhead .n{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.13em;color:var(--orange-ink)}
.blkhead h2{font-size:clamp(23px,2.5vw,32px);letter-spacing:-.035em}
.blkhead .r{margin-left:auto;font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tech)}
.blkintro{margin:0 0 28px;font-size:var(--t4);color:var(--tech);max-width:var(--measure-body)}

/* product records */
.rec{display:grid;grid-template-columns:118px 1fr 210px auto;gap:var(--s6);align-items:center;
  background:var(--white);border:1px solid var(--fiber);border-bottom:0;padding:var(--s4) var(--s5);transition:.15s}
.rec:last-of-type{border-bottom:1px solid var(--fiber)}
.rec:hover{background:var(--icy);border-color:var(--steel)}
.rec .im{background:var(--cold);height:96px;display:grid;place-items:center;padding:var(--s2)}
.rec:hover .im{background:var(--white)}
.rec .im img{max-height:80px;width:auto;object-fit:contain}
.rec .code{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;color:var(--tech);
  display:block;margin-bottom:var(--s1)}
.rec h3{font-size:var(--t5);margin-bottom:var(--s1)}
.rec p{margin:0;font-size:var(--t3);color:var(--tech);max-width:var(--measure-note)}
.rec .sp{display:grid;gap:var(--s1)}
.rec .sp div{display:flex;justify-content:space-between;gap:var(--s2);font-size:var(--t2);
  border-bottom:1px dotted var(--fiber);padding-bottom:var(--s1)}
.rec .sp dt{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.06em;
  text-transform:uppercase;color:var(--tech)}
.rec .sp dd{margin:0;font-weight:600}
.rec .go{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange-ink);white-space:nowrap}

/* spec table (materials) */
.tblwrap{position:relative;border:1px solid var(--fiber);background:var(--white);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.tblwrap::-webkit-scrollbar{height:6px}
.tblwrap::-webkit-scrollbar-thumb{background:var(--fiber)}
.scrollhint{display:none;align-items:center;gap:var(--s2);margin-bottom:var(--s2);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tech)}
.scrollhint.show{display:flex}
.scrollhint::before{content:"";width:22px;height:1px;background:var(--orange)}
/* right-edge fade so a cut-off table reads as scrollable, not as truncated */
.tblwrap.scrollable::after{content:"";position:absolute;top:0;right:0;bottom:0;width:56px;
  pointer-events:none;background:linear-gradient(to left,var(--white),rgba(255,255,255,0))}
.tblcap{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;
  background:var(--deep);color:var(--white);padding:var(--s3) var(--s5)}
.tblcap b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t3);letter-spacing:-.02em}
.tblcap span{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:#9FB6C5}
table.spec{width:100%;border-collapse:collapse;font-size:var(--t3);min-width:880px}
table.spec th,table.spec td{text-align:left;padding:var(--s3) var(--s4);border-bottom:1px solid var(--fiber)}
table.spec thead th{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--tech);font-weight:400;background:var(--cold)}
table.spec tbody tr:hover{background:var(--cold)}
table.spec td.th{width:78px;padding:var(--s2) var(--s3)}
table.spec td.th img{height:52px;width:auto;object-fit:contain}
table.spec td.nm{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t3);letter-spacing:-.02em}
table.spec td.dm{color:var(--tech);font-size:var(--t2)}

/* brand compatibility cards */
.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.brand{background:var(--white);border:1px solid var(--fiber);display:flex;flex-direction:column;transition:.16s}
.brand:hover{border-color:var(--steel);box-shadow:var(--lift1)}
.brand .mark{height:112px;display:grid;place-items:center;padding:var(--s5);position:relative;
  background:var(--cold);border-bottom:1px solid var(--fiber)}
.brand:hover .mark{background:var(--icy)}
.brand .mark img{max-height:44px;max-width:76%;width:auto;object-fit:contain}
.brand .st{position:absolute;top:0;right:0;font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.1em;text-transform:uppercase;padding:var(--s1) var(--s2);background:var(--orange);color:var(--white)}
.brand .st.sm{background:var(--icy);color:var(--steel);border-left:1px solid var(--fiber);
  border-bottom:1px solid var(--fiber)}
.brand .bd{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.brand h3{font-size:var(--t4)}
.brand p{margin:0;font-size:var(--t3);color:var(--tech);flex:1}
.brand dl{margin:0;display:grid;gap:var(--s2);border-top:1px solid var(--fiber);padding-top:var(--s3)}
.brand dl div{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--t2)}
.brand dt{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.06em;
  text-transform:uppercase;color:var(--tech);flex:none}
.brand dd{margin:0;font-weight:600;text-align:right}
.brand .go{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange-ink);border-top:1px solid var(--fiber);padding-top:var(--s3)}

.ownsystem{margin-top:var(--gut);border:1px solid var(--deep);background:var(--white);
  display:grid;grid-template-columns:auto 1fr auto;gap:var(--s6);align-items:center;padding:var(--s5) var(--s6)}
.ownsystem .k{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange-ink);white-space:nowrap}
.ownsystem b{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t5);
  letter-spacing:-.028em;margin-bottom:var(--s1)}
.ownsystem small{display:block;font-size:var(--t3);color:var(--tech)}

.disclaimer{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--fiber);
  font-size:var(--t2);color:var(--tech);line-height:1.65;max-width:var(--measure-body)}
.disclaimer b{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--deep);font-weight:400;margin-right:var(--s2)}

/* how-to steps */
.hsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fiber);
  border:1px solid var(--fiber);margin-bottom:var(--s6)}
.hsteps div{background:var(--white);padding:var(--s5) var(--s5)}
.hsteps .n{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;color:var(--orange-ink);
  display:block;margin-bottom:var(--s2)}
.hsteps b{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t4);
  letter-spacing:-.025em;margin-bottom:var(--s1)}
.hsteps small{font-size:var(--t2);color:var(--tech);line-height:1.55}

/* process timeline (vertical, dossier-style) */
.tl{border-left:2px solid var(--fiber);margin-left:var(--s3)}
.tl article{position:relative;padding:0 0 var(--s6) var(--s7)}
.tl article:last-child{padding-bottom:0}
.tl article::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;
  background:var(--white);border:2px solid var(--fiber)}
.tl article:hover::before{border-color:var(--orange);background:var(--orange)}
.tl .n{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;color:var(--orange-ink);
  display:block;margin-bottom:var(--s1)}
.tl h3{font-size:var(--t4);margin-bottom:var(--s1)}
.tl p{margin:0;font-size:var(--t3);color:var(--tech);max-width:var(--measure-body)}
.tests{margin-top:var(--s6);border:1px solid var(--fiber);background:var(--white);
  display:grid;grid-template-columns:auto 1fr;gap:var(--s6);align-items:center;padding:var(--s4) var(--s5)}
.tests b{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange-ink);white-space:nowrap}
.tests span{display:inline-block;font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.05em;color:var(--steel);border:1px solid var(--fiber);padding:var(--s1) var(--s2);margin:0 var(--s1) 0 0}

/* programmes as records */
.prec{display:grid;grid-template-columns:150px 1fr auto;gap:var(--s6);align-items:center;
  background:var(--white);border:1px solid var(--fiber);border-bottom:0;padding:var(--s5) var(--s5);transition:.15s}
.prec:last-of-type{border-bottom:1px solid var(--fiber)}
.prec:hover{background:var(--icy);border-color:var(--steel)}
.prec .im{background:var(--cold);height:104px;display:grid;place-items:center;padding:var(--s2);position:relative}
.prec:hover .im{background:var(--white)}
.prec .im img{max-height:84px;width:auto;object-fit:contain}
.prec .im .k{position:absolute;top:0;left:0;background:var(--deep);color:var(--white);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.09em;text-transform:uppercase;padding:var(--s1) var(--s2)}
.prec h3{font-size:var(--t5);margin-bottom:var(--s2)}
.prec p{margin:0 0 var(--s2);font-size:var(--t3);color:var(--tech);max-width:var(--measure-body)}
.prec .mats span{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.05em;
  border:1px solid var(--fiber);color:var(--steel);padding:3px var(--s2);margin-right:var(--s1)}
.prec .go{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange-ink);white-space:nowrap}

/* faq */
details{border-bottom:1px solid var(--fiber);background:var(--white);
  border-left:1px solid var(--fiber);border-right:1px solid var(--fiber)}
details:first-of-type{border-top:1px solid var(--fiber)}
summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s5);font-family:'Inter Tight',sans-serif;
  font-weight:600;font-size:var(--t4);letter-spacing:-.028em;display:flex;gap:var(--s4);align-items:center}
summary::-webkit-details-marker{display:none}
summary i{font-family:'Roboto Mono',monospace;font-size:var(--t1);color:var(--tech);font-style:normal;
  letter-spacing:.08em;font-weight:400;flex:none}
summary::after{content:"+";margin-left:auto;color:var(--orange-ink);font-family:'Roboto Mono',monospace;font-size:var(--t4)}
details[open]{background:var(--cold)}
details[open] summary::after{content:"−"}
details p{margin:0 var(--s5) var(--s5) 60px;color:var(--tech);font-size:var(--t3);max-width:var(--measure-body)}

/* photo bands (full-bleed, break out of the dossier) */
.bandrow{padding:var(--block-loose) 0}
.bandkick{font-family:'Roboto Mono',monospace;font-size:var(--t2);letter-spacing:.17em;text-transform:uppercase;
  color:var(--orange-lit);display:block;margin-bottom:var(--s4)}
.bandrow .wrap{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);align-items:start}
.bandrow h2{grid-column:1/7;font-size:clamp(28px,3.6vw,50px);color:var(--white);letter-spacing:-.042em}
.bandrow .side{grid-column:8/13;padding-top:var(--s7)}
.bandrow .side p{color:#BDCFDA;font-size:var(--t4);margin:0 0 var(--s6)}
.bandsheet{grid-column:1/13;margin-top:clamp(130px,26vh,300px);display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(217,230,232,.28);border:1px solid rgba(217,230,232,.28)}
.bandsheet div{background:rgba(23,48,71,.72);backdrop-filter:blur(4px);padding:var(--s5) var(--s5)}
.bandsheet dt{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:#8FA6B6;margin-bottom:var(--s2)}
.bandsheet dd{margin:0;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t4);
  letter-spacing:-.025em;color:var(--white)}

/* closing (kept) */
.closing{padding:132px 0}
.closing .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s8);flex-wrap:wrap}
.closing h2{font-size:clamp(28px,4vw,54px);color:var(--white);letter-spacing:-.042em;max-width:16ch}
.closing p{color:#BDCFDA;font-size:var(--t4);max-width:var(--measure-note);margin:var(--s5) 0 0}

/* ==== FOOTER — unchanged ==== */
footer{background:var(--deep);color:#9FB4C2;padding:60px 0 var(--s6);font-size:var(--t3)}
footer .grid{row-gap:var(--s7)}
.fc1{grid-column:1/5}.fc2{grid-column:5/8}.fc3{grid-column:8/11}.fc4{grid-column:11/13}
footer img{height:30px;filter:brightness(0) invert(1);margin-bottom:var(--s3)}
footer h4{color:var(--white);font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.13em;
  text-transform:uppercase;margin:0 0 var(--s3);font-weight:400}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2)}
footer a:hover{color:var(--orange)}
.fbot{border-top:1px solid rgba(255,255,255,.16);margin-top:var(--s8);padding-top:var(--s4);display:flex;
  justify-content:space-between;gap:var(--s4);flex-wrap:wrap;font-family:'Roboto Mono',monospace;
  font-size:var(--t1);letter-spacing:.08em;text-transform:uppercase}

/* ---- certifications strip ---- */
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--fiber);
  border:1px solid var(--fiber);margin-top:var(--gut)}
.cert{background:var(--white);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s2);transition:.15s}
.cert:hover{background:var(--icy)}
.cert .mk{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange-ink)}
.cert b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t4);letter-spacing:-.025em}
.cert small{font-size:var(--t2);color:var(--tech);line-height:1.5}

/* ---- ordering terms ---- */
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.termcard{border:1px solid var(--fiber);background:var(--white);display:flex;flex-direction:column}
.termcard .top{background:var(--deep);color:var(--white);padding:var(--s4) var(--s5);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase}
.termcard dl{margin:0;padding:var(--s1) var(--s5) var(--s4)}
.termcard dl div{padding:var(--s3) 0;border-bottom:1px solid var(--fiber)}
.termcard dl div:last-child{border-bottom:0}
.termcard dt{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.07em;
  text-transform:uppercase;color:var(--tech);margin-bottom:var(--s1)}
.termcard dd{margin:0;font-size:var(--t3);font-weight:600;letter-spacing:-.01em}
.termcard dd em{font-style:normal;font-weight:400;color:var(--tech);display:block;
  font-size:var(--t2);margin-top:3px}

/* ---- 06 · step timeline with a live photo preview ---- */
.linegrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:var(--s9);align-items:start}
/* the dimming only applies where a photo preview is following along;
   a plain timeline (factory, ordering terms) stays at full contrast */
.linegrid .tl article{cursor:default;transition:.16s}
.linegrid .tl article.on::before{border-color:var(--orange);background:var(--orange)}
.linegrid .tl article.on h3{color:var(--deep)}
.linegrid .tl article.on .n{color:var(--orange)}
.linegrid .tl article:not(.on) h3,.linegrid .tl article:not(.on) .n{opacity:.62}
.linegrid .tl article:not(.on) p{opacity:.72}

.shotpanel{position:sticky;top:24px;margin:0;border:1px solid var(--fiber);background:var(--white)}
.shotframe{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--icy)}
.shotframe img{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .28s ease}
.shotframe.fading img{opacity:0}
.shotstep{position:absolute;top:0;left:0;background:var(--orange);color:var(--white);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;padding:var(--s1) var(--s3)}
.shotpanel figcaption{padding:var(--s3) var(--s4) var(--s4);border-top:1px solid var(--fiber)}
.shotpanel figcaption b{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;
  font-size:var(--t3);letter-spacing:-.025em;color:var(--deep)}
.shotpanel figcaption span{display:block;margin-top:var(--s1);font-family:'Roboto Mono',monospace;
  font-size:var(--t1);letter-spacing:.07em;color:var(--tech)}

/* inline thumbnail used instead of the panel on narrow screens */
.tl .thumb{display:none;margin-top:var(--s3);aspect-ratio:16/9;background:var(--icy) center/cover no-repeat;
  border:1px solid var(--fiber)}

/* ============================================================
   MOBILE NAVIGATION + STICKY ACTION BAR
   ============================================================ */
.navtoggle{display:none;align-items:center;gap:var(--s2);margin-left:auto;background:transparent;
  border:1px solid rgba(217,230,232,.5);color:var(--white);cursor:pointer;
  font-family:'Roboto Mono',monospace;font-size:var(--t2);letter-spacing:.1em;text-transform:uppercase;
  padding:var(--s3) var(--s3);min-height:44px}
.navtoggle:hover{background:rgba(255,255,255,.1)}
.navtoggle .bars{display:grid;gap:3px;width:16px}
.navtoggle .bars i{height:1.5px;background:currentColor;display:block;transition:.18s}
.navtoggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-4.5px) rotate(-45deg)}

.nav-drawer{display:none;position:relative;z-index:40;
  background:rgba(23,48,71,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(217,230,232,.18)}
.nav-drawer a{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:var(--s4) 0;min-height:50px;border-bottom:1px solid rgba(217,230,232,.14);
  font-family:'Inter Tight',sans-serif;font-size:var(--t4);font-weight:500;
  letter-spacing:-.02em;color:var(--icy)}
.nav-drawer a:last-of-type{border-bottom:0}
.nav-drawer a span{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;color:#8FA9BB}
.nav-drawer a:hover,.nav-drawer a:focus-visible{color:var(--white)}
.nav-drawer .drawercta{padding:var(--s4) 0 var(--s5);display:grid;gap:var(--s2)}

.actionbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  grid-template-columns:1fr 1fr 1fr;
  background:var(--deep);border-top:1px solid rgba(217,230,232,.2)}
.actionbar{padding-bottom:env(safe-area-inset-bottom)}
.actionbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);
  padding:var(--s2) var(--s1);min-height:62px;color:var(--icy);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.08em;text-transform:uppercase;
  border-right:1px solid rgba(217,230,232,.16)}
.actionbar a:last-child{border-right:0;background:var(--orange);color:var(--white)}
.actionbar svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* ============================================================
   RESPONSIVE — five breakpoints
   1240 laptop · 1040 tablet landscape · 860 tablet portrait
   640 phone · 400 small phone
   ============================================================ */

/* ---- shared: no hover effects on touch devices ---- */
@media(hover:none){
  .rec:hover,.prec:hover,.brand:hover,.rail nav a:hover{box-shadow:none}
  .brand:hover .mark{background:var(--cold)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* ---- 1240: tighten the desktop grid before anything breaks ---- */
@media(max-width:1240px){
  :root{--pad:32px; --railw:200px; --railgap:var(--s8)}
  .rec{grid-template-columns:104px 1fr 180px auto;gap:var(--s5)}
  .brands{gap:var(--s4)}
}

/* ---- 1040: rail goes horizontal, three-up grids go two-up ---- */
@media(max-width:1040px){
  .dossier .wrap{grid-template-columns:1fr;gap:0}
  .bleed{width:auto;margin-left:0}
  .bleed > .wrap{padding:0}
  .rail::before{display:none}
  .rail.floating .railnote,.rail.floating nav a,.rail.floating .head{color:inherit}
  .rail{position:static;border-right:0;border-bottom:1px solid var(--fiber);
    padding:36px 0 var(--s6);margin-right:0}
  .rail nav{display:grid;grid-template-columns:repeat(3,1fr);gap:1px}
  .rail nav a + a{margin-top:0}
  .railcta{grid-template-columns:1fr 1fr}
  .railnote{margin-top:var(--s4)}
  .rec{grid-template-columns:96px 1fr auto;gap:var(--s4)}
  .rec .sp{display:none}
  .prec{grid-template-columns:110px 1fr;gap:var(--s4)}
  .prec .go{display:none}
  .brands{grid-template-columns:repeat(2,1fr)}
  .certs{grid-template-columns:repeat(2,1fr)}
  .terms{grid-template-columns:1fr}
  .ownsystem{grid-template-columns:1fr;gap:var(--s4)}
  .ownsystem .btn{justify-self:start}
  .bandrow h2,.bandrow .side{grid-column:1/13}
  .bandrow .side{margin-top:var(--s6);padding-top:0}
  .bandsheet{grid-template-columns:1fr 1fr;margin-top:clamp(72px,14vh,130px)}
  .statbar .wrap{grid-template-columns:repeat(3,1fr)}
  .statbar div:nth-child(3){border-right:0}
  .statbar div:nth-child(-n+3){border-bottom:1px solid rgba(217,230,232,.18)}
  .tests{grid-template-columns:1fr;gap:var(--s3)}
  .fc1,.fc2,.fc3,.fc4{grid-column:span 6}
}

/* ---- 860: nav collapses to a menu, scene gradients go vertical ---- */
@media(max-width:860px){
  :root{--pad:26px}
  .hsteps{grid-template-columns:1fr}
  .linegrid{grid-template-columns:1fr;gap:0}
  .shotpanel{display:none}
  .tl .thumb{display:block}
  .linegrid .tl article:not(.on) h3,.linegrid .tl article:not(.on) .n,.linegrid .tl article:not(.on) p{opacity:1}
  .nl{display:none}
  .navtoggle{display:inline-flex}
  .nav-drawer.open{display:block}
  nav.mast .wrap{gap:var(--s4)}
  nav.mast .quotebtn{display:none}

  /* the horizontal scrim was tuned for wide screens; on narrow ones
     the copy sits low, so darken from the bottom instead */
  .scene::before{background:linear-gradient(180deg, rgba(23,48,71,.62) 0%, rgba(23,48,71,.50) 40%, rgba(23,48,71,.86) 100%)}
  .scene::after{background:linear-gradient(to top, rgba(23,48,71,.95) 0%, rgba(23,48,71,.34) 52%, rgba(23,48,71,.55) 100%)}
  .scene-plant{background-position:62% 40%}
  .scene-logistics{background-position:58% 50%}
  .scene-home{background-position:56% 42%}
  .scene-commercial{background-position:60% 45%}

  .hero{min-height:auto}
  .hero .body .wrap{padding-top:var(--s10);padding-bottom:44px}
  .hero h1{max-width:none}
  .tagline{max-width:none}
  .hero .locus{margin-top:var(--s7)}

  .statbar .wrap{grid-template-columns:1fr 1fr}
  .statbar div{padding:var(--s4) var(--s4) var(--s4) 0}
  .statbar div:not(:first-child){padding-left:var(--s4)}
  .statbar div:nth-child(odd){padding-left:0}
  .statbar div:nth-child(even){border-right:0}
  .statbar div{border-bottom:1px solid rgba(217,230,232,.18)}

  .rail nav{grid-template-columns:repeat(2,1fr)}
  .blk{padding:44px 0}
  .blkhead{flex-wrap:wrap;gap:var(--s2) var(--s4)}
  .blkhead .r{margin-left:0;width:100%}
  .brand .mark{height:96px}
  .bandrow{padding:72px 0}
  .closing{padding:80px 0}
  .credit{display:none}
  .actionbar{display:grid}
  body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
}

/* ---- 640: single column throughout, sticky action bar appears ---- */
@media(max-width:640px){
  .brands{grid-template-columns:1fr}
  :root{--pad:20px}

  .meta .wrap{gap:var(--s1);font-size:var(--t1)}
  .meta .wrap span:first-child{width:100%}

  .statbar .wrap{grid-template-columns:1fr}
  .statbar div{border-right:0;padding-left:0!important;padding-top:var(--s3);padding-bottom:var(--s3)}
  .statbar dd{font-size:var(--t4)}

  .rail nav,.railcta{grid-template-columns:1fr}
  .rail{padding:var(--s7) 0 var(--s6)}

  .rec{grid-template-columns:72px 1fr;gap:var(--s4)}
  .rec .go{display:none}
  .rec .im{height:80px}
  .rec .im img{max-height:68px}
  .rec h3{font-size:var(--t4)}

  .prec{grid-template-columns:1fr}
  .prec .im{height:150px}
  .prec .im img{max-height:120px}

  .bandsheet{grid-template-columns:1fr;margin-top:52px}
  .bandrow{padding:60px 0}
  .closing{padding:68px 0}
  .closing .wrap{align-items:flex-start}

  .hbtns .btn,.railcta .btn,.ownsystem .btn{width:100%}
  .btn{padding:var(--s4) var(--s4);min-height:46px}   /* 46px touch target */
  .rail nav a{padding:var(--s3) var(--s3)}

  details p{margin-left:0}
  summary{padding:var(--s4) 0;gap:var(--s3)}
  .blkintro{font-size:var(--t3)}
  .tl article{padding-left:var(--s6)}
  .tl{margin-left:var(--s2)}
  .fc1,.fc2,.fc3,.fc4{grid-column:1/13}
  .fbot{gap:var(--s2)}
}

/* ---- 400: smallest phones ---- */
@media(max-width:400px){
  :root{--pad:16px}
  .hero h1{font-size:30px;letter-spacing:-.035em}
  .hero .lede{font-size:var(--t4)}
  .blkhead h2{font-size:var(--t6)}
  .rec{grid-template-columns:1fr}
  .rec .im{height:130px}
  .rec .im img{max-height:104px}
  .brand .bd{padding:var(--s4)}
  .ownsystem{padding:var(--s4)}
}

/* ---- lighter background images for small screens ---- */
@media(max-width:860px){
  .scene-plant{background-image:url('https://images.unsplash.com/photo-1741176508460-2001b928a0e7?fm=jpg&q=70&w=1200&auto=format&fit=crop')}
  .scene-logistics{background-image:url('https://images.unsplash.com/photo-1645736315000-6f788915923b?fm=jpg&q=70&w=1200&auto=format&fit=crop')}
  .scene-home{background-image:url('https://images.unsplash.com/photo-1758273238415-01ec03d9ef27?fm=jpg&q=70&w=1200&auto=format&fit=crop')}
  .scene-commercial{background-image:url('https://images.unsplash.com/photo-1631365696563-4990f4e9302c?fm=jpg&q=70&w=1200&auto=format&fit=crop')}
}

/* ============================================================
   INNER PAGES — shared components
   ============================================================ */

/* breadcrumb */
.crumb{position:relative;z-index:3}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0;padding:0;
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.09em;text-transform:uppercase}
.crumb li{display:flex;align-items:center;gap:var(--s2);color:#8FA9BB}
.crumb li::after{content:"/";color:rgba(217,230,232,.4)}
.crumb li:last-child::after{content:none}
.crumb a{color:var(--icy)}
.crumb a:hover{color:var(--orange)}
.crumb li[aria-current]{color:var(--white)}

/* compact page hero over a photo */
/* the masthead sits inside this header, so it must start flush at the top;
   the breathing room belongs below the nav, not above the utility bar */
.pagehero{color:var(--white);padding:0}
.pagehero > .wrap{padding-top:var(--s7)}
.pagehero .crumb{margin-bottom:var(--s1)}
.pagehero .inner{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--gut);
  align-items:center;padding:var(--block-tight) 0 var(--block)}
.pagehero .kick{font-family:'Roboto Mono',monospace;font-size:var(--t2);letter-spacing:.17em;
  text-transform:uppercase;color:var(--orange-lit);display:block;margin:var(--s6) 0 var(--s4)}
.pagehero h1{font-size:clamp(30px,4.4vw,56px);color:var(--white);letter-spacing:-.042em;
  line-height:1.02;max-width:17ch}
.pagehero p.lede{color:#BDCFDA;font-size:var(--t4);max-width:46ch;margin:var(--s5) 0 var(--s6)}
.pagehero .chips{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s6)}
.pagehero .chips span{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.05em;
  border:1px solid rgba(217,230,232,.4);color:var(--icy);padding:var(--s1) var(--s2)}
.pagehero .shot{position:relative;display:grid;place-items:center;min-height:300px}
.pagehero .shot img{max-height:330px;width:auto;object-fit:contain;
  filter:drop-shadow(0 34px 44px rgba(0,0,0,.55))}

/* facts strip docked under a page hero */
.factstrip{position:relative;z-index:3;background:rgba(23,48,71,.82);backdrop-filter:blur(6px);
  border-top:1px solid rgba(217,230,232,.24)}
.factstrip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.factstrip div{padding:var(--s4) var(--s5) var(--s4) 0;border-right:1px solid rgba(217,230,232,.18)}
.factstrip div:not(:first-child){padding-left:var(--s5)}
.factstrip div:last-child{border-right:0}
.factstrip dt{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:#8FA6B6;margin-bottom:var(--s1)}
.factstrip dd{margin:0;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t4);
  letter-spacing:-.028em;color:var(--white)}

/* plain content section on the light ground */
.page{background:var(--cold)}
.page .wrap{padding-top:0;padding-bottom:0}
.sect{padding:var(--block) 0;border-bottom:1px solid var(--fiber)}
.sect:last-of-type{border-bottom:0}
.sect.white{background:var(--white)}
.secthead{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;
  padding-bottom:var(--s4);border-bottom:2px solid var(--deep);margin-bottom:var(--s6)}
.secthead h2{font-size:clamp(22px,2.5vw,31px);letter-spacing:-.035em}
.secthead .r{margin-left:auto;font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tech)}
.sect p.intro{margin:0 0 var(--s6);font-size:var(--t4);color:var(--tech);max-width:var(--measure-body)}

/* two-column article body */
.artgrid{display:grid;grid-template-columns:1fr .78fr;gap:var(--s9);align-items:start}
.prose p{font-size:var(--t4);color:var(--steel);margin:0 0 var(--s4);max-width:var(--measure-body)}
.prose h3{font-size:var(--t5);margin:28px 0 var(--s2)}
.prose ul{margin:0 0 var(--s4);padding-left:var(--s5);color:var(--steel);font-size:var(--t3)}
.prose li{margin-bottom:var(--s2)}

/* key/value spec table */
.kv{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--fiber);font-size:var(--t3)}
.kv caption{text-align:left;background:var(--deep);color:var(--white);padding:var(--s3) var(--s4);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase}
.kv th{text-align:left;padding:var(--s3) var(--s4);width:42%;color:var(--tech);font-weight:400;
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.07em;text-transform:uppercase;
  vertical-align:top}
.kv td{padding:var(--s3) var(--s4);font-weight:600;border-left:1px solid var(--fiber)}
.kv tr+tr th,.kv tr+tr td{border-top:1px solid var(--fiber)}

/* generic card grid */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gut)}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--fiber);display:flex;flex-direction:column;transition:.16s}
.card:hover{border-color:var(--steel);box-shadow:var(--lift1)}
.card .ph{background:var(--icy);height:186px;display:grid;place-items:center;padding:var(--s5);position:relative}
.card .ph img{max-height:146px;width:auto;object-fit:contain}
.card .ph .tag{position:absolute;top:0;left:0;background:var(--deep);color:var(--white);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;padding:var(--s1) var(--s2)}
.card:hover .ph .tag{background:var(--orange)}
.card .bd{padding:var(--s5);border-top:1px solid var(--fiber);flex:1;
  display:flex;flex-direction:column;gap:var(--s2)}
.card h3{font-size:var(--t5)}
.card p{margin:0;font-size:var(--t3);color:var(--tech);flex:1}
.card .row{display:flex;justify-content:space-between;gap:var(--s2);border-top:1px solid var(--fiber);
  padding-top:var(--s3);font-family:'Roboto Mono',monospace;font-size:var(--t1);color:var(--steel)}
.card:hover .row{color:var(--orange-ink)}

/* closing CTA band shared by every inner page */
.endband{color:var(--white);padding:var(--block-loose) 0}
.endband .wrap{display:flex;justify-content:space-between;align-items:flex-end;
  gap:var(--s7);flex-wrap:wrap}
.endband h2{font-size:clamp(25px,3.2vw,42px);color:var(--white);letter-spacing:-.04em;max-width:19ch}
.endband p{color:#BDCFDA;font-size:var(--t4);max-width:var(--measure-note);margin:var(--s4) 0 0}

/* article list (blog) */
.posts{display:grid;gap:1px;background:var(--fiber);border:1px solid var(--fiber)}
.post{background:var(--white);padding:var(--s6) var(--s6);display:grid;
  grid-template-columns:118px 1fr auto;gap:var(--s6);align-items:center;transition:.15s}
.post:hover{background:var(--icy)}
.post .date{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.07em;color:var(--tech)}
.post h3{font-size:var(--t5);margin-bottom:var(--s1)}
.post p{margin:0;font-size:var(--t3);color:var(--tech);max-width:var(--measure-body)}
.post .go{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange-ink);white-space:nowrap}

/* contact form */
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.field{display:flex;flex-direction:column;gap:var(--s2)}
.field.full{grid-column:1/-1}
.field label{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tech)}
.field input,.field select,.field textarea{border:1px solid var(--fiber);background:var(--white);
  padding:var(--s3) var(--s3);font-family:'Inter',sans-serif;font-size:var(--t3);color:var(--deep);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--orange);
  outline-offset:-1px;border-color:var(--orange)}
.field textarea{min-height:132px;resize:vertical}
.field .hint{font-size:var(--t2);color:var(--tech)}

/* inner-page responsive */
@media(max-width:1040px){
  .pagehero .inner{grid-template-columns:1fr;gap:var(--s7);padding-bottom:44px}
  .pagehero .shot{min-height:230px;order:-1}
  .pagehero .shot img{max-height:230px}
  .factstrip .wrap{grid-template-columns:1fr 1fr}
  .factstrip div:nth-child(2){border-right:0}
  .factstrip div:nth-child(-n+2){border-bottom:1px solid rgba(217,230,232,.18)}
  .artgrid{grid-template-columns:1fr;gap:var(--s7)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards.c3{grid-template-columns:repeat(2,1fr)}
  .post{grid-template-columns:100px 1fr}
  .post .go{display:none}
}
@media(max-width:640px){
  .pagehero > .wrap{padding-top:var(--s5)}
  .factstrip .wrap{grid-template-columns:1fr}
  .factstrip div{border-right:0;padding-left:0!important}
  .cards,.cards.c3,.cards.c2{grid-template-columns:1fr}
  .formgrid{grid-template-columns:1fr}
  .post{grid-template-columns:1fr;gap:var(--s2)}
  .sect{padding:var(--s9) 0}
  .endband{padding:var(--s10) 0}
  .kv th{width:44%;padding:var(--s3) var(--s3)}
  .kv td{padding:var(--s3) var(--s3)}
}

/* current page in the masthead */
.nl a.cur{color:var(--white);border-bottom-color:var(--orange)}

/* links that sit inside body copy or tables need to look like links */
table.spec td.nm a,.kv td a,.prose p a,.disclaimer a{
  color:var(--steel);border-bottom:1px solid var(--orange);padding-bottom:1px}
table.spec td.nm a:hover,.kv td a:hover,.prose p a:hover,.disclaimer a:hover{color:var(--orange-ink)}
table.spec td.th a{display:block}

/* keyboard users get a way past the masthead */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--orange);color:var(--white);
  padding:var(--s3) var(--s4);font-family:'Roboto Mono',monospace;font-size:var(--t2);letter-spacing:.08em;
  text-transform:uppercase}
.skip:focus{left:0}

/* ============================================================
   PRODUCT DETAIL — gallery, inline enquiry, per-product FAQ
   ============================================================ */
.gallery{position:relative}
.gallery .main{background:var(--icy);border:1px solid rgba(255,255,255,.35);
  display:grid;place-items:center;padding:var(--s7);aspect-ratio:4/3;overflow:hidden}
.gallery .main img{max-height:100%;max-width:100%;width:auto;object-fit:contain;
  transition:opacity .22s ease}
.gallery .main.fading img{opacity:0}
.gallery .cap{position:absolute;left:0;top:0;background:var(--deep);color:var(--white);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;padding:var(--s1) var(--s3)}
.gallery .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s2)}
.gallery .thumbs button{background:var(--icy);border:1px solid rgba(255,255,255,.3);
  padding:var(--s2);cursor:pointer;display:grid;place-items:center;aspect-ratio:1;transition:.15s}
.gallery .thumbs button img{max-height:100%;max-width:100%;width:auto;object-fit:contain}
.gallery .thumbs button:hover{border-color:var(--orange)}
.gallery .thumbs button[aria-current="true"]{border-color:var(--orange);
  box-shadow:inset 0 0 0 2px var(--orange)}

/* inline enquiry on a product page */
.enquire{border:1px solid var(--fiber);background:var(--white)}
.enquire .top{background:var(--deep);color:var(--white);padding:var(--s3) var(--s5);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.enquire .top b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t4);letter-spacing:-.02em}
.enquire .top span{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--orange-ink)}
.enquire .bd{padding:var(--s5)}
.enquire .about{display:flex;gap:var(--s3);align-items:center;border:1px solid var(--fiber);
  background:var(--cold);padding:var(--s3) var(--s3);margin-bottom:var(--s4)}
.enquire .about img{height:46px;width:auto;object-fit:contain;flex:none}
.enquire .about b{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;
  font-size:var(--t3);letter-spacing:-.02em}
.enquire .about small{display:block;font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.08em;text-transform:uppercase;color:var(--tech);margin-top:3px}
.enquire .note{font-size:var(--t2);color:var(--tech);margin:var(--s3) 0 0}

/* per-product questions */
.pfaq details{border-bottom:1px solid var(--fiber);background:var(--white);
  border-left:1px solid var(--fiber);border-right:1px solid var(--fiber)}
.pfaq details:first-of-type{border-top:1px solid var(--fiber)}
.pfaq summary{cursor:pointer;list-style:none;padding:var(--s4) var(--s5);font-family:'Inter Tight',sans-serif;
  font-weight:600;font-size:var(--t4);letter-spacing:-.025em;display:flex;gap:var(--s3);align-items:center}
.pfaq summary::-webkit-details-marker{display:none}
.pfaq summary::after{content:"+";margin-left:auto;color:var(--orange-ink);
  font-family:'Roboto Mono',monospace;font-size:var(--t4)}
.pfaq details[open]{background:var(--cold)}
.pfaq details[open] summary::after{content:"−"}
.pfaq p{margin:0 var(--s5) var(--s4);color:var(--tech);font-size:var(--t3);max-width:var(--measure-body)}

@media(max-width:1040px){
  .gallery .thumbs{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:640px){
  .gallery .main{aspect-ratio:3/2;padding:var(--s5)}
  .enquire .bd{padding:var(--s4)}
}

/* legal links in the footer bottom bar */
.fbot .flegal a{color:#9FB4C2}
.fbot .flegal a:hover{color:var(--orange)}

/* ============================================================
   MODULES THAT EXIST ONLY ON INNER PAGES
   ============================================================ */

/* honest limits — the block that stops 22 detail pages reading the same */
.caveat{border:1px solid var(--fiber);border-left:3px solid var(--orange);
  background:var(--white);padding:var(--s5) var(--s6);margin-top:var(--gut)}
.caveat .k{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-ink);display:block;margin-bottom:var(--s2)}
.caveat h3{font-size:var(--t5);margin-bottom:var(--s2)}
.caveat p{margin:0;font-size:var(--t3);color:var(--steel);max-width:var(--measure-body)}
.caveat .who{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--fiber);
  font-size:var(--t3);color:var(--tech)}
.caveat .who b{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--deep);font-weight:400;margin-right:var(--s2)}

/* capacity board — factory page only */
.capboard{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--fiber);border:1px solid var(--fiber)}
.capcell{background:var(--white);padding:var(--s5)}
.capcell .p{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--tech)}
.capcell b{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:28px;
  letter-spacing:-.035em;margin:var(--s2) 0 var(--s1)}
.capcell small{display:block;font-size:var(--t2);color:var(--tech);line-height:1.5}
/* .bar is a <span>; without display:block an inline element ignores height and the
   fill inside it grows to whatever it likes */
.capcell .bar{display:block;height:4px;background:var(--fiber);margin-top:var(--s3);
  overflow:hidden;border-radius:0}
.capcell .bar i{display:block;height:100%;background:var(--orange)}

/* checkpoint table — where a fault is caught */
.checks{width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--fiber);font-size:var(--t3)}
.checks caption{text-align:left;background:var(--deep);color:var(--white);padding:var(--s3) var(--s4);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase}
.checks th{text-align:left;padding:var(--s3) var(--s4);font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tech);font-weight:400;background:var(--cold)}
.checks td{padding:var(--s3) var(--s4);border-top:1px solid var(--fiber);vertical-align:top}
.checks td.stage{font-family:'Roboto Mono',monospace;font-size:var(--t2);color:var(--steel);white-space:nowrap}
.checks td.f{font-family:'Inter Tight',sans-serif;font-weight:600;letter-spacing:-.02em}
.checks tbody tr:hover{background:var(--cold)}

/* decision path — replacement refills page only */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
.path{border:1px solid var(--fiber);background:var(--white);display:flex;flex-direction:column}
.path .hd{background:var(--icy);padding:var(--s4) var(--s5);border-bottom:1px solid var(--fiber)}
.path .hd .q{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--tech);display:block;margin-bottom:var(--s1)}
.path .hd b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t5);letter-spacing:-.025em}
.path .bd{padding:var(--s5);flex:1;display:flex;flex-direction:column;gap:var(--s3)}
.path ol{margin:0;padding-left:var(--s4);font-size:var(--t3);color:var(--tech);display:grid;gap:var(--s2)}
.path .out{margin-top:auto;border-top:1px solid var(--fiber);padding-top:var(--s3);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.07em;color:var(--orange-ink)}

/* certificate register */
.register{width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--fiber);font-size:var(--t3);min-width:820px}
.register caption{text-align:left;background:var(--deep);color:var(--white);padding:var(--s3) var(--s4);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase}
.register th{text-align:left;padding:var(--s3) var(--s4);background:var(--cold);color:var(--tech);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;font-weight:400}
.register td{padding:var(--s3) var(--s4);border-top:1px solid var(--fiber);vertical-align:top}
.register td.std{font-family:'Inter Tight',sans-serif;font-weight:600;letter-spacing:-.02em}
.register td.num{font-family:'Roboto Mono',monospace;font-size:var(--t2);color:var(--tech)}
.register tbody tr:hover{background:var(--cold)}
.register .pending{color:var(--orange-ink);font-family:'Roboto Mono',monospace;font-size:var(--t1)}

@media(max-width:1040px){
  .capboard{grid-template-columns:1fr 1fr}
  .paths{grid-template-columns:1fr}
}
@media(max-width:640px){
  .capboard{grid-template-columns:1fr}
  .caveat{padding:var(--s4) var(--s4)}
}

/* footer column headings are h3 for a clean outline, styled as before */
footer h3.fh{color:var(--white);font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.13em;text-transform:uppercase;margin:0 0 var(--s3);font-weight:400}
/* subheads inside long-form prose sit at h2 but read as h3 */
.prose h2.sub{font-size:var(--t5);margin:28px 0 var(--s2);letter-spacing:-.03em}

/* ============================================================
   MASTHEAD — flat, seven items
   ============================================================ */
.navitem{position:relative;display:flex;align-items:center}
.navtop{display:inline-flex;align-items:center;gap:var(--s2);background:transparent;border:0;
  cursor:pointer;padding:var(--s1) 0;color:#CBD9E2;font-family:'Inter Tight',sans-serif;
  font-size:var(--t3);font-weight:500;letter-spacing:-.012em;border-bottom:1px solid transparent}
.navtop:hover{color:var(--white)}
.navtop.cur{color:var(--white);border-bottom-color:var(--orange)}
@media(max-width:1160px){.nl{gap:var(--s5)}}

/* any wide data table needs a scroll container on a phone */
.tblwrap table.checks{min-width:640px}

/* ============================================================
   ICONOGRAPHY on modules that were text only
   ============================================================ */
.ic{width:26px;height:26px;stroke:var(--steel);fill:none;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* capacity board */
.capcell .top{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s1)}
.capcell:hover .ic{stroke:var(--orange)}

/* checkpoint table gets a stage mark */
.checks td.stage{display:flex;align-items:center;gap:var(--s2)}
.checks td.stage .ic{width:20px;height:20px}

/* ordering terms cards */
.termcard .top{display:flex;align-items:center;gap:var(--s3)}
.termcard .top .ic{width:20px;height:20px;stroke:var(--orange)}

/* download cards */
.doccard .ph{background:var(--icy);height:120px;display:grid;place-items:center;position:relative}
.doccard .ph .ic{width:44px;height:44px;stroke:var(--steel)}
.doccard:hover .ph{background:var(--cold)}
.doccard:hover .ph .ic{stroke:var(--orange)}
.doccard .ph .fmt{position:absolute;top:0;right:0;background:var(--deep);color:var(--white);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;padding:var(--s1) var(--s2)}

/* certification cards get a seal mark */
.cert .top{display:flex;align-items:center;gap:var(--s3);margin-bottom:2px}
.cert .top .ic{width:22px;height:22px;stroke:var(--orange)}

/* a product strip — what actually comes off the line */
.linestrip{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;
  background:var(--fiber);border:1px solid var(--fiber);margin-top:var(--gut)}
.linestrip figure{margin:0;background:var(--white);padding:var(--s4) var(--s3) var(--s4);text-align:center;transition:.16s}
.linestrip figure:hover{background:var(--icy)}
.linestrip img{height:84px;width:auto;object-fit:contain;margin:0 auto var(--s2)}
.linestrip figcaption{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.06em;
  text-transform:uppercase;color:var(--tech);line-height:1.4}

/* inline figure inside an article */
.artfig{margin:var(--s6) 0;border:1px solid var(--fiber);background:var(--white)}
.artfig .im{background:var(--icy);display:grid;grid-auto-flow:column;place-items:center;
  gap:var(--s6);padding:var(--s6)}
.artfig .im img{max-height:130px;width:auto;object-fit:contain}
.artfig figcaption{padding:var(--s3) var(--s4);border-top:1px solid var(--fiber);
  font-size:var(--t2);color:var(--tech)}
.artfig figcaption b{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--deep);font-weight:400;margin-right:var(--s2)}

@media(max-width:1040px){.linestrip{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){
  .linestrip{grid-template-columns:1fr 1fr}
  .artfig .im{grid-auto-flow:row;gap:var(--s4)}
  .checks td.stage{white-space:normal}
}

/* ---- blog list gets a thumbnail ---- */
.post{grid-template-columns:104px 130px 1fr auto}
.post .thumb{background:var(--icy);height:86px;display:grid;place-items:center;padding:var(--s2);
  border:1px solid var(--fiber)}
.post:hover .thumb{background:var(--white)}
.post .thumb img{max-height:66px;width:auto;object-fit:contain}

/* ---- certification seals ---- */
.seals{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--fiber);
  border:1px solid var(--fiber);margin-bottom:var(--gut)}
.seal{background:var(--white);padding:var(--s5);display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--s2);transition:.15s}
.seal:hover{background:var(--icy)}
.seal .ic{width:28px;height:28px;stroke:var(--orange)}
.seal b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t4);letter-spacing:-.025em}
.seal span{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tech)}

/* ---- FAQ group headings carry a mark ---- */
.secthead .gmark{width:22px;height:22px;stroke:var(--orange);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;flex:none;margin-right:2px}
.secthead{align-items:center}

/* ---- contact: what happens next ---- */
.nextsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fiber);
  border:1px solid var(--fiber);margin-top:var(--gut)}
.nextsteps div{background:var(--white);padding:var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.nextsteps .ic{width:24px;height:24px;stroke:var(--orange)}
.nextsteps b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t4);letter-spacing:-.025em}
.nextsteps small{font-size:var(--t3);color:var(--tech);line-height:1.55}
.nextsteps .t{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--tech);margin-top:auto;padding-top:var(--s2);
  border-top:1px solid var(--fiber)}

/* ---- kv table rows can carry a mark ---- */
.kv th .ic{width:16px;height:16px;vertical-align:-3px;margin-right:var(--s2);stroke:var(--tech)}

/* ---- sitemap groups get a mark ---- */
.sitegroup .secthead h2{display:flex;align-items:center;gap:var(--s2)}

@media(max-width:1040px){
  .seals{grid-template-columns:repeat(2,1fr)}
  .nextsteps{grid-template-columns:1fr}
  .post{grid-template-columns:96px 110px 1fr}
}
@media(max-width:640px){
  .seals{grid-template-columns:1fr}
  .post{grid-template-columns:1fr;gap:var(--s3)}
  .post .thumb{height:120px}
}

/* cost table: the item cell carries a mark */
.checks td.f{display:flex;align-items:center;gap:var(--s2)}
.checks td.f .ic{width:19px;height:19px;stroke:var(--steel);flex:none}
.checks tbody tr:hover td.f .ic{stroke:var(--orange)}
@media(max-width:640px){.checks td.f{align-items:flex-start}}

/* ---- legal pages: a clause index so a wall of text is navigable ---- */
.legalgrid{display:grid;grid-template-columns:236px 1fr;gap:var(--s8);align-items:start}
.clauses{position:sticky;top:24px;border:1px solid var(--fiber);background:var(--white)}
.clauses .hd{background:var(--deep);color:var(--white);padding:var(--s3) var(--s4);display:flex;
  align-items:center;gap:var(--s2);font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.12em;text-transform:uppercase}
.clauses .hd .ic{width:16px;height:16px;stroke:var(--orange)}
.clauses ol{list-style:none;margin:0;padding:var(--s1) 0;counter-reset:cl}
.clauses li{counter-increment:cl}
.clauses a{display:flex;gap:var(--s2);padding:var(--s2) var(--s4);font-size:var(--t3);color:var(--steel);
  border-bottom:1px solid var(--fiber)}
.clauses li:last-child a{border-bottom:0}
.clauses a::before{content:counter(cl,decimal-leading-zero);font-family:'Roboto Mono',monospace;
  font-size:var(--t1);color:var(--tech);padding-top:2px}
.clauses a:hover{background:var(--icy);color:var(--deep)}
.clauses a:hover::before{color:var(--orange)}
.legalbody h2.sub{scroll-margin-top:var(--s6);padding-top:var(--s1)}
.legalbody h2.sub::before{content:"";display:block;width:26px;height:2px;
  background:var(--orange);margin-bottom:var(--s3)}
@media(max-width:1040px){
  .legalgrid{grid-template-columns:1fr;gap:var(--s6)}
  .clauses{position:static}
}

/* ============================================================
   CATALOGUE HERO — no photograph
   Company and story pages keep the photographic band. Catalogue pages
   (products, materials, refills) get a flat technical ground instead:
   the product cut-out reads cleanly on it, it loads nothing extra, and
   it stops 32 of 43 pages opening on the same factory photograph.
   ============================================================ */
.pagehero.flat{background:var(--deep);position:relative;isolation:isolate}
.pagehero.flat::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(217,230,232,.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(217,230,232,.075) 1px, transparent 1px);
  background-size:52px 52px}
.pagehero.flat::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 18%, rgba(96,113,127,.42) 0%, rgba(23,48,71,0) 62%)}
.pagehero.flat > *{position:relative;z-index:2}
.pagehero.flat > .credit{position:absolute;right:14px;bottom:12px;top:auto;left:auto;z-index:3}
.pagehero.flat .shot::before{content:"";position:absolute;inset:8% 6%;z-index:-1;
  background:radial-gradient(closest-side, rgba(217,230,232,.16), rgba(217,230,232,0) 72%)}
.pagehero.flat .factstrip{background:rgba(0,0,0,.16);backdrop-filter:none;
  border-top:1px solid rgba(217,230,232,.2)}
/* a thin measure rule, so the flat ground still reads as a technical document */
.pagehero.flat .inner{position:relative}
.pagehero.flat .inner::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(to right, var(--orange) 0 46px, rgba(217,230,232,.22) 46px)}
.pagehero.flat .kick{margin-top:var(--s7)}
@media(max-width:640px){.pagehero.flat::before{background-size:38px 38px}}

/* ============================================================
   The handful of repeated one-off styles, promoted out of inline
   attributes so the scale stays editable in one place.
   ============================================================ */
.prose .aside{font-size:var(--t3);color:var(--tech)}
.prose .lead-out{margin-bottom:var(--s6)}
.card .bd.pad-lg{padding:var(--s6) var(--s6)}
.card .bd .row.tight{border-top:0;padding-top:0;padding-bottom:var(--s2)}
.card .bd .row.tight-sm{border-top:0;padding-top:0;padding-bottom:var(--s1)}
.secthead.spaced{margin-top:var(--s8)}
.sitegroup .secthead h2{font-size:var(--t5)}
.sitegroup ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--s2);font-size:var(--t3)}
.blkhead + .hbtns,.disclaimer + .hbtns{margin-top:var(--s6)}
.hbtns.after-block{margin-top:var(--s6)}

.card h3.sm{font-size:var(--t4)}
.card h3.xs{font-size:var(--t5)}
.pagehero .inner.single{grid-template-columns:1fr}
.thumbsmall{max-height:46px}
.thumbtiny{max-height:26px}

/* last of the one-offs */
.cards.top{align-items:start}
.secthead.tight{margin-bottom:var(--s4)}
.enquire button[type="submit"]{border:0;cursor:pointer}

.brandmark{max-height:44px}
.card p.sm{font-size:var(--t3)}
.card .bd.flush{border-top:0}
.prose.measure{max-width:var(--measure-read)}

/* a note explaining why there are no model codes */
.nocode{border:1px solid var(--fiber);border-left:3px solid var(--steel);background:var(--white);
  padding:var(--s4) var(--s5);margin-top:var(--s3);font-size:var(--t3);color:var(--steel);max-width:var(--measure-body)}
.nocode b{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--deep);font-weight:400;display:block;margin-bottom:var(--s2)}

/* ============================================================
   PRODUCT HUB — the level above the three lines
   ============================================================ */
.lineblock{border:1px solid var(--fiber);background:var(--white);margin-bottom:var(--gut)}
.lineblock .hd{display:flex;align-items:center;gap:var(--s4);padding:var(--s5) var(--s6);
  border-bottom:1px solid var(--fiber);background:var(--cold);flex-wrap:wrap}
.lineblock .hd .ic{width:30px;height:30px;stroke:var(--orange)}
.lineblock .hd h3{font-size:var(--t6);letter-spacing:-.032em}
.lineblock .hd p{margin:var(--s1) 0 0;font-size:var(--t3);color:var(--tech);max-width:var(--measure-body)}
.lineblock .hd .cnt{margin-left:auto;font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.09em;text-transform:uppercase;color:var(--steel);white-space:nowrap}
.lineblock .fams{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--fiber)}
.fam{background:var(--white);padding:var(--s4) var(--s4) var(--s4);display:flex;flex-direction:column;
  gap:var(--s2);transition:.15s}
.fam:hover{background:var(--icy)}
.fam .im{height:74px;display:grid;place-items:center}
.fam .im img{max-height:70px;width:auto;object-fit:contain}
.fam b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t3);letter-spacing:-.025em}
.fam span{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.07em;
  text-transform:uppercase;color:var(--tech)}
.fam:hover span{color:var(--orange-ink)}
.lineblock .foot{padding:var(--s3) var(--s6);border-top:1px solid var(--fiber);display:flex;
  justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.lineblock .foot .go{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--orange-ink)}

/* full index with a filter */
.filterbar{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;margin-bottom:var(--s4)}
.filterbar input{flex:1;min-width:220px;border:1px solid var(--fiber);background:var(--white);
  padding:var(--s3) var(--s3);font-family:'Inter',sans-serif;font-size:var(--t3);color:var(--deep)}
.filterbar input:focus{outline:2px solid var(--orange);outline-offset:-1px}
.filterbar button{border:1px solid var(--fiber);background:var(--white);cursor:pointer;
  padding:var(--s3) var(--s4);font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--steel);transition:.14s}
.filterbar button:hover{border-color:var(--steel)}
.filterbar button[aria-pressed="true"]{background:var(--deep);border-color:var(--deep);color:var(--white)}
.filtercount{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--tech);margin-bottom:var(--s3)}
.plist{border:1px solid var(--fiber);background:var(--fiber);display:grid;gap:1px}
.pitem{background:var(--white);display:grid;grid-template-columns:62px 1.5fr 1fr 1fr auto;
  gap:var(--s4);align-items:center;padding:var(--s3) var(--s4);transition:.14s}
.pitem:hover{background:var(--icy)}
.pitem .im{height:44px;display:grid;place-items:center}
.pitem .im img{max-height:42px;width:auto;object-fit:contain}
.pitem b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t3);letter-spacing:-.024em}
.pitem .fam{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.06em;
  color:var(--tech);background:none;padding:0;display:block}
.pitem .at{font-size:var(--t3);color:var(--tech)}
.pitem .go{font-family:'Roboto Mono',monospace;font-size:var(--t1);color:var(--orange-ink);white-space:nowrap}
.pitem[hidden]{display:none}
.noresult{padding:var(--s7) var(--s4);text-align:center;color:var(--tech);font-size:var(--t3);background:var(--white)}

@media(max-width:1040px){
  .lineblock .fams{grid-template-columns:repeat(2,1fr)}
  .pitem{grid-template-columns:52px 1fr 1fr;gap:var(--s3)}
  .pitem .at,.pitem .go{display:none}
}
@media(max-width:640px){
  .lineblock .fams{grid-template-columns:1fr 1fr}
  .lineblock .hd{padding:var(--s4) var(--s4)}
  .pitem{grid-template-columns:46px 1fr;padding:var(--s3) var(--s3)}
}

/* ============================================================
   PRODUCT DETAIL — deeper layout
   ============================================================ */
.skuline{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:var(--s7) 0 var(--s3)}
.skuline .sku{border:1px solid var(--orange-lit);color:var(--orange-lit);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;padding:var(--s1) var(--s2)}
.skuline .cat{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:#9FB7C6}
.featline{color:#BDCFDA;font-size:var(--t4);margin:var(--s3) 0 var(--s5);max-width:52ch}
.featline b{color:var(--white);font-weight:500}

/* four-cell attribute grid under the hero */
.attrgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(217,230,232,.22);border:1px solid rgba(217,230,232,.22);margin-bottom:var(--s5)}
.attrgrid div{background:rgba(23,48,71,.55);padding:var(--s3) var(--s4)}
.attrgrid dt{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:#8FA6B6;margin-bottom:var(--s1)}
.attrgrid dd{margin:0;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t3);
  letter-spacing:-.02em;color:var(--white)}

/* option chip rows */
.optrow{margin-bottom:var(--s3)}
.optrow .k{display:block;font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-ink);margin-bottom:var(--s2)}
.optrow .vals{display:flex;gap:var(--s2);flex-wrap:wrap}
.optrow .vals span{border:1px solid rgba(217,230,232,.38);color:var(--icy);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.04em;padding:var(--s1) var(--s2)}

/* tiered pricing */
.tiers{width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--fiber);font-size:var(--t3)}
.tiers caption{text-align:left;background:var(--deep);color:var(--white);padding:var(--s3) var(--s4);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase}
.tiers th{text-align:left;padding:var(--s3) var(--s4);background:var(--cold);color:var(--tech);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;font-weight:400}
.tiers td{padding:var(--s4) var(--s4);border-top:1px solid var(--fiber)}
.tiers td.q{font-family:'Roboto Mono',monospace;font-size:var(--t2);color:var(--steel);white-space:nowrap}
.tiers td.pz{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:19px;letter-spacing:-.03em}
.tiers td.sv{font-family:'Roboto Mono',monospace;font-size:var(--t2);color:var(--orange-ink)}
.tiers tbody tr:hover{background:var(--cold)}
.tiers .ask{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--orange-ink);white-space:nowrap}

/* tabbed detail sections */
.tabs{border-bottom:2px solid var(--deep);display:flex;gap:0;flex-wrap:wrap;margin-bottom:var(--s6)}
.tabs button{background:transparent;border:0;border-bottom:3px solid transparent;
  margin-bottom:-2px;cursor:pointer;padding:var(--s3) var(--s5);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--tech);transition:.14s}
.tabs button:hover{color:var(--deep)}
.tabs button[aria-selected="true"]{color:var(--deep);border-bottom-color:var(--orange)}
.tabpanel[hidden]{display:none}
.tabpanel h3{font-size:var(--t5);margin:0 0 var(--s3)}
.tabpanel h3 + p{margin-top:0}
.tabpanel .kv{margin:var(--s5) 0}
.tabpanel ul{margin:0 0 var(--s4);padding-left:var(--s5);color:var(--steel);font-size:var(--t3)}
.tabpanel li{margin-bottom:var(--s2)}
.tabpanel li b{color:var(--deep)}

@media(max-width:1040px){.attrgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .attrgrid{grid-template-columns:1fr}
  .tabs button{padding:var(--s3) var(--s3);font-size:var(--t1)}
  .tiers td.pz{font-size:17px}
}

/* five-column footer now that services have their own column */
footer .grid{grid-template-columns:repeat(15,1fr)}
footer .fc1{grid-column:1/5}
footer .fc2{grid-column:5/8}
footer .fc3{grid-column:8/11}
footer .fc4{grid-column:11/13}
footer .fc5{grid-column:13/16}
@media(max-width:1040px){
  footer .fc1{grid-column:1/16}
  footer .fc2{grid-column:1/6}
  footer .fc3{grid-column:6/11}
  footer .fc4{grid-column:11/16}
  footer .fc5{grid-column:1/6}
}
@media(max-width:640px){
  footer .fc1,footer .fc2,footer .fc3,footer .fc4,footer .fc5{grid-column:1/16}
}

/* stat row on the index */
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--fiber);
  border:1px solid var(--fiber);margin-bottom:var(--s5)}
.statrow div{background:var(--white);padding:var(--s5) var(--s5) var(--s5)}
.statrow b{display:block;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:33px;
  letter-spacing:-.045em;line-height:1}
.statrow span{display:block;font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-ink);margin:var(--s2) 0 var(--s1)}
.statrow small{display:block;font-size:var(--t2);color:var(--tech);line-height:1.5}
.filterbar .fk{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--tech)}
.filterbar button.qf{padding:var(--s2) var(--s3)}
@media(max-width:1040px){.statrow{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.statrow{grid-template-columns:1fr}}

/* ============================================================
   MEDIA HERO — a photograph or a video behind the type.
   Replaces the flat navy ground on catalogue pages.
   ============================================================ */
.pagehero.media{position:relative;isolation:isolate;background:var(--deep);overflow:hidden}
.pagehero.media > *{position:relative;z-index:3}
/* the masthead sits inside the hero, so its stacking context has to out-rank the
   content band beneath it or the dropdown is trapped below the hero media */
.pagehero.media > .meta{z-index:41}
.pagehero.media > nav.mast{z-index:40}
/* the credit must stay out of flow — the rule above would otherwise turn it into a
   block element sitting above the masthead and pushing the whole header down */
.pagehero.media > .credit{position:absolute;bottom:10px;right:var(--pad);top:auto;left:auto;
  z-index:4}
.pagehero.media .bgmedia{position:absolute;inset:0;z-index:0;overflow:hidden}
.pagehero.media .bgmedia img,.pagehero.media .bgmedia video{
  width:100%;height:100%;object-fit:cover;display:block}
/* scrim: dark enough on the left third for headline type, open on the right */
.pagehero.media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, rgba(14,30,45,.95) 0%, rgba(14,30,45,.90) 38%,
    rgba(16,34,50,.80) 60%, rgba(16,34,50,.62) 100%)}
.pagehero.media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(217,230,232,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(217,230,232,.055) 1px, transparent 1px);
  background-size:52px 52px}
.pagehero.media .inner::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(to right, var(--orange) 0 46px, rgba(217,230,232,.22) 46px)}
.pagehero.media .inner{position:relative}
.pagehero.media .kick{margin-top:var(--s7)}
.pagehero.media .factstrip{background:rgba(9,22,34,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-top:1px solid rgba(217,230,232,.22)}

/* a statement hero with no right-hand column */
.pagehero.media .inner.single{grid-template-columns:1fr;max-width:none}
.pagehero.media .inner.single h1{max-width:16ch}
.pagehero.media .inner.single .lede{max-width:56ch;font-size:var(--t5)}
.pagehero.media .inner.single{padding:var(--block-loose) 0}

/* right-hand media panel — the production shot on a family page */
/* the caption bar carries small orange text, so the plate has to be dark enough
   to clear 4.5:1 against it — .35 left it at 4.47 */
.linepanel{position:relative;border:1px solid rgba(217,230,232,.34);
  background:rgba(9,22,34,.55);overflow:hidden}
.linepanel .fr{aspect-ratio:4/3;overflow:hidden}
.linepanel img{width:100%;height:100%;object-fit:cover;display:block}
.linepanel figcaption{padding:var(--s3) var(--s4);border-top:1px solid rgba(217,230,232,.28);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--icy);display:flex;justify-content:space-between;gap:var(--s3)}
.linepanel figcaption b{color:var(--orange-lit);font-weight:400}

/* gallery sitting on a photographic ground needs its own plate */
.pagehero.media .gallery .main{background:rgba(244,246,247,.94);
  border:1px solid rgba(255,255,255,.5)}
.pagehero.media .gallery .thumbs button{background:rgba(244,246,247,.88);
  border-color:rgba(255,255,255,.42)}

/* the product hero carries a lot of type; on a photograph the left column gets
   its own soft plate so the attribute grid and the option chips stay readable */
.pagehero.media .inner > div:first-child{position:relative}
.pagehero.media .inner > div:first-child::before{content:"";position:absolute;
  inset:-26px -30px -26px -30px;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg, rgba(11,26,40,.72) 0%, rgba(11,26,40,.58) 62%,
    rgba(11,26,40,0) 100%)}
.pagehero.media .inner.single > div:first-child::before{display:none}
.pagehero.media .attrgrid{background:rgba(217,230,232,.26);border-color:rgba(217,230,232,.26)}
.pagehero.media .attrgrid div{background:rgba(11,26,40,.62)}
.pagehero.media .optrow .vals span{background:rgba(11,26,40,.45)}

/* ---- configuration band (kept for reference, no page uses it) ---- */
.configband{background:var(--white);border-bottom:1px solid var(--fiber)}
.configband .wrap{padding-top:var(--s7);padding-bottom:var(--s7)}
.configgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:start}
.configgrid .attrgrid{background:var(--fiber);border-color:var(--fiber);margin-bottom:0}
.configgrid .attrgrid div{background:var(--cold)}
.configgrid .attrgrid dt{color:var(--tech)}
.configgrid .attrgrid dd{color:var(--deep)}
.configgrid .optrow .k{color:var(--tech)}
.configgrid .optrow .vals span{border-color:var(--fiber);color:var(--steel);background:var(--white)}
.configgrid .optrow .vals span:hover{border-color:var(--orange);color:var(--orange-ink)}
.confighead{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s4)}
.confighead h2{font-size:var(--t5);letter-spacing:-.03em}
.confighead .r{margin-left:auto;font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.1em;text-transform:uppercase;color:var(--tech)}

@media(max-width:1040px){
  .pagehero.media::before{background:linear-gradient(180deg, rgba(16,34,50,.9) 0%,
    rgba(16,34,50,.8) 45%, rgba(16,34,50,.93) 100%)}
  .configgrid{grid-template-columns:1fr;gap:var(--s6)}
  .pagehero.media .inner.single{padding:52px 0 58px}
}
@media(max-width:640px){
  .pagehero.media::after{background-size:38px 38px}
  .linepanel .fr{aspect-ratio:3/2}
}

/* a production gallery sitting on the hero photograph */
.gallery.onphoto .main{background:rgba(9,22,34,.5);border:1px solid rgba(217,230,232,.34);
  padding:0;aspect-ratio:16/10}
.gallery.onphoto .main img{width:100%;height:100%;max-height:none;object-fit:cover}
.gallery.onphoto .thumbs button{background:rgba(9,22,34,.4);border-color:rgba(217,230,232,.28);
  padding:0;aspect-ratio:4/3;overflow:hidden}
.gallery.onphoto .thumbs button img{width:100%;height:100%;max-height:none;object-fit:cover}
.gallery.onphoto .thumbs button[aria-current="true"]{border-color:var(--orange);
  box-shadow:inset 0 0 0 2px var(--orange)}

/* ============================================================
   A · PRODUCT DETAIL — spec-sheet chassis
   A buyer on a product page is looking something up, not reading.
   Specification is visible without a click; the quote card follows.
   ============================================================ */
.prodgrid{display:grid;grid-template-columns:1fr 318px;gap:var(--s8);align-items:start}
.prodmain > .sect{padding:var(--block-tight) 0;border-bottom:1px solid var(--fiber)}
.prodmain > .sect:first-child{padding-top:var(--s8)}
.prodmain > .sect:last-child{border-bottom:0}
.prodmain > .sect.white{background:transparent}

.quoterail{position:sticky;top:24px;border:1px solid var(--fiber);background:var(--white);
  box-shadow:var(--lift2)}
.quoterail .top{background:var(--deep);color:var(--white);padding:var(--s4) var(--s5);
  display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.quoterail .top b{font-family:'Roboto Mono',monospace;font-size:var(--t2);letter-spacing:.11em;
  text-transform:uppercase;font-weight:400}
.quoterail .top span{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--orange-lit)}
.quoterail .price{padding:var(--s4) var(--s4) var(--s3);border-bottom:1px solid var(--fiber)}
.quoterail .price .k{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.11em;
  text-transform:uppercase;color:var(--tech);display:block;margin-bottom:var(--s1)}
.quoterail .price b{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:31px;
  letter-spacing:-.045em;line-height:1;display:block}
.quoterail .price small{display:block;margin-top:var(--s1);font-size:var(--t2);color:var(--tech)}
.quoterail dl{margin:0;padding:var(--s1) var(--s4) var(--s3)}
.quoterail dl div{display:flex;justify-content:space-between;gap:var(--s3);padding:var(--s2) 0;
  border-bottom:1px solid var(--fiber)}
.quoterail dl div:last-child{border-bottom:0}
.quoterail dt{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--tech)}
.quoterail dd{margin:0;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t3);
  letter-spacing:-.02em;text-align:right}
.quoterail .act{padding:0 var(--s4) var(--s4);display:grid;gap:var(--s2)}
.quoterail .act .btn{width:100%;justify-content:center;text-align:center}
.quoterail .note{padding:0 var(--s4) var(--s4);font-size:var(--t2);color:var(--tech);line-height:1.5}

/* the spec sheet, open by default */
.specsheet{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:start}

/* ---- quote modal ---------------------------------------------------------
   Header and action bar are fixed; only the field area scrolls, so the
   product being quoted and the send button never leave the frame. -------- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--s6)}
.modal .veil{position:absolute;inset:0;background:rgba(9,20,32,.76);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:mfade .18s ease}
.modal .box{position:relative;background:var(--white);width:min(660px,100%);
  max-height:min(86vh,760px);display:flex;flex-direction:column;
  border:1px solid rgba(23,48,71,.18);
  box-shadow:var(--lift3);
  animation:mrise .22s cubic-bezier(.2,.7,.3,1)}
@keyframes mfade{from{opacity:0}to{opacity:1}}
@keyframes mrise{from{opacity:0;transform:translateY(14px) scale(.985)}
                 to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .modal .veil,.modal .box{animation:none}
}

.modal .hd{flex:none;background:var(--deep);color:var(--white);padding:var(--s4) var(--s5);
  display:flex;align-items:center;gap:var(--s3);
  border-bottom:2px solid var(--orange)}
.modal .hd b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t4);
  letter-spacing:-.028em}
.modal .hd .sub{display:block;font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.11em;text-transform:uppercase;color:#93AABB;margin-top:3px}
.modal .hd .x{margin-left:auto;background:transparent;border:1px solid rgba(217,230,232,.34);
  color:var(--white);cursor:pointer;width:34px;height:34px;font-size:var(--t5);line-height:1;
  display:grid;place-items:center;flex:none;transition:.14s}
.modal .hd .x:hover{border-color:var(--orange);background:var(--orange)}
.modal .hd .x:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.modal .bd{padding:var(--s5);overflow-y:auto;overscroll-behavior:contain;flex:1 1 auto;
  scrollbar-width:thin;scrollbar-color:var(--fiber) transparent}
.modal .bd::-webkit-scrollbar{width:10px}
.modal .bd::-webkit-scrollbar-track{background:var(--cold)}
.modal .bd::-webkit-scrollbar-thumb{background:var(--fiber);border:3px solid var(--cold)}
.modal .bd::-webkit-scrollbar-thumb:hover{background:var(--tech)}

.modal .about{display:flex;gap:var(--s3);align-items:center;border:1px solid var(--fiber);
  background:var(--cold);padding:var(--s3) var(--s3);margin-bottom:var(--s4)}
.modal .about .im{width:58px;height:58px;flex:none;background:var(--white);
  border:1px solid var(--fiber);display:grid;place-items:center;padding:var(--s1)}
.modal .about img{max-width:100%;max-height:100%;width:auto;object-fit:contain}
.modal .about b{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;
  font-size:var(--t4);letter-spacing:-.025em}
.modal .about small{display:block;font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.09em;text-transform:uppercase;color:var(--tech);margin-top:var(--s1)}

.modal .field label{font-size:var(--t1);letter-spacing:.12em}
.modal .field input,.modal .field select,.modal .field textarea{padding:var(--s3) var(--s3);font-size:var(--t3)}
.modal .field input:focus,.modal .field select:focus,.modal .field textarea:focus{
  outline:0;border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.modal .field textarea{min-height:104px}
.modal #q-configshow{background:var(--cold);color:var(--steel);
  font-family:'Roboto Mono',monospace;font-size:var(--t2);cursor:default}
.modal .req{color:var(--orange-ink)}

.modal .ft{flex:none;border-top:1px solid var(--fiber);background:var(--cold);
  padding:var(--s3) var(--s5);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.modal .ft .btn{flex:none}
.modal .ft p{margin:0;font-size:var(--t2);color:var(--tech);line-height:1.5;flex:1;min-width:180px}

/* the same block before the script promotes it: a plain section, no chrome */
.modal.nojs{position:static;display:block;padding:0;background:transparent;animation:none}
.modal.nojs .veil{display:none}
.modal.nojs .box{width:100%;max-width:var(--maxw);margin:0 auto;max-height:none;
  box-shadow:none;border-left:0;border-right:0;animation:none}
.modal.nojs .hd .x{display:none}
.modal.nojs .bd{overflow:visible}

/* ============================================================
   B · CONTENT — a reading chassis, not a UI chassis
   ============================================================ */
.reading{max-width:var(--measure-read);margin:0 auto}
.reading p{font-size:18.5px;line-height:1.72;color:var(--steel);margin:0 0 var(--s5);max-width:none}
.reading h2.sub{font-size:25px;letter-spacing:-.032em;margin:var(--s8) 0 var(--s3)}
.reading h2.sub::before{width:30px;height:2px;margin-bottom:var(--s3)}
.reading ul{font-size:17.5px;line-height:1.66;margin:0 0 var(--s5)}
.reading li{margin-bottom:var(--s3)}
.reading .artfig{margin:var(--s7) 0}
.reading blockquote{margin:var(--s7) 0;padding-left:var(--s5);border-left:3px solid var(--orange);
  font-family:'Inter Tight',sans-serif;font-size:21px;line-height:1.5;letter-spacing:-.02em;
  color:var(--deep)}
.readmeta{max-width:var(--measure-read);margin:0 auto var(--s7);padding-bottom:var(--s4);
  border-bottom:1px solid var(--fiber);display:flex;gap:var(--s4);flex-wrap:wrap;
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;color:var(--tech)}
.readmeta b{color:var(--orange-ink);font-weight:400}
.sect.readingsect{padding:var(--block) 0 var(--block);border-bottom:0}

/* ============================================================
   C · FAMILY — comparison first
   ============================================================ */
.viewtoggle{display:flex;gap:0;margin-left:auto;border:1px solid var(--fiber)}
.viewtoggle button{background:var(--white);border:0;cursor:pointer;padding:var(--s2) var(--s4);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.1em;
  text-transform:uppercase;color:var(--tech);transition:.14s}
.viewtoggle button + button{border-left:1px solid var(--fiber)}
.viewtoggle button[aria-pressed="true"]{background:var(--deep);color:var(--white)}
.viewpane[hidden]{display:none}
.cmp{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--fiber);
  font-size:var(--t3);min-width:720px}
.cmp caption{text-align:left;background:var(--deep);color:var(--white);padding:var(--s3) var(--s4);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;text-transform:uppercase}
.cmp th{text-align:left;padding:var(--s3) var(--s4);background:var(--cold);color:var(--tech);
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.09em;
  text-transform:uppercase;font-weight:400;vertical-align:top}
.cmp th.rowk{width:150px;white-space:nowrap}
.cmp td{padding:var(--s3) var(--s4);border-left:1px solid var(--fiber);border-top:1px solid var(--fiber);
  vertical-align:top}
.cmp thead td{background:var(--white);text-align:center;padding:var(--s4) var(--s3) var(--s3)}
.cmp thead td img{height:74px;width:auto;object-fit:contain;margin-bottom:var(--s2)}
.cmp thead td b{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;
  font-size:var(--t3);letter-spacing:-.024em;line-height:1.3}
.cmp thead td span{display:block;font-family:'Roboto Mono',monospace;font-size:var(--t1);
  color:var(--tech);margin-top:var(--s1)}
.cmp tbody tr:hover{background:var(--cold)}
.cmp td.diff{background:rgba(231,101,46,.06)}
.cmp .pz{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t3);letter-spacing:-.02em}
.cmp tfoot td{text-align:center;padding:var(--s3) var(--s3)}

@media(max-width:1160px){
  .prodgrid{grid-template-columns:1fr}
  .quoterail{position:static;margin-bottom:var(--s6)}
  .quoterail .act{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .specsheet{grid-template-columns:1fr}
  .reading p{font-size:17px}
  .modal{padding:0;place-items:end stretch}
  .modal .box{max-height:92vh;width:100%}
}
.tiers button.ask,.cmp button.ask{background:transparent;border:0;cursor:pointer;padding:0;
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--orange-ink)}
.tiers button.ask:hover,.cmp button.ask:hover{text-decoration:underline}

/* the spec-sheet chassis has no full-width bands to alternate, so the rhythm
   comes from the left column itself: tinted sections bleed to the column edge */
.prodmain > .sect.tint{background:var(--white);
  margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));
  padding-left:var(--gut);padding-right:var(--gut);
  border-top:1px solid var(--fiber)}
.prodmain > .sect.tint + .sect{padding-top:var(--block-tight)}

/* Before the script runs, the quote form is an ordinary section at the foot of the
   page. Only once JS has taken over does it become an overlay. A visitor with
   JavaScript off keeps a working form instead of an invisible one. */
.modal.nojs{position:static;display:block;padding:0;background:transparent}
.modal.nojs .veil{display:none}
.modal.nojs .box{width:100%;max-width:var(--maxw);margin:0 auto;max-height:none;
  box-shadow:none;border-left:0;border-right:0}
.modal.nojs .hd .x{display:none}

/* selectable option chips — the choice carries into the quote form */
.optrow .vals button.opt{border:1px solid rgba(217,230,232,.38);background:rgba(11,26,40,.45);
  color:var(--icy);font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.04em;
  padding:var(--s1) var(--s3);cursor:pointer;transition:.14s}
.optrow .vals button.opt:hover{border-color:var(--orange);color:var(--white)}
.optrow .vals button.opt[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);
  color:var(--white)}
.optrow .vals button.opt:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* live summary of what has been chosen */
.chosen{margin-top:var(--s4);border:1px solid rgba(217,230,232,.3);background:rgba(11,26,40,.5);
  padding:var(--s3) var(--s3);display:flex;gap:var(--s2);align-items:flex-start;flex-wrap:wrap}
.chosen .k{font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange-ink);flex:none;padding-top:2px}
.chosen .v{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t3);
  letter-spacing:-.02em;color:var(--white)}

/* ---- masthead dropdown ---------------------------------------------------
   Nine flat items does not fit, so the three product lines live under
   Products. The panel names each line and what it holds. ------------------ */
.navitem{position:relative}
/* the label navigates; the caret opens the menu. A nav item that cannot be
   clicked is a nav item that frustrates people. */
.navitem.has-menu{gap:6px}
.navcaret{background:transparent;border:0;cursor:pointer;padding:6px 2px;
  display:inline-flex;align-items:center;color:#CBD9E2}
.navcaret:hover{color:var(--white)}
.navcaret:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.navcaret i{width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
  transition:.18s;opacity:.7;display:block}
.navitem.has-menu:hover .navcaret i,.navcaret[aria-expanded="true"] i{
  transform:rotate(225deg) translate(-2px,-2px);opacity:1}
.navcaret[aria-expanded="true"]{color:var(--white)}
.navmenu{position:absolute;top:calc(100% + 10px);left:-20px;min-width:326px;z-index:60;
  background:var(--white);border:1px solid var(--fiber);padding:var(--s1);
  box-shadow:var(--lift2);
  opacity:0;visibility:hidden;transform:translateY(-7px);transition:.16s ease}
.navmenu::before{content:"";position:absolute;top:-7px;left:0;right:0;height:7px}
.navmenu::after{content:"";position:absolute;top:-4px;left:26px;width:8px;height:8px;
  background:var(--white);border-left:1px solid var(--fiber);border-top:1px solid var(--fiber);
  transform:rotate(45deg)}
.navitem:hover .navmenu,.navitem:focus-within .navmenu,
.navcaret[aria-expanded="true"] + .navmenu{opacity:1;visibility:visible;transform:translateY(0)}
.navmenu a{display:block;padding:var(--s3) var(--s3);border-bottom:1px solid var(--fiber)}
.navmenu a:last-child{border-bottom:0}
.navmenu a:hover,.navmenu a:focus-visible{background:var(--icy)}
.navmenu b{display:block;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t3);
  letter-spacing:-.025em;color:var(--deep)}
.navmenu span{display:block;margin-top:3px;font-family:'Roboto Mono',monospace;
  font-size:var(--t1);letter-spacing:.05em;color:var(--tech)}
.navmenu a:hover b{color:var(--orange-ink)}
@media(max-width:1240px){.nl{gap:var(--s5)}.navmenu{min-width:280px}}



/* form group headings and check rows inside the quote modal */
.formgrid .fgroup{grid-column:1/-1;margin:var(--s1) 0 -4px;
  font-family:'Roboto Mono',monospace;font-size:var(--t1);letter-spacing:.13em;
  text-transform:uppercase;color:var(--orange-ink);
  padding-bottom:var(--s2);border-bottom:1px solid var(--fiber)}
.formgrid .fgroup:first-of-type{margin-top:0}
.checkrow{display:grid;gap:var(--s2);padding-top:var(--s1);border-top:1px solid var(--fiber);margin-top:var(--s1)}
.check{display:flex;gap:var(--s2);align-items:flex-start;cursor:pointer;
  font-size:var(--t3);color:var(--steel);line-height:1.5}
.check input{appearance:none;-webkit-appearance:none;width:17px;height:17px;flex:none;
  border:1px solid var(--fiber);background:var(--white);cursor:pointer;margin-top:1px;
  display:grid;place-items:center;transition:.14s}
.check input:hover{border-color:var(--orange)}
.check input:checked{background:var(--orange);border-color:var(--orange)}
.check input:checked::after{content:"";width:9px;height:5px;
  border-left:2px solid var(--white);border-bottom:2px solid var(--white);
  transform:rotate(-45deg) translate(1px,-1px)}
.check input:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.check a{color:var(--steel);border-bottom:1px solid var(--orange)}
.check a:hover{color:var(--orange-ink)}
.modal .field .hint{font-size:var(--t2)}
/* visually hidden, still read out */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================
   PRINT — a buyer prints a product page to take into a meeting.
   Strip the navigation and the sell, keep the specification.
   ============================================================ */
@media print{
  *{background:transparent!important;color:#000!important;box-shadow:none!important}
  @page{margin:14mm}
  body{font-size:10.5pt;line-height:1.4}
  /* chrome that means nothing on paper */
  .meta,nav.mast,.nav-drawer,.actionbar,.skip,.navmenu,.bgmedia,.credit,
  .endband,.modal,.quoterail .act,.viewtoggle,.filterbar,.scrollhint,
  .gallery .thumbs,.hbtns,.tabs,footer .fbot span:last-child{display:none!important}
  /* the hero collapses to a title block */
  .pagehero{padding:0!important}
  .pagehero .inner{display:block!important;padding:0 0 8mm!important}
  .pagehero::before,.pagehero::after,.pagehero .inner::before{display:none!important}
  .pagehero h1{font-size:22pt;margin:0 0 3mm}
  .pagehero .lede,.pagehero .featline{font-size:11pt;max-width:none}
  .skuline .sku{border:1px solid #000!important;padding:1mm 2mm}
  .gallery .main{border:1px solid #ccc!important;max-height:70mm}
  .gallery .main img{max-height:66mm}
  /* every tab panel prints, since paper has no tabs */
  .tabpanel[hidden]{display:block!important}
  .tabpanel{page-break-inside:avoid;margin-bottom:6mm}
  .viewpane[hidden]{display:block!important}
  /* layout flattens to one column */
  .prodgrid,.artgrid,.specsheet,.configgrid,.cards,.cards.c2,.cards.c3,
  .factstrip .wrap,.capboard,.terms,.certs,.seals{
    display:block!important;grid-template-columns:none!important}
  .quoterail{position:static!important;border:1px solid #999!important;
    page-break-inside:avoid;margin:0 0 6mm}
  /* tables are the reason the page is being printed */
  table{width:100%!important;min-width:0!important;border-collapse:collapse;
    page-break-inside:auto;font-size:9.5pt}
  table caption{font-weight:700;text-align:left;padding:0 0 2mm;border:0}
  th,td{border:1px solid #999!important;padding:1.6mm 2mm!important}
  thead{display:table-header-group}
  tr{page-break-inside:avoid}
  .tblwrap{overflow:visible!important}
  /* links: show the destination, since a printed link is not clickable */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555!important}
  a[href^="#"]::after,a[href^="mailto"]::after,a[href^="tel"]::after{content:""}
  h1,h2,h3{page-break-after:avoid}
  .sect{padding:4mm 0!important;border:0!important}
  .secthead{border-bottom:1.5pt solid #000!important;margin-bottom:3mm}
  /* a printed page should say where it came from */
  main::after{content:"karemop.com · Suzhou Kare Houseware Co., Ltd. · info@szkare.com · +86-512-69157697";
    display:block;margin-top:8mm;padding-top:3mm;border-top:1px solid #999;
    font-size:8.5pt;color:#555!important}
}

/* ============================================================
   FACTORY — photograph-led modules.
   A plant page with no plant photography is an assertion, not evidence.
   ============================================================ */

/* the six steps, alternating photo and text */
.psteps{display:grid;gap:1px;background:var(--fiber);border:1px solid var(--fiber)}
.pstep{background:var(--white);display:grid;grid-template-columns:1fr 1fr;
  gap:0;align-items:stretch}
.pstep:nth-child(even){direction:rtl}
.pstep:nth-child(even) > *{direction:ltr}
.pstep figure{margin:0;position:relative;background:var(--icy);overflow:hidden;min-height:270px}
.pstep figure img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pstep:hover figure img{transform:scale(1.03)}
.pstep figcaption{position:absolute;left:0;bottom:0;background:rgba(9,20,32,.82);
  color:var(--icy);font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.09em;text-transform:uppercase;padding:var(--s1) var(--s2)}
.pstep .tx{padding:var(--s7) var(--s7);display:flex;flex-direction:column;justify-content:center;gap:var(--s2)}
.pstep h3{font-size:21px;letter-spacing:-.032em}
.pstep h3::first-line{color:var(--orange-ink)}
.pstep p{margin:0;font-size:var(--t3);color:var(--steel);max-width:var(--measure-note)}

/* capacity cells gain a thumbnail of the line they describe */
/* the negative margin has to be the cell's own padding, or the image bleeds
   to the wrong edge the moment that padding changes */
.capcell .lineim{display:block;height:88px;
  margin:calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s3);overflow:hidden;
  background:var(--icy);border-bottom:1px solid var(--fiber)}
.capcell .lineim img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9)}
.capcell:hover .lineim img{filter:saturate(1.05)}

/* the floor gallery */
.floorgal{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--fiber);border:1px solid var(--fiber)}
.floorgal figure{margin:0;position:relative;background:var(--icy);overflow:hidden;
  aspect-ratio:4/3;cursor:zoom-in}
.floorgal figure:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.floorgal img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.floorgal figure:hover img{transform:scale(1.04)}
.floorgal figcaption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top, rgba(9,20,32,.9), rgba(9,20,32,0));
  color:var(--white);font-family:'Roboto Mono',monospace;font-size:var(--t1);
  letter-spacing:.08em;text-transform:uppercase;padding:var(--s6) var(--s3) var(--s2)}

/* lightbox */
.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:var(--s7);
  background:rgba(9,20,32,.93);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain;display:block;
  border:1px solid rgba(217,230,232,.28)}
.lightbox .cap{margin-top:var(--s3);color:var(--icy);font-family:'Roboto Mono',monospace;
  font-size:var(--t2);letter-spacing:.1em;text-transform:uppercase;text-align:center}
.lightbox .x{position:absolute;top:20px;right:24px;background:transparent;
  border:1px solid rgba(217,230,232,.4);color:var(--white);width:40px;height:40px;
  font-size:var(--t5);cursor:pointer;display:grid;place-items:center}
.lightbox .x:hover{border-color:var(--orange);background:var(--orange)}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);background:transparent;
  border:1px solid rgba(217,230,232,.4);color:var(--white);width:44px;height:56px;
  font-size:var(--t5);cursor:pointer;display:grid;place-items:center}
.lightbox .prev{left:20px} .lightbox .next{right:20px}
.lightbox .nav:hover{border-color:var(--orange);background:var(--orange)}

@media(max-width:1040px){
  .floorgal{grid-template-columns:repeat(2,1fr)}
  .floorgal figure:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
  .pstep{grid-template-columns:1fr}
  .pstep:nth-child(even){direction:ltr}
  .pstep figure{min-height:210px}
  .pstep .tx{padding:var(--s6) var(--s6) 28px}
}
@media(max-width:640px){
  .floorgal{grid-template-columns:1fr}
  .lightbox{padding:var(--s3)}
  .lightbox .nav{width:38px;height:48px}
}
@media print{.floorgal,.lightbox{display:none!important}
  .pstep{grid-template-columns:1fr;page-break-inside:avoid}}

/* ============================================================
   FACETED CATALOGUE — the browse page
   ============================================================ */
.browse{display:grid;grid-template-columns:250px minmax(0,1fr);gap:var(--s8);align-items:start}

.facets{position:sticky;top:var(--s6);border:1px solid var(--fiber);background:var(--white)}
.fachead{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);
  background:var(--deep);color:var(--white)}
.fachead h2{font-size:var(--t3);letter-spacing:-.02em;margin:0}
.fachead h2::before{display:none}
.clearall{margin-left:auto;background:transparent;border:1px solid rgba(217,230,232,.4);
  color:var(--white);cursor:pointer;font-family:'Roboto Mono',monospace;font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;padding:5px 9px}
.clearall:hover{border-color:var(--orange);background:var(--orange)}
.facsearch{padding:var(--s4) var(--s5);border-bottom:1px solid var(--fiber)}
.facsearch input{width:100%;border:1px solid var(--fiber);background:var(--cold);
  padding:10px 12px;font-family:'Inter',sans-serif;font-size:var(--t3);color:var(--deep)}
.facsearch input:focus{outline:0;border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}

.facgroup{padding:var(--s4) var(--s5);border-bottom:1px solid var(--fiber)}
.facgroup:last-child{border-bottom:0}
.facgroup h3{font-family:'Roboto Mono',monospace;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--orange-ink);margin:0 0 10px}
.facgroup h3::before{display:none}
.fac{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;
  font-size:var(--t3);color:var(--steel);line-height:1.35}
.fac input{appearance:none;-webkit-appearance:none;width:15px;height:15px;flex:none;
  border:1px solid var(--fiber);background:var(--white);cursor:pointer;
  display:grid;place-items:center;transition:.14s}
.fac:hover input{border-color:var(--orange)}
.fac input:checked{background:var(--orange-btn);border-color:var(--orange-btn)}
.fac input:checked::after{content:"";width:8px;height:4px;
  border-left:2px solid var(--white);border-bottom:2px solid var(--white);
  transform:rotate(-45deg) translate(1px,-1px)}
.fac input:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.fac .nm{flex:1;min-width:0}
.fac .ct{font-family:'Roboto Mono',monospace;font-size:10px;color:var(--tech);flex:none}
.fac.zero{opacity:.38;pointer-events:none}
.fac input:checked ~ .nm{color:var(--deep);font-weight:600}

/* result bar */
.resbar{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding-bottom:var(--s3);border-bottom:1px solid var(--fiber);margin-bottom:var(--s4)}
.rescount{margin:0;font-family:'Roboto Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tech)}
.rescount b{color:var(--deep);font-weight:400}
.sortwrap{margin-left:auto}
.sortwrap select{border:1px solid var(--fiber);background:var(--white);padding:8px 11px;
  font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--steel);cursor:pointer}
.sortwrap select:focus{outline:0;border-color:var(--orange)}

/* active filter chips */
.chipbar{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s4)}
.chipbar button{display:inline-flex;align-items:center;gap:7px;background:var(--icy);
  border:1px solid var(--fiber);color:var(--deep);cursor:pointer;padding:5px 10px;
  font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:.06em}
.chipbar button::after{content:"\00d7";font-size:13px;color:var(--orange-ink)}
.chipbar button:hover{border-color:var(--orange);background:var(--white)}

/* the grid */
#plist{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--fiber);border:1px solid var(--fiber)}
.pitem{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s4);
  background:var(--white);padding:var(--s4);align-items:center;transition:.14s}
.pitem:hover{background:var(--cold)}
.pitem .im{width:96px;height:96px;background:var(--cold);border:1px solid var(--fiber);
  display:grid;place-items:center;padding:8px}
.pitem .im img{max-width:100%;max-height:100%;width:auto;object-fit:contain}
.pitem .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.pitem .sku{font-family:'Roboto Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  color:var(--orange-ink)}
.pitem b{font-family:'Inter Tight',sans-serif;font-weight:600;font-size:var(--t3);
  letter-spacing:-.024em;color:var(--deep);line-height:1.3}
.pitem .ft{font-size:12px;color:var(--tech);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pitem .pfoot{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:5px;
  font-family:'Roboto Mono',monospace;font-size:10px;color:var(--tech)}
.pitem .pfoot b{font-size:10px;font-family:'Roboto Mono',monospace;font-weight:400;
  color:var(--steel)}
.pitem .pz{color:var(--orange-ink)}
.pitem[hidden]{display:none}

.noresult{padding:var(--s9) var(--s5);text-align:center;color:var(--tech);
  border:1px dashed var(--fiber);margin:0}
.linkish{background:none;border:0;padding:0;cursor:pointer;color:var(--orange-ink);
  font:inherit;border-bottom:1px solid var(--orange)}

/* pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:var(--s4);
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--fiber)}
.pg{background:var(--white);border:1px solid var(--fiber);cursor:pointer;padding:9px 15px;
  font-family:'Roboto Mono',monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--steel)}
.pg:hover:not(:disabled){border-color:var(--orange);color:var(--orange-ink)}
.pg:disabled{opacity:.35;cursor:default}
.pgnum{font-family:'Roboto Mono',monospace;font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tech)}

@media(max-width:1100px){
  .browse{grid-template-columns:1fr;gap:var(--s6)}
  .facets{position:static}
  .facgroup{display:inline-block;vertical-align:top;min-width:210px;border-bottom:0;
    border-right:1px solid var(--fiber)}
}
@media(max-width:760px){
  #plist{grid-template-columns:1fr}
  .facgroup{display:block;border-right:0;border-bottom:1px solid var(--fiber)}
  .sortwrap{margin-left:0;width:100%}
  .sortwrap select{width:100%}
}