/* Basic reset */
*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{
  --bg:#0f172a;
  --text:#0b1220;
  --muted:#6b7280;
  --accent:#ff5a3c;
  --card:#ffffff;
  --chip:#f3f4f6;
  --border:#e5e7eb;
}
body{font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif; color:var(--text); background:#fff; line-height:1.55;}
img{max-width:100%; height:auto; display:block; border-radius:12px}

/* Layout */
.container{width:min(1100px, 92vw); margin-inline:auto}
.section{padding:56px 0}
h1,h2{letter-spacing:-0.02em; margin:0 0 12px}
h1{font-size: clamp(28px, 4vw, 42px);}
h2{font-size: clamp(22px, 3vw, 32px);}
h3{margin:0 0 8px;font-size:20px}
p{margin:0 0 12px}
.small{font-size:0.9rem}
.muted{color:var(--muted)}

/* Header */
.site-header{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.8); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none; color:inherit; font-weight:700}
.brand svg{width:26px; height:26px; fill:var(--accent)}
.quick-actions{display:flex; gap:20px; align-items:center}
.quick-actions a{color:inherit; text-decoration:none}
.quick-actions .cta{background:var(--accent); color:#fff; padding:10px 14px; border-radius:999px; font-weight:600}

/* Hero */
.hero{position:relative; display:grid}
.hero>img{grid-area:1/1; width:100%; height:56vh; object-fit:cover; border-radius:0}

/* Card that sits on top of the hero image */
.hero-card{grid-area:1/1; display:flex; align-items:flex-end; padding:20px;}
.hero-card .badges{display:flex; gap:8px; list-style:none; padding:0; margin:10px 0 0}
.hero-card .badges li{background:var(--chip); padding:6px 10px; border-radius:999px; font-weight:600}
.hero-card .price-line{
  margin-top: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.price{font-size: clamp(22px, 4vw, 40px); color:#111}
.button{display:inline-block; background:var(--accent); color:#fff; padding:12px 16px; border-radius:12px; text-decoration:none; font-weight:700; margin-top:14px}

/* Details */
.specs{display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:18px}
.specs>div{background:var(--chip); padding:10px 12px; border-radius:10px}

/* Gallery */
.gallery{display:grid; grid-template-columns: repeat(12, 1fr); gap:14px}
.gallery a{grid-column: span 6}
.gallery a:nth-child(1){grid-column: span 12}
@media (max-width: 720px){
  .gallery a{grid-column:span 12}
}

/* Map */
.map-wrap{border:1px solid var(--border); border-radius:12px; overflow:hidden; height:350px}
.map-wrap iframe{border:0; width:100%; height:100%}

/* Contact form */
form{margin-top:8px}
.form-grid{display:grid; grid-template-columns: repeat(2,1fr); gap:14px}
.form-grid .span-2{grid-column: span 2}
label{display:flex; flex-direction:column; gap:6px; font-weight:600}
input,textarea{padding:12px 14px; border-radius:10px; border:1px solid var(--border); font:inherit}
input:focus, textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.form-status{margin-top:10px}
.visually-hidden{position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap}
.site-footer{border-top:1px solid var(--border); padding:24px 0; margin-top:40px}


/* =========================================================================
   HERO READABILITY + CLEANER BADGES
   (gentle changes that won't break layout)
   ========================================================================= */
.hero { position: relative; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 20%, rgba(0,0,0,.50) 100%);
  z-index: 0;
}
.hero-card {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
  max-width: 900px;
  padding: 20px;
  border-radius: 14px;
  background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.25));
  backdrop-filter: blur(2px);
}

/* Cleaner, subtler chips */
.hero-card .badges { gap: 10px; }
.hero-card .badges li{
  background: rgba(17,24,39,.55); /* slate-900 @ 55% */
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  padding:8px 12px;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
/* Hide any accidentally empty badge that can render as a tiny circle */
.hero-card .badges li:empty { display:none !important; }

/* Price stack + right-aligned CTA on wide screens */
.price-wrap { margin-top: 10px; }
.price-wrap .price {
  display: block;
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}
.price-wrap .sub {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  opacity: .98;
  color: #fff;
}

/* Keep the CTA neatly aligned with the price line */
.hero-card .price-line{ gap:16px; }
.hero-card .price-line .button{
  margin-left:auto;
  margin-top:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* If there's any empty inline node inside price-line (sometimes causes a stray dot), hide it */
.hero-card .price-line > *:empty{ display:none !important; }

/* Mobile: let the button drop below neatly */
@media (max-width: 700px){
  .hero>img{ height: 52vh; }
  .hero-card .price-line .button{ flex: 1 1 100%; margin-left:0; }
}

/* Tweak heading in hero for stronger hierarchy */
.hero-card h1, .hero-card h2 {
  color:#fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}