/* ============================================================
   este — body & skin care · styles
   Paleta i typografia wyprowadzone z logo + brand kitu (assets/)
   ============================================================ */

:root{
  --wine:#6E1B32; --wine-deep:#4E1223; --wine-soft:#8A3048;
  --cream:#F8F1E6; --cream-2:#FCF7EF; --cream-3:#EFE3D1;
  --blush:#E7B3B7; --blush-soft:#F5DDD9; --rose:#CE6C7A;
  --sage:#97A385; --taupe:#B49A80;
  --ink:#3A2129; --ink-soft:#6E545B;

  --font-display:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:"Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container:1200px;
  --radius:16px; --radius-sm:10px; --radius-pill:999px;
  --shadow-sm:0 4px 18px -8px rgba(78,18,35,.20);
  --shadow-md:0 18px 50px -22px rgba(78,18,35,.32);
  --shadow-lg:0 40px 90px -40px rgba(78,18,35,.42);
  --nav-h:76px;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-sans); font-weight:400; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block; height:auto}
a{color:inherit; text-decoration:none}
button{font-family:inherit}
h1,h2,h3{margin:0; font-family:var(--font-display); font-weight:500; line-height:1.06; letter-spacing:.005em}
p{margin:0 0 1rem}
em{font-style:italic}
::selection{background:var(--wine); color:var(--cream)}

.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,2.5rem)}
.section{padding-block:clamp(4.5rem,9vw,8.5rem); position:relative}
.section--cream{background:linear-gradient(180deg,#FBF4EA,#F6EDDF)}

.ico{width:1.15em; height:1.15em; display:inline-block; vertical-align:-.15em; fill:none; flex:none}

.skip-link{position:absolute; left:-999px; top:0; z-index:200; background:var(--wine); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 var(--radius-sm) 0}
.skip-link:focus{left:0}

:focus-visible{outline:2.5px solid var(--wine); outline-offset:3px; border-radius:3px}

/* ---------- eyebrow + section heads ---------- */
.eyebrow{
  font-size:.78rem; letter-spacing:.26em; text-transform:uppercase; font-weight:500;
  color:var(--wine); margin:0 0 1rem; display:inline-flex; align-items:center; gap:.7rem;
}
.eyebrow::before{content:""; width:34px; height:1px; background:var(--wine); opacity:.55}
.eyebrow--onlight{color:var(--wine)}
.section__title{font-size:clamp(2.1rem,4.6vw,3.5rem); color:var(--wine-deep)}
.section__head{max-width:56ch; margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.section__head--center{margin-inline:auto; text-align:center}
.section__head--center .eyebrow::after{content:""; width:34px; height:1px; background:var(--wine); opacity:.55}
.section__sub{color:var(--ink-soft); font-size:1.08rem; max-width:60ch; margin:1rem auto 0}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--wine); --fg:#FBF4EA;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  background:var(--bg); color:var(--fg); border:1.5px solid var(--bg);
  font-family:var(--font-sans); font-weight:500; font-size:.95rem; letter-spacing:.04em;
  padding:.85rem 1.6rem; border-radius:var(--radius-pill); cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  box-shadow:var(--shadow-sm); white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn--primary{--bg:var(--wine); --fg:#FBF4EA}
.btn--primary:hover{background:var(--wine-deep); border-color:var(--wine-deep)}
.btn--ghost{--bg:transparent; --fg:var(--wine); border-color:var(--wine)}
.btn--ghost:hover{background:var(--wine); color:#FBF4EA}
.btn--light{--bg:#FBF4EA; --fg:var(--wine-deep); border-color:#FBF4EA}
.btn--light:hover{background:#fff; border-color:#fff}
.btn--lg{padding:1.02rem 2rem; font-size:1rem}
.btn--sm{padding:.62rem 1.15rem; font-size:.88rem; box-shadow:none}
.btn .ico{width:1.05em;height:1.05em}

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), height .3s;
  background:transparent;
}
.nav__inner{width:100%; max-width:var(--container); margin-inline:auto;
  padding-inline:clamp(1.25rem,4vw,2.5rem); display:flex; align-items:center; gap:2rem}
.nav__logo{margin-right:auto; display:flex; align-items:center}
.nav__logo img{height:44px; width:auto; transition:height .3s}
.nav__links{display:flex; gap:2rem}
.nav__links a{
  font-size:.92rem; letter-spacing:.06em; color:var(--ink); position:relative; padding:.3rem 0; font-weight:400;
}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--wine); transition:width .35s var(--ease)}
.nav__links a:hover{color:var(--wine)} .nav__links a:hover::after{width:100%}
.nav__links a.is-active{color:var(--wine)} .nav__links a.is-active::after{width:100%}
.nav__actions{display:flex; align-items:center; gap:.8rem}
.nav__burger{display:none; background:none; border:none; color:var(--wine); padding:.4rem; cursor:pointer}
.nav__burger .ico{width:1.7rem;height:1.7rem}

.nav.is-scrolled{background:rgba(248,241,230,.9); backdrop-filter:blur(12px); box-shadow:0 1px 0 rgba(110,27,50,.1), var(--shadow-sm); height:66px}
.nav.is-scrolled .nav__logo img{height:38px}
/* over hero (light image) text stays ink; nav starts transparent */

/* ---------- MOBILE DRAWER ---------- */
.drawer{
  position:fixed; inset:0; z-index:99; background:rgba(248,241,230,.98); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.drawer.is-open{opacity:1; visibility:visible}
.drawer__nav{display:flex; flex-direction:column; align-items:center; gap:1.6rem; text-align:center}
.drawer__nav a{font-family:var(--font-display); font-size:2rem; color:var(--wine-deep)}
.drawer__nav .btn{font-family:var(--font-sans); font-size:1rem; margin-top:1rem}
.drawer__tel{font-family:var(--font-sans)!important; font-size:1.1rem!important; color:var(--wine)!important; display:inline-flex; gap:.5rem; align-items:center}

/* ---------- HERO ---------- */
.hero{position:relative; height:100svh; min-height:600px; overflow:hidden; background:var(--cream)}
.hero__media{position:absolute; inset:0; z-index:0}
.hero__video{width:100%; height:100%; object-fit:cover; object-position:center}
.hero__media::before{ /* poster fallback shown until video loads / on mobile */
  content:""; position:absolute; inset:0; background:url("assets/img/hero-poster.jpg") center/cover no-repeat; z-index:-1;
}
.hero__scrim{position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(248,241,230,.94) 0%, rgba(248,241,230,.72) 34%, rgba(248,241,230,.18) 60%, rgba(248,241,230,0) 82%),
    linear-gradient(0deg, rgba(78,18,35,.10), rgba(78,18,35,0) 30%);
}
.hero__inner{position:absolute; inset:0; display:flex; align-items:center; z-index:2}
.hero__content{max-width:none}
.hero__title{font-size:clamp(3rem,8.2vw,6.4rem); color:var(--wine-deep); font-weight:500; letter-spacing:-.01em; margin-bottom:1.4rem}
.hero__title em{color:var(--wine); font-weight:500}
.hero__lead{font-size:clamp(1.05rem,2vw,1.3rem); max-width:34ch; color:var(--ink); margin-bottom:2rem}
.hero__cta{display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.2rem}
.hero__proof{display:flex; align-items:center; gap:.7rem; font-size:.98rem; color:var(--ink-soft)}
.hero__proof strong{color:var(--wine); font-weight:600}
.stars{display:inline-flex; gap:.12em; color:var(--rose)}
.stars .ico{width:1.15rem; height:1.15rem; fill:currentColor}
.stars--sm .ico{width:.95rem; height:.95rem}

.hero__scroll{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:3;
  width:26px; height:44px; border:1.6px solid var(--wine); border-radius:14px; display:flex; justify-content:center; padding-top:7px}
.hero__scroll-dot{width:4px; height:8px; border-radius:2px; background:var(--wine); animation:scrolldot 1.7s var(--ease) infinite}
@keyframes scrolldot{0%{opacity:0; transform:translateY(-2px)}30%{opacity:1}60%{opacity:1; transform:translateY(10px)}100%{opacity:0; transform:translateY(14px)}}

/* ---------- ABOUT ---------- */
.about__grid{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(2rem,5vw,5rem); align-items:center}
.about__media{position:relative}
.about__media img{border-radius:var(--radius); box-shadow:var(--shadow-lg); aspect-ratio:4/3.2; object-fit:cover}
.about__badge{position:absolute; right:-14px; bottom:-22px; background:var(--cream-2); border:1px solid var(--cream-3);
  border-radius:var(--radius-sm); box-shadow:var(--shadow-md); padding:1rem 1.3rem; text-align:center; display:grid; gap:.15rem}
.about__badge-num{font-family:var(--font-display); font-size:2.1rem; color:var(--wine); line-height:1}
.about__badge-sub{font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
.about__body p{color:var(--ink-soft)}
.about__body p strong,.about__body p em{color:var(--ink)}
.about__stats{list-style:none; padding:0; margin:2rem 0 1.6rem; display:flex; gap:clamp(1.4rem,4vw,3rem); flex-wrap:wrap; border-top:1px solid var(--cream-3); padding-top:1.8rem}
.about__stats .num{font-family:var(--font-display); font-size:2.4rem; color:var(--wine); display:block; line-height:1}
.about__stats .lab{font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.amenities{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.6rem}
.amenities li{display:inline-flex; align-items:center; gap:.45rem; background:var(--cream-2); border:1px solid var(--cream-3);
  padding:.42rem .9rem; border-radius:var(--radius-pill); font-size:.86rem; color:var(--ink)}
.amenities .ico{width:.95rem; height:.95rem; color:var(--sage); stroke:var(--sage)}

/* ---------- MENU / CENNIK ---------- */
.menu__tabs{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.6rem}
.menu__tab{display:inline-flex; align-items:center; gap:.55rem; background:var(--cream-2); border:1px solid var(--cream-3);
  color:var(--ink); padding:.65rem 1.25rem; border-radius:var(--radius-pill); cursor:pointer; font-size:.94rem;
  letter-spacing:.02em; transition:background .3s, color .3s, border-color .3s, box-shadow .3s}
.menu__tab .ico{width:1.15rem; height:1.15rem; color:var(--wine); stroke:var(--wine)}
.menu__tab:hover{border-color:var(--wine); color:var(--wine)}
.menu__tab.is-active{background:var(--wine); color:#FBF4EA; border-color:var(--wine); box-shadow:var(--shadow-sm)}
.menu__tab.is-active .ico{color:#FBF4EA; stroke:#FBF4EA}

.menu__panel{display:none}
.menu__panel.is-active{display:block; animation:fadeup .5s var(--ease)}
@keyframes fadeup{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.menu__intro{max-width:60ch; margin:0 auto 2rem; text-align:center; color:var(--ink-soft); font-size:1rem}

.price-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:.2rem 2.6rem; max-width:1000px; margin-inline:auto}
.price-row{display:grid; grid-template-columns:1fr auto; gap:.4rem 1rem; align-items:baseline;
  padding:1rem 0; border-bottom:1px solid rgba(110,27,50,.12)}
.price-row__main{min-width:0}
.price-row__name{font-family:var(--font-display); font-size:1.28rem; color:var(--wine-deep); line-height:1.15}
.price-row__var{display:block; font-size:.84rem; color:var(--ink-soft); letter-spacing:.02em; margin-top:.1rem}
.price-row__meta{text-align:right; white-space:nowrap}
.price-row__price{font-family:var(--font-sans); font-weight:600; font-size:1.02rem; color:var(--wine)}
.price-row__time{display:flex; align-items:center; justify-content:flex-end; gap:.3rem; font-size:.8rem; color:var(--ink-soft); margin-top:.15rem}
.price-row__time .ico{width:.8rem; height:.8rem; color:var(--taupe); stroke:var(--taupe)}

.menu__note{display:flex; align-items:center; gap:.6rem; justify-content:center; text-align:center; flex-wrap:wrap;
  margin-top:2.6rem; padding:1rem 1.4rem; background:var(--blush-soft); border-radius:var(--radius-sm);
  color:var(--wine-deep); font-size:.95rem; max-width:640px; margin-inline:auto}
.menu__note .ico{color:var(--wine); stroke:var(--wine)}
.menu__note a{color:var(--wine); font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* ---------- GALLERY ---------- */
.gallery__grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:230px; gap:1rem}
.gallery__item{position:relative; margin:0; overflow:hidden; border-radius:var(--radius); cursor:pointer; box-shadow:var(--shadow-sm)}
.gallery__item img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.gallery__item::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(78,18,35,.28),rgba(78,18,35,0) 55%);
  opacity:0; transition:opacity .4s}
.gallery__item:hover img{transform:scale(1.06)}
.gallery__item:hover::after{opacity:1}
.gallery__item--tall{grid-row:span 2}
.gallery__item--wide{grid-column:span 2}

/* ---------- REVIEWS ---------- */
.reviews__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem}
.review{margin:0; background:var(--cream-2); border:1px solid var(--cream-3); border-radius:var(--radius);
  padding:2rem 1.8rem; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:1rem; position:relative}
.review::before{content:"\201C"; position:absolute; top:.2rem; right:1.2rem; font-family:var(--font-display);
  font-size:4.5rem; color:var(--blush); line-height:1; opacity:.55}
.review p{font-family:var(--font-display); font-size:1.32rem; line-height:1.4; color:var(--ink); margin:0}
.review footer{margin-top:auto; display:flex; flex-direction:column}
.review__name{font-weight:600; color:var(--wine)}
.review__meta{font-size:.82rem; color:var(--ink-soft); letter-spacing:.02em}

/* ---------- CTA BAND ---------- */
.cta-band{position:relative; overflow:hidden; color:#FBF4EA; text-align:center; padding-block:clamp(4.5rem,9vw,7.5rem)}
.cta-band__bg{position:absolute; inset:0; background:linear-gradient(0deg,rgba(78,18,35,.86),rgba(78,18,35,.78)), url("assets/img/section-cta.jpg") center/cover no-repeat}
.cta-band__inner{position:relative}
.cta-band__title{font-size:clamp(2.4rem,6vw,4.4rem); color:#FBF4EA; margin-bottom:1rem}
.cta-band__sub{color:rgba(251,244,234,.85); max-width:46ch; margin:0 auto 2rem; font-size:1.1rem}

/* ---------- CONTACT ---------- */
.contact__grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:stretch}
.contact__list{list-style:none; padding:0; margin:0 0 2rem; display:grid; gap:1.5rem}
.contact__list li{display:flex; gap:1rem}
.contact__list .ico{width:1.4rem; height:1.4rem; color:var(--wine); stroke:var(--wine); flex:none; margin-top:.15rem}
.contact__lab{display:block; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.2rem}
.contact__list a{color:var(--ink); transition:color .25s} .contact__list a:hover{color:var(--wine)}
.contact__val{color:var(--ink)}
.contact__socials{display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; margin-top:.1rem}
.contact__socials a{display:inline-flex; align-items:center; gap:.4rem; color:var(--wine); font-weight:500}
.contact__socials .ico{width:1.05rem; height:1.05rem}
.contact__cta{width:100%}
.contact__map{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-md); min-height:380px; border:1px solid var(--cream-3)}
.contact__map iframe{width:100%; height:100%; min-height:380px; border:0; display:block; filter:saturate(.9)}

/* ---------- FOOTER ---------- */
.footer{background:var(--wine-deep); color:rgba(251,244,234,.82); padding-block:clamp(3rem,6vw,4.5rem) 1.5rem}
.footer__inner{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(251,244,234,.14)}
.footer__logo{height:52px; width:auto; margin-bottom:1rem; filter:brightness(0) invert(1); opacity:.95}
.footer__tag{max-width:34ch; color:rgba(251,244,234,.72); font-size:.96rem}
.footer .stars--sm{color:var(--blush)}
.footer .stars--sm span{color:rgba(251,244,234,.82); font-size:.85rem; margin-left:.4rem; letter-spacing:.03em}
.footer__col h3{font-family:var(--font-sans); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:#FBF4EA; margin:0 0 1.1rem; font-weight:500}
.footer__col a,.footer__muted{display:block; color:rgba(251,244,234,.78); font-size:.95rem; margin-bottom:.6rem; transition:color .25s}
.footer__col a:hover{color:#FBF4EA}
.footer__muted{color:rgba(251,244,234,.5)}
.footer__bottom{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top:1.4rem; font-size:.85rem; color:rgba(251,244,234,.6)}
.footer__top{display:inline-flex; align-items:center; gap:.4rem; color:rgba(251,244,234,.8)} .footer__top:hover{color:#FBF4EA}
.footer__top .ico{width:1rem;height:1rem; transform:rotate(-90deg)}

/* ---------- FAB ---------- */
.fab{position:fixed; right:1rem; bottom:1rem; z-index:80; display:none; align-items:center; gap:.5rem;
  background:var(--wine); color:#FBF4EA; padding:.85rem 1.3rem; border-radius:var(--radius-pill);
  box-shadow:var(--shadow-md); font-weight:500; font-size:.95rem;
  transform:translateY(120px); transition:transform .5s var(--ease)}
.fab.is-visible{transform:translateY(0)}
.fab .ico{width:1.1rem;height:1.1rem}

/* ---------- LIGHTBOX ---------- */
.lb{position:fixed; inset:0; z-index:200; background:rgba(41,12,20,.94); display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .35s} .lb.is-open{opacity:1}
.lb[hidden]{display:none}
.lb__img{max-width:90vw; max-height:85vh; border-radius:8px; box-shadow:0 30px 80px rgba(0,0,0,.5); object-fit:contain}
.lb__close,.lb__nav{position:absolute; background:rgba(251,244,234,.12); border:1px solid rgba(251,244,234,.25); color:#FBF4EA;
  width:52px; height:52px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .25s}
.lb__close:hover,.lb__nav:hover{background:rgba(251,244,234,.28)}
.lb__close{top:1.2rem; right:1.2rem} .lb__close .ico{width:1.4rem;height:1.4rem}
.lb__nav{top:50%; transform:translateY(-50%)} .lb__nav .ico{width:1.6rem;height:1.6rem}
.lb__nav--prev{left:1.2rem} .lb__nav--prev .ico{transform:rotate(90deg)}
.lb__nav--next{right:1.2rem} .lb__nav--next .ico{transform:rotate(-90deg)}

/* ---------- reveal ---------- */
.js [data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js [data-reveal].is-in{opacity:1; transform:none}
.reveal-stagger>*{transition-delay:var(--d,0s)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .nav__links{display:none}
  .nav__burger{display:inline-flex}
  .about__grid{grid-template-columns:1fr; gap:3.5rem}
  .about__media{max-width:560px; margin-inline:auto; width:100%}
  .contact__grid{grid-template-columns:1fr}
  .gallery__grid{grid-template-columns:repeat(3,1fr); grid-auto-rows:200px}
  .reviews__grid{grid-template-columns:repeat(2,1fr)}
  .footer__inner{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:1/-1}
  .fab{display:inline-flex}
}
@media (max-width:640px){
  body{font-size:16px}
  .nav__actions .btn--sm{display:none} /* rely on FAB + drawer */
  .hero__scrim{background:linear-gradient(180deg, rgba(248,241,230,.62), rgba(248,241,230,.42) 45%, rgba(248,241,230,.86) 100%)}
  .hero__title{font-size:clamp(2.7rem,12vw,3.6rem)}
  .hero__lead{max-width:100%}
  .hero__cta .btn{flex:1 1 auto}
  .about__badge{right:0; bottom:-18px; padding:.8rem 1rem}
  .price-grid{grid-template-columns:1fr; gap:0}
  .gallery__grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:160px}
  .gallery__item--wide{grid-column:span 2}
  .gallery__item--tall{grid-row:span 1}
  .reviews__grid{grid-template-columns:1fr}
  .footer__inner{grid-template-columns:1fr; gap:2rem}
  .menu__tab{font-size:.86rem; padding:.55rem 1rem}
  .lb__nav{width:44px;height:44px}
  .lb__nav--prev{left:.4rem}.lb__nav--next{right:.4rem}
}
@media (max-width:380px){
  .hero__cta{flex-direction:column}
  .amenities li{font-size:.8rem}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1!important; transform:none!important; transition:none}
  .hero__scroll-dot{animation:none}
  .gallery__item img{transition:none}
  *{scroll-behavior:auto!important}
}

/* wide screens */
@media (min-width:1600px){
  :root{--container:1320px}
  body{font-size:18px}
}