/* Podstrony – Łukasz Hołda, doradca ds. nieruchomości.
   Ten sam system wizualny co strona główna (granat, len, Gloock / Manrope / IBM Plex Mono), bez animacji. */
:root{
  --bg:#1d2d3e; --bg-2:#22364a; --deep:#16222f;
  --cream:#ebdfca; --soft:#cdbb9f; --muted:#a99d88; --line:rgba(235,223,202,.16);
  --surface:rgba(235,223,202,.05); --surface-2:rgba(235,223,202,.09); --linen:#d9c8ad;
  --paper:#f3eee6; --ink:#1d2d3e; --ink-soft:#4f5b66; --paper-line:#ddd4c4;
  --f-display:"Gloock","Times New Roman",Georgia,serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:max(18px, env(safe-area-inset-left,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--cream); font:16px/1.65 var(--f-body); -webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display); font-weight:400; line-height:1.08; margin:0; text-wrap:balance}
p{margin:0}
.wrap{max-width:1120px; margin:0 auto; padding:0 var(--gut)}
.narrow{max-width:760px}
.eyebrow{font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft)}
.skip{position:absolute; left:-999px; top:8px; background:var(--cream); color:var(--deep); padding:8px 12px; border-radius:6px; z-index:99}
.skip:focus{left:8px}

/* górny pasek */
.bar{position:sticky; top:0; z-index:40; background:rgba(22,34,47,.94); border-bottom:1px solid var(--line); -webkit-backdrop-filter:saturate(1.2); }
.bar .wrap{display:flex; align-items:center; gap:14px; min-height:64px}
.brand{font-family:var(--f-display); font-size:21px; text-decoration:none; color:var(--cream); line-height:1.1}
.brand small{display:block; font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.bar .tel{margin-left:auto; display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; font-size:14.5px; color:var(--deep); background:var(--linen); border-radius:999px; padding:10px 16px; white-space:nowrap}
.bar .tel:hover{background:#e7d9c1}

/* menu (trzy paski) – wspólne ze stroną główną */
.menu{position:relative}
.menu-btn{width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--deep); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; cursor:pointer; padding:0}
.menu-btn span{display:block; width:18px; height:1.6px; background:var(--cream); border-radius:2px}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}
.menu-list{position:absolute; top:54px; left:0; width:min(330px, calc(100vw - 28px)); max-height:calc(100vh - 90px); overflow:auto; display:flex; flex-direction:column; padding:8px; border-radius:14px; border:1px solid var(--line); background:#17242f; box-shadow:0 18px 40px -12px rgba(0,0,0,.55)}
.menu-list[hidden]{display:none}
.menu-list > a, .menu-list summary{font-family:var(--f-display); font-size:20px; color:var(--cream); text-decoration:none; padding:9px 14px; border-radius:9px; cursor:pointer; list-style:none; display:block}
.menu-list summary::-webkit-details-marker{display:none}
.menu-list summary::after{content:"+"; float:right; font-family:var(--f-body); color:var(--muted)}
.menu-list details[open] summary::after{content:"–"}
.menu-list > a:hover, .menu-list summary:hover, .menu-list a:focus-visible{background:var(--surface-2); outline:none}
.menu-sub{display:flex; flex-direction:column; padding:2px 0 8px 14px; border-left:1px solid var(--line); margin-left:14px}
.menu-sub a{font-size:15px; color:var(--soft); text-decoration:none; padding:6px 10px; border-radius:7px}
.menu-sub a:hover{background:var(--surface-2); color:var(--cream)}
.menu-list .menu-tel{font-family:var(--f-body); font-size:14.5px; font-weight:600; margin-top:6px; border-top:1px solid var(--line); border-radius:0 0 9px 9px; padding-top:14px; color:var(--soft)}
.menu-list [aria-current="page"]{color:var(--cream); background:var(--surface)}

/* ścieżka */
.crumbs{font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--muted); padding-top:26px}
.crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
.crumbs li+li::before{content:"›"; margin-right:6px; color:var(--muted)}
.crumbs a{text-decoration:none; color:var(--soft)}
.crumbs a:hover{color:var(--cream)}

/* nagłówek strony */
.hero{padding:30px 0 56px; border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(36px, 6vw, 70px); margin:14px 0 22px; max-width:17ch}
.hero .intro{display:flex; flex-direction:column; gap:14px; max-width:68ch; font-size:clamp(17px, 1.6vw, 19.5px); line-height:1.6; color:var(--cream)}
.hero .intro p+p{color:var(--soft)}
.actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.btn{display:inline-flex; align-items:center; gap:8px; font:600 15px var(--f-body); text-decoration:none; border-radius:999px; padding:13px 20px; border:1px solid var(--line); color:var(--cream)}
.btn.primary{background:var(--linen); color:var(--deep); border-color:var(--linen)}
.btn.primary:hover{background:#e7d9c1}
.btn:hover{border-color:var(--cream)}

/* treść */
main section{padding:56px 0}
main section + section{border-top:1px solid var(--line)}
.grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:clamp(28px, 5vw, 64px); align-items:start}
.content{display:flex; flex-direction:column; gap:40px}
.block h2{font-size:clamp(26px, 3vw, 36px); margin-bottom:14px}
.block p{color:var(--soft); font-size:16.5px}
.block p + p{margin-top:12px}
.block p strong, .block li strong{color:var(--cream); font-weight:600}
.block ul, .block ol{margin:12px 0 0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:10px; color:var(--soft)}
.block ul li{position:relative; padding-left:22px}
.block ul li::before{content:""; position:absolute; left:2px; top:.72em; width:8px; height:1px; background:var(--soft)}
.block ol{counter-reset:k}
.block ol li{counter-increment:k; position:relative; padding:14px 16px 14px 56px; border:1px solid var(--line); border-radius:8px; background:var(--surface)}
.block ol li::before{content:counter(k); position:absolute; left:16px; top:12px; font-family:var(--f-display); font-size:24px; color:var(--linen)}
.more{display:inline-block; margin-top:12px; font-weight:600; color:var(--cream); text-decoration:none; border-bottom:1px solid var(--soft)}
.more:hover{border-bottom-color:var(--cream)}

/* „W skrócie” */
.aside{position:sticky; top:84px; display:flex; flex-direction:column; gap:18px}
.card{border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:22px}
.card h2{font-size:24px; margin-bottom:12px}
.check{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; color:var(--soft); font-size:15.5px}
.check li{position:relative; padding-left:26px}
.check li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--linen); font-weight:700}
.card.contact p{color:var(--soft); font-size:15px}
.card.contact .tel-big{display:block; font-family:var(--f-display); font-size:28px; color:var(--cream); text-decoration:none; margin:10px 0 4px}
.card.contact .mail{color:var(--soft); font-size:15px}

/* dzielnice / miejscowości */
.areas{display:flex; flex-direction:column; gap:16px; margin-top:8px}
.areas .row{display:flex; flex-direction:column; gap:8px}
.areas .lbl{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.chips{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.chips a{display:inline-block; text-decoration:none; font-size:14.5px; color:var(--cream); padding:7px 13px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
.chips a:hover{border-color:var(--cream)}

/* pytania */
.faq{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.faq details{border:1px solid var(--line); border-radius:8px; padding:14px 18px; background:var(--surface)}
.faq summary{cursor:pointer; color:var(--cream); font-weight:600; font-size:16px; list-style:none; padding-right:24px; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:0; top:0; color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px; color:var(--soft)}
.faq-group + .faq-group{margin-top:36px}
.faq-group h2{font-size:clamp(24px, 2.6vw, 32px)}

/* opinie */
.reviews{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:22px}
.review{border:1px solid var(--line); border-radius:10px; padding:20px; background:var(--surface); display:flex; flex-direction:column; gap:12px}
.review .stars{color:var(--linen); letter-spacing:2px; font-size:14px}
.review blockquote{margin:0; font-family:var(--f-display); font-size:18px; line-height:1.4; color:var(--cream)}
.review .who{margin-top:auto; font-size:13.5px; color:var(--muted)}
.score{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.score .big{font-family:var(--f-display); font-size:56px; line-height:1}

/* oferty (jasna sekcja, jak na stronie głównej) */
.offers{background:var(--paper); color:var(--ink)}
.offers .eyebrow{color:#7a6a55}
.offers h2{color:var(--ink); font-size:clamp(28px, 3.4vw, 42px)}
.offer-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:22px}
.offer{display:flex; flex-direction:column; gap:6px; background:#fff; border:1px solid var(--paper-line); border-radius:8px; padding:18px; text-decoration:none; color:var(--ink)}
.offer:hover{border-color:var(--ink)}
.offer .tag{align-self:flex-start; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; background:var(--ink); color:var(--paper); padding:3px 8px; border-radius:4px}
.offer .tag.rent{background:#8a6b4a}
.offer .loc{font-size:13px; color:#66707a; margin-top:4px}
.offer h3{font-size:20px; line-height:1.2}
.offer .spec{font-size:13.5px; color:#66707a}
.offer .price{font-family:var(--f-display); font-size:22px; margin-top:8px; padding-top:10px; border-top:1px solid #e2d9ca}
.offers .more{color:var(--ink); border-bottom-color:var(--ink)}

/* zaproszenie */
.cta-box{border:1px solid var(--line); border-radius:14px; padding:clamp(24px, 4vw, 44px); background:linear-gradient(135deg, rgba(217,200,173,.10), rgba(217,200,173,.02))}
.cta-box h2{font-size:clamp(28px, 4vw, 46px); max-width:22ch}
.cta-box p{color:var(--soft); margin-top:14px; max-width:60ch; font-size:17px}

/* stopka z mapą stron */
footer{border-top:1px solid var(--line); padding:48px 0 40px; background:var(--deep); font-size:14.5px}
.foot-grid{display:grid; grid-template-columns:1.2fr 1fr 1.6fr 1fr; gap:28px}
.foot-grid h2{font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; font-weight:400}
.foot-grid ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px}
.foot-grid a{color:var(--soft); text-decoration:none}
.foot-grid a:hover{color:var(--cream)}
.foot-grid .cols2{display:grid; grid-template-columns:1fr 1fr; gap:6px 16px}
.nap p{color:var(--soft)}
.nap .nm{font-family:var(--f-display); font-size:22px; color:var(--cream); margin-bottom:6px}
.legal{margin-top:36px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px}

@media (max-width:900px){
  .grid{grid-template-columns:minmax(0,1fr)}
  .aside{position:static; order:-1}
  .reviews, .offer-grid{grid-template-columns:minmax(0,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .bar .tel span{display:none}
  .bar .tel{padding:10px 13px}
  .brand small{display:none}
  .foot-grid{grid-template-columns:minmax(0,1fr)}
  main section{padding:44px 0}
}

/* easter eggi: w pustym miejscu obok nagłówka (szeroki ekran) lub pod przyciskami (telefon) */
.hero .wrap{position:relative}
.egg{width:min(340px,100%); margin:30px 0 0 auto; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent}
@media (min-width:1100px){ .egg{position:absolute; right:var(--gut); top:110px; margin:0} .hero.has-egg .wrap{min-height:440px} .hero.has-egg .intro, .hero.has-egg h1{max-width:calc(100% - 400px)} }

/* easter egg pod opiniami: po prawej, w pustym miejscu */
main section.egg-bottom{padding:0 0 40px; border-top:0}
.egg-bottom .egg{position:static; margin:0 0 0 auto}
@media (min-width:1100px){ .egg-bottom .wrap{display:flex; justify-content:flex-end} .egg-bottom{margin-top:-60px} }