:root{
  --bg:#020202;
  --line:rgba(215,190,145,.30);
  --cream:#efe7d6;
  --gold:#d3b57a;
  --muted:#b7ad9d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#020202;color:#fff;font-family:Arial,sans-serif}
a{color:inherit;text-decoration:none}

.exact-home{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  background:#020202 url('../img/home-mockup.png') top center/100% auto no-repeat;
  overflow:hidden;
}
/* Invisible click zones - fixed, larger, no ugly hover box */
.hotspot{
  position:absolute;
  display:block;
  z-index:20;
  background:rgba(255,255,255,0);
  border:0!important;
  outline:0!important;
  cursor:pointer;
}
.hotspot:hover,
.hotspot:focus,
.hotspot:active{
  background:rgba(255,255,255,0)!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* Bigger click zones so mouse aligns better with the mockup */
.logo-link{left:1.7%;top:2.2%;width:18.5%;height:8.5%}

.nav-home{left:52.4%;top:3.5%;width:4.2%;height:5.5%}
.nav-services{left:58.0%;top:3.5%;width:6.4%;height:5.5%}
.nav-work{left:65.0%;top:3.5%;width:7.2%;height:5.5%}
.nav-about{left:73.4%;top:3.5%;width:6.2%;height:5.5%}
.nav-contact{left:81.7%;top:3.5%;width:7.2%;height:5.5%}
.nav-phone{left:88.6%;top:2.7%;width:9.6%;height:6.6%}

.hero-work{left:4.1%;top:56.0%;width:14.5%;height:6.8%}
.hero-whatsapp{left:18.7%;top:56.0%;width:14.0%;height:6.8%}

.side-call{right:0;top:20.5%;width:4.2%;height:24%}
.side-whatsapp{right:0;top:45.2%;width:4.2%;height:24%}

.card-kitchens{left:1.0%;top:67.2%;width:15.8%;height:29%}
.card-wardrobes{left:16.9%;top:67.2%;width:16.2%;height:29%}
.card-media{left:33.3%;top:67.2%;width:16.2%;height:29%}
.card-stairs{left:49.8%;top:67.2%;width:16.3%;height:29%}
.card-doors{left:66.4%;top:67.2%;width:14.5%;height:29%}
.card-commercial{left:80.9%;top:67.2%;width:18.0%;height:29%}

.after-section{
  padding:50px 6vw;
  background:linear-gradient(180deg,#020202,#070707);
  text-align:center;
  border-top:1px solid var(--line);
}
.after-section .kicker{
  color:var(--gold);
  letter-spacing:5px;
  font-weight:800;
  font-size:13px;
  margin-bottom:25px;
}
.after-section h2{
  font-family:Georgia,serif;
  font-size:clamp(42px,6vw,82px);
  line-height:1.05;
  font-weight:400;
  margin:0 auto 24px;
  max-width:1050px;
  color:var(--cream);
}
.after-section p{
  max-width:780px;
  margin:0 auto;
  color:var(--muted);
  line-height:1.8;
  font-size:18px;
}
.after-actions{margin-top:34px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.real-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:54px;padding:0 30px;border:1px solid var(--line);
  text-transform:uppercase;letter-spacing:1.7px;font-weight:900;font-size:12px;
}
.real-btn.primary{background:linear-gradient(135deg,var(--cream),var(--gold));color:#050505}

.footer{
  padding:30px;
  background:#000;
  border-top:1px solid rgba(211,181,122,.25);
  text-align:center;
  color:#d3b57a;
  font-size:14px;
  letter-spacing:4px;
  text-transform:uppercase;
}
.footer h3{
  margin:0 0 12px;
  color:var(--cream);
  font-family:Georgia,serif;
  letter-spacing:4px;
  font-size:20px;
  font-weight:400;
}

.footer p{
  margin:7px 0;
  line-height:1.6;
}

.footer a{
  color:#d3b57a;
  text-decoration:none;
}

.footer a:hover{
  color:#efe7d6;
}
.whatsapp-float{
  position:fixed;right:20px;bottom:20px;z-index:70;background:#211d17;color:#fff;
  padding:15px 20px;font-size:12px;letter-spacing:1.4px;font-weight:900;text-transform:uppercase;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}

.page{min-height:100vh;background:#050505;padding:150px 5vw 80px}
.page h1{font-family:Georgia,serif;font-size:64px;margin:0 0 20px;color:var(--cream)}
.page p{color:#bdb4a5;line-height:1.8}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.gallery a{height:240px;border:1px solid var(--line);background:#101010;position:relative;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery a.empty:after{
  content:'Upload photo here';position:absolute;inset:0;display:grid;place-items:center;
  color:var(--gold);text-transform:uppercase;letter-spacing:1px;font-size:12px
}
.back{position:fixed;top:20px;left:20px;border:1px solid var(--line);padding:14px 18px;background:#050505;z-index:20}

.mobile-home{display:none;min-height:100vh;padding:120px 24px 40px;background:#050505}
.mobile-home h1{font-family:Georgia,serif;font-size:42px;line-height:1.08}
.mobile-home p{color:#d8d0c0;line-height:1.7}
.mobile-actions a{display:block;margin:14px 0;padding:16px;border:1px solid var(--line);text-transform:uppercase;letter-spacing:1px}
.mobile-grid{display:grid;gap:12px;margin-top:35px}
.mobile-grid a{min-height:120px;border:1px solid var(--line);padding:20px;display:flex;align-items:end;font-family:Georgia,serif;font-size:24px}

@media(max-width:900px){
  .exact-home{background:none;aspect-ratio:auto;min-height:100vh}
  .hotspot{display:none}
  .mobile-home{display:block}
  .gallery{grid-template-columns:1fr}
  .page h1{font-size:42px}
  .footer{display:block}
}