:root{--ink:#000;--mute:#595959;--line:#000;--soft:#f0f0f0;--accent:#e30613;--pad:clamp(16px,4vw,40px)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:Inter,'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;background:#fff;padding:8px 12px;font-weight:700}
.skip:focus{left:var(--pad)}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}

/* header */
header{position:sticky;top:0;z-index:50;background:#fff;border-top:4px solid var(--ink);border-bottom:1px solid var(--line)}
header .grid{align-items:center;min-height:68px}
.logo{grid-column:1/4;font-weight:900;font-size:22px;letter-spacing:-.04em;text-decoration:none;display:flex;align-items:center;gap:10px}
.logo i{width:14px;height:14px;background:var(--accent);display:block}
nav.main{grid-column:4/10;display:flex;gap:28px}
nav.main a{font-size:14px;font-weight:500;color:var(--mute);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current=page]{color:var(--ink);border-bottom-color:var(--accent)}
.lang{grid-column:10/-1;justify-self:end;display:flex;gap:4px}
.lang a{font-size:14px;font-weight:700;color:var(--mute);text-decoration:none;padding:6px 8px;border-bottom:2px solid transparent}
.lang a:hover{color:var(--ink)}
.lang a[aria-current=true]{color:var(--ink);border-bottom-color:var(--accent)}
.mbtn{display:none;grid-column:1/-1;grid-row:2;justify-self:start;font-size:14px;font-weight:700;padding:0 0 12px}

/* hero and page heads */
.hero{padding:clamp(56px,9vw,120px) 0 clamp(40px,6vw,80px)}
.hero h1{grid-column:1/10;font-size:clamp(36px,6.6vw,104px);font-weight:900;line-height:.98;letter-spacing:-.045em;overflow-wrap:break-word;hyphens:manual}
.hero aside{grid-column:10/-1;align-self:end;font-size:14px;color:var(--mute);border-top:1px solid var(--line);padding-top:12px}
.hero aside p+p{margin-top:2px}
.hero aside b{color:var(--ink)}
.hero .btn{margin-top:20px}
.phead{padding:clamp(28px,4vw,48px) 0 clamp(40px,5vw,72px)}
.phead h1{grid-column:1/10;font-size:clamp(34px,5vw,72px);font-weight:900;line-height:1;letter-spacing:-.045em;overflow-wrap:break-word;hyphens:manual}
.phead .intro{grid-column:1/9;margin-top:20px;font-size:18px;color:var(--mute);max-width:60ch}
.crumbs{grid-column:1/-1;font-size:13px;color:var(--mute);margin-bottom:clamp(24px,4vw,48px)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.crumbs li+li::before{content:"/";margin-right:8px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.jump{grid-column:1/-1;list-style:none;display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:32px}
.jump a{font-size:14px;font-weight:700;text-decoration:none;padding:6px 0;border-bottom:2px solid var(--accent)}
.jump a:hover{color:var(--accent)}

.btn{display:inline-block;padding:12px 20px;background:var(--ink);color:#fff;text-decoration:none;font-size:14px;font-weight:700;border:0}
.btn:hover{background:var(--accent)}

/* sections */
.sec{padding:48px 0 72px;border-top:1px solid var(--line)}
.sec .lab{grid-column:1/4;position:sticky;top:96px;align-self:start}
.sec h2{font-size:clamp(26px,3vw,40px);font-weight:900;letter-spacing:-.04em;line-height:1.05}
.sec .lab p{margin-top:10px;font-size:14px;color:var(--mute);max-width:26ch}

/* category cards (home) */
.cards{grid-column:4/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.card{display:flex;flex-direction:column;border-top:1px solid var(--line);padding:14px 24px 44px 0;text-decoration:none}
.ph{aspect-ratio:4/3;background:var(--soft);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:16px}
.ph img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.ph.cover img{object-fit:cover;mix-blend-mode:normal}
.card h3{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.card p{font-size:14px;color:var(--mute);margin-bottom:12px;max-width:46ch}
.card .models{font-size:13px;font-weight:700;color:var(--ink)}
.card .more{margin-top:auto;font-size:14px;font-weight:700;align-self:start;border-bottom:2px solid var(--accent);padding:4px 0}
.card:hover .more{color:var(--accent)}

/* steps (home) */
.steps{grid-column:4/-1;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px}
.steps li{border-top:1px solid var(--line);padding:14px 0 24px}
.steps b{display:block;font-size:clamp(34px,3.6vw,52px);font-weight:900;letter-spacing:-.05em;line-height:1;color:var(--accent);margin-bottom:16px}
.steps h3{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-bottom:8px}
.steps p{font-size:14px;color:var(--mute)}

/* long text */
.prose{grid-column:4/-1}
.prose p{max-width:62ch;margin-bottom:14px}
.prose h3{font-size:18px;font-weight:700;letter-spacing:-.02em;margin:32px 0 10px}
.prose ul{margin:0 0 14px;padding-left:20px;max-width:62ch}
.prose li{margin-bottom:6px}
.prose .btn{margin-top:12px}
.facts{font-size:14px;color:var(--mute)}
.facts b{color:var(--ink)}

/* product articles (catalog) */
.prods{grid-column:4/-1}
.prod{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px 32px;border-top:1px solid var(--line);padding:16px 0 64px;scroll-margin-top:96px}
.pimg{background:var(--soft);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden;position:sticky;top:96px;align-self:start}
.pimg img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.pimg.cover img{object-fit:cover;mix-blend-mode:normal}
.key{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.key b{font-size:clamp(34px,3.6vw,52px);font-weight:900;letter-spacing:-.05em;line-height:1}
.key span{font-size:13px;color:var(--mute)}
.prod h3{font-size:clamp(22px,2.2vw,30px);font-weight:900;letter-spacing:-.03em;line-height:1.1;margin-bottom:6px}
.model{font-size:15px;font-weight:700;margin-bottom:16px}
.prod h4{font-size:15px;font-weight:700;margin:24px 0 8px}
.prod p{max-width:62ch;margin-bottom:12px}
.prod ul{max-width:62ch;margin-bottom:12px;padding-left:20px}
.prod li{margin-bottom:4px}
.sd{margin:28px 0 24px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sd summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
.sd summary::-webkit-details-marker{display:none}
.sd summary::after{content:"+";font-weight:900;font-size:20px;line-height:1}
.sd[open] summary::after{content:"−"}
.sd summary:hover{color:var(--accent)}

/* spec tables */
.tw{overflow-x:auto;margin:0 0 16px}
.spec{width:100%;border-collapse:collapse;font-size:15px;table-layout:auto}
.spec th,.spec td{text-align:left;padding:12px 16px 12px 0;border-top:1px solid var(--line);font-weight:400;overflow-wrap:break-word;vertical-align:top;line-height:1.35}
.spec th{color:var(--mute)}
.spec th[scope=row]{width:34%}
.spec thead th{font-weight:700;color:var(--ink)}
.spec thead td{border-top:0;font-size:13px;color:var(--mute)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:1px solid var(--line)}

/* contacts */
.cgrid{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px}
.cinfo p,.cinfo address{margin-bottom:12px;font-style:normal}
.cinfo .co{font-weight:700}
.phones{list-style:none}
.phones li{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.phones>li>a:first-child{font-weight:700;font-size:18px;text-decoration:none}
.ic{display:inline-flex;gap:6px}
.ic a{width:34px;height:34px;border:1px solid var(--ink);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);text-decoration:none}
.ic a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.ic svg{width:18px;height:18px}
#cform h2{font-size:clamp(22px,2.4vw,30px);margin-bottom:20px}
#cform label{display:block;font-size:13px;color:var(--mute);margin-bottom:18px}
#cform input,#cform textarea{display:block;width:100%;margin-top:4px;padding:8px 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:transparent;font-size:16px;color:var(--ink);resize:vertical}
#cform input:focus,#cform textarea:focus{outline:0;border-bottom:3px solid var(--accent);padding-bottom:6px}
.hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}
#fstat{margin-top:12px;font-size:14px;min-height:1.4em}

/* 404 */
.nf .btn{margin-top:28px}

footer{border-top:1px solid var(--line);padding:28px 0 40px;font-size:13px;color:var(--mute)}
.f1{grid-column:1/5}.f2{grid-column:5/9;font-style:normal}.f3{grid-column:9/-1}
footer .phones a:first-child{font-size:14px;font-weight:500}

@media(max-width:1000px){
  nav.main{grid-column:1/-1;grid-row:3;flex-direction:column;gap:4px;padding:8px 0 16px}
  .js nav.main{display:none}
  .js nav.main.open{display:flex}
  .js .mbtn{display:block}
  .logo{grid-column:1/7}.lang{grid-column:7/-1;grid-row:1}
  .hero h1,.hero aside,.phead h1,.phead .intro,.sec .lab,.cards,.steps,.prose,.prods{grid-column:1/-1}
  .hero aside{margin-top:32px;max-width:420px}
  .sec .lab{position:static;margin-bottom:32px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .f1,.f2,.f3{grid-column:1/-1;margin-bottom:12px}
  .cgrid{grid-template-columns:1fr}
  .prod{grid-template-columns:1fr}
  .pimg{position:static}
}
@media(max-width:640px){
  .cards,.steps{grid-template-columns:1fr}
  .card{padding-right:0}
  .spec{font-size:13px}
  .spec th,.spec td{padding-right:10px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* one photo treatment site-wide: grayscale, colour on hover; touch screens (no hover) always show colour */
@media(hover:hover){
  .ph img,.pimg img{filter:grayscale(1) contrast(1.05);transition:filter .25s}
  .card:hover .ph img,.prod:hover .pimg img{filter:none}
}

/* floating messenger buttons */
.fab{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px}
.fab a{width:52px;height:52px;display:flex;align-items:center;justify-content:center;background:var(--ink);color:#fff;text-decoration:none}
.fab a:hover{background:var(--accent)}
.fab svg{width:26px;height:26px}
@media(max-width:760px){footer{padding-bottom:140px}}
@media print{.fab{display:none}}

/* projects page */
.prods.full{grid-column:1/-1}
.prod.noimg{grid-template-columns:minmax(0,1fr)}
.pmeta{font-size:13px;font-weight:700;color:var(--accent);margin-bottom:8px}
.prod .model a{text-decoration:none;border-bottom:2px solid var(--accent)}
.prod .model a:hover{color:var(--accent)}