:root {
  --white: #FFFFFF;
  --graphite: #283238;
  --turquoise: #247E7C;
  --deep: #07505B;
  --soft: #F5F9F8;
  --muted: #68767A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--white);
  color: var(--graphite);
}

a { color: var(--deep); text-decoration: none; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 7%;
  border-bottom: 1px solid #E0E8E7;
  gap: 20px;
}

.logo {
  font-family: Georgia, serif;
  font-size: 30px;
  color: var(--graphite);
}

.logo span { color: var(--turquoise); }

.logo small {
  display: block;
  text-align: center;
  letter-spacing: 5px;
  font: 11px Arial;
}

nav { display: flex; gap: 25px; flex-wrap: wrap; }

nav a {
  font-family: Georgia, serif;
  color: var(--graphite);
}

h1, h2, h3 {
  font-family: Georgia, serif;
  font-weight: normal;
  line-height: 1.18;
}

h1 { font-size: clamp(35px, 5vw, 65px); }
h2 { font-size: clamp(28px, 3.5vw, 42px); }
h3 { font-size: 24px; }

p { line-height: 1.75; }

.accent { color: var(--turquoise); }

.hero {
  display: grid;
  grid-template-columns: 52% 48%;
  align-items: center;
  min-height: 490px;
}

.hero-content { padding: 65px 5% 65px 13%; }

.hero-image {
  min-height: 420px;
  height: 100%;
  background:
    linear-gradient(90deg, white, transparent 42%),
    linear-gradient(160deg, #E4EEED, #C1D1CA, #839E99);
  position: relative;
  overflow: hidden;
}

.hero-image::before {
  content: "";
  position: absolute;
  right: 8%;
  top: 7%;
  width: 56%;
  height: 83%;
  background: linear-gradient(110deg,
    #E6DED2 0 17%, #52767B 18% 23%,
    #B5CFD0 24% 72%, #DED5C8 73%);
  clip-path: polygon(22% 0,100% 0,100% 100%,0 100%,0 16%);
}

.hero-image::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 95%;
  height: 20%;
  background: #ADBEB8;
  clip-path: polygon(0 50%,100% 0,100% 100%,0 100%);
}

.btn {
  display: inline-block;
  background: var(--deep);
  color: white;
  border: 0;
  border-radius: 30px;
  padding: 14px 27px;
  cursor: pointer;
}

.btn:hover { background: #04363D; }

.section { padding: 70px 8%; }

.soft { background: var(--soft); }

.cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 28px;
}

.card {
  border: 1px solid #DEE8E6;
  background: white;
  border-radius: 12px;
  padding: 27px;
}

.card p { color: var(--muted); }

.banner {
  padding: 70px 9%;
  background: linear-gradient(115deg, #EDF6F5, white 80%);
}

.banner h1, .banner p { max-width: 790px; }

.property-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
}

input, select, textarea {
  width: 100%;
  padding: 13px;
  border: 1px solid #CBD9D7;
  border-radius: 7px;
  font: inherit;
}

textarea { min-height: 130px; }

label {
  display: block;
  margin: 16px 0 8px;
  font-weight: bold;
}

fieldset {
  border: 1px solid #DEE8E6;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
}

fieldset label { font-weight: normal; }

fieldset input { width: auto; }

.form-wrap { max-width: 720px; }

.notice {
  background: #EDF6F5;
  border-left: 3px solid var(--turquoise);
  padding: 16px;
  margin: 20px 0;
}

footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 30px 8%;
  background: var(--deep);
  color: white;
}

footer a { color: white; }

@media(max-width:750px) {
  header { flex-direction: column; align-items: flex-start; }
  .hero { display: flex; flex-direction: column-reverse; }
  .hero-image { min-height: 230px; width: 100%; }
  .hero-content { padding: 38px 7%; }
  .section, .banner { padding: 45px 7%; }
  .cards { grid-template-columns: 1fr; }
}
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-weight: bold;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
  transition: transform .2s ease, background .2s ease;
}

.whatsapp-float:hover {
  background: #1ebe5d;
  color: #fff;
  transform: translateY(-2px);
}

.whatsapp-float span:first-child {
  font-size: 22px;
  line-height: 1;
}

@media (max-width: 600px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    width: 54px;
    height: 54px;
    justify-content: center;
    padding: 0;
  }

  .whatsapp-label {
    display: none;
  }
}