/* Beauty Secret — wariant „Maison" (editorial commerce): rozdziały nagłówek → wideo → pozycje z ceną.
   Korzeń 16px. Paleta Katie (Thalgo petrol + puder + porcelana), układ wg maisonnoor.nl 2026-10. */
@font-face{font-family:'Cormorant';src:url('fonts/cormorant-garamond-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Cormorant';src:url('fonts/cormorant-garamond-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --bg:#fff; --powder:#FAF0EE; --powder-2:#F3E0DC; --porcelain:#EAF1F2;
  --ink:#0F3A44; --ink-2:#4C6B87; --navy:#0D4D5C; --gold:#8B6222; --rose:#E2B4AC;
  --line:rgba(15,58,68,.12);
  --display:'Cormorant',Georgia,serif; --sans:'Jost',-apple-system,BlinkMacSystemFont,sans-serif;
  --edge:5vw;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:300 1rem/1.65 var(--sans);overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:300}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:50}
.skip:focus{left:1rem}

.kicker{display:flex;align-items:center;gap:1rem;font:400 .75rem/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.kicker::before{content:"";width:2.4rem;height:1px;background:currentColor;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.9rem 1.9rem;
  background:var(--navy);color:#fff;text-decoration:none;font:400 .78rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  transition:background .25s}
.btn--sm{min-height:40px;padding:.7rem 1.2rem;font-size:.7rem}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--ink)}}

/* 1 · pasek ogłoszeń */
.ann{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem var(--edge);border-bottom:1px solid var(--line);background:var(--bg)}
.ann__btn{background:none;border:0;color:var(--ink-2);width:44px;height:36px;display:grid;place-items:center;cursor:pointer}
.ann__track{display:grid;flex:1;text-align:center}
.ann__msg{grid-area:1/1;font:400 .8rem/1.4 var(--sans);letter-spacing:.04em;color:var(--ink-2);opacity:0;visibility:hidden;transition:opacity .5s}
.ann__msg.is-on{opacity:1;visibility:visible}
.ann__msg a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rose)}

/* nagłówek — statyczny (bez sticky: iPhone migał) */
.hdr{background:var(--bg);border-bottom:1px solid var(--line)}
.hdr__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem var(--edge) .6rem}
.hdr__brand{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;color:var(--ink)}
.hdr__brand small{font:400 .62rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2)}
.wm{display:block;width:12.5rem;aspect-ratio:666/145;background:currentColor;
  -webkit-mask:url(img/wm.png) left center/contain no-repeat;mask:url(img/wm.png) left center/contain no-repeat}
.hdr__acts{display:flex;align-items:center;gap:.4rem}
.lang{min-width:44px;height:44px;display:grid;place-items:center;font:500 .74rem/1 var(--sans);letter-spacing:.16em;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:0 .7rem}
@media (hover:hover) and (pointer:fine){.lang:hover{border-color:var(--gold);color:var(--gold)}}
.hdr__burger{display:none;width:44px;height:44px;place-items:center;background:none;border:0;color:var(--ink);cursor:pointer;margin-left:-10px}
.ico{width:44px;height:44px;display:grid;place-items:center;color:var(--ink)}
.hdr__nav{display:flex;gap:1.8rem;padding:.4rem var(--edge) 1rem;overflow-x:auto;scrollbar-width:none}
.hdr__nav::-webkit-scrollbar{display:none}
.hdr__nav a{white-space:nowrap;text-decoration:none;font:400 .85rem/1 var(--sans);letter-spacing:.04em;color:var(--ink-2);padding:.6rem 0;border-bottom:1px solid transparent}
@media (hover:hover) and (pointer:fine){.hdr__nav a:hover{color:var(--ink);border-color:var(--rose)}}

/* 2 · hero */
.hero{position:relative;height:min(calc(100svh - 136px),56vw);min-height:560px;overflow:hidden;background:var(--powder)}
.hero__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hero__txt{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;justify-content:center;gap:1.5rem;padding:0 var(--edge);max-width:min(50rem,52vw)}
.hero .hero__t{font:300 clamp(2.4rem,3.4vw,3.9rem)/1.04 var(--display);letter-spacing:-.01em}
html.js .hero__lead,html.js .hero .btn{opacity:0;animation:wjazd .9s cubic-bezier(.2,.7,.1,1) forwards}
html.js .hero__lead{animation-delay:.5s} html.js .hero .btn{animation-delay:.65s}
@keyframes wjazd{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:none}}
.hero__txt{gap:1.15rem}

/* pełne logo jak w obecnej wersji: znak się kreśli, napis „pisze się" złotem, potem nazwisko.
   Tu tło za tekstem jest JASNE (ręczniki / puder), więc ciemne złoto zamiast jasnego + cienia. */
.hero__logo{display:flex;align-items:center;gap:clamp(1rem,1.5vw,1.8rem);margin-bottom:.6rem}
.hero__mark{display:block;width:clamp(5.5rem,7vw,7.5rem);height:auto;pointer-events:none;
  -webkit-mask-image:linear-gradient(105deg,#000 0 20%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.12) 47%,transparent 62%);
  mask-image:linear-gradient(105deg,#000 0 20%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.12) 47%,transparent 62%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:126% 0;mask-position:126% 0;
  animation:rysuj 3.4s .4s linear forwards}
@keyframes rysuj{99%{-webkit-mask-position:-34% 0;mask-position:-34% 0}
  to{-webkit-mask-position:-34% 0;mask-position:-34% 0;-webkit-mask-image:none;mask-image:none}}
.hero__mark path{stroke:var(--gold);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hero__wm{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem}
.hero__wm .wm{width:clamp(14rem,17vw,19rem);background:var(--gold);animation:pisz 1.9s 3.2s cubic-bezier(.4,0,.2,1) both}
.hero__wm small{font:400 1rem/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  margin-left:1.8rem;opacity:0;animation:poj .9s 5s ease forwards}
@keyframes pisz{from{clip-path:inset(-10% 100% -10% 0)}to{clip-path:inset(-10% 0 -10% 0)}}
@keyframes poj{to{opacity:1}}
.hero__lead{max-width:36ch;font-size:1.05rem;color:var(--ink)}
.hero .btn{align-self:flex-start}
.vidctl{position:absolute;right:var(--edge);bottom:1.4rem;z-index:2;width:44px;height:44px;border-radius:50%;border:0;
  background:rgba(15,58,68,.55);color:#fff;display:grid;place-items:center;cursor:pointer}
.vidctl .i-play{display:none}.vidctl.is-paused .i-play{display:block}.vidctl.is-paused .i-pause{display:none}

/* 3 · marquee */
.marq{background:var(--rose);color:var(--ink);overflow:hidden;padding:.95rem 0}
.marq__track{display:flex;width:max-content;animation:marq 42s linear infinite}
.marq__set{display:flex}
.marq__set li{white-space:nowrap;font:400 .75rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;padding:0 2.2rem;position:relative}
.marq__set li::after{content:"•";position:absolute;right:-.2rem;opacity:.6}
@keyframes marq{to{transform:translateX(-50%)}}
@media (hover:hover){.marq:hover .marq__track{animation-play-state:paused}}

/* wspólne: nagłówek sekcji ze strzałkami */
.sechead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 var(--edge);margin-bottom:2rem}
.arrows{display:none;gap:.6rem}
@media (hover:hover) and (pointer:fine){.arrows{display:flex}}
.arrows button{width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:none;color:var(--gold);display:grid;place-items:center;cursor:pointer;transition:background .25s,color .25s}
@media (hover:hover) and (pointer:fine){.arrows button:hover{background:var(--gold);color:#fff}}

.rail{display:flex;gap:1.25rem;overflow-x:auto;scroll-padding:0 var(--edge);padding:0 var(--edge) .5rem;scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail>li{scroll-snap-align:start;flex:none}
@media (hover:none){.rail{scroll-snap-type:x mandatory}}

/* wjazd przy przewijaniu jak w Maison (Dawn scroll-trigger): 2rem w górę + fade, kolejne co 75 ms */
html.js .up,html.js [data-stagger]>*{opacity:0;transform:translateY(2rem);
  transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.1,1),box-shadow .3s;transition-delay:calc(var(--o,0)*75ms),calc(var(--o,0)*75ms),0s}
html.js .up.is-in,html.js [data-stagger].is-in>*{opacity:1;transform:none}

/* 4 · marki */
.merken{background:var(--powder);padding:5rem 0 5.5rem}
.mcard{width:clamp(15rem,21vw,19rem);background:var(--bg)}
.mcard img{width:100%;aspect-ratio:4/5;object-fit:cover}
.mcard div{padding:1.4rem 1.3rem 1.8rem}
.mcard small,.item .pill{font:400 .68rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.mcard h3{font:400 1.6rem/1.15 var(--display);margin:.7rem 0 .6rem}
.mcard p{font-size:.88rem;color:var(--ink-2)}
.mcard--news{background:var(--navy);color:#F2F6FA;display:flex;align-items:flex-end;aspect-ratio:auto}
.mcard--news div{padding:2rem 1.5rem}
.mcard--news small{color:#E0B872}.mcard--news p{color:#B9CBDC}
.mcard--news h3{font-size:2rem}

/* 4b · Behandelingen — pionowa lista z linią postępu, po prawej przyklejone zdjęcie (crossfade) */
.behs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,7rem);padding:6rem var(--edge) 6rem;background:var(--bg)}
.behs__head{display:flex;flex-direction:column;gap:1.3rem;margin-bottom:3rem}
.behs__head>p:not(.kicker){color:var(--ink-2);max-width:40ch}
.behs__list{position:relative;list-style:none;margin:0;padding:0 0 0 1px}
.behs__list::before,.behs__list::after{content:"";position:absolute;left:0;top:0;width:1px}
.behs__list::before{bottom:0;background:var(--line)}
.behs__list::after{height:var(--p,0%);background:var(--gold);transition:height .2s linear}
.behs__tip{position:absolute;left:-4px;top:var(--p,0%);width:9px;height:9px;margin-top:-4px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(139,98,34,.15);transition:top .2s linear;z-index:2;list-style:none}
.beh{position:relative;z-index:1;display:grid;grid-template-columns:4.5rem minmax(0,1fr);padding:2.2rem 2rem 2.2rem 1.8rem;transition:opacity .5s}
/* ruchome tło aktywnego wiersza: jedno pudrowe pole przepływa między zabiegami */
.behs__hl{position:absolute;z-index:0;left:0;right:0;top:0;height:0;list-style:none;pointer-events:none;
  background:linear-gradient(100deg,var(--powder) 0%,rgba(250,240,238,.55) 70%,rgba(250,240,238,0) 100%);
  transform:translateY(var(--hl-y,0));height:var(--hl-h,0);opacity:0;
  transition:transform .7s cubic-bezier(.2,.7,.1,1),height .7s cubic-bezier(.2,.7,.1,1),opacity .4s}
html.js .behs__hl{opacity:1}
.behs__hl::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:3px;background:var(--gold)}
/* duża, ledwo widoczna cyfra w tle aktywnego wiersza */
.behs__ghost{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);font:300 clamp(5rem,7.5vw,7.5rem)/1 var(--display);
  color:transparent;-webkit-text-stroke:1px rgba(139,98,34,.28);letter-spacing:-.02em}
/* złota kropka na czubku linii postępu */

html.js .beh{opacity:.72}
html.js .beh.is-on{opacity:1}
.beh__n{font:300 2.4rem/1 var(--display);color:var(--gold);transition:opacity .4s,color .4s}
html.js .beh:not(.is-on) .beh__n{color:rgba(139,98,34,.5)}
html.js .beh.is-on .beh__n{opacity:0} /* aktywny numer pokazuje duża cyfra w tle — bez dublowania */
.beh h3,.beh p,.beh__m,.beh__go{transition:transform .7s cubic-bezier(.2,.7,.1,1),opacity .6s}
html.js .beh:not(.is-on) p,html.js .beh:not(.is-on) .beh__m,html.js .beh:not(.is-on) .beh__go{transform:translateY(.6rem)}
html.js .beh.is-on p{transition-delay:.08s} html.js .beh.is-on .beh__m{transition-delay:.14s} html.js .beh.is-on .beh__go{transition-delay:.2s}
.beh__b{display:flex;flex-direction:column;gap:.6rem}
.beh__thumb{display:none}
.beh h3{font:400 clamp(1.8rem,2.4vw,2.4rem)/1.1 var(--display)}
.beh p{color:var(--ink-2);max-width:38ch}
.beh__m{font:400 1.1rem/1.3 var(--display);font-style:italic;color:var(--gold)}
.beh__go{align-self:flex-start;min-height:40px;display:flex;align-items:center;font:400 .72rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--navy);text-decoration:none}
@media (hover:hover) and (pointer:fine){.beh__go:hover{color:var(--gold)}}
.behs__r{position:relative}
.behs__fig{position:sticky;top:6vh;margin:0;height:88vh;max-height:56rem;overflow:hidden;background:var(--porcelain)}
.behs__pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);
  transition:opacity .9s ease,transform 1.6s cubic-bezier(.2,.7,.1,1)}
.behs__pic.is-on{opacity:1;transform:none}
.behs__cap{position:absolute;left:1.2rem;bottom:1rem;padding:.45rem .8rem;background:rgba(255,255,255,.88);font:400 .78rem/1 var(--sans);letter-spacing:.18em;color:var(--ink)}
.behs__cap span{color:var(--gold)}

/* jak Maison: co drugi rząd siedzi w wyśrodkowanym kontenerze z marginesem po OBU stronach (karty ucinane na krawędziach kontenera) */
/* Pedicure: tylko 4 pozycje — bez zapętlonej taśmy (kafle by się powtarzały), 3 kafle na szerokość wyśrodkowanego pasa */
@media (min-width:961px){.chap--three .items{width:min(74vw,75rem);margin-inline:auto;padding-inline:0;scroll-padding-inline:0}
  .chap--three .item{width:calc((100% - 2.5rem)/3)}}
@media (min-width:961px){.chap--off .items{width:min(74vw,75rem);margin-inline:auto;padding-inline:0;scroll-padding-inline:0}}

/* 5 · rozdziały */
.chap{padding:5.5rem 0 4.5rem}
.chap+.chap{padding-top:3rem}
.chap__t,.sec__t{font:300 clamp(2.5rem,4.6vw,4.4rem)/1.05 var(--display);letter-spacing:-.01em}
.chap .sechead{margin-bottom:2.2rem}
.sechead>h2{flex:1;min-width:0}
.chap__media{margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--porcelain)}
.chap__media video,.chap__media img{width:100%;height:100%;object-fit:cover}
.chap__media--img img{height:118%;will-change:transform}
.chap__media--duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;background:none}
.chap__media--duo>div{overflow:hidden;background:var(--porcelain)}
.items{padding-top:1.6rem}
.item{width:clamp(15.5rem,22vw,19.5rem);display:flex;flex-direction:column;gap:.6rem;padding:1.6rem 1.4rem 1.3rem;background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .3s}
.item__img{display:block;width:calc(100% + 2.8rem);max-width:none;margin:-1.6rem -1.4rem .5rem;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--porcelain)}
.item .pill{align-self:flex-start;background:var(--powder);padding:.5rem .8rem;border-radius:99px}
.item h3{font:400 1.5rem/1.15 var(--display)}
.item p{font-size:.88rem;color:var(--ink-2);flex:1}
.item__f{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding-top:.9rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-2)}
.item__f b{font:500 1.05rem/1 var(--sans);color:var(--ink);letter-spacing:.02em}
.item__cta{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center;font:400 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--navy);text-decoration:none}
@media (hover:hover) and (pointer:fine){.item:hover{box-shadow:inset 0 0 0 1px var(--rose),0 18px 40px -24px rgba(15,58,68,.35)}.item__cta:hover{color:var(--gold)}}

/* 6 · pełny cennik — 4 karty, kropki prowadzące do ceny; paleta wariantu (puder, biel, petrol, ciemne złoto) */
.cennik{background:var(--powder);padding:6rem var(--edge)}
.cennik__head{display:flex;flex-direction:column;gap:1.2rem;max-width:46rem;margin-bottom:3rem}
.cennik__sub{font-size:1.05rem;color:var(--ink-2);max-width:44ch}
.cen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem;align-items:start}
.cenk{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.cenk__foto img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.cenk__b{padding:1.5rem 1.3rem 1.4rem}
.cenk h3{font:400 1.45rem/1.2 var(--display);margin-bottom:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--rose)}
.cenk ul{display:flex;flex-direction:column}
.cenk li{display:flex;align-items:baseline;gap:.5rem;padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.86rem;line-height:1.4}
.cenk li:last-child{border-bottom:0}
.cenk li.wyroz{background:var(--powder);margin:0 -.7rem;padding:.65rem .7rem;border-bottom-color:transparent}
.cen__n{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.cen__t{font-style:normal;font-size:.74rem;color:var(--ink-2);letter-spacing:.04em}
.cen__kropki{flex:1;min-width:.8rem;border-bottom:1px dotted rgba(139,98,34,.45);transform:translateY(-.3em)}
.cen__c{font-weight:500;color:var(--ink);white-space:nowrap}
.cennik__cta{margin-top:2.6rem}
@media (max-width:1279px){.cen{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 6 · Over Katie */
.over{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding:6rem var(--edge);background:var(--porcelain)}
.over__img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.over__txt{display:flex;flex-direction:column;gap:1.4rem;max-width:40rem}
.over__txt>p:not(.kicker){font-size:1.05rem}
.certs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;margin-top:.6rem}
.certs li{padding:.85rem 0;border-top:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.certs b{display:block;font:400 1.15rem/1.3 var(--display);color:var(--ink)}

/* 7 · bezoek */
.bezoek{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,5rem);padding:6rem var(--edge);background:#FBF8F7}
.bezoek__l{display:flex;flex-direction:column;gap:1.4rem}
.bezoek__lead{max-width:44ch;font-size:1.05rem;color:var(--ink-2)}
.facts{display:flex;flex-direction:column;gap:1.1rem;margin-top:.4rem}
.facts li{display:flex;gap:1rem;align-items:flex-start}
.facts svg{color:var(--gold);margin-top:.25rem}
.facts a,.facts span{text-decoration:none;font-size:1.02rem;color:var(--ink)}
.facts small{display:block;font-size:.78rem;color:var(--ink-2);letter-spacing:.02em}
.socials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:.8rem}
.socials a{display:flex;align-items:center;gap:.8rem;min-height:52px;padding:0 1.1rem;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;font-size:.9rem}
@media (hover:hover) and (pointer:fine){.socials a:hover{box-shadow:inset 0 0 0 1px var(--gold)}}
.hours__t{font:400 1.6rem/1.2 var(--display);margin-bottom:.8rem}
.hours{margin:0}
.hours div{display:flex;justify-content:space-between;padding:.8rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.hours dt{color:var(--ink-2)} .hours dd{margin:0;color:var(--ink)}
.hours .off dd{color:var(--ink-2)}
.bezoek__img{width:100%;aspect-ratio:16/10;object-fit:cover;margin-top:1.8rem}

.foot{padding:3rem var(--edge) 2.5rem;text-align:center;display:flex;flex-direction:column;gap:1.2rem;border-top:1px solid var(--line)}
.foot__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.6rem}
.foot__nav a{text-decoration:none;font-size:.85rem;color:var(--ink-2);padding:.5rem 0}
.foot__legal{font-size:.78rem;color:var(--ink-2)}
.foot__credit a{font:400 .68rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}

/* animacja nagłówków: słowa wjeżdżają spod maski (tylko z JS) */
.reveal .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.reveal .w>span{display:inline-block}
html.js .reveal:not(.is-in) .w>span{transform:translateY(105%)}
html.js .reveal .w>span{transition:transform .9s cubic-bezier(.2,.7,.1,1);transition-delay:calc(var(--i)*55ms)}

/* telefon */
/* TRYB TELEFONU dla nagłówka, hero i Behandelingen aż do 960 px (recenzja: 701–960 nawigacja się ucinała,
   tekst hero leżał na dłoniach, sticky zdjęcie było za wąskie) */
@media (max-width:960px){
  /* nagłówek jak Maison na telefonie: ☰ | znak na środku | WhatsApp; menu chowa się pod ☰ */
  .hdr__row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;padding:.7rem var(--edge) .7rem}
  .hdr__burger{display:grid}
  .hdr__brand{align-items:center;text-align:center}
  .hdr__acts .btn,.hdr__acts .ico[aria-label="Instagram"]{display:none}
  .lang{height:36px;min-width:40px;padding:0 .55rem;margin-right:.3rem}
  .hdr__acts .ico{margin-right:-10px}
  .hdr__nav{display:none;flex-direction:column;gap:0;padding:.2rem var(--edge) 1rem;border-top:1px solid var(--line)}
  .hdr.is-open .hdr__nav{display:flex}
  .hdr__nav a{font-size:1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}
  .wm{width:9.5rem}
  .hdr__brand small{letter-spacing:.16em;white-space:nowrap}
  .hero{height:auto;min-height:0;display:flex;flex-direction:column}
  .hero__vid{position:relative;height:38svh;object-position:50% 40%}
  .hero__txt{max-width:none;padding:1.5rem var(--edge) 2.2rem;background:var(--powder)}
  .hero .hero__t{font-size:clamp(2.3rem,10vw,3rem)}
  .hero__mark{width:3.4rem}
  .hero__wm .wm{width:min(52vw,13rem)}
  .hero__wm small{font-size:.85rem;margin-left:1.2rem}
  .vidctl{top:calc(38svh - 3.6rem);bottom:auto}
  /* telefon: bez przyklejonego zdjęcia — miniatura w każdym wierszu, lista zwarta */
  .behs{grid-template-columns:minmax(0,1fr);padding:4rem var(--edge) 3rem}
  .behs__r{display:none}
  .behs__head{margin-bottom:1.6rem}
  .beh{grid-template-columns:2.4rem minmax(0,1fr);padding:1.1rem 0 1.1rem .9rem}
  .beh__go{min-height:36px}
  html.js .beh{opacity:1}
  .behs__hl,.behs__tip{display:none}
  html.js .beh.is-on .beh__n{opacity:1}
  html.js .beh:not(.is-on) p,html.js .beh:not(.is-on) .beh__m,html.js .beh:not(.is-on) .beh__go{transform:none}
  .beh__n{font-size:1.6rem}
  .beh__b{display:grid;grid-template-columns:4.6rem minmax(0,1fr);column-gap:1rem;row-gap:.35rem;align-items:start}
  .beh__thumb{display:block;grid-row:1/span 4;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
  .beh h3{font-size:1.4rem}
  .beh p{font-size:.86rem}
  .beh__m{font-size:.95rem}
}
@media (max-width:700px){
  /* kafelki cennika jak produkty Maison: dwa obok siebie + zajawka trzeciego, sama nazwa i cena */
  .rail{gap:.75rem}
  .item{width:44vw;padding:1rem .85rem .6rem;gap:.35rem}
  .item__img{width:calc(100% + 1.7rem);margin:-1rem -.85rem .35rem}
  .item p,.item .pill{display:none}
  .item h3{font-size:1.12rem;line-height:1.2;flex:1}
  .item__f{flex-direction:column;align-items:flex-start;gap:.15rem;padding-top:.55rem;font-size:.72rem}
  .item__f b{font-size:.98rem}
  .item__cta{min-height:40px;font-size:.66rem;letter-spacing:.16em}
  .chap__t,.sec__t{font-size:clamp(2rem,8.6vw,2.5rem)}
  .arrows{display:none!important}
  .merken{padding:3.5rem 0 4rem}
  .mcard{width:68vw}
  .chap{padding:3.8rem 0 3rem}
  .chap+.chap{padding-top:1.5rem}
  .over,.bezoek{grid-template-columns:minmax(0,1fr);padding:4rem var(--edge)}
  /* cennik na telefonie: karty przesuwane palcem jak u Maison, po jednej z zajawką następnej */
  .cennik{padding:4rem 0}
  .cennik__head,.cennik__cta{padding:0 var(--edge)}
  .cen{display:flex;align-items:flex-start;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--edge);padding:0 var(--edge);scrollbar-width:none}
  .cen::-webkit-scrollbar{display:none}
  .cenk{flex:none;width:84vw;scroll-snap-align:start}
  .over__img{aspect-ratio:1/1}
  .certs{gap:0 1.2rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marq__track{animation:none}
  html.js .reveal .w>span{transform:none;transition:none}
  .chap__media--img img{transform:none!important}
  .hero__mark{animation:none;-webkit-mask-image:none;mask-image:none}
  .hero__wm .wm{animation:none;clip-path:none}.hero__wm small{opacity:1;animation:none}
  html.js .up,html.js [data-stagger]>*{opacity:1;transform:none;transition:none}
  html.js .hero__lead,html.js .hero .btn{opacity:1;animation:none}
}

/* ===== poprawki po recenzji 02.10 ===== */
/* cyfry Cormorant są „nautyczne" (01 czytało się jak OI) */
/* okrojony Cormorant nie ma cyfr „prostych" (lnum) — numery w cienkim Jost */
.behs__ghost,.beh__n,.step__n{font-family:var(--sans)!important;font-weight:300!important;letter-spacing:-.02em}
.behs__ghost{font-size:clamp(4.2rem,6.5vw,6.5rem)!important;-webkit-text-stroke:1px rgba(139,98,34,.3)}
.beh__n{font-size:2rem}.step__n{font-size:1.25rem;background:var(--bg);padding:0 .5rem;left:1.1rem;top:.62rem;z-index:1}
@media (max-width:700px){.step__n{padding:0;background:none}}
/* kafle: ta sama linia tytułów z pigułką i bez */
@media (min-width:701px){.item:not(:has(.pill)) h3{margin-top:2.28rem}}
.chap--three .item h3,.cenk h3{overflow-wrap:break-word;hyphens:auto}
/* wyśrodkowane szyny: miękkie wygaszenie krawędzi zamiast cięcia kart nożem; nagłówek w tej samej linii */
@media (min-width:961px){
  .chap--off .items,.chap--three .items{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
  .chap--off .sechead,.chap--three .sechead{padding-inline:calc((100% - min(74vw,75rem))/2)}
}
/* bardzo szerokie ekrany: pełne szyny też w kontenerze, żeby nie było widać klonów */
@media (min-width:1800px){.chap:not(.chap--off):not(.chap--three) .items,#merken-rail{width:min(84vw,120rem);margin-inline:auto;padding-inline:0}}
@media (max-width:360px){.hdr__brand small{letter-spacing:.06em;font-size:.55rem}}

/* cennik zwinięty pod przyciskiem — ceny są w kafelkach rozdziałów */
.btn--line{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy);gap:.9rem;cursor:pointer;list-style:none}
.btn--line::-webkit-details-marker{display:none}
@media (hover:hover) and (pointer:fine){.btn--line:hover{background:var(--navy);color:#fff}}
.cennik__more>summary{display:inline-flex}
.cm-close,.cennik__more[open] .cm-open{display:none}
.cennik__more[open] .cm-close{display:inline}
.cm-ico{font-size:1.1rem;line-height:1;transition:transform .3s}
.cennik__more[open] .cm-ico{transform:rotate(45deg)}
.cennik__more[open]>.cen{margin-top:2.4rem}
@media (max-width:700px){.cennik__more>summary{margin-inline:var(--edge)}}

/* 4 kroki — linia rysuje się przy przewijaniu (--k 0→1), kropki zapalają się po kolei */
.kroki{padding:6rem var(--edge);background:var(--bg)}
.kroki__head{display:flex;flex-direction:column;gap:1.2rem;margin-bottom:3.5rem}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem;list-style:none;margin:0;padding:0}
.steps::before,.steps::after{content:"";position:absolute;left:0;right:0;top:1.35rem;height:1px;background:var(--line)}
.steps::after{background:var(--gold);transform-origin:left;transform:scaleX(var(--k,1))}
html.js .steps::after{transform:scaleX(var(--k,0))}
.step{position:relative;display:flex;flex-direction:column;gap:.7rem;padding-top:3.4rem}
.step::before{content:"";position:absolute;left:0;top:calc(1.35rem - 6px);width:13px;height:13px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1px var(--gold);transition:background .4s}
.step.is-on::before{background:var(--gold)}
.step__n{position:absolute;left:1.6rem;top:.55rem;font:300 1.5rem/1 var(--display);color:var(--gold)}
.step h3{font:400 1.8rem/1.15 var(--display)}
.step p{color:var(--ink-2);max-width:30ch}
@media (max-width:700px){
  .kroki{padding:4rem var(--edge)}
  .steps{grid-template-columns:minmax(0,1fr);gap:0;padding-left:1.6rem}
  .steps::before,.steps::after{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .steps::after{transform-origin:top;transform:scaleY(var(--k,1))}
  html.js .steps::after{transform:scaleY(var(--k,0))}
  .step{padding:0 0 2.2rem 0}
  .step::before{left:calc(-1.6rem);top:.45rem}
  .step__n{position:static;font-size:1.2rem}
  .step h3{font-size:1.5rem}
}

/* pływający WhatsApp (telefon/tablet) i przycisk pauzy ruchu (WCAG 2.2.2) */
.fab{position:fixed;right:1rem;bottom:1rem;z-index:40;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;box-shadow:0 10px 28px -10px rgba(15,58,68,.55);transition:transform .25s,background .25s}
.fab svg{width:1.5rem;height:1.5rem}
@media (min-width:961px){.fab{right:2rem;bottom:2rem;width:60px;height:60px}}
@media (hover:hover) and (pointer:fine){.fab:hover{transform:scale(1.06);background:var(--ink)}}
.motion .i-play{display:none}
.motion[aria-pressed="true"] .i-play{display:block}.motion[aria-pressed="true"] .i-pause{display:none}
html.motion-off .marq__track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.motion{display:none}}

/* Behandelingen na telefonie/tablecie: poziomy rząd kart przesuwany palcem (Jacek 02.10) */
@media (max-width:960px){
  .behs{padding-inline:0}
  .behs__head{padding-inline:var(--edge)}
  .behs__list{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--edge);
    padding:0 var(--edge) .4rem;scrollbar-width:none;overscroll-behavior-x:contain}
  .behs__list::-webkit-scrollbar{display:none}
  .behs__list::before,.behs__list::after{display:none}
  .beh{position:relative;flex:none;width:min(74vw,22rem);display:flex;flex-direction:column;padding:0;scroll-snap-align:start}
  .beh__n{position:absolute;z-index:2;top:.7rem;left:.7rem;padding:.25rem .55rem;background:rgba(255,255,255,.92);font-size:1.05rem!important;color:var(--gold)!important;opacity:1!important}
  .beh__b{display:flex;flex-direction:column;gap:.45rem}
  .beh__thumb{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;margin-bottom:.5rem}
  .beh h3{font-size:1.45rem}
  .beh p{font-size:.88rem}
}

/* desktop: zakładki w jednym wierszu z logo i przyciskami (Jacek 02.10 — oszczędza miejsce) */
@media (min-width:961px){
  .hdr__row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:clamp(1rem,2vw,2.5rem);padding:1rem var(--edge)}
  .hdr__nav{justify-content:center;padding:0;gap:clamp(.9rem,1.4vw,1.8rem);overflow:visible}
  .hdr__nav a{font-size:clamp(.74rem,.8vw,.85rem)}
  .hdr__acts .ico[aria-label="Instagram"]{display:none}
}
@media (min-width:1400px){.hdr__acts .ico[aria-label="Instagram"]{display:grid}}
/* węższe laptopy: bez przycisku „Afspraak" w nagłówku (pływający WhatsApp go zastępuje) */
@media (min-width:961px) and (max-width:1359px){.hdr__acts .btn{display:none}}
/* gdy dalej się nie mieści — menu w drugim wierszu jak wcześniej */
@media (min-width:961px) and (max-width:1199px){
  .hdr__row{grid-template-columns:auto 1fr}
  .hdr__acts{grid-column:2;grid-row:1;justify-self:end}
  .hdr__nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;padding-top:.7rem}
}
/* pauza wideo w hero nie chowa się pod pływającym WhatsAppem */
@media (min-width:961px){.vidctl{right:calc(2rem + 60px + 1rem);bottom:2.4rem}}