/* =====================================================================
   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) */
  /* role sterowane motywem (przełącznik palet) */
  --ghost-bd:rgba(242,234,227,.35);  /* obwódka btn-g w treści */
  --ghost-ink:var(--ink);            /* tekst btn-g w treści */
  --num-stroke:rgba(217,164,158,.32);/* kontur wielkich numerów sekcji */
  --serif:'Playfair','PlayfairFB',Georgia,serif;
  --ital:'Cormorant',Georgia,serif;
  --sans:'Montserrat','MontserratFB',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* =====================================================================
   MOTYWY (przełącznik palet). Nadpisują TYLKO role sekcji treści.
   Hero / header / marquee / stopka / fab zostają ciemne w każdym motywie.
   Bordo #702828 - stały kolor marki we wszystkich wariantach.
   ===================================================================== */

/* --- CIEMNY „Bordowy atelier": czerń + bordo (jawny blok - default to teraz jasny) --- */
:root[data-theme="dark"]{
  --bg0:#14100f; --bg1:#1a1414; --bg2:#221919;
  --ink:#f2eae3; --mut:#bcafa9;
  --cream:#f6f1ec; --cream2:#efe8e1;
  --inkd:#241c1a; --mutd:#655a55;
  --line:rgba(242,234,227,.14); --lined:rgba(36,28,26,.16);
  --rose:#d9a49e;
  --ghost-bd:rgba(242,234,227,.35); --ghost-ink:var(--ink);
  --num-stroke:rgba(217,164,158,.32);
}

/* --- JASNY „Perła": czysta, chłodna biel + bordo (DOMYŚLNY - wybór klientki) --- */
:root[data-theme="light"]{
  --bg0:#fbf8f5; --bg1:#f3ece6; --bg2:#ffffff;
  --ink:#2a201d; --mut:#6f615a;
  --cream:#efe6dd; --cream2:#e7ddd3;
  --inkd:#2a201d; --mutd:#6f615a;
  --line:rgba(42,32,29,.13); --lined:rgba(42,32,29,.12);
  --rose:#8a3a3a;
  --ghost-bd:rgba(42,32,29,.30); --ghost-ink:#2a201d;
  --num-stroke:rgba(112,40,40,.16);
}

/* --- CIEPŁY „Szampan": miękka kość / beż + bordo (elegancko, przytulnie) --- */
:root[data-theme="warm"]{
  --bg0:#f3ebe0; --bg1:#ece1d3; --bg2:#fbf6ef;
  --ink:#33271f; --mut:#786757;
  --cream:#e6d9c7; --cream2:#ded0bb;
  --inkd:#33271f; --mutd:#786757;
  --line:rgba(51,39,31,.15); --lined:rgba(51,39,31,.13);
  --rose:#8a3a3a;
  --ghost-bd:rgba(51,39,31,.32); --ghost-ink:#33271f;
  --num-stroke:rgba(112,40,40,.20);
}

/* ---------- 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:#faf3f0;
  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 var(--num-stroke); 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:#faf3f0}
.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 var(--ghost-bd); color:var(--ghost-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 (ZAWSZE ciemny -> lokalnie jasne role, niezależnie od motywu) ---------- */
.hdr{position:fixed; inset-inline:0; top:0; z-index:50; transition:background .35s, box-shadow .35s;
  --ink:#f2eae3; --rose:#d9a49e; --ghost-bd:rgba(242,234,227,.35); --ghost-ink:#f2eae3; color:#f2eae3;}
.hdr.on{background:rgba(16,12,11,.94); box-shadow:0 1px 0 rgba(242,234,227,.14)}
/* podstrony: brak ciemnego wideo-hero pod headerem -> stałe ciemne tło (tekst nawigacji zawsze czytelny) */
.hdr--solid{background:rgba(16,12,11,.96); box-shadow:0 1px 0 rgba(242,234,227,.14)}
.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 */
  --ink:#f2eae3; --mut:#bcafa9; --rose:#d9a49e; --ghost-bd:rgba(242,234,227,.35); --ghost-ink:#f2eae3; color:#f2eae3;
  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 (ZAWSZE ciemny - wideo pod scrimem, niezależnie od motywu) ---------- */
.hero{
  --mqh:49px; /* wysokość paska marquee - hero + pasek = dokładnie 1. ekran */
  /* wymuś jasne warianty ról, bo tło hero jest ciemne w każdym motywie */
  --ink:#f2eae3; --rose:#d9a49e; --ghost-bd:rgba(242,234,227,.35); --ghost-ink:#f2eae3;
  color:#f2eae3;
  position:relative; isolation:isolate; min-height:calc(100svh - var(--mqh));
  display:flex; align-items:flex-end;
  padding:7.5rem 0 clamp(3.2rem,7vh,5.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;
  /* film maksymalnie odsłonięty: dwa DELIKATNE pasy (górny pod nawigacją, dolny pod H1),
     środek kadru czysty - tekst dodatkowo z cieniem (patrz .hero-h1) */
  background:
    linear-gradient(to bottom, rgba(13,9,8,.5) 0%, rgba(13,9,8,.14) 12%, transparent 22%),
    linear-gradient(to top, rgba(13,9,8,.66) 0%, rgba(13,9,8,.32) 22%, rgba(13,9,8,.05) 42%, transparent 55%);
}
@media(max-width:700px){
  .hero-scrim{
    background:
      linear-gradient(to bottom, rgba(13,9,8,.55) 0%, rgba(13,9,8,.16) 12%, transparent 22%),
      linear-gradient(to top, rgba(13,9,8,.74) 0%, rgba(13,9,8,.44) 26%, rgba(13,9,8,.1) 48%, transparent 62%);
  }
}
.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);
  /* aura pod tekstem - czytelność na jasnym filmie bez przysłaniania kadru */
  text-shadow:0 2px 26px rgba(13,9,8,.62), 0 1px 5px rgba(13,9,8,.5)}
.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:#14100f; /* maska nad ciemnym hero - stała */
  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 (ZAWSZE ciemny pas - kotwica pod hero) ---------- */
.mq{background:#14100f; border-block:1px solid rgba(242,234,227,.14); 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-h2{font-size:clamp(2.3rem,5vw,3.8rem)} /* wyeksponowany nagłówek sekcji (życzenie klientki) */
.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:var(--mut)}

/* ---------- 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)}

/* ---------- Nad morzem (band z tłem-zdjęciem, biały tekst zawsze) ---------- */
.sea-band{
  position:relative; isolation:isolate; overflow:clip;
  min-height:clamp(360px,54vh,560px); display:flex; align-items:center;
  padding-block:clamp(3.5rem,8vw,6rem);
  --ink:#f2eae3; --rose:#e7cfc9; --ghost-bd:rgba(242,234,227,.4); --ghost-ink:#f2eae3; color:#f2eae3;
}
.sea-bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:center 42%}
.sea-scrim{position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(13,20,28,.32), rgba(13,20,28,.5) 55%, rgba(13,20,28,.62));}
.sea-in{text-align:center; max-width:820px; margin-inline:auto}
.sea-kick{color:#eBD7d2; text-shadow:0 1px 10px rgba(9,16,24,.5)}
.sea-h2{font-size:clamp(2rem,5vw,3.6rem); text-shadow:0 2px 22px rgba(9,16,24,.55); text-wrap:balance}
.sea-lead{margin-top:1.2rem; font-size:clamp(15px,1.6vw,17px); line-height:1.8; color:rgba(242,234,227,.92);
  max-width:60ch; margin-inline:auto; text-shadow:0 1px 12px rgba(9,16,24,.5)}
.sea-cta{justify-content:center; margin-top: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:.72fr 1.28fr; 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;
  border:1px solid var(--line)} /* ciemna mapa - delikatna krawędź zamiast filtra */
.kon-map img{width:100%; height:auto; transition:transform 1.4s var(--ease)}
.kon-map:hover img{transform:scale(1.03)}
.kon-map span{
  position:absolute; left:1rem; bottom:1rem; background:rgba(14,11,10,.86); color:#f2eae3; /* chip zawsze ciemny -> tekst zawsze jasny */
  font:500 12px/1 var(--sans); letter-spacing:.06em; padding:.6rem 1rem; border-radius:4px;
}

/* ---------- Stopka ---------- */
/* stopka ZAWSZE ciemna -> lokalnie jasne role (niezależnie od motywu), jak header/drawer */
.ftr{background:#0e0b0a; border-top:1px solid rgba(242,234,227,.14); text-align:center;
  --mut:#bcafa9; color:#f2eae3; 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:#c9bcb3}
.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:#f2eae3; 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:var(--mut)}
.crumbs a{color:var(--ink); 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}
/* proza usługi z panelu (body_html: h2/h3/p/ul) - style po tagach, bo edytor nie daje klas */
.art-prose h2{font-family:var(--serif); font-weight:500; letter-spacing:.002em; font-size:clamp(1.65rem,3vw,2.35rem);
  line-height:1.12; color:var(--inkd); padding-bottom:.9rem; margin:clamp(2.4rem,4.5vw,3.4rem) 0 1.2rem; position:relative}
.art-prose h2:first-child{margin-top:0}
.art-prose h2::after{content:''; position:absolute; left:0; bottom:0; width:56px; height:2px; background:var(--bordo)}
.art-prose h3{font-family:var(--serif); font-weight:530; font-size:1.35rem; color:var(--inkd); margin:1.8rem 0 .7rem}
.art-prose p{font-size:15.5px; line-height:1.9; color:#4a403c; max-width:70ch}
.art-prose p + p{margin-top:1rem}
.art-prose strong{color:var(--inkd); font-weight:600}
.art-prose ul,.art-prose ol{margin:1rem 0; padding-left:1.3rem; max-width:70ch}
.art-prose li{font-size:15px; line-height:1.8; color:#4a403c; margin-bottom:.4rem}
.art-prose a{color:var(--bordo); text-decoration:underline; text-underline-offset:3px}
.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}
/* galeria sprzętu w treści usługi (lupy + skaler w profilaktyce) */
.art-gallery{margin-top:clamp(2.6rem,5vw,3.8rem)}
.art-gallery-h{margin-bottom:1.6rem}
.art-gallery-grid{display:grid; gap:1.4rem}
@media(min-width:700px){.art-gallery-grid{grid-template-columns:1fr 1fr; gap:1.8rem}}
.eq-card{margin:0}
.art-gallery img{width:100%; height:auto; border-radius:var(--r); aspect-ratio:4/3; object-fit:cover;
  background:var(--cream2)}
.eq-h3{margin-top:1.2rem; font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem,2.2vw,1.7rem);
  color:var(--inkd); line-height:1.2}
.eq-h3 em{font-family:var(--ital); font-style:italic; color:var(--bordo)}
.eq-body{margin-top:.7rem}
.eq-body p{font-size:14.5px; line-height:1.8; color:var(--mutd)}
.eq-body .eq-sub{margin-top:1rem; color:var(--inkd)}
.eq-body .eq-sub strong{font-weight:600}
.eq-list{margin-top:.5rem; display:grid; gap:.5rem}
.eq-list li{font-size:14px; line-height:1.65; color:var(--mutd); padding-left:1.1rem; position:relative}
.eq-list li::before{content:'✦'; position:absolute; left:0; top:.05rem; font-size:.65rem; color:var(--bordo)}
.eq-list li strong{color:var(--inkd); font-weight:600}

/* 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:var(--mut)}

/* 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}

/* ---------- Przełącznik wersji językowej flagami (nagłówek + szuflada) ---------- */
.lang-flags{display:flex; align-items:center; gap:.4rem}
.langf{
  display:inline-flex; align-items:center; gap:.5rem;
  transition:transform .22s var(--ease);
}
.flag-box{
  display:block; width:26px; height:17px; flex:none; border-radius:3px; overflow:hidden;
  border:1px solid rgba(242,234,227,.3);
  box-shadow:0 1px 3px -1px rgba(0,0,0,.5);
  opacity:.55; /* wygaszamy TYLKO grafikę flagi (nie tekst) - kontrast etykiety zostaje AA */
  transition:opacity .22s, border-color .22s, box-shadow .22s;
}
.flag-box .flag{display:block; width:100%; height:100%}
.langf:hover{transform:translateY(-1px)}
.langf:hover .flag-box{opacity:.9}
.langf.on{cursor:default}
.langf.on .flag-box{opacity:1; border-color:var(--rose); box-shadow:0 0 0 1.5px rgba(217,164,158,.55)}
.langf:focus-visible{outline:none}
.langf:focus-visible .flag-box{outline:2px solid #f2eae3; outline-offset:2px}
/* w nagłówku: tylko desktop (mobile ma flagi w szufladzie) */
.lang-flags--hdr{margin-left:.35rem}
@media(max-width:899px){ .lang-flags--hdr{display:none} }
/* w szufladzie: flaga + nazwa języka */
.lang-flags--drawer{gap:1rem; margin:.4rem 0 1.1rem; flex-wrap:wrap}
.lang-flags--drawer .flag-box{width:32px; height:21px}
.langf-l{font:600 12px/1 var(--sans); letter-spacing:.04em; color:rgba(242,234,227,.82)}
.lang-flags--drawer .langf.on .langf-l{color:#f2eae3}

/* ---------- Przełącznik wersji kolorystycznej (lewy dół) ---------- */
.theme-switch{
  position:fixed; left:clamp(.9rem,2.5vw,1.4rem); bottom:clamp(.9rem,2.5vw,1.4rem);
  z-index:48; display:flex; align-items:center; gap:.5rem;
  padding:.5rem .7rem; border-radius:999px;
  background:rgba(14,11,10,.82); backdrop-filter:blur(8px);
  border:1px solid rgba(242,234,227,.16); box-shadow:0 10px 26px -10px rgba(0,0,0,.55);
}
.theme-switch-lbl{
  font:600 9.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase;
  color:rgba(242,234,227,.62); padding-left:.2rem;
}
.tsw{
  width:26px; height:26px; border-radius:50%; position:relative;
  border:2px solid transparent; transition:transform .3s var(--ease), border-color .3s;
}
.tsw::after{content:''; position:absolute; inset:2px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.tsw-dark::after{background:linear-gradient(135deg,#14100f 40%,#702828)}
.tsw-light::after{background:linear-gradient(135deg,#fbf8f5 40%,#702828)}
.tsw-warm::after{background:linear-gradient(135deg,#efe1cf 40%,#702828)}
.tsw:hover{transform:scale(1.12)}
.tsw[aria-pressed="true"]{border-color:var(--bordo); transform:scale(1.06)}
@media(max-width:600px){
  .theme-switch-lbl{display:none}
  .theme-switch{padding:.45rem}
}

/* ---------- 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}
}

/* ===== Blog (moduł artykułów, 07.08.2026) ===================================
   Świadomie oszczędnie: korzystamy z istniejących klas (.wrap, .prot-ph, .kick,
   .btn), dokładamy tylko to, czego nie ma - siatkę listingu i typografię treści. */
.art-hero{max-width:46rem;margin-inline:auto;padding-top:clamp(1.75rem,4.5vw,3rem);
          margin-bottom:clamp(1.75rem,4.5vw,3rem)}
.art-hero figure{margin:0}
.art-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
              border-radius:var(--r,10px)}
.art-body{max-width:46rem;margin-inline:auto;padding-bottom:clamp(2rem,6vw,4rem)}
.prose h2{font-size:clamp(1.35rem,3vw,1.75rem);margin:2em 0 .6em;line-height:1.25}
.prose h3{font-size:clamp(1.15rem,2.4vw,1.35rem);margin:1.6em 0 .5em}
.prose p{margin:0 0 1.05em;line-height:1.75}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.35em}
.prose li{margin:0 0 .45em;line-height:1.7}
.prose a{color:var(--accent,#702828);text-underline-offset:.18em}
.art-cta{margin:2.5rem 0 1rem}
.art-back{margin:1.5rem 0 0}
.art-back a{color:var(--accent,#702828);text-decoration:none}
.art-back a:hover{text-decoration:underline}

.art-list{display:grid;gap:clamp(1.25rem,3vw,2rem);grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
          padding-top:clamp(2.25rem,5.5vw,3.75rem);padding-bottom:clamp(2.5rem,7vw,4.5rem)}
.art-card{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r,10px);
          background:var(--surface,#fff);box-shadow:0 1px 3px rgba(0,0,0,.06)}
.art-card-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--muted,#f3ebe0)}
.art-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.art-card:hover .art-card-img img{transform:scale(1.04)}
.art-card-txt{padding:1.1rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.art-card-h{font-size:1.12rem;line-height:1.35;margin:0}
.art-card-h a{color:inherit;text-decoration:none}
.art-card-h a:hover{color:var(--accent,#702828)}
.art-card-lead{margin:0;font-size:.95rem;line-height:1.6;opacity:.85;flex:1}
.art-card-more{font-size:.9rem;color:var(--accent,#702828);text-decoration:none;font-weight:600}
.art-card-more:hover{text-decoration:underline}