/* ============================================================
   Apartamenty Browarna — strona pojedynczego mieszkania
   Samodzielny arkusz (nie ładuje site.css) wg design handoff.
   ============================================================ */

/* Gazpacho — czcionka nagłówków (licencjonowana, hostowana lokalnie) */
@font-face{font-family:'Gazpacho';src:url('/static/fonts/gazpacho-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Gazpacho';src:url('/static/fonts/gazpacho-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gazpacho';src:url('/static/fonts/gazpacho-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gazpacho';src:url('/static/fonts/gazpacho-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#ffffff; --paper-2:#f8f7f4; --paper-3:#f3f2ee;
  --ink:#1c1a16; --ink-soft:#46433b; --muted:#857f72; --faint:#a8a294;
  --line:#eae6dd; --line-soft:#f1eee7;
  --brass:#a8814a; --brass-dk:#876539; --brass-lt:#c8a86d;
  --green:#4d6b50; --green-dk:#38513e; --green-lt:#7d977a; --green-bg:#eef1ea;
  --st-free:#4d7c5a; --st-free-bg:#e7f0e8;
  --st-res:#b9842c; --st-res-bg:#f6ecd8;
  --st-sold:#9a6b62; --st-sold-bg:#f0e7e4;
  --serif:'Spectral',Georgia,serif; --sans:'Hanken Grotesk',system-ui,sans-serif;
  --display:'Gazpacho','Spectral',Georgia,serif;
  --pad:clamp(20px,5vw,72px); --maxw:1240px; --radius:5px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans); background:var(--paper); color:var(--ink); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.serif{font-family:var(--serif)}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad)}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); display:inline-flex; align-items:center; gap:.7em}
.eyebrow::before{content:""; width:26px; height:1px; background:var(--brass); opacity:.6}
.eyebrow.green{color:var(--green)} .eyebrow.green::before{background:var(--green)}
.h2{font-family:var(--display); font-weight:500; font-size:clamp(1.9rem,3.4vw,2.9rem); line-height:1.05}

/* ---------- top bar ---------- */
.topbar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.topbar .row{display:flex; align-items:center; justify-content:space-between; gap:14px; height:62px}
.logo{display:flex; align-items:baseline; gap:.5em; line-height:1; flex:none}
.logo .mark{font-family:'Cormorant Garamond',serif; font-weight:500; font-size:23px; letter-spacing:.16em; color:var(--brass-dk); padding-left:.16em}
.logo .sub{font-family:'Jost',var(--sans); font-size:8px; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--muted)}
.topbar-nav{display:flex; align-items:center; gap:18px}
.back{font-size:13.5px; color:var(--muted); display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
.back:hover{color:var(--brass-dk)}
.back .arr{transition:transform .2s} .back:hover .arr{transform:translateX(-3px)}
.pn{display:inline-flex; gap:6px}
.pn a{width:34px; height:34px; border:1px solid var(--line); border-radius:50%; display:grid; place-items:center; color:var(--muted); font-size:15px; transition:.18s}
.pn a:hover{border-color:var(--brass); color:var(--brass-dk)}

/* ---------- banner ---------- */
.banner{position:relative; height:clamp(108px,13vh,134px); overflow:hidden; background:#231e16}
.banner img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 56%}
.banner::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,10,7,.5),rgba(12,10,7,0) 66%)}
.banner .plate{position:absolute; left:var(--pad); top:50%; transform:translateY(-50%); z-index:2;
  background:rgba(18,15,10,.3); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.22); border-radius:7px; padding:11px 20px; color:#fff; max-width:min(560px,82%)}
.banner .plate .l{font-size:10.5px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.85)}
.banner .plate .t{font-family:var(--serif); font-size:clamp(1.05rem,1.9vw,1.45rem); margin-top:3px; line-height:1.1}

/* ---------- title block ---------- */
.titleblock{border-bottom:1px solid var(--line); padding:clamp(34px,5vw,64px) 0 clamp(30px,4vw,46px)}
.tb-top{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.titleblock h1{font-family:var(--display); font-weight:500; font-size:clamp(2.6rem,6vw,4.6rem); line-height:1; margin-top:16px; color:var(--ink)}
.titleblock h1 b{color:var(--brass-dk); font-weight:500}
.titleblock .summary{font-size:clamp(1.06rem,1.6vw,1.35rem); color:var(--ink-soft); line-height:1.55; margin-top:18px; max-width:680px; text-wrap:pretty}
.pill{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700; letter-spacing:.04em; padding:6px 13px; border-radius:100px; text-transform:uppercase}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:currentColor}
.pill.free{color:var(--st-free); background:var(--st-free-bg)}
.pill.res{color:var(--st-res); background:var(--st-res-bg)}
.pill.sold{color:var(--st-sold); background:var(--st-sold-bg)}

/* ---------- key facts ---------- */
.facts{border-bottom:1px solid var(--line); background:var(--paper-2)}
.facts .grid{display:grid; grid-template-columns:repeat(6,1fr)}
.fact{padding:clamp(22px,2.8vw,38px) clamp(14px,1.8vw,26px); border-right:1px solid var(--line)}
.fact:last-child{border-right:none}
.fact .v{font-family:var(--serif); font-size:clamp(1.5rem,2.4vw,2.15rem); color:var(--ink); line-height:1}
.fact .v small{font-size:.6em; color:var(--brass-dk)}
.fact.price{background:#fff}
.fact.price .v{color:var(--brass-dk)}
.fact.price.is-sold .v{color:var(--st-sold); text-decoration:line-through; opacity:.7}
.fact .k{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-top:11px}

/* ---------- sections ---------- */
.section{padding:clamp(50px,8vw,104px) 0}
.section.tight{padding:clamp(40px,5vw,68px) 0}
.shead{max-width:680px}
.shead .h2{margin-top:14px}
.shead p{color:var(--ink-soft); font-size:clamp(1.02rem,1.4vw,1.2rem); margin-top:16px; line-height:1.6; text-wrap:pretty}

/* ---------- plan + rozkład ---------- */
.layout-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(28px,4vw,64px); align-items:start; margin-top:44px}
.plancard{border:1px solid var(--line); background:var(--paper); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 2px rgba(40,35,25,.04),0 18px 50px -24px rgba(40,35,25,.2)}
.plancard .ph{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--line); background:var(--paper-2)}
.plancard .ph .t{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.plancard .ph .n{font-family:var(--serif); font-size:15px; color:var(--brass-dk); white-space:nowrap}
.planimg{position:relative; width:100%; border:0; font:inherit; padding:clamp(16px,3vw,38px); display:flex; align-items:center; justify-content:center; background:var(--paper-2); cursor:zoom-in}
.planimg img{width:100%; max-width:380px; height:auto}
.zoom-hint{position:absolute; right:16px; bottom:16px; background:rgba(20,17,12,.74); color:#fff; font-size:11.5px; letter-spacing:.04em; padding:6px 12px; border-radius:100px; display:inline-flex; align-items:center; gap:5px; opacity:0; transition:opacity .2s; pointer-events:none}
.planimg:hover .zoom-hint,.vview:hover .zoom-hint{opacity:1}
@media(hover:none){ .zoom-hint{opacity:.95} }
.plan-actions{display:flex; gap:6px 20px; flex-wrap:wrap; padding:12px 22px; border-top:1px solid var(--line); background:var(--paper)}
.pa-link{font-family:inherit; font-size:13.5px; font-weight:500; color:var(--brass-dk); background:none; border:0; cursor:pointer; padding:5px 0; display:inline-flex; align-items:center; gap:7px}
.pa-link:hover{color:var(--brass); text-decoration:underline; text-underline-offset:3px}

/* ---------- lightbox (powiększenie rzutu) ---------- */
.lightbox{position:fixed; inset:0; z-index:80; background:rgba(14,12,8,.93); display:flex; flex-direction:column}
.lightbox[hidden]{display:none}
.lb-close{position:absolute; top:12px; right:16px; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.35); color:#fff; font-size:27px; line-height:1; cursor:pointer; z-index:2; transition:.18s}
.lb-close:hover{background:#fff; color:#15130f}
.lb-stage{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; overflow:auto; padding:58px 14px 10px; -webkit-overflow-scrolling:touch}
.lb-stage img{max-width:96vw; max-height:82vh; width:auto; height:auto; object-fit:contain; border-radius:4px; background:#fff; box-shadow:0 14px 60px rgba(0,0,0,.55); cursor:zoom-in}
.lb-stage.zoomed{align-items:flex-start; justify-content:flex-start}
.lb-stage.zoomed img{max-width:none; max-height:none; cursor:zoom-out}
.lb-bar{display:flex; gap:10px 22px; align-items:center; justify-content:center; flex-wrap:wrap; padding:12px 16px calc(16px + env(safe-area-inset-bottom)); color:rgba(255,255,255,.82); font-size:13.5px}
.lb-bar a{color:var(--brass-lt); text-decoration:underline; text-underline-offset:3px; font-weight:600}
body.lb-open{overflow:hidden}

/* ---------- karta widoku: aranżacja 3D / rzut techniczny ---------- */
.viewsec{background:#f6f5f1}
.viewcard{border:1px solid var(--line); background:var(--paper); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 2px rgba(40,35,25,.04),0 18px 50px -24px rgba(40,35,25,.2)}
.viewcard .ph{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid var(--line); background:var(--paper-2)}
.viewcard .ph .t{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.viewcard .ph .n{font-family:var(--serif); font-size:15px; color:var(--brass-dk); white-space:nowrap}
.vtoggle{display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--line); background:var(--paper-2); flex-wrap:wrap}
.vt-label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600}
.vt-seg{position:relative; display:inline-flex; background:#fff; border:1px solid var(--line); border-radius:100px; padding:4px}
.vt-seg::before{content:""; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:100px;
  background:var(--brass); box-shadow:0 2px 8px -2px rgba(135,101,57,.5); z-index:0;
  transition:transform .34s cubic-bezier(.45,.05,.2,1)}
.vt-seg[data-active="plan"]::before{transform:translateX(100%)}
.vt-btn{flex:1 1 50%; position:relative; z-index:1; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--muted);
  background:none; border:0; border-radius:100px; padding:8px 18px; cursor:pointer; transition:color .25s ease; white-space:nowrap; text-align:center}
.vt-btn:hover{color:var(--ink)}
.vt-btn.on,.vt-btn.on:hover{color:#fff}
@media(prefers-reduced-motion:reduce){.vt-seg::before{transition:none}}
.vstage{position:relative; background:var(--paper-2); display:grid}
.vview{grid-area:1/1; position:absolute; inset:0; opacity:0; transform:scale(.992); pointer-events:none;
  transition:opacity .42s ease, transform .42s ease; width:100%; border:0; font:inherit;
  padding:clamp(18px,3vw,34px); background:var(--paper-2); cursor:zoom-in}
.vview.on{position:relative; opacity:1; transform:none; pointer-events:auto}
@media(prefers-reduced-motion:reduce){.vview{transition:none; transform:none}}
.vframe{display:flex; align-items:center; justify-content:center; border:1px solid rgba(168,129,74,.45); border-radius:3px; padding:clamp(12px,2.2vw,26px); background:var(--paper-2)}
.vview img{display:block; margin:0 auto; max-width:100%; max-height:60vh; width:auto; height:auto}
/* kafelek dopasowuje kształt do aktywnego widoku (3D=--va, rzut=--pa); rozmiar steruje JS z płynną animacją */
.vc-fixed .vstage{display:block; position:relative; width:100%; max-width:calc(540px * var(--va)); aspect-ratio:var(--va); margin-inline:auto; transition:width .34s ease, height .34s ease}
.vc-fixed .vview{position:absolute; inset:0; padding:0}
.vc-fixed .vview.on{position:absolute}
.vc-fixed .vframe{position:absolute; inset:clamp(12px,2vw,22px); display:block; width:auto; height:auto; aspect-ratio:auto; max-width:none; margin:0; padding:0; border-radius:3px; background:#fff}
.vc-fixed .vframe img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; padding:clamp(10px,1.8vw,20px); max-width:none; max-height:none; margin:0}
.vview .zoom-hint{right:18px; bottom:18px}
@media(prefers-reduced-motion:reduce){.vc-fixed .vstage{transition:none}}

/* prawa kolumna: numerowana, interaktywna lista pomieszczeń */
.ar-disc{font-size:12px; color:var(--faint); line-height:1.55; margin-top:18px}
@media(max-width:560px){
  .vview img{max-height:none}
  .vt-btn{padding:8px 14px; font-size:13px}
  .vtoggle{padding:12px 14px}
}
.compass{display:flex; align-items:center; gap:8px; padding:13px 22px; border-top:1px solid var(--line); font-size:12px; color:var(--muted)}
.compass .n{font-family:var(--serif); color:var(--brass-dk); font-size:14px}

.rozklad h3{font-family:var(--serif); font-weight:500; font-size:1.5rem; margin-bottom:6px}
.rozklad .sub{font-size:13.5px; color:var(--muted); margin-bottom:20px}
.rr{display:flex; align-items:baseline; gap:16px; padding:15px 2px; border-bottom:1px solid var(--line-soft)}
.rr:first-of-type{padding-top:4px}
.rr .rnum{flex:none; width:40px; font-family:var(--serif); font-size:.95rem; color:var(--brass); letter-spacing:.08em; line-height:1}
.rr .rn{flex:1; font-size:16px; color:var(--ink-soft); letter-spacing:.005em}
.rr .ra{margin-left:auto; font-family:var(--serif); font-size:1.12rem; color:var(--brass-dk); font-variant-numeric:tabular-nums; white-space:nowrap; letter-spacing:.01em}
.rr.sum{border-bottom:none; border-top:1.5px solid var(--ink); margin-top:10px; padding-top:20px}
.rr.sum .rn{font-family:var(--serif); font-size:1.22rem; color:var(--ink)}
.rr.sum .ra{font-size:1.4rem; color:var(--brass-dk)}
.expo{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:28px; border-radius:var(--radius); overflow:hidden}
.expo .e{background:var(--paper); padding:18px 20px}
.expo .e .k{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.expo .e .v{font-size:16px; margin-top:5px; color:var(--ink)}
.expo .e .v.green{color:var(--green-dk); font-weight:600}

/* ---------- noc ---------- */
.night{background:#15161d; color:#e8e6e0}
.night .eyebrow.gold{color:var(--brass-lt)}
.night .eyebrow.gold::before{background:var(--brass-lt)}
.night .h2{color:#f3f0e9}
.night .shead p{color:rgba(232,230,224,.82)}
.night-show{margin-top:40px}
.nframe{position:relative; border-radius:var(--radius); overflow:hidden}
.nframe img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.nframe.main{width:100%; aspect-ratio:16/9; min-height:300px}
.nframe .tag{position:absolute; left:0; bottom:0; z-index:2; background:rgba(0,0,0,.6); color:#ece5d6; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px}

/* ---------- standard ---------- */
.std-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:40px; border-radius:var(--radius); overflow:hidden}
.std{background:var(--paper); padding:30px 28px}
.std .n{font-family:var(--serif); font-size:13px; color:var(--brass); letter-spacing:.1em}
.std h4{font-size:16px; font-weight:700; margin:12px 0 12px}
.std ul{list-style:none}
.std li{font-size:14px; color:var(--ink-soft); padding:6px 0 6px 18px; position:relative; line-height:1.45}
.std li::before{content:""; position:absolute; left:0; top:12px; width:6px; height:6px; border:1px solid var(--brass); transform:rotate(45deg)}

/* ===== Atuty — karuzela coverflow 3D ===== */
#standard{background:var(--paper-2);overflow:hidden}
#standard .shead{text-align:center;max-width:760px;margin:0 auto clamp(36px,5vw,56px)}
#standard .eyebrow{justify-content:center}
#standard .eyebrow::after{content:"";width:28px;height:1px;background:var(--brass);opacity:.6}
#standard .h2{font-size:clamp(2.3rem,4.6vw,3.7rem);line-height:1.04;margin-top:18px}
#standard .std-sub{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--ink-soft);line-height:1.55;margin-top:22px;text-wrap:pretty}

#standard .cf{position:relative;margin-top:clamp(40px,5vw,64px);perspective:2000px}
#standard .cf-stage{position:relative;height:clamp(380px,42vw,520px);transform-style:preserve-3d}
#standard .slot{position:absolute;top:0;left:50%;width:clamp(360px,40vw,540px);height:100%;
  display:flex;flex-direction:column;align-items:center;
  transition:transform .65s cubic-bezier(.6,.05,.2,1),opacity .5s,filter .65s;will-change:transform}
#standard .card{position:relative;width:100%;flex:1;border-radius:7px;overflow:hidden;background:#2a2620;
  box-shadow:0 30px 60px -28px rgba(30,25,15,.55);cursor:pointer}
#standard .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s ease}
#standard .card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,16,10,.06) 30%,rgba(18,14,9,.62) 100%)}
#standard .card .num{position:absolute;top:20px;left:24px;z-index:2;font-family:var(--serif);
  font-size:1.7rem;color:var(--brass-lt);letter-spacing:.04em;text-shadow:0 2px 12px rgba(0,0,0,.4)}
#standard .cap{margin-top:22px;text-align:center;transition:.5s}
#standard .cap .ct{font-size:1.05rem;color:var(--muted);letter-spacing:.01em}

#standard .slot.center{transform:translateX(-50%) translateZ(80px) scale(1.02);z-index:5}
#standard .slot.right{transform:translateX(-2%) rotateY(-34deg) scale(.86);z-index:3;opacity:.92}
#standard .slot.left{transform:translateX(-98%) rotateY(34deg) scale(.86);z-index:3;opacity:.92}
#standard .slot.center .card{box-shadow:0 44px 80px -30px rgba(30,25,15,.62)}
#standard .slot.center .cap .ct{color:var(--brass-dk);font-weight:600;font-family:var(--serif);font-size:1.18rem}
#standard .slot:not(.center) .card:hover img{transform:scale(1.05)}

#standard .cf-nav{position:absolute;top:calc(50% - 46px);transform:translateY(-50%);z-index:20;
  width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;background:var(--brass);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px -8px rgba(135,101,57,.6);transition:.2s}
#standard .cf-nav:hover{background:var(--brass-dk);transform:translateY(-50%) scale(1.06)}
#standard .cf-nav:active{transform:translateY(-50%) scale(.96)}
#standard .cf-nav.prev{left:clamp(4px,4vw,60px)}
#standard .cf-nav.next{right:clamp(4px,4vw,60px)}
#standard .cf-nav svg{width:22px;height:22px}

#standard .cf-foot{max-width:760px;margin:clamp(36px,4vw,52px) auto 0;text-align:center}
#standard .checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 40px;max-width:600px;margin:0 auto;text-align:left;padding:0}
#standard .checklist li{list-style:none;display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--ink-soft);
  line-height:1.4;animation:stdItemIn .45s both}
#standard .checklist li:nth-child(2){animation-delay:.05s}
#standard .checklist li:nth-child(3){animation-delay:.1s}
#standard .checklist li:nth-child(4){animation-delay:.15s}
#standard .checklist .tick{flex:none;width:20px;height:20px;margin-top:1px;border-radius:50%;background:var(--green);
  display:flex;align-items:center;justify-content:center}
#standard .checklist .tick svg{width:11px;height:11px;display:block}
@keyframes stdItemIn{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}

#standard .cf-dots{display:flex;gap:9px;justify-content:center;margin-top:34px}
#standard .cf-dots button{width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;background:var(--line);transition:.25s}
#standard .cf-dots button.on{background:var(--brass);width:26px;border-radius:5px}
#standard .cta{display:inline-flex;align-items:center;gap:10px;margin-top:34px;font-family:inherit;font-size:15px;font-weight:600;
  padding:15px 30px;border-radius:40px;border:1px solid var(--brass);color:var(--brass-dk);background:transparent;cursor:pointer;
  transition:.2s;text-decoration:none}
#standard .cta:hover{background:var(--brass);color:#fff}
#standard .cta .ar{transition:transform .2s}
#standard .cta:hover .ar{transform:translateX(3px)}

@media(max-width:760px){
  #standard .slot.left,#standard .slot.right{opacity:0;pointer-events:none}
  #standard .slot.center{transform:translateX(-50%) scale(1)}
  #standard .checklist{grid-template-columns:1fr;max-width:340px}
  #standard .cf-nav{width:52px;height:52px}
  #standard .eyebrow::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  #standard .slot{transition:none}
  #standard .checklist li{animation:none}
  #standard .card img{transition:none}
}

/* ---------- CTA / cena ---------- */
.cta{background:var(--ink); color:#f0ebe1}
.cta .wrap{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(36px,6vw,90px); align-items:center; padding-block:clamp(50px,7vw,90px)}
.cta .eyebrow{color:var(--brass-lt)} .cta .eyebrow::before{background:var(--brass-lt)}
.cta h2{font-family:var(--serif); font-weight:500; font-size:clamp(2rem,3.6vw,3rem); line-height:1.05; margin-top:16px}
.cta h2 b{color:var(--brass-lt); font-weight:500}
.cta p{color:rgba(240,235,225,.78); margin-top:18px; max-width:440px}
.priceblock{border:1px solid rgba(255,255,255,.16); border-radius:var(--radius); padding:30px 32px; background:rgba(255,255,255,.03)}
.priceblock .pl{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass-lt)}
.priceblock .pv{font-family:var(--serif); font-size:clamp(2rem,3.4vw,2.8rem); color:#fff; line-height:1; margin-top:8px}
.priceblock .pv.sold{font-size:clamp(1.5rem,3vw,2rem); color:var(--st-sold)}
.priceblock .pm{font-size:13.5px; color:rgba(240,235,225,.6); margin-top:8px}
.priceblock .acts{display:flex; flex-direction:column; gap:12px; margin-top:24px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:inherit; font-size:15px; font-weight:600; padding:15px 22px; border-radius:var(--radius); border:1px solid transparent; transition:.2s; cursor:pointer; text-align:center}
.btn-brass{background:var(--brass); color:#fff} .btn-brass:hover{background:var(--brass-dk)}
.btn-line{border-color:rgba(255,255,255,.4); color:#f0ebe1} .btn-line:hover{background:#fff; color:var(--ink); border-color:#fff}
.btn .arr{transition:transform .2s} .btn:hover .arr{transform:translateX(3px)}
.contact-meta{margin-top:22px; font-size:14px; color:rgba(240,235,225,.7); line-height:1.8}
.contact-meta a{color:var(--brass-lt)}

/* ---------- formularz zapytania ---------- */
.askform{background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.askform .wrap{padding-block:clamp(40px,5vw,64px)}
.ask-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(26px,4vw,56px); align-items:start}
.ask-form{display:grid; gap:12px}
.ask-row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.ask-form label{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:5px}
.ask-form input,.ask-form textarea{width:100%; font-family:inherit; font-size:15.5px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; transition:border-color .15s}
.ask-form input:focus,.ask-form textarea:focus{outline:none; border-color:var(--brass)}
.ask-form textarea{min-height:96px; resize:vertical}
.ask-consent{display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--muted); line-height:1.5}
.ask-consent input{width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--brass)}
.ask-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.ask-form .btn-brass{width:100%; margin-top:4px}
.ask-flash{background:var(--st-free-bg); color:var(--st-free); border-radius:var(--radius); padding:13px 16px; font-size:14.5px; font-weight:600; margin-bottom:16px}

/* ---------- historia ceny (jawność cen) ---------- */
.pricehist h3{font-family:var(--serif); font-weight:500; font-size:1.35rem; margin-bottom:14px}
.ph-table{width:100%; border-collapse:collapse; font-size:14px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.ph-table th,.ph-table td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--line-soft)}
.ph-table th{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; background:var(--paper-2)}
.ph-table td{color:var(--ink-soft); font-variant-numeric:tabular-nums}
.ph-table tr:last-child td{border-bottom:none}
.ph-note{font-size:12px; color:var(--faint); margin-top:12px; line-height:1.5}

/* ---------- footer ---------- */
.foot{background:#16140f; color:rgba(240,235,225,.55); padding:34px 0 calc(34px + env(safe-area-inset-bottom)); font-size:12.5px}
.foot .frow{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
.foot a{color:var(--brass-lt)}
.disc{font-size:11px; color:var(--faint); line-height:1.55; margin-top:14px; max-width:880px}

/* ---------- sticky pasek mobilny (akcja) ---------- */
.mobilebar{position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  background:rgba(255,255,255,.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  align-items:center; gap:14px; box-shadow:0 -6px 24px -16px rgba(0,0,0,.4)}
.mobilebar .mb-price{line-height:1.1}
.mobilebar .mb-price .v{font-family:var(--serif); font-size:1.25rem; color:var(--brass-dk)}
.mobilebar .mb-price .k{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.mobilebar .mb-price .v.sold{color:var(--st-sold); font-size:1.05rem}
.mobilebar .btn-brass{margin-left:auto; padding:13px 20px}

/* ============================================================
   RESPONSYWNOŚĆ  (mobile-first dopieszczenie)
   ============================================================ */
@media(max-width:900px){
  .facts .grid{grid-template-columns:repeat(3,1fr)}
  .fact:nth-child(3){border-right:none}
  .fact:nth-child(-n+3){border-bottom:1px solid var(--line)}
  .layout-grid,.std-grid,.cta .wrap,.ask-grid{grid-template-columns:1fr}
  .nframe.main{aspect-ratio:4/3; min-height:230px}
  .expo{grid-template-columns:1fr 1fr}
  .planimg img{max-width:340px}
  .cta .wrap{gap:30px}
  .priceblock{order:-1}
}
@media(max-width:560px){
  body{font-size:16px}
  .facts .grid{grid-template-columns:repeat(2,1fr)}
  .fact{border-bottom:1px solid var(--line)}
  .fact:nth-child(2n){border-right:none}
  .fact:nth-child(odd){border-right:1px solid var(--line)}
  .expo{grid-template-columns:1fr}
  .ask-row{grid-template-columns:1fr}
  .titleblock h1{font-size:clamp(2.3rem,11vw,3rem)}
  .topbar-nav .pn{display:none}
  .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))} /* miejsce na mobilebar */
  .compass{font-size:11px}
}
/* pokaż sticky pasek tylko na małych ekranach */
@media(max-width:700px){
  .mobilebar{display:flex}
}
@media(hover:none){
  .btn{padding-block:16px} /* większe tap-targety na dotyku */
}