/* =====================================================================
   Sana Dente v3 - "Bordowy atelier" - ciemny, edytorialny premium
   (kierunek: nawrockiclinic.com / markiewiczclinic.com, bordo #702828)
   ===================================================================== */

/* ---------- Fonty (self-hosted) ---------- */
@font-face{
  font-family:'Playfair';
  src:url('/assets/fonts/playfair-var.woff2') format('woff2');
  font-weight:400 900; font-display:swap;
}
@font-face{
  font-family:'Cormorant';
  src:url('/assets/fonts/cormorant-500i.woff2') format('woff2');
  font-weight:500; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('/assets/fonts/montserrat-var.woff2') format('woff2');
  font-weight:100 900; font-display:swap;
}
/* fallbacki metryczne (mniejszy CLS przy swap) */
@font-face{font-family:'PlayfairFB'; src:local('Georgia'); size-adjust:113%; ascent-override:100%; descent-override:26%;}
@font-face{font-family:'MontserratFB'; src:local('Arial'); size-adjust:112%; ascent-override:93%; descent-override:24%;}

/* ---------- Design tokens ---------- */
:root{
  --bg0:#14100f;        /* tło główne (ciepła czerń) */
  --bg1:#1a1414;        /* sekcje alternatywne */
  --bg2:#221919;        /* karty */
  --ink:#f2eae3;        /* kość słoniowa */
  --mut:#bcafa9;        /* wyciszony na ciemnym */
  --bordo:#702828;      /* kolor przewodni klientki */
  --bordo2:#8b3434;
  --rose:#d9a49e;       /* akcent różano-bordowy na ciemnym */
  --cream:#f6f1ec;      /* jasne sekcje */
  --cream2:#efe8e1;
  --inkd:#241c1a;       /* tekst na jasnym */
  --mutd:#655a55;
  --line:rgba(242,234,227,.14);
  --lined:rgba(36,28,26,.16);
  --r:6px;              /* małe zaokrąglenia (wymóg klientki) */
  --serif:'Playfair','PlayfairFB',Georgia,serif;
  --ital:'Cormorant',Georgia,serif;
  --sans:'Montserrat','MontserratFB',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset / baza ---------- */
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth; overflow-x:clip; -webkit-text-size-adjust:100%}
body{
  background:var(--bg0); color:var(--ink);
  font:400 16px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img,video{max-width:100%; display:block}
img{height:auto} /* atrybut height to tylko hint proporcji, nie sztywna wysokość */
a{color:inherit; text-decoration:none}
ul,ol{list-style:none}
button{font:inherit; background:none; border:0; cursor:pointer; color:inherit}
::selection{background:var(--bordo); color:var(--ink)}
:focus-visible{outline:2px solid var(--rose); outline-offset:3px; border-radius:2px}
section{scroll-margin-top:84px}

.skip{position:fixed; left:1rem; top:-4rem; z-index:99; background:var(--bordo); color:var(--ink);
  padding:.7rem 1.2rem; border-radius:var(--r); transition:top .25s}
.skip:focus{top:1rem}

.wrap{max-width:1240px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem)}
.wrap-n{max-width:900px; margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem)}

/* ---------- Typografia wspólna ---------- */
.kick{
  font:600 11px/1 var(--sans); letter-spacing:.42em; text-transform:uppercase;
  color:var(--rose); margin-bottom:1.1rem;
}
.kick-d{color:var(--bordo)}
.h2{
  font-family:var(--serif); font-weight:480; letter-spacing:.002em;
  font-size:clamp(1.9rem,4vw,3.1rem); line-height:1.12; text-wrap:balance;
}
.h2-s{font-size:clamp(1.65rem,3vw,2.35rem)}
.body-l{font-size:16.5px; line-height:1.85; color:var(--mut); margin-top:1.3rem; max-width:56ch}
.body-m{font-size:15.5px; line-height:1.85; color:var(--mut); margin-top:1.1rem; max-width:58ch}
.body-m p+p{margin-top:1rem}
.body-m strong{color:var(--ink); font-weight:600}
.body-m a{color:var(--rose); text-decoration:underline; text-underline-offset:3px}

.num{
  display:block; font-family:var(--serif); font-weight:600; line-height:1;
  font-size:clamp(4.2rem,8vw,6.6rem); color:transparent;
  -webkit-text-stroke:1px rgba(217,164,158,.32); paint-order:stroke;
  margin:0 0 -2.1rem -3px; user-select:none; pointer-events:none;
}
.num-d{-webkit-text-stroke-color:rgba(112,40,40,.14)} /* na jasnym tle delikatniej - .30 czytało się jak przekreślenie kickera */
.num-c{margin-inline:auto; margin-bottom:-1.9rem}

/* ---------- Przyciski / linki ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 1.75rem; border-radius:4px;
  font:600 12.5px/1 var(--sans); letter-spacing:.09em; text-transform:uppercase;
  transition:transform .3s var(--ease), background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.btn svg{width:15px; height:15px; fill:currentColor; flex:none}
.btn-p{background:var(--bordo); color:var(--ink)}
.btn-p:hover{background:var(--bordo2); transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(112,40,40,.55)}
.btn-g{border:1px solid rgba(242,234,227,.35); color:var(--ink)}
.btn-g:hover{border-color:var(--rose); color:var(--rose); transform:translateY(-2px)}
.btn-pd{background:var(--bordo); color:#fdf9f6}
.btn-pd:hover{background:#5c2020; transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(112,40,40,.45)}
.btn-s{padding:.78rem 1.35rem}
.lnk{
  font:500 13.5px/1.4 var(--sans); color:var(--rose);
  text-decoration:underline; text-underline-offset:4px; text-decoration-color:rgba(217,164,158,.45);
  transition:text-decoration-color .3s;
}
.lnk:hover{text-decoration-color:var(--rose)}
.lnk-d{color:var(--bordo); text-decoration-color:rgba(112,40,40,.4)}
.lnk-d:hover{text-decoration-color:var(--bordo)}
.cta-row{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem; margin-top:1.9rem}

/* ---------- Header ---------- */
.hdr{position:fixed; inset-inline:0; top:0; z-index:50; transition:background .35s, box-shadow .35s}
.hdr.on{background:rgba(16,12,11,.94); box-shadow:0 1px 0 var(--line)}
.hdr-in{
  max-width:1400px; margin-inline:auto; display:flex; align-items:center; gap:2rem;
  padding:.85rem clamp(1rem,3vw,2.4rem);
}
.hdr-logo img{height:38px; width:auto}
.hdr-nav{display:flex; gap:clamp(1rem,2vw,1.8rem); margin-inline:auto}
.hdr-nav a{
  font:500 12px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(242,234,227,.82); padding:.6rem 0; position:relative;
}
.hdr-nav a::after{
  content:''; position:absolute; left:0; bottom:.2rem; height:1px; width:100%;
  background:var(--rose); transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.hdr-nav a:hover{color:var(--ink)}
.hdr-nav a:hover::after{transform:scaleX(1); transform-origin:left}
.hdr-cta{display:flex; align-items:center; gap:1.2rem}
.hdr-tel{display:flex; align-items:center; gap:.5rem; font:600 13px/1 var(--sans); color:var(--ink)}
.hdr-tel svg{width:15px; height:15px; fill:var(--rose)}
.hdr-tel:hover{color:var(--rose)}

/* --- dropdown "Stomatologia" (desktop) --- */
.nav-drop{position:relative}
.nav-drop > a{display:inline-flex; align-items:center; gap:.45rem}
.nav-chev{width:10px; height:7px; flex:none; transition:transform .3s var(--ease)}
.nav-drop:hover .nav-chev, .nav-drop:focus-within .nav-chev{transform:rotate(180deg)}
.drop-panel{
  position:absolute; top:100%; left:50%; transform:translate(-50%, 8px);
  min-width:270px; padding:.7rem 0; border-radius:var(--r);
  background:#1c1516; border:1px solid var(--line);
  box-shadow:0 26px 60px -18px rgba(0,0,0,.65);
  opacity:0; visibility:hidden; transition:opacity .3s, transform .35s var(--ease), visibility .3s;
}
.nav-drop:hover .drop-panel, .nav-drop:focus-within .drop-panel{
  opacity:1; visibility:visible; transform:translate(-50%, 0);
}
.drop-panel a{
  display:block; padding:.62rem 1.4rem;
  font:500 12px/1.4 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(242,234,227,.82); white-space:nowrap;
  transition:color .25s, background .25s, padding-left .3s var(--ease);
}
.drop-panel a:hover{color:var(--rose); background:rgba(112,40,40,.16); padding-left:1.7rem}
.drop-panel a::after{content:none}

.burger{display:none; width:44px; height:44px; position:relative; z-index:60}
.burger span{
  position:absolute; left:10px; right:10px; height:2px; background:var(--ink);
  transition:transform .35s var(--ease), top .35s var(--ease);
}
.burger span:first-child{top:17px}
.burger span:last-child{top:25px}
.burger.x span:first-child{top:21px; transform:rotate(45deg)}
.burger.x span:last-child{top:21px; transform:rotate(-45deg)}

/* ---------- Drawer (mobile) ---------- */
.drawer{
  position:fixed; inset:0; z-index:49; background:#120e0d; /* POD headerem (z-50): burger/X musi być klikalny */
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:5.5rem clamp(1.5rem,7vw,3rem) 2.5rem;
  overflow-y:auto; /* rozwinięta grupa Stomatologia może przekroczyć ekran */
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
.drawer.open{opacity:1; visibility:visible}
.drawer nav{display:flex; flex-direction:column}
.drawer nav a{
  font-family:var(--serif); font-size:clamp(1.7rem,7vw,2.4rem); font-weight:480;
  padding:.7rem 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s;
  transition-delay:calc(var(--i) * 55ms);
}
.drawer.open nav a{opacity:1; transform:none}
.drawer nav a:hover{color:var(--rose)}
/* rozwijana grupa "Stomatologia" w szufladzie */
.drawer-sub{border-bottom:1px solid var(--line); opacity:0; transform:translateY(14px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:calc(var(--i) * 55ms)}
.drawer.open .drawer-sub{opacity:1; transform:none}
.drawer-sub summary{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-family:var(--serif); font-size:clamp(1.7rem,7vw,2.4rem); font-weight:480;
  padding:.7rem 0; cursor:pointer; list-style:none;
}
.drawer-sub summary::-webkit-details-marker{display:none}
.drawer-sub .nav-chev{width:14px; height:10px; color:var(--rose)}
.drawer-sub[open] .nav-chev{transform:rotate(180deg)}
.drawer-sub-links{display:flex; flex-direction:column; padding:.2rem 0 1rem}
/* wyższa specyficzność niż .drawer nav a (inaczej sub-linki dziedziczą wielki serif) */
.drawer nav .drawer-sub-links a{
  font:500 14px/1.5 var(--sans); letter-spacing:.06em; color:var(--mut);
  padding:.55rem 0 .55rem 1.1rem; border-left:1px solid var(--line);
  border-bottom:0; opacity:1; transform:none; transition:color .25s, border-color .25s;
}
.drawer nav .drawer-sub-links a:hover{color:var(--rose); border-left-color:var(--rose)}
.drawer nav > .drawer-sub summary:hover{color:var(--rose)}

.drawer-cta{display:flex; flex-direction:column; gap:.9rem; margin-top:2.2rem}
.drawer-meta{margin-top:1.6rem; font-size:12.5px; color:var(--mut)}
body.lock{overflow:hidden}

/* ---------- Hero ---------- */
.hero{
  position:relative; isolation:isolate; min-height:100svh;
  display:flex; align-items:flex-end;
  padding:7.5rem 0 clamp(4rem,9vh,6.5rem);
  overflow:clip; /* wideo skalowane zoomem (1.07x) nie może wystawać spod scrima */
}
.hero-vid{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover}
html.js .hero-vid{animation:vzoom 26s ease-in-out infinite alternate}
@keyframes vzoom{from{transform:scale(1)} to{transform:scale(1.07)}}
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(80deg, rgba(13,9,8,.72) 0%, rgba(13,9,8,.34) 46%, transparent 72%),
    radial-gradient(70% 60% at 18% 85%, rgba(112,40,40,.34), transparent 70%),
    linear-gradient(to bottom, rgba(13,9,8,.6), rgba(13,9,8,.38) 42%, rgba(13,9,8,.92) 96%);
}
@media(max-width:700px){
  .hero-scrim{
    background:
      radial-gradient(80% 55% at 20% 88%, rgba(112,40,40,.36), transparent 72%),
      linear-gradient(to bottom, rgba(13,9,8,.74), rgba(13,9,8,.5) 45%, rgba(13,9,8,.95) 96%);
  }
}
.hero-side{
  position:absolute; right:clamp(1rem,2.5vw,2.4rem); top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; font:500 10.5px/1 var(--sans); letter-spacing:.5em;
  text-transform:uppercase; color:rgba(242,234,227,.4);
}
.hero-h1{font-family:var(--serif); font-weight:470; line-height:1.05; letter-spacing:.002em;
  font-size:clamp(2.55rem,7vw,5.7rem)}
.hero-h1 span{display:block}
.hero-h1-it{font-family:var(--ital); font-style:italic; font-weight:500; color:#ecd6d0}
.hero-meta{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  margin-top:1.5rem; font:600 11px/1.6 var(--sans);
  letter-spacing:.34em; text-transform:uppercase; color:var(--rose);
  text-shadow:0 1px 14px rgba(13,9,8,.7);
}
.hero-meta i{font-style:normal; opacity:.55}
@media(max-width:700px){
  .hero-meta{letter-spacing:.22em; font-size:10px; gap:.35rem .7rem}
}
.hero-lead{margin-top:1.2rem; max-width:57ch; font-size:15px; line-height:1.8; color:rgba(242,234,227,.78)}
.hero-cta{margin-top:1.9rem; display:flex; flex-wrap:wrap; gap:1rem}
.hero-note{margin-top:1.3rem; font-size:12.5px; letter-spacing:.03em; color:rgba(242,234,227,.55)}
@media(max-width:700px){.hero-note{padding-right:5rem}}
.hero-scroll{position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%)}
.hero-scroll span{display:block; width:1px; height:52px;
  background:linear-gradient(to bottom, var(--rose), transparent); overflow:hidden; position:relative}
html.js .hero-scroll span::after{
  content:''; position:absolute; inset:0; background:var(--bg0);
  animation:drop 2.2s var(--ease) infinite;
}
@keyframes drop{from{transform:translateY(-100%)} to{transform:translateY(110%)}}

/* wejście hero */
html.js .hl{opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease) var(--d,0s), transform .9s var(--ease) var(--d,0s)}
html.js body.ld .hl{opacity:1; transform:none}

/* ---------- Marquee ---------- */
.mq{background:var(--bg0); border-block:1px solid var(--line); padding:1rem 0; overflow:hidden}
.mq-track{display:flex; width:max-content}
html.js .mq-track{animation:mq 44s linear infinite}
@keyframes mq{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.mq-set{display:flex; align-items:center; white-space:nowrap}
.mq-set span{
  font:500 11px/1 var(--sans); letter-spacing:.38em; text-transform:uppercase;
  color:rgba(242,234,227,.6);
}
.mq-set b{color:var(--rose); font-size:9px; margin:0 1.7rem; font-weight:400}

/* ---------- Sekcje - wspólne ---------- */
.sec{padding-block:clamp(4.5rem,10vw,8.5rem); position:relative}
.grid-2{display:grid; gap:clamp(2.5rem,6vw,5.5rem); align-items:center}
@media(min-width:900px){
  .grid-2{grid-template-columns:1.05fr .95fr}
  .grid-2r{grid-template-columns:.95fr 1.05fr}
}
.sec-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
@media(min-width:900px){
  .sec-head{display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:end}
  .sec-head-txt{justify-self:end; align-self:end; max-width:46ch}
}
.sec-head-txt{color:var(--mut); font-size:15px; line-height:1.8}
.sec-head-c{display:block; text-align:center}
.cta-line{
  margin-top:clamp(3rem,6vw,4.5rem); border-top:1px solid var(--line); padding-top:2.1rem;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.4rem;
}
.cta-line p{font-family:var(--ital); font-style:italic; font-size:clamp(1.25rem,2vw,1.55rem); color:var(--ink)}
.cta-line .cta-row{margin-top:0}
.cta-line-d{border-top-color:var(--lined)}
.cta-line-d p{color:var(--inkd)}

/* wejścia scroll-reveal */
html.js [data-rev]{opacity:0; transform:translateY(32px);
  transition:opacity 1s var(--ease) var(--d,0s), transform 1s var(--ease) var(--d,0s)}
html.js [data-rev].in{opacity:1; transform:none}

/* ---------- 01 Protetyka ---------- */
.sec-prot{background:var(--bg0)}
.prot-ph{position:relative; justify-self:end; max-width:470px; width:100%}
.prot-ph::before{
  content:''; position:absolute; z-index:0; border-radius:var(--r);
  inset:2rem -1.15rem -1.15rem 2rem; border:1px solid rgba(217,164,158,.35);
}
.prot-ph img{position:relative; z-index:1; border-radius:var(--r); width:100%; height:auto;
  transition:transform 1.2s var(--ease)}
.prot-ph:hover img{transform:scale(1.015)}
.prot-ph figcaption{
  margin-top:1rem; font:500 10.5px/1 var(--sans); letter-spacing:.32em;
  text-transform:uppercase; color:var(--mut);
}
.rule-list{margin-top:1.6rem}
.rule-list li{
  border-top:1px solid var(--line); padding:.9rem 0 .9rem 1.7rem;
  font-size:14.5px; color:var(--mut); position:relative;
}
.rule-list li:last-child{border-bottom:1px solid var(--line)}
.rule-list li::before{content:'✦'; position:absolute; left:.15rem; top:.95rem;
  font-size:.7rem; color:var(--rose)}

/* ---------- 02 Usługi ---------- */
.sec-usl{background:var(--bg1)}
.usl{display:grid; gap:3rem}
@media(min-width:1000px){.usl{grid-template-columns:1.15fr .85fr; gap:clamp(3rem,6vw,5.5rem)}}
.usl-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.4rem;
  padding:1.05rem .4rem; border-top:1px solid var(--line);
  transition:background .35s;
}
/* bez border-bottom na ostatnim wierszu - linię domyka border-top paska CTA niżej */
.usl-i{font:600 11px/1 var(--sans); letter-spacing:.18em; color:var(--rose); opacity:.85}
.usl-n{
  font-family:var(--serif); font-weight:470; font-size:clamp(1.25rem,2.1vw,1.8rem);
  line-height:1.25; transition:transform .45s var(--ease), color .3s;
}
.usl-a{opacity:0; transform:translateX(-8px); color:var(--rose); font-size:1.1rem;
  transition:opacity .35s, transform .45s var(--ease)}
.usl-row:hover{background:rgba(112,40,40,.10)}
.usl-row:hover .usl-n{transform:translateX(10px); color:var(--rose)}
.usl-row:hover .usl-a{opacity:1; transform:none}
.usl-prev{display:none}
@media(min-width:1000px){
  .usl-prev{
    display:block; position:sticky; top:110px; aspect-ratio:4/5;
    border-radius:var(--r); overflow:hidden; background:var(--bg2);
  }
  .usl-prev img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; transform:scale(1.05); transition:opacity .55s, transform 1.4s var(--ease);
  }
  .usl-prev img.on{opacity:1; transform:none}
}

/* ---------- 03 Atuty (jasna) ---------- */
.sec-atuty{background:var(--cream); color:var(--inkd); --rose:#702828}
.atuty-grid{display:grid; gap:2.4rem}
@media(min-width:820px){.atuty-grid{grid-template-columns:repeat(3,1fr); gap:0}}
.atut{padding:0 2rem 0 2rem; position:relative}
@media(min-width:820px){
  .atut{border-left:1px solid var(--lined)}
  .atut:first-child{border-left:0; padding-left:0}
}
.atut-n{
  display:block; font-family:var(--serif); font-weight:600; font-size:3.2rem; line-height:1;
  color:transparent; -webkit-text-stroke:1px rgba(112,40,40,.45);
  margin-bottom:1.1rem; transition:color .5s;
}
.atut:hover .atut-n{color:var(--bordo)}
.atut h3{font-family:var(--serif); font-weight:530; font-size:1.4rem; margin-bottom:.7rem}
.atut p{font-size:14.5px; line-height:1.8; color:var(--mutd)}
.atuty-ph{margin-top:clamp(3rem,6vw,4.5rem)}
.atuty-ph img{width:100%; height:clamp(240px,38vw,430px); object-fit:cover; border-radius:var(--r)}
.atuty-ph figcaption{
  margin-top:1rem; font:500 10.5px/1.6 var(--sans); letter-spacing:.3em;
  text-transform:uppercase; color:var(--mutd);
}

/* ---------- 04 O nas ---------- */
.sec-onas{background:var(--bg0); overflow:clip}
.onas-ph{position:relative; padding-bottom:4.5rem}
.onas-ph-a{width:74%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--r)}
.onas-ph-b{
  position:absolute; right:0; bottom:0; width:44%;
  border-radius:var(--r); border:8px solid var(--bg0);
}
@media(max-width:899px){
  .onas-ph{padding-bottom:0}
  .onas-ph-a{width:100%; aspect-ratio:4/5}
  .onas-ph-b{display:none}
}
.onas-sub{
  font-family:var(--ital); font-style:italic; font-weight:500;
  font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--rose); margin-top:1rem;
}
@media(max-width:899px){.grid-2r .onas-ph{order:2}}

/* ---------- 05 Opinie ---------- */
.sec-op{background:var(--bg1)}
.op-wrap{max-width:880px; text-align:center}
.op-rot{display:grid; margin-top:1.5rem}
.op-q{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .7s, visibility .7s}
.op-q.on{opacity:1; visibility:visible}
.op-q p{
  font-family:var(--serif); font-weight:450; font-size:clamp(1.4rem,2.6vw,2.05rem);
  line-height:1.45; text-wrap:balance;
}
.op-q footer{margin-top:1.7rem; display:flex; flex-direction:column; gap:.5rem; align-items:center}
.op-st{color:var(--rose); letter-spacing:.35em; font-size:.85rem}
.op-q cite{font:600 11.5px/1 var(--sans); font-style:normal; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mut)}
.op-dots{display:flex; justify-content:center; gap:.2rem; margin-top:2rem}
.op-dots button{width:44px; height:44px; display:grid; place-items:center}
.op-dots button::after{content:''; width:8px; height:8px; border-radius:50%;
  border:1px solid var(--rose); transition:background .3s, transform .3s}
.op-dots button.on::after{background:var(--rose); transform:scale(1.25)}
.op-src{margin-top:1.2rem; font-size:12px; color:rgba(242,234,227,.62)}

/* ---------- Porady ---------- */
.sec-por{background:var(--bg0)}
.por-list li{
  display:flex; justify-content:space-between; align-items:center; gap:1.2rem;
  border-top:1px solid var(--line); padding:1.15rem 0;
}
.por-list li:last-child{border-bottom:1px solid var(--line)}
.por-list span{font-family:var(--serif); font-weight:470; font-size:clamp(1.05rem,1.8vw,1.3rem); line-height:1.4}
.por-list b{color:var(--rose); font-weight:400; transition:transform .4s var(--ease)}
.por-list li:hover b{transform:translate(4px,-4px)}

/* ---------- Cennik + FAQ (jasne, bordo+biel) ---------- */
.sec-cen{background:var(--cream); color:var(--inkd); --rose:#702828}
.sec-faq{background:var(--cream2); color:var(--inkd); --rose:#702828}
.cen-note{margin-top:1.1rem; font-size:14px; color:var(--mutd); max-width:52ch; margin-inline:auto}
.cen-acc{border-top:1px solid var(--lined)}
.acc{border-bottom:1px solid var(--lined)}
.acc summary{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:1.4rem;
  padding:1.25rem .2rem; cursor:pointer; list-style:none;
  transition:padding-left .35s var(--ease);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary span{font-family:var(--serif); font-weight:500; font-size:clamp(1.1rem,2vw,1.4rem); line-height:1.35}
.acc summary:hover{padding-left:.8rem; color:var(--bordo)}
.acc summary i{position:relative; width:16px; height:16px; flex:none}
.acc summary i::before,.acc summary i::after{
  content:''; position:absolute; background:var(--bordo); transition:transform .35s var(--ease);
}
.acc summary i::before{left:0; right:0; top:7px; height:2px}
.acc summary i::after{top:0; bottom:0; left:7px; width:2px}
.acc[open] summary i::after{transform:scaleY(0)}
.acc-body{padding:.3rem .2rem 1.5rem}
html.js .acc[open] .acc-body{animation:accIn .5s var(--ease)}
@keyframes accIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
.acc-body ul li{display:flex; align-items:baseline; gap:.8rem; padding:.5rem 0}
.cen-n{font-size:14.5px; color:var(--inkd)}
.cen-dots{flex:1; min-width:2rem; border-bottom:1px dotted rgba(112,40,40,.35); transform:translateY(-4px)}
.cen-p{font:600 14.5px/1.4 var(--sans); color:var(--bordo); white-space:nowrap}
.cen-more{margin-top:1.6rem; text-align:center; font-size:13.5px; color:var(--mutd)}
.acc-body>p{font-size:14.5px; line-height:1.85; color:var(--mutd); max-width:64ch}
.faq-acc summary span{font-size:clamp(1rem,1.8vw,1.2rem)}

/* ---------- Kontakt ---------- */
.sec-kon{background:var(--bg0); overflow:clip}
.sec-kon::before{
  content:''; position:absolute; inset:0 0 auto 0; height:55%; pointer-events:none;
  background:radial-gradient(55% 45% at 50% 0%, rgba(112,40,40,.30), transparent 75%);
}
.kon-head{text-align:center; position:relative}
.kon-h2{font-size:clamp(2.1rem,5vw,3.5rem)}
.kon-h2 em{font-family:var(--ital); font-style:italic; color:var(--rose)}
.kon-tel{
  display:inline-block; margin-top:1.7rem; font-family:var(--serif); font-weight:470;
  font-size:clamp(2rem,6vw,4.2rem); line-height:1.1; letter-spacing:.01em;
  border-bottom:1px solid rgba(217,164,158,.4); padding-bottom:.4rem;
  transition:color .3s, border-color .3s;
}
.kon-tel:hover{color:var(--rose); border-color:var(--rose)}
.kon-cta{justify-content:center; margin-top:2.2rem}
.kon-grid{margin-top:clamp(3.5rem,7vw,5.5rem); display:grid; gap:3rem; position:relative}
@media(min-width:900px){.kon-grid{grid-template-columns:.9fr 1.1fr; align-items:center}}
.kon-info{display:grid; gap:2.1rem; align-content:start}
.kon-info h3{
  font:600 11px/1 var(--sans); letter-spacing:.4em; text-transform:uppercase;
  color:var(--rose); margin-bottom:.7rem;
}
.kon-info p{font-size:15px; line-height:1.8; color:var(--mut)}
.kon-info a{color:var(--ink); text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:rgba(217,164,158,.35); transition:color .3s}
.kon-info a:hover{color:var(--rose)}
.kon-map{position:relative; display:block; border-radius:var(--r); overflow:hidden}
.kon-map img{width:100%; height:auto; filter:saturate(.8) brightness(.88); transition:filter .5s, transform 1.4s var(--ease)}
.kon-map:hover img{filter:none; transform:scale(1.02)}
.kon-map span{
  position:absolute; left:1rem; bottom:1rem; background:rgba(14,11,10,.86); color:var(--ink);
  font:500 12px/1 var(--sans); letter-spacing:.06em; padding:.6rem 1rem; border-radius:4px;
}

/* ---------- Stopka ---------- */
.ftr{background:#0e0b0a; border-top:1px solid var(--line); text-align:center;
  padding:3.2rem 1rem 6.8rem}
.ftr-logo{margin-inline:auto; opacity:.92; margin-bottom:1.2rem; height:34px; width:auto}
.ftr-co{font-size:13px; color:var(--mut)}
.ftr-note{font-size:12px; line-height:1.7; color:rgba(242,234,227,.66); max-width:72ch; margin:1rem auto 0}
.ftr-cr{font-size:12px; color:rgba(242,234,227,.62); margin-top:1.3rem}

/* ---------- Pływające CTA ---------- */
.fab{position:fixed; right:clamp(.9rem,2.5vw,1.8rem); bottom:clamp(.9rem,2.5vw,1.8rem);
  z-index:48; display:flex; flex-direction:column; gap:.85rem}
.fab-b{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  position:relative; transition:transform .3s var(--ease), box-shadow .3s;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.55);
}
.fab-b:hover{transform:translateY(-3px)}
.fab-b svg{width:22px; height:22px; fill:currentColor}
.fab-call{background:linear-gradient(140deg, var(--bordo2), var(--bordo)); color:var(--ink)}
html.js .fab-call::before{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(217,164,158,.65); animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{transform:scale(1); opacity:.9}
  70%{transform:scale(1.55); opacity:0}
  100%{transform:scale(1.55); opacity:0}
}
.fab-book{background:var(--cream); color:var(--bordo)}
.fab-tip{
  position:absolute; right:calc(100% + 14px); top:50%; transform:translate(6px,-50%);
  background:#0e0b0a; color:var(--ink); font:500 12px/1 var(--sans); letter-spacing:.04em;
  padding:.55rem .9rem; border-radius:4px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s var(--ease);
}
.fab-b:hover .fab-tip,.fab-b:focus-visible .fab-tip{opacity:1; transform:translate(0,-50%)}
/* fokus widoczny i na ciemnym, i na kremowym tle (fab pływa nad oboma) */
.fab-b:focus-visible{outline:2px solid var(--bordo); outline-offset:2px; box-shadow:0 0 0 6px rgba(246,241,236,.95)}
@media(max-width:700px){.fab-tip{display:none}}

/* ---------- Podstrony (sub-hero, treść, cennik, placeholder) ---------- */
.phero{
  position:relative; isolation:isolate; background:var(--bg1);
  padding:clamp(7.5rem,14vh,10rem) 0 clamp(3.5rem,7vw,5.5rem);
}
.phero::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 55% at 82% 0%, rgba(112,40,40,.22), transparent 70%);
}
.phero-grid{align-items:center; position:relative}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-bottom:1.4rem;
  font:500 11px/1.6 var(--sans); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(242,234,227,.5)}
.crumbs a{color:rgba(242,234,227,.72); transition:color .25s}
.crumbs a:hover{color:var(--rose)}
.crumbs span[aria-current]{color:var(--rose)}
.phero-h1{font-size:clamp(2rem,4.6vw,3.4rem)}
.phero-sub{
  font-family:var(--ital); font-style:italic; font-weight:500;
  font-size:clamp(1.2rem,2.2vw,1.6rem); color:var(--rose); margin-top:.9rem;
}
.phero-intro{margin-top:1.2rem}
.phero-intro strong{color:var(--ink); font-weight:600}
.phero-ph{max-width:430px}
@media(max-width:899px){.phero-ph{display:none}}

.sec-art{background:var(--cream); color:var(--inkd); --rose:#702828}
.art + .art{margin-top:clamp(2.6rem,5vw,3.8rem)}
.art-h2{color:var(--inkd); padding-bottom:.9rem; position:relative; margin-bottom:1.2rem}
.art-h2::after{content:''; position:absolute; left:0; bottom:0; width:56px; height:2px; background:var(--bordo)}
.art-p{font-size:15.5px; line-height:1.9; color:#4a403c; max-width:70ch}
.art-p + .art-p{margin-top:1rem}
.art-p strong{color:var(--inkd); font-weight:600}
.art-cta{
  margin:clamp(2.6rem,5vw,3.8rem) 0; padding:1.8rem 2rem; border:1px solid var(--lined);
  border-left:3px solid var(--bordo); border-radius:var(--r); background:#fff;
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.2rem;
}
.art-cta p{font-family:var(--ital); font-style:italic; font-size:clamp(1.15rem,2vw,1.4rem); color:var(--inkd)}
.art-cta .cta-row{margin-top:0}

/* akordeon cennika na podstronie - bary jak w zaakceptowanym v2 */
.cen-note-box{
  border:1px solid rgba(112,40,40,.22); background:rgba(112,40,40,.06);
  border-radius:var(--r); padding:.9rem 1.3rem; margin-top:1.4rem;
}
.cen-acc-page{border-top:0}
.cen-acc-page .acc{
  border:1px solid var(--lined); border-radius:var(--r); background:#fff;
  margin-bottom:.8rem; overflow:hidden;
}
.cen-acc-page .acc summary{position:relative; text-align:center; display:block; padding:1.15rem 3.2rem}
.cen-acc-page .acc summary span{
  font:600 13px/1.5 var(--sans); letter-spacing:.14em; font-family:var(--sans);
}
.cen-acc-page .acc summary:hover{padding-left:3.2rem; background:rgba(112,40,40,.05)}
.cen-acc-page .acc summary .nav-chev{
  position:absolute; right:1.3rem; top:50%; width:13px; height:9px;
  transform:translateY(-50%); color:var(--bordo); transition:transform .3s var(--ease);
}
.cen-acc-page .acc[open] summary .nav-chev{transform:translateY(-50%) rotate(180deg)}
.cen-acc-page .acc-body{padding:.2rem 1.4rem 1.3rem}

/* CTA końcowe podstron */
.sec-pcta{background:var(--bg0); overflow:clip}
.sec-pcta::before{
  content:''; position:absolute; inset:0 0 auto 0; height:70%; pointer-events:none;
  background:radial-gradient(50% 45% at 50% 0%, rgba(112,40,40,.26), transparent 75%);
}
.pcta{text-align:center; position:relative}
.pcta .h2 em{font-family:var(--ital); font-style:italic; color:var(--rose)}
.pcta .cta-row{justify-content:center; margin-top:2rem}
.pcta-lead{margin-top:1rem; color:var(--mut); font-size:15.5px}
.pcta-note{margin-top:1.4rem; font-size:12.5px; color:rgba(242,234,227,.62)}

/* placeholder "w przygotowaniu" */
.phero-soon{min-height:72svh; display:flex; align-items:center}
.soon-txt{margin-top:1.2rem}
.soon-txt a{color:var(--rose); text-decoration:underline; text-underline-offset:3px}

/* teaser cennika na home */
.cen-teaser{text-align:center}
.cen-teaser .cen-note{margin-inline:auto}
.cen-teaser-cta{justify-content:center; margin-top:2rem}

/* ---------- Responsywność ---------- */
@media(max-width:1199px){
  .hdr-tel{display:none}
  .hero-side{display:none}
}
@media(max-width:899px){
  .hdr-nav{display:none}
  .hdr-cta .btn-s{display:none}
  .burger{display:block}
  .hdr-in{justify-content:space-between}
  .prot-ph{justify-self:start; max-width:440px}
  .sec-head-txt{margin-top:1.2rem}
}
@media(max-width:819px){
  .atut{padding:0; border-left:0}
  .atut+.atut{border-top:1px solid var(--lined); padding-top:2rem}
}

/* ---------- Ograniczony ruch ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .hl,html.js [data-rev]{opacity:1; transform:none; transition:none}
  html.js .hero-vid,html.js .mq-track,html.js .fab-call::before,
  html.js .hero-scroll span::after{animation:none}
  .mq{overflow-x:auto}
  *{transition-duration:.01ms !important}
}