/* ====== Port Rybaki — shared styles ====== */
:root{
  --bg: #eef1ee;
  --bg-2: #e4e8e4;
  --paper: #f4f6f4;
  --ink: #1c2620;
  --ink-soft: #2a3530;
  --muted: #68655d;
  --line: rgba(28,38,32,0.16);
  --line-2: rgba(28,38,32,0.08);
  --accent: #8a6b3c;
  --accent-deep: #6b5128;
  --moss: #3b4a3a;
  --cream: #f4ece0;
  --cream-soft: #ece5d5;
  --cream-wine: #ede4d0;
  --shadow: 0 30px 60px -30px rgba(28,38,32,0.25);
  --f-serif: "Cormorant Garamond", "Times New Roman", serif;
  --f-sans: "Figtree", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --max: 1320px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg);overflow-x:hidden}
/* keep in-page anchor targets clear of the fixed nav */
section[id], header[id], article[id]{scroll-margin-top:74px}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  font-weight:400;
  line-height:1.55;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;background:none;border:0;color:inherit;cursor:pointer;padding:0}

h1,h2,h3,h4{font-family:var(--f-serif);font-weight:400;letter-spacing:-0.01em;line-height:1.02;margin:0}
h1{font-size:clamp(54px, 14vw, 120px); font-weight:300; letter-spacing:-0.03em; text-wrap:balance}
h2{font-size:clamp(32px, 8vw, 72px); font-weight:300; text-wrap:balance}
h3{font-size:clamp(22px, 5vw, 40px); text-wrap:balance}
p{margin:0}
.serif{font-family:var(--f-serif)}
.italic{font-style:italic}
.mono{font-family:var(--f-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase}
.eyebrow{font-family:var(--f-sans); font-size:11px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted)}
/* CSS-drawn icon glyphs: the loaded webfonts (Figtree/Cormorant/JetBrains
   Mono) don't include arrow, star or diamond glyphs, so text characters
   for these silently fall back to the OS font. Draw them instead. */
.i-arrow{display:inline-block; width:6px; height:6px; margin:0 2px 1px 8px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); vertical-align:middle}
/* flex containers with their own gap already space the icon; drop the
   icon's own margin so the two don't stack */
[style*="gap:10px"] > .i-arrow, .villa-cta > .i-arrow{margin-left:0}
.star-rating{display:inline-flex; align-items:center; gap:0.15em}
.i-star{display:inline-block; width:1em; height:1em; background:currentColor; clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ============== NAV ============== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:18px 20px;
  transition:background 0.4s ease, padding 0.4s ease, color 0.4s ease;
  color:var(--cream);
}
.nav.scrolled, .nav.solid{
  background:rgba(239,234,224,0.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  color:var(--ink);
  padding:12px 20px;
  border-bottom:1px solid var(--line);
}
.nav .brand{
  grid-column:2;
  font-family:var(--f-serif);
  font-size:calc(16px * 1.2); letter-spacing:0.32em; font-weight:500;
  text-transform:uppercase;
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
  transition:font-size 0.4s ease;
}
.nav.scrolled .brand{font-size:16px}
.brand .mark{display:inline-block; width:1.7em; height:auto; fill:currentColor; flex-shrink:0}
.nav .left{grid-column:1; display:flex; gap:18px; align-items:center}
.nav .right{grid-column:3; display:flex; gap:14px; align-items:center; justify-content:flex-end}
.nav-link{display:none; font-family:var(--f-mono); font-size:calc(10.5px * 1.2); letter-spacing:0.18em; text-transform:uppercase; position:relative; color:rgba(244,239,230,0.82); transition:font-size 0.4s ease, color 0.4s ease}
.nav.scrolled .nav-link, .nav.solid .nav-link{font-size:10.5px; color:var(--ink)}
.nav-link::after{content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform 0.4s ease}
.nav-link:hover::after, .nav-link[aria-current="page"]::after{transform:scaleX(1)}
.btn-reserve{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:calc(11px * 1.2); letter-spacing:0.18em; text-transform:uppercase;
  transition:background 0.25s, color 0.25s, font-size 0.4s ease, opacity 0.25s;
  font-family:var(--f-mono);
  opacity:0.85;
}
.nav.scrolled .btn-reserve{font-size:11px}
.btn-reserve:hover{background:var(--accent-deep); color:var(--bg); border-color:var(--accent-deep); opacity:1}
.btn-reserve .arrow{width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.menu-toggle{display:flex; flex-direction:column; gap:4px; padding:8px; margin:-8px}
.menu-toggle .bar{width:20px; height:1px; background:currentColor; display:block; transform:scaleX(1.2); transition:transform 0.4s ease}
.nav.scrolled .menu-toggle .bar{transform:scaleX(1)}

/* ============== MENU OVERLAY ============== */
.menu-overlay{
  position:fixed; inset:0; z-index:100;
  background:var(--ink); color:var(--cream-soft);
  display:flex; flex-direction:column;
  padding:24px 24px 40px;
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform 0.7s cubic-bezier(0.7,0,0.2,1), visibility 0s linear 0.7s;
}
.menu-overlay.open{transform:translateY(0); visibility:visible; transition:transform 0.7s cubic-bezier(0.7,0,0.2,1), visibility 0s linear 0s}
.menu-overlay header{display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid rgba(236,229,213,0.15)}
.menu-overlay header .brand{font-family:var(--f-serif); letter-spacing:0.28em; font-size:14px; text-transform:uppercase}
.menu-overlay .close{font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase}
.menu-overlay ul{list-style:none; padding:0; margin:auto 0; display:flex; flex-direction:column; gap:0}
.menu-overlay li{overflow:hidden; border-bottom:1px solid rgba(236,229,213,0.10)}
.menu-overlay a{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  font-family:var(--f-serif); font-size:38px; font-weight:300;
  padding:14px 0;
  transform:translateY(110%);
  transition:transform 0.7s cubic-bezier(0.7,0,0.2,1), color 0.3s;
}
.menu-overlay a:hover{color:var(--accent)}
.menu-overlay a .num{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.18em; color:rgba(236,229,213,0.5)}
.menu-overlay.open a{transform:translateY(0)}
.menu-overlay li:nth-child(1) a{transition-delay:0.05s}
.menu-overlay li:nth-child(2) a{transition-delay:0.10s}
.menu-overlay li:nth-child(3) a{transition-delay:0.15s}
.menu-overlay li:nth-child(4) a{transition-delay:0.20s}
.menu-overlay li:nth-child(5) a{transition-delay:0.25s}
.menu-overlay li:nth-child(6) a{transition-delay:0.30s}
.menu-overlay li:nth-child(7) a{transition-delay:0.35s}
.menu-overlay li:nth-child(8) a{transition-delay:0.40s}
.menu-overlay .foot{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:18px; padding-top:24px; border-top:1px solid rgba(236,229,213,0.15)}
.menu-overlay .foot p{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(236,229,213,0.65); line-height:1.7}

/* ============== BOOKING MODAL (popup silnika rezerwacji) ============== */
body.modal-open{position:fixed; left:0; right:0; overflow:hidden}
.booking-modal{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:16px}
.booking-modal.open{display:flex}
.booking-modal-backdrop{position:absolute; inset:0; background:rgba(28,38,32,0.75)}
.booking-modal-panel{position:relative; z-index:1; width:100%; max-width:920px; height:min(92svh,760px); background:var(--paper); box-shadow:var(--shadow); display:flex; flex-direction:column}
.booking-modal-close{position:absolute; top:10px; right:10px; z-index:2; width:36px; height:36px; border-radius:50%; background:var(--ink); color:var(--bg); font-size:20px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background 0.25s}
.booking-modal-close:hover{background:var(--accent-deep)}
.booking-modal-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; border-radius:10px; background:#fff}
.booking-modal-frame{border:none; display:block; width:100%; height:100%; min-height:100%; background:#fff}
@media (max-width:600px){
  .booking-modal{padding:0}
  .booking-modal-panel{max-width:none; width:100vw; height:100dvh; height:100svh}
  .booking-modal-scroll{border-radius:0}
}

/* ============== HERO (homepage) ============== */
.hero{
  position:relative; height:100svh; min-height:560px;
  overflow:hidden;
  color:var(--cream);
  background:var(--ink-soft);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:24px 20px 32px;
}
.hero-bg{position:absolute; inset:0; overflow:hidden; background:linear-gradient(160deg,var(--ink-soft),var(--ink))}
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:56% center;
  transform:scale(1.04);
  animation:kenburns-mobile 24s ease-in-out infinite alternate;
  opacity:0; transition:opacity 1.2s ease;
}
.hero-bg img.loaded{opacity:1}
/* Narrow mobile crops only ever show ~30% of this landscape photo's width,
   so the desktop zoom/pan (below) would push the roofline out of frame
   and drift toward the bare deck railing. Keep mobile subtle and static-framed. */
@keyframes kenburns-mobile{
  0%{transform:scale(1.02)}
  100%{transform:scale(1.07)}
}
@keyframes kenburns{
  0%{transform:scale(1.08) translate(0, 8%)}
  100%{transform:scale(1.18) translate(-2%, 6%)}
}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(20,28,22,0.55) 0%, rgba(20,28,22,0.20) 30%, rgba(20,28,22,0.24) 55%, rgba(20,28,22,0.82) 100%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:2}
.hero-top{
  position:absolute; top:80px; left:20px; right:20px; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-start;
  pointer-events:none;
}
.hero-meta{text-align:right; font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(244,236,224,0.55); line-height:1.8}
.hero-edition{opacity:0.55}
/* centered wordmark: sits mid-viewport on load, then shrinks and slides
   into the nav's brand slot as the visitor scrolls (see site.js). Default
   state below is the no-JS / reduced-motion fallback: static and centered,
   no pinning, no morph. */
.hero-brand-label{
  position:absolute; top:32%; left:50%; z-index:2;
  transform:translate(-50%, calc(-100% + 20px));
  font-family:var(--f-sans); font-size:11px; font-weight:400; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(244,236,224,0.85);
  white-space:nowrap;
  pointer-events:none;
}
.hero-brand{
  position:absolute; top:15%; left:50%; z-index:2;
  transform:translate(-50%, calc(-65% + 40px));
  display:flex; align-items:center; gap:0.1em;
  pointer-events:none;
  font-size:clamp(34px, 9vw, 60px);
  color:var(--cream);
  text-shadow:0 4px 18px rgba(0,0,0,0.35);
}
/* mirrors .nav .brand exactly (family/weight/case/tracking/icon ratio) so the
   scroll morph in site.js — a uniform CSS scale() of this whole box — lands
   pixel-for-pixel on the real nav brand instead of crossfading between two
   different lockups. */
.hero-brand-mark{width:1em; height:auto; flex-shrink:0; fill:currentColor}
.hero-brand-word{
  font-family:var(--f-serif); font-weight:500; text-transform:uppercase;
  font-size:1em; line-height:1; letter-spacing:0.06em;
  color:currentColor; white-space:nowrap; margin:0;
}
.hero-brand.js-morph{
  position:fixed; z-index:51;
  opacity:0; will-change:transform, opacity;
}
.hero.ready .hero-brand.js-morph{opacity:1; transition:opacity 1.1s ease 0.4s}
@media(prefers-reduced-motion:reduce){
  .hero-brand{transition:none!important}
}
.hero-tag{
  margin-top:18px; font-size:clamp(17px, 4.5vw, 21px); line-height:1.5; max-width:480px;
  color:var(--cream);
  text-shadow:0 2px 14px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.5);
  opacity:0; transform:translateY(20px); transition:all 1s ease 0.7s;
}
.hero.ready .hero-tag{opacity:1; transform:translateY(0)}
.hero-foot{
  position:relative; z-index:2; margin-top:28px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(244,236,224,0.85);
  opacity:0; transition:opacity 1s ease 1.1s;
}
.hero.ready .hero-foot{opacity:1}
.hero-foot .scroll{display:flex; align-items:center; gap:10px}
.hero-foot .scroll .line{width:40px; height:1px; background:rgba(244,236,224,0.5); position:relative; overflow:hidden}
.hero-foot .scroll .line::after{content:""; position:absolute; inset:0; background:currentColor; transform-origin:left; animation:scrollLine 2.4s ease-in-out infinite}
@keyframes scrollLine{0%{transform:scaleX(0)}50%{transform:scaleX(1)}100%{transform:scaleX(0); transform-origin:right}}

/* ============== PAGE HEAD (subpages) ============== */
.page-head{
  position:relative;
  background:var(--ink); color:var(--cream);
  padding:100px 20px 48px;
  overflow:hidden;
}
.page-head .bg{
  position:absolute; inset:0;
  opacity:0.35;
  background-size:cover; background-position:center;
}
.page-head .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,28,22,0.5) 0%, rgba(20,28,22,0.8) 100%)}
.page-head .inner{position:relative; z-index:2}
.page-head .crumb{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; color:rgba(244,236,224,0.6); margin-bottom:24px}
.page-head .crumb a{border-bottom:1px solid transparent; transition:border-color 0.3s}
.page-head .crumb a:hover{border-color:currentColor}
.page-head h1{
  font-size:clamp(48px, 11vw, 120px); font-style:italic; font-weight:300;
  line-height:0.95;
}
.page-head .sub{
  margin-top:20px; font-size:15px; line-height:1.6; max-width:560px;
  color:rgba(244,236,224,0.78);
}

/* ============== sections ============== */
section{padding:72px 20px}
.section-head{
  display:flex; align-items:baseline; gap:18px; margin-bottom:36px;
}
.section-head .label{font-family:var(--f-serif); font-style:italic; font-size:15px; letter-spacing:0; text-transform:none; color:var(--muted)}

/* reveal */
.reveal{opacity:0; transform:translateY(30px); transition:opacity 1s ease, transform 1.2s cubic-bezier(0.2,0.6,0.2,1)}
.reveal.in{opacity:1; transform:translateY(0)}
.reveal-img{clip-path:inset(0 0 100% 0); transition:clip-path 1.4s cubic-bezier(0.6,0,0.2,1)}
.reveal-img.in{clip-path:inset(0 0 0 0)}

/* ============== intro ============== */
.intro{ position:relative; z-index:1; margin-top:-28px; background:url(zoptymalizowane/lake.webp) center bottom/cover no-repeat; padding:64px 20px}
.intro::before{
  content:""; position:absolute; top:0; left:0; right:0; height:260px;
  background:linear-gradient(to bottom, rgba(20,28,22,0.78) 0%, rgba(20,28,22,0.42) 30%, rgba(20,28,22,0.16) 60%, rgba(20,28,22,0) 100%);
  pointer-events:none;
}
.intro .section-head .label{color:rgba(21,20,15,.5)}
.intro .quote{font-family:var(--f-serif); font-style:normal; font-weight:400; font-size:clamp(28px, 7.5vw, 52px); line-height:1.15; letter-spacing:normal; color:#15140f; margin-top:24px}
.intro .quote em{font-style:italic; color:#a97e42}
.intro .signature{margin-top:36px; display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap}
.intro .signature .crest{font-family:var(--f-serif); font-style:italic; font-size:28px; opacity:0.6}
.intro-img{margin-top:40px; aspect-ratio:4/3; overflow:hidden; background:var(--bg-2)}
.intro-img img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease}
.intro-img img.loaded{opacity:1}
.intro-columns{margin-top:32px; display:grid; gap:32px; align-items:start}
.intro-columns .body{margin:0; font-family:var(--f-mono); font-size:14px; line-height:1.8; color:rgba(21,20,15,.7)}
.intro-divider{background:rgba(21,20,15,.12); width:100%; height:1px}
.intro-history .eyebrow{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; color:#a97e42; margin-bottom:14px}
.intro-history .history-text{font-family:var(--f-serif); font-style:italic; font-size:23px; line-height:1.45; color:#15140f; margin:0}

/* ============== marquee ============== */
.marquee{background:linear-gradient(90deg, var(--ink) 0%, var(--ink-soft) 50%, var(--ink) 100%); color:var(--cream-soft); height:72px; display:flex; align-items:center; overflow:hidden}
.marquee-track{display:flex; align-items:center; gap:42px; animation:marquee 45s linear infinite; white-space:nowrap; width:max-content}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--f-serif); font-style:italic; font-size:clamp(20px, 2.2vw, 30px); font-weight:300; opacity:0.88}
.marquee .dot{display:inline-flex; align-items:center; opacity:0.65; align-self:center; color:var(--accent)}
.marquee .dot::before{content:""; width:5px; height:5px; background:currentColor; transform:rotate(45deg)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (max-width:600px){
  .marquee{height:54px}
}

/* ============== rooms — slider doświadczeń pobytu ============== */
.rooms{background:url(zoptymalizowane/room_background.webp) center/cover no-repeat}
.rooms-head{display:flex; justify-content:space-between; align-items:end; gap:24px; flex-wrap:wrap; margin-bottom:40px}
.rooms-sub{margin:16px 0 0; max-width:34ch; font-family:var(--f-sans); font-size:15px; line-height:1.6; color:var(--muted)}
.rooms-all{display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:4px; transition:gap 0.3s}
.rooms-all:hover{gap:14px}

/* --- slider shell --- */
.exp-slider{position:relative}
.exp-track{
  display:flex; flex-direction:row; flex-wrap:nowrap; gap:22px;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  margin:0 -20px; padding:8px 20px 12px; scrollbar-width:none;
}
.exp-track::-webkit-scrollbar{display:none}

/* --- experience card = window of a mood --- */
.exp-card{
  flex:0 0 86%; scroll-snap-align:center; position:relative; display:block;
  aspect-ratio:3/4.1; border-radius:18px; overflow:hidden; color:var(--cream);
  background:var(--ink-soft); box-shadow:0 18px 40px -26px rgba(28,38,32,0.55);
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1), box-shadow 0.6s ease, filter 0.6s ease;
}
.exp-bg{position:absolute; inset:0; overflow:hidden}
.exp-bg img{width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.02); transition:transform 2s cubic-bezier(0.2,0.6,0.2,1), opacity 0.9s ease}
.exp-bg img.loaded{opacity:1}
.exp-card::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(18,24,20,0.9) 0%, rgba(18,24,20,0.62) 32%, rgba(18,24,20,0.14) 60%, rgba(18,24,20,0.05) 100%);
}

.exp-body{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:30px 28px 30px; display:flex; flex-direction:column}
.exp-mood{font-family:var(--f-serif); font-style:italic; font-weight:300; font-size:clamp(19px, 2.4vw, 23px); line-height:1.2; color:var(--cream); text-shadow:0 1px 18px rgba(0,0,0,0.35)}
.exp-name{margin:14px 0 0; font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:rgba(244,236,224,0.72)}
.exp-meta{display:flex; gap:12px; flex-wrap:wrap; margin:12px 0 0; font-family:var(--f-sans); font-size:12.5px; color:rgba(244,236,224,0.82)}
.exp-meta span{display:inline-flex; align-items:center; gap:8px}
.exp-meta span::before{content:""; width:3px; height:3px; border-radius:50%; background:var(--accent)}
.exp-meta span:first-child::before{display:none}
.exp-desc{
  margin:0; display:grid; grid-template-rows:0fr; opacity:0;
  transition:grid-template-rows 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.5s ease;
}
.exp-desc > span{
  overflow:hidden; min-height:0; padding-top:14px;
  font-family:var(--f-sans); font-size:14px; line-height:1.6; color:rgba(244,236,224,0.9);
}
.exp-cta{
  margin-top:18px; display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--cream); align-self:flex-start; border-bottom:1px solid rgba(244,236,224,0.5); padding-bottom:5px;
  transition:gap 0.3s ease, border-color 0.3s ease;
}
.exp-cta .arr{transition:transform 0.3s ease}

/* --- active / hover emphasis --- */
.exp-card.is-active{box-shadow:0 26px 60px -28px rgba(28,38,32,0.7)}
.exp-card.is-active .exp-desc,
.exp-card:hover .exp-desc{grid-template-rows:1fr; opacity:1}
.exp-card.is-active .exp-bg img,
.exp-card:hover .exp-bg img{transform:scale(1.06)}
.exp-card:hover .exp-cta{gap:14px; border-color:var(--cream)}
.exp-card:hover .exp-cta .arr{transform:translateX(3px)}
/* dim the non-active slides slightly so the centre one leads */
.exp-slider.has-active .exp-card:not(.is-active){filter:saturate(0.82) brightness(0.9)}

/* --- arrows (desktop) --- */
.exp-nav{
  display:none; position:absolute; top:50%; z-index:5; width:52px; height:52px;
  transform:translateY(-50%); border-radius:50%; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); cursor:pointer; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -14px rgba(28,38,32,0.5); transition:background 0.3s, color 0.3s, transform 0.3s;
}
.exp-nav:hover{background:var(--ink); color:var(--cream)}
.exp-nav:disabled{opacity:0; pointer-events:none}
.exp-prev{left:-10px}
.exp-prev .i-arrow{transform:rotate(180deg)}
.exp-next{right:-10px}

/* --- dots (mobile) --- */
.exp-dots{display:flex; justify-content:center; gap:9px; margin-top:22px}
.exp-dots button{width:7px; height:7px; padding:0; border:none; border-radius:50%; background:rgba(28,38,32,0.22); cursor:pointer; transition:background 0.3s, transform 0.3s}
.exp-dots button.on{background:var(--accent); transform:scale(1.25)}

/* ============== villa preview ============== */
.villa{position:relative; background:url(zoptymalizowane/villa_background.webp) center bottom/cover no-repeat; color:var(--cream-soft); padding:0; overflow:hidden}
.villa-img{height:65svh; min-height:340px; overflow:hidden; position:relative; background:linear-gradient(160deg,var(--ink-soft),var(--ink))}
.villa-img img{width:100%; height:100%; object-fit:cover; transform:scale(1.05); transition:transform 1.8s ease, opacity 1s; opacity:0}
.villa-img img.loaded{opacity:1}
.villa-img.in img{transform:scale(1)}
.villa-img::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,28,22,0.62), rgba(20,28,22,0.08) 60%)}
.villa-content{padding:48px 24px 80px; position:relative}
.villa-content::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,28,22,0.3), rgba(20,28,22,0.05) 40%); pointer-events:none; z-index:0}
.villa-content > *{position:relative; z-index:1}
.villa-content .eyebrow{color:rgba(236,229,213,0.65)}
.villa-content h2{margin-top:22px; font-style:italic}
.villa-content .text{margin-top:24px; font-size:15px; line-height:1.7; color:rgba(236,229,213,0.78); max-width:560px}
.villa-feats{display:grid; grid-template-columns:repeat(2,1fr); gap:28px 48px; margin-top:40px; padding-top:26px; border-top:1px solid rgba(236,229,213,0.14)}
.villa-feats div .k{font-family:var(--f-sans); font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:rgba(236,229,213,0.55); margin-bottom:8px}
.villa-feats div .v{font-family:var(--f-serif); font-size:23px; font-style:italic}
.villa-cta{margin-top:44px; display:inline-flex; align-items:center; gap:14px; padding:15px 28px; border:1px solid rgba(236,229,213,0.55); border-radius:999px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; transition:background 0.3s, border-color 0.3s}
.villa-cta:hover{background:rgba(236,229,213,0.14); border-color:rgba(236,229,213,0.8)}

/* ============== gallery ============== */
.gallery{background:var(--bg)}
.gallery-head{display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap; margin-bottom:32px}
.gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
.gallery-grid .tile{position:relative; overflow:hidden; background:var(--bg-2); aspect-ratio:1/1.2}
.gallery-grid .tile.tall{aspect-ratio:1/1.6}
.gallery-grid .tile.wide{aspect-ratio:16/9; grid-column:1 / -1}
.gallery-grid .tile img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s ease, opacity 0.6s; opacity:0}
.gallery-grid .tile img.loaded{opacity:1}
.gallery-grid .tile:hover img{transform:scale(1.05)}
.gallery-grid .caption{position:absolute; left:10px; bottom:10px; font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--cream); mix-blend-mode:difference; opacity:0.85}

/* ============== amenities (sauna/spa/jacuzzi/kajaki) ============== */
.amen{background:var(--paper)}
.amen-grid{display:grid; grid-template-columns:1fr; gap:24px; margin-top:32px}
.amen-card{position:relative; overflow:hidden; background:var(--bg-2); aspect-ratio:4/3}
.amen-card img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s ease, opacity 1s; opacity:0}
.amen-card img.loaded{opacity:1}
.amen-card:hover img{transform:scale(1.06)}
.amen-card::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,28,22,0.7) 0%, rgba(20,28,22,0) 50%)}
.amen-card .meta{position:absolute; left:18px; right:18px; bottom:16px; z-index:2; color:var(--cream); display:flex; justify-content:space-between; align-items:end}
.amen-card .meta .nm{font-family:var(--f-serif); font-style:italic; font-size:28px; font-weight:300}
.amen-card .meta .num{font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.2em}

/* ============== amenities: karty z ikonami ============== */
.amen-v3{background:var(--paper); position:relative; overflow:hidden}
.amen-v3::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(zoptymalizowane/atrakcje_background.webp) center/cover no-repeat;
  opacity:0.5;
}
.amen-v3 > *{position:relative; z-index:1; max-width:1080px; margin-left:auto; margin-right:auto}
.amen-lede{margin-top:18px; margin-bottom:44px; font-size:16px; line-height:1.65; color:var(--muted); max-width:520px}
.amen-icons{display:grid; grid-template-columns:1fr; gap:1px; background:rgba(30,45,36,0.10); border:1px solid rgba(30,45,36,0.10); margin-bottom:72px}
.amen-group-label{grid-column:1/-1; display:flex; align-items:center; gap:16px; padding:40px 22px 10px; background:rgba(244,246,244,.95)}
.amen-group-label:first-child{padding-top:6px}
.amen-group-label span{font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color:var(--accent-deep); white-space:nowrap}
.amen-group-label::after{content:''; flex:1; height:1px; background:rgba(30,45,36,0.10)}
.amen-row{
  display:flex; flex-direction:row; flex-wrap:nowrap; gap:1px;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.amen-row::-webkit-scrollbar{display:none}
.amen-row .amic{flex:0 0 84%; scroll-snap-align:center}
.amic{background:rgba(244,246,244,.95); padding:18px 20px; transition:background 0.3s; position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent}
.amic.featured{background:linear-gradient(rgba(142,107,63,0.055),rgba(142,107,63,0.055)), rgba(244,246,244,.95)}
.amic:hover, .amic.open{background:linear-gradient(rgba(142,107,63,0.045),rgba(142,107,63,0.045)), rgba(244,246,244,.95)}
.amic::after{
  content:''; position:absolute; top:20px; right:20px; width:11px; height:11px;
  background:
    linear-gradient(currentColor,currentColor) center/11px 1px no-repeat,
    linear-gradient(currentColor,currentColor) center/1px 11px no-repeat;
  color:var(--accent-deep); opacity:0.55;
  transition:transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s;
}
.amic:hover::after{opacity:1}
.amic.open::after{transform:rotate(135deg)}
.amic-more{display:none}
.amic-photo{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; margin-top:18px}
.amic-more p{padding-top:16px; font-family:var(--f-sans); font-size:15px; font-weight:400; line-height:1.7; letter-spacing:0; text-transform:none; color:var(--ink-soft); margin:0; max-width:52ch}
.amic-icon{width:24px; height:24px; color:var(--accent); transition:transform 0.3s cubic-bezier(0.22,1,0.36,1)}
.amic-icon svg{width:100%; height:100%}
.amic:hover .amic-icon, .amic.open .amic-icon{transform:translateY(-2px)}
.amic-name{font-family:var(--f-serif); font-style:italic; font-size:18px; font-weight:300; margin-top:10px}
.amic-desc{font-family:var(--f-sans); font-size:13px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted); margin-top:6px; line-height:1.6}

/* ---- amenity detail popup ---- */
.amic-modal{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; pointer-events:none}
.amic-modal.open{pointer-events:auto}
.amic-modal-backdrop{position:absolute; inset:0; background:rgba(18,22,18,0.55); opacity:0; transition:opacity 0.3s ease}
.amic-modal.open .amic-modal-backdrop{opacity:1}
.amic-modal-box{position:relative; background:var(--paper); width:100%; max-width:420px; max-height:88vh; overflow-y:auto; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,0.3); padding:28px 26px 30px; opacity:0; transform:translateY(18px) scale(0.96); transition:transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.3s ease; transform-origin:center center}
.amic-modal.open .amic-modal-box{opacity:1; transform:translateY(0) scale(1)}
.amic-modal-close{position:absolute; top:14px; right:14px; width:34px; height:34px; border:1px solid var(--line); background:var(--paper); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0}
.amic-modal-close svg{width:16px; height:16px}
.amic-modal-close:hover{background:var(--bg-2)}
.amic-modal-title{font-family:var(--f-serif); font-style:italic; font-weight:300; font-size:24px; margin:0 32px 0 0}
.amic-modal-content .amic-photo{margin-top:18px}
.amic-modal-content p{padding-top:16px; font-family:var(--f-sans); font-size:15px; font-weight:400; line-height:1.7; color:var(--ink-soft); margin:0; max-width:none}
html.modal-lock{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .amic-modal-backdrop, .amic-modal-box{transition:opacity 0.15s ease!important; transform:none!important}
}

/* ---- kafelki: powolne rozsuwanie się na boki przy wejściu w widok ----
   Stagger/direction come from --i/--dir custom props set per-tile in markup
   (not nth-child position) so grouping labels can be interspersed in the
   grid without throwing off which tiles slide from which side. */
.amen-icons .amic.reveal{
  --i:0; --dir:-1;
  transform:translateX(calc(var(--dir) * 38px));
  transition:opacity 1.4s cubic-bezier(0.16,1,0.3,1), transform 1.5s cubic-bezier(0.16,1,0.3,1), filter 1.3s ease;
  transition-delay:calc(var(--i) * 0.1s);
}
.amen-icons .amic.reveal.in{transform:translateX(0)}
@media (prefers-reduced-motion: reduce){
  .amen-icons .amic.reveal{transition:opacity 0.4s ease!important; transform:none!important}
}

/* ============== wine ============== */
.wine{position:relative; background:linear-gradient(180deg, #2c2418 0%, var(--ink) 100%); color:var(--cream-wine); overflow:hidden}
.wine::before{content:""; position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse at 20% 80%, rgba(138,107,60,0.18), transparent 60%), radial-gradient(ellipse at 80% 10%, rgba(138,107,60,0.10), transparent 50%); pointer-events:none}
.wine-art{position:absolute; inset:0; pointer-events:none}
.wine-art img{width:100%; height:100%; object-fit:cover; object-position:center}
.wine-art::after{content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(28,38,32,0.82) 0%, rgba(28,38,32,0.35) 55%, rgba(28,38,32,0) 80%)}
.wine-inner{position:relative; z-index:1}
@media (max-width:768px){
  .wine-art img{object-position:72% 50%}
  .wine-art::after{background:linear-gradient(180deg, rgba(28,38,32,0.72) 0%, rgba(28,38,32,0.45) 100%)}
}
.wine .eyebrow{color:rgba(237,228,208,0.6)}
.wine h2{font-style:italic; margin-top:16px}
.wine h2 em{color:var(--accent); font-style:italic; font-family:var(--f-serif)}
.wine-body{margin-top:24px; max-width:560px; font-size:15px; line-height:1.7; color:rgba(237,228,208,0.78)}
.wine-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:36px}
.wine-card{border:1px solid rgba(237,228,208,0.18); padding:20px 16px; background:rgba(12,18,14,0.28)}
.wine-card .roman{font-family:var(--f-serif); font-style:italic; font-size:32px; color:#9c7e4a}
.wine-card .nm{font-family:var(--f-sans); font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:rgba(237,228,208,0.55); margin-top:8px}
.wine-card .vt{font-family:var(--f-serif); font-style:italic; font-size:18px; margin-top:6px}

/* ============== contact / footer ============== */
.contact{position:relative; background:url(zoptymalizowane/villa_background.webp) center bottom/cover no-repeat; color:var(--cream-soft); padding:80px 24px 30px}
.contact::before{content:""; position:absolute; inset:0; background:rgba(8,14,11,0.45); z-index:-1}
.contact::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,14,11,0.65) 0%, rgba(8,14,11,0.35) 45%, rgba(8,14,11,0.15) 100%); z-index:-1}
.contact h2{font-style:italic}
.contact .lead{margin-top:18px; max-width:520px; color:rgba(236,229,213,0.78); font-size:15px; line-height:1.7}
.contact-grid{margin-top:48px; display:flex; flex-direction:column; gap:30px}
.contact-block .k{font-family:var(--f-sans); font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:rgba(236,229,213,0.55); margin-bottom:10px}
.contact-block .v{font-family:var(--f-serif); font-size:22px; font-style:italic; font-weight:300; line-height:1.3}
.contact-block .v a{transition:color 0.3s}
.contact-block .v a:hover{color:var(--accent)}
.footer{margin-top:64px; padding-top:24px; border-top:1px solid rgba(236,229,213,0.18); display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-family:var(--f-sans); font-size:12px; font-weight:400; letter-spacing:0.06em; text-transform:uppercase; color:rgba(236,229,213,0.55)}
.footer .social{display:flex; gap:22px; flex-wrap:wrap}
.footer a:hover{color:var(--accent)}

/* ============== generic page content ============== */
.container{max-width:var(--max); margin:0 auto}
.lead-text{font-family:var(--f-serif); font-style:italic; font-size:clamp(22px,5vw,38px); line-height:1.2; font-weight:300; max-width:760px; margin-top:8px}
.body-text{margin-top:20px; max-width:620px; color:var(--ink-soft); font-size:15px; line-height:1.7}
.body-text strong{font-weight:500; color:var(--ink)}

/* room/villa detail card */
.detail-room{display:flex; flex-direction:column; gap:24px; padding:60px 0}
.detail-room .visual{aspect-ratio:4/3; overflow:hidden; background:var(--bg-2); position:relative}
.detail-room .visual img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s, transform 1.6s ease}
.detail-room .visual img.loaded{opacity:1}
.detail-room:hover .visual img{transform:scale(1.04)}
.detail-room .visual .badge{position:absolute; top:14px; left:14px; padding:6px 12px; background:var(--ink); color:var(--bg); font-family:var(--f-mono); font-size:10px; letter-spacing:0.2em; text-transform:uppercase}
.detail-room .info .nm{font-family:var(--f-sans); font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.detail-room .info h2{font-family:var(--f-serif); font-style:italic; font-weight:300; font-size:clamp(32px,7vw,56px); margin-bottom:18px}
.detail-room .info p{font-size:15px; line-height:1.7; color:var(--ink-soft); max-width:560px}
.detail-room .specs{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 20px; margin-top:24px; padding-top:24px; border-top:1px solid var(--line)}
.detail-room .specs div .k{font-family:var(--f-sans); font-size:10px; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.detail-room .specs div .v{font-family:var(--f-serif); font-style:italic; font-size:18px}
.detail-room .actions{margin-top:24px; display:flex; gap:12px; flex-wrap:wrap}
.detail-room .actions a,.detail-room .actions button{display:inline-flex; align-items:center; gap:10px; padding:12px 22px; border-radius:999px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase; transition:background 0.3s, color 0.3s; border:none; background:none; cursor:pointer}
.detail-room .actions .primary{background:var(--ink); color:var(--bg)}
.detail-room .actions .primary:hover{background:var(--accent-deep)}
.detail-room .actions .ghost{border:1px solid var(--line); color:var(--ink)}
.detail-room .actions .ghost:hover{background:var(--ink); color:var(--bg)}

/* per-room section backgrounds — subtle photo under a light scrim, dark text stays readable */
.detail-room{position:relative; isolation:isolate}
.detail-room[style*="--room-bg"]::before{
  content:"";
  position:absolute;
  top:0; bottom:0; left:50%;
  width:100vw; transform:translateX(-50%);
  background:
    linear-gradient(rgba(238,241,238,0.86), rgba(238,241,238,0.86)),
    var(--room-bg) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  z-index:-1;
  pointer-events:none;
}

/* villa table */
.villa-table{margin-top:48px; border-top:1px solid var(--line)}
.villa-table .row{display:grid; grid-template-columns:1fr; gap:14px; padding:20px 0; border-bottom:1px solid var(--line)}
.villa-table .row .thumb{aspect-ratio:16/10; overflow:hidden; background:var(--bg-2); position:relative}
.villa-table .row .thumb img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s ease, opacity 0.8s; opacity:0}
.villa-table .row .thumb img.loaded{opacity:1}
.villa-table .row:hover .thumb img{transform:scale(1.04)}
.villa-table .row .nm{font-family:var(--f-serif); font-style:italic; font-size:24px; display:flex; justify-content:space-between; align-items:baseline; gap:14px}
.villa-table .row .nm small{font-family:var(--f-mono); font-size:10px; font-style:normal; letter-spacing:0.18em; color:var(--muted)}
.villa-table .row .ly{font-size:14px; color:var(--ink-soft); line-height:1.5}
.villa-table .row .ps{font-family:var(--f-mono); font-size:11px; letter-spacing:0.18em; color:var(--accent-deep)}

/* feature card with photo (used on amenities pages, list items) */
.feat-card{position:relative; overflow:hidden; background:var(--bg-2); aspect-ratio:4/3}
.feat-card img{width:100%; height:100%; object-fit:cover; transition:transform 1.6s ease, opacity 1s; opacity:0}
.feat-card img.loaded{opacity:1}
.feat-card:hover img{transform:scale(1.06)}
.feat-card::after{content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(20,28,22,0.75) 0%, rgba(20,28,22,0) 55%)}
.feat-card .meta{position:absolute; left:18px; right:18px; bottom:14px; z-index:2; color:var(--cream)}
.feat-card .meta .nm{font-family:var(--f-serif); font-style:italic; font-size:22px; font-weight:300; line-height:1.1}
.feat-card .meta .ms{font-family:var(--f-mono); font-size:10px; letter-spacing:0.18em; text-transform:uppercase; margin-top:4px; opacity:0.85}

/* ============== desktop ============== */
@media (min-width: 720px){
  body{font-size:16px}
  section{padding:140px 56px}
  .nav{padding:24px 40px}
  .nav.scrolled, .nav.solid{padding:16px 40px}
  .nav .left{gap:28px}
  .nav .brand{font-size:17px}
  .nav-link{display:inline-flex}
  .hero{padding:40px 40px 56px}
  .hero-top{top:110px; left:40px; right:40px}
  .hero-brand{font-size:clamp(34px, 5vw, 112px)}
  .hero-brand-label{transform:translate(-50%, calc(-100% - 4vw + 26px))}
  .hero-foot{margin-top:40px}
  .hero-foot .scroll{margin-left:8px}
  .hero-bg img{transform:scale(1.12); animation-name:kenburns; object-position:center 15%}
  .hero-inner{display:flex; flex-direction:row; justify-content:space-between; align-items:flex-end; gap:40px}
  .hero-tag{max-width:560px; font-size:23px; margin-left:8px}
  .hero-actions{display:flex; flex-direction:column; align-items:flex-start}
  .hero-book{width:520px}
  .intro{padding:120px 96px; margin-top:-56px}
  .intro::before{height:360px}
  .intro .quote{max-width:780px}
  .intro-img{margin-top:0; height:100%; min-height:420px}
  .intro-columns{grid-template-columns:1fr 1px 1fr; gap:56px; margin-top:56px}
  .intro-divider{width:1px; height:100%}
  .marquee span{font-size:42px}
  .exp-track{gap:28px; margin:0 -56px; padding:12px 56px 16px; scroll-padding-left:56px}
  .exp-card{flex:0 0 clamp(360px, 42%, 460px); aspect-ratio:3/4}
  .exp-card.is-active{transform:scale(1.015)}
  .exp-nav{display:flex}
  .exp-prev{left:6px}
  .exp-next{right:6px}
  .exp-dots{display:none}
  .exp-desc > span{font-size:15px}
  .villa{display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch}
  .villa-img{height:auto; min-height:auto}
  .villa-img::after{background:
    linear-gradient(to top, rgba(20,28,22,0.5), rgba(20,28,22,0.06) 55%),
    linear-gradient(90deg, rgba(20,28,22,0.06) 0%, rgba(20,28,22,0.22) 62%, rgba(20,28,22,0.58) 100%)}
  .villa-content{padding:120px 64px}
  .gallery-grid{grid-template-columns:repeat(4,1fr); gap:14px}
  .gallery-grid .tile.wide{grid-column:1 / -1; aspect-ratio:16/6}
  .wine{padding:140px 56px}
  .wine-row{grid-template-columns:repeat(4,1fr)}
  .reserve-strip .form{max-width:720px}
  .field-row{grid-template-columns:repeat(4,1fr)}
  .contact{padding:140px 56px 40px}
  .contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:48px}
  .menu-overlay{padding:40px 64px 60px}
  .menu-overlay a{font-size:84px}
  .page-head{padding:200px 56px 100px}
  .amen-grid{grid-template-columns:repeat(2,1fr); gap:24px}
  .amen-icons{grid-template-columns:repeat(3,1fr)}
  .amen-row{display:contents}
  .detail-room{display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:center; padding:100px 0}
  .detail-room:nth-child(even){grid-template-columns:1fr 1.2fr}
  .detail-room:nth-child(even) .visual{order:2}
  .villa-table .row{grid-template-columns:1fr 2fr 0.6fr; align-items:center; gap:24px}
  .villa-table .row .nm{font-size:28px}
}
@media (min-width: 1100px){
  .menu-toggle{display:none}
  .nav .left{justify-content:flex-start}
}

/* ============================================================
   MOBILE REFINEMENTS — phones & small tablets
   Fixes long-brand nav overflow and tightens touch layout.
   ============================================================ */
@media (max-width: 1099px){
  /* Nav links live in the hamburger overlay below 1100px,
     so the top bar is just: brand (left) + controls (right).
     Switch off the centered 3-col grid that overflows with a
     long brand like "Gorczański Zakątek". */
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:21px 23px;
  }
  .nav .left{display:none}
  .nav .brand{
    grid-column:auto;
    justify-self:start;
    letter-spacing:0.16em;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .nav .right{
    grid-column:auto;
    justify-content:flex-end;
    flex-shrink:0;
  }
  /* Bigger, comfortable tap target for the menu button */
  .menu-toggle{padding:12px; margin:-12px; gap:5px}
  .menu-toggle .bar{width:23px}
}

@media (max-width: 600px){
  /* On phones the standalone Rezerwuj pill crowds the brand;
     "Rezerwacja" stays one tap away inside the menu overlay. */
  .nav .btn-reserve{display:none}
  .nav .brand{letter-spacing:0.12em}
}

/* ============== MOBILE STICKY CTA ============== */
/* Replaces the hidden nav pill on phones: a bottom bar that slides
   in after the hero and ducks under the on-page reservation form. */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:none;
  align-items:center; gap:14px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(28,38,32,0.96);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  transform:translateY(100%);
  transition:transform 0.35s ease;
}
.mobile-cta.show:not(.hide){transform:translateY(0)}
.mobile-cta.show:not(.hide).cookie-open{transform:translateY(calc(-1 * var(--cookie-h, 0px)))}
.mobile-cta .go{
  flex:1;
  display:inline-flex; justify-content:center; align-items:center; gap:8px;
  padding:13px 18px;
  background:var(--cream); color:var(--ink);
  border-radius:999px;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em; text-transform:uppercase;
  white-space:nowrap;
}
.mobile-cta .tel{
  padding:13px 4px;
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(244,236,224,0.75);
  white-space:nowrap;
}
@media (max-width: 600px){
  .mobile-cta{display:flex}
}
@media (prefers-reduced-motion: reduce){
  .mobile-cta{transition:none}
}

/* Menu overlay: keep the big serif links from overflowing
   narrow screens and give the list room to breathe. */
@media (max-width: 600px){
  .menu-overlay a{font-size:clamp(26px, 9vw, 38px)}
  .menu-overlay .foot{gap:12px}
}

/* Gallery filter bar (Gorczański) sits just under the fixed nav */
@media (max-width: 719px){
  .tab-bar{top:58px}
  /* Comfortable touch targets on phones */
  .qty button{width:40px; height:40px; font-size:16px}
  .menu-overlay .close{padding:8px 4px; margin:-8px -4px}
}

/* Reservation page: stop the form/summary grid items from
   expanding the page wider than the viewport on phones.
   (Grid/flex items default to min-width:auto, which lets wide
   content — date inputs, the step bar — blow out the layout.) */
@media (max-width: 899px){
  .res-wrap{min-width:0}
  .res-wrap > div,
  .res-wrap > aside,
  .res-card,
  .res-card div{min-width:0}
  .res-card input,
  .res-card textarea,
  .res-card .input{min-width:0; width:100%; max-width:100%}
  .steps{row-gap:10px}
  .steps .step{min-width:0}
  .steps .step span{white-space:normal}
  /* let the room picker text shrink instead of pushing width */
  .pick{min-width:0}
  .pick .info{min-width:0}
  .pick .info .nm{overflow-wrap:anywhere}
}

/* ============================================================
   MOTION PACKAGE — bold, editorial micro-interactions
   Layered on top of the base reveal/hero system. Every effect
   self-disables under prefers-reduced-motion and on touch.
   ============================================================ */

/* 1 — Scroll-progress hairline */
.scroll-progress{position:fixed; top:0; left:0; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%; background:var(--accent); z-index:200; pointer-events:none; will-change:transform}

/* 2 — Custom cursor (desktop pointer only) */

/* 3 — Parallax background layers (transform driven by JS) */
.hero-bg.parallax-bg, .page-head .bg.parallax-bg{top:-20%; bottom:auto; height:140%; will-change:transform}

/* 4 — Heading mask-rise (applied by JS to .page-head h1) */
.anim-head .w-line{display:block; overflow:hidden; padding-bottom:0.1em}
.anim-head .w-in{display:block; transform:translateY(112%); transition:transform 1.05s cubic-bezier(0.16,1,0.3,1)}
.anim-head.in .w-in{transform:translateY(0)}

/* 5 — Richer reveal: focus-pull (blur clears as it fades in) */
.reveal{filter:blur(5px); transition:opacity 1s ease, transform 1.2s cubic-bezier(0.2,0.6,0.2,1), filter 1.1s ease}
.reveal.in{filter:blur(0)}

/* 6 — Magnetic CTAs */
.magnetic{will-change:transform; transition:transform 0.3s cubic-bezier(0.2,0.8,0.2,1)}

/* 7 — Sheen sweep across image tiles on hover */
.room-img, .gallery-grid .tile, .detail-room .visual{position:relative}
.room-img::after, .gallery-grid .tile::after, .detail-room .visual::after{content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.22) 50%, transparent 68%); transform:translateX(-130%); transition:transform 0.85s cubic-bezier(0.4,0,0.2,1); pointer-events:none; z-index:3}
.room:hover .room-img::after, .gallery-grid .tile:hover::after, .detail-room:hover .visual::after{transform:translateX(130%)}

/* 8 — Count-up stat cells reserve their space */
[data-count]{font-variant-numeric:tabular-nums}

/* Content is always visible before JS enables animations */
html:not(.js-ready) .reveal,
html:not(.js-ready) .reveal-img{opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}

@media (prefers-reduced-motion: reduce){
  .reveal{filter:none}
  .anim-head .w-in{transform:none; transition:none}
  .scroll-progress{display:none}
  .hero-bg.parallax-bg, .page-head .bg.parallax-bg{top:0; bottom:0; height:auto; transform:none !important}
}

/* 9 — Offscreen render-skipping for heavy image grids (perf) */
.gallery-grid .tile, .amen-grid .amen-card, .rooms-grid .room{content-visibility:auto; contain-intrinsic-size:auto 360px}
.gallery-grid .tile.tall{contain-intrinsic-size:auto 520px}
img{background:rgba(255,255,255,0.03)}

/* ============== HERO CTA ============== */
.hero-cta{
  margin-top:32px;
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  opacity:0; transform:translateY(20px);
  transition:opacity 1s ease 1s, transform 1s ease 1s;
}
.hero.ready .hero-cta{opacity:1; transform:translateY(0)}
.hero-tel{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
  color:rgba(244,236,224,0.72);
  transition:color 0.3s;
}
.hero-tel:hover{color:var(--cream)}
@media(prefers-reduced-motion:reduce){.hero-cta{transition:none}}

/* ============== HERO BOOKING WIDGET ============== */
.hero-book{
  margin-top:22px;
  display:flex; flex-wrap:wrap; align-items:stretch;
  max-width:520px;
  background:rgba(18,26,20,0.74);
  border:1px solid rgba(244,236,224,0.16);
  border-radius:16px;
  overflow:hidden;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transform:translateY(20px);
  transition:opacity 1s ease 1.15s, transform 1s ease 1.15s;
}
.hero.ready .hero-book{opacity:1; transform:translateY(0)}
.hb-field{
  position:relative;
  flex:1 1 120px;
  padding:12px 18px;
  border-right:1px solid rgba(244,236,224,0.14);
  display:flex; flex-direction:column; gap:3px;
  cursor:pointer;
  transition:background 0.3s;
}
.hb-field:hover{background:rgba(244,236,224,0.08)}
.hb-field:focus-within{background:rgba(244,236,224,0.12)}
.hb-field:last-of-type{border-right:none}
.hb-input{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer;
  border:0; padding:0; margin:0;
  -webkit-appearance:none; appearance:none;
}
.hb-input::-webkit-calendar-picker-indicator{position:absolute; inset:0; width:100%; height:100%; cursor:pointer}
.hb-k{font-family:var(--f-sans); font-size:9.5px; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; color:rgba(244,236,224,0.6)}
.hb-v{font-family:var(--f-serif); font-style:italic; font-size:17px; color:var(--cream)}
.hb-btn{
  flex:0 0 auto;
  padding:0 30px;
  background:var(--accent); color:var(--ink);
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase;
  white-space:nowrap;
  transition:background 0.3s;
}
.hb-btn:hover{background:var(--cream)}
.hb-btn-label--short{display:none}
.hb-phone{display:none}
@media (max-width:560px){
  .hero-book{max-width:100%}
}
@media(prefers-reduced-motion:reduce){.hero-book{transition:none}}

/* docked copy of the bar — pinned to the viewport bottom once the hero scrolls away */
.hb-holder{display:flow-root}
.hb-dock{
  position:fixed; left:0; right:0; bottom:18px; z-index:90;
  display:flex; justify-content:center;
  padding:0 20px;
  pointer-events:none;
  opacity:0; transform:translateY(16px);
  transition:opacity 0.4s ease, transform 0.4s ease;
}
.hb-dock.visible{opacity:1; transform:none}
.hb-dock.visible.cookie-open{transform:translateY(calc(-1 * var(--cookie-h, 0px)))}
.hb-dock.hide{opacity:0; transform:translateY(16px)}
.hb-dock .hero-book{
  pointer-events:auto;
  margin-top:0;
  opacity:1; transform:none;
  transition:none;
  width:100%;
  background:rgba(28,38,32,0.94);
  box-shadow:0 14px 40px rgba(0,0,0,0.35);
}
.hb-dock.hide .hero-book{pointer-events:none}
@media (max-width:600px){
  /* phones already get the .mobile-cta bottom bar */
  .hb-dock{display:none}
}
@media(prefers-reduced-motion:reduce){.hb-dock{transition:none}}

/* ============================================================
   MOBILE HERO — one calm fold, one clear step
   The N/E coordinates and the edition meta are desktop
   editorial framing; on a phone they crowd the fold. The scroll
   cue and phone link are redundant with the sticky .mobile-cta
   bar that slides in once the hero scrolls past. On phones the
   bottom stack is just: promise, then the reservation widget.
   ============================================================ */
@media (max-width:600px){
  .hero{padding:24px 22px calc(30px + env(safe-area-inset-bottom))}

  /* deeper, taller floor: the text stack sits on the busiest,
     brightest part of the photo, so it needs real cover */
  .hero::after{
    background:linear-gradient(to bottom,
      rgba(20,28,22,0.50) 0%,
      rgba(20,28,22,0.04) 26%,
      rgba(20,28,22,0.30) 60%,
      rgba(20,28,22,0.88) 100%);
  }

  /* drop the scattered mono meta — coordinates + edition number */
  .hero-meta{display:none}
  .hero-foot{display:none}

  /* on phones the base 32% top puts a ~120px gap between the "Est."
     kicker and the wordmark below it — pull it in close instead */
  .hero-brand-label{top:19%}

  .hero-tag{font-size:19px; line-height:1.5}

  /* bottom stack is the promise + the reservation widget only */
  .hero-actions{margin-top:26px}
  .hero-cta{display:none}

  /* the date-field panel is too heavy for the phone fold — swap it
     for a single full-width ghost button plus a call line */
  .hb-field{display:none}
  .hero-book{
    background:none; border:none; border-radius:0;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .hb-btn{
    flex:1 1 100%;
    height:58px;
    background:rgba(18,26,20,0.42);
    color:var(--cream);
    border:1.5px solid rgba(244,236,224,0.55);
    border-radius:16px;
    letter-spacing:0.22em;
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  }
  .hb-btn:hover, .hb-btn:active{background:rgba(18,26,20,0.42)}
  .hb-btn-label--full{display:none}
  .hb-btn-label--short{display:inline}
  .hb-phone{
    display:block;
    width:100%;
    margin-top:16px;
    text-align:center;
    font-family:var(--f-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
    color:var(--accent);
  }
  .hb-phone-num{font-weight:600}
}

/* ============== TESTIMONIALS ============== */
.testimonials{
  position:relative; overflow:hidden;
  background:var(--paper) url("zoptymalizowane/room_background.webp") center center/cover no-repeat;
  padding:44px 20px 64px;
}
.testimonials::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:180px; z-index:0;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 140 C 180 90, 320 170, 500 120 S 820 60, 1000 130 S 1160 110, 1200 150' fill='none' stroke='rgba(28,38,32,0.14)' stroke-width='2'/%3E%3C/svg%3E") center bottom/cover no-repeat;
}
.tstm-head{
  display:flex; justify-content:space-between; align-items:end;
  gap:24px; flex-wrap:wrap; margin-bottom:40px; position:relative; z-index:1;
}
.tstm-rating{display:flex; align-items:center; gap:14px}
.tstm-stars{color:var(--accent); font-size:18px; letter-spacing:2px; line-height:1; flex-shrink:0}
.tstm-rating-text{display:flex; flex-direction:column; gap:2px}
.tstm-score{font-family:var(--f-serif); font-style:italic; font-size:26px; line-height:1; color:var(--ink)}
.tstm-of5{font-family:var(--f-sans); font-style:normal; font-size:13px; color:var(--muted); margin-left:1px}
.tstm-count{font-family:var(--f-sans); font-size:11px; font-weight:400; letter-spacing:0.02em; color:var(--muted)}
.tstm-grid{
  display:flex; flex-direction:row; flex-wrap:nowrap; gap:24px;
  justify-content:center; justify-content:safe center;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  margin:0 -20px; padding:0 20px 8px; scrollbar-width:none;
  position:relative; z-index:1;
}
.tstm-grid::-webkit-scrollbar{display:none}
.tstm-grid .tstm{flex:0 0 84%; scroll-snap-align:center}
.tstm{
  position:relative;
  margin:0; padding:36px 28px 28px;
  background:rgba(255,252,245,0.55); border:1px solid rgba(30,45,36,0.10);
  box-shadow:0 24px 50px rgba(20,30,24,0.05);
  border-radius:4px;
  display:flex; flex-direction:column; gap:20px;
}
.tstm::before{
  content:"“"; position:absolute; top:2px; left:20px;
  font-family:var(--f-serif); font-style:italic; font-size:64px; line-height:1;
  color:var(--accent); opacity:0.28; pointer-events:none;
}
.tstm-quote{
  font-family:var(--f-serif); font-style:italic; font-size:clamp(17px,3vw,22px);
  line-height:1.5; color:var(--ink-soft); flex:1; margin-top:14px;
}
.tstm-footer{display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap}
.tstm-name{font-family:var(--f-sans); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink)}
.tstm-meta{font-family:var(--f-sans); font-size:11px; font-weight:400; letter-spacing:0; text-transform:none; color:var(--muted)}
.tstm-more{margin-top:32px; position:relative; z-index:1}

/* ============== COOKIE BANNER ============== */
.cookie-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:400;
  background:var(--ink); color:var(--cream-soft);
  padding:18px 20px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  transform:translateY(110%);
  transition:transform 0.5s cubic-bezier(0.6,0,0.2,1);
}
.cookie-bar.visible{transform:translateY(0)}
.cookie-txt{
  font-family:var(--f-sans); font-size:12px; letter-spacing:0; line-height:1.6;
  color:rgba(236,229,213,0.82); flex:1; min-width:200px;
}
.cookie-txt a{color:rgba(236,229,213,0.82); border-bottom:1px solid rgba(236,229,213,0.35); transition:color 0.3s}
.cookie-txt a:hover{color:var(--cream)}
.cookie-btns{display:flex; gap:10px; flex-shrink:0}
.cookie-ok{
  padding:9px 20px; background:var(--accent); color:var(--cream);
  border-radius:999px; font-family:var(--f-sans); font-size:11px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase;
  border:none; cursor:pointer; transition:background 0.25s;
}
.cookie-ok:hover{background:var(--accent-deep)}
.cookie-no{
  padding:9px 20px; background:transparent; color:rgba(236,229,213,0.65);
  border-radius:999px; font-family:var(--f-sans); font-size:11px; font-weight:400; letter-spacing:0.06em; text-transform:uppercase;
  border:1px solid rgba(236,229,213,0.25); cursor:pointer; transition:border-color 0.25s, color 0.25s;
}
.cookie-no:hover{border-color:rgba(236,229,213,0.55); color:var(--cream)}

@media(min-width:720px){
  .testimonials{padding:88px 56px 130px}
  .tstm-grid{gap:32px; margin:0 -56px; padding:0 56px 8px}
  .tstm-grid .tstm{flex:0 0 380px}
  .tstm{padding:40px 28px 28px}
  .tstm-feature{background:rgba(255,252,245,0.75); box-shadow:0 30px 64px rgba(20,30,24,0.08)}
  .cookie-bar{padding:20px 40px}
}