*,*::before,*::after {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0
}
img {
  display:block;
  max-width:100%
}
a {
  color:inherit;
  text-decoration:none
}
button,input,textarea,select {
  font:inherit
}
button {
  cursor:pointer
}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid #f2ab56;
  outline-offset:3px
}
section[id] {
  scroll-margin-top:90px
}
.wrap {
  width:min(1200px,calc(100% - 48px));
  margin:auto
}
.demo {
  position:fixed;
  bottom:12px;
  left:12px;
  z-index:40;
  background:#101010d9;
  color:white;
  padding:7px 10px;
  border:1px solid #ffffff4a;
  border-radius:4px;
  font:600 10px/1.2 system-ui;
  letter-spacing:.08em
}
.menu {
  display:none;
  background:none;
  border:1px solid currentColor;
  padding:10px 13px;
  color:inherit
}
.links {
  display:flex;
  align-items:center;
  gap:28px
}
.links a {
  transition:opacity .2s
}
.links a:hover {
  opacity:.65
}
footer {
  padding:32px 0
}
footer .wrap {
  display:flex;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}
footer small {
  opacity:.65
}
@media(max-width:720px) {
  .wrap {
    width:min(100% - 32px,1200px)
  }
  .menu {
    display:block
  }
  .links {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--nav-bg,#171717);
    padding:24px;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
    z-index:20
  }
  .links.open {
    display:flex
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
body {
  background:#f6f6f2;
  color:#252c28;
  font:400 15px/1.7 'DM Sans',sans-serif;
  --nav-bg:#212c29
}
h1,h2,h3 {
  font-family:Outfit,sans-serif;
  letter-spacing:-.065em;
  font-weight:500
}
h1 i,h2 i {
  font-family:Georgia,serif;
  font-weight:400
}
.head {
  height:84px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
header {
  position:relative;
  background:#fafaf7;
  z-index:20
}
.logo {
  font:600 19px Outfit;
  letter-spacing:-.04em;
  display:flex;
  align-items:center;
  gap:9px
}
.logo b {
  font-weight:400
}
.mark {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  background:#1d2e29;
  color:#fff;
  font:600 21px Georgia
}
.mark span {
  color:#a8c3a4
}
.links {
  font-size:12px;
  font-weight:600
}
.contact-btn {
  background:#233a31;
  color:#fff;
  padding:12px 19px
}
.hero {
  min-height:625px;
  background:#273b33;
  color:#fff;
  position:relative;
  isolation:isolate
}
.hero-picture {
  position:absolute;
  inset:0;
  background:url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?auto=format&fit=crop&w=2000&q=85') center 48%/cover;
  z-index:-1
}
.hero-picture:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#13291fcf,#18291a85 45%,#ffffff00 100%)
}
.hero-layout {
  min-height:625px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.intro {
  max-width:610px;
  margin:70px 0
}
.tag {
  font-size:10px;
  letter-spacing:.2em;
  font-weight:700
}
.hero h1 {
  font-size:clamp(58px,8vw,112px);
  line-height:1.02;
  margin:27px 0
}
.hero h1 i {
  color:#cce0cc
}
.intro p {
  max-width:430px;
  line-height:1.9;
  color:#e2eae4
}
.text-btn {
  display:inline-flex;
  gap:30px;
  align-items:center;
  border-bottom:1px solid currentColor;
  padding:8px 0;
  font-weight:700;
  font-size:13px
}
.hero-index {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.2em;
  margin-top:auto;
  padding-bottom:31px
}
.finder {
  background:#fff;
  margin-top:-45px;
  position:relative;
  z-index:5;
  padding:28px 32px;
  box-shadow:0 12px 35px #1e302118
}
.finder-top {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.17em;
  margin-bottom:18px
}
.finder-top span {
  color:#7b897e
}
.finder-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr auto;
  gap:12px;
  align-items:end
}
.finder-grid label {
  font-weight:700;
  font-size:10px;
  letter-spacing:.1em;
  display:grid;
  gap:9px
}
.finder-grid select {
  border:1px solid #d6dcd6;
  background:#fff;
  padding:15px 13px;
  width:100%;
  color:#3d4942;
  min-width:0
}
.finder-grid button,.enquire button {
  padding:17px 26px;
  background:#243b30;
  color:#fff;
  border:0;
  font-weight:700;
  font-size:12px
}
.listings {
  padding:115px 0
}
.section-head {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:35px;
  margin-bottom:50px
}
.section-head h2,.manifesto h2,.feature-copy h2,.enquire h2 {
  font-size:clamp(44px,5vw,70px);
  line-height:1.11;
  margin:15px 0
}
.section-head p {
  max-width:310px;
  color:#7b8680
}
.property-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:38px 25px
}
.property {
  background:white
}
.photo {
  height:350px;
  position:relative;
  overflow:hidden
}
.photo img {
  height:100%;
  width:100%;
  object-fit:cover;
  transition:transform .4s
}
.property:hover img {
  transform:scale(1.035)
}
.photo span {
  position:absolute;
  left:19px;
  top:19px;
  background:white;
  color:#283b30;
  padding:8px 12px;
  font-weight:700;
  font-size:9px;
  letter-spacing:.12em
}
.property-copy {
  padding:22px 25px
}
.loc {
  font-size:10px;
  letter-spacing:.16em;
  color:#829185;
  font-weight:700
}
.property h3 {
  font-size:30px;
  margin:10px 0 4px
}
.property p {
  margin:0;
  color:#8b9590;
  font-size:12px
}
.property p b {
  margin:0 8px
}
.price {
  border-top:1px solid #e7eae6;
  margin-top:20px;
  padding-top:15px;
  display:flex;
  justify-content:space-between;
  font-size:19px
}
.price span {
  font-size:21px
}
.disclaimer {
  color:#828b82;
  font-size:11px;
  margin-top:27px
}
.manifesto {
  background:#24382f;
  color:white;
  padding:110px 0
}
.manifesto .wrap {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:end
}
.manifesto h2 {
  font-size:clamp(50px,6.5vw,91px);
  margin-bottom:0
}
.manifesto i {
  color:#a4c0aa
}
.manifesto p {
  color:#d4e1d6;
  line-height:2;
  max-width:440px
}
.approach-list {
  display:grid;
  margin-top:40px
}
.approach-list span {
  padding:13px 0;
  border-top:1px solid #ffffff55;
  font-size:10px;
  letter-spacing:.15em
}
.neighborhood {
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:570px
}
.feature-image img {
  height:100%;
  width:100%;
  object-fit:cover
}
.feature-copy {
  background:#e9ede5;
  padding:110px min(8vw,110px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start
}
.feature-copy p {
  max-width:350px;
  color:#78857b
}
.enquire {
  padding:110px 0;
  background:#fafaf8
}
.enquire-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px
}
.enquire p {
  color:#7e8a82
}
.enquire form {
  display:grid;
  gap:19px
}
.enquire form label {
  display:grid;
  gap:8px;
  font-weight:700;
  font-size:12px
}
.enquire input,.enquire textarea {
  width:100%;
  padding:15px;
  border:1px solid #d6dfd5;
  background:white
}
footer {
  background:#202b26;
  color:#eff7f0
}
footer strong {
  font:600 17px Outfit
}
@media(max-width:830px) {
  .finder-grid {
    grid-template-columns:1fr 1fr
  }
  .section-head {
    display:block
  }
  .manifesto .wrap,.enquire-grid {
    gap:35px
  }
  .neighborhood {
    min-height:430px
  }
  .feature-copy {
    padding:55px 30px
  }
}
@media(max-width:640px) {
  .hero,.hero-layout {
    min-height:615px
  }
  .finder {
    padding:22px 17px
  }
  .finder-grid {
    grid-template-columns:1fr
  }
  .property-grid,.manifesto .wrap,.neighborhood,.enquire-grid {
    grid-template-columns:1fr
  }
  .listings,.manifesto,.enquire {
    padding:70px 0
  }
  .photo {
    height:280px
  }
  .feature-image img {
    height:300px
  }
  .finder-top {
    display:block
  }
  .finder-top span {
    display:block;
    margin-top:8px
  }
  .hero h1 {
    font-size:62px
  }
}