@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../fonts/archivo-pl.woff2) format('woff2-variations'),url(../fonts/archivo-pl.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;src:url(../fonts/archivo-pl-ext.woff2) format('woff2-variations'),url(../fonts/archivo-pl-ext.woff2) format('woff2');unicode-range:U+0102-0107,U+010C-0111,U+0118-011B,U+0139-0144,U+0147-0148,U+0150-0151,U+0154-0155,U+0158-0165,U+016E-0171,U+0179-017E}
/* Layout: schemat jednokreskowy – energia płynie w dół strony, od linii SN do odbiorcy. Biało-czerwona identyfikacja z logo.
   Najpierw dowód (zdjęcie brygady + czerwony pas liczb), potem zakres ze zdjęciami, realizacje, wezwanie do kontaktu. */
:root{
  color-scheme:light;
  --bg:#FFFFFF;         /* tło */
  --ink:#17191C;        /* tekst */
  --wire:#4C535B;       /* tekst drugorzędny */
  --rule:#E2E4E7;       /* linie */
  --soft:#F4F5F6;       /* tło zdjęć w trakcie ładowania, pasy */
  --red:#D10303;        /* czerwień z logo */
  --red-deep:#A30202;   /* stopka, hover */
  --on-red:#FFFFFF;
  --font:"Archivo","Archivo Variable",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --step--1:.875rem; --step-0:1.0625rem; --step-1:1.3125rem; --step-3:clamp(1.9rem,4.2vw,2.75rem); --step-4:clamp(2.5rem,6.4vw,4.9rem);
  --pad:clamp(18px,4vw,40px);
  --gut-l:max(var(--pad),env(safe-area-inset-left,0px)); --gut-r:max(var(--pad),env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:104px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
.wrap{max-width:1200px;margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1.08}
h2{font-size:var(--step-3);font-weight:820;font-stretch:112%;letter-spacing:-.01em}
h3{font-size:var(--step-1);font-weight:720;font-stretch:104%;line-height:1.2}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:var(--gut-l);top:-80px;z-index:50;background:var(--red);color:var(--on-red);padding:10px 16px;border-radius:4px;font-weight:700;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 10px)}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--wire);max-width:34ch}
section{padding-block:clamp(56px,8vw,96px)}
.sec-head{display:grid;gap:12px;margin-bottom:clamp(28px,4vw,44px);max-width:60ch}
.sec-head p{color:var(--wire)}
.dash{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.dash li{padding-left:18px;position:relative}
.dash li::before{content:"";position:absolute;left:0;top:.66em;width:9px;height:2px;background:var(--red)}
.k{font-size:var(--step--1);color:var(--red);font-weight:720;margin-bottom:4px}

/* przyciski */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:4px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit;line-height:1.2}
.btn-red{background:var(--red);color:var(--on-red)}
.btn-red:hover{background:var(--red-deep)}
.btn-line{border-color:currentColor;background:transparent;color:inherit}
.btn-line:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
.btn-white{background:var(--on-red);color:var(--red)}
.btn-white:hover{background:#FFECEC}
.btn-big{min-height:56px;padding:14px 24px;font-size:1.1rem}
.btn svg{flex:none}

/* nagłówek */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:3px solid var(--red)}
.top .wrap{display:flex;align-items:center;gap:clamp(16px,2.6vw,40px);min-height:88px;padding-block:12px}
.logo{display:block;flex:none}
.logo img{height:60px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px);margin-left:auto}
.nav > a,.nav-toggle{text-decoration:none;color:var(--wire);font:inherit;font-size:1rem;font-weight:600;padding-block:8px;white-space:nowrap;background:none;border:0;cursor:pointer}
.nav > a:hover,.nav-toggle:hover{color:var(--red)}
.nav > a.hl,.nav-toggle.hl{color:var(--red);box-shadow:inset 0 -2px 0 var(--red)}
.nav-group{position:relative}
.nav-toggle{display:inline-flex;align-items:center;gap:8px;padding-inline:0}
.nav-toggle::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-toggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.sub{display:none;position:absolute;z-index:30;top:calc(100% + 14px);left:-20px;min-width:280px;list-style:none;margin:0;padding:8px;background:var(--bg);border:1px solid var(--rule);border-top:3px solid var(--red);border-radius:0 0 6px 6px;box-shadow:0 18px 36px rgba(23,25,28,.16)}
.sub::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.nav-toggle[aria-expanded="true"] + .sub{display:block}
.sub a{display:block;padding:10px 14px;border-radius:4px;color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap}
.sub a:hover{background:var(--soft);color:var(--red)}
.sub li:first-child a{color:var(--wire);font-weight:560}
.sub li:first-child{border-bottom:1px solid var(--rule);margin-bottom:6px;padding-bottom:6px}
.sub a[aria-current="page"]{color:var(--red);background:#FFF4F4;box-shadow:inset 3px 0 0 var(--red)}
.here{display:none}
.top .tel{min-height:46px;padding:10px 18px;font-size:1rem;flex:none}
@media (min-width:981px) and (max-width:1180px){.nav{gap:20px}.nav > a,.nav-toggle{font-size:.95rem}.top .tel .lbl{display:none}.top .tel{padding:10px 13px}.logo img{height:54px}}
.menu-btn{display:none;align-items:center;gap:8px;min-height:46px;padding:8px 12px;border:2px solid var(--ink);border-radius:4px;background:var(--bg);color:var(--ink);font:inherit;font-weight:700;font-size:1rem;cursor:pointer;flex:none}
.menu-btn i{position:relative;display:block;width:18px;height:2px;background:currentColor;transition:background .15s}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .2s}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
.menu-btn[aria-expanded="true"] i{background:transparent}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
@media (max-width:980px){
  html{scroll-padding-top:84px}
  .top .wrap{min-height:70px;padding-block:10px;gap:10px}
  .logo{margin-right:auto}
  .logo img{height:48px}
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;top:calc(100% + 3px);left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);padding:4px var(--gut-r) 18px var(--gut-l);border-bottom:3px solid var(--red);box-shadow:0 18px 30px rgba(23,25,28,.14);max-height:calc(100vh - 80px);max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
  .top.open .nav{display:flex}
  .nav > a,.nav-toggle{padding:13px 2px;font-size:1.12rem;font-weight:650;color:var(--ink);border-bottom:1px solid var(--rule);text-align:left;width:100%;justify-content:space-between}
  .nav > a.hl,.nav-toggle.hl{box-shadow:inset 4px 0 0 var(--red);padding-left:14px;color:var(--red)}
  .sub{position:static;min-width:0;padding:4px 0 10px 12px;border:0;border-bottom:1px solid var(--rule);border-radius:0;box-shadow:none}
  .sub::before{display:none}
  .sub li:first-child{border:0;margin:0;padding:0}
  .sub a{padding:8px 12px;font-size:1rem;font-weight:560;border-left:2px solid var(--rule);border-radius:0}
  .sub a[aria-current="page"]{border-left-color:var(--red);box-shadow:none;font-weight:700}
  .here{display:block;border-top:1px solid var(--rule);background:var(--soft);font-size:.92rem;line-height:1.3}
  .here .wrap{min-height:0;padding-block:8px;display:flex;gap:8px;align-items:center;flex-wrap:nowrap;overflow:hidden}
  .here a{color:var(--wire);text-underline-offset:3px;flex:none}
  .here a::after{content:"";display:inline-block;width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin:0 2px 1px 10px}
  .here b{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top.open .here{display:none}
  html:has(.here){scroll-padding-top:122px}
  .crumbs{display:none}
}
@media (max-width:520px){.top .tel .lbl{display:none}.top .tel{padding:8px 12px}.logo img{height:44px}}
@media (max-width:370px){.menu-btn .ml{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.menu-btn{padding:8px 13px}}

/* hero: nagłówek i schemat jednokreskowy jako jedyna grafika – zdjęcia tylko w realizacjach */
.hero{padding-block:clamp(48px,8vw,104px) clamp(28px,4vw,48px)}
.hero-tx{display:grid;gap:22px;max-width:780px}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.4rem);font-weight:880;font-stretch:115%;letter-spacing:-.02em;line-height:.98}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.sld{width:100%;height:auto;display:block;margin-top:clamp(40px,6vw,72px);padding-top:clamp(20px,3vw,28px);border-top:1px solid var(--rule)}
.sld .bus{stroke:var(--rule);stroke-width:2;fill:none}
.sld .sym{stroke:var(--ink);stroke-width:2;fill:none}
.sld .mask{fill:var(--bg)}
.sld .flow{stroke:var(--red);stroke-width:3;fill:none;stroke-dasharray:1100;stroke-dashoffset:1100;animation:flow 1.9s cubic-bezier(.45,0,.2,1) .3s forwards}
@keyframes flow{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.sld .flow{animation:none;stroke-dashoffset:0}}
.sld a{text-decoration:none}
.sld .lbl{font-family:var(--font);font-stretch:85%;font-weight:700;font-size:15px;fill:var(--ink)}
.sld .sub{font-family:var(--font);font-stretch:85%;font-weight:500;font-size:13px;fill:var(--wire)}
.sld a:hover .lbl,.sld a:focus .lbl{fill:var(--red)}
@media (max-width:700px){.sld{display:none}}

/* zakres – szyna */
#zakres{border-top:1px solid var(--rule)}
.line{list-style:none;margin:0;padding:0;position:relative}
.line::before{content:"";position:absolute;left:31px;top:8px;bottom:8px;width:2px;background:var(--ink)}
.line::after{content:"";position:absolute;left:30px;top:8px;width:4px;height:var(--fill,0px);background:var(--red);border-radius:2px;transition:height 1.8s cubic-bezier(.4,0,.2,1)}
.line .sym{transition:color .5s ease 1.2s}
.line .node.on .sym{color:var(--red)}
@media (prefers-reduced-motion:reduce){.line::after,.line .sym{transition:none}}
.node{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);gap:0 32px;padding-block:22px;align-items:start}
.node + .node{border-top:1px solid var(--rule)}
.line .sym{width:64px;height:64px;display:grid;place-items:center;position:relative;z-index:1;color:var(--ink);background:var(--bg)}
.line .sym svg{width:46px;height:46px;stroke:currentColor;stroke-width:2;fill:none}
.node .tx{display:grid;gap:8px;align-content:start;grid-column:2/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px}
.node .tx > .k,.node .tx > h3,.node .tx > p,.node .tx > .see,.node .tx > .more-link{grid-column:1}
.node .tx > .dash{grid-column:2;grid-row:1/span 4;align-self:start;padding-top:22px;font-size:.98rem}
.node .tx p{color:var(--wire);max-width:52ch}
.see{color:var(--red);font-weight:650;font-size:.95rem;justify-self:start;text-decoration:underline;text-underline-offset:3px}
.see:hover{text-decoration-thickness:2px}
.more-link{justify-self:start;font-weight:720;font-size:.98rem;color:var(--ink);text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:5px;margin-top:4px}
.more-link::after{content:"";display:inline-block;margin:0 2px 2px 9px;vertical-align:middle;width:7px;height:7px;border-top:2px solid var(--red);border-right:2px solid var(--red);transform:rotate(45deg);transition:transform .2s}
.more-link:hover{color:var(--red)}
.more-link:hover::after{transform:translateX(3px) rotate(45deg)}
@media (max-width:820px){
  .node{grid-template-columns:64px minmax(0,1fr);gap:0 18px}
  .node .tx{grid-template-columns:minmax(0,1fr)}
  .node .tx > .dash{grid-column:1;grid-row:auto;padding-top:4px}
  .node .tx > .see{order:5}
  .node .tx > .more-link{order:6}
}

/* zdjęcia – wspólne */
.ph{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.ph.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ph figure{margin:0;position:relative}
.ph img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px;background:var(--soft)}
.ph .tag{position:absolute;left:8px;top:8px;background:var(--bg);color:var(--ink);font-size:.82rem;font-weight:750;padding:3px 9px;border-radius:2px;pointer-events:none}
.ph .tag.po{background:var(--red);color:var(--on-red)}
.zoom{display:block;position:relative;border-radius:3px;overflow:hidden}
.zoom img{transition:transform .35s ease}
.zoom:hover img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.zoom img{transition:none}.zoom:hover img{transform:none}}
.zoom .more{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:6px;background:rgba(23,25,28,.82);color:#fff;font-weight:750;font-size:.9rem;line-height:1;padding:7px 10px;border-radius:3px;pointer-events:none}
.zoom .more::before{content:"";width:12px;height:10px;border:2px solid currentColor;border-radius:2px;box-shadow:3px -3px 0 -1px rgba(23,25,28,.82),3px -3px 0 1px currentColor}

/* realizacje – każda praca w osobnej karcie: opis i jej zdjęcia razem */
.real{background:var(--soft)}
.jobs{display:grid;gap:18px}
.more-jobs{margin-top:18px}
.job{background:var(--bg);border:1px solid var(--rule);border-left:4px solid var(--red);border-radius:4px;padding:clamp(20px,3vw,30px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px clamp(20px,3.5vw,40px);align-items:start;scroll-margin-top:104px}
.job.noph{grid-template-columns:minmax(0,1fr)}
.job .tx{display:grid;gap:10px;align-content:start}
.job .tx p{color:var(--wire);max-width:62ch}
.job .tx .dash{font-size:.98rem}
.job:target{box-shadow:0 0 0 3px var(--red)}
@media (max-width:820px){.job{grid-template-columns:minmax(0,1fr)}}
.real-foot{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,32px)}

/* wezwanie w połowie strony */
.cta-band{padding-block:clamp(40px,6vw,64px)}
.cta-box{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:center;border:3px solid var(--red);border-radius:6px;padding:clamp(22px,4vw,40px)}
.cta-box h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
.cta-box p{color:var(--wire);margin-top:8px}
.cta-box .ctas{margin:0}
@media (max-width:820px){.cta-box{grid-template-columns:minmax(0,1fr)}}

/* proces */
.alt{background:var(--soft)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:s}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{counter-increment:s;padding:0 24px 24px 0;display:grid;gap:10px;align-content:start}
.steps li::before{content:counter(s);font-weight:880;font-stretch:120%;font-size:2.6rem;line-height:1;color:var(--red)}
.steps li::after{content:"";order:-1;height:3px;margin-bottom:12px;background:linear-gradient(var(--red),var(--red)) 0 0/0% 100% no-repeat var(--rule)}
.steps li:first-child::after{background-size:100% 100%}
/* z JS: kreska przechodzi kolejno przez kroki 1–4, gdy sekcja wjedzie na ekran */
.steps.wait li:first-child:not(.on)::after{background-size:0% 100%}
.steps li.on::after{background-size:100% 100%;transition:background-size 1.1s cubic-bezier(.4,0,.2,1);transition-delay:var(--d,0s)}
.steps p{color:var(--wire)}

#faq{border-top:1px solid var(--rule)}
#praca{border-top:1px solid var(--rule)}

/* praca */
.job-cta > div{max-width:760px}
.job-cta .lead{margin-top:16px;max-width:52ch}
.job-cta .ctas{margin-top:22px}

/* faq */
.faq{max-width:820px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:680;font-size:1.1rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:12px;height:12px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 0 22px;color:var(--wire);max-width:66ch}

/* kontakt – czerwony pas */
.contact{background:var(--red);color:var(--on-red);border-top:0}
.contact h2{color:var(--on-red)}
.contact .sec-head p,.ch .lab{color:var(--on-red)}
.cgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,64px);align-items:start}
@media (max-width:860px){.cgrid{grid-template-columns:minmax(0,1fr)}}
.ch{display:grid;gap:26px}
.ch .row{display:grid;gap:6px}
.ch .lab{font-size:var(--step--1);font-weight:600}
.ch .area{font-size:.95rem;line-height:1.45;max-width:36ch}
.ch .big{font-size:clamp(1.7rem,5vw,2.6rem);font-weight:840;font-stretch:112%;line-height:1.1;text-decoration:none}
.ch .mid{font-size:clamp(1.1rem,3.4vw,1.45rem);font-weight:700;text-decoration:none;overflow-wrap:anywhere}
.ch .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.ch .btn{min-height:42px;padding:8px 14px;font-size:.95rem}
.ch .person{font-size:.95rem;margin-top:4px}
.ch .person a{font-weight:700;text-underline-offset:3px}
.contact :focus-visible{outline-color:var(--on-red)}
.copied{font-size:var(--step--1);font-weight:600;min-height:1.2em}

/* formularz – biała karta na czerwonym pasie */
.form{background:var(--bg);color:var(--ink);border-radius:6px;padding:clamp(20px,3vw,32px);display:grid;gap:14px;scroll-margin-top:104px}
.form h3{font-size:1.35rem}
.fnote{color:var(--wire)}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.frow{grid-template-columns:minmax(0,1fr)}}
.fld{display:grid;gap:6px;min-width:0}
.fld label{font-weight:650;font-size:.95rem}
.opt{font-weight:400;color:var(--wire)}
.form input,.form select,.form textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--bg);border:1.5px solid #9AA1A9;border-radius:4px;padding:11px 12px;min-height:48px;width:100%;min-width:0}
.form textarea{resize:vertical;min-height:130px}
.form input[type=file]{padding:9px;border-style:dashed}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--red);outline-offset:1px;border-color:var(--ink)}
.form [aria-invalid="true"]{border-color:var(--red);background:#FFF6F6}
.fhelp{font-size:var(--step--1);color:var(--wire);line-height:1.45}
.form .btn{justify-self:start}
.form :focus-visible{outline-color:var(--red)}
.fstatus{font-weight:650;min-height:1.4em}
.fstatus.ok{color:#11662B}
.fstatus.err{color:var(--red-deep)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* wejście kart przy przewijaniu (tylko z JS, bez „ogranicz ruch”; elementy już widoczne nie są ruszane) */
.rv{opacity:0;transform:translateY(18px)}
.rv.in{opacity:1;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}
@media print{.rv{opacity:1!important;transform:none!important}}

/* 1. płynne przejścia między stronami (Chrome, Edge, Safari; reszta przełącza normalnie) */
@view-transition{navigation:auto}
.top{view-transition-name:naglowek}
::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* 2. „obwód zamknięty” po wysłaniu formularza */
.fstatus.done{display:flex;align-items:center;gap:14px}
.done svg{width:96px;height:32px;flex:none;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;overflow:visible}
.done .w{animation:jtsLive .3s ease .7s forwards}
.done .w.blade{transform-box:view-box;transform-origin:40px 20px;transform:rotate(-35deg);animation:jtsClose .45s cubic-bezier(.5,0,.3,1.35) .25s forwards,jtsLive .3s ease .7s forwards}
.done .pivot{fill:var(--bg)}
.done span{opacity:0;animation:jtsIn .35s ease .8s forwards}
@keyframes jtsClose{to{transform:rotate(0deg)}}
@keyframes jtsLive{to{stroke:var(--red)}}
@keyframes jtsIn{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.done .w.blade{animation:none;transform:none;stroke:var(--red)}.done .w{animation:none;stroke:var(--red)}.done span{animation:none;opacity:1}}

/* postęp wysyłania formularza */
.fstatus.sending{display:flex;align-items:center;gap:12px;color:var(--ink)}
.wire{position:relative;flex:1 1 auto;max-width:240px;height:4px;background:var(--rule);border-radius:2px;overflow:hidden}
.wire i{position:absolute;inset:0;background:var(--red);transform-origin:left center;transform:scaleX(0);transition:transform .2s linear}
.fstatus .pct{font-variant-numeric:tabular-nums}

/* słuchawka „dzwoni” po najechaniu, logo „iskrzy” */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  a[href^="tel:"]:hover svg{animation:jtsRing .55s ease}
  .logo{position:relative}
  .logo::after{content:"";position:absolute;left:-6px;top:-4px;width:30%;height:calc(100% + 8px);pointer-events:none;opacity:0;
    background:radial-gradient(closest-side,rgba(255,214,90,.95),rgba(255,120,60,.55) 40%,rgba(209,3,3,0) 75%);mix-blend-mode:multiply}
  .logo:hover::after{animation:jtsZap .6s steps(1,end)}
  .logo:hover img{animation:jtsZapImg .6s steps(1,end)}
}
@keyframes jtsRing{0%,100%{transform:rotate(0)}15%{transform:rotate(-16deg)}30%{transform:rotate(14deg)}45%{transform:rotate(-12deg)}60%{transform:rotate(10deg)}75%{transform:rotate(-4deg)}}
@keyframes jtsZap{0%{opacity:0}10%{opacity:1}22%{opacity:.15}34%{opacity:.9}48%{opacity:0}62%{opacity:.6}74%,100%{opacity:0}}
@keyframes jtsZapImg{0%,100%{filter:none}10%,34%{filter:drop-shadow(0 0 5px rgba(209,3,3,.55)) brightness(1.08)}22%,48%{filter:none}62%{filter:drop-shadow(0 0 3px rgba(209,3,3,.4))}}

/* 4. schemat na górze: po najechaniu prąd płynie od linii SN do wskazanego elementu */
.sld .hot{stroke:var(--red);stroke-width:5;fill:none;stroke-dasharray:1080;stroke-dashoffset:1080;opacity:0;transition:stroke-dashoffset .55s cubic-bezier(.45,0,.2,1),opacity .2s}
.sld a{transition:opacity .25s}
.sld .sym{transition:stroke .25s}
.sld:has(a:hover,a:focus-visible) .hot{opacity:1}
.sld:has(a:hover,a:focus-visible) .flow{opacity:.2}
.sld a:hover ~ a,.sld a:focus-visible ~ a{opacity:.3}
.sld a:hover .sym,.sld a:focus-visible .sym{stroke:var(--red)}
.sld:has(a:nth-of-type(1):hover,a:nth-of-type(1):focus-visible) .hot{stroke-dashoffset:956}
.sld:has(a:nth-of-type(2):hover,a:nth-of-type(2):focus-visible) .hot{stroke-dashoffset:734}
.sld:has(a:nth-of-type(3):hover,a:nth-of-type(3):focus-visible) .hot{stroke-dashoffset:518}
.sld:has(a:nth-of-type(4):hover,a:nth-of-type(4):focus-visible) .hot{stroke-dashoffset:310}
.sld:has(a:nth-of-type(5):hover,a:nth-of-type(5):focus-visible) .hot{stroke-dashoffset:96}
@media (prefers-reduced-motion:reduce){.sld .hot,.sld a,.sld .sym{transition:none}}

/* 5. powiększenie zdjęcia: tło i pasek pojawiają się płynnie */
.lb[open],.lb[open]::backdrop{animation:jtsIn .25s ease}
@media (prefers-reduced-motion:reduce){.lb[open],.lb[open]::backdrop{animation:none}}

/* stopka */
.foot{background:var(--red-deep);color:var(--on-red);font-size:var(--step--1);line-height:1.6}
.foot a{color:inherit;text-underline-offset:3px}
.foot-grid{padding-block:clamp(36px,5vw,52px) 26px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:28px clamp(24px,4vw,56px);align-items:start}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.firm{grid-column:1/-1}}
@media (max-width:480px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot-h{font-weight:780;font-size:1rem;font-stretch:108%;margin-bottom:2px}
.firm,.foot-contact{display:grid;gap:10px;align-content:start}
.foot-nav ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.foot-nav a,.foot-contact a{text-decoration:none}
.foot-nav a:hover,.foot-contact a:hover{text-decoration:underline}
.foot-bar{border-top:1px solid rgba(255,255,255,.22);padding-block:18px 28px;display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:start}
.foot-bar details{max-width:80ch}
.foot summary{cursor:pointer;font-weight:600}
.foot details p{margin-top:10px}
.foot :focus-visible{outline-color:var(--on-red)}

/* podstrony usług */
.crumbs{font-size:var(--step--1);padding-top:clamp(18px,3vw,26px)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 8px;color:var(--wire)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"";width:6px;height:6px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin:0 10px 0 2px}
.crumbs a{color:var(--wire);text-underline-offset:3px}
.crumbs a:hover{color:var(--red)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.s-hero{padding-block:clamp(26px,4vw,48px) clamp(44px,6vw,72px)}
.s-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px clamp(32px,6vw,80px);align-items:center}
.s-hero-tx{display:grid;gap:20px;max-width:820px}
.s-hero h1{font-size:clamp(1.85rem,7.6vw,4.1rem);font-weight:880;font-stretch:112%;letter-spacing:-.02em;line-height:1.02}
.s-hero .lead{max-width:54ch}
.s-sym{width:clamp(120px,15vw,190px);aspect-ratio:1;display:grid;place-items:center;position:relative;color:var(--ink)}
.s-sym svg{width:56%;height:56%;stroke:currentColor;stroke-width:1.6;fill:none}
.s-sym .ring{position:absolute;inset:0;width:100%;height:100%;stroke:var(--red);stroke-width:2.2;transform:rotate(-90deg)}
/* koło i symbol rysują się linią, jak schemat na stronie głównej */
.s-sym .ring circle,.s-sym .ico *{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s cubic-bezier(.45,0,.2,1) .2s forwards}
.s-sym .ico *{animation-duration:.9s;animation-delay:1s}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.s-sym .ring circle,.s-sym .ico *{animation:none;stroke-dashoffset:0}}
@media (max-width:700px){.s-hero .wrap{grid-template-columns:minmax(0,1fr)}.s-sym{display:none}}
@media (max-width:420px){.s-hero h1{font-stretch:100%}}
.s-scope{border-top:1px solid var(--rule)}
.scope{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:clamp(22px,3vw,34px) clamp(22px,3vw,40px)}
.scope li{border-top:3px solid var(--red);padding-top:16px;display:grid;gap:8px;align-content:start}
.scope p{color:var(--wire)}
.others{border-top:1px solid var(--rule)}
.olist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:12px}
.olist li{display:flex}
.olist a{flex:1;display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;border:1px solid var(--rule);border-radius:4px;text-decoration:none;font-weight:680;transition:border-color .2s,color .2s}
.olist a:hover{border-color:var(--red);color:var(--red)}
.olist svg{width:34px;height:34px;flex:none;stroke:currentColor;stroke-width:2;fill:none}

/* powiększenie zdjęć */
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0}
.lb::backdrop{background:rgba(10,11,13,.92)}
.lb-in{position:relative;width:100%;height:100%;display:grid;grid-template-rows:minmax(0,1fr) auto;padding:calc(56px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb-stage{min-height:0;display:grid}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;margin:auto;object-fit:contain;border-radius:3px}
.lb-bar{display:flex;align-items:center;gap:16px;color:#fff;padding-top:12px;max-width:1100px;margin-inline:auto;width:100%}
.lb-cap{flex:1;min-width:0;font-size:.95rem;line-height:1.4}
.lb-cap b{display:block;font-size:1.05rem;margin-bottom:2px}
.lb-n{font-variant-numeric:tabular-nums;color:#C9CDD2;font-size:.9rem;white-space:nowrap}
.lb button{font:inherit;cursor:pointer;border:2px solid #fff;background:transparent;color:#fff;border-radius:4px;min-width:48px;min-height:48px;font-weight:700}
.lb button:hover{background:rgba(255,255,255,.12)}
.lb-close{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px))}
.lb :focus-visible{outline-color:#fff}