:root { --green:#203d32; --cream:#eee8dc; --sand:#b9a487; --line:rgba(32,61,50,.15); }
body { background:var(--cream); color:var(--green); }
header { height:12vh; min-height:40px; display:flex; align-items:center; gap:2.2vw; padding:0 4vw; background:#f4f0e7; border-bottom:1px solid var(--line); }
.brand { font:700 clamp(10px,1.7vw,26px) 'Manrope'; letter-spacing:-.06em; }
.brand span { color:#aa7756; }
.demo-nav { margin-left:auto; display:flex; gap:clamp(7px,1.8vw,29px); font-size:clamp(4.5px,.65vw,10px); }
.saved { display:flex; gap:.5vw; font-size:clamp(5px,.65vw,10px); }
.header-cta { padding:clamp(7px,1vw,14px) clamp(9px,1.4vw,21px); background:var(--green); color:#fff; font-size:clamp(5px,.65vw,10px); }
main { height:88vh; display:grid; grid-template-columns:57% 43%; }
.hero-photo { position:relative; background:linear-gradient(0deg,rgba(15,35,28,.25),transparent 48%),url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1700&q=88') center/cover; }
.hero-photo::after { content:'MIEJSCE, KTÓRE DOBRZE SIĘ ZACZYNA'; position:absolute; left:3vw; bottom:3vh; color:#fff; font-size:clamp(4px,.55vw,9px); letter-spacing:.18em; }
.photo-count { position:absolute; left:3vw; top:3vh; padding:clamp(6px,.8vw,12px); background:rgba(244,240,231,.88); font-size:clamp(4px,.55vw,9px); }
.photo-count span { display:inline-block; width:3vw; height:1px; margin:0 .6vw; vertical-align:middle; background:var(--green); }
.photo-tag { position:absolute; right:2vw; top:3vh; padding:clamp(5px,.7vw,10px) clamp(7px,1vw,15px); background:#a96d4c; color:#fff; font-size:clamp(3.5px,.48vw,8px); letter-spacing:.15em; }
.property { min-width:0; padding:clamp(13px,4.8vh,46px) 4vw 0; display:flex; flex-direction:column; }
.eyebrow { color:#9b765d; font-size:clamp(4px,.54vw,9px); letter-spacing:.17em; }
h1 { margin:clamp(8px,2.3vh,22px) 0 clamp(7px,1.6vh,16px); font:500 clamp(25px,4.2vw,63px)/.99 'Manrope'; letter-spacing:-.065em; }
h1 em { font-family:'Playfair Display',serif; color:#9d6749; }
.property>p { margin:0; max-width:90%; color:#617169; font-size:clamp(5.5px,.78vw,12px); line-height:1.6; }
.specs { display:grid; grid-template-columns:repeat(3,1fr); margin-top:clamp(9px,2.5vh,24px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.specs>div { padding:clamp(7px,1.3vw,19px) 0; border-right:1px solid var(--line); }
.specs>div:not(:first-child) { padding-left:1vw; }
.specs small,.price>span { display:block; font-size:clamp(3px,.44vw,7px); letter-spacing:.14em; color:#829087; }
.specs b { display:block; margin-top:.45vh; font:500 clamp(8px,1.2vw,18px) 'Manrope'; }
.price { display:flex; align-items:baseline; gap:1vw; margin-top:1.8vh; }
.price b { font:600 clamp(13px,2vw,31px) 'Manrope'; letter-spacing:-.04em; }
.actions { display:flex; align-items:center; justify-content:space-between; gap:1.5vw; margin-top:2vh; }
.demo-button { padding:clamp(7px,1.1vw,15px) clamp(9px,1.5vw,23px); font-size:clamp(5px,.68vw,10px); }
.primary { background:var(--green); color:#fff; }
.primary span { margin-left:1.2vw; }
.agent { display:flex; align-items:center; gap:.7vw; }
.agent>i { width:clamp(19px,2.7vw,41px); height:clamp(19px,2.7vw,41px); display:grid; place-items:center; border-radius:50%; background:#cbb49c; font:normal 600 clamp(5px,.6vw,9px) 'Manrope'; color:#fff; }
.agent span { display:flex; flex-direction:column; }
.agent small { font-size:clamp(3px,.4vw,6px); letter-spacing:.13em; color:#8c9993; }
.agent b { margin-top:.3vh; font:500 clamp(5px,.68vw,10px) 'Manrope'; }
.browse { margin-top:auto; height:10vh; min-height:30px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#75847d; font-size:clamp(4px,.55vw,9px); }
.browse b { color:var(--green); font-size:1.5em; letter-spacing:.4em; }

main { grid-template-columns:64% 36%; }
.hero-photo::after {
  top:15vh;
  bottom:auto;
  z-index:2;
  max-width:50%;
}
.gallery-dots { position:absolute; left:3vw; bottom:19vh; display:flex; gap:.45vw; }
.gallery-dots i { width:clamp(14px,2.2vw,33px); height:clamp(3px,.35vw,5px); background:rgba(255,255,255,.5); }
.gallery-dots i:first-child { background:#fff; }
.search-panel { position:absolute; z-index:3; left:3vw; right:3vw; bottom:3vh; padding:clamp(8px,1.4vw,21px); background:rgba(246,242,233,.95); box-shadow:0 1.5vw 4vw rgba(22,47,37,.2); }
.search-panel>small { display:block; margin-bottom:1vh; color:#8c715f; font-size:clamp(3px,.43vw,7px); letter-spacing:.16em; }
.search-panel>div { display:grid; grid-template-columns:1fr 1fr 1fr auto; align-items:stretch; border:1px solid var(--line); }
.search-panel span { display:flex; flex-direction:column; justify-content:center; padding:.8vh 1vw; border-right:1px solid var(--line); color:#51675e; font-size:clamp(4px,.54vw,9px); }
.search-panel span b { margin-bottom:.25vh; color:#929e98; font-size:.75em; font-weight:500; }
.search-panel button { padding:0 1.4vw; border:0; background:var(--green); color:#fff; font-size:clamp(4px,.55vw,9px); cursor:pointer; }
.property { padding:3.6vh 3vw 0; position:relative; }
.property-ref { position:absolute; right:3vw; top:3.8vh; color:#9b8a7a; font-size:clamp(3px,.42vw,7px); letter-spacing:.13em; }
h1 { font-size:clamp(23px,3.55vw,54px); }
.property-tags { display:flex; gap:.5vw; margin-top:1.4vh; }
.property-tags span { padding:.55vh .7vw; border:1px solid var(--line); color:#6b7e75; font-size:clamp(3px,.43vw,7px); }
.specs { margin-top:1.6vh; }
.actions { margin-top:1.5vh; }

/* Drobne dopracowanie kierunku premium — bez zmiany kompozycji i zdjęcia */
body { background:#ede7dc; }
header { min-height:0; }
.property { background:
  radial-gradient(circle at 1px 1px,rgba(32,61,50,.045) 1px,transparent 1.2px) 0 0/16px 16px,
  linear-gradient(90deg,rgba(255,255,255,.24),transparent 38%); }
.brand { letter-spacing:-.075em; }
.brand::after { content:'SELECTED HOMES'; display:inline-block; margin-left:.8vw; color:#948474; font:500 clamp(3px,.38vw,6px) 'DM Sans'; letter-spacing:.17em; vertical-align:middle; }
.hero-photo { box-shadow:inset -1px 0 rgba(255,255,255,.45); }
.photo-count { border:1px solid rgba(32,61,50,.12); backdrop-filter:blur(6px); }
.search-panel { border-top:2px solid #9d6749; box-shadow:0 1.5vw 4vw rgba(22,47,37,.17); }
.search-panel button { transition:background .2s ease; }
.search-panel button:hover { background:#315847; }
.property-tags span { background:rgba(255,255,255,.28); }
.specs { background:rgba(244,240,231,.42); }
.agent>i { box-shadow:0 0 0 4px rgba(203,180,156,.22); }
.primary { transition:transform .2s ease,background .2s ease; }
.primary:hover { background:#315847; }

@media (max-aspect-ratio:4/5) {
  html,body { height:auto; min-height:100%; overflow:auto; }
  header { height:68px; padding:0 20px; }
  .demo-nav,.saved span,.brand::after { display:none; }
  .saved { margin-left:auto; }
  main { height:auto; display:flex; flex-direction:column; }
  .hero-photo { min-height:62svh; }
  .search-panel>div { grid-template-columns:1fr 1fr; }
  .search-panel span:nth-child(3) { display:none; }
  .search-panel button { min-height:46px; }
  .property { min-height:72svh; padding:42px 24px 0; }
  .property-ref { right:24px; top:43px; }
  h1 { font-size:clamp(46px,13vw,68px); }
  .property>p { font-size:14px; }
}