:root{
  --bg:#0b0c0e;
  --paper:#ffffff;
  --ink:#101114;
  --muted:rgba(16,17,20,.72);
  --line:rgba(16,17,20,.12);

  /* premium warm accent (copper / caramel) */
  --accent:#b68a5a;
  --accent2:#d2b48c;

  --radius:18px;
  --shadow: 0 24px 60px rgba(0,0,0,.18);

  --serif: "Cormorant Garamond", serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background: #f4f1ec;
}

.container{
  width:min(1120px, calc(100% - 40px));
  margin-inline:auto;
}

.h2{
  margin:0 0 8px;
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:.02em;
  font-size: clamp(28px, 3vw, 40px);
}
.muted{margin:0;color:var(--muted);line-height:1.6}

.section{padding:72px 0}
.section--alt{background:#fff}
.section__head{margin-bottom:22px}
.section__head--split{
  display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap
}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:40;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(244,241,236,.72);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.topbar__inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;gap:14px
}

.brand{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit
}
.brand__mark{
  width:38px;height:38px;border-radius:12px;
  display:grid;place-items:center;
  background: linear-gradient(135deg, rgba(182,138,90,.18), rgba(16,17,20,.08));
  border:1px solid rgba(0,0,0,.10);
  font-family:var(--serif);
  font-weight:700;
}
.brand__name{
  display:block;
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:.08em;
}
.brand__sub{
  display:block;
  font-size:12px;
  color:var(--muted);
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:2px;
}

.nav{display:flex;gap:14px;align-items:center}
.nav__link{
  text-decoration:none;color:rgba(16,17,20,.82);
  font-size:14px;font-weight:600;
  padding:10px 10px;border-radius:12px;
}
.nav__link:hover{background:rgba(0,0,0,.05)}

.topbar__cta{display:flex;gap:10px;align-items:center}

/* Burger */
.burger{
  display:none;
  width:42px;height:42px;border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.55);
  cursor:pointer;
}
.burger span{
  display:block;height:2px;width:18px;margin:4px auto;
  background:rgba(16,17,20,.75);
  border-radius:2px;
}

/* Mobile menu */
.mobile{
  display:none;
  border-top:1px solid rgba(0,0,0,.08);
  background: rgba(244,241,236,.92);
}
.mobile.is-open{display:block}
.mobile__inner{padding:14px 0;display:grid;gap:10px}
.mobile__link{
  text-decoration:none;color:rgba(16,17,20,.9);
  padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  font-weight:700;
}
.mobile__note{color:var(--muted);font-size:13px;line-height:1.5}

/* Buttons */
.btn{
  border:0;cursor:pointer;
  padding:12px 16px;
  border-radius:14px;
  font-weight:700;
  letter-spacing:.02em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-family:var(--sans);
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  color:#fff;
  background: linear-gradient(135deg, rgba(16,17,20,.95), rgba(16,17,20,.86));
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.btn--primary:hover{box-shadow: 0 22px 54px rgba(0,0,0,.22)}
.btn--ghost{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.10);
  color:rgba(16,17,20,.88);
}
.btn--ghost:hover{background:rgba(255,255,255,.75)}
.btn--soft{
  background: rgba(182,138,90,.14);
  border:1px solid rgba(182,138,90,.28);
  color: rgba(16,17,20,.88);
}
.btn--soft:hover{background: rgba(182,138,90,.18)}

/* Hero */
.hero{
  min-height: 92vh;
  display:flex;align-items:center;
  color:#fff;
  background:
    linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.24)),
    url("./assets/bg.jpg") center/cover no-repeat;
}
.hero__inner{padding:68px 0}
.hero__content{max-width:680px}
.pill{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
}
.hero__title{
  margin:14px 0 8px;
  font-family:var(--serif);
  font-weight:700;
  letter-spacing:.16em;
  font-size: clamp(46px, 7vw, 88px);
  line-height:1.02;
}
.hero__lead{
  margin:0;
  color: rgba(255,255,255,.84);
  line-height:1.7;
  font-size: 16px;
  max-width: 56ch;
}
.hero__stats{
  margin-top:18px;
  display:flex;gap:12px;flex-wrap:wrap;
}
.stat{
  padding:12px 14px;
  border-radius:16px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  min-width: 180px;
}
.stat__top{display:flex;align-items:center;gap:10px}
.stat__value{font-weight:800}
.stat__sub{margin-top:6px;color:rgba(255,255,255,.72);font-size:13px;line-height:1.4}
.hero__actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}
.hero__note{margin-top:12px;color:rgba(255,255,255,.62);font-size:13px}

/* Stars */
.stars{
  position:relative;
  display:inline-block;
  width:92px;height:16px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.22));
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 20"><text x="0" y="16" font-size="18">★★★★★</text></svg>') center/contain no-repeat;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 20"><text x="0" y="16" font-size="18">★★★★★</text></svg>') center/contain no-repeat;
}
.stars__fill{
  position:absolute;inset:0;
  width:var(--p, 0%);
  background: linear-gradient(90deg, var(--accent2), var(--accent));
}

/* Price */
.price-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:14px;
}
.price-card{
  background: rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.price-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.price-row:last-child{border-bottom:0}
.price-title{font-weight:800}
.price-sub{font-size:13px;color:var(--muted);margin-top:3px}
.price-val{font-weight:900;letter-spacing:.02em}

.cta-strip{
  margin-top:16px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background: linear-gradient(135deg, rgba(182,138,90,.12), rgba(255,255,255,.75));
  border:1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  padding:16px;
}
.cta-strip__title{font-weight:900}
.cta-strip__sub{color:var(--muted);margin-top:4px}

/* Team */
.team{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.member{
  background: rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.member__avatar{
  width:52px;height:52px;border-radius:16px;
  display:grid;place-items:center;
  background: rgba(16,17,20,.92);
  color:#fff;
  font-weight:900;
  font-family:var(--serif);
  letter-spacing:.06em;
}
.member__name{margin-top:12px;font-weight:900;font-size:18px}
.member__role{color:var(--muted);font-size:13px;margin-top:4px}
.member__text{margin:10px 0 14px;color:rgba(16,17,20,.82);line-height:1.65}

/* Reviews */
.rating-box{
  background: rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  padding:14px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  min-width: 260px;
}
.rating-box__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rating-box__num{
  font-family:var(--serif);
  font-weight:700;
  font-size:32px;
  letter-spacing:.02em;
}
.rating-box__sub{margin-top:6px;color:var(--muted);font-size:13px}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.chip{
  background: rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.10);
  padding:10px 12px;border-radius:999px;
  cursor:pointer;
  font-weight:800;
}
.chip.is-active{
  background: rgba(16,17,20,.92);
  border-color: rgba(16,17,20,.92);
  color:#fff;
}
.reviews{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
}
.review{
  background: rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.review__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.review__name{font-weight:900}
.review__date{font-size:12px;color:var(--muted)}
.review__text{margin:10px 0 0;color:rgba(16,17,20,.82);line-height:1.7}
.review__reply{
  margin-top:12px;
  padding:12px 12px;
  border-radius: 14px;
  background: rgba(182,138,90,.10);
  border:1px solid rgba(182,138,90,.22);
  color: rgba(16,17,20,.82);
  font-size:13px;
  line-height:1.6;
}
.reviews__foot{margin-top:14px;display:flex}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}
.gitem{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  cursor:pointer;
}
.gitem img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transform: scale(1.01);
  transition: transform .25s ease, filter .25s ease;
}
.gitem:hover img{transform: scale(1.06);filter: contrast(1.02) saturate(1.05)}
.gitem::after{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.28));
  opacity:.9;
}

.gitem--a{grid-column: span 6; aspect-ratio: 16/10;}
.gitem--b{grid-column: span 3; aspect-ratio: 1/1;}
.gitem--c{grid-column: span 3; aspect-ratio: 1/1;}
.gitem--d{grid-column: span 4; aspect-ratio: 4/3;}
.gitem--e{grid-column: span 4; aspect-ratio: 4/3;}
.gitem--f{grid-column: span 4; aspect-ratio: 4/3;}

/* FAQ */
.faq{display:grid;gap:10px;max-width: 820px}
.qa{
  background: rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  padding:14px 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.qa summary{
  cursor:pointer;
  font-weight:900;
  list-style:none;
}
.qa summary::-webkit-details-marker{display:none}
.qa__body{margin-top:10px;color:rgba(16,17,20,.82);line-height:1.7}

/* Footer CTA */
.footer-cta{
  margin-top:18px;
  background: rgba(255,255,255,.72);
  border:1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}
.footer-cta__title{font-weight:900;font-size:18px}
.footer-cta__sub{margin-top:6px;color:var(--muted);line-height:1.6}
.footer-cta__actions{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}

/* Footer */
.footer{
  background: rgba(16,17,20,.96);
  color: rgba(255,255,255,.86);
  padding:22px 0;
}
.footer__inner{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap
}
.footer__brand{font-family:var(--serif);font-weight:700;letter-spacing:.08em}
.footer__note{margin-top:6px;color:rgba(255,255,255,.58);font-size:13px;max-width:48ch;line-height:1.6}
.footer__right{display:flex;gap:10px;flex-wrap:wrap}
.link{
  background:transparent;
  border:1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.82);
  padding:10px 12px;border-radius:999px;
  cursor:pointer;
  font-weight:800;
}
.link:hover{border-color: rgba(255,255,255,.30)}

/* Modal */
.modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 60;

  /* NEW: центрування */
  align-items: center;
  justify-content: center;

  padding: 16px;            /* щоб не прилипало до країв на мобілці */
  height: 100dvh;           /* стабільніше за 100vh на iOS */
}

.modal.is-open{ display: flex; }  /* було display:block */

.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
}

.modal__card{
  position: relative;
  width: min(520px, calc(100% - 36px));
  margin: 0;                /* прибрали 14vh */
  max-height: calc(100dvh - 32px);
  overflow: auto;

  background: rgba(255,255,255,.96);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  border: 1px solid rgba(0,0,0,.10);
}

/* Lightbox */
.lightbox{position:fixed;inset:0;display:none;z-index:70}
.lightbox.is-open{display:block}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.lightbox__card{
  position:relative;
  width:min(980px, calc(100% - 36px));
  height: calc(100vh - 80px);
  margin: 40px auto;
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 30px 100px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lightbox__card img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  display:block;
}
.lightbox__cap{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;
  color:rgba(255,255,255,.82);
  background: rgba(0,0,0,.46);
}
.lightbox__close{
  border:1px solid rgba(255,255,255,.20);
  background: transparent;
  color: rgba(255,255,255,.86);
  padding:8px 10px;border-radius:12px;
  cursor:pointer;font-weight:800;
}
.lightbox__close:hover{border-color: rgba(255,255,255,.32)}

/* Responsive */
@media (max-width: 980px){
  .nav{display:none}
  .burger{display:block}
  .price-grid{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .reviews{grid-template-columns:1fr}
  .gallery{grid-template-columns: repeat(6, 1fr)}
  .gitem--a{grid-column: span 6}
  .gitem--b,.gitem--c{grid-column: span 3}
  .gitem--d,.gitem--e,.gitem--f{grid-column: span 6}
}
body.lb-open{
  overflow:hidden;
}
/* ===========================
   Universal Lightbox (all browsers, incl. in-app)
   =========================== */

.lightbox{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}

.lightbox.is-open{display:block}

/* Dark backdrop */
.lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.75);
}

/* Card fits viewport */
.lightbox__card{
  position:relative;
  width:min(980px, calc(100% - 28px));
  height: min(calc(100dvh - 28px), calc(100vh - 28px));
  margin: 14px auto;
  border-radius: 18px;
  overflow:hidden;
  background:#0f1012;
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 30px 100px rgba(0,0,0,.5);
  display:flex;
  flex-direction:column;
  isolation:isolate; /* ensures z-index layering inside works reliably */
}

/* Close X (always clickable) */
.lightbox__x{
  position:absolute;
  top:10px;
  right:10px;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(182,138,90,.55);
  background: rgba(16,17,20,.55);
  color: rgba(210,180,140,.95);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  z-index:20;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.lightbox__x:active{transform: translateY(1px)}

/* Loader overlay */
.lightbox__loader{
  position:absolute;
  inset:0;
  display:none; /* shown by JS */
  place-items:center;
  color: rgba(255,255,255,.75);
  font-weight:700;
  letter-spacing:.02em;
  background: rgba(15,16,18,.55);
  z-index:10;
}

/* Image */
#lightboxImg{
  width:100%;
  height:100%;
  flex: 1 1 auto;
  object-fit: contain;
  display:block;
  background:#0f1012;
}

/* Caption */
.lightbox__cap{
  padding:12px 14px;
  color: rgba(255,255,255,.78);
  background: rgba(0,0,0,.40);
  border-top:1px solid rgba(255,255,255,.12);
}

/* Lock background scroll (universal) */
body.lb-open{
  overflow:hidden;
  height:100%;
}

/* iOS tweak: prevent scroll bounce behind modal */
html.lb-open{
  overflow:hidden;
  height:100%;
}
/* ===========================
   FIX: no jumps + stable lock
   =========================== */

/* коли відкритий лайтбокс — вимикаємо smooth, інакше scrollTo буде "плавно їхати" */
html.lb-open{
  scroll-behavior: auto !important;
  overflow: hidden;
  height: 100%;
}

body.lb-open{
  overflow: hidden;
  height: 100%;
  touch-action: none;            /* блокує скрол-жести під лайтбоксом */
  overscroll-behavior: none;     /* прибирає bounce/перетягування */
}
/* Booking modal additions */
.modal__card--wide{
  max-width: 720px;
}

.modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.modal__x{
  background: transparent;
  border: none;
  color: rgba(16,17,20,.82);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  transition: transform .15s ease, opacity .15s ease;
}

.modal__x:hover{
  transform: scale(1.08);
  opacity: .6;
}

.form{
  margin-top: 14px;
}

.form__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.field--full{
  grid-column: 1 / -1;
}

.field__label{
  font-weight: 600;
  font-size: 13px;
  opacity: .86;
}

.field__input{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  outline: none;
}

.field__input:focus{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}

.field__textarea{
  resize: vertical;
  min-height: 96px;
}

.form__actions{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.form__note{
  margin-top: 10px;
  font-size: 13px;
  opacity: .86;
}

/* Mobile */
@media (max-width: 640px){
  .form__grid{
    grid-template-columns: 1fr;
  }
}
/* Booking form: black text on light fields */
#bookingModal .field__input{
  background: rgba(255,255,255,.92);
  color: rgba(16,17,20,.92);
  border: 1px solid rgba(0,0,0,.14);
}

#bookingModal .field__input::placeholder{
  color: rgba(16,17,20,.45);
}

#bookingModal select.field__input{
  color: rgba(16,17,20,.92);
}

#bookingModal .field__label{
  color: rgba(16,17,20,.82);
  opacity: 1;
}

/* красивий фокус */
#bookingModal .field__input:focus{
  border-color: rgba(182,138,90,.55);
  box-shadow: 0 0 0 3px rgba(182,138,90,.16);
}
#reviewModal .field__input{
  background: rgba(255,255,255,.92);
  color: rgba(16,17,20,.92);
  border: 1px solid rgba(0,0,0,.14);
}
#reviewModal .field__input::placeholder{ color: rgba(16,17,20,.45); }
#reviewModal .field__label{ color: rgba(16,17,20,.82); opacity: 1; }