/* ============================================================
   GOOL PROPERTIES — Design System "Mediterraneo Editorial"
   v1.0 · Premium real-estate UI · PL
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Brand — deep sea ink */
  --ink:#0B1B2B;      --ink-2:#122B42;    --ink-3:#1D3E5C;    --ink-4:#2C5680;
  /* Limestone / whitewash */
  --sand:#FBF8F3;     --sand-2:#F3ECE1;   --sand-3:#E5DACA;
  /* Brass — warm Spanish gold */
  --brass:#B98A3C;    --brass-2:#D8AE63;  --brass-3:#7D5A1F;  --brass-4:#F2E3C6;
  /* Secondary */
  --sea:#1D6E78;      --sea-2:#2C939F;
  --terra:#AE5330;
  /* Semantic */
  --text:#132433;     --muted:#56697C;    --muted-2:#5A6B7A;
  --line:rgba(11,27,43,.11); --line-2:rgba(11,27,43,.06);
  --white:#fff;
  --ok:#1F7A4C;       --warn:#9A6B12;     --err:#B4342F;

  /* Radii */
  --r-xs:5px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --r-btn:9px;   /* przyciski: prostokat z lekko sciety rogiem, nie tabletka */

  /* Elevation */
  --sh-1:0 1px 2px rgba(11,27,43,.05), 0 4px 14px rgba(11,27,43,.05);
  --sh-2:0 2px 6px rgba(11,27,43,.06), 0 16px 40px rgba(11,27,43,.10);
  --sh-3:0 30px 80px rgba(11,27,43,.22);
  --sh-brass:0 10px 30px rgba(185,138,60,.28);

  /* Type */
  --f-display:'Cormorant Garamond',ui-serif,Georgia,'Times New Roman',serif;
  --f-ui:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:160ms; --t:240ms; --t-slow:420ms;

  /* Spacing scale */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:88px; --s-10:120px;

  /* Layout */
  --wrap:1240px; --wrap-narrow:840px; --gutter:clamp(18px,5vw,44px);
  --header-h:74px; --topbar-h:38px;
  --appbar-h:calc(62px + env(safe-area-inset-bottom,0px));
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--sand); color:var(--text);
  font-family:var(--f-ui); font-size:16px; font-weight:400; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%; display:block}
img{height:auto}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; background:none; border:0; padding:0}
h1,h2,h3,h4,h5,p,figure,blockquote{margin:0}
/* Zerujemy listy tylko tam, gdzie sa elementem interfejsu. */
.nav,.checklist,.subnav,.acc,.plist,.hscroll{margin:0; padding:0; list-style:none}
table{border-collapse:collapse; width:100%}
:focus-visible{outline:3px solid var(--brass); outline-offset:3px; border-radius:6px}
::selection{background:var(--brass-4); color:var(--ink)}

/* ---------- 3. TYPOGRAPHY ---------- */
.display,h1,h2,h3{font-family:var(--f-display); font-weight:500; line-height:1.07;
  letter-spacing:-.015em; color:var(--ink)}
h1,.h1{font-size:clamp(2.5rem,1.4rem + 4.4vw,4.9rem)}
h2,.h2{font-size:clamp(2rem,1.25rem + 2.9vw,3.5rem); line-height:1.1}
h3,.h3{font-size:clamp(1.38rem,1.05rem + 1.05vw,1.9rem); line-height:1.2}
h4,.h4,h3.h4{font-family:var(--f-ui); font-size:1.04rem; font-weight:700; line-height:1.35;
  letter-spacing:-.01em; color:var(--ink)}
h5,.h5,h4.h5{font-family:var(--f-ui); font-size:.9rem; font-weight:700; color:var(--ink); margin:0}
.lead{font-size:clamp(1.05rem,1rem + .35vw,1.26rem); line-height:1.6; color:var(--muted)}
p{max-width:72ch}
.small{font-size:.86rem}
.xs{font-size:.78rem}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-ui); font-size:.72rem; font-weight:800;
  letter-spacing:.19em; text-transform:uppercase; color:var(--brass-3);
}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--brass); flex:none}
.center .eyebrow::after{content:""; width:26px; height:1px; background:var(--brass); flex:none}
.on-dark .eyebrow,.sec--dark .eyebrow,.sec--photo .eyebrow{color:var(--brass-2)}
.on-dark .eyebrow::before,.on-dark .eyebrow::after,
.sec--dark .eyebrow::before,.sec--dark .eyebrow::after,
.sec--photo .eyebrow::before,.sec--photo .eyebrow::after{background:var(--brass-2)}

em,.accent{font-style:italic; color:var(--brass-3)}
.sec--dark em,.sec--photo em,.on-dark em,
.sec--dark .accent,.sec--photo .accent,.on-dark .accent{color:var(--brass-2)}

/* ---------- 4. LAYOUT ---------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.wrap--narrow{max-width:var(--wrap-narrow)}
.sec{position:relative; padding-block:clamp(56px,7vw,var(--s-10))}
.sec--tight{padding-block:clamp(40px,5vw,72px)}
.sec--sand{background:var(--sand-2)}
.sec--white{background:var(--white)}
.sec--dark{background:var(--ink); color:#E7EDF3}
.sec--dark h1,.sec--dark h2,.sec--dark h3,.sec--dark h4,.sec--dark h5{color:#fff}
.sec--dark p,.sec--dark .lead{color:#AEC0CF}

.grid{display:grid; gap:var(--s-5)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-auto{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.g-auto-lg{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center}
.split--rev>*:first-child{order:2}
.stack{display:flex; flex-direction:column}
.row{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap}
.center{text-align:center}
.center .eyebrow{justify-content:center}
.center p{margin-inline:auto}
.sec-head{max-width:64ch; margin-bottom:clamp(30px,3.6vw,54px); display:grid; gap:14px; justify-items:start}
.sec-head.center{margin-inline:auto; justify-items:center}
.mt-4{margin-top:var(--s-4)} .mt-5{margin-top:var(--s-5)} .mt-6{margin-top:var(--s-6)}
.mt-7{margin-top:var(--s-7)}

/* ---------- 5. PHOTO SECTIONS ---------- */
.sec--photo{position:relative; color:#EAF0F5; isolation:isolate; background:var(--ink-2)}
.sec--photo>.wrap{position:relative; z-index:2}
.sec--photo h1,.sec--photo h2,.sec--photo h3,.sec--photo h4,.sec--photo h5{color:#fff}
.sec--photo .h4,.sec--photo .h5{color:#fff}
.sec--photo p,.sec--photo .lead{color:#CBDAE6}
.sec-bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.sec-bg img{width:100%; height:100%; object-fit:cover; object-position:var(--focal,center); transform:scale(1.02)}
.sec-bg::after{content:""; position:absolute; inset:0}
.scrim-deep   .sec-bg::after{background:linear-gradient(180deg,rgba(9,22,36,.82) 0%,rgba(9,22,36,.7) 45%,rgba(9,22,36,.88) 100%)}
.scrim-left   .sec-bg::after{background:linear-gradient(90deg,rgba(9,22,36,.95) 0%,rgba(9,22,36,.84) 40%,rgba(9,22,36,.4) 76%,rgba(9,22,36,.24) 100%)}
.scrim-bottom .sec-bg::after{background:linear-gradient(180deg,rgba(9,22,36,.3) 0%,rgba(9,22,36,.55) 46%,rgba(9,22,36,.93) 100%)}
.scrim-soft   .sec-bg::after{background:linear-gradient(180deg,rgba(9,22,36,.7) 0%,rgba(9,22,36,.62) 100%)}
/* hero: tekst siedzi w lewym dolnym rogu, wiec przyciemniamy kierunkowo,
   zeby zdjecie zostalo czytelne po prawej, a tekst mial >=4.5:1 */
.hero .sec-bg::after,
.phero.scrim-bottom .sec-bg::after{
  background:
    linear-gradient(100deg,rgba(8,20,33,.93) 0%,rgba(8,20,33,.72) 42%,rgba(8,20,33,.3) 74%,rgba(8,20,33,.18) 100%),
    linear-gradient(180deg,rgba(8,20,33,.62) 0%,rgba(8,20,33,.12) 26%,rgba(8,20,33,.5) 70%,rgba(8,20,33,.9) 100%);
}
.sec--photo::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- 6. BUTTONS ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:#fff; --btn-bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 26px; border-radius:var(--r-btn);
  background:var(--btn-bg); color:var(--btn-fg); border:1.5px solid var(--btn-bd);
  font-family:var(--f-ui); font-size:.94rem; font-weight:700; letter-spacing:.01em;
  text-align:center; cursor:pointer; position:relative; overflow:hidden;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease),
             background-color var(--t) var(--ease), color var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0) scale(.985); transition-duration:90ms}
.btn .ico{width:19px; height:19px; flex:none}
.btn--brass{--btn-bg:var(--brass); --btn-bd:var(--brass); --btn-fg:#201502}
.btn--brass:hover{--btn-bg:var(--brass-2); --btn-bd:var(--brass-2); box-shadow:var(--sh-brass)}
.btn--ghost{--btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:rgba(11,27,43,.26)}
.btn--ghost:hover{--btn-bd:var(--ink); --btn-bg:rgba(11,27,43,.04)}
.on-dark .btn--ghost,.sec--photo .btn--ghost,.sec--dark .btn--ghost,.leadbar .btn--ghost{--btn-fg:#fff; --btn-bd:rgba(255,255,255,.45)}
.on-dark .btn--ghost:hover,.sec--photo .btn--ghost:hover,.sec--dark .btn--ghost:hover,.leadbar .btn--ghost:hover{--btn-bg:rgba(255,255,255,.13); --btn-bd:#fff}
.btn--light{--btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff}
.btn--wa{--btn-bg:#1FA855; --btn-bd:#1FA855; --btn-fg:#fff}
.btn--sm{min-height:44px; padding:0 18px; font-size:.86rem}
.btn--lg{min-height:60px; padding:0 34px; font-size:1rem}
.btn--block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45; pointer-events:none}
.btn.is-loading{color:transparent; pointer-events:none}
.btn.is-loading::after{
  content:""; position:absolute; inset:0; margin:auto; width:20px; height:20px;
  border:2px solid #fff; border-top-color:transparent; border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.tlink{
  display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:.94rem;
  color:var(--brass-3); border-bottom:1.5px solid rgba(185,138,60,.35);
  padding:11px 0 9px; min-height:44px;
  transition:gap var(--t) var(--ease), border-color var(--t) var(--ease);
}
.tlink:hover{gap:13px; border-color:var(--brass)}
.tlink .ico{width:16px; height:16px}
.on-dark .tlink,.sec--photo .tlink,.sec--dark .tlink{color:var(--brass-2); border-color:rgba(216,174,99,.42)}

/* ---------- 7. ICONS ---------- */
.ico{width:24px; height:24px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ico--sm{width:18px; height:18px}
.ico--lg{width:30px; height:30px; stroke-width:1.4}
.icon-badge{
  width:56px; height:56px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:linear-gradient(150deg,var(--brass-4),#fffdf9); color:var(--brass-3);
  border:1px solid rgba(185,138,60,.3);
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.icon-badge--ink{background:linear-gradient(150deg,var(--ink-3),var(--ink)); color:var(--brass-2); border-color:rgba(255,255,255,.12)}
.icon-badge--glass{background:rgba(255,255,255,.1); color:var(--brass-2); border-color:rgba(255,255,255,.22); backdrop-filter:blur(8px)}
.icon-badge--sm{width:44px; height:44px; border-radius:9px}

/* ---------- 8. CARDS ---------- */
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px); position:relative;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card--hover:hover{transform:translateY(-4px); box-shadow:var(--sh-2); border-color:rgba(185,138,60,.42)}
.card--hover:hover .icon-badge{transform:scale(1.06); box-shadow:0 8px 22px rgba(185,138,60,.22)}
.card h4,.card .h4{margin-bottom:8px}
.card p{color:var(--muted); font-size:.95rem; margin:0}
.card .icon-badge{margin-bottom:18px}
.card--glass{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.17);
  backdrop-filter:blur(14px) saturate(140%); color:#E9F0F6}
.card--glass h4,.card--glass h5,.card--glass .h4,.card--glass .h5{color:#fff}
.card--glass p{color:#BDCEDC}
.card--ink{background:var(--ink-2); border-color:rgba(255,255,255,.09); color:#DCE6EF}
.card--ink h4,.card--ink .h4{color:#fff} .card--ink p{color:#A9BCCC}
.card--flat{background:transparent; border:0; padding:0}
.card--outline{background:transparent}

.step-num{
  font-family:var(--f-display); font-size:2.7rem; line-height:1; color:var(--brass);
  font-weight:500; display:block; margin-bottom:12px;
}
.sec--dark .step-num,.sec--photo .step-num{color:var(--brass-2)}

.checklist{display:grid; gap:12px}
.checklist li{display:flex; gap:12px; align-items:flex-start; font-size:.96rem; color:var(--text)}
.checklist .ico{width:20px; height:20px; color:var(--brass); margin-top:3px}
.sec--dark .checklist li,.sec--photo .checklist li,.on-dark .checklist li{color:#D3E0EA}
.sec--dark .checklist .ico,.sec--photo .checklist .ico,.on-dark .checklist .ico{color:var(--brass-2)}

/* ---------- 9. PILLS ---------- */
.pill{
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:6px;
  font-size:.74rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:var(--sand-2); color:var(--ink-3); border:1px solid var(--line);
}
.pill .ico{width:14px; height:14px}
.pill--brass{background:var(--brass-4); color:#6E4F16; border-color:rgba(185,138,60,.36)}
.pill--ink{background:var(--ink); color:var(--brass-2); border-color:transparent}
.pill--glass{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.28); backdrop-filter:blur(10px)}
.pill--new{background:var(--ok); color:#fff; border-color:transparent}
.pill--invest{background:var(--terra); color:#fff; border-color:transparent}

/* ---------- 10. TOPBAR + HEADER ---------- */
.topbar{
  background:var(--ink); color:#B9CBDA; font-size:.8rem; height:var(--topbar-h);
  display:flex; align-items:center; position:relative; z-index:60;
}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}
.topbar a{display:inline-flex; align-items:center; gap:7px; padding:4px 2px; transition:color var(--t)}
.topbar a:hover{color:var(--brass-2)}
.topbar .ico{width:15px; height:15px}
.topbar-l{display:flex; gap:22px; align-items:center}
.topbar-r{display:flex; gap:14px; align-items:center}
.lang{display:flex; gap:4px}
.lang button{
  min-width:34px; height:24px; border-radius:4px; font-size:.7rem; font-weight:800;
  letter-spacing:.05em; color:#93A9BC; border:1px solid transparent; transition:all var(--t);
}
.lang button:hover{color:#fff; background:rgba(255,255,255,.09)}
.lang button[aria-current="true"]{color:var(--ink); background:var(--brass-2)}
/* Język na telefonie: górny pasek jest ukryty — przycisk z kodem języka w nagłówku otwiera menu,
   a na górze menu jest przełącznik języków */
/* .header-cta — reguła .icon-btn{display:grid} stoi niżej i inaczej pokazałaby przycisk na komputerze */
.header-cta .lang-btn{display:none; width:auto; min-width:46px; padding:0 11px; gap:6px; font-size:.8rem; font-weight:800; letter-spacing:.05em; color:var(--ink)}
.header-cta .lang-btn .ico{width:18px; height:18px; color:var(--brass-3)}
.drawer-lang{display:grid; gap:10px; margin-bottom:var(--s-5); padding-bottom:var(--s-5); border-bottom:1px solid var(--line)}
.drawer-lang-t{display:inline-flex; align-items:center; gap:8px; font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-3)}
.drawer-lang-t .ico{width:16px; height:16px}
.lang--jasny{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px}
.lang--jasny button{min-width:0; height:auto; min-height:46px; border-radius:8px; border:1px solid var(--line); background:#fff;
  color:var(--ink-3); font-size:.9rem; letter-spacing:.04em}
.lang--jasny button:hover{color:var(--ink); background:var(--sand-2)}
.lang--jasny button[aria-current="true"]{color:#fff; background:var(--ink); border-color:var(--ink)}

.site-header{
  position:sticky; top:0; z-index:70; background:rgba(251,248,243,.9);
  backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid var(--line-2);
  transition:box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
}
.site-header.is-stuck{box-shadow:0 6px 26px rgba(11,27,43,.10); background:rgba(251,248,243,.97)}
.header-in{height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:22px}
.brand{display:flex; align-items:center; gap:12px; flex:none}
.brand-mark{
  width:44px; height:44px; border-radius:9px; display:grid; place-items:center; flex:none;
  background:linear-gradient(145deg,var(--ink-3),var(--ink)); color:var(--brass-2);
  font-family:var(--f-display); font-size:1.28rem; font-weight:600; letter-spacing:.02em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}
.brand-txt{display:grid; line-height:1.1}
.brand-name{font-family:var(--f-display); font-size:1.3rem; font-weight:600; color:var(--ink); letter-spacing:.01em}
.brand-sub{font-size:.62rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-3)}

.nav{display:flex; align-items:center; gap:2px}
.nav>li>a{
  display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 13px;
  border-radius:8px; font-size:.9rem; font-weight:600; color:var(--ink-3);
  white-space:nowrap; min-height:44px;
  transition:background-color var(--t) var(--ease), color var(--t) var(--ease);
}
.nav>li>a:hover{background:rgba(11,27,43,.06); color:var(--ink)}
.nav>li>a[aria-current="page"]{color:var(--ink); background:var(--sand-3)}
.nav .ico{width:15px; height:15px; opacity:.7}
.has-sub{position:relative}
.subnav{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:264px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--sh-2); padding:8px; opacity:0; visibility:hidden;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease), visibility var(--t);
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.subnav a{display:flex; gap:11px; align-items:flex-start; padding:10px 12px; border-radius:8px; transition:background-color var(--t)}
.subnav a:hover{background:var(--sand-2)}
.subnav .ico{width:18px; height:18px; color:var(--brass-3); margin-top:2px}
.subnav strong{display:block; font-size:.88rem; font-weight:700; color:var(--ink)}
.subnav span{display:block; font-size:.76rem; color:var(--muted); line-height:1.4}
.header-cta{display:flex; align-items:center; gap:10px; flex:none}
.burger{
  width:46px; height:46px; border-radius:10px; display:none; place-items:center;
  border:1px solid var(--line); background:#fff; color:var(--ink);
}

/* ---------- 11. MOBILE DRAWER ---------- */
.drawer{
  position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none;
}
.drawer[data-open="true"]{visibility:visible; pointer-events:auto}
.drawer-scrim{
  position:absolute; inset:0; background:rgba(9,22,36,.55); backdrop-filter:blur(3px);
  opacity:0; transition:opacity var(--t-slow) var(--ease);
}
.drawer[data-open="true"] .drawer-scrim{opacity:1}
.drawer-panel{
  position:absolute; inset:0 0 0 auto; width:min(420px,100%); background:var(--sand);
  display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform var(--t-slow) var(--ease-out);
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
.drawer[data-open="true"] .drawer-panel{transform:translateX(0)}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:16px var(--s-5); border-bottom:1px solid var(--line)}
.drawer-body{flex:1; overflow-y:auto; padding:var(--s-5); -webkit-overflow-scrolling:touch}
.drawer-nav{display:grid; gap:2px}
.drawer-nav a{
  display:flex; align-items:center; gap:14px; min-height:56px; padding:0 16px;
  border-radius:10px; font-size:1.02rem; font-weight:600; color:var(--ink);
  transition:background-color var(--t);
}
.drawer-nav a:active{background:var(--sand-3)}
.drawer-nav a[aria-current="page"]{background:var(--sand-3)}
.drawer-nav .ico{width:20px; height:20px; color:var(--brass-3)}
.drawer-nav .chev{margin-left:auto; opacity:.4; width:17px; height:17px}
.drawer-foot{padding:var(--s-5); border-top:1px solid var(--line); display:grid; gap:10px; background:var(--sand-2)}
.icon-btn{
  width:46px; height:46px; border-radius:10px; display:grid; place-items:center;
  border:1px solid var(--line); background:#fff; color:var(--ink);
  transition:background-color var(--t), transform var(--t);
}
.icon-btn:active{transform:scale(.94)}

/* ---------- 12. HERO ---------- */
.hero{
  position:relative; min-height:clamp(560px,86svh,880px); display:flex; align-items:flex-end;
  padding-block:clamp(56px,9vw,110px) clamp(36px,5vw,72px);
  color:#fff; isolation:isolate; overflow:hidden;
}
.hero .sec-bg img{animation:heroZoom 22s var(--ease-out) forwards}
@keyframes heroZoom{from{transform:scale(1.1)}to{transform:scale(1)}}
.hero-in{position:relative; z-index:3; width:100%}
.hero h1{color:#fff; max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero .lead{color:#D8E4EE; max-width:52ch; margin-top:18px}
.hero-badges{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}
.hero-scroll{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:3;
  display:grid; place-items:center; gap:6px; color:rgba(255,255,255,.85); font-size:.68rem;
  letter-spacing:.2em; text-transform:uppercase;
}
.hero-scroll .ico{animation:bob 2.4s var(--ease) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* page hero (subpages) */
.phero{
  position:relative; min-height:clamp(380px,52svh,540px); display:flex; align-items:flex-end;
  padding-block:clamp(70px,9vw,110px) clamp(34px,4vw,58px); color:#fff; isolation:isolate; overflow:hidden;
}
.phero-in{position:relative; z-index:3}
.phero h1{color:#fff; max-width:19ch}
.phero .lead{color:#D3E1EC; max-width:58ch; margin-top:16px}
.crumbs{display:flex; align-items:center; gap:9px; font-size:.8rem; color:rgba(255,255,255,.86); margin-bottom:20px; flex-wrap:wrap}
.crumbs a{transition:color var(--t)} .crumbs a:hover{color:var(--brass-2)}
.crumbs .ico{width:13px; height:13px; opacity:.55}

/* ---------- 13. SEARCH BAR ---------- */
.searchbar{
  background:rgba(255,255,255,.1); backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.22); border-radius:var(--r-lg);
  padding:14px; display:grid; grid-template-columns:repeat(4,1fr) auto; gap:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.sf{display:grid; gap:5px; min-width:0}
.sf label{font-size:.68rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.9); padding-left:2px}
.sf .ctrl{
  height:50px; border-radius:8px; border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.94); color:var(--ink); padding:0 14px; width:100%;
  font-size:.94rem; font-weight:600; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230B1B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:36px; cursor:pointer;
}
.sf input.ctrl{background-image:none; padding-right:14px; cursor:text}
.searchbar .btn{height:50px; min-height:50px; align-self:end}

/* ---------- 14. PROPERTY CARD ---------- */
.plist{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--s-5)}
/* na szerokich ekranach 4 kolumny — inaczej czwarta oferta zostaje sama w rzedzie */
@media (min-width:1180px){.plist{grid-template-columns:repeat(4,1fr)}}
.pcard{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  display:flex; flex-direction:column; position:relative;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.pcard:hover{transform:translateY(-5px); box-shadow:var(--sh-2); border-color:rgba(185,138,60,.4)}
.pcard-media{position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--ink-3)}
.pcard-media img{width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease-out)}
.pcard:hover .pcard-media img{transform:scale(1.06)}
.pcard-tags{position:absolute; top:12px; left:12px; display:flex; gap:6px; flex-wrap:wrap; z-index:2}
.pcard-fav{
  position:absolute; top:10px; right:10px; z-index:2; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  color:var(--ink); border:1px solid rgba(255,255,255,.7);
  transition:transform var(--t) var(--ease), background-color var(--t), color var(--t);
}
.pcard-fav:hover{transform:scale(1.08)}
.pcard-fav:active{transform:scale(.92)}
.pcard-fav[aria-pressed="true"]{background:var(--terra); color:#fff; border-color:var(--terra)}
.pcard-fav[aria-pressed="true"] .ico{fill:currentColor}
.pcard-loc{
  position:absolute; left:12px; bottom:12px; z-index:2; display:inline-flex; align-items:center; gap:6px;
  font-size:.78rem; font-weight:700; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6);
}
.pcard-loc .ico{width:14px; height:14px}
.pcard-media::after{
  content:""; position:absolute; inset:auto 0 0 0; height:45%; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(9,22,36,.62));
}
.pcard-body{padding:18px 20px 20px; display:flex; flex-direction:column; gap:12px; flex:1}
.pcard-title{font-family:var(--f-ui); font-size:1.02rem; font-weight:700; line-height:1.35; color:var(--ink)}
.pcard-price{font-family:var(--f-display); font-size:1.72rem; font-weight:600; color:var(--ink); letter-spacing:-.01em; line-height:1}
.pcard-price small{font-family:var(--f-ui); font-size:.72rem; font-weight:700; color:var(--muted); display:block; margin-top:5px; letter-spacing:.04em}
.pcard-specs{display:flex; gap:16px; flex-wrap:wrap; padding-top:13px; border-top:1px solid var(--line-2); margin-top:auto}
.pcard-specs div{display:inline-flex; align-items:center; gap:6px; font-size:.85rem; font-weight:600; color:var(--muted)}
.pcard-specs .ico{width:17px; height:17px; color:var(--brass-3)}
.pcard-ref{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700}
.pcard-foot{display:flex; align-items:center; justify-content:space-between; gap:6px 10px; flex-wrap:wrap}
.pcard-foot .tlink{white-space:nowrap}
.pcard a.stretch::after{content:""; position:absolute; inset:0; z-index:1}

/* skeleton (API loading) */
.pcard--skel .sk{background:linear-gradient(90deg,var(--sand-2) 25%,var(--sand-3) 37%,var(--sand-2) 63%);
  background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:8px; color:transparent}
.pcard--skel .pcard-media{background:var(--sand-2); animation:shimmer 1.4s ease infinite;
  background-image:linear-gradient(90deg,var(--sand-2) 25%,var(--sand-3) 37%,var(--sand-2) 63%); background-size:400% 100%}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- 15. REGION CARDS ---------- */
.region{
  position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:340px;
  display:flex; align-items:flex-end; color:#fff; isolation:isolate;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.region:hover{transform:translateY(-5px); box-shadow:var(--sh-3)}
.region img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform 700ms var(--ease-out)}
.region:hover img{transform:scale(1.07)}
.region::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(9,22,36,.1) 0%,rgba(9,22,36,.42) 45%,rgba(9,22,36,.9) 100%);
}
.region-in{position:relative; z-index:2; padding:24px; width:100%; display:grid; gap:8px}
.region-in h3{color:#fff; font-size:1.7rem}
.region-in p{color:#C6D6E2; font-size:.86rem; margin:0}
.region-in .tlink{color:var(--brass-2); border-color:rgba(216,174,99,.45); justify-self:start; margin-top:6px}
.region--tall{min-height:440px}

/* ---------- 16. STATS / TRUST ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1px; background:var(--line)}
.stat{background:var(--sand); padding:26px 22px; display:grid; gap:6px}
.sec--dark .stat,.sec--photo .stat{background:transparent}
.stat-k{font-family:var(--f-display); font-size:clamp(2rem,1.4rem + 1.6vw,2.9rem); font-weight:600;
  color:var(--ink); line-height:1; letter-spacing:-.02em}
.sec--dark .stat-k,.sec--photo .stat-k{color:var(--brass-2)}
.stat-l{font-size:.82rem; color:var(--muted); font-weight:600; line-height:1.4}
.sec--dark .stat-l,.sec--photo .stat-l{color:#A5B9C9}

.trustbar{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s-4)}
.trust{display:flex; gap:14px; align-items:flex-start}
.trust .icon-badge{width:46px; height:46px; border-radius:9px}
.trust strong{display:block; font-size:.98rem; font-weight:800; color:var(--ink); line-height:1.3}
.trust span{display:block; font-size:.82rem; color:var(--muted); line-height:1.45; margin-top:3px}
.sec--dark .trust strong,.sec--photo .trust strong{color:#fff}
.sec--dark .trust span,.sec--photo .trust span{color:#A9BDCC}

/* ---------- 17. QUOTE ---------- */
.quote{position:relative; padding-left:34px}
.quote::before{
  content:"\201C"; position:absolute; left:-6px; top:-24px; font-family:var(--f-display);
  font-size:7rem; line-height:1; color:var(--brass); opacity:.32;
}
.quote p{font-family:var(--f-display); font-size:clamp(1.3rem,1.05rem + 1.1vw,2rem);
  line-height:1.34; font-style:italic; color:var(--ink); max-width:34ch}
.sec--dark .quote p,.sec--photo .quote p{color:#fff}
.quote cite{display:block; margin-top:18px; font-family:var(--f-ui); font-style:normal;
  font-size:.84rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--brass-3)}
.sec--dark .quote cite,.sec--photo .quote cite{color:var(--brass-2)}

/* ---------- 18. ACCORDION (FAQ) ---------- */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:22px 4px; text-align:left; font-family:var(--f-ui); font-size:1.04rem;
  font-weight:700; color:var(--ink); min-height:56px;
  transition:color var(--t) var(--ease);
}
.acc-btn:hover{color:var(--brass-3)}
.acc-btn .ico{color:var(--brass); transition:transform var(--t) var(--ease); flex:none}
.acc-btn[aria-expanded="true"] .ico{transform:rotate(45deg)}
.acc-panel{overflow:hidden; height:0; transition:height var(--t-slow) var(--ease)}
.acc-panel-in{padding:0 4px 24px; color:var(--muted); font-size:.98rem}
.acc-panel-in p+p{margin-top:12px}
.sec--dark .acc,.sec--dark .acc-item{border-color:rgba(255,255,255,.12)}
.sec--dark .acc-btn{color:#fff}
.sec--dark .acc-panel-in{color:#AEC0CF}

/* ---------- 19. TABLE ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-sm); background:#fff;
  -webkit-overflow-scrolling:touch}
.tbl{min-width:520px; font-size:.94rem}
.tbl th,.tbl td{padding:15px 20px; text-align:left; border-bottom:1px solid var(--line-2)}
.tbl th{font-size:.74rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  color:var(--muted); background:var(--sand-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:last-child{text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink)}
.tbl th:last-child{text-align:right} /* nagłówek nad kwotami stoi tam, gdzie kwoty */
/* W dokumentach (polityka prywatności) ostatnia kolumna to tekst, nie kwota */
.entry .tbl th:last-child,.entry .tbl td:last-child,.prose .tbl th:last-child,.prose .tbl td:last-child{text-align:left; font-weight:600}
.tbl tbody tr:hover{background:var(--sand)}

/* ---------- 20. FORMS ---------- */
.form{display:grid; gap:18px}
.field{display:grid; gap:7px}
.field label{font-size:.82rem; font-weight:700; color:var(--ink); letter-spacing:.01em}
.field .req{color:var(--terra)}
.field .ctrl{
  min-height:52px; border-radius:8px; border:1.5px solid var(--line); background:#fff;
  padding:14px 16px; font-size:.97rem; width:100%; transition:border-color var(--t), box-shadow var(--t);
}
.field textarea.ctrl{min-height:130px; resize:vertical; line-height:1.6}
.field select.ctrl{appearance:none; cursor:pointer; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230B1B2B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center}
.field .ctrl:focus{outline:none; border-color:var(--brass); box-shadow:0 0 0 4px rgba(185,138,60,.16)}
.field .hint{font-size:.8rem; color:var(--muted)}
.field .err-msg{font-size:.82rem; color:var(--err); font-weight:600; display:none; align-items:center; gap:6px}
.field.has-err .ctrl{border-color:var(--err)}
.field.has-err .err-msg{display:flex}
.field .err-msg .ico{width:15px; height:15px}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:.84rem; color:var(--muted); line-height:1.55}
.consent input{width:22px; height:22px; margin-top:2px; accent-color:var(--brass); flex:none; cursor:pointer}
.consent a{color:var(--brass-3); text-decoration:underline; text-underline-offset:2px}
.form-note{font-size:.8rem; color:var(--muted-2)}
/* Informacja podstawowa o danych osobowych pod formularzem (art. 11 LOPDGDD) */
.form-rodo{font-size:.78rem; line-height:1.55; color:var(--muted); margin:0}
.form-rodo a{color:var(--brass-3); text-decoration:underline; text-underline-offset:2px}
.form-status{display:none; padding:16px 18px; border-radius:9px; font-size:.92rem; font-weight:600; gap:10px; align-items:flex-start}
.form-status[data-state="ok"]{display:flex; background:#E9F5EE; color:#155F3A; border:1px solid #B9E0C9}
.form-status[data-state="err"]{display:flex; background:#FBECEB; color:#8F2622; border:1px solid #F0C4C1}

/* ---------- 21. CTA BAND ---------- */
.ctaband{position:relative; overflow:hidden; isolation:isolate}
.ctaband .wrap{position:relative; z-index:2}
.ctaband-in{display:grid; grid-template-columns:1.3fr auto; gap:clamp(24px,4vw,60px); align-items:center}
.ctaband h2{max-width:20ch}

/* ---------- 22. FOOTER ---------- */
.site-footer{background:var(--ink); color:#9FB4C6; padding-block:clamp(48px,6vw,84px) 0; font-size:.92rem}
.footer-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(26px,4vw,54px); padding-bottom:44px}
/* Nagłówki kolumn stopki to <h2 class="h5"> (kolejność nagłówków) — sam selektor h5 ich nie łapał: granat na granacie */
.site-footer h5,.site-footer .h5{color:#fff; font-size:.76rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin-bottom:18px}
.site-footer a{transition:color var(--t)} .site-footer a:hover{color:var(--brass-2)}
.footer-links{display:grid; gap:2px}
.footer-links a{display:inline-flex; align-items:center; min-height:40px; padding:4px 0}
.footer-brand .brand-mark{background:linear-gradient(145deg,#1F4467,#0B1B2B)}
.footer-brand .brand-name{color:#fff}
.footer-desc{color:#8DA3B7; font-size:.9rem; line-height:1.6; margin:18px 0 22px; max-width:38ch}
.footer-contact{display:grid; gap:2px}
.footer-contact a{min-height:40px; padding:4px 0}
.footer-contact a{display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:600}
.footer-contact .ico{width:17px; height:17px; color:var(--brass-2)}
.footer-social{display:flex; gap:9px; margin-top:20px}
.footer-social a{width:44px; height:44px; border-radius:9px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:#C4D5E2;
  transition:background-color var(--t), color var(--t), transform var(--t)}
.footer-social a:hover{background:var(--brass); color:#1A1102; transform:translateY(-2px)}
.footer-legal{border-top:1px solid rgba(255,255,255,.1); padding-block:22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:.82rem; color:#7E93A6}
.footer-legal nav{display:flex; gap:18px; flex-wrap:wrap}
.footer-badges{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding-bottom:34px}
.fbadge{display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:6px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.11); font-size:.76rem;
  font-weight:700; letter-spacing:.05em; color:#C9D9E5}
.fbadge .ico{width:15px; height:15px; color:var(--brass-2)}
.fbadge-logo{height:32px; width:auto; display:block; flex:none}
.fbadge-logo--chip{height:20px; background:#fff; padding:5px 9px; border-radius:5px}

/* ---------- 23. MOBILE APP SHELL ---------- */
.appbar{
  position:fixed; left:0; right:0; bottom:0; z-index:150; display:none;
  background:rgba(251,248,243,.94); backdrop-filter:blur(22px) saturate(180%);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -6px 26px rgba(11,27,43,.09);
}
.appbar-in{display:grid; grid-template-columns:repeat(5,1fr); height:62px}
.appbar a{
  display:grid; place-items:center; align-content:center; gap:3px; color:var(--muted);
  font-size:.63rem; font-weight:700; letter-spacing:.02em; position:relative;
  min-height:52px; transition:color var(--t) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.appbar a .ico{width:22px; height:22px; transition:transform var(--t) var(--ease)}
.appbar a:active .ico{transform:scale(.86)}
.appbar a[aria-current="page"]{color:var(--ink)}
.appbar a[aria-current="page"] .ico{color:var(--brass-3)}
.appbar a[aria-current="page"]::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:0 0 4px 4px; background:var(--brass);
}
.appbar .badge{
  position:absolute; top:4px; right:calc(50% - 20px); min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--terra); color:#fff; font-size:.6rem; font-weight:800;
  display:none; place-items:center; line-height:1;
}
.appbar .badge[data-count]:not([data-count="0"]){display:grid}

/* floating call/WhatsApp */
.fab{
  position:fixed; right:16px; bottom:calc(var(--appbar-h) + 14px); z-index:140;
  display:none; flex-direction:column; gap:10px; align-items:flex-end;
}
.fab{opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease)}
.fab.is-on{opacity:1; transform:none; pointer-events:auto}
.fab a{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center; color:#fff;
  box-shadow:0 10px 28px rgba(9,22,36,.28); border:1px solid rgba(255,255,255,.18);
  transition:transform var(--t) var(--ease);
}
.fab a:active{transform:scale(.92)}
.fab .fab-wa{background:#1FA855}
.fab .fab-tel{background:var(--ink)}
.fab .ico{width:25px; height:25px}

/* sticky lead bar (desktop) */
.leadbar{
  position:fixed; left:0; right:0; bottom:0; z-index:120; background:var(--ink); color:#fff;
  transform:translateY(110%); transition:transform var(--t-slow) var(--ease-out);
  border-top:1px solid rgba(255,255,255,.1);
}
.leadbar.is-on{transform:translateY(0)}
.leadbar-in{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:13px 0}
.leadbar strong{font-family:var(--f-display); font-size:1.2rem; font-weight:600}
.leadbar span{color:#9FB4C6; font-size:.86rem}
.leadbar-close{color:#7E93A6; padding:8px; border-radius:8px}

/* bottom sheet */
.sheet{position:fixed; inset:0; z-index:210; visibility:hidden; pointer-events:none}
.sheet[data-open="true"]{visibility:visible; pointer-events:auto}
.sheet-scrim{position:absolute; inset:0; background:rgba(9,22,36,.55); opacity:0;
  transition:opacity var(--t-slow) var(--ease); backdrop-filter:blur(3px)}
.sheet[data-open="true"] .sheet-scrim{opacity:1}
.sheet-panel{
  position:absolute; left:0; right:0; bottom:0; background:var(--sand);
  border-radius:16px 16px 0 0; transform:translateY(100%);
  transition:transform var(--t-slow) var(--ease-out); max-height:88svh;
  display:flex; flex-direction:column; padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -20px 60px rgba(9,22,36,.3);
}
.sheet[data-open="true"] .sheet-panel{transform:translateY(0)}
.sheet-grab{width:44px; height:5px; border-radius:3px; background:var(--sand-3); margin:12px auto 4px; flex:none}
.sheet-head{display:flex; align-items:center; justify-content:space-between; padding:10px var(--s-5) 14px}
.sheet-body{overflow-y:auto; padding:0 var(--s-5) var(--s-5); -webkit-overflow-scrolling:touch}
.sheet-foot{padding:var(--s-4) var(--s-5); border-top:1px solid var(--line); background:var(--sand-2); display:flex; gap:10px}

/* toast */
.toast{
  position:fixed; left:50%; bottom:calc(var(--appbar-h) + 76px); transform:translate(-50%,20px);
  z-index:300; background:var(--ink); color:#fff; padding:13px 20px; border-radius:10px;
  font-size:.88rem; font-weight:600; box-shadow:var(--sh-3); opacity:0; pointer-events:none;
  transition:opacity var(--t) var(--ease), transform var(--t) var(--ease);
  display:flex; align-items:center; gap:9px; max-width:calc(100vw - 32px);
}
.toast.is-on{opacity:1; transform:translate(-50%,0)}
.toast .ico{width:18px; height:18px; color:var(--brass-2)}

/* ---------- 23b. TRESC REDAKCYJNA ---------- */
/* Sekcje budowane komponentami maja wlasne odstepy, ale tresc z edytora
   (wpisy, regulamin, polityka prywatnosci, opis oferty) potrzebuje rytmu. */
.entry, .entry-content, .acc-panel-in{}
.entry > * + *,
.entry-content > * + *,
.acc-panel-in > * + *{margin-top:1.05em}
.entry h2,.entry-content h2{margin-top:1.6em}
.entry h3,.entry-content h3,.entry h4,.entry-content h4{margin-top:1.35em}
.entry ul,.entry ol,
.entry-content ul,.entry-content ol,
.acc-panel-in ul,.acc-panel-in ol{padding-left:1.35em; list-style:revert}
.entry ul,.entry-content ul,.acc-panel-in ul{list-style:disc}
.entry ol,.entry-content ol,.acc-panel-in ol{list-style:decimal}
.entry li + li,.entry-content li + li,.acc-panel-in li + li{margin-top:.4em}
.entry a,.entry-content a{color:var(--brass-3); text-decoration:underline; text-underline-offset:2px}
.entry blockquote,.entry-content blockquote{
  border-left:3px solid var(--brass); padding-left:20px; font-family:var(--f-display);
  font-size:1.25rem; font-style:italic; color:var(--ink);
}
.entry img,.entry-content img{border-radius:var(--r-sm)}
/* Pasek administratora WordPressa zachowuje wlasna typografie. */
#wpadminbar,#wpadminbar *{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}

/* ---------- 24. MISC ---------- */
.hscroll{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding-bottom:6px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{scroll-snap-align:start; flex:0 0 min(84%,320px)}
.figure{border-radius:var(--r-lg); overflow:hidden; position:relative; box-shadow:var(--sh-2)}
.figure img{width:100%; height:100%; object-fit:cover}
.figure figcaption{position:absolute; left:0; right:0; bottom:0; padding:20px;
  background:linear-gradient(180deg,transparent,rgba(9,22,36,.85)); color:#fff; font-size:.85rem}
.ratio-43{aspect-ratio:4/3} .ratio-11{aspect-ratio:1/1} .ratio-32{aspect-ratio:3/2}
.ratio-45{aspect-ratio:4/5} .ratio-169{aspect-ratio:16/9}
.divider{height:1px; background:var(--line); border:0}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip{position:absolute; left:-9999px; top:0; z-index:999; background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:0 0 12px 0; font-weight:700}
.skip:focus{left:0}
.nowrap{white-space:nowrap}
.tabnum{font-variant-numeric:tabular-nums}

/* segmented control */
.seg{display:inline-flex; padding:4px; background:var(--sand-2); border:1px solid var(--line);
  border-radius:10px; gap:2px}
.seg button{
  min-height:40px; padding:0 18px; border-radius:7px; font-size:.86rem; font-weight:700;
  color:var(--muted); transition:background-color var(--t), color var(--t);
}
.seg button[aria-selected="true"]{background:#fff; color:var(--ink); box-shadow:var(--sh-1)}

/* reveal animation */
/* Ukrywamy tylko wtedy, gdy JS faktycznie wystartowal (klasa .js na <html>).
   Bez JS albo przy bledzie skryptu tresc jest po prostu widoczna. */
.js .rv{opacity:0; transform:translateY(22px)}
.rv{transition:opacity 650ms var(--ease-out), transform 650ms var(--ease-out)}
.js .rv.is-in{opacity:1; transform:none}
.rv-d1{transition-delay:70ms} .rv-d2{transition-delay:140ms} .rv-d3{transition-delay:210ms}
.rv-d4{transition-delay:280ms} .rv-d5{transition-delay:350ms}

/* ---------- 25. RESPONSIVE ---------- */
@media (max-width:1180px){
  .nav>li>a{padding:0 10px; font-size:.86rem}
  .footer-top{grid-template-columns:1.4fr 1fr 1fr}
}
@media (max-width:1024px){
  :root{--header-h:66px}
  .nav,.topbar-l{display:none}
  .burger{display:grid}
  .header-cta .btn--lg,.header-cta .btn:not(.btn--icon){display:none}
  .split{grid-template-columns:1fr; gap:34px}
  .split--rev>*:first-child{order:0}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .searchbar{grid-template-columns:repeat(2,1fr)}
  .searchbar .btn{grid-column:1/-1}
  .ctaband-in{grid-template-columns:1fr; gap:26px}
  .footer-top{grid-template-columns:1fr 1fr; gap:34px}
  .footer-brand{grid-column:1/-1}
}
@media (max-width:760px){
  body.gool-app-shell{padding-bottom:var(--appbar-h)}
  .appbar{display:block}
  .fab{display:flex}
  .leadbar{display:none}
  .topbar{display:none}
  .header-cta .lang-btn{display:inline-flex; align-items:center; justify-content:center}
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  .plist{grid-template-columns:1fr}
  .searchbar{grid-template-columns:1fr; gap:12px; padding:12px; border-radius:var(--r-md)}
  .hero{min-height:auto; padding-top:44px; padding-bottom:34px}
  .hero h1{font-size:clamp(2.3rem,7.6vw,3rem); max-width:100%}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr}
  .footer-links a,.footer-contact a{min-height:44px}
  .footer-legal{flex-direction:column; align-items:flex-start; gap:12px}
  .footer-legal nav a{min-height:44px; display:inline-flex; align-items:center}
  .quote{padding-left:20px}
  .quote::before{font-size:5rem; top:-16px; left:-4px}
  .region{min-height:280px}
  .region--tall{min-height:320px}
  .sec-head{margin-bottom:26px}
  .hero-actions .btn{flex:1 1 100%}
  .card{border-radius:var(--r-md)}
}
@media (max-width:760px){
  /* pionowy scrim zamiast bocznego — na waskim ekranie boczny zjadal cale zdjecie */
  .hero .sec-bg::after,
  .phero.scrim-bottom .sec-bg::after,
  .scrim-left .sec-bg::after{
    /* Pionowy scrim. Alfa dobrana tak, by zloty naglowek (#D8AE63) mial >=3:1,
       a bialy tekst >=4.5:1 nawet nad jasnymi fragmentami zdjecia. */
    background:linear-gradient(180deg,rgba(8,20,33,.66) 0%,rgba(8,20,33,.6) 18%,
      rgba(8,20,33,.79) 50%,rgba(8,20,33,.93) 100%);
  }
  .hero-badges .pill{font-size:.66rem; padding:5px 10px; gap:5px}
  .hero-badges .pill .ico{width:12px; height:12px}
  .hero .lead{font-size:1rem; line-height:1.55}
  .hero-actions{margin-top:22px; gap:10px}
  .sec-head{max-width:100%}
  .icon-badge{width:48px; height:48px; border-radius:14px}
  .icon-badge .ico--lg{width:26px; height:26px}
  .step-num{font-size:2.2rem}
  .tbl th,.tbl td{padding:13px 15px}
}
/* Tabele na telefonie: bez przewijania w bok — kwoty muszą być widoczne od razu */
@media (max-width:600px){
  .tbl{min-width:0}
  .tbl th,.tbl td{padding:12px 14px}
  /* 3+ kolumny: każdy wiersz jako karta, podpis pola z data-label */
  .tbl-wrap{position:relative} /* ukryty thead zostaje w ramce, nie poszerza strony */
  .tbl--karty thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .tbl--karty, .tbl--karty tbody, .tbl--karty tr, .tbl--karty td{display:block; width:auto}
  .tbl--karty tr{padding:14px 16px; border-bottom:1px solid var(--line-2)}
  .tbl--karty tr:last-child{border-bottom:0}
  .tbl.tbl--karty td{padding:0; border:0; text-align:left; font-weight:500; white-space:normal}
  .tbl.tbl--karty td:first-child{font-weight:700; color:var(--ink)}
  .tbl.tbl--karty td + td{margin-top:8px}
  .tbl--karty td[data-label]::before{content:attr(data-label); display:block; margin-bottom:2px;
    font-size:.7rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
}
@media (max-width:420px){
  .appbar a{font-size:.58rem}
  .brand-name{font-size:1.12rem}
  .brand-sub{font-size:.55rem; letter-spacing:.18em}
}

/* landscape phones: don't let the hero eat the screen */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto; padding-block:64px 34px}
  .phero{min-height:auto; padding-block:60px 30px}
}

/* ---------- 26. A11Y / MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  .rv{opacity:1; transform:none}
  .hero .sec-bg img{animation:none}
}
@media print{
  .site-header,.appbar,.fab,.leadbar,.topbar,.drawer,.sheet{display:none !important}
  body{background:#fff; padding-bottom:0}
  .sec--photo,.sec--dark{background:#fff !important; color:#000 !important}
  .sec-bg{display:none}
}

/* ============================================================
   27. EFEKTY — wszystkie na transform/opacity, wyłączane
       przy prefers-reduced-motion (sekcja 26 nadpisuje niżej)
   ============================================================ */

/* --- 27.1 Pasek postępu czytania --- */
.readbar{
  position:fixed; top:0; left:0; height:2px; z-index:300; pointer-events:none;
  width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--brass-3),var(--brass),var(--brass-2));
  transition:transform 90ms linear, opacity var(--t);
  opacity:0;
}
.readbar.is-on{opacity:1}

/* --- 27.2 Paralaksa zdjęć w tle sekcji --- */
.sec-bg[data-parallax] img{will-change:transform}

/* --- 27.3 Odsłanianie zdjęcia maską (zamiast zwykłego fade) --- */
.js .rv-clip{clip-path:inset(0 0 100% 0); transform:none; opacity:1}
.rv-clip{transition:clip-path 900ms var(--ease-out)}
.js .rv-clip.is-in{clip-path:inset(0 0 0 0)}
.js .rv-clip img{transform:scale(1.14); transition:transform 1300ms var(--ease-out)}
.js .rv-clip.is-in img{transform:scale(1)}

/* --- 27.4 Odsłanianie nagłówka wierszami --- */
/* Cormorant Garamond ma wysokie wydluzenia gorne i dolne; przy line-height 1.07
   maska obcinala ogonki (ą, ę) i kreski (ń, ś). Powiekszamy pole zawartosci
   i cofamy je marginesem, zeby rytm pionowy zostal bez zmian. */
.js .rv-lines .ln{display:block; overflow:hidden; padding-block:.22em; margin-block:-.22em}
.js .rv-lines .ln > span{
  display:block; transform:translateY(135%);
  transition:transform 900ms var(--ease-out);
}
.js .rv-lines.is-in .ln > span{transform:translateY(0)}
.js .rv-lines.is-in .ln:nth-child(2) > span{transition-delay:90ms}
.js .rv-lines.is-in .ln:nth-child(3) > span{transition-delay:180ms}

/* --- 27.5 Reflektor podążający za kursorem (ciemne karty) --- */
.spot{position:relative; overflow:hidden}
.spot::before{
  content:""; position:absolute; inset:-1px; pointer-events:none; opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(216,174,99,.16), transparent 62%);
  transition:opacity var(--t-slow) var(--ease);
}
.spot:hover::before{opacity:1}

/* --- 27.6 Delikatne przechylenie karty oferty --- */
.pcard{transform-style:preserve-3d}
.pcard[data-tilt]{
  transition:transform 260ms var(--ease), box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease);
}
.pcard[data-tilt]:hover{transform:none}   /* nadpisywane inline przez skrypt */

/* --- 27.7 Przewijany pas nazw miejscowości --- */
.marquee{
  position:relative; overflow:hidden; padding-block:18px;
  border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.sec--dark .marquee,.sec--photo .marquee{border-color:rgba(255,255,255,.14)}
.marquee-track{display:flex; width:max-content; animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex; align-items:center; gap:34px; padding-right:34px; flex:none}
.marquee-group span{
  display:inline-flex; align-items:center; gap:12px; white-space:nowrap;
  font-family:var(--f-display); font-size:1.35rem; font-weight:500; color:var(--ink-3);
}
.marquee-group span::after{content:"·"; color:var(--brass); font-size:1.6rem; line-height:0}
.sec--dark .marquee-group span,.sec--photo .marquee-group span{color:#C6D6E2}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* --- 27.8 Pas zdjęć z przyciąganiem (więcej fotografii, mniej wysokości) --- */
.strip{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,30vw);
  gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  padding-bottom:8px; margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
}
.strip::-webkit-scrollbar{display:none}
.strip figure{
  position:relative; margin:0; border-radius:var(--r-md); overflow:hidden;
  aspect-ratio:3/4; scroll-snap-align:start; background:var(--ink-3);
}
.strip img{width:100%; height:100%; object-fit:cover;
  transition:transform 800ms var(--ease-out)}
.strip figure:hover img{transform:scale(1.06)}
.strip figcaption{
  position:absolute; inset:auto 0 0 0; padding:18px; color:#fff; z-index:2;
  background:linear-gradient(180deg,transparent,rgba(9,22,36,.9));
  font-size:.9rem; font-weight:600;
}
.strip figcaption small{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass-2); margin-bottom:4px;
}

/* --- 27.9 Cienka linia „rysowana” pod nagłówkiem sekcji --- */
.js .rule{display:block; height:1px; background:var(--brass); opacity:.5;
  transform:scaleX(0); transform-origin:0 50%; transition:transform 900ms var(--ease-out)}
.js .rule.is-in{transform:scaleX(1)}

/* --- 27.10 Numer etapu wychodzący poza kartę --- */
.step-num{position:relative}
.card:hover > .step-num{color:var(--brass-2)}

/* --- 27.11 Podkreślenie linku rosnące od lewej --- */
.tlink{position:relative; border-bottom-color:transparent}
.tlink::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px;
  background:currentColor; opacity:.45; transform:scaleX(1); transform-origin:0 50%;
  transition:transform var(--t-slow) var(--ease), opacity var(--t);
}
.tlink:hover::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none; transform:none}
  .js .rv-clip{clip-path:none}
  .js .rv-clip img{transform:none}
  .js .rv-lines .ln > span{transform:none}
  .js .rule{transform:scaleX(1)}
  .readbar{display:none}
  .spot::before{display:none}
}

/* ============================================================
   28. POPRAWKI PO AUDYCIE
   ============================================================ */

/* --- Serce z licznikiem ulubionych w nagłówku (było dostępne tylko na telefonie) --- */
.header-fav{position:relative; flex:none}
.header-fav .badge{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--terra); color:#fff; font-size:.62rem; font-weight:800;
  display:none; place-items:center; line-height:1; border:2px solid var(--sand);
}
.header-fav .badge[data-count]:not([data-count="0"]){display:grid}

/* --- Przycisk pauzy paska miejscowości (WCAG 2.2.2) --- */
.marquee{position:relative}
.marquee-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); z-index:2;
  width:36px; height:36px; border-radius:8px; display:grid; place-items:center;
  background:var(--sand); border:1px solid var(--line); color:var(--ink);
  transition:background-color var(--t), border-color var(--t);
}
.marquee-toggle:hover{background:var(--sand-3); border-color:var(--brass)}
.marquee-toggle .ico{width:16px; height:16px}
.sec--dark .marquee-toggle,.sec--photo .marquee-toggle{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.24); color:#fff;
}
.marquee.is-paused .marquee-track{animation-play-state:paused}

/* --- Pas zdjęć osiągalny z klawiatury (WCAG 2.1.1) --- */
.strip:focus-visible{outline:3px solid var(--brass); outline-offset:4px; border-radius:var(--r-sm)}

/* --- Zgoda RODO jako pełnoprawne pole z komunikatem błędu --- */
.field--consent{display:grid; gap:8px}
.field--consent .err-msg{display:none; align-items:center; gap:6px;
  font-size:.82rem; color:var(--err); font-weight:600}
.field--consent.has-err .err-msg{display:flex}
.field--consent.has-err .consent input{outline:2px solid var(--err); outline-offset:3px}
.field--consent .err-msg .ico{width:15px; height:15px}

/* ============================================================
   29. LOGO KLIENTA
   ============================================================ */
.brand{display:flex; align-items:center; gap:12px; flex:none; min-width:0}
.brand-logo{
  height:44px; width:auto; display:block;
  transition:opacity var(--t) var(--ease);
}
.brand:hover .brand-logo{opacity:.85}
.brand-logo--stopka{height:52px; margin-bottom:4px}
.drawer-head .brand-logo{height:38px}

@media (max-width:1024px){ .brand-logo{height:40px} }
@media (max-width:420px){ .brand-logo{height:34px} }

/* Plakietki licencji: numer ma być czytelny, nie schowany w szumie */
.fbadge strong{color:#fff; font-weight:800; letter-spacing:.02em}

/* --- Zdjęcie agenta --- */
.osoba{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start}
.osoba-foto{
  width:96px; height:120px; border-radius:var(--r-sm); object-fit:cover; flex:none;
  border:1px solid var(--line); background:var(--sand-3);
}
.sec--dark .osoba-foto,.sec--photo .osoba-foto{border-color:rgba(255,255,255,.18)}
@media (max-width:420px){
  .osoba{grid-template-columns:1fr; gap:14px}
  .osoba-foto{width:120px; height:150px}
}

/* --- Dokument poświadczający (certyfikat, wpis do rejestru) --- */
.dokument{
  display:block; border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--line); background:#fff; position:relative;
  transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* Dokumenty mają różne proporcje (RAICV prawie kwadrat, certyfikat poziomy).
   Wspólny kadr z object-fit:contain wyrównuje karty i niczego nie przycina —
   przy dokumencie kadrowanie byłoby błędem. */
.dokument{display:flex; flex-direction:column}
.dokument img{
  width:100%; aspect-ratio:4/3; object-fit:contain; display:block;
  background:#fff; padding:10px;
}
.dokument figcaption{margin-top:auto}
.dokument:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.dokument figcaption{
  padding:12px 14px; font-size:.8rem; color:var(--muted); background:var(--sand);
  border-top:1px solid var(--line-2);
}
.dokument figcaption strong{color:var(--ink); display:block; font-size:.86rem}
.dokumenty{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px}

/* Pułapka na boty w formularzu (pole niewidoczne dla ludzi i czytników ekranu) */
.hp{position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}

/* =====================================================================
   30. WORDPRESS — elementy, których nie ma w podglądzie statycznym
   (lista z filtrami i stronicowaniem, karta oferty z galerią, treść z edytora)
   ===================================================================== */

/* Pasek administratora nad przyklejonym nagłówkiem */
.admin-bar .site-header{top:32px}
@media (max-width:782px){ .admin-bar .site-header{top:46px} }
@media (max-width:600px){ .admin-bar .site-header{top:0} }

/* Ikona w lustrze (poprzednia strona / poprzednie zdjęcie) */
.ico--flip{transform:scaleX(-1)}

/* Przełącznik języków bez wtyczki tłumaczeń — nie pokazujemy martwych przycisków */
.gool-bez-tlumaczen .lang,.gool-bez-tlumaczen .lang-btn,.gool-bez-tlumaczen .drawer-lang{display:none !important}
/* Widżet GTranslate: ładuje skrypty, ale jego własny wygląd chowamy (sterują nim przyciski z projektu) */
.gool-gt{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
body{top:0 !important} /* Google Translate przesuwa body o wysokość swojego paska */
.skiptranslate iframe, .goog-te-banner-frame{display:none !important}

/* Sortowanie jako linki (nawigacja, nie zakładki) */
.seg--links a{
  display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:7px;
  font-size:.86rem; font-weight:700; color:var(--muted); text-decoration:none;
  transition:background-color var(--t), color var(--t);
}
.seg--links a:hover{color:var(--ink)}
.seg--links a[aria-current="true"]{background:#fff; color:var(--ink); box-shadow:var(--sh-1)}
@media (max-width:760px){
  .seg--links{width:100%; overflow-x:auto; scrollbar-width:none}
  .seg--links a{flex:0 0 auto}
}

/* Aktywne filtry */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px}
.chips a{
  display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:0 12px;
  border-radius:6px; background:var(--sand-2); border:1px solid var(--line); color:var(--ink);
  font-size:.84rem; font-weight:700; text-decoration:none;
}
.chips a:hover{border-color:var(--brass)}
.chips .ico{width:14px; height:14px}

.notice-card{border-color:rgba(185,138,60,.45); background:#FFFBF2}
.notice-card a{color:var(--brass-3); text-decoration:underline}

/* Stronicowanie */
.pager{margin-top:var(--s-7)}
.pager ul{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center}
.pager a, .pager span{
  display:inline-grid; place-items:center; min-width:44px; min-height:44px; padding:0 12px;
  border-radius:var(--r-sm); border:1px solid var(--line); background:#fff; color:var(--ink);
  font-weight:700; text-decoration:none;
}
.pager a:hover{border-color:var(--brass); color:var(--brass-3)}
.pager .current{background:var(--ink); color:#fff; border-color:var(--ink)}
.pager .dots{border:0; background:transparent}

/* Karta oferty: przycisk „Zapisz” w nagłówku (ta sama logika co serce na kartach) */
.pcard-fav.pcard-fav--btn{
  position:static; width:auto; height:auto; border-radius:var(--r-btn); display:inline-flex;
  backdrop-filter:none; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45);
}
.pcard-fav.pcard-fav--btn:hover{transform:none; background:rgba(255,255,255,.13)}
.pcard-fav.pcard-fav--btn[aria-pressed="true"]{background:var(--terra); border-color:var(--terra)}
.obnizka{margin-right:.45em; color:#C9D8E4}
.obnizka del{text-decoration-thickness:2px; text-decoration-color:var(--terra)}

.split--oferta{align-items:start}
/* Kolumna boczna z formularzem jest wyższa niż ekran — bez przyklejania (dół byłby nieosiągalny) */
.oferta-boczna{position:static}

/* Karta oferty na telefonie: „Zapisz” i „Udostępnij” obok siebie pod głównym przyciskiem */
@media (max-width:760px){
  .phero .hero-actions .pcard-fav--btn, .phero .hero-actions [data-gool-share]{flex:1 1 calc(50% - 5px); min-width:0; padding-inline:10px; font-size:.9rem}
}
/* Najwęższe telefony: bez ikon, żeby „Zapisz ofertę” mieściło się w jednej linii (stan „zapisana” niesie kolor tła) */
@media (max-width:360px){
  .phero .hero-actions .pcard-fav--btn .ico, .phero .hero-actions [data-gool-share] .ico{display:none}
}

/* Formularz zapytania / prośby o prezentację na karcie oferty */
.oferta-zapytanie{border-color:rgba(185,138,60,.4)}
.oferta-zapytanie .form{gap:14px}
.oferta-zapytanie .field textarea.ctrl{min-height:96px}
.card p.oferta-rozmowa{margin-top:18px; padding-top:14px; border-top:1px solid var(--line); color:var(--muted)}
.oferta-kontakt{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px}
.oferta-kontakt .btn{min-width:0; padding-inline:14px}
.oferta-narzedzia{display:flex; flex-wrap:wrap; gap:0 24px; padding-inline:4px}
.oferta-narzedzia [hidden]{display:none}
button.tlink{background:none; border:0; border-bottom:1.5px solid transparent; font:inherit; font-size:.94rem; font-weight:700; color:var(--brass-3); cursor:pointer; text-align:left}

/* Informacje prawne na karcie oferty (cena bez podatków, najem, Andaluzja — D.I.A.) */
.oferta-prawne{background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:14px 16px}
.oferta-prawne h2{display:flex; align-items:center; gap:8px; margin:0 0 8px}
.oferta-prawne ul{margin:0; padding-left:1.1em; list-style:disc; font-size:.86rem; line-height:1.6; color:var(--text)}
.oferta-prawne li + li{margin-top:6px}
.oferta-prawne a{color:var(--brass-3); text-decoration:underline; text-underline-offset:2px}

/* Strony prawne: brak nazwy prawnej / NIF (komunikat widzi tylko administrator) */
.dane-prawne-brak{padding:10px 14px; border:1px solid #d63638; background:#fcf0f1; border-radius:6px; font-size:.9rem}

/* Film / wirtualny spacer: zaślepka ze zdjęciem, odtwarzacz po kliknięciu */
.wideo{position:relative; aspect-ratio:16/9; max-width:1100px; border-radius:var(--r-lg); overflow:hidden; background:var(--ink)}
.wideo img{display:block; width:100%; height:100%; object-fit:cover; opacity:.72}
.wideo-play{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color:#fff; font-weight:700; font-size:1.02rem; text-decoration:none;
  background:linear-gradient(180deg,rgba(9,22,36,.12) 0%,rgba(9,22,36,.58) 100%);
}
.wideo-ikona{display:grid; place-items:center; width:84px; height:84px; border-radius:50%; background:var(--brass);
  box-shadow:0 12px 30px rgba(0,0,0,.35); transition:transform var(--t) var(--ease)}
.wideo-ikona .ico{width:34px; height:34px; fill:#fff; stroke:none; margin-left:5px}
.wideo-play:hover .wideo-ikona{transform:scale(1.06)}
.wideo-play:focus-visible{outline:3px solid var(--brass-2); outline-offset:-6px}
.wideo iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
@media (max-width:600px){ .wideo{aspect-ratio:4/3} .wideo-ikona{width:68px; height:68px} }

/* Filtry listy: dolny wiersz — rodzaj oferty, numer oferty, „Z basenem”, przycisk */
.filtry-dol{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 22px}
.filtry-dol .field{flex:0 1 230px}
.filtry-dol .btn{margin-left:auto}
.filtry-check{display:inline-flex; align-items:center; gap:10px; min-height:52px; font-size:.9rem; font-weight:700; color:var(--ink); cursor:pointer}
.filtry-check input{width:20px; height:20px; accent-color:var(--brass); cursor:pointer}
@media (max-width:600px){
  .filtry-dol .field{flex:1 1 100%}
  .filtry-dol .btn{width:100%; margin-left:0}
}

/* Listy bez kropek: aktywne filtry i stronicowanie (ul z display:flex dalej rysował znaczniki) */
.chips, .pager ul{list-style:none; padding:0; margin-left:0}

/* Wydruk karty oferty („Drukuj albo zapisz jako PDF” i Ctrl+P): zdjęcie, dane, opis, 6 zdjęć, kontakt */
.druk-tylko{display:none}
@media print{
  @page{margin:14mm 12mm}
  .single-nieruchomosc .phero{min-height:0; display:block; padding:0 0 10px; color:#000}
  .single-nieruchomosc .phero .sec-bg{display:block; position:relative; height:8.5cm; margin-bottom:12px; border-radius:6px}
  .single-nieruchomosc .phero .sec-bg img{transform:none}
  .single-nieruchomosc .phero .sec-bg::after{display:none}
  .single-nieruchomosc .phero h1, .single-nieruchomosc .phero .lead{color:#000; max-width:none}
  .single-nieruchomosc .obnizka{color:#555}
  .single-nieruchomosc .pill--glass{color:#000; background:none; border-color:#999; backdrop-filter:none}
  .single-nieruchomosc .crumbs, .single-nieruchomosc .hero-actions,
  .single-nieruchomosc .oferta-boczna > .card:not(.oferta-zapytanie), .single-nieruchomosc .oferta-zapytanie form,
  .single-nieruchomosc .oferta-zapytanie .btn--wa, .single-nieruchomosc .oferta-zapytanie .xs, .single-nieruchomosc .oferta-narzedzia,
  .single-nieruchomosc [data-gal-wiecej], .single-nieruchomosc .gal-item:nth-child(n+7),
  .single-nieruchomosc section[aria-labelledby="wideo-h"], .single-nieruchomosc section[aria-labelledby="mapa-h"],
  .single-nieruchomosc section[aria-labelledby="op"], .single-nieruchomosc .lightbox, .single-nieruchomosc .site-footer,
  .single-nieruchomosc .ctaband{display:none !important}
  .single-nieruchomosc .sec{padding-block:10px}
  .single-nieruchomosc .split--oferta{display:block}
  .single-nieruchomosc .stats{background:none; border:1px solid #bbb}
  .single-nieruchomosc .stat{background:#fff; padding:8px 10px}
  .single-nieruchomosc .oferta-zapytanie{margin-top:12px; border:1px solid #bbb; break-inside:avoid}
  .single-nieruchomosc .oferta-kontakt .btn{border:0; padding:0; min-height:0; color:#000}
  .single-nieruchomosc .galeria{grid-template-columns:repeat(3,1fr); gap:6px}
  .single-nieruchomosc .gal-item, .single-nieruchomosc .gal-item:first-child{grid-column:auto; grid-row:auto; aspect-ratio:4/3; display:block}
  .single-nieruchomosc .gal-item--ukryte{display:none}
  .single-nieruchomosc a[href]{color:#000; text-decoration:none}
  .druk-tylko{display:block; margin-top:12px; font-size:10pt; color:#000}
}

.opis-jezyk{display:flex; gap:8px; align-items:flex-start; color:var(--muted); background:#fff;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px}

/* Cechy i fakty oferty */
.cechy, .fakty{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px}
.cechy > div, .fakty > div{background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 14px}
.cechy dt, .fakty dt{font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--brass-3)}
.cechy dd, .fakty dd{margin:4px 0 0; color:var(--text); font-weight:600}

/* Galeria + podgląd pełnoekranowy */
.galeria{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.gal-item{display:block; aspect-ratio:4/3; border-radius:var(--r-md); overflow:hidden; background:var(--sand-2)}
.gal-item img{width:100%; height:100%; object-fit:cover; transition:transform var(--t-slow) var(--ease-out)}
.gal-item:hover img{transform:scale(1.04)}
.gal-item:first-child{grid-column:span 2; grid-row:span 2; aspect-ratio:auto}
.gal-item--ukryte{display:none}
.galeria.is-all .gal-item--ukryte{display:block}
.gal-licznik{font-family:var(--f-ui); font-size:.5em; font-weight:700; color:var(--muted); letter-spacing:0}
@media (max-width:760px){
  .galeria{grid-template-columns:repeat(2,1fr)}
  .gal-item:first-child{grid-column:span 2; grid-row:auto; aspect-ratio:4/3}
}

.lightbox{
  width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0;
  background:rgba(6,14,22,.96); color:#fff;
}
.lightbox[open]{display:grid; grid-template-columns:auto 1fr auto; align-items:center}
.lightbox::backdrop{background:rgba(6,14,22,.9)}
.lightbox figure{margin:0; display:grid; place-items:center; height:100vh; padding:56px 8px 40px}
.lightbox img{max-width:100%; max-height:calc(100vh - 110px); object-fit:contain; border-radius:var(--r-sm)}
.lightbox figcaption{margin-top:10px; font-size:.86rem; color:#C9D8E4}
.lightbox .icon-btn{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); color:#fff}
.lightbox-close{position:absolute; top:12px; right:12px; z-index:2}
.lightbox-nav{margin:0 8px}
@media (max-width:600px){ .lightbox-nav{position:absolute; bottom:12px} .lightbox-prev{left:12px} .lightbox-next{right:12px} }

/* Mapa */
.mapa{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); background:var(--sand-2); aspect-ratio:16/7}
.mapa iframe{display:block; width:100%; height:100%; border:0}
@media (max-width:760px){ .mapa{aspect-ratio:4/3} }

/* Treść z edytora (strony prawne, wpisy) */
.prose{font-size:1.03rem; line-height:1.72; color:var(--text)}
.prose > * + *{margin-top:1em}
/* Spacje wokół „+” w clamp() są obowiązkowe — bez nich przeglądarka odrzuca całą deklarację */
.prose h2{font-family:var(--f-display); font-size:clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height:1.15; margin-top:1.7em; color:var(--ink)}
.prose > :first-child{margin-top:0}
.prose h3{font-size:1.2rem; margin-top:1.4em; color:var(--ink)}
.prose ul{list-style:disc; padding-left:1.3em}
.prose ol{list-style:decimal; padding-left:1.3em}
.prose li + li{margin-top:.4em}
.prose a{color:var(--brass-3); text-decoration:underline; text-underline-offset:2px}
.prose blockquote{border-left:3px solid var(--brass); padding:.4em 0 .4em 1.1em; font-family:var(--f-display); font-size:1.25rem}
.prose img{border-radius:var(--r-sm); height:auto}
.prose table{width:100%; border-collapse:collapse}
.prose th, .prose td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.prose .alignleft{float:left; margin:.3em 1.2em 1em 0}
.prose .alignright{float:right; margin:.3em 0 1em 1.2em}
.prose .aligncenter{margin-inline:auto}
.opis p + p{margin-top:.9em}
.screen-reader-text{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

@media (prefers-reduced-motion:reduce){
  .gal-item img, .seg--links a{transition:none}
}