/* CktHub design system — dark industrial minimalism.
   Shared by every ckthub.com page. Page-specific sheets (fab.css, cart.css,
   parts.css, legal.css) load before this one and inherit its tokens through
   the legacy aliases below. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/fonts/space-grotesk-latin.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2')}

:root{
  --c-bg:#0A0D0B; --c-bg2:#101510; --c-card:#151B16; --c-elev:#1B221D;
  --c-accent:#FF6A21; --c-accent-ink:#140802; --c-accent-dim:rgba(255,106,33,.12);
  --c-text:#F4F6F8; --c-text2:#A1AAA3; --c-muted:#8C968E; --c-border:#29312B; --c-border2:#3A443C;
  --c-ok:#5FC28A; --c-bad:#FF6B5B;
  --f-head:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:6px; --radius-lg:10px;
  --maxw:1240px; --gut:20px; --hdr-h:60px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --shadow:0 18px 48px rgba(0,0,0,.45);
  /* legacy aliases used by fab.css / cart.css / parts.css / legal.css */
  --bg:var(--c-bg); --bg-2:var(--c-bg2); --bg-3:var(--c-card);
  --line:var(--c-border); --line-2:var(--c-border2);
  --text:var(--c-text); --text-2:var(--c-text2); --text-3:var(--c-muted);
  --accent:var(--c-accent); --accent-ink:var(--c-accent-ink); --accent-soft:var(--c-accent-dim);
  --ok:var(--c-ok); --bad:var(--c-bad); --r:var(--radius-lg);
  --fd:var(--f-head); --fm:var(--f-mono); --nav-h:var(--hdr-h);
  color-scheme:dark;
}
@media (min-width:768px){:root{--gut:32px;--hdr-h:68px}}

/* ── base ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{margin:0;background:var(--c-bg);color:var(--c-text);font:400 1rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:600;line-height:1.08;letter-spacing:-.025em;margin:0;text-wrap:balance}
p{margin:0}
p+p{margin-top:1em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:var(--c-accent);color:var(--c-accent-ink)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:2px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:300;background:var(--c-accent);color:var(--c-accent-ink);padding:10px 16px;border-radius:var(--radius);font-weight:600;text-decoration:none}
.skip:focus{left:8px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.mono{font-family:var(--f-mono)}

/* silkscreen-style label: the brand's typographic signature */
.label{display:block;font:500 .72rem/1.5 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.label::before{content:"";display:inline-block;vertical-align:middle;width:18px;height:1px;margin:-2px 10px 0 0;background:var(--c-accent)}
.label b{color:var(--c-text2);font-weight:500}

/* ── buttons & links ──────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--radius);border:1px solid var(--c-accent);background:var(--c-accent);color:var(--c-accent-ink);font:600 .95rem/1 var(--f-body);text-decoration:none;white-space:nowrap;transition:background .2s var(--ease),border-color .2s,color .2s,transform .15s}
.btn:hover{background:#FF7E3D;border-color:#FF7E3D}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.5;pointer-events:none}
.btn-ghost,.btn.ghost{background:transparent;color:var(--c-text);border-color:var(--c-border2)}
.btn-ghost:hover,.btn.ghost:hover{background:var(--c-elev);border-color:var(--c-text2)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.88rem}
.btn-block{width:100%}
.arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:var(--c-text);border-bottom:1px solid var(--c-border2);padding-bottom:3px;transition:border-color .2s,color .2s}
.arrow::after{content:"→";transition:transform .2s var(--ease)}
.arrow:hover{color:var(--c-accent);border-color:var(--c-accent)}
.arrow:hover::after{transform:translateX(3px)}
.icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--radius);border:1px solid transparent;background:transparent;color:var(--c-text2);transition:color .2s,border-color .2s,background .2s}
.icon-btn:hover{color:var(--c-text);border-color:var(--c-border);background:var(--c-card)}
.icon-btn svg{width:20px;height:20px}

/* ── header ───────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:100;height:var(--hdr-h);background:rgba(10,13,11,.78);border-bottom:1px solid var(--c-border);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%)}
.hdr-in{height:100%;display:flex;align-items:center;gap:12px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 1.15rem/1 var(--f-head);letter-spacing:-.02em;margin-right:auto}
.brand svg{width:26px;height:26px;flex:none}
.brand small{display:none;font:500 .66rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);padding-left:10px;border-left:1px solid var(--c-border)}
.nav-links{display:none}
.nav-links a{position:relative;padding:8px 2px;font-size:.92rem;color:var(--c-text2);text-decoration:none;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current=page]{color:var(--c-text)}
.nav-links a[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--c-accent)}
.cart-btn{position:relative}
.cart-count{position:absolute;top:4px;right:3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--c-accent);color:var(--c-accent-ink);font:700 .68rem/18px var(--f-mono);text-align:center}
.cart-count[data-n="0"]{display:none}
.burger{display:inline-grid}
.mnav{position:fixed;inset:var(--hdr-h) 0 auto 0;z-index:99;max-height:calc(100dvh - var(--hdr-h));overflow:auto;background:var(--c-bg);border-bottom:1px solid var(--c-border);padding:8px var(--gut) 24px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s var(--ease),visibility 0s .2s}
.mnav.open{opacity:1;transform:none;visibility:visible;transition:opacity .2s,transform .2s var(--ease)}
.mnav a{display:flex;justify-content:space-between;align-items:center;min-height:52px;border-bottom:1px solid var(--c-border);text-decoration:none;font:500 1.1rem/1 var(--f-head)}
.mnav a::after{content:"→";color:var(--c-muted)}
.mnav a[aria-current=page]{color:var(--c-accent)}
.mnav .btn{margin-top:20px;width:100%}
@media (min-width:640px){.brand small{display:inline}}
@media (min-width:1080px){
  .nav-links{display:flex;gap:26px;margin-right:18px}
  .burger,.mnav{display:none}
}

/* ── breadcrumb ───────────────────────────────────────── */
.crumbs{font:500 .74rem/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--c-border2)}
.crumbs a{text-decoration:none;color:var(--c-text2)}
.crumbs a:hover{color:var(--c-accent)}

/* ── sections ─────────────────────────────────────────── */
.sec{padding-block:72px;border-top:1px solid var(--c-border)}
.sec-alt{background:var(--c-bg2)}
.sec-head{display:grid;gap:18px;margin-bottom:44px}
.sec-head h2{font-size:clamp(2rem,5vw,3.4rem);max-width:18ch}
.lead{font-size:1.08rem;color:var(--c-text2);max-width:58ch}
@media (min-width:900px){
  .sec{padding-block:112px}
  .sec-head{grid-template-columns:1fr 1fr;align-items:end;gap:48px;margin-bottom:64px}
  .sec-head .label{grid-column:1/-1}
}

/* ── hero (home) ──────────────────────────────────────── */
.hero{position:relative;padding-block:40px 56px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0 0 0 45%;background-image:linear-gradient(var(--c-border) 1px,transparent 1px),linear-gradient(90deg,var(--c-border) 1px,transparent 1px);background-size:48px 48px;opacity:.18;pointer-events:none}
.hero-grid{position:relative;display:grid;gap:40px}
.hero h1{font-size:clamp(3rem,11vw,6.6rem);font-weight:600;letter-spacing:-.045em;line-height:.95;margin-top:22px}
.hero h1 span{display:block;color:var(--c-text2)}
.hero h1 em{font-style:normal;color:var(--c-accent)}
.hero .lead{margin-top:24px;font-size:1.15rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:44px;background:var(--c-border);border:1px solid var(--c-border);border-radius:var(--radius)}
.hero-meta div{background:var(--c-bg);padding:14px 16px}
.hero-meta dt{font:500 .68rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.hero-meta dd{margin:6px 0 0;font:500 .95rem/1.3 var(--f-head)}
.hero-fig{position:relative;margin:0;border:1px solid var(--c-border);border-radius:var(--radius-lg);background:radial-gradient(120% 80% at 50% 30%,#1B221D 0%,#0E120F 70%);padding:44px 20px 20px;display:flex;flex-direction:column;align-items:center}
.board{position:relative;height:clamp(300px,62vw,440px);aspect-ratio:394/800}
.board img{width:100%;height:100%;max-height:none}
.pin{position:absolute;display:grid;place-items:center;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;border:1.5px solid var(--c-accent);background:rgba(10,13,11,.85);font:600 .7rem/1 var(--f-mono);color:var(--c-text);box-shadow:0 0 0 4px rgba(255,106,33,.15)}
.legend{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:8px;width:100%;counter-reset:lg}
.legend li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;font-size:.84rem;color:var(--c-text2);line-height:1.4}
.legend li::before{counter-increment:lg;content:counter(lg);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--c-border2);font:600 .66rem/1 var(--f-mono);color:var(--c-text)}
.legend b{color:var(--c-text);font-weight:600}
.hero-fig .cap-t{position:absolute;left:16px;top:14px;font:500 .66rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
@media (min-width:900px){
  .hero{padding-block:72px 96px}
  .hero-grid{grid-template-columns:1.15fr .85fr;align-items:center;gap:56px}
  .hero-meta{grid-template-columns:repeat(4,1fr)}
}

/* ── capabilities (asymmetric) ────────────────────────── */
.caps{display:grid;gap:1px;background:var(--c-border);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden}
.cap{position:relative;display:flex;flex-direction:column;gap:14px;background:var(--c-bg);padding:28px 22px;text-decoration:none;transition:background .25s}
.cap:hover{background:var(--c-card)}
.cap .no{font:500 .72rem/1 var(--f-mono);color:var(--c-muted);letter-spacing:.1em}
.cap h3{font-size:1.5rem}
.cap p{color:var(--c-text2);max-width:46ch}
.cap .viz{height:120px;margin:4px 0 6px;color:var(--c-border2)}
.cap .viz svg{width:100%;height:100%}
.cap .go{margin-top:auto;padding-top:8px;font:600 .9rem/1 var(--f-body);color:var(--c-text);display:inline-flex;gap:8px}
.cap .go::after{content:"→";transition:transform .2s var(--ease)}
.cap:hover .go{color:var(--c-accent)}
.cap:hover .go::after{transform:translateX(4px)}
.cap:hover .viz .hl{stroke:var(--c-accent)}
.viz .hl{stroke:var(--c-accent);transition:stroke .3s}
.viz .fl{fill:var(--c-accent)}
@media (min-width:760px){.caps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){
  .caps{grid-template-columns:repeat(12,1fr)}
  .cap{padding:36px 32px}
  .cap:nth-child(1){grid-column:span 7;grid-row:span 2}
  .cap:nth-child(1) .viz{height:260px}
  .cap:nth-child(1) h3{font-size:2.1rem}
  .cap:nth-child(2),.cap:nth-child(3){grid-column:span 5}
  .cap:nth-child(n+4){grid-column:span 4}
}

/* ── product cards ────────────────────────────────────── */
.pgrid{display:grid;gap:16px}
@media (min-width:640px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.pgrid.three{grid-template-columns:repeat(3,1fr)}}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color .25s}
.pcard:hover{border-color:var(--c-border2)}
.pcard .media{position:relative;display:grid;place-items:center;aspect-ratio:16/10;background:radial-gradient(90% 90% at 50% 40%,#1E2620,#111612);overflow:hidden}
.pcard .media img{height:88%;width:auto;transition:transform .5s var(--ease)}
.pcard:hover .media img{transform:scale(1.04) rotate(-1deg)}
.pcard .media .sku{position:absolute;left:12px;top:12px;font:500 .66rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);background:rgba(10,13,11,.7);border:1px solid var(--c-border);border-radius:3px;padding:5px 7px}
.pcard .body{display:flex;flex-direction:column;gap:12px;padding:20px;flex:1}
.pcard h3{font-size:1.2rem;letter-spacing:-.015em}
.pcard h3 a{text-decoration:none}
.pcard h3 a::after{content:"";position:absolute;inset:0;z-index:0}
.pcard .desc{color:var(--c-text2);font-size:.94rem}
.specs{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.specs li{font:500 .72rem/1 var(--f-mono);color:var(--c-text2);border:1px solid var(--c-border);border-radius:3px;padding:6px 8px}
.pcard .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--c-border)}
.price{font:600 1.35rem/1 var(--f-head);letter-spacing:-.02em}
.price small{display:block;margin-top:5px;font:400 .7rem/1 var(--f-mono);color:var(--c-muted);letter-spacing:.04em}
.pcard .acts{position:relative;z-index:1;display:flex;gap:8px}

/* compact component rows (shop) */
.plist{display:grid;gap:1px;background:var(--c-border);border:1px solid var(--c-border);border-radius:var(--radius-lg);overflow:hidden}
.prow{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;background:var(--c-bg);padding:16px 18px;transition:background .2s}
.prow:hover{background:var(--c-card)}
.prow .nm{font:600 1rem/1.3 var(--f-head)}
.prow .nm button{all:unset;cursor:pointer;border-bottom:1px dashed var(--c-border2)}
.prow .nm button:hover{color:var(--c-accent);border-color:var(--c-accent)}
.prow .nm button:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
.prow .meta{grid-column:1;font:400 .74rem/1.4 var(--f-mono);color:var(--c-muted)}
.prow .pr{grid-column:2;grid-row:1;text-align:right;font:600 1.05rem/1 var(--f-head)}
.prow .pr small{font:400 .68rem var(--f-mono);color:var(--c-muted)}
.prow .add{grid-column:2;grid-row:2;justify-self:end}
@media (min-width:760px){
  .prow{grid-template-columns:minmax(0,1.6fr) minmax(0,1.4fr) 110px auto;gap:20px}
  .prow .meta,.prow .pr,.prow .add{grid-column:auto;grid-row:auto}
}

/* ── shop toolbar ─────────────────────────────────────── */
.toolbar{position:sticky;top:var(--hdr-h);z-index:50;display:grid;gap:10px;padding:14px 0;background:rgba(10,13,11,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--c-border);margin-bottom:28px}
.toolbar .row{display:flex;gap:10px}
.toolbar .row>.field{min-width:0}
.toolbar select{width:auto;min-width:150px}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-height:38px;padding:0 14px;border-radius:19px;border:1px solid var(--c-border);background:transparent;color:var(--c-text2);font:500 .85rem/1 var(--f-body);transition:all .2s}
.chip:hover{color:var(--c-text);border-color:var(--c-border2)}
.chip[aria-pressed=true]{background:var(--c-text);border-color:var(--c-text);color:var(--c-bg)}
.chip .n{font:500 .7rem var(--f-mono);opacity:.6;margin-left:4px}

/* ── forms ────────────────────────────────────────────── */
.field{display:grid;gap:7px}
.field label,.field .lbl{font:500 .78rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-text2)}
.field label .opt{text-transform:none;letter-spacing:0;color:var(--c-muted)}
.input,.field input,.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--c-border);background:var(--c-bg);color:var(--c-text);font-size:1rem;transition:border-color .2s,background .2s}
.field textarea{min-height:140px;resize:vertical;line-height:1.5}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--c-text2) 50%),linear-gradient(135deg,var(--c-text2) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.input:hover,.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--c-border2)}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--c-accent);background:var(--c-bg2)}
.field .err{display:none;font-size:.82rem;color:var(--c-bad)}
.field.bad input,.field.bad textarea,.field.bad select{border-color:var(--c-bad)}
.field.bad .err{display:block}
.form-grid{display:grid;gap:18px}
@media (min-width:640px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}}
.search-in{position:relative;flex:1}
.search-in svg{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--c-muted);pointer-events:none}
.search-in input{padding-left:42px}

/* ── enquiry ──────────────────────────────────────────── */
.enq{display:grid;gap:40px}
.enq h2{font-size:clamp(2.2rem,6vw,4rem)}
.enq-aside dl{display:grid;gap:18px;margin:32px 0 0}
.enq-aside dt{font:500 .7rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.enq-aside dd{margin:6px 0 0}
.enq-aside dd a{text-decoration:none;border-bottom:1px solid var(--c-border2)}
.enq-aside dd a:hover{color:var(--c-accent);border-color:var(--c-accent)}
.enq-form{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--radius-lg);padding:24px}
.enq-form .note{font-size:.84rem;color:var(--c-muted)}
.enq-done{display:grid;gap:14px}
.enq-done[hidden]{display:none}
@media (min-width:960px){.enq{grid-template-columns:.85fr 1.15fr;gap:72px}.enq-form{padding:36px}}
.bot{min-height:65px}

/* ── process flow ─────────────────────────────────────── */
.flow{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:step}
.flow li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:4px 18px;padding:0 0 32px}
.flow li::before{counter-increment:step;content:counter(step,decimal-leading-zero);grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--c-border2);border-radius:50%;background:var(--c-bg);font:600 .78rem/1 var(--f-mono);color:var(--c-text2);position:relative;z-index:1}
.flow li::after{content:"";position:absolute;left:21.5px;top:44px;bottom:0;width:1px;background:var(--c-border2)}
.flow li:last-child::after{display:none}
.flow li:hover::before{border-color:var(--c-accent);color:var(--c-accent)}
.flow h3{font-size:1.15rem;padding-top:10px}
.flow p{color:var(--c-text2);font-size:.95rem;max-width:52ch}
.flow .tag{display:inline-block;margin-left:8px;font:500 .64rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-accent);vertical-align:middle}
@media (min-width:1080px){
  .flow{grid-template-columns:repeat(4,1fr);gap:48px 28px}
  .flow li{grid-template-columns:1fr;padding:0}
  .flow li::before{grid-row:auto;margin-bottom:12px}
  .flow li::after{left:52px;right:-22px;top:21.5px;bottom:auto;width:auto;height:1px}
  .flow li:nth-child(4n)::after{display:none}
}

/* ── editorial split + list ───────────────────────────── */
.split{display:grid;gap:40px}
@media (min-width:960px){.split{grid-template-columns:5fr 7fr;gap:80px}}
.statement{font:500 clamp(1.7rem,4.4vw,3rem)/1.12 var(--f-head);letter-spacing:-.03em}
.statement em{font-style:normal;color:var(--c-accent)}
.ruled{list-style:none;margin:0;padding:0;border-top:1px solid var(--c-border)}
.ruled li{display:grid;gap:6px;padding:22px 0;border-bottom:1px solid var(--c-border)}
.ruled h3{font-size:1.2rem}
.ruled p{color:var(--c-text2)}
@media (min-width:640px){.ruled li{grid-template-columns:200px 1fr;gap:24px}}

/* ── service / article pages ──────────────────────────── */
.phero{padding-block:28px 56px;border-bottom:1px solid var(--c-border)}
.phero h1{font-size:clamp(2.4rem,7vw,4.6rem);letter-spacing:-.04em;margin-top:28px;max-width:16ch}
.phero .lead{margin-top:20px;font-size:1.15rem}
.phero .hero-cta{margin-top:28px}
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:40px;background:var(--c-border);border:1px solid var(--c-border);border-radius:var(--radius)}
.facts div{background:var(--c-bg);padding:14px 16px}
.facts dt{font:500 .66rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.facts dd{margin:6px 0 0;font:500 .95rem/1.3 var(--f-head)}
@media (min-width:900px){.facts{grid-template-columns:repeat(4,1fr)}}
.layout{display:grid;gap:48px;padding-block:56px 80px}
@media (min-width:1080px){.layout{grid-template-columns:minmax(0,1fr) 320px;gap:80px;padding-block:80px 112px}}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.6rem,3.6vw,2.3rem);margin:64px 0 18px;scroll-margin-top:calc(var(--hdr-h) + 20px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.2rem;margin:32px 0 10px}
.prose p,.prose li{color:var(--c-text2)}
.prose strong{color:var(--c-text);font-weight:600}
.prose ul,.prose ol{padding-left:1.2em;margin:14px 0}
.prose li{margin:8px 0}
.prose li::marker{color:var(--c-accent)}
.prose a{color:var(--c-text);text-decoration-color:var(--c-accent)}
.prose a:hover{color:var(--c-accent)}
.prose figure{margin:32px 0;border:1px solid var(--c-border);border-radius:var(--radius-lg);background:var(--c-bg2);padding:24px;color:var(--c-border2)}
.prose figure svg{width:100%;height:auto}
.prose figcaption{margin-top:14px;font:400 .78rem/1.5 var(--f-mono);color:var(--c-muted)}
.tbl{width:100%;border-collapse:collapse;margin:20px 0;font-size:.92rem}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--c-border);vertical-align:top}
.tbl th{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted);background:var(--c-bg2)}
.tbl td:first-child{color:var(--c-text);font-weight:500}
.tbl-wrap{overflow-x:auto;border:1px solid var(--c-border);border-radius:var(--radius)}
.tbl-wrap .tbl{margin:0}
.tbl-wrap .tbl tr:last-child td{border-bottom:0}
.aside{display:grid;gap:16px;align-content:start}
@media (min-width:1080px){.aside{position:sticky;top:calc(var(--hdr-h) + 24px)}}
.panel{border:1px solid var(--c-border);border-radius:var(--radius-lg);background:var(--c-card);padding:22px}
.panel h2,.panel h3{font-size:1.15rem;margin-bottom:10px}
.panel p{color:var(--c-text2);font-size:.92rem}
.panel .btn{margin-top:16px;width:100%}
.panel ul{list-style:none;margin:0;padding:0}
.panel li a{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--c-border);text-decoration:none;font-size:.94rem;color:var(--c-text2)}
.panel li:last-child a{border-bottom:0}
.panel li a::after{content:"→";color:var(--c-muted)}
.panel li a:hover{color:var(--c-accent)}
.toc a{font-size:.88rem!important}

/* FAQ */
.faq{border-top:1px solid var(--c-border);margin-top:18px}
.faq details{border-bottom:1px solid var(--c-border)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:20px 0;font:500 1.06rem/1.35 var(--f-head);color:var(--c-text)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 1.3rem/1 var(--f-mono);color:var(--c-muted);transition:transform .2s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--c-accent)}
.faq .a{padding:0 0 22px;color:var(--c-text2);max-width:68ch}

/* CTA band */
.band{display:grid;gap:24px;align-items:center;padding:36px 24px;border:1px solid var(--c-border);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--c-card),var(--c-bg2))}
.band h2{font-size:clamp(1.6rem,4vw,2.4rem)}
.band p{color:var(--c-text2);margin-top:10px}
@media (min-width:900px){.band{grid-template-columns:1fr auto;padding:48px}}

/* ── product page ─────────────────────────────────────── */
.prod{display:grid;gap:36px;padding-block:28px 64px}
.prod>*,.layout>*,.split>*,.enq>*,.hero-grid>*{min-width:0}
.prod-fig{margin:0;display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--c-border);border-radius:var(--radius-lg);background:radial-gradient(90% 90% at 50% 40%,#1E2620,#0E120F)}
.prod-fig img{height:86%;width:auto}
.prod h1{font-size:clamp(2rem,5vw,3.2rem);margin-top:18px}
.prod .price{font-size:2rem;margin-top:20px}
div.qty{display:inline-flex;align-items:center;border:1px solid var(--c-border2);border-radius:var(--radius);height:48px}
div.qty button{width:44px;height:100%;border:0;background:transparent;font-size:1.1rem;color:var(--c-text2)}
div.qty button:hover{color:var(--c-text)}
div.qty input{width:56px;height:100%;border:0;background:transparent;text-align:center;font:600 1rem var(--f-mono);-moz-appearance:textfield}
div.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none}
.buy{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
@media (min-width:900px){.prod{grid-template-columns:1fr 1fr;gap:64px;align-items:start;padding-block:40px 96px}.prod-fig{position:sticky;top:calc(var(--hdr-h) + 24px)}}

/* ── drawer, dialogs, toast ───────────────────────────── */
.drawer{margin:0 0 0 auto;height:100dvh;max-height:none;width:min(420px,100%);max-width:100%;padding:0;border:0;border-left:1px solid var(--c-border);background:var(--c-bg2);color:var(--c-text);box-shadow:var(--shadow);flex-direction:column}
.drawer[open]{display:flex;animation:slidein .32s var(--ease)}
.drawer::backdrop{background:rgba(0,0,0,.55)}
@keyframes slidein{from{transform:translateX(100%)}}
.drawer-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--c-border)}
.drawer-hd h2{font-size:1.2rem}
.drawer-bd{flex:1;overflow:auto;padding:8px 20px}
.drawer-ft{padding:20px;border-top:1px solid var(--c-border);display:grid;gap:12px}
.drawer-ft .row{display:flex;justify-content:space-between;align-items:baseline}
.drawer-ft .muted{font-size:.82rem;color:var(--c-muted)}
.citem{display:grid;grid-template-columns:1fr auto;gap:8px 12px;padding:16px 0;border-bottom:1px solid var(--c-border)}
.citem .nm{font-weight:600;font-size:.95rem;line-height:1.35}
.citem .sk{font:400 .7rem var(--f-mono);color:var(--c-muted);margin-top:3px}
.citem .lt{font:600 .98rem var(--f-head);text-align:right}
.citem .ctl{display:flex;align-items:center;gap:10px;grid-column:1/-1}
.citem div.qty{height:38px}
.citem div.qty button{width:36px}
.citem div.qty input{width:48px;font-size:.9rem}
.citem .rm{border:0;background:none;color:var(--c-muted);font-size:.84rem;text-decoration:underline;text-underline-offset:3px;min-height:38px}
.citem .rm:hover{color:var(--c-bad)}
.empty{padding:48px 0;text-align:center;color:var(--c-text2)}
.empty .btn{margin-top:18px}
dialog.dlg{width:min(640px,calc(100% - 24px));max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--c-border);border-radius:var(--radius-lg);background:var(--c-bg2);color:var(--c-text);box-shadow:var(--shadow)}
dialog.dlg::backdrop{background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.dlg[open]{animation:pop .22s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}}
.dlg-hd{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 20px;border-bottom:1px solid var(--c-border)}
.dlg-hd input{flex:1;min-height:48px;border:0;background:transparent;font-size:1.1rem;outline:none}
.dlg-bd{padding:12px 20px 20px;overflow:auto;max-height:60dvh}
.sres{list-style:none;margin:0;padding:0}
.sres a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 10px;margin:0 -10px;border-radius:var(--radius);text-decoration:none}
.sres a:hover,.sres a:focus{background:var(--c-card);outline:none}
.sres .t{font-weight:600}
.sres .k{font:500 .68rem/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.sres .d{grid-column:1/-1;font-size:.85rem;color:var(--c-text2)}
.qv{display:grid;gap:20px}
.qv .media{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--radius);background:radial-gradient(90% 90% at 50% 40%,#1E2620,#0E120F)}
.qv .media img{height:86%;width:auto}
.qv h2{font-size:1.5rem}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:.9rem}
.kv dt{font:500 .7rem/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted)}
.kv dd{margin:0;font-family:var(--f-mono);font-size:.85rem}
.toast-host{position:fixed;left:50%;bottom:20px;z-index:400;transform:translateX(-50%);display:grid;gap:8px;width:min(420px,calc(100% - 32px));pointer-events:none}
.toast-host .t{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--c-border2);background:var(--c-elev);box-shadow:var(--shadow);font-size:.92rem;pointer-events:auto;animation:pop .25s var(--ease)}
.toast-host .t::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-ok);flex:none}
.toast-host .t.bad::before{background:var(--c-bad)}
.toast-host .t a{margin-left:auto;font-weight:600;color:var(--c-accent);text-decoration:none;white-space:nowrap}
.spin{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── footer ───────────────────────────────────────────── */
.ftr{border-top:1px solid var(--c-border);background:var(--c-bg2);padding-block:56px 28px;font-size:.92rem}
.ftr-grid{display:grid;gap:36px}
.ftr .about p{color:var(--c-text2);max-width:38ch;margin-top:16px}
.ftr h2{font:500 .7rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin-bottom:14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ftr a{color:var(--c-text2);text-decoration:none}
.ftr a:hover{color:var(--c-accent)}
.ftr address{font-style:normal;color:var(--c-text2);line-height:1.6}
.ftr-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-top:48px;padding-top:22px;border-top:1px solid var(--c-border);font:400 .76rem/1.5 var(--f-mono);color:var(--c-muted)}
.ftr-base a{color:var(--c-muted)}
@media (min-width:640px){.ftr-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.ftr-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr}}


/* step chain diagram (service pages): HTML, so it stays legible and crawlable */
.chain{list-style:none;margin:0;padding:0!important;display:grid;gap:10px;counter-reset:c}
.chain li{position:relative;margin:0!important;border:1px solid var(--c-border2);border-radius:var(--radius);padding:12px 14px 12px 48px;background:var(--c-bg);font:600 .92rem/1.3 var(--f-head);color:var(--c-text)!important}
.chain li::before{counter-increment:c;content:counter(c,decimal-leading-zero);position:absolute;left:14px;top:14px;font:500 .7rem var(--f-mono);color:var(--c-muted)}
.chain li span{display:block;margin-top:4px;font:400 .8rem/1.45 var(--f-body);color:var(--c-text2)}
.chain li.on{border-color:var(--c-accent)}
.chain li.on::before{color:var(--c-accent)}
@media (min-width:760px){
  .chain{grid-auto-flow:column;grid-auto-columns:1fr}
  .chain li{padding:38px 14px 14px}
  .chain li:not(:last-child)::after{content:"";position:absolute;right:-11px;top:50%;width:10px;height:1px;background:var(--c-accent)}
}
.prose figure.dia{padding:20px;color:var(--c-text2)}
@media (min-width:1200px){.legend{grid-template-columns:1fr 1fr;gap:10px 18px}}
/* helpers used by the fab, parts, cart and legal pages */
.section-pad{padding:72px 0}
@media (min-width:900px){.section-pad{padding:104px 0}}
h2.title{font-size:clamp(1.85rem,3.6vw,2.9rem);max-width:22ch}
p.sub{color:var(--c-text2);max-width:62ch;font-size:1.06rem;margin-top:14px}
.side-note{font:500 .74rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted);margin-bottom:16px}
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.tlink{display:inline-flex;align-items:center;gap:6px;color:var(--c-text);font-weight:600;text-decoration:none;border-bottom:1px solid var(--c-border2);padding-bottom:2px;transition:color .2s,border-color .2s}
.tlink:hover{color:var(--c-accent);border-color:var(--c-accent)}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}