/* Fachowe Wnętrza — popiel + dąb, krój Archivo */
:root{
  --popiel:#E2E1DE;
  --jasny:#EFEEEB;
  --biel:#FAFAF8;
  --grafit:#2E3033;
  --tekst:#1E2022;
  --szary:#5E6165;
  --beton:#97989A;
  --linia:#C9C8C4;
  --dab:#B98A57;
  --dab-ciemny:#8C5F2E;
  --max:1220px;
  --f:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--popiel);color:var(--tekst);font:400 17px/1.62 var(--f);font-stretch:100%;-webkit-font-smoothing:antialiased}
a{color:var(--tekst);text-decoration-color:var(--dab);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{color:var(--dab-ciemny)}
:focus-visible{outline:3px solid var(--dab);outline-offset:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
h1,h2,h3{margin:0 0 .5em;line-height:1.02;font-stretch:118%;font-weight:750;letter-spacing:-.02em}
h1{font-size:clamp(2.6rem,6vw,5rem)}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem)}
h3{font-size:1.3rem;font-stretch:112%;font-weight:700;letter-spacing:-.01em;line-height:1.15}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px}
.skip:focus{left:10px;top:10px;background:#fff;padding:8px 12px;z-index:99}
.lead{font-size:1.15rem;color:var(--szary);max-width:36em}

/* Nagłówek */
header.site{background:var(--popiel);border-bottom:2px solid var(--grafit);position:sticky;top:0;z-index:50}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tekst)}
.logo:hover{color:var(--tekst)}
.logo-mark{width:38px;height:38px;flex:none}
.logo b{display:block;font-size:1.15rem;font-stretch:120%;font-weight:800;letter-spacing:-.02em;line-height:1}
.logo small{display:block;font-size:.8rem;color:var(--szary);margin-top:3px}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
nav.main a{text-decoration:none;color:var(--tekst);padding:8px 12px;font-weight:500;font-size:.98rem;border-bottom:2px solid transparent}
nav.main a:hover,nav.main a[aria-current=page]{border-bottom-color:var(--dab);color:var(--tekst)}
.dd{position:relative}
.dd>ul{display:none!important;position:absolute;top:100%;left:-12px;background:var(--biel);border:2px solid var(--grafit);padding:10px!important;min-width:560px}
.dd:hover>ul,.dd:focus-within>ul{display:grid!important;grid-template-columns:1fr 1fr;column-gap:10px}
.dd>ul a{display:block;border:0;padding:6px 10px}
.dd>ul a:hover{background:var(--jasny)}
.dd-g span{display:block;font-size:.8rem;color:var(--beton);padding:10px 10px 2px}
.hdr-tel{text-decoration:none;font-weight:700;font-stretch:112%;font-size:1.15rem;line-height:1.1;text-align:right;white-space:nowrap}
.hdr-tel small{display:block;font-weight:400;font-stretch:100%;font-size:.78rem;color:var(--szary)}

.btn{display:inline-flex;align-items:center;gap:8px;background:var(--grafit);color:#fff!important;text-decoration:none;padding:14px 24px;border:2px solid var(--grafit);font:600 1rem var(--f);font-stretch:108%;cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:var(--tekst)}
.btn.ghost{background:transparent;color:var(--tekst)!important}
.btn.ghost:hover{background:var(--grafit);color:#fff!important}
.btn.ghost.light{color:#fff!important;border-color:#fff}
.btn.ghost.light:hover{background:#fff;color:var(--grafit)!important}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.menu-toggle{display:none;background:none;border:2px solid var(--grafit);padding:8px 12px;font:600 .95rem var(--f)}

/* Hero z przekrojem */
.hero{padding:64px 0 72px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:center}
.hero h1{font-size:clamp(2.6rem,5.4vw,4.6rem);font-stretch:122%;font-weight:800;max-width:10ch}
.hero-fig{margin:0}
.xsec{width:100%;height:auto;display:block;overflow:visible}
.xsec text{font:500 15px var(--f);fill:var(--tekst)}
.hero-fig figcaption{font-size:.92rem;color:var(--szary);max-width:34em;margin:8px 0 0 5%;padding-left:14px;border-left:3px solid var(--dab)}
@media (prefers-reduced-motion:no-preference){
  .xsec .ly{opacity:0;animation:lay .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d) * .14s + .15s)}
  .xsec .lbls{opacity:0;animation:fade .6s ease forwards 1.6s}
}
@keyframes lay{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

/* Sekcje */
section.block{padding:96px 0}
section.alt{background:var(--jasny);border-top:2px solid var(--grafit);border-bottom:2px solid var(--grafit)}
.head-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:44px}
.head-row h2,.head-row .lead{margin:0}

/* Usługi wg materiału */
.mats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.mat{background:var(--biel);border:2px solid var(--grafit);display:flex;flex-direction:column}
.mat-sw{height:120px;border-bottom:2px solid var(--grafit)}
.mat-body{padding:22px 22px 18px}
.mat-body p{color:var(--szary);font-size:.97rem;margin-bottom:12px}
.mat ul{list-style:none;margin:0;padding:0}
.mat li a{display:block;padding:9px 0;border-top:1px solid var(--linia);text-decoration:none;font-weight:600;font-size:1.02rem}
.mat li a:hover{color:var(--dab-ciemny)}

/* Faktury materiałów */
.sw-wood{background:
  repeating-linear-gradient(90deg,transparent 0 119px,rgba(80,50,20,.35) 119px 120px),
  repeating-linear-gradient(0deg,#C1925F 0 22px,#B4834F 22px 23px,#C99C6A 23px 45px,#7E5429 45px 46px);
  background-size:120px 46px,100% 100%}
.sw-wood{background:
  linear-gradient(90deg,rgba(0,0,0,.0) 0 100%),
  repeating-linear-gradient(0deg,#7E5429 0 1px,transparent 1px 23px),
  repeating-linear-gradient(90deg,#B98A57 0 140px,#7E5429 140px 141px,#C59767 141px 260px,#7E5429 260px 261px),
  #B98A57}
.sw-tile{background:
  repeating-linear-gradient(0deg,#9FA2A4 0 2px,transparent 2px 40px),
  repeating-linear-gradient(90deg,#9FA2A4 0 2px,transparent 2px 80px),
  linear-gradient(135deg,#E3E5E6,#CDD0D2)}
.sw-plaster{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .03' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .55 0 0 0 0 .53 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),#F1F0EC}
.sw-pipe{background:
  linear-gradient(0deg,transparent 0 34px,#8E9194 34px 50px,transparent 50px 70px,#C2C4C6 70px 82px,transparent 82px),
  repeating-linear-gradient(90deg,transparent 0 60px,#6E7174 60px 64px,transparent 64px 200px),
  #D9D9D6}
.sw-deck{background:repeating-linear-gradient(0deg,#3A3530 0 4px,#8B7057 4px 26px,#97795D 26px 28px,#8B7057 28px 34px)}
.sw-concrete{background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .3 0 0 0 0 .3 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
  radial-gradient(circle at 30% 40%,#6E7073 0 2px,transparent 3px) 0 0/37px 41px,
  radial-gradient(circle at 70% 70%,#7C7E81 0 3px,transparent 4px) 0 0/53px 47px,#A9AAAB}

/* O Krzyśku */
.me{background:var(--grafit);color:#E7E6E3}
.me h2{color:#fff}
.me-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.photo-ph{aspect-ratio:4/5;background:repeating-linear-gradient(45deg,#383B3E 0 14px,#34373A 14px 28px);border:2px dashed #6A6D71;display:flex;align-items:flex-end;padding:20px}
.photo-ph span{color:#A6A8AB;font-size:.92rem}
.me .big{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.45;color:#fff;max-width:30em}
.me p{color:#B9BBBD;max-width:36em}

/* Kroki */
.steps{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s}
.steps li{counter-increment:s;padding:0 22px 0 0;position:relative}
.steps li::before{content:counter(s);display:block;font-size:3.4rem;font-stretch:125%;font-weight:800;line-height:1;color:var(--dab);margin-bottom:14px;border-bottom:2px solid var(--grafit);padding-bottom:12px}
.steps b{display:block;font-size:1.1rem;font-stretch:110%;margin-bottom:6px}
.steps span{color:var(--szary);font-size:.95rem;display:block}

.two{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}

/* Podstrony */
.page-hero{padding:56px 0 56px;border-bottom:2px solid var(--grafit)}
.ph-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:56px;align-items:stretch}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.7rem);font-stretch:120%;max-width:16ch}
.ph-swatch{border:2px solid var(--grafit);min-height:260px}
.crumbs{font-size:.88rem;color:var(--szary);margin-bottom:24px}
.crumbs a{color:var(--szary)}
.content{display:grid;grid-template-columns:1fr 320px;gap:72px;padding-top:64px;padding-bottom:96px;align-items:start}
.prose{max-width:44em}
.prose h2{margin-top:1.7em;font-size:1.75rem}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:20px}
.prose li{margin-bottom:7px}
.prose li::marker{color:var(--dab)}
.prose table{width:100%;border-collapse:collapse;margin:14px 0 24px;font-size:.96rem;background:var(--biel);border:2px solid var(--grafit)}
.prose th,.prose td{border-bottom:1px solid var(--linia);padding:11px 14px;text-align:left;vertical-align:top}
.prose th{background:var(--grafit);color:#fff;font-weight:600}
.note{background:var(--biel);border-left:5px solid var(--dab);padding:18px 22px;margin:24px 0}
aside.side{position:sticky;top:100px;display:flex;flex-direction:column;gap:18px}
.card{background:var(--biel);border:2px solid var(--grafit);padding:24px}
aside.side ul{list-style:none;margin:0;padding:0}
aside.side li a{display:block;padding:7px 0;border-bottom:1px solid var(--linia);text-decoration:none;font-size:.96rem}
aside.side li:last-child a{border-bottom:0}
.dark-card{background:var(--grafit);color:#DADBDC}
.dark-card h3{color:#fff}
.dark-card a.tel{color:#fff;font-size:1.6rem;font-weight:800;font-stretch:118%;text-decoration:none;display:block;margin:6px 0 14px}
.dark-card .btn{background:#fff;color:var(--grafit)!important;border-color:#fff}
.dark-card .btn:hover{background:var(--popiel)}

/* FAQ */
.faq details{border-top:2px solid var(--grafit)}
.faq details:last-child{border-bottom:2px solid var(--grafit)}
.faq summary{cursor:pointer;font-weight:600;font-size:1.06rem;padding:17px 40px 17px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:1.7rem;font-weight:400;color:var(--dab-ciemny)}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--szary)}

/* Miejscowości */
.towns{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:22px 0 0}
.towns a,.towns span{display:inline-block;padding:8px 14px;border:2px solid var(--grafit);text-decoration:none;font-weight:600;font-size:.95rem;background:var(--biel)}
.towns a:hover{background:var(--grafit);color:#fff}
.towns span{border:2px solid var(--linia);background:transparent;color:var(--szary);font-weight:400}

/* CTA */
.cta-band{background:var(--dab);color:var(--tekst);padding:72px 0}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.cta-band h2{margin:0 0 8px;font-size:clamp(1.9rem,3.8vw,3rem)}
.cta-band p{margin:0;color:#3B2A18}
.cta-band .btn.ghost.light{color:var(--tekst)!important;border-color:var(--tekst)}
.cta-band .btn.ghost.light:hover{background:var(--tekst);color:#fff!important}

/* Formularz */
form.contact{display:grid;gap:16px}
form.contact label{font-weight:600;font-size:.92rem;display:block;margin-bottom:6px}
form.contact input,form.contact select,form.contact textarea{width:100%;font:inherit;padding:12px 14px;border:2px solid var(--linia);background:#fff}
form.contact input:focus,form.contact select:focus,form.contact textarea:focus{outline:none;border-color:var(--grafit)}
form.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form.contact .consent{font-size:.86rem;display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--szary)}
form.contact .consent input{width:auto;margin-top:4px;accent-color:var(--grafit)}

/* Stopka */
footer.site{background:#232527;color:#9A9C9F;padding:72px 0 30px;font-size:.93rem}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1.2fr 1fr 1fr;gap:36px}
footer.site h4{color:#fff;font-weight:700;font-stretch:112%;font-size:1.02rem;margin:0 0 14px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:7px}
footer.site a{color:#D2D3D4;text-decoration:none}
footer.site a:hover{color:var(--dab)}
footer.site .legal{border-top:1px solid #3A3D40;margin-top:48px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem}

.callbar{display:none}

@media (max-width:1060px){
  .hero-grid,.content,.me-grid,.two,.head-row,.ph-grid{grid-template-columns:1fr}
  .hero-grid{gap:28px}
  .head-row{gap:14px}
  .ph-swatch{min-height:90px}
  .mats{grid-template-columns:1fr 1fr}
  aside.side{position:static}
  .photo-ph{aspect-ratio:16/10}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps li{display:grid;grid-template-columns:64px 1fr;column-gap:16px;padding:0}
  .steps li::before{grid-row:span 2;font-size:2.6rem;border:0;padding:0;margin:0}
  footer.site .cols{grid-template-columns:1fr 1fr}
  .menu-toggle{display:block}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--popiel);border-bottom:2px solid var(--grafit);padding:10px 22px 18px;max-height:80vh;overflow:auto}
  nav.main.open{display:block}
  nav.main ul{flex-direction:column;align-items:stretch}
  .dd>ul,.dd:hover>ul{display:block!important;position:static;border:0;padding:0 0 0 10px!important;min-width:0;background:transparent}
  .hdr-tel{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .hero{padding:36px 0 48px}
  .xsec text{font-size:19px}
  section.block{padding:64px 0}
  .mats{grid-template-columns:1fr}
  .mat-sw{height:80px}
  form.contact .row{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr}
  .callbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:60;background:var(--grafit);padding:10px;gap:10px}
  .callbar a{flex:1;text-align:center;padding:12px;text-decoration:none;font-weight:700}
  .callbar .c1{background:var(--dab);color:var(--tekst)}
  .callbar .c2{background:transparent;color:#fff;border:2px solid #fff}
  body{padding-bottom:72px}
}
@media (max-width:640px){.logo small{display:none}}

/* Zdjęcia */
.hero-img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover;border:2px solid var(--grafit)}
.hero-grid{grid-template-columns:.8fr 1.2fr}
.mat-img{width:100%;height:220px;object-fit:cover;display:block;border-bottom:2px solid var(--grafit)}
.ph-photo{margin:0;border:2px solid var(--grafit);min-height:300px;overflow:hidden}
.ph-photo img{width:100%;height:100%;object-fit:cover;display:block;max-height:440px}
.xsec-card{margin:0;background:var(--popiel);padding:26px 22px 18px;border:2px solid #4A4D51}
.xsec-card figcaption{font-size:.9rem;color:var(--szary);margin-top:10px;padding-left:12px;border-left:3px solid var(--dab)}
.me-grid{grid-template-columns:1.1fr .9fr}

.case-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;gap:14px}
.case-grid figure,.gal figure{margin:0;background:var(--biel);border:2px solid var(--grafit)}
.case-grid img,.gal img{width:100%;height:100%;object-fit:cover;display:block}
.case-grid figure{display:flex;flex-direction:column}
.case-grid figure img{flex:1;min-height:0;aspect-ratio:3/4}
.case-grid .c4{grid-column:span 2;grid-row:span 1}
.case-grid .c4 img{aspect-ratio:auto}
.case-grid figcaption,.gal figcaption{padding:9px 12px;font-size:.88rem;color:var(--szary);border-top:2px solid var(--grafit)}
.case-grid .c1,.case-grid .c2,.case-grid .c3{filter:saturate(.85)}
.case-more{margin-top:22px;font-weight:600}
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gal img{aspect-ratio:4/5}
@media (max-width:1060px){.hero-grid{grid-template-columns:1fr}.case-grid{grid-template-columns:1fr 1fr}.case-grid .c4{grid-column:span 2}.gal{grid-template-columns:1fr 1fr}.me-grid{grid-template-columns:1fr}.ph-photo{min-height:0}.ph-photo img{max-height:340px}}
@media (max-width:640px){.case-grid,.gal{grid-template-columns:1fr}.case-grid .c4{grid-column:auto}.mat-img{height:180px}}
.case-grid{grid-template-columns:repeat(12,1fr)}
.case-grid .c1,.case-grid .c2,.case-grid .c3{grid-column:span 4}
.case-grid .c4{grid-column:span 6}
.case-grid .c5,.case-grid .c6{grid-column:span 3}
.case-grid figure img,.case-grid .c4 img{flex:none;height:340px;aspect-ratio:auto}
@media (max-width:1060px){.case-grid{grid-template-columns:1fr 1fr}.case-grid figure,.case-grid .c1,.case-grid .c2,.case-grid .c3,.case-grid .c5,.case-grid .c6{grid-column:auto}.case-grid .c4{grid-column:span 2}}
@media (max-width:640px){.case-grid{grid-template-columns:1fr}.case-grid .c4{grid-column:auto}.case-grid figure img,.case-grid .c4 img{height:260px}}