:root{
  --bg:#F6F1EA; --bg-2:#F1E9E0; --paper:#FFFFFF; --ink:#242321; --muted:#6E6B67;
  --brand:#D6BEA1; --brand-2:#BFA98D; --line:#E7DED2; --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius:18px;
}

/* Layout global + sticky footer */
*{ box-sizing:border-box }
html, body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  line-height:1.6; font-weight:400; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  min-height:100vh; display:flex; flex-direction:column;
}
footer{ margin-top:auto }

.container{ width:min(1180px, 92vw); margin-inline:auto }
.section{ padding: min(8vw,100px) 0; position:relative }
.section.alt{ background: var(--bg-2) }
.grid{ display:grid; gap:28px }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow: var(--shadow) }

h1,h2,h3{ font-family:"Playfair Display", serif; line-height:1.2; margin:0 0 12px }
h1{ font-size: clamp(32px, 4.5vw, 58px); font-weight:700 }
h2{ font-size: clamp(28px, 3.2vw, 44px); font-weight:700 }
h3{ font-size: clamp(18px, 2vw, 24px); font-weight:700 }
p{ margin:0 0 12px } a{ color:inherit; text-decoration:none }
.muted{ color:var(--muted) } .center{ text-align:center }
.center-all{ display:grid; place-items:center }
.spacer-xs{ height:8px } .spacer-sm{ height:18px } .spacer-md{ height:28px } .spacer-lg{ height:48px }

.btn{ appearance:none; border:0; padding:14px 22px; border-radius:999px; font-weight:600; cursor:pointer; transition:.3s transform, .3s box-shadow, .3s background;
  background:var(--ink); color:#fff; box-shadow: var(--shadow); display:inline-flex; align-items:center; gap:10px }
.btn:hover{ transform: translateY(-2px) } .btn.alt{ background:var(--brand); color:#1b1b1b }
.chip{ padding:6px 12px; border-radius:999px; font-size:14px; font-weight:600; color:#fff; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.22); text-shadow:0 1px 2px rgba(0,0,0,.35) }

.material-symbols-outlined{ font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; font-size:30px; color:var(--brand-2) }

/* NAV + MOBILE */
.nav{ position:fixed; inset:0 0 auto 0; height:76px; display:flex; align-items:center; z-index:6000; }
.nav .bar{ width:100%; padding-inline:min(4vw,28px); backdrop-filter: blur(10px);
  background: color-mix(in oklab, var(--paper) 85%, transparent); border-bottom: 1px solid transparent; transition: .3s background, .3s border-color; }
.nav.scrolled .bar{ background: var(--paper); border-color: var(--line); }
.nav .inner{ height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px }
.nav .links{ display:flex; gap:26px; align-items:center; justify-content:flex-end }
.nav .links.left{ justify-content:flex-start }
.nav .links.right{ justify-content:flex-end }

.nav .links ul, .mobile-panel .menu ul, .foot-mid ul { list-style:none; margin:0; padding:0; display:flex; gap:26px; }
.nav .links li, .mobile-panel .menu li, .foot-mid li { list-style:none; margin:0; padding:0; }

/* Linki – tylko hover/active (home: JS .active; poza home: current-*) */
.nav .links a{ position:relative; font-weight:600; display:inline-block; padding:0.25rem 0; text-decoration:none }
.nav .links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background:var(--brand); transform:scaleX(0); transform-origin:left; transition: transform .35s ease;
}
.nav .links a:hover::after,
.nav .links a:focus-visible::after,
.nav .links a.active::after{ transform:scaleX(1) }
body:not(.home):not(.front-page) .nav .links .current-menu-item > a::after,
body:not(.home):not(.front-page) .nav .links .current_page_item > a::after,
body:not(.home):not(.front-page) .nav .links .current-menu-ancestor > a::after{ transform:scaleX(1) }

/* Logo tylko w nav centrowane */
.logo{ display:flex; align-items:center; gap:12px; }
.nav .logo{ justify-self:center }
.logo img{ width:44px; height:auto; object-fit:contain }
.logo .word{ font-family:"Playfair Display", serif; font-size:24px; letter-spacing:.5px; font-weight:700 }

/* Hamburger */
.hamburger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--paper); align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); transition:.25s transform; }
.hamburger:hover{ transform: translateY(-1px) }
.hamburger i{ display:block; width:22px; height:14px; position:relative }
.hamburger i::before, .hamburger i::after, .hamburger i span{ content:""; position:absolute; left:0; right:0; height:2px; background:var(--ink); border-radius:2px; transition:.3s }
.hamburger i::before{ top:0 } .hamburger i span{ top:6px } .hamburger i::after{ bottom:0 }
/* transformacja do X w tym samym miejscu */
.hamburger[aria-expanded="true"] i::before{ transform: translateY(6px) rotate(45deg) }
.hamburger[aria-expanded="true"] i span{ opacity:0 }
.hamburger[aria-expanded="true"] i::after{ transform: translateY(-6px) rotate(-45deg) }
/* po otwarciu – przypnij do prawego górnego rogu, ponad panelem */
.hamburger[aria-expanded="true"]{ position:fixed; right:min(4vw,28px); top:16px; z-index:7000; }

/* Panel mobilny */
.mobile-panel{ position:fixed; inset:0; background: color-mix(in oklab, var(--paper) 92%, var(--bg)); backdrop-filter: blur(6px);
  transform: translateX(100%); opacity:0; transition: .45s ease; z-index:5000; }
.mobile-panel.open{ transform: translateX(0); opacity:1 }
.mobile-panel .menu{ display:grid; gap:18px; padding: 100px 24px 32px; text-align:center }
.mobile-panel .menu ul{ flex-direction:column; gap:16px; align-items:center }
.mobile-panel .menu a{ font-size:22px; font-weight:700; padding:10px 0; display:inline-block; text-decoration:none }

/* Klon „X” w panelu – zawsze nad tłem gdy panel otwarty */
.mobile-close{ display:none; }
.mobile-panel.open .mobile-close{
  display:flex; position:fixed; right:min(4vw,28px); top:16px; z-index:100000;
}
/* wymuś krzyżyk */
.mobile-close i::before{ transform: translateY(6px) rotate(45deg) }
.mobile-close i span{ opacity:0 }
.mobile-close i::after{ transform: translateY(-6px) rotate(-45deg) }

/* Breakpoint mobilny – chowamy tylko listy, hamburger zostaje po prawej */
@media (max-width:920px){
  .nav .links ul{ display:none }
  .hamburger{ display:flex }
}

/* HERO (front) */
.hero{ position:relative; padding-bottom:12vh; min-height: 100vh; display:grid; place-items:center; overflow:hidden; background:#000; }
.hero .bg{ position:absolute; inset:0; background:var(--hero, url('../img/sea-sail-hero.webp')) center/cover no-repeat; filter: saturate(0.85) contrast(0.95) }
.hero .scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.6) 100%) }
.hero .content{ text-align:center; color:#fff; max-width: 1000px; padding: 10vh 16px; position:relative; z-index: 2; }
.hero .kicker{ display:inline-flex; gap:10px; align-items:center; margin-bottom:14px }
.hero .title{ text-shadow: 0 10px 30px rgba(0,0,0,.35); max-width: 900px; margin-inline: auto; }
.hero .lead{ font-size: clamp(16px, 2vw, 20px); opacity:.98; margin:12px auto 26px; max-width:780px }
.hero .cta{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.hero::after { content:''; position:absolute; left:0; bottom:-1px; width:100%; height:12vh; min-height:80px; background-color:var(--bg-2);
  clip-path: polygon(0 100%, 100% 100%, 100% 27%, 85% 42%, 68% 23%, 50% 45%, 32% 18%, 15% 42%, 0 22%); z-index:1; }

/* SUBHEADER (podstrony) */
.subheader{
  position:relative; min-height: 36vh; display:grid; place-items:center; background:#000; overflow:hidden;
  background-image: var(--sub, url('../img/sea-sail-hero.webp')); background-size:cover; background-position:center bottom;
}
.sub-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.7) 100%) }
.sub-title{ color:#fff; position:relative; z-index:2; text-shadow: 0 8px 26px rgba(0,0,0,.35); text-align:center }
.subheader::after{
  content:''; position:absolute; left:0; bottom:-1px; width:100%; height:8vh; min-height:60px; background:var(--bg);
  clip-path: polygon(0 100%, 100% 100%, 100% 35%, 80% 55%, 60% 38%, 40% 58%, 20% 34%, 0 52%);
}

/* Ujawnianie */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease-out, transform .6s ease-out; }
.reveal.in{ opacity:1; transform: translateY(0) }

/* WHY + SERVICES */
.why .items{ grid-template-columns: repeat(12, 1fr) }
.why .item{ grid-column: span 12; padding:26px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; }
.why .item .ico{ width:64px; height:64px; display:grid; place-items:center; border-radius:16px; background:linear-gradient(145deg, var(--paper), #fff); border:1px solid var(--line); box-shadow: var(--shadow) }
.why .item:hover{ transform: translateY(-4px); transition:.3s transform }
@media (min-width:768px){ .why .item{ grid-column: span 6 } }
@media (min-width:1024px){ .why .item{ grid-column: span 3 } }

.services .grid{ grid-template-columns: repeat(12, 1fr) }
.services .card{ grid-column: span 12; padding:24px; display:grid; gap:6px; transition:.35s transform, .35s box-shadow }
.services .card:hover{ transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.10) }
.services .hdr{ display:flex; align-items:center; gap:12px }
@media (min-width:768px){ .services .card{ grid-column: span 6 } }
@media (min-width:1024px){ .services .card{ grid-column: span 4 } }

/* Slider */
.offers .section-intro{ max-width:760px; margin: 6px auto 26px }
.slider{ position:relative; overflow: hidden; }
.slides{ display:grid; grid-auto-flow:column; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  scrollbar-width:none; -ms-overflow-style:none; }
.slides::-webkit-scrollbar{ display:none }
.slides{ grid-auto-columns:100% }
@media (min-width:768px){ .slides{ grid-auto-columns: calc(50% - 9px) } }
@media (min-width:1024px){ .slides{ grid-auto-columns: calc(25% - 13.5px) } }

.slide{ background:var(--paper); border-radius: var(--radius); border:1px solid var(--line); box-shadow: var(--shadow); overflow:hidden; display:grid; grid-template-rows: 220px auto; scroll-snap-align:start; flex-shrink:0; }
.slide .img{ position:relative; background:#ddd; }
.slide .img img{ width:100%; height:100%; object-fit:cover; display:block }
.slide .badge{ position:absolute; left:14px; top:14px }
.slide .body{ padding:18px }
.slide .body .row{ display:flex; justify-content:space-between; align-items:center; gap:12px }
.slide .slide-desc { font-size: 15px; color: var(--muted); margin-top: 8px; margin-bottom: 6px; line-height: 1.5; }
.slide .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 12px; }
.slide .meta{ font-size: 13px; color:var(--muted); margin-top: 12px; }

.slider-wrapper .controls { margin-top: 24px; display:flex; align-items:center; justify-content:space-between }
.dots{ display:flex; gap:10px; justify-content:center; flex-grow:1 }
.dot{ width:10px; height:10px; border-radius:999px; border:1px solid var(--line); background:#fff; box-shadow: var(--shadow); opacity:1; transition:.28s width, .28s background, .28s transform; cursor:pointer; }
.dot:hover{ transform: translateY(-2px) }
.dot.active{ width:28px; background:var(--brand); border-color:transparent }
.navbtn{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--paper); display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow); transition:.3s transform; flex-shrink:0; }
.navbtn:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12) }
.navbtn svg{ display:block }

/* Formularz + zgody */
.contact .wrap{ display:grid; grid-template-columns: 1fr; gap:28px }
.contact form{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow: var(--shadow); padding:24px }
.field{ display:grid; gap:8px; margin-bottom:14px } label{ font-weight:600 }
input, textarea{ border:1px solid var(--line); border-radius:12px; padding:12px 14px; font: inherit; background:#fff; transition: .2s border-color, .2s box-shadow; }
input:focus, textarea:focus{ outline:none; border-color: var(--brand-2); box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 25%, transparent) }
textarea{ min-height:130px; resize:vertical }
.form-row{ display:grid; gap:14px }
.consents{ display:grid; gap:10px; margin-top:8px }
.consent{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted) }
.consent input{ width:auto; margin-top:4px }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0 }

/* Kontakt – mapa */
.contact-aside{ padding:0 }
.contact-aside .contact-aside-inner{ display:flex; flex-direction:column; height:100%; }
.contact-aside .contact-text{ padding:24px }
.contact-aside .contact-map{ height:100%; min-height:280px; border-top:1px solid var(--line); border-radius:0 0 var(--radius) var(--radius); overflow:hidden }

@media (min-width:900px){
  .contact .wrap{ grid-template-columns: 1.1fr .9fr }
  .form-row{ grid-template-columns:1fr 1fr }
  .contact-aside .contact-map{ flex:1 }
}

/* STOPKA – desktop: 3 kolumny; mobile: kolejność Polityka -> Logo -> Crafted */
footer{ border-top:1px solid var(--line); padding:22px 0; color:var(--muted); font-family: Inter, sans-serif; }
.foot{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; min-height:44px; gap:12px }
.foot .logo{ display:flex; gap:8px; align-items:center; justify-self:start }
.foot .logo img{ width:28px; height:auto }
.foot-mid ul{ list-style:none; margin:0; padding:0; display:flex; gap:18px; align-items:center }
.foot-mid a{ font-weight:600; padding:6px 8px; display:inline-block; text-decoration:none }
.crafted{ justify-self:end; font-size:13px; white-space:nowrap }

/* Mobile footer reorder & spacing */
@media (max-width:640px){
  .foot{ display:flex; flex-direction:column; align-items:center; gap:12px }
  .foot-mid{ order:1 }
  .foot-left{ order:2 }
  .crafted{ order:3 }
  .foot .logo{ justify-self:center }
  .foot-mid ul{ gap:12px }
}

/* Toast */
.toast{ position:fixed; right:20px; bottom:20px; background:var(--ink); color:#fff; padding:12px 16px; border-radius:12px; box-shadow:var(--shadow); opacity:0; transform: translateY(10px); transition:.35s; z-index:2000 }
.toast.show{ opacity:1; transform: translateY(0) }