/* Układ: pasy na pełną szerokość, krawędzie sekcji cięte pod kątem 30° jak połać dachu */
:root{
  --zinc:#eceeee;      /* blacha ocynkowana – tło */
  --paper:#f8f9f8;
  --slate:#1d2327;     /* grafit blachodachówki – tekst/ciemne pasy */
  --slate-2:#2b343a;
  --muted:#5b666c;
  --line:#d3d8d9;
  --clay:#b0442b;      /* dachówka ceramiczna – akcent */
  --clay-ink:#8f3420;
  --timber:#d9a441;    /* drewno więźby – detale */
  --on-dark:#eef1f1;
  --f-display:"Archivo",'Arial Narrow',Arial,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --pitch:56px;
  --wrap:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--zinc);color:var(--slate);font:16px/1.6 var(--f-body)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-stretch:75%;font-weight:800;line-height:1.02;margin:0;text-wrap:balance;letter-spacing:-.01em;text-transform:uppercase}
h1{font-size:clamp(2.6rem,7vw,5.4rem)}
h2{font-size:clamp(2rem,4.5vw,3.4rem)}
h3{font-size:1.45rem;font-stretch:85%}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font:600 .78rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--clay)}
.dark .eyebrow{color:var(--timber)}
.lead{font-size:1.15rem;color:var(--muted);max-width:60ch}
.dark .lead{color:#b9c3c6}
:focus-visible{outline:3px solid var(--timber);outline-offset:3px}

/* Nagłówek */
.top{position:sticky;top:0;z-index:50;background:var(--slate);color:var(--on-dark);border-bottom:4px solid var(--clay)}
.top .wrap{display:flex;align-items:center;gap:24px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.brand svg{flex:none}
.brand b{font:800 1.3rem/1 var(--f-display);font-stretch:75%;text-transform:uppercase;letter-spacing:.02em;display:block}
.brand small{font:500 .68rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#9fabaf}
.nav{display:flex;gap:4px}
.nav a{text-decoration:none;font:600 .92rem/1 var(--f-body);padding:10px 12px;border-radius:2px;color:#d6dcdd}
.nav a:hover{color:#fff;background:var(--slate-2)}
.nav a[aria-current]{color:#fff;box-shadow:inset 0 -3px 0 var(--timber)}
.call{display:inline-flex;align-items:center;gap:8px;background:var(--clay);color:#fff;text-decoration:none;font:700 .95rem/1 var(--f-body);padding:12px 16px;border-radius:2px;white-space:nowrap}
.call:hover{background:var(--clay-ink)}
.burger{display:none;background:none;border:0;color:#fff;padding:8px;cursor:pointer}
@media (max-width:980px){
  .nav{display:flex;position:absolute;left:0;right:0;top:100%;background:var(--slate);flex-direction:column;padding:8px 16px 16px;border-bottom:4px solid var(--clay);visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .25s,transform .3s cubic-bezier(.2,.7,.2,1),visibility 0s .3s}
  .nav.open{visibility:visible;opacity:1;transform:none;transition:opacity .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
  .nav a::after{display:none}
  .nav a{padding:14px 8px;border-bottom:1px solid var(--slate-2)}
  .burger{display:block}
  .top .call span{display:none}
}

/* Przyciski */
.btn{display:inline-flex;align-items:center;gap:10px;font:700 1rem/1 var(--f-body);padding:16px 22px;border-radius:2px;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-clay{background:var(--clay);color:#fff}
.btn-clay:hover{background:var(--clay-ink)}
.btn-line{border-color:currentColor;color:inherit;background:transparent}
.btn-line:hover{background:rgba(255,255,255,.08)}

/* Pasy sekcji */
.band{padding-block:88px}
.band.dark{background:var(--slate);color:var(--on-dark)}
.band.paper{background:var(--paper)}
.cut-top{clip-path:polygon(0 var(--pitch),100% 0,100% 100%,0 100%);margin-top:calc(var(--pitch) * -1);padding-top:calc(88px + var(--pitch))}
.sec-head{display:grid;gap:14px;margin-bottom:44px;max-width:780px}

/* Hero */
.hero{position:relative;background:var(--slate);color:#fff;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(29,35,39,.95) 0%,rgba(29,35,39,.7) 48%,rgba(29,35,39,.15) 100%)}
.hero .wrap{position:relative;z-index:1;padding-block:96px 140px;display:grid;gap:26px}
.hero h1 em{font-style:normal;color:var(--timber)}
.hero .lead{color:#d8dfe1;font-size:1.2rem}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 26px;font:500 .85rem/1.3 var(--f-mono);color:#c2cbce}
.hero-meta span::before{content:"▲ ";color:var(--clay);font-size:.7em}
.page-hero .wrap{padding-block:72px 110px}

/* Fakty */
.facts{display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper);border:1px solid var(--line);position:relative;z-index:2;margin-top:-70px}
.fact{padding:26px 24px;border-right:1px solid var(--line);display:grid;gap:6px}
.fact:last-child{border-right:0}
.fact b{font:800 2.6rem/1 var(--f-display);font-stretch:75%;color:var(--slate);font-variant-numeric:tabular-nums}
.fact span{font-size:.9rem;color:var(--muted)}
@media (max-width:760px){.facts{grid-template-columns:1fr 1fr}.fact:nth-child(2){border-right:0}.fact:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* Usługi – karty */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:2px solid var(--line)}
.svc{background:var(--paper);display:grid;grid-template-rows:200px auto;text-decoration:none;color:inherit}
.svc img{width:100%;height:200px;object-fit:cover;filter:saturate(.85)}
.svc div{padding:22px 22px 26px;display:grid;gap:10px;align-content:start}
.svc p{color:var(--muted);font-size:.96rem}
.svc .more{font:600 .8rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--clay)}
.svc:hover h3{color:var(--clay)}
@media (max-width:900px){.svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* Materiały */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 .85rem/1 var(--f-mono);padding:9px 12px;border:1px solid var(--line);background:var(--paper);border-radius:2px}
.dark .chip{background:transparent;border-color:#46525a;color:#dde3e4}

/* Proces */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.step{padding:28px 22px 6px 0;border-top:3px solid #46525a;position:relative;display:grid;gap:10px;align-content:start}
.step::before{counter-increment:s;content:"0" counter(s);font:600 .85rem/1 var(--f-mono);color:var(--timber)}
.step:first-child{border-top-color:var(--timber)}
.step p{color:#b9c3c6;font-size:.95rem}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr;gap:20px}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

/* Opinie */
.rv-grid{columns:3 300px;column-gap:18px}
.rv{break-inside:avoid;margin:0 0 18px;background:var(--paper);border:1px solid var(--line);padding:22px;display:grid;gap:12px}
.rv .stars{color:var(--timber);letter-spacing:2px;font-size:1rem}
.rv q{quotes:none;display:block;white-space:pre-line;font-size:1rem}
.rv .job{font:500 .78rem/1.4 var(--f-mono);color:var(--clay-ink);background:#f3e4df;padding:6px 8px;justify-self:start}
.rv footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font:500 .8rem/1.3 var(--f-mono);color:var(--muted);border-top:1px dashed var(--line);padding-top:10px}
.rv footer b{color:var(--slate)}
.rv .ok{color:#2f7a4a}
.rv img{width:100%;max-height:260px;object-fit:cover;cursor:zoom-in}
.score{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-bottom:36px}
.score .big{font:800 5rem/1 var(--f-display);font-stretch:75%}
.score .stars{color:var(--timber);font-size:1.6rem;letter-spacing:3px}
.src{font-size:.85rem;color:var(--muted)}

/* Galeria */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{font:600 .88rem/1 var(--f-body);padding:11px 14px;border:1px solid var(--line);background:var(--paper);color:var(--slate);border-radius:2px;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--slate);color:#fff;border-color:var(--slate)}
.filters button small{font-family:var(--f-mono);opacity:.7;margin-left:4px}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.gal figure{margin:0;position:relative;background:var(--slate);aspect-ratio:4/3;overflow:hidden;cursor:zoom-in}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;font-size:.82rem;line-height:1.3;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.gal figure:focus-visible{outline:3px solid var(--timber)}
.gal-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:760px){.gal-strip{grid-template-columns:1fr 1fr}}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(14,17,19,.94);display:grid;grid-template-rows:1fr auto;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb img{max-width:100%;max-height:100%;margin:auto;object-fit:contain;align-self:center}
.lb .bar{display:flex;align-items:center;gap:12px;color:#dfe5e6;padding-top:12px}
.lb .bar p{flex:1;font-size:.95rem}
.lb .bar span{font:500 .8rem var(--f-mono);color:#9fabaf}
.lb button{background:var(--slate-2);color:#fff;border:0;width:46px;height:46px;font-size:1.3rem;cursor:pointer;border-radius:2px}
.lb button:hover{background:var(--clay)}

/* Oferta – szczegóły */
.offer{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-block:56px;border-bottom:1px solid var(--line)}
.offer:last-child{border-bottom:0}
.offer.flip .pics{order:2}
.offer .pics{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:6px;height:380px}
.offer .pics img{width:100%;height:100%;object-fit:cover;cursor:zoom-in}
.offer .pics img:first-child{grid-row:span 2}
.offer .txt{display:grid;gap:16px;min-width:0}
.offer ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.offer li{padding-left:22px;position:relative}
.offer li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;background:var(--clay);clip-path:polygon(50% 0,100% 100%,0 100%)}
@media (max-width:860px){.offer{grid-template-columns:1fr;gap:24px}.offer.flip .pics{order:0}.offer .pics{height:280px}}

.mat-table{width:100%;border-collapse:collapse;font-size:.95rem}
.mat-table th,.mat-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.mat-table th{font:600 .75rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mat-table td:first-child{font-weight:700;white-space:nowrap}
.table-wrap{overflow-x:auto;background:var(--paper);border:1px solid var(--line)}

/* O firmie */
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.two > *{min-width:0}
@media (max-width:860px){.two{grid-template-columns:1fr;gap:32px}}
.prose{display:grid;gap:16px;max-width:62ch}
.kit{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:#3a454c;border:2px solid #3a454c}
.kit div{background:var(--slate);padding:22px;display:grid;gap:8px}
.kit b{font:800 1.2rem/1.1 var(--f-display);font-stretch:85%;text-transform:uppercase}
.kit p{color:#b9c3c6;font-size:.93rem}
@media (max-width:520px){.kit{grid-template-columns:1fr}}
.cert{background:var(--paper);border:1px solid var(--line);padding:12px;cursor:zoom-in}
.area{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.area div{background:var(--paper);border:1px solid var(--line);padding:18px;display:grid;gap:4px}
.area b{font:800 1.3rem/1 var(--f-display);font-stretch:80%;text-transform:uppercase}
.area span{font:500 .78rem var(--f-mono);color:var(--muted)}
@media (max-width:700px){.area{grid-template-columns:1fr 1fr}}

/* Kontakt */
.contact-card{background:var(--slate);color:var(--on-dark);padding:32px;display:grid;gap:22px}
.contact-card dl{margin:0;display:grid;gap:16px}
.contact-card dt{font:600 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--timber);margin-bottom:4px}
.contact-card dd{margin:0;font-size:1.05rem}
.contact-card .phone{font:800 2rem/1 var(--f-display);font-stretch:80%;text-decoration:none;color:#fff}
form.quote{display:grid;gap:16px;background:var(--paper);border:1px solid var(--line);padding:32px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.row2{grid-template-columns:1fr}form.quote,.contact-card{padding:22px}}
label{display:grid;gap:6px;font-weight:600;font-size:.9rem}
input,select,textarea{font:inherit;font-weight:400;padding:12px;border:1px solid #b9c1c3;border-radius:2px;background:#fff;color:var(--slate);width:100%}
textarea{min-height:130px;resize:vertical}
.form-note{font-size:.85rem;color:var(--muted)}
.form-ok{background:#e3f1e7;color:#1f5a34;padding:12px 14px;font-weight:600}

/* CTA */
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.cta h2{max-width:18ch}

/* Stopka */
.foot{background:#121619;color:#a9b4b8;padding-block:56px 32px;font-size:.92rem}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.foot h4{font:600 .75rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--timber);margin:0 0 14px}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot .legal{margin-top:40px;padding-top:20px;border-top:1px solid #263035;display:flex;flex-wrap:wrap;gap:8px 24px;font:500 .78rem var(--f-mono)}
@media (max-width:760px){.foot .cols{grid-template-columns:1fr}}

.mobile-call{display:none}
@media (max-width:640px){
  .mobile-call{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:8px;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));background:var(--slate);border-top:3px solid var(--clay)}
  .mobile-call a{flex:1;justify-content:center}
  body{padding-bottom:76px}
  .band{padding-block:64px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* =========================================================
   DOPRACOWANIE STYLU + RUCH
   ========================================================= */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* Przejścia między podstronami (View Transitions) */
@view-transition{navigation:auto}
.top{view-transition-name:top}
::view-transition-old(root){animation:vt-out .28s var(--ease) both}
::view-transition-new(root){animation:vt-in .45s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(22px)}}

/* Faktura: blacha na rąbek stojący w ciemnych pasach */
.band.dark,.contact-card{background-image:repeating-linear-gradient(90deg,transparent 0 139px,rgba(255,255,255,.035) 139px 141px)}
.foot{background-image:repeating-linear-gradient(90deg,transparent 0 139px,rgba(255,255,255,.02) 139px 141px)}

/* Nagłówek: zwija się przy przewijaniu */
.top{transition:background-color .3s,box-shadow .3s}
.top .wrap{transition:min-height .35s var(--ease)}
.top.scrolled{background:rgba(29,35,39,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 10px 30px -12px rgba(0,0,0,.5)}
.top.scrolled .wrap{min-height:56px}
.brand svg{transition:transform .5s var(--ease-out)}
.brand:hover svg{transform:translateY(-3px)}
.progress{position:absolute;left:0;right:0;bottom:-4px;height:4px;background:var(--timber);transform-origin:0 50%;transform:scaleX(0)}

/* Menu: wsuwane podkreślenie */
.nav a{position:relative;transition:color .2s,background-color .2s}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:3px;background:var(--timber);transform:scaleX(0);transform-origin:0 50%;transition:transform .35s var(--ease-out)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{box-shadow:none}
.nav a:hover{background:transparent}
.burger svg path{transition:transform .3s var(--ease),opacity .2s;transform-origin:13px 10px}
.burger[aria-expanded="true"] svg{overflow:visible}

/* Przyciski */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s var(--ease-out),box-shadow .25s,background-color .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-clay{box-shadow:0 8px 20px -10px rgba(176,68,43,.9)}
.btn-clay::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--clay-ink);transform:translateX(-101%);transition:transform .45s var(--ease-out)}
.btn-clay:hover{background:var(--clay)}
.btn-clay:hover::before{transform:none}
.btn-line::before{content:"";position:absolute;inset:0;z-index:-1;background:currentColor;opacity:.09;transform:scaleY(0);transform-origin:50% 100%;transition:transform .35s var(--ease-out)}
.btn-line:hover{background:transparent}
.btn-line:hover::before{transform:none}
.call{transition:background-color .2s,transform .25s var(--ease-out)}
.call:hover{transform:translateY(-1px)}

/* Eyebrow z daszkiem */
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:18px;height:9px;flex:none;background:currentColor;clip-path:polygon(0 100%,50% 0,100% 100%,82% 100%,50% 36%,18% 100%)}

/* Hero: sekwencja wejścia, Ken Burns, paralaksa */
.hero .wrap > *{animation:hero-in .9s var(--ease-out) both}
.hero .wrap > :nth-child(1){animation-delay:.05s}
.hero .wrap > :nth-child(2){animation-delay:.15s}
.hero .wrap > :nth-child(3){animation-delay:.32s}
.hero .wrap > :nth-child(4){animation-delay:.44s}
.hero .wrap > :nth-child(5){animation-delay:.56s}
@keyframes hero-in{from{opacity:0;transform:translateY(26px)}}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.04em}
.hero h1 em{position:relative;display:inline-block}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.09em;background:var(--clay);transform-origin:0 50%;animation:underline 1s .9s var(--ease-out) both}
@keyframes underline{from{transform:scaleX(0)}}
.hero img.bg{animation:kenburns 22s ease-out both;transform-origin:60% 40%}
@keyframes kenburns{from{scale:1.14}to{scale:1.02}}
.hero::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--pitch);z-index:2;background:var(--zinc);clip-path:polygon(0 100%,100% 0,100% 100%)}
.page-hero::before{display:none}

/* Fakty */
.facts{box-shadow:0 30px 60px -30px rgba(29,35,39,.45);z-index:3}
.fact{position:relative;transition:background-color .3s}
.fact::after{content:"";position:absolute;left:24px;right:24px;top:0;height:3px;background:var(--clay);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-out)}
.fact:hover::after{transform:scaleX(1)}

/* Karty usług */
.svc{position:relative;overflow:hidden;transition:transform .4s var(--ease-out),box-shadow .4s}
.svc img{transition:transform .9s var(--ease-out),filter .5s}
.svc:hover{z-index:1;transform:translateY(-4px);box-shadow:0 22px 40px -22px rgba(29,35,39,.55)}
.svc:hover img{transform:scale(1.07);filter:saturate(1.05)}
.svc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--clay);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease-out)}
.svc:hover::after{transform:scaleX(1)}
.svc h3{transition:color .25s}
.svc .more i{font-style:normal;display:inline-block;transition:transform .3s var(--ease-out)}
.svc:hover .more i{transform:translateX(6px)}

/* Chipy */
.chip{transition:border-color .2s,color .2s,transform .25s var(--ease-out)}
.chip:hover{transform:translateY(-2px);border-color:var(--timber);color:var(--timber)}
.band:not(.dark) .chip:hover{color:var(--clay);border-color:var(--clay)}

/* Proces: linia rysowana przy przewijaniu */
.step{border-top-color:#3a454c}
.step::after{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--timber);transform-origin:0 50%}
.step:first-child{border-top-color:#3a454c}

/* Opinie */
.rv{transition:transform .35s var(--ease-out),box-shadow .35s,border-color .3s}
.rv:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px rgba(29,35,39,.5);border-color:#c4cbcc}
.rv q::before{content:"„";display:block;font:800 3.2rem/0.6 var(--f-display);color:var(--clay);opacity:.35;height:.5em}

/* Galeria */
.gal figure{transition:box-shadow .35s}
.gal img{transition:transform .9s var(--ease-out),filter .4s}
.gal figure:hover img{transform:scale(1.07)}
.gal figcaption{transform:translateY(6px);transition:transform .4s var(--ease-out)}
.gal figure:hover figcaption{transform:none}
.gal figure::after{content:"+";position:absolute;top:10px;right:10px;width:34px;height:34px;display:grid;place-items:center;background:var(--clay);color:#fff;font:600 1.3rem/1 var(--f-body);opacity:0;transform:scale(.6) rotate(-45deg);transition:opacity .25s,transform .35s var(--ease-out)}
.gal figure:hover::after{opacity:1;transform:none}
.filters button{transition:background-color .25s,color .25s,border-color .25s,transform .2s}
.filters button:hover{border-color:var(--slate)}
.filters button:active{transform:scale(.96)}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--ease-out)}

/* Lightbox */
.lb{opacity:0;transition:opacity .3s}
.lb.on{opacity:1}
.lb img{transition:opacity .25s,transform .4s var(--ease-out);touch-action:pan-y}
.lb img.swap{opacity:0;transform:scale(.97)}
.lb:not(.on) img{transform:scale(.94)}

/* Oferta: zdjęcia odsłaniane „połacią" */
.offer .pics img{transition:transform .9s var(--ease-out),filter .4s}
.offer .pics{overflow:hidden}
.offer .pics img:hover{filter:brightness(1.08)}

/* Kafle zaplecza / obszaru */
.kit div,.area div{transition:background-color .3s,transform .35s var(--ease-out)}
.kit div:hover{background:var(--slate-2)}
.area div:hover{transform:translateY(-3px)}

/* Formularz */
input,select,textarea{transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--clay);box-shadow:0 0 0 4px rgba(176,68,43,.15)}
.form-ok:not([hidden]){animation:hero-in .5s var(--ease-out) both}

/* Animacje sterowane przewijaniem (Chrome/Edge/Safari 26+) — bez wsparcia wszystko po prostu jest widoczne */
@supports (animation-timeline: view()) {
  .progress{animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{to{transform:scaleX(1)}}

  .hero img.bg{animation:kenburns 22s ease-out both,parallax linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 100vh}
  @keyframes parallax{to{translate:0 22%}}
  .hero .wrap{animation:hero-fade linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  @keyframes hero-fade{to{opacity:.15;transform:translateY(60px)}}

  .sec-head,.svc,.rv,.step,.fact,.chip,.offer .txt,.area div,.kit div,.gal figure,.score,.table-wrap,.prose,.contact-card,form.quote,.cta > *,.cert{
    animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes rise{from{opacity:0;transform:translateY(48px)}}
  .svc:nth-child(3n+2),.rv:nth-child(3n+2),.step:nth-child(2),.fact:nth-child(2){animation-range:entry 8% entry 78%}
  .svc:nth-child(3n),.rv:nth-child(3n),.step:nth-child(3),.fact:nth-child(3){animation-range:entry 16% entry 86%}
  .step:nth-child(4),.fact:nth-child(4){animation-range:entry 24% entry 94%}
  .chip{animation-range:entry 0% entry 100%}

  .step::after{animation:draw linear both;animation-timeline:view();animation-range:entry 30% cover 45%}
  @keyframes draw{from{transform:scaleX(0)}}

  .offer .pics{animation:roof linear both;animation-timeline:view();animation-range:entry 5% cover 40%}
  @keyframes roof{
    0%{clip-path:polygon(0 100%,50% 100%,100% 100%,100% 100%,0 100%)}
    55%{clip-path:polygon(0 55%,50% 8%,100% 55%,100% 100%,0 100%)}
    100%{clip-path:polygon(0 0,50% 0,100% 0,100% 100%,0 100%)}}
  .offer .pics img:first-child{animation:settle linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  @keyframes settle{from{transform:scale(1.18)}}

  .cut-top{animation:pitch linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes pitch{from{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}to{clip-path:polygon(0 var(--pitch),100% 0,100% 100%,0 100%)}}

  .sec-head h2{animation:track linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  @keyframes track{from{letter-spacing:.06em}}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  @view-transition{navigation:none}
}

/* =========================================================
   LOGO
   ========================================================= */
.brand{gap:12px}
.logo{flex:none;overflow:visible}
.wm{display:grid;gap:3px}
.wm b{font:800 1.75rem/.85 var(--f-display);font-stretch:68%;letter-spacing:.03em;text-transform:uppercase;color:#fff;display:block}
.wm small{font:600 .62rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:#a6b2b6;display:block}
.top.scrolled .wm b{font-size:1.55rem}
.wm b{transition:font-size .35s var(--ease)}
/* rysowanie znaku przy wejściu */
.logo .lg-roof{stroke-dasharray:62;stroke-dashoffset:0;animation:lg-draw .9s .1s var(--ease-out) both}
.logo .lg-house{stroke-dasharray:70;animation:lg-draw 1s .35s var(--ease-out) both}
.logo .lg-z{stroke-dasharray:50;animation:lg-draw .7s .7s var(--ease-out) both}
.logo .lg-chim{transform-box:fill-box;transform-origin:50% 100%;animation:lg-up .5s .95s var(--ease-out) both}
@keyframes lg-draw{from{stroke-dashoffset:var(--len,70)}}
.logo .lg-roof{--len:62}.logo .lg-house{--len:70}.logo .lg-z{--len:50}
@keyframes lg-up{from{transform:scaleY(0)}}
.brand:hover .logo{transform:none}
.logo .lg-roof,.logo .lg-chim{transition:transform .45s var(--ease-out)}
.brand:hover .lg-roof{transform:translateY(-2.5px)}
.brand:hover .lg-chim{transform:translateY(-2.5px)}
.foot .logo *{animation:none}
@media (max-width:420px){.wm small{display:none}.wm b{font-size:1.5rem}}

/* Odznaki zaufania */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--line);border:1px solid var(--line);border-top:0}
.badges div{background:#f1f3f2;padding:14px 18px 16px;display:grid;gap:4px;position:relative;padding-left:42px}
.badges div::before{content:"✓";position:absolute;left:16px;top:14px;width:18px;height:18px;display:grid;place-items:center;background:var(--clay);color:#fff;font:700 .7rem/1 var(--f-body)}
.badges b{font-size:.88rem}
.badges span{font-size:.78rem;color:var(--muted);line-height:1.35}
@media (max-width:900px){.badges{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.badges{grid-template-columns:1fr}}

/* FAQ */
.faq{display:grid;gap:8px;min-width:0}
.faq details{background:var(--paper);border:1px solid var(--line);transition:border-color .3s,box-shadow .3s}
.faq details[open]{border-color:#c4cbcc;box-shadow:0 12px 30px -24px rgba(29,35,39,.5)}
.faq summary{cursor:pointer;list-style:none;padding:18px 52px 18px 20px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--clay);clip-path:polygon(50% 0,100% 100%,0 100%);transform:rotate(180deg);transition:transform .35s var(--ease-out)}
.faq details[open] summary::after{transform:none}
.faq details p{padding:0 20px 20px;color:var(--muted)}
.faq details[open] p{animation:hero-in .45s var(--ease-out) both}
.faq details::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--ease-out),content-visibility .4s allow-discrete}
.faq details[open]::details-content{block-size:auto}
:root{interpolate-size:allow-keywords}

/* Gotowa wiadomość */
.form-ok{display:grid;gap:12px;background:#eef6f0;color:#1f4a2e;padding:16px;border-left:4px solid #2f7a4a}
.form-ok pre{margin:0;white-space:pre-wrap;font:500 .85rem/1.5 var(--f-mono);background:#fff;color:var(--slate);padding:12px;border:1px solid #cfe3d5;user-select:all}
.form-actions{display:flex;flex-wrap:wrap;gap:10px}
.form-ok .btn-line{color:var(--slate)}

/* =========================================================
   PRZEJŚCIA MIĘDZY PODSTRONAMI — „połać"
   nowa strona wjeżdża spod kalenicy, stara przygasa
   ========================================================= */
::view-transition-old(root){animation:vt-dim .55s var(--ease) both}
::view-transition-new(root){animation:vt-roof .75s var(--ease-out) both}
@keyframes vt-dim{to{opacity:.35;transform:scale(.97);filter:brightness(.6)}}
@keyframes vt-roof{
  0%{clip-path:polygon(0 100%,50% 100%,100% 100%,100% 100%,0 100%)}
  45%{clip-path:polygon(0 70%,50% 22%,100% 70%,100% 100%,0 100%)}
  100%{clip-path:polygon(0 -30%,50% -80%,100% -30%,100% 100%,0 100%)}}
.hero h1{view-transition-name:hero-title}
::view-transition-old(hero-title){animation:vt-out .3s var(--ease) both}
::view-transition-new(hero-title){animation:vt-in .6s .25s var(--ease-out) both}
.top{view-transition-name:top}
::view-transition-group(top){animation:none}
::view-transition-old(top){display:none}
::view-transition-new(top){animation:none}
/* aktywny link menu przesuwa podkreślenie między stronami */
.nav a[aria-current]::after{view-transition-name:nav-line}
::view-transition-group(nav-line){animation-duration:.55s;animation-timing-function:var(--ease-out)}

/* Fallback (Firefox): łagodne wejście strony */
@supports not (view-transition-name: none){
  main{animation:vt-in .5s var(--ease-out) both}
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* Nowe zdjęcia i opinie Google */
.gal figure .tag-new{position:absolute;top:10px;left:10px;z-index:2;background:var(--timber);color:var(--slate);font:600 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px}
.rv footer .g{color:#1a73e8;font-weight:600}

/* Filmy z budowy */
.vids{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,300px));gap:16px}
.vids figure{margin:0;display:grid;gap:8px}
.vids video{width:100%;aspect-ratio:9/16;object-fit:cover;background:#000;border:1px solid #3a454c}
.vids figcaption{font:500 .85rem/1.3 var(--f-mono);color:#b9c3c6}

/* =========================================================
   PRZEBITKI KONSTRUKCJI — zdjęcia więźb prześwitujące za tekstem
   ========================================================= */
.xray{position:relative;isolation:isolate;overflow:hidden}
.xray::before{content:"";position:absolute;inset:-12% 0;z-index:-1;
  background:var(--xr) center/cover no-repeat;
  opacity:.5;filter:grayscale(.2) contrast(1.15) brightness(.95)}
.xray::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(29,35,39,.92) 0%,rgba(29,35,39,.72) 40%,rgba(29,35,39,.38) 75%,rgba(29,35,39,.2) 100%),
    repeating-linear-gradient(90deg,transparent 0 139px,rgba(255,255,255,.035) 139px 141px)}
.band.dark.xray{background-color:var(--slate);background-image:none}
@supports (animation-timeline: view()){
  .xray::before{animation:xr-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes xr-par{from{transform:translateY(-6%) scale(1.04)}to{transform:translateY(6%) scale(1.04)}}
}

/* Hero: konstrukcja bardziej widoczna po prawej stronie */
.hero img.bg{opacity:.78;filter:contrast(1.08) saturate(.9)}
.hero::after{background:linear-gradient(100deg,rgba(29,35,39,.96) 0%,rgba(29,35,39,.82) 40%,rgba(29,35,39,.35) 75%,rgba(29,35,39,.12) 100%)}
@media (max-width:760px){.hero::after{background:linear-gradient(180deg,rgba(29,35,39,.7),rgba(29,35,39,.92))}}

/* przełącznik języka PL/CZ */
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.28);border-radius:2px;margin-right:12px;flex:none}
.lang a{font:600 .78rem/1 var(--f-mono,monospace);letter-spacing:.08em;color:rgba(255,255,255,.72);text-decoration:none;padding:9px 9px}
.lang a+a{border-left:1px solid rgba(255,255,255,.28)}
.lang a[aria-current]{background:rgba(255,255,255,.14);color:#fff}
.lang a:hover{color:#fff}
@media (max-width:760px){.lang{margin-right:8px}.lang a{padding:8px 7px}}

/* specjalność: blachodachówka modułowa */
a.svc{position:relative}
.tag-spec{position:absolute;top:12px;left:12px;z-index:2;background:var(--timber);color:var(--slate);font:600 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:7px 9px}
.chip.chip-spec{background:var(--timber);color:var(--slate);border-color:var(--timber)}
#pokrycia .txt h2{font-size:clamp(1.8rem,3.9vw,3.1rem)}

/* przed / po: dom szkieletowy */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ba figure{margin:0;position:relative;overflow:hidden;background:var(--slate);aspect-ratio:5/4;cursor:zoom-in}
.ba img{object-position:center 62%}
.ba img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-out,ease)}
.ba figure:hover img{transform:scale(1.03)}
.ba figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 16px 14px;color:#fff;font:600 .95rem/1.3 var(--f-body);background:linear-gradient(transparent,rgba(29,35,39,.85))}
.ba figcaption b{display:inline-block;margin-right:8px;background:var(--timber);color:var(--slate);font:600 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 8px;vertical-align:2px}
@media (max-width:640px){.ba{grid-template-columns:1fr}.ba figure{aspect-ratio:4/3}}

/* znak Maki Studio — tylko położenie w stopce */
.foot .legal{align-items:center}
.foot .legal .maki-znak{margin-left:auto}
@media(max-width:700px){.maki-znak{display:block;text-align:center;margin-top:1rem}.foot .legal .maki-znak{margin-left:0;width:100%}}

/* wizytówka */
.vcard{margin:18px 0 6px;cursor:zoom-in}
.vcard img{display:block;width:100%;max-width:440px;height:auto;border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.28),0 2px 6px rgba(0,0,0,.18);transform:rotate(-1.2deg);transition:transform .4s var(--ease-out,ease)}
.vcard:hover img{transform:rotate(0) scale(1.02)}