:root{
  --sand:#EAD9B0;
  --dune:#D4B67A;
  --sea:#1F8EA6;
  --sea2:#0B6677;
  --shell:#FFF4DE;
  --ink:#1A1A1A;
  --muted:#5A5A5A;
  --card: rgba(255, 244, 222, 0.78);
  --shadow: 0 12px 30px rgba(0,0,0,.12);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;color:var(--ink);overflow-x:hidden;}
body{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(11,102,119,.14), transparent 58%),
    radial-gradient(900px 520px at 95% 18%, rgba(212,182,122,.40), transparent 62%),
    radial-gradient(700px 380px at 70% 0%, rgba(165,110,70,.10), transparent 60%),
    linear-gradient(180deg, var(--shell), var(--sand));
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px; margin:0 auto; padding:16px; padding-top:4px;}

.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  backdrop-filter: blur(10px);
  background: rgba(255,244,222,.72);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:1100px;margin:0 auto;padding:14px 22px;
}
.brand{display:flex;flex-direction:row;align-items:center;gap:10px;line-height:1.05;}
.brand .name{font-size:18px;font-weight:800;letter-spacing:.3px;margin-bottom:6px}
.brand-logo{
  height:64px;
  width:auto;
  max-width: 140px;
  object-fit:contain;
  display:block;
}
.brand .tag{font-size:.9rem;color:var(--muted)}
.nav-links{display:flex;gap:10px;flex-wrap:wrap}
.nav-links a{
  padding:10px 12px;border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.35);
}
.nav-links a.active{
  background: linear-gradient(135deg, rgba(31,142,166,.22), rgba(212,182,122,.22));
  border-color: rgba(31,142,166,.35);
}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.40);
  align-items:center;
  justify-content:center;
  transition: background .18s ease, border-color .18s ease;
}
.nav-toggle-bars{
  width:18px;height:2px;background:rgba(0,0,0,.65);display:block;position:relative;border-radius:99px;
}
.nav-toggle-bars:before,.nav-toggle-bars:after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:rgba(0,0,0,.65);border-radius:99px;
}
.nav-toggle-bars:before{top:-6px}
.nav-toggle-bars:after{top:6px}

.drawer-backdrop{
  position:fixed;inset:0;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(2px);
  opacity:0;
  transition: opacity .18s ease;
  z-index:60;
}
.drawer-backdrop.open{opacity:1;}

.drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(360px, 88vw);
  background: rgba(255,244,222,.92);
  border-left:1px solid rgba(0,0,0,.10);
  box-shadow: -18px 0 40px rgba(0,0,0,.18);
  transform: translateX(102%);
  transition: transform .18s ease;
  z-index:70;
  padding: 16px;
  display:flex;flex-direction:column;gap:12px;
}
.drawer.open{transform: translateX(0);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px; margin-top:100px;}
.drawer-title{font-weight:800;letter-spacing:.2px;}
.drawer-close{
  width:40px;height:40px;border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.45);
  font-size:22px;line-height:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.drawer-links{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.drawer-links{overflow:auto; padding-right:6px;}

/* scrollbar tylko w panelu bocznym (desktop) */
.drawer-links{scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.35) rgba(255,255,255,.25);}
.drawer-links::-webkit-scrollbar{width:10px;}
.drawer-links::-webkit-scrollbar-track{background: rgba(255,255,255,.18); border-radius: 999px;}
.drawer-links::-webkit-scrollbar-thumb{background: rgba(0,0,0,.28); border-radius: 999px; border:2px solid rgba(255,255,255,.12);} 
.drawer-links::-webkit-scrollbar-thumb:hover{background: rgba(0,0,0,.38);} 
.drawer a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.40);
}
.drawer a.active{
  background: linear-gradient(135deg, rgba(31,142,166,.22), rgba(212,182,122,.22));
  border-color: rgba(31,142,166,.35);
}
html.no-scroll, body.no-scroll{overflow:hidden; overscroll-behavior: none;}

.page-hero{
  margin-top:18px;
  margin-bottom:18px;
  border-radius: var(--radius);
  overflow:hidden;
  border:2px solid #EAD9B0;
  box-shadow: var(--shadow);
  background: rgba(255,255,255,.25);
}
.page-hero img{
  width:100%;
  height: 240px;
  object-fit: cover;
  display:block;
}
@media (max-width: 900px){
  .page-hero img{height: 180px;}
}


.nav-mobile{
  max-width:1100px;
  margin:0 auto;
  padding:0 22px 16px;
}
.nav-mobile a{
  display:block;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.40);
  margin-top:10px;
}

@media (max-width: 900px){
  .nav-links{display:none;}
  .nav-toggle{display:inline-flex;}
}

.hero{
  margin-top:18px;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} }

.card{
  background: var(--card);
  border:1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

.h1{font-size:2.2rem;margin:0 0 10px}
.lead{font-size:1.08rem;color:var(--muted);margin:0 0 14px;line-height:1.55}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.badge{
  font-size:.92rem;
  padding:8px 10px;
  border-radius:999px;
  border:1px dashed rgba(0,0,0,.18);
  background:rgba(255,255,255,.35);
}

.btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 14px;border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:linear-gradient(135deg, rgba(31,142,166,.26), rgba(212,182,122,.20));
  font-weight:700;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn.secondary{ background:rgba(255,255,255,.42); }

.btn:hover{
  background: linear-gradient(135deg, rgba(31,142,166,.34), rgba(212,182,122,.28));
  border-color: rgba(31,142,166,.35);
}
.btn.secondary:hover{
  background: rgba(255,255,255,.55);
  border-color: rgba(0,0,0,.18);
}

.hero .page-hero img.glowna-zdjecia{
  object-fit: contain;
  background: rgba(255,255,255,.18);
}


.grid3{
  margin-top:16px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}

@media (max-width: 900px){ .grid3{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 620px){ .grid3{grid-template-columns:1fr} }

.kicker{font-weight:800;color:var(--sea2);letter-spacing:.5px;text-transform:uppercase;font-size:.80rem}
.h2{font-size:1.35rem;margin:6px 0 10px}
.p{margin:0;color:var(--muted);line-height:1.55}

.footer{
  margin:30px 0 18px;
  color:var(--muted);
  font-size:.95rem;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}

.map-wrap{
  max-width:700px; justify-self: center; grid-template-columns: 1fr .9fr; gap:16px;
}
@media (max-width: 900px){ .map-wrap{grid-template-columns:1fr} }
svg{width:100%;height:auto;display:block}
.pin{cursor:pointer;transform-origin:center;transition:transform .12s ease;}
.pin:hover{transform:scale(1.08)}

.form{display:grid;gap:12px;margin-top:8px;}
label{font-weight:700}
input, textarea, select{
  width:100%;
  padding:12px 12px;
  margin: 6px 0px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.14);
  background:rgba(255,255,255,.55);
  outline:none;
}
textarea{min-height:140px;resize:vertical}
.help{font-size:.92rem;color:var(--muted)}
.notice{
  border-left:4px solid rgba(31,142,166,.55);
  padding:10px 12px;border-radius:12px;
  background:rgba(31,142,166,.10);
  color:var(--muted);
}
.err{border-left-color: rgba(180,60,60,.6); background: rgba(180,60,60,.10); }
.ok{border-left-color: rgba(60,160,90,.6); background: rgba(60,160,90,.10); }
.small{font-size:.9rem;color:var(--muted)}

.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top:14px;
}

@media (max-width: 900px){ .gallery{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 620px){ .gallery{grid-template-columns:1fr;} }
.photo{
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.35);
}

.photo img{width:100%;aspect-ratio: 1 / 1;object-fit:cover;object-position:50% 35%;display:block}
.photo .meta{padding:12px}
.photo .title{font-weight:800;margin:0 0 6px}
.photo .desc{margin:0;color:var(--muted);line-height:1.45}

.review{
  grid-column: 1 / -1;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.55);
  padding:14px 14px 16px;
}
.review-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.review-stars{letter-spacing:1px; font-size:1.05rem;}
.review-who{color:var(--muted); font-size:.92rem;}
.review-title{font-weight:900; margin:0 0 8px;}
.review-text{margin:0; color:var(--muted); line-height:1.55;}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(255,255,255,.35);
}
.table th,.table td{padding:10px 12px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left;vertical-align:top}
.table tr:last-child td{border-bottom:none}
.table code{font-size:.9rem}

.map-full object{ width:100%; height:auto; }

.stack2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 900px){
  .stack2{grid-template-columns:1fr;}
}

.notice.ok{border-color:rgba(46,160,67,.35);background:rgba(46,160,67,.08)}
.notice.err{border-color:rgba(220,38,38,.35);background:rgba(220,38,38,.08)}

.check{
  margin-top: 6px;
}
.check-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color: var(--muted);
  line-height:1.4;
  flex-wrap:wrap;
}
.check-row input{margin-top:3px; flex:0 0 auto;}
.check-text{display:inline; flex:1 1 240px; min-width:0;}

.modal-backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index: 999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  display:flex;
  transition: opacity .18s ease, visibility .18s ease;
}
.modal-backdrop.open{opacity:1; visibility:visible; pointer-events:auto;}
.modal{
  width:min(980px, 100%);
  max-height: 86vh;
  overflow:auto;
  border-radius: 18px;
  background: rgba(255,244,222,.96);
  border:1px solid rgba(0,0,0,.12);
  box-shadow: var(--shadow);
  opacity:0;
  transform: translateY(8px) scale(.965);
  transition: transform .18s ease, opacity .18s ease;
}
.privacy-modal .modal{
  width:min(860px, 100%);
  max-height: 82vh;
  overflow:hidden;
}
.privacy-modal .modal-body{
  font-size:14px;
  line-height:1.5;
  max-height: calc(82vh - 64px);
  overflow:auto;
  padding-right: 10px;
  scrollbar-width: none;
}
.privacy-modal .modal-body::-webkit-scrollbar{ width:0; height:0; }
.privacy-modal details{
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.40);
  border-radius: 14px;
  padding:10px 12px;
  margin:10px 0;
}
.privacy-modal summary{cursor:pointer; font-weight:800;}
.modal-backdrop.open .modal{ opacity:1; transform: translateY(0) scale(1); }
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.modal-title{font-weight:900; margin:0; font-size:18px;}
.modal-close{
  appearance:none;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.55);
  width:36px; height:36px;
  border-radius: 12px;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
}
.modal-body{padding:14px;}
.modal-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:14px;
}
@media (max-width: 900px){
  .modal-grid{grid-template-columns:1fr;}
}
.modal-img{
  width:100%;
  border-radius: 16px;
  border:1px solid rgba(0,0,0,.10);
  overflow:hidden;
  background: rgba(255,255,255,.35);
}
.modal-img img{width:100%; height: 420px; object-fit:cover; display:block;}
@media (max-width: 900px){ .modal-img img{height: 280px;} }
.modal-meta .p{margin:0 0 10px;}
.modal-meta .tag{
  display:inline-block;
  padding:8px 10px;
  border-radius: 999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.45);
  font-size: 13px;
  margin:0 8px 8px 0;
}

.page-hero{
  border: 4px solid rgba(240, 233, 206, 0.85);
}
.page-hero-link{display:block; cursor:pointer;}
.page-hero-link img{user-select:none; -webkit-user-drag:none;}

.contact-quick{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 900px){
  .contact-quick{grid-template-columns:1fr;}
}
.contact-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.contact-left{min-width:0;}
.icon-btn{
  flex:0 0 auto;
  width:44px;height:44px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.75);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: background .18s ease, border-color .18s ease;
}
.icon-btn svg{width:22px;height:22px;fill: rgba(0,0,0,.90);}

.icon-btn:hover{
  background: linear-gradient(135deg, rgba(31,142,166,.62), rgba(212,182,122,.58));
  border-color: rgba(31,142,166,.70);
}

.fab-phone{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  z-index: 999;
  box-shadow: var(--shadow);
}
.fab-phone svg{width:28px;height:28px;}

.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:stretch;
}
@media (max-width: 900px){
  .contact-grid{grid-template-columns:1fr;}
  .contact-grid > *{grid-column: 1 / -1 !important;}
}

.map-wrap{position:relative; width:100%;}
.map-image{width:100%; height:auto; display:block; border-radius:14px;}
.map-pin{
  position:absolute;
  width:28px; height:28px;
  border-radius: 99px;
  border:8px solid rgba(255,255,255,.95);
  background: #0B6677;
  border-color: rgba(31,142,166,.95);
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  transform: translate(-50%, -100%);
  cursor: pointer;
}
.map-pin:after{
  content:"";
  position:absolute;
  left:50%; top:100%;
  width:0; height:0;
  transform: translateX(-50%) translateY(43%);
  border:7px solid transparent;
  border-top-color: rgba(31,142,166,.95);
}
.map-tooltip{
  position:absolute;
  left:50%; bottom: 120%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.12);
  background: rgba(255,244,222,.98);
  box-shadow: var(--shadow);
  font-size: 14px;
  line-height: 1.35;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}
.map-pin:hover .map-tooltip,
.map-pin:focus-visible .map-tooltip{
  opacity:1;
  visibility:visible;
  transform: translateX(-50%) translateY(-4px);
}

.contact-layout{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:14px;
  align-items:start;
}
@media (max-width: 900px){
  .contact-layout{grid-template-columns:1fr;}
}
.contact-side{
  display:grid;
  gap:14px;
}

.modal-grid{
  align-items:start;
}
.modal-img{
  overflow:auto;
}
.modal-img img{
  width:100%;
  height:auto;
  max-height: 70vh;
  object-fit: contain;
  display:block;
  cursor: zoom-in;
  transition: transform .12s ease;
}
.modal-img img.zoomed{
  transform: scale(2);
  cursor: zoom-out;
}
.modal-meta .modal-side-title{
  font-weight:900;
  font-size: 18px;
  margin:0 0 8px;
}
.modal-meta .modal-side-desc{
  margin:0 0 12px;
  color: var(--muted);
  line-height:1.55;
}

img, a{
  -webkit-user-drag: none;
}

.grid3-zdjecia {
  margin-top:16px;
  display: grid;
  grid-template-columns: 3fr 4fr 3fr;
  gap: 14px;
  width: 100%;
}

@media (max-width: 900px){ .grid3-zdjecia{grid-template-columns:repeat(2,1fr)} }
@media (max-width: 620px){ .grid3-zdjecia{grid-template-columns:1fr} }

.grid3-zdjecia .card {
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
  border-radius: 12px;
}

.grid3-zdjecia .glowna-zdjecia {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 12px;
}

.hero.hero--underwater{
  align-items: stretch;
}

.hero.hero--underwater .page-hero{
  margin: 0;
  height: 100%;
  align-self: stretch;
  display: block;
}

.hero.hero--underwater .page-hero img.glowna-zdjecia{
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center; 
  display: block;
}

@media (max-width: 900px){
  .hero.hero--underwater .page-hero{ margin-top: 18px; }
}

@media (max-width: 900px){
  .hero.hero--underwater{
    padding-bottom: 32px;
  }
}

:root{ --nav-h: 92px; }

body{ padding-top: var(--nav-h); }