:root{
  --sage:#b4c6b6; --sage-2:#a3bfae; --olive:#6b7c5f; --olive-d:#4d5c44;
  --cream:#f6f3ec; --ink:#1d261f; --oak:#d9bd8f; --white:#fff;
  --r:28px; --gutter:clamp(18px,4vw,56px);
  --f-head:'Bricolage Grotesque',system-ui,sans-serif;
  --f-serif:'Instrument Serif',Georgia,serif;
  --f-body:'DM Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
body{font-family:var(--f-body);background:var(--cream);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
.wrap{padding-inline:var(--gutter);max-width:1360px;margin-inline:auto}
.eyebrow{font:700 .78rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--olive-d)}
h2{font:800 clamp(2.4rem,6vw,5rem)/.98 var(--f-head);letter-spacing:-.03em}
h2 em{font:italic 400 1.08em/1 var(--f-serif);letter-spacing:0;color:var(--olive)}
.glass{background:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.6);box-shadow:0 8px 30px rgba(40,60,45,.1),inset 0 1px 0 rgba(255,255,255,.7)}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 1.6rem;border-radius:999px;font:700 1rem/1 var(--f-body);text-decoration:none;border:0;cursor:pointer;transition:transform .25s,background .25s,color .25s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:var(--cream)}
.btn-primary:hover{background:var(--olive-d)}
.btn-glass{color:var(--ink)}
:focus-visible{outline:3px solid var(--olive-d);outline-offset:3px;border-radius:8px}

/* NAV */
.nav{position:fixed;z-index:50;top:14px;left:50%;transform:translateX(-50%);width:min(1160px,calc(100% - 28px));display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem .6rem .55rem 1.1rem;border-radius:999px}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.logo img{width:86px;height:auto;border-radius:18px;margin:-10px 0;display:block}
.nav ul{display:flex;gap:1.6rem;list-style:none}
.nav ul a{text-decoration:none;font-weight:500;font-size:.95rem}
.nav ul a:hover{color:var(--olive-d)}
.nav .btn{padding:.8rem 1.2rem;font-size:.92rem}
@media (max-width:820px){.nav ul{display:none}}

/* HERO */
.hero{position:relative;min-height:100svh;padding:120px var(--gutter) 70px;display:grid;place-items:center;text-align:center;overflow:hidden;
  background:radial-gradient(60% 50% at 15% 20%,#dcebe1 0,transparent 70%),radial-gradient(50% 50% at 90% 80%,#e9d9b8 0,transparent 70%),var(--sage)}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.6rem}
.eyes{width:min(560px,86vw);height:auto;overflow:visible}
.hero h1{font:800 clamp(3rem,10.5vw,9.5rem)/.9 var(--f-head);letter-spacing:-.045em}
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em}
.hero h1 .w span{display:inline-block}
.hero h1 em{font:italic 400 1em/.9 var(--f-serif);letter-spacing:-.01em;color:var(--olive-d)}
.hero p.lead{max-width:34rem;font-size:clamp(1.05rem,2vw,1.3rem)}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.hours-chip{display:inline-flex;gap:.7rem;align-items:center;padding:.55rem 1rem;border-radius:999px;font-size:.88rem;font-weight:500}
.hours-chip i{width:8px;height:8px;border-radius:50%;background:#3c9d5d;box-shadow:0 0 0 4px rgba(60,157,93,.22)}
.scroll-hint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}

/* DUO */
.duo{background:linear-gradient(var(--sage) 0,var(--cream) 62%);padding:0 var(--gutter) clamp(40px,6vw,80px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2.4vw,28px);max-width:1100px;margin:0 auto;position:relative;z-index:2}
.duo-wrap{background:var(--cream)}
.ph{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--sage-2);margin-top:calc(-1 * clamp(40px,9vw,120px))}
.ph-m{margin-top:clamp(10px,3vw,50px)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph figcaption{display:none}
.ph.empty img{display:none}
.ph.empty figcaption{display:grid;place-items:center;height:100%;font:italic 400 1.3rem/1.2 var(--f-serif);color:var(--olive-d);padding:1rem;text-align:center;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.18) 14px 28px)}
/* MARQUEE */
.marquee{background:var(--olive-d);color:var(--cream);overflow:hidden;white-space:nowrap;padding:1.05rem 0}
.marquee div{display:inline-flex;gap:2.4rem;padding-right:2.4rem;animation:mq 32s linear infinite}
.marquee span{font:400 1.7rem/1 'Anton',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.marquee span:nth-child(even){font:italic 400 1.9rem/1 var(--f-serif);text-transform:none;letter-spacing:0;color:var(--oak)}
@keyframes mq{to{transform:translateX(-100%)}}

/* USŁUGI */
section{padding:clamp(70px,11vw,150px) 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(2rem,5vw,4rem)}
.head p{max-width:26rem;color:#3d4a40}
.services{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.card{background:var(--white);border-radius:var(--r);padding:1.7rem;display:flex;flex-direction:column;gap:.7rem;min-height:230px;grid-column:span 2;transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(50,70,55,.14)}
.card .n{font:400 .95rem/1 var(--f-serif);font-style:italic;color:var(--olive)}
.card h3{font:800 1.45rem/1.1 var(--f-head);letter-spacing:-.02em}
.card p{color:#4a574d;font-size:.97rem}
.card.big{grid-column:span 3;background:var(--olive-d);color:var(--cream);min-height:300px;justify-content:space-between}
.card.big p{color:#dbe6dc}
.card.big .n{color:var(--oak)}
.card.big .btn{align-self:flex-start;background:var(--cream);color:var(--ink)}
.card.wide{grid-column:span 3}
@media (max-width:900px){.services{grid-template-columns:1fr 1fr}.card,.card.big,.card.wide,.services .card:nth-last-child(-n+2){grid-column:span 1}.card.big,.card.wide{grid-column:span 2}}
@media (max-width:560px){.services{grid-template-columns:1fr}.card,.card.big,.card.wide{grid-column:span 1!important}}

/* PORÓWNANIE */
.compare{background:var(--sage)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cmp>div{border-radius:var(--r);padding:clamp(1.5rem,3vw,2.6rem)}
.cmp .bad{background:rgba(255,255,255,.4);border:1px dashed rgba(29,38,31,.35)}
.cmp .good{background:var(--ink);color:var(--cream)}
.cmp h3{font:800 1.7rem/1.1 var(--f-head);letter-spacing:-.02em;margin-bottom:1.1rem}
.cmp ul{list-style:none;display:grid;gap:.85rem}
.cmp li{padding-left:1.8rem;position:relative}
.cmp .bad li::before{content:"✕";position:absolute;left:0;opacity:.55}
.cmp .good li::before{content:"✓";position:absolute;left:0;color:var(--oak);font-weight:700}
.cmp .bad{opacity:.85}
@media (max-width:760px){.cmp{grid-template-columns:1fr}}

/* OPRAWKI */
.frames{padding-bottom:0;overflow:hidden}
.hpin{position:relative;min-height:78vh;display:flex;align-items:center}
.htrack{width:max-content}
.htrack{display:flex;gap:18px;padding-inline:var(--gutter);will-change:transform}
.frame{flex:0 0 auto;height:min(62vh,520px);aspect-ratio:3/4;border-radius:var(--r);overflow:hidden;position:relative;background:var(--sage)}
.frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .8s}
.frame:hover img{transform:scale(1.09)}
.frame:nth-child(even){margin-top:56px}
.frames .foot{padding:2.2rem var(--gutter) clamp(70px,11vw,150px);max-width:1360px;margin-inline:auto;display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;color:#3d4a40}
@media (max-width:899px){.frame{height:auto;width:min(72vw,300px)}.htrack{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem}.frame{scroll-snap-align:center}.frame:nth-child(even){margin-top:0}}

/* PROMOCJE */
.promos{background:var(--olive-d);color:var(--cream)}
.promos h2 em{color:var(--oak)}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.promo{border-radius:var(--r);padding:clamp(1.6rem,3.5vw,3rem);min-height:360px;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;position:relative;overflow:hidden}
.promo.a{background:var(--sage);color:var(--ink)}
.promo.b{background:var(--oak);color:var(--ink)}
.promo .big{font:800 clamp(5rem,13vw,10rem)/.8 var(--f-head);letter-spacing:-.06em}
.promo .big small{font:italic 400 .33em/1 var(--f-serif);letter-spacing:0;margin-left:.15em}
.promo h3{font:800 1.6rem/1.1 var(--f-head);letter-spacing:-.02em;margin-bottom:.4rem}
.promo p{max-width:24rem}
@media (max-width:760px){.pgrid{grid-template-columns:1fr}}

/* OPINIE */
.score{display:flex;align-items:center;gap:1rem}
.score b{font:800 clamp(3.4rem,8vw,6rem)/.8 var(--f-head);letter-spacing:-.05em}
.stars{color:#e0a82e;letter-spacing:.12em;font-size:1.15rem}
.score small{display:block;color:#3d4a40;font-size:.92rem}
.reviews{columns:3 300px;column-gap:16px}
.rev{break-inside:avoid;background:var(--white);border-radius:var(--r);padding:1.5rem;margin-bottom:16px}
.rev p{font:400 1.2rem/1.35 var(--f-serif)}
.rev footer{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;font-size:.9rem}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;background:var(--olive)}
.rev footer span{display:block;color:#6a766c;font-size:.8rem}

.seo{padding-block:clamp(50px,8vw,100px)}
.seo-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem)}
.seo-in p{color:#3d4a40;margin-bottom:1rem}
@media (max-width:820px){.seo-in{grid-template-columns:1fr}}
/* KONTAKT */
.contact{background:var(--sage)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:start}
.info{display:grid;gap:1.4rem;margin-top:2rem}
.info div{padding-bottom:1.1rem;border-bottom:1px solid rgba(29,38,31,.18)}
.info dt{font:700 .75rem/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--olive-d);margin-bottom:.4rem}
.info dd{font:600 1.25rem/1.35 var(--f-head)}
.info a{text-decoration:none;border-bottom:2px solid var(--olive)}
form{background:var(--cream);border-radius:var(--r);padding:clamp(1.4rem,3vw,2.4rem);display:grid;gap:1rem}
form h3{font:800 1.8rem/1.05 var(--f-head);letter-spacing:-.03em}
label{display:grid;gap:.35rem;font-weight:700;font-size:.85rem}
input,textarea,select{font:inherit;font-weight:400;padding:.9rem 1rem;border-radius:14px;border:1.5px solid #cfd8cf;background:#fff;width:100%}
input:focus,textarea:focus,select:focus{outline:3px solid var(--sage-2);border-color:var(--olive)}
textarea{min-height:90px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.ok{display:none;padding:1rem;border-radius:14px;background:#dcebe1;font-weight:500}
@media (max-width:860px){.cgrid{grid-template-columns:1fr}.row{grid-template-columns:1fr}}

footer.site{background:var(--ink);color:var(--cream);padding:3rem 0 2rem}
footer.site .wrap{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;align-items:center}
footer.site a{text-decoration:none;margin-right:1.3rem;border-bottom:1px solid rgba(255,255,255,.3)}
footer.site small{opacity:.6;width:100%;margin-top:1rem}
.sticky-call{position:fixed;right:14px;bottom:14px;z-index:40;display:none;padding:.95rem 1.3rem}
@media (max-width:820px){.sticky-call{display:inline-flex}}

@media (prefers-reduced-motion:reduce){.marquee div{animation:none}*{transition:none!important}}

/* HERO ZE ZDJĘCIAMI (styl Ace & Tate) */
.logo img{width:auto;height:54px;margin:0;border-radius:0;display:block}
.hero{display:block;min-height:100svh;padding:0;background:var(--sage);color:#fff;text-align:left;position:relative;overflow:hidden}
.panels{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.panels figure{overflow:hidden;position:relative}
.panels img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,28,20,.78) 0,rgba(18,28,20,.25) 45%,rgba(18,28,20,0) 70%);pointer-events:none}
.hero-inner{position:absolute;z-index:2;left:0;right:0;bottom:0;align-items:flex-start;padding:0 var(--gutter) clamp(28px,5vw,64px);max-width:1360px;margin-inline:auto;gap:1.2rem}
.hero h1{font-size:clamp(3.2rem,11vw,10rem);color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.18)}
.hero h1 em{color:var(--sage)}
.hero p.lead{color:#f4f7f3;max-width:36rem}
.cta{justify-content:flex-start}
.btn-light{background:var(--cream);color:var(--ink)}
.btn-light:hover{background:#fff}
.hero .btn-glass{color:#fff;background:rgba(255,255,255,.16)}
.hours-chip{color:var(--ink)}
@media (max-width:700px){
  .panels{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .panels img{object-position:center 28%}
  .hero h1{font-size:clamp(3rem,15vw,5rem)}
  .logo img{height:46px}
}

/* poprawki: nagłówek hero bez ścięć liter */
.hero h1 .w{padding:.2em .08em .24em;margin:-.2em -.08em -.24em}
/* oczy w sekcji usług */
.head-eyes{align-items:center}
.head-eyes .eyes{width:min(380px,100%);height:auto;overflow:visible;flex:0 1 380px}
@media (max-width:700px){.head-eyes .eyes{width:min(280px,80%)}}
/* mapa */
.mapa{background:var(--sage);padding-top:0}
.mapa .wrap{display:grid;gap:1rem;justify-items:start}
.mapa iframe{width:100%;height:clamp(320px,45vw,460px);border:0;border-radius:var(--r);background:var(--sage-2);display:block}

/* DREWNO: drugi kolor marki (dąb z salonu), subtelny rysunek słojów */
:root{
  --wood:#cdab77; --wood-l:#dcc293; --wood-d:#9a7444;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.22' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.27 0 0 0 0 0.12 0.55 0 0 0 -0.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wood{background-color:var(--wood-l);background-image:var(--grain);background-size:900px 420px}
/* blat z oprawkami */
.frames{background-color:var(--wood-l);background-image:var(--grain);background-size:900px 420px;position:relative}
.frames::before,.frames::after{content:"";position:absolute;left:0;right:0;height:10px;background:linear-gradient(var(--wood-d),#8f6c3d);opacity:.45}
.frames::before{top:0}.frames::after{bottom:0}
.frames .eyebrow{color:#6b4b22}
.frames h2 em{color:var(--olive-d)}
.frame{box-shadow:0 18px 34px rgba(90,60,25,.22)}
/* drewniana promocja */
.promo.b{background-color:var(--wood);background-image:var(--grain);background-size:900px 420px}
/* drewniane akcenty */
.eyebrow::before{content:"";display:inline-block;width:22px;height:3px;border-radius:2px;background:var(--wood-d);margin-right:.6rem;vertical-align:middle}
.frames .eyebrow::before{background:#6b4b22}
footer.site{position:relative}
footer.site::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;background-color:var(--wood);background-image:var(--grain);background-size:900px 420px}
.card:hover{box-shadow:0 22px 44px rgba(120,85,40,.16)}
form{box-shadow:0 0 0 6px rgba(217,189,143,.55)}

/* pasek z hasłami: drewno */
.marquee{background-color:var(--wood);background-image:var(--grain);background-size:900px 420px;color:#2a1f12;border-block:3px solid var(--wood-d)}
.marquee span:nth-child(even){color:var(--olive-d)}

/* DREWNO: prawdziwy dąb ze zdjęć salonu, nierówne krawędzie jak w prawdziwym blacie */
:root{--wood:#d9bb88;--wood-l:#e6d0a4;--wood-d:#9a7444;--grain:url("img/dab.jpg")}
.wood,.promo.b,.marquee{background-color:var(--wood-l);background-image:var(--grain);background-size:1800px auto;background-position:center top}
.frames{background-color:var(--wood-l);background-image:linear-gradient(rgba(75,45,12,.30),rgba(75,45,12,0) 26px),linear-gradient(to top,rgba(75,45,12,.30),rgba(75,45,12,0) 26px),var(--grain);background-size:100% 100%,100% 100%,1800px auto;background-position:center;padding-block:clamp(70px,11vw,140px);clip-path:polygon(0.0% 5.2px, 2.38% 9.8px, 4.76% 9.5px, 7.14% 9.6px, 9.52% 10px, 11.9% 6.5px, 14.29% 6.7px, 16.67% 8.1px, 19.05% 10px, 21.43% 5.5px, 23.81% 3.4px, 26.19% 0px, 28.57% 3.4px, 30.95% 5.5px, 33.33% 0.5px, 35.71% 5.8px, 38.1% 10px, 40.48% 10px, 42.86% 10px, 45.24% 6.2px, 47.62% 0.9px, 50.0% 1.2px, 52.38% 0px, 54.76% 0px, 57.14% 0px, 59.52% 0px, 61.9% 0px, 64.29% 0px, 66.67% 3.8px, 69.05% 4.0px, 71.43% 5.5px, 73.81% 5.5px, 76.19% 7.3px, 78.57% 6.8px, 80.95% 4.4px, 83.33% 9.9px, 85.71% 10px, 88.1% 10px, 90.48% 10px, 92.86% 8.0px, 95.24% 5.0px, 97.62% 2.7px, 100.0% 0px, 100.0% calc(100% - 10px), 97.62% calc(100% - 9.6px), 95.24% calc(100% - 5.7px), 92.86% calc(100% - 6.8px), 90.48% calc(100% - 10px), 88.1% calc(100% - 6.4px), 85.71% calc(100% - 8.5px), 83.33% calc(100% - 5.2px), 80.95% calc(100% - 0px), 78.57% calc(100% - 0px), 76.19% calc(100% - 0px), 73.81% calc(100% - 0px), 71.43% calc(100% - 1.6px), 69.05% calc(100% - 0px), 66.67% calc(100% - 2.6px), 64.29% calc(100% - 0px), 61.9% calc(100% - 0.1px), 59.52% calc(100% - 0.7px), 57.14% calc(100% - 0px), 54.76% calc(100% - 3.3px), 52.38% calc(100% - 0px), 50.0% calc(100% - 0px), 47.62% calc(100% - 1.0px), 45.24% calc(100% - 3.7px), 42.86% calc(100% - 7.9px), 40.48% calc(100% - 5.1px), 38.1% calc(100% - 0px), 35.71% calc(100% - 1.6px), 33.33% calc(100% - 6.1px), 30.95% calc(100% - 8.7px), 28.57% calc(100% - 5.6px), 26.19% calc(100% - 4.2px), 23.81% calc(100% - 8.9px), 21.43% calc(100% - 10px), 19.05% calc(100% - 5.5px), 16.67% calc(100% - 5.8px), 14.29% calc(100% - 1.3px), 11.9% calc(100% - 4.5px), 9.52% calc(100% - 10px), 7.14% calc(100% - 10px), 4.76% calc(100% - 8.8px), 2.38% calc(100% - 10px), 0.0% calc(100% - 6.6px))}
.frames::before,.frames::after{content:none}
.frames .foot{padding-bottom:clamp(30px,5vw,60px)}
.marquee{color:#2a1f12;border:0;padding-block:1.25rem;clip-path:polygon(0.0% 5px, 1.67% 5px, 3.33% 2.7px, 5.0% 3.2px, 6.67% 2.8px, 8.33% 3.0px, 10.0% 0.9px, 11.67% 0px, 13.33% 0px, 15.0% 0px, 16.67% 0px, 18.33% 0px, 20.0% 0px, 21.67% 1.2px, 23.33% 0.7px, 25.0% 0.8px, 26.67% 2.1px, 28.33% 1.3px, 30.0% 0px, 31.67% 1.6px, 33.33% 2.0px, 35.0% 2.9px, 36.67% 3.6px, 38.33% 5px, 40.0% 4.2px, 41.67% 5px, 43.33% 4.3px, 45.0% 4.7px, 46.67% 5px, 48.33% 4.0px, 50.0% 1.7px, 51.67% 1.6px, 53.33% 2.8px, 55.0% 3.3px, 56.67% 3.0px, 58.33% 3.7px, 60.0% 2.0px, 61.67% 0.2px, 63.33% 0px, 65.0% 1.7px, 66.67% 0.1px, 68.33% 0px, 70.0% 0px, 71.67% 0px, 73.33% 0px, 75.0% 0.4px, 76.67% 2.2px, 78.33% 1.2px, 80.0% 0.5px, 81.67% 0px, 83.33% 0px, 85.0% 1.5px, 86.67% 1.8px, 88.33% 0.5px, 90.0% 0px, 91.67% 1.6px, 93.33% 2.7px, 95.0% 4.5px, 96.67% 3.1px, 98.33% 3.3px, 100.0% 5px, 100.0% calc(100% - 2.1px), 98.33% calc(100% - 1.8px), 96.67% calc(100% - 3.3px), 95.0% calc(100% - 3.0px), 93.33% calc(100% - 2.7px), 91.67% calc(100% - 5px), 90.0% calc(100% - 3.4px), 88.33% calc(100% - 4.8px), 86.67% calc(100% - 3.0px), 85.0% calc(100% - 2.6px), 83.33% calc(100% - 3.6px), 81.67% calc(100% - 2.8px), 80.0% calc(100% - 5px), 78.33% calc(100% - 4.0px), 76.67% calc(100% - 3.7px), 75.0% calc(100% - 3.4px), 73.33% calc(100% - 1.9px), 71.67% calc(100% - 2.4px), 70.0% calc(100% - 3.6px), 68.33% calc(100% - 5px), 66.67% calc(100% - 5px), 65.0% calc(100% - 5px), 63.33% calc(100% - 4.5px), 61.67% calc(100% - 5px), 60.0% calc(100% - 5px), 58.33% calc(100% - 5px), 56.67% calc(100% - 3.4px), 55.0% calc(100% - 1.2px), 53.33% calc(100% - 2.1px), 51.67% calc(100% - 2.4px), 50.0% calc(100% - 0.2px), 48.33% calc(100% - 0.6px), 46.67% calc(100% - 2.0px), 45.0% calc(100% - 0.2px), 43.33% calc(100% - 0px), 41.67% calc(100% - 1.3px), 40.0% calc(100% - 1.1px), 38.33% calc(100% - 3.3px), 36.67% calc(100% - 4.9px), 35.0% calc(100% - 2.4px), 33.33% calc(100% - 0px), 31.67% calc(100% - 0.1px), 30.0% calc(100% - 0.3px), 28.33% calc(100% - 2.6px), 26.67% calc(100% - 4.3px), 25.0% calc(100% - 5px), 23.33% calc(100% - 4.2px), 21.67% calc(100% - 5px), 20.0% calc(100% - 5px), 18.33% calc(100% - 5px), 16.67% calc(100% - 5px), 15.0% calc(100% - 5px), 13.33% calc(100% - 5px), 11.67% calc(100% - 2.7px), 10.0% calc(100% - 1.7px), 8.33% calc(100% - 0px), 6.67% calc(100% - 2.1px), 5.0% calc(100% - 2.6px), 3.33% calc(100% - 5px), 1.67% calc(100% - 3.2px), 0.0% calc(100% - 5px))}
.marquee span:nth-child(even){color:#4d5c44}
.promo.b{border-radius:34px 20px 30px 24px/26px 34px 22px 32px;box-shadow:inset 0 0 0 1px rgba(75,45,12,.25),inset 0 -18px 30px -18px rgba(75,45,12,.28),0 14px 28px rgba(60,38,12,.22)}
.promo.a{border-radius:24px 32px 22px 34px/32px 22px 34px 26px}
footer.site::before{height:14px;top:-12px;background-color:var(--wood-l);background-image:var(--grain);background-size:1800px auto;clip-path:polygon(0.0% 5.3px, 2.17% 6px, 4.35% 6px, 6.52% 6px, 8.7% 6px, 10.87% 2.9px, 13.04% 2.7px, 15.22% 5.6px, 17.39% 6px, 19.57% 6px, 21.74% 3.4px, 23.91% 3.2px, 26.09% 1.6px, 28.26% 1.9px, 30.43% 2.3px, 32.61% 0px, 34.78% 0px, 36.96% 0px, 39.13% 2.7px, 41.3% 4.5px, 43.48% 2.3px, 45.65% 4.2px, 47.83% 1.8px, 50.0% 2.6px, 52.17% 0.1px, 54.35% 0px, 56.52% 2.5px, 58.7% 0.5px, 60.87% 0px, 63.04% 3.2px, 65.22% 5.6px, 67.39% 4.3px, 69.57% 6px, 71.74% 6px, 73.91% 6px, 76.09% 4.1px, 78.26% 6px, 80.43% 6px, 82.61% 6px, 84.78% 6px, 86.96% 4.7px, 89.13% 3.8px, 91.3% 1.6px, 93.48% 0px, 95.65% 0px, 97.83% 0px, 100.0% 0.7px, 100.0% calc(100% - 0px), 97.83% calc(100% - 0px), 95.65% calc(100% - 0px), 93.48% calc(100% - 0px), 91.3% calc(100% - 0px), 89.13% calc(100% - 0px), 86.96% calc(100% - 0px), 84.78% calc(100% - 0px), 82.61% calc(100% - 0px), 80.43% calc(100% - 0px), 78.26% calc(100% - 0px), 76.09% calc(100% - 0px), 73.91% calc(100% - 0px), 71.74% calc(100% - 0px), 69.57% calc(100% - 0px), 67.39% calc(100% - 0px), 65.22% calc(100% - 0px), 63.04% calc(100% - 0px), 60.87% calc(100% - 0px), 58.7% calc(100% - 0px), 56.52% calc(100% - 0px), 54.35% calc(100% - 0px), 52.17% calc(100% - 0px), 50.0% calc(100% - 0px), 47.83% calc(100% - 0px), 45.65% calc(100% - 0px), 43.48% calc(100% - 0px), 41.3% calc(100% - 0px), 39.13% calc(100% - 0px), 36.96% calc(100% - 0px), 34.78% calc(100% - 0px), 32.61% calc(100% - 0px), 30.43% calc(100% - 0px), 28.26% calc(100% - 0px), 26.09% calc(100% - 0px), 23.91% calc(100% - 0px), 21.74% calc(100% - 0px), 19.57% calc(100% - 0px), 17.39% calc(100% - 0px), 15.22% calc(100% - 0px), 13.04% calc(100% - 0px), 10.87% calc(100% - 0px), 8.7% calc(100% - 0px), 6.52% calc(100% - 0px), 4.35% calc(100% - 0px), 2.17% calc(100% - 0px), 0.0% calc(100% - 0px))}
form{box-shadow:0 0 0 6px rgba(217,187,136,.6)}

/* DREWNO v3: jasny dąb jak w pierwszej wersji, bez prostych rantów, z porami i deskami */
:root{
  --wood:#d9bd8f; --wood-l:#e9d5ae; --wood-d:#a98350;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='420'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.24' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.27 0 0 0 0 0.12 0.8 0 0 0 -0.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --pores:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='300'%3E%3Cfilter id='p' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.22 0 0 0 0 0.1 1.1 0 0 0 -0.52'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --planks:linear-gradient(180deg,rgba(255,250,235,.16) 0 27%,rgba(110,72,28,.18) 27% 27.6%,rgba(255,255,255,0) 27.6% 61%,rgba(110,72,28,.16) 61% 61.5%,rgba(110,72,28,.07) 61.5% 100%);
  --wood-layers:var(--pores),var(--grain),var(--planks);
}
.wood,.promo.b{background-color:var(--wood-l);background-image:var(--wood-layers);background-size:500px 300px,900px 420px,100% 100%;background-position:0 0}
.frames{background-color:var(--wood-l);background-image:var(--wood-layers);background-size:500px 300px,900px 420px,100% 100%;background-position:0 0;padding-block:clamp(70px,11vw,140px)}
.frames::before,.frames::after{content:none}
footer.site::before{background-color:var(--wood-l);background-image:var(--pores),var(--grain);background-size:500px 300px,900px 420px}
/* pasek z hasłami: wraca stary, ciemnozielony */
.marquee{background:var(--olive-d);color:var(--cream);border:0;clip-path:none;padding-block:1.05rem}
.marquee span:nth-child(even){color:var(--oak)}

/* nierówny brzeg stołu: pod spodem zielone tło sekcji poniżej, bez białych prześwitów */
.frames{position:relative;z-index:1}
.compare{margin-top:-16px;padding-top:calc(clamp(70px,11vw,150px) + 16px)}

/* kadry bliskie: oko w górnej połowie ekranu */
.panels figure:first-child img{object-position:center 52%}
.panels figure:last-child img{object-position:center 36%}
@media (max-width:700px){.panels figure:first-child img{object-position:center 50%}.panels figure:last-child img{object-position:center 34%}}

/* PRZEŁĄCZNIK OPRAWEK */
.panels .viewer{position:relative;background:radial-gradient(70% 60% at 50% 42%,#e4eee6 0,var(--sage) 70%);display:grid;place-items:center}
.vnav{position:absolute;top:50%;z-index:3;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--ink);font:400 2rem/1 var(--f-body);cursor:pointer;opacity:0;transition:opacity .3s,transform .3s;display:grid;place-items:center;padding-bottom:5px}
.vnav.next{right:20px}.vnav.prev{left:20px}
.viewer:hover .vnav,.viewer:focus-within .vnav{opacity:1}
.vnav:hover{transform:scale(1.08);background:rgba(255,255,255,.7)}
@media (hover:none){.vnav{opacity:1;width:44px;height:44px}}
.vlabel{position:absolute;top:96px;left:0;right:0;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem .7rem;align-items:baseline;color:var(--ink);pointer-events:none;text-align:center;padding-inline:20px}
.vlabel span{font:800 1.25rem/1 var(--f-head);letter-spacing:-.02em}
.vlabel em{font:italic 400 1.25rem/1 var(--f-serif);color:var(--olive-d)}
.vlabel i{font:700 .78rem/1 var(--f-body);font-style:normal;letter-spacing:.12em;opacity:.65}
.vlabel small{flex-basis:100%;font:500 .78rem/1.2 var(--f-body);opacity:.6;margin-top:.2rem}
.hero-inner{pointer-events:none}
.hero-inner a,.hero-inner .hours-chip{pointer-events:auto}
@media (max-width:700px){.vlabel{top:auto;bottom:calc(50% + 10px)}}

/* HERO: sam tytuł, adres w lewym dolnym rogu, "Zobacz oprawki" w prawym */
.hero-inner{gap:1.4rem}
.hero h1{margin-top:auto}
.hero-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;width:100%}
.hero-bottom .btn{pointer-events:auto}
/* podpis oprawek: "Co się nosi", strzałki obok, mniejsze */
.vlabel{position:absolute;top:60%;bottom:auto;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:.9rem;padding-inline:20px;pointer-events:none}
.vlabel .vtext{display:grid;gap:.25rem;justify-items:center;text-align:center}
.vlabel .vtext small{font:700 .68rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--olive-d);flex-basis:auto;opacity:1;margin:0}
.vlabel .vtext div{display:flex;gap:.55rem;align-items:baseline;flex-wrap:wrap;justify-content:center}
.vlabel .vtext span{font:800 1.25rem/1 var(--f-head);letter-spacing:-.02em}
.vlabel .vtext em{font:italic 400 1.25rem/1 var(--f-serif);color:var(--olive-d)}
.vlabel .vtext i{font:700 .72rem/1 var(--f-body);font-style:normal;letter-spacing:.12em;opacity:.6}
.vlabel .vnav{position:static;width:32px;height:32px;margin:0;font-size:1.25rem;opacity:1;pointer-events:auto;padding-bottom:3px;flex:none}
.viewer:hover .vnav{opacity:1}
@media (max-width:700px){.vlabel{top:auto;bottom:36%}}

/* TELEFON: oprawki u góry, zdjęcie z osobą na dole */
@media (max-width:700px){
  .panels .viewer{order:-1}
  .vlabel{top:auto;bottom:14px}
  .vlabel .vtext span,.vlabel .vtext em{font-size:1.1rem}
  .panels figure:last-child img{object-position:center 50%}
  .panels figure:first-child img{object-position:center 45%}
}

@media (max-width:700px){
  .hero-bottom{gap:.6rem}
  .hours-chip{font-size:.72rem;padding:.5rem .8rem;line-height:1.25}
}

/* PRZEŁĄCZNIK OPRAWEK: zwykłe zdjęcia PNG (bez 3D) */
.viewer .vimg{position:absolute;left:8%;right:8%;top:120px;bottom:26%;width:84%;height:auto;max-height:calc(100% - 120px - 26%);margin:auto;object-fit:contain;opacity:1;mix-blend-mode:normal;padding:0;transition:opacity .26s ease,transform .26s ease;inset:auto;left:8%;top:120px}
.viewer.swap .vimg{opacity:0;transform:translateY(8px) scale(.98)}
.viewer .vimg{inset:120px 8% 26% 8%;width:84%;height:calc(100% - 120px - 26%);padding:0}
@media (max-width:700px){.viewer .vimg{inset:84px 6% 22% 6%;width:88%;height:calc(100% - 84px - 22%)}}

/* PRZEŁĄCZNIK NAD OPRAWKAMI, "Co się nosi" nad przełącznikiem; oprawki mniejsze, czyste, z cieniem z CSS */
.vlabel{top:112px;bottom:auto;left:0;right:0;flex-direction:column;gap:.55rem;align-items:center;justify-content:flex-start}
.vlabel .vtitle{font:700 .72rem/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--olive-d)}
.vlabel .vrow{display:flex;align-items:center;gap:.9rem;pointer-events:none}
.vlabel .vtext{display:flex;gap:.55rem;align-items:baseline;flex-wrap:wrap;justify-content:center}
.viewer .vimg{inset:auto;left:50%;top:calc(50% + 70px);width:min(60%,520px);height:auto;max-height:46%;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 22px 22px rgba(38,54,42,.28))}
.viewer.swap .vimg{opacity:0;transform:translate(-50%,-46%) scale(.98)}
@media (max-width:700px){
  .vlabel{top:100px}
  .viewer .vimg{top:calc(50% + 60px);width:min(78%,360px);max-height:44%}
}

/* OPRAWKI NA BLACIE: czyste PNG położone na drewnie, z cieniem rzuconym na blat */
.htrack{align-items:center;gap:clamp(40px,6vw,110px);padding-inline:var(--gutter) calc(var(--gutter) + 8vw)}
.piece{flex:0 0 auto;width:clamp(300px,40vw,640px);margin:0;position:relative}
.piece img{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 24px rgba(72,44,12,.36)) drop-shadow(0 8px 7px rgba(72,44,12,.30));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.piece:hover img{transform:translateY(-8px) rotate(var(--r,0deg))}
.piece figcaption{margin-top:30px;text-align:center;font:700 .74rem/1 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:#6b4b22}
.piece figcaption em{font:italic 400 1.15rem/1 var(--f-serif);letter-spacing:0;text-transform:none;color:var(--olive-d);margin-left:.4rem}
.p1{--r:-3deg;transform:rotate(-4deg) translateY(-10px)}
.p2{--r:2deg;transform:rotate(3deg) translateY(40px)}
.p3{--r:-2deg;transform:rotate(-2deg) translateY(-30px)}
.p4{--r:3deg;transform:rotate(5deg) translateY(30px)}
@media (max-width:899px){.piece{width:min(78vw,420px);scroll-snap-align:center}.p1,.p2,.p3,.p4{transform:none}.htrack{padding-inline:var(--gutter);gap:28px}}

/* 2026-11-02 — poprawki klienta */
/* pasek z markami: płynna pętla (dwie identyczne połowy) */
@keyframes mq{to{transform:translateX(-50%)}}
/* oprawki w pierwszym ekranie: mniejsze i zawsze nad hasłem (miejsce liczy skrypt) */
@media (min-width:701px){
  .viewer .vimg{top:var(--vtop,40%);width:min(80%,440px);max-height:var(--vmax,30%)}
}
/* bez blatu z oprawkami: sekcja porównania bez zakładki */
.compare{margin-top:0;padding-top:clamp(70px,11vw,150px)}
/* Kim jesteśmy */
.about-in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,5vw,5rem);align-items:start}
.about-in h2{margin-top:.8rem}
.about-txt p{color:#3d4a40;margin-bottom:1rem;max-width:36rem}
.about-txt .lead-big{font:600 clamp(1.25rem,2.2vw,1.6rem)/1.35 var(--f-head);color:var(--ink);letter-spacing:-.01em}
@media (max-width:820px){.about-in{grid-template-columns:1fr}}
/* Dwa powody */
.promo p{max-width:32rem}
/* Częste pytania */
.faq{padding-top:0}
.faq-list{display:grid;gap:10px;max-width:920px}
.faq details{background:var(--white);border-radius:18px;padding:1.1rem 1.4rem}
.faq summary{cursor:pointer;font:700 1.15rem/1.3 var(--f-head);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.6rem/1 var(--f-body);color:var(--olive)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:.7rem;color:#3d4a40;max-width:46rem}
/* Kontakt: rezerwacja online zamiast formularza */
.book{background:var(--cream);border-radius:var(--r);padding:clamp(1.6rem,3.5vw,2.8rem);display:grid;gap:1.1rem;box-shadow:0 0 0 6px rgba(217,187,136,.6)}
.book h3{font:800 clamp(1.8rem,3.4vw,2.6rem)/1.02 var(--f-head);letter-spacing:-.03em}
.book p{color:#3d4a40;max-width:30rem}
.book p a{color:inherit;font-weight:700}
.book .btn{justify-self:start;font-size:1.1rem;padding:1.15rem 1.8rem}