/* =========================================
   ATLAS PROPERTIES
   Concept Website by Arovique Digital
   ========================================= */


/* =========================================
   RESET
   ========================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  font-family:
    "DM Sans",
    Arial,
    sans-serif;

  color: #1a211d;
  background: #f4f1ea;

  overflow-x: hidden;
}


body.modal-open {
  overflow: hidden;
}


a {
  color: inherit;
  text-decoration: none;
}


button,
input,
select,
textarea {
  font: inherit;
}


button {
  cursor: pointer;
}


img {
  max-width: 100%;
  display: block;
}


/* =========================================
   VARIABLES
   ========================================= */

:root {

  --cream:
    #f4f1ea;

  --cream-light:
    #faf8f4;

  --cream-dark:
    #e7e1d7;

  --ink:
    #17201b;

  --green:
    #243a2d;

  --green-light:
    #405848;

  --gold:
    #a88554;

  --gold-light:
    #c0a273;

  --gray:
    #70786f;

  --line:
    #d9d3c8;

  --white:
    #ffffff;

}


/* =========================================
   DEMO BAR
   ========================================= */

.demo-bar {
  background:
    #111814;

  color:
    #aeb7b0;

  font-size:
    0.7rem;
}


.demo-bar-inner {
  max-width:
    1320px;

  margin:
    auto;

  padding:
    8px 28px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    20px;
}


.demo-bar strong {
  color:
    white;
}


.demo-bar a {
  color:
    #c8a978;

  font-weight:
    600;
}


/* =========================================
   HEADER
   ========================================= */

.site-header {
  position:
    sticky;

  top:
    0;

  z-index:
    100;

  background:
    rgba(244,241,234,0.94);

  border-bottom:
    1px solid
    rgba(42,54,46,0.11);

  backdrop-filter:
    blur(18px);
}


.nav-container {
  max-width:
    1320px;

  min-height:
    82px;

  margin:
    auto;

  padding:
    0 28px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;
}


.brand,
.footer-brand {
  color:
    var(--ink);

  font-size:
    1.45rem;

  font-weight:
    700;

  letter-spacing:
    0.14em;
}


.brand span,
.footer-brand span {
  color:
    var(--gold);
}


.nav {
  display:
    flex;

  align-items:
    center;

  gap:
    31px;
}


.nav > a {
  color:
    #4d5750;

  font-size:
    0.77rem;

  font-weight:
    600;

  transition:
    color 0.2s ease;
}


.nav > a:hover {
  color:
    var(--green);
}


.nav-button {
  padding:
    12px 18px;

  color:
    white !important;

  background:
    var(--green);
}


.nav-button:hover {
  background:
    var(--ink);
}


.menu-toggle {
  display:
    none;

  width:
    42px;

  height:
    42px;

  border:
    0;

  background:
    transparent;
}


.menu-toggle span {
  display:
    block;

  width:
    24px;

  height:
    1px;

  margin:
    7px auto;

  background:
    var(--ink);
}


/* =========================================
   SHARED
   ========================================= */

.section {
  padding:
    120px 28px;
}


.section-label {
  display:
    inline-block;

  margin-bottom:
    20px;

  color:
    var(--gold);

  font-size:
    0.67rem;

  font-weight:
    700;

  letter-spacing:
    0.2em;
}


h1,
h2,
h3 {
  font-family:
    "Manrope",
    sans-serif;

  font-weight:
    500;

  line-height:
    1.06;

  letter-spacing:
    -0.045em;
}


h2 {
  color:
    var(--ink);

  font-size:
    clamp(
      2.9rem,
      5vw,
      5.2rem
    );
}


h1 em,
h2 em {
  font-style:
    normal;

  color:
    var(--gold);
}


/* =========================================
   HERO
   ========================================= */

.hero {
  position:
    relative;

  min-height:
    770px;

  display:
    flex;

  align-items:
    center;

  overflow:
    hidden;
}


.hero-image {
  position:
    absolute;

  inset:
    0;

  background:
    url("https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=2000&q=88")
    center / cover
    no-repeat;

  transform:
    scale(1.02);
}


.hero-overlay {
  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      90deg,
      rgba(15,21,17,0.86) 0%,
      rgba(15,21,17,0.56) 45%,
      rgba(15,21,17,0.12) 80%
    );
}


.hero-content {
  position:
    relative;

  z-index:
    2;

  width:
    100%;

  max-width:
    1320px;

  margin:
    auto;

  padding:
    60px 28px 130px;
}


.hero-label {
  display:
    inline-block;

  margin-bottom:
    22px;

  color:
    #c9ac7d;

  font-size:
    0.66rem;

  font-weight:
    600;

  letter-spacing:
    0.23em;
}


.hero h1 {
  max-width:
    870px;

  color:
    white;

  font-size:
    clamp(
      4.2rem,
      8.5vw,
      8.5rem
    );
}


.hero h1 em {
  display:
    block;

  color:
    #d3b98d;
}


.hero-content > p {
  max-width:
    530px;

  margin-top:
    28px;

  color:
    #d1d4d1;

  font-size:
    0.98rem;

  line-height:
    1.85;
}


.hero-button {
  margin-top:
    35px;

  padding-bottom:
    9px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    30px;

  border-bottom:
    1px solid
    rgba(255,255,255,0.55);

  color:
    white;

  font-size:
    0.82rem;

  font-weight:
    600;
}


.hero-button span {
  color:
    #d4b582;
}


.hero-property {
  position:
    absolute;

  z-index:
    3;

  left:
    50%;

  bottom:
    0;

  width:
    min(
      calc(100% - 56px),
      1320px
    );

  transform:
    translateX(-50%);

  display:
    grid;

  grid-template-columns:
    1.5fr 1fr 0.7fr;

  background:
    rgba(244,241,234,0.98);

  backdrop-filter:
    blur(12px);

  box-shadow:
    0 -8px 35px
    rgba(17, 26, 20, 0.06);
}


.hero-property div {
  min-height:
    88px;

  padding:
    20px 24px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  border-right:
    1px solid
    var(--line);
}


.hero-property div:last-child {
  border-right:
    0;
}


.hero-property span {
  margin-bottom:
    5px;

  color:
    #8d867a;

  font-size:
    0.55rem;

  letter-spacing:
    0.17em;
}


.hero-property strong {
  color:
    var(--ink);

  font-size:
    0.81rem;

  font-weight:
    600;
}


/* =========================================
   PROPERTY SEARCH
   ========================================= */

.property-search-section {
  position:
    relative;

  z-index:
    4;

  padding:
    36px 28px 0;

  background:
    #f4f1ea;
}


.property-search {
  position:
    relative;

  max-width:
    1200px;

  margin:
    0 auto;

  padding:
    24px;

  display:
    grid;

  grid-template-columns:
    1.15fr 1fr 1fr 1fr auto;

  align-items:
    end;

  gap:
    12px;

  background:
    white;

  border:
    1px solid
    #dfd9cf;

  box-shadow:
    0 25px 60px
    rgba(32,42,35,0.09);
}


.search-heading {
  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-height:
    61px;
}


.search-heading span {
  color:
    var(--gold);

  font-size:
    0.56rem;

  letter-spacing:
    0.17em;
}


.search-heading strong {
  margin-top:
    5px;

  color:
    var(--ink);

  font-size:
    0.85rem;

  font-weight:
    600;
}


.property-search label {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  color:
    #77776f;

  font-size:
    0.62rem;

  font-weight:
    600;
}


.property-search select {
  height:
    46px;

  padding:
    0 12px;

  border:
    1px solid
    #ddd8cf;

  outline:
    none;

  color:
    var(--ink);

  background:
    #faf9f6;

  font-size:
    0.76rem;
}


.search-button {
  height:
    46px;

  padding:
    0 25px;

  border:
    0;

  color:
    white;

  background:
    var(--green);

  font-size:
    0.73rem;

  font-weight:
    600;
}


/* =========================================
   INTRODUCTION
   ========================================= */

.introduction {
  background:
    var(--cream);
}


.intro-grid {
  max-width:
    1260px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    1fr 0.85fr;

  gap:
    130px;
}


.intro-content {
  padding-top:
    62px;
}


.intro-content p {
  margin-bottom:
    20px;

  color:
    var(--gray);

  line-height:
    1.9;
}


/* =========================================
   PROPERTIES
   ========================================= */

.properties-section {
  background:
    var(--cream-light);
}


.section-heading {
  max-width:
    1260px;

  margin:
    0 auto 55px;

  display:
    flex;

  justify-content:
    space-between;

  align-items:
    end;

  gap:
    60px;
}


.section-heading > p {
  max-width:
    420px;

  color:
    var(--gray);

  line-height:
    1.8;
}


.property-grid {
  max-width:
    1260px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:
    45px 22px;
}


.property-card {
  background:
    transparent;

  transition:
    transform 0.25s ease;
}


.property-card:hover {
  transform:
    translateY(-5px);
}


.property-card.filter-hidden {
  display:
    none;
}


/* IMAGE IS NOW CLICKABLE */

.property-image {
  position:
    relative;

  height:
    430px;

  overflow:
    hidden;

  background-position:
    center;

  background-size:
    cover;

  cursor:
    pointer;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}


.property-image:hover {
  filter:
    brightness(0.94);
}


.property-image:focus-visible {
  outline:
    3px solid
    var(--gold);

  outline-offset:
    4px;
}


.property-one {
  background-image:
    url("https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1400&q=85");
}


.property-two {
  background-image:
    url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1400&q=85");
}


.property-three {
  background-image:
    url("https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1400&q=85");
}


.property-four {
  background-image:
    url("https://images.unsplash.com/photo-1600047509807-ba8f99d2cdde?auto=format&fit=crop&w=1400&q=85");
}


.property-status {
  position:
    absolute;

  left:
    18px;

  top:
    18px;

  padding:
    8px 11px;

  color:
    white;

  background:
    rgba(27,39,32,0.86);

  font-size:
    0.58rem;

  font-weight:
    600;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;

  pointer-events:
    none;
}


.favorite-button {
  position:
    absolute;

  z-index:
    4;

  right:
    18px;

  top:
    18px;

  width:
    39px;

  height:
    39px;

  display:
    grid;

  place-items:
    center;

  border:
    0;

  border-radius:
    50%;

  color:
    var(--ink);

  background:
    rgba(255,255,255,0.88);

  font-size:
    1.1rem;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}


.favorite-button:hover {
  transform:
    scale(1.07);
}


.favorite-button.saved {
  color:
    white;

  background:
    var(--green);
}


.property-content {
  padding:
    24px 4px 0;
}


.property-location {
  margin-bottom:
    9px;

  color:
    var(--gold);

  font-size:
    0.59rem;

  font-weight:
    700;

  letter-spacing:
    0.16em;
}


.property-card h3 {
  color:
    var(--ink);

  font-size:
    1.65rem;
}


.property-specs {
  margin-top:
    16px;

  display:
    flex;

  gap:
    24px;

  color:
    var(--gray);

  font-size:
    0.72rem;
}


.property-bottom {
  margin-top:
    24px;

  padding-top:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  border-top:
    1px solid
    var(--line);
}


.property-bottom strong {
  color:
    var(--ink);

  font-size:
    0.86rem;

  font-weight:
    600;
}


.view-property {
  border:
    0;

  background:
    transparent;

  color:
    var(--green);

  font-size:
    0.72rem;

  font-weight:
    600;
}


.demo-note {
  max-width:
    1260px;

  margin:
    45px auto 0;

  color:
    #98958d;

  font-size:
    0.67rem;

  text-align:
    center;
}


.no-results {
  display:
    none;

  max-width:
    1260px;

  margin:
    50px auto;

  padding:
    50px;

  border:
    1px solid
    var(--line);

  color:
    var(--gray);

  text-align:
    center;

  background:
    white;
}


/* =========================================
   BUY
   ========================================= */

.buy-section {
  min-height:
    820px;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  background:
    #1d2d24;
}


.buy-image {
  min-height:
    700px;

  background:
    url("https://images.unsplash.com/photo-1600607688969-a5bfcd646154?auto=format&fit=crop&w=1400&q=85")
    center / cover
    no-repeat;
}


.buy-content {
  padding:
    95px;

  display:
    flex;

  justify-content:
    center;

  flex-direction:
    column;
}


.buy-content h2 {
  color:
    white;
}


.buy-content > p {
  max-width:
    530px;

  margin-top:
    26px;

  color:
    #a9b2ac;

  line-height:
    1.85;
}


.process-list {
  margin:
    45px 0;
}


.process-list article {
  padding:
    20px 0;

  display:
    grid;

  grid-template-columns:
    45px 1fr;

  gap:
    20px;

  border-top:
    1px solid
    rgba(255,255,255,0.1);
}


.process-list article > span {
  color:
    #c6a877;

  font-size:
    0.63rem;
}


.process-list h3 {
  margin-bottom:
    7px;

  color:
    #f4f1ea;

  font-size:
    1rem;

  letter-spacing:
    -0.02em;
}


.process-list p {
  color:
    #909b94;

  font-size:
    0.74rem;

  line-height:
    1.6;
}


.dark-button {
  width:
    fit-content;

  padding:
    14px 20px;

  color:
    #18221c;

  background:
    #d1b687;

  font-size:
    0.72rem;

  font-weight:
    700;
}


/* =========================================
   SELL
   ========================================= */

.sell-section {
  background:
    var(--cream);
}


.sell-wrapper {
  max-width:
    1220px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    1fr 0.9fr;

  gap:
    100px;

  align-items:
    center;
}


.sell-copy > p {
  max-width:
    570px;

  margin-top:
    26px;

  color:
    var(--gray);

  line-height:
    1.85;
}


.sell-features {
  margin:
    35px 0;

  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    13px 25px;
}


.sell-features span {
  padding:
    12px 0;

  border-bottom:
    1px solid
    var(--line);

  color:
    #505b53;

  font-size:
    0.74rem;
}


.outline-button {
  display:
    inline-flex;

  padding:
    13px 18px;

  border:
    1px solid
    var(--green);

  color:
    var(--green);

  font-size:
    0.72rem;

  font-weight:
    600;
}


.sell-stat-card {
  min-height:
    520px;

  padding:
    55px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    space-between;

  background:
    var(--green);
}


.sell-stat-card > span {
  color:
    #c3a576;

  font-size:
    0.62rem;

  letter-spacing:
    0.18em;
}


.sell-stat-card h3 {
  max-width:
    420px;

  color:
    white;

  font-size:
    3rem;
}


.sell-stat-grid {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;
}


.sell-stat-grid div {
  padding:
    18px 0;

  display:
    flex;

  flex-direction:
    column;

  border-top:
    1px solid
    rgba(255,255,255,0.13);
}


.sell-stat-grid strong {
  color:
    #c6a877;

  font-size:
    0.63rem;
}


.sell-stat-grid span {
  margin-top:
    5px;

  color:
    #d6ddd8;

  font-size:
    0.72rem;
}


/* =========================================
   ABOUT / AGENTS
   ========================================= */

.about-section {
  background:
    var(--cream-light);
}


.team-grid {
  max-width:
    1260px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    18px;
}


.agent-card {
  background:
    white;
}


.agent-image {
  height:
    420px;

  background-position:
    center;

  background-size:
    cover;
}


.agent-one {
  background-image:
    url("https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=900&q=85");
}


.agent-two {
  background-image:
    url("https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=900&q=85");
}


.agent-three {
  background-image:
    url("https://images.unsplash.com/photo-1568602471122-7832951cc4c5?auto=format&fit=crop&w=900&q=85");
}


.agent-info {
  padding:
    25px;
}


.agent-info > span {
  color:
    var(--gold);

  font-size:
    0.57rem;

  font-weight:
    700;

  letter-spacing:
    0.16em;
}


.agent-info h3 {
  margin-top:
    8px;

  color:
    var(--ink);

  font-size:
    1.4rem;
}


.agent-info p {
  margin-top:
    6px;

  color:
    var(--gray);

  font-size:
    0.72rem;
}


.agent-info a {
  display:
    inline-block;

  margin-top:
    20px;

  color:
    var(--green);

  font-size:
    0.7rem;

  font-weight:
    600;
}


/* =========================================
   CTA
   ========================================= */

.cta-section {
  position:
    relative;

  padding:
    145px 28px;

  background:
    linear-gradient(
      rgba(20,31,25,0.65),
      rgba(20,31,25,0.68)
    ),
    url("https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?auto=format&fit=crop&w=1900&q=85")
    center / cover
    no-repeat;
}


.cta-content {
  max-width:
    900px;

  margin:
    auto;

  text-align:
    center;
}


.cta-content > span {
  display:
    block;

  margin-bottom:
    17px;

  color:
    #d1b687;

  font-size:
    0.63rem;

  letter-spacing:
    0.2em;
}


.cta-content h2 {
  color:
    white;
}


.cta-button {
  margin-top:
    30px;

  display:
    inline-flex;

  padding:
    14px 22px;

  color:
    #18221c;

  background:
    #d1b687;

  font-size:
    0.72rem;

  font-weight:
    700;
}


/* =========================================
   CONTACT
   ========================================= */

.contact-section {
  background:
    #f4f1ea;
}


.contact-grid {
  max-width:
    1180px;

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap:
    90px;
}


.contact-copy > p {
  max-width:
    500px;

  margin-top:
    25px;

  color:
    var(--gray);

  line-height:
    1.85;
}


.contact-info {
  margin-top:
    45px;

  display:
    grid;

  gap:
    20px;
}


.contact-info div {
  padding-top:
    16px;

  display:
    flex;

  flex-direction:
    column;

  border-top:
    1px solid
    var(--line);
}


.contact-info span {
  color:
    var(--gold);

  font-size:
    0.56rem;

  letter-spacing:
    0.17em;
}


.contact-info strong {
  margin-top:
    5px;

  color:
    var(--ink);

  font-size:
    0.79rem;
}


.contact-info small {
  margin-top:
    4px;

  color:
    #a19d94;

  font-size:
    0.61rem;
}


.contact-form {
  padding:
    37px;

  border:
    1px solid
    var(--line);

  background:
    white;
}


.form-row {
  display:
    grid;

  grid-template-columns:
    1fr 1fr;

  gap:
    12px;
}


.contact-form label {
  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  margin-bottom:
    15px;

  color:
    #5d655f;

  font-size:
    0.67rem;

  font-weight:
    600;
}


.contact-form input,
.contact-form select,
.contact-form textarea {
  width:
    100%;

  padding:
    13px 14px;

  border:
    1px solid
    #dcd7ce;

  outline:
    none;

  color:
    var(--ink);

  background:
    #faf9f6;
}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color:
    var(--green);
}


.contact-form textarea {
  resize:
    vertical;
}


.contact-submit {
  width:
    100%;

  padding:
    14px 20px;

  border:
    0;

  color:
    white;

  background:
    var(--green);

  font-size:
    0.72rem;

  font-weight:
    700;
}


.form-note {
  display:
    block;

  margin-top:
    12px;

  color:
    #98958d;

  font-size:
    0.62rem;

  text-align:
    center;
}


.form-success {
  display:
    none;

  margin-top:
    15px;

  padding:
    12px;

  color:
    #29533a;

  background:
    #e6f2e9;

  font-size:
    0.72rem;

  text-align:
    center;
}


/* =========================================
   FOOTER
   ========================================= */

.footer {
  padding:
    75px 28px 25px;

  color:
    white;

  background:
    #121914;
}


.footer-top,
.footer-bottom {
  max-width:
    1260px;

  margin:
    auto;
}


.footer-top {
  padding-bottom:
    55px;

  display:
    grid;

  grid-template-columns:
    0.7fr 1fr auto;

  gap:
    70px;
}


.footer-brand {
  color:
    white;
}


.footer-top > p {
  max-width:
    430px;

  color:
    #869089;

  font-size:
    0.74rem;

  line-height:
    1.8;
}


.footer-links {
  display:
    grid;

  gap:
    10px;

  color:
    #adb5af;

  font-size:
    0.72rem;
}


.footer-bottom {
  padding-top:
    20px;

  display:
    flex;

  justify-content:
    space-between;

  border-top:
    1px solid
    rgba(255,255,255,0.09);

  color:
    #69736c;

  font-size:
    0.64rem;
}


.footer-bottom a {
  color:
    #c4a673;
}


/* =========================================
   PROPERTY MODAL
   ========================================= */

.property-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    999;

  display:
    none;

  align-items:
    center;

  justify-content:
    center;

  padding:
    25px;
}


.property-modal.open {
  display:
    flex;
}


.modal-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(11,16,13,0.82);

  backdrop-filter:
    blur(8px);
}


.modal-card {
  position:
    relative;

  z-index:
    2;

  width:
    min(1050px,100%);

  max-height:
    90vh;

  overflow-y:
    auto;

  display:
    grid;

  grid-template-columns:
    1.05fr 0.95fr;

  background:
    #f7f4ee;

  box-shadow:
    0 30px 90px
    rgba(0,0,0,0.35);
}


.modal-close {
  position:
    absolute;

  z-index:
    5;

  right:
    15px;

  top:
    15px;

  width:
    42px;

  height:
    42px;

  border:
    0;

  border-radius:
    50%;

  color:
    var(--ink);

  background:
    rgba(255,255,255,0.9);

  font-size:
    1.5rem;
}


.modal-image {
  min-height:
    570px;

  background-position:
    center;

  background-size:
    cover;
}


.modal-content {
  padding:
    55px;

  display:
    flex;

  justify-content:
    center;

  flex-direction:
    column;
}


.modal-label {
  color:
    var(--gold);

  font-size:
    0.59rem;

  font-weight:
    700;

  letter-spacing:
    0.18em;
}


.modal-content h2 {
  margin-top:
    10px;

  font-size:
    3rem;
}


.modal-address {
  margin-top:
    10px;

  color:
    var(--gray);
}


.modal-specs {
  margin:
    30px 0;

  padding:
    18px 0;

  display:
    flex;

  gap:
    25px;

  border-top:
    1px solid
    var(--line);

  border-bottom:
    1px solid
    var(--line);

  color:
    var(--gray);

  font-size:
    0.72rem;
}


.modal-price {
  color:
    var(--ink);

  font-size:
    1rem;
}


.modal-description {
  margin-top:
    25px;

  color:
    var(--gray);

  font-size:
    0.79rem;

  line-height:
    1.8;
}


.modal-enquiry {
  margin-top:
    28px;

  padding:
    13px 18px;

  width:
    fit-content;

  color:
    white;

  background:
    var(--green);

  font-size:
    0.72rem;

  font-weight:
    600;
}


/* =========================================
   ANIMATIONS
   ========================================= */

.reveal {
  opacity:
    0;

  transform:
    translateY(25px);

  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}


.reveal.visible {
  opacity:
    1;

  transform:
    translateY(0);
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1000px) {

  .nav > a:not(.nav-button) {
    display:
      none;
  }


  .property-search {
    grid-template-columns:
      1fr 1fr;
  }


  .search-heading {
    grid-column:
      span 2;
  }


  .intro-grid,
  .buy-section,
  .sell-wrapper,
  .contact-grid {
    grid-template-columns:
      1fr;
  }


  .intro-content {
    padding-top:
      0;
  }


  .buy-image {
    min-height:
      600px;
  }


  .buy-content {
    padding:
      80px 45px;
  }


  .team-grid {
    grid-template-columns:
      1fr 1fr;
  }


  .modal-card {
    grid-template-columns:
      1fr;
  }


  .modal-image {
    min-height:
      420px;
  }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 720px) {

  .section {
    padding:
      85px 20px;
  }


  .demo-bar-inner {
    padding:
      8px 15px;

    font-size:
      0.62rem;
  }


  .nav-container {
    min-height:
      70px;

    padding:
      0 18px;
  }


  .menu-toggle {
    display:
      block;
  }


  .nav {
    position:
      absolute;

    top:
      calc(100% + 8px);

    left:
      12px;

    right:
      12px;

    padding:
      16px;

    display:
      none;

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      3px;

    border:
      1px solid
      var(--line);

    background:
      #f8f5ef;

    box-shadow:
      0 25px 60px
      rgba(30,42,34,0.18);
  }


  .nav.open {
    display:
      flex;
  }


  .nav > a,
  .nav > a:not(.nav-button) {
    display:
      block;

    padding:
      11px 9px;
  }


  .nav-button {
    margin-top:
      5px;

    text-align:
      center;
  }


  .hero {
    min-height:
      790px;
  }


  .hero-content {
    padding:
      60px 20px 200px;
  }


  .hero h1 {
    font-size:
      clamp(
        3.7rem,
        16vw,
        6rem
      );
  }


  .hero-property {
    width:
      calc(100% - 28px);

    grid-template-columns:
      1fr;
  }


  .hero-property div {
    min-height:
      58px;

    padding:
      10px 15px;

    border-right:
      0;

    border-bottom:
      1px solid
      var(--line);
  }


  .property-search-section {
    padding:
      24px 15px 0;
  }


  .property-search {
    margin:
      0 auto;

    grid-template-columns:
      1fr;
  }


  .search-heading {
    grid-column:
      auto;
  }


  .search-button {
    width:
      100%;
  }


  .intro-grid {
    gap:
      35px;
  }


  .section-heading {
    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      25px;
  }


  .property-grid {
    grid-template-columns:
      1fr;
  }


  .property-image {
    height:
      330px;
  }


  .property-specs {
    flex-wrap:
      wrap;

    gap:
      12px 20px;
  }


  .property-bottom {
    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      15px;
  }


  .buy-image {
    min-height:
      430px;
  }


  .buy-content {
    padding:
      75px 20px;
  }


  .sell-wrapper {
    gap:
      55px;
  }


  .sell-features {
    grid-template-columns:
      1fr;
  }


  .sell-stat-card {
    min-height:
      430px;

    padding:
      35px 25px;
  }


  .sell-stat-card h3 {
    font-size:
      2.4rem;
  }


  .team-grid {
    grid-template-columns:
      1fr;
  }


  .agent-image {
    height:
      440px;
  }


  .contact-grid {
    gap:
      55px;
  }


  .form-row {
    grid-template-columns:
      1fr;
  }


  .contact-form {
    padding:
      25px 18px;
  }


  .footer-top {
    grid-template-columns:
      1fr;

    gap:
      30px;
  }


  .footer-bottom {
    flex-direction:
      column;

    gap:
      10px;
  }


  .modal-card {
    display:
      block;
  }


  .modal-image {
    min-height:
      290px;
  }


  .modal-content {
    padding:
      35px 22px;
  }


  .modal-content h2 {
    font-size:
      2.2rem;
  }


  .modal-specs {
    flex-wrap:
      wrap;
  }

}