@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/BarlowCondensed-500-latin-ext.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/BarlowCondensed-500-latin.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/BarlowCondensed-600-latin-ext.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/BarlowCondensed-600-latin.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/BarlowCondensed-700-latin-ext.woff2') format('woff2');}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/BarlowCondensed-700-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/IBMPlexSans-400-latin-ext.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/IBMPlexSans-400-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/IBMPlexSans-500-latin-ext.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/IBMPlexSans-500-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/IBMPlexSans-600-latin-ext.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/IBMPlexSans-600-latin.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/IBMPlexSans-700-latin-ext.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/IBMPlexSans-700-latin.woff2') format('woff2');}

/* KMW Instalacje — style główne. mobile-first. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#1b1f24; --ink2:#2b3138; --steel:#565f69; --line:#d9dde1;
  --bg:#f3f4f5; --card:#ffffff; --dark:#14171b; --dark2:#1e2329; --dark-line:#2c333b;
  --accent:#b5450a; --accent-d:#8f3506; --accent-bright:#ff6a1a; --accent-soft:rgba(181,69,10,.09);
  --ok:#1c7a3d; --err:#b42318;
  --fd:'Barlow Condensed','Arial Narrow',sans-serif; --fb:'IBM Plex Sans',Arial,sans-serif;
  --r:3px; --max:1180px;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--fb);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--fd);font-weight:600;line-height:1.08;letter-spacing:.01em;margin:0 0 .5em;text-transform:uppercase}
h1{font-size:clamp(2.4rem,5.4vw,4rem)} h2{font-size:clamp(1.7rem,3.4vw,2.5rem)} h3{font-size:1.35rem}
p{margin:0 0 1em} a{color:var(--accent);text-underline-offset:3px} a:hover{color:var(--accent-d)}
:focus-visible{outline:3px solid var(--accent-bright);outline-offset:2px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--dark);color:#fff;padding:.6em 1em;z-index:200}
.skip:focus{left:8px;top:8px}
/* pasek techniczny */
.topbar{background:var(--dark);color:#c9cfd5;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:1em;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none} .topbar a:hover{text-decoration:underline}
/* nagłówek */
.hdr{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:90}
.hdr .wrap{display:flex;align-items:center;gap:18px;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.logo-mark{width:42px;height:42px;flex:none}
.logo-tx{font-family:var(--fd);font-weight:700;font-size:1.45rem;line-height:1;letter-spacing:.04em}
.logo-tx small{display:block;font-family:var(--fb);font-weight:600;font-size:.62rem;letter-spacing:.32em;color:var(--steel)}
.nav{display:flex;gap:2px;align-items:center}
.nav a{text-decoration:none;color:var(--ink);font-weight:600;font-size:.95rem;padding:.55em .8em;border-radius:var(--r)}
.nav a:hover{background:var(--accent-soft);color:var(--accent-d)}
.nav a[aria-current="page"]{color:var(--accent-d);box-shadow:inset 0 -3px 0 var(--accent)}
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;text-decoration:none;border-radius:var(--r);padding:.8em 1.4em;font-size:1rem;border:2px solid transparent;cursor:pointer;line-height:1.2}
.btn-p{background:var(--accent);color:#fff} .btn-p:hover{background:var(--accent-d);color:#fff}
.btn-g{border-color:var(--ink);color:var(--ink);background:transparent} .btn-g:hover{background:var(--ink);color:#fff}
.btn-d{background:var(--accent-bright);color:#191007} .btn-d:hover{background:#ff7f3d;color:#191007}
.btn-tel{white-space:nowrap}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:.5em .6em;cursor:pointer}
/* hero */
.hero{background:var(--dark);color:#eef1f3;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(180deg,#000 0%,transparent 85%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:44px;padding-top:56px;padding-bottom:56px;position:relative;align-items:center}
.kicker{display:inline-flex;align-items:center;gap:.6em;font-size:.85rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:.8em}
.kicker::before{content:"";width:34px;height:3px;background:var(--accent-bright)}
.hero p.lead{font-size:1.15rem;color:#c9cfd5;max-width:34em}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:1.4em 0 1.2em}
.hero-spec{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0;font-size:.82rem;color:#aeb6bd}
.hero-spec li{border:1px solid var(--dark-line);border-radius:var(--r);padding:.3em .7em}
.hero-spec b{color:#fff}
.hero-fig{margin:0;position:relative}
.hero-fig .frame{border:1px solid var(--dark-line);padding:10px;background:#101318;position:relative}
.hero-fig img{width:100%}
.hero-fig figcaption{display:flex;justify-content:space-between;gap:1em;font-size:.8rem;color:#9aa3ab;padding-top:8px}
.dim{font-family:var(--fd);letter-spacing:.14em;color:var(--accent-bright)}
/* sekcje */
.sec{padding:64px 0}
.sec-head{display:flex;align-items:baseline;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:30px}
.sec-num{font-family:var(--fd);font-weight:700;color:var(--accent);font-size:1rem;letter-spacing:.2em}
.sec-head h2{margin:0;flex:1}
.sec-head .more{font-size:.9rem;font-weight:700;white-space:nowrap}
/* wiersze usług */
.svc-row{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:36px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line)}
.svc-row:last-child{border-bottom:0}
.svc-row.flip .svc-tx{order:-1}
.svc-ph{margin:0;border:1px solid var(--line);background:var(--card);padding:8px}
.svc-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.svc-hero .frame{border:1px solid var(--dark-line);padding:10px;background:#101318}
.svc-hero .frame img{width:100%;aspect-ratio:4/3;object-fit:cover}
.svc-ph img{width:100%}
.svc-tx .n{font-family:var(--fd);color:var(--accent);letter-spacing:.2em;font-weight:600}
.svc-tx h3{font-size:clamp(1.5rem,2.6vw,2rem);margin:.1em 0 .4em}
.svc-tx h3 a{color:var(--ink);text-decoration:none} .svc-tx h3 a:hover{color:var(--accent-d)}
.tagrow{display:flex;gap:8px;flex-wrap:wrap;margin:.8em 0;list-style:none;padding:0}
.tagrow li{font-size:.8rem;border:1px solid var(--line);background:var(--card);border-radius:99px;padding:.2em .8em;color:var(--steel)}
/* przekrój */
.layers{background:var(--dark);color:#e8ebee}
.layers .sec-head{border-color:#3a424b} .layers .sec-head h2{color:#fff}
.layer-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
.layer-svg{width:100%;height:auto}
.layer-list{list-style:none;margin:0;padding:0;counter-reset:l}
.layer-list li{border:1px solid var(--dark-line);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;background:#191e23}
.layer-list b{display:flex;gap:.6em;align-items:center;font-family:var(--fd);font-size:1.2rem;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.layer-list b .dot{width:14px;height:14px;flex:none;border-radius:50%}
.layer-list p{margin:.4em 0 0;color:#b9c1c8;font-size:.95rem}
/* realizacje teaser */
.g-teaser{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
.g-teaser figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.g-teaser img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .4s ease}
.g-teaser a:hover img{transform:scale(1.03)}
.g-big{grid-column:span 7} .g-sm{grid-column:span 5;display:grid;gap:14px}
.g-sm-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g-teaser figcaption{position:absolute;left:0;right:0;bottom:0;font-size:.78rem;background:linear-gradient(transparent,rgba(10,12,14,.82));color:#fff;padding:26px 10px 8px}
/* proces */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--line);background:var(--card)}
.steps li{padding:20px 18px;border-left:1px solid var(--line);position:relative}
.steps li:first-child{border-left:0}
.steps .st{font-family:var(--fd);font-size:2rem;font-weight:700;color:var(--accent);line-height:1}
.steps b{display:block;margin:.4em 0 .3em;font-size:1rem}
.steps p{font-size:.88rem;color:var(--steel);margin:0}
/* opinie */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.quote{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--r);padding:20px 22px;margin:0}
.quote p{font-size:1.1rem;margin-bottom:.6em}
.quote footer{font-size:.82rem;color:var(--steel)}
.note{font-size:.88rem;color:var(--steel);background:var(--accent-soft);border:1px dashed var(--accent);border-radius:var(--r);padding:10px 14px}
/* faq */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700;padding:14px 18px;list-style:none;display:flex;justify-content:space-between;gap:1em;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--fd);font-size:1.6rem;color:var(--accent);line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 18px 16px;color:var(--ink2)}
/* cta + formularz */
.cta{background:var(--dark);color:#e8ebee}
.cta .sec-head{border-color:#3a424b}.cta h2{color:#fff}
.cta-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:44px;align-items:start}
.contact-lines{list-style:none;margin:1.2em 0;padding:0;font-size:1.05rem}
.contact-lines li{margin-bottom:.5em}
.contact-lines a{color:#fff;font-weight:700}
.form{background:#fff;color:var(--ink);border-radius:var(--r);padding:26px;border-top:6px solid var(--accent)}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f-fld{margin-bottom:12px;display:flex;flex-direction:column}
.f-fld label{font-weight:700;font-size:.9rem;margin-bottom:4px}
.f-fld input,.f-fld select,.f-fld textarea{font:inherit;padding:.65em .8em;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink)}
.f-fld input:focus,.f-fld select:focus,.f-fld textarea:focus{border-color:var(--accent);outline:2px solid rgba(181,69,10,.25)}
.f-fld .e{font-size:.82rem;color:var(--err);min-height:1.2em}
.f-check{flex-direction:row;gap:.6em;align-items:flex-start;font-size:.85rem}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.f-msg{border-radius:var(--r);padding:12px 14px;margin-bottom:12px;display:none}
.f-msg.ok{display:block;background:#e5f4ea;border:1px solid var(--ok);color:#14532d}
.f-msg.err{display:block;background:#fdeceb;border:1px solid var(--err);color:#7a1f16}
/* stopka */
.ftr{background:#101317;color:#c3c9cf;font-size:.92rem}
.ftr .wrap{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;padding-top:44px;padding-bottom:30px}
.ftr h2,.ftr h3{color:#fff;font-size:1.1rem;letter-spacing:.08em}
.ftr a{color:#e8ebee} .ftr ul{list-style:none;margin:0;padding:0} .ftr li{margin-bottom:.35em}
.ftr-bottom{border-top:1px solid var(--dark-line)}
.ftr-bottom .wrap{display:flex;justify-content:space-between;gap:1em;padding-top:14px;padding-bottom:70px;flex-wrap:wrap;font-size:.82rem;color:#8b939b}
/* okruchy */
.crumb{font-size:.85rem;color:var(--steel);padding:14px 0 0}
.crumb ol{list-style:none;display:flex;gap:.5em;margin:0;padding:0;flex-wrap:wrap}
.crumb li+li::before{content:"/";margin-right:.5em;color:#9aa3ab}
/* strona usługa */
.svc-hero{background:var(--dark);color:#e8ebee}
.svc-hero .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:40px;padding-top:46px;padding-bottom:46px;align-items:center}
.svc-hero p.lead{color:#c3c9cf}
.prose{max-width:62em} .prose h2{margin-top:1.8em} .prose ul{padding-left:1.2em} .prose li{margin-bottom:.4em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.specbox{border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:18px 20px}
.specbox h3{margin-top:0}
/* galeria */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.filters button{font:inherit;font-weight:700;font-size:.9rem;padding:.5em 1.1em;border:1.5px solid var(--ink);background:transparent;border-radius:99px;cursor:pointer;color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);color:#fff}
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.g-grid figure{margin:0;background:var(--card);border:1px solid var(--line)}
.g-grid button{all:unset;display:block;cursor:pointer;width:100%}
.g-grid button:focus-visible{outline:3px solid var(--accent-bright);outline-offset:2px}
.g-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.g-grid figcaption{font-size:.82rem;color:var(--steel);padding:8px 10px 10px}
/* lightbox */
.lb{position:fixed;inset:0;background:rgba(10,12,14,.92);display:none;align-items:center;justify-content:center;z-index:300;padding:20px}
.lb.open{display:flex}
.lb img{max-width:min(1100px,94vw);max-height:82vh;object-fit:contain;background:#000}
.lb-cap{color:#fff;text-align:center;font-size:.9rem;margin-top:10px;max-width:90vw}
.lb button{position:absolute;background:none;border:1px solid #555;color:#fff;font-size:1.4rem;width:46px;height:46px;border-radius:50%;cursor:pointer}
.lb .prev{left:12px}.lb .next{right:12px}.lb .close{top:12px;right:12px}
/* sticky mobile */
.stickybar{display:none}
/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
/* responsywność */
@media(max-width:1020px){
  .hero .wrap,.layer-grid,.cta-grid,.svc-hero .wrap{grid-template-columns:1fr;gap:28px}
  .steps{grid-template-columns:repeat(2,1fr)} .steps li{border-left:0;border-top:1px solid var(--line)}
  .g-big{grid-column:span 12} .g-sm{grid-column:span 12}
  .g-grid{grid-template-columns:repeat(2,1fr)}
  .ftr .wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--card);flex-direction:column;align-items:stretch;border-bottom:2px solid var(--ink);padding:8px}
  .nav.open{display:flex} .burger{display:block}
  .btn-tel.hdr-tel{display:none}
  .svc-row,.svc-row.flip{grid-template-columns:1fr} .svc-row.flip .svc-tx{order:0}
  .quotes,.two,.f-row{grid-template-columns:1fr}
}
@media(max-width:640px){
  body{font-size:1rem;padding-bottom:64px}
  .sec{padding:44px 0}
  .g-grid{grid-template-columns:1fr}
  .g-sm-row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .topbar{display:none}
  .stickybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;background:#101317;border-top:1px solid var(--dark-line);padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:8px}
  .stickybar a{flex:1;text-align:center;font-weight:700;text-decoration:none;border-radius:var(--r);padding:.8em .4em;font-size:.95rem}
  .stickybar .s-tel{background:var(--accent-bright);color:#191007}
  .stickybar .s-form{background:transparent;color:#fff;border:1.5px solid #4a525b}
  .ftr-bottom .wrap{padding-bottom:90px}
}
@media print{.hdr .nav,.burger,.stickybar,.hero-cta,.cta,.filters{display:none}}