:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-6f8a886 *//* ===== HEADER — section-specific only. Needs 00-global.css too (.draw-underline, .tracked). ===== */
.nav-pill {
  background: rgba(36,24,19,0.32);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(244,239,230,0.18);
  transition: background-color .5s ease, padding .4s ease;
}
.nav-pill.scrolled { background: rgba(20,17,15,0.78); }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-f21314a *//* =========================================================
   ANISA REALTY — PROPERTIES
   Global page styling
   ========================================================= */

.ar-properties-page {
  --ar-ivory: #f3eee5;
  --ar-cream: #ebe4d8;
  --ar-ink: #262321;
  --ar-muted: #716b64;
  --ar-line: rgba(38,35,33,.14);
  --ar-dark: #3e3935;

  background: var(--ar-ivory);
  color: var(--ar-ink);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  overflow: hidden;
}


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

.ar-properties-hero {
  min-height: 55vh;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  padding:
    150px
    clamp(24px,7vw,110px)
    90px;

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

  position: relative;
}


.ar-properties-hero::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  right: -150px;
  top: 50px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(197,157,91,.18),
      transparent 68%
    );

  pointer-events: none;
}


.ar-eyebrow,
.ar-label {
  font-size: 10px;

  letter-spacing: .20em;

  text-transform: uppercase;

  color: var(--ar-muted);
}


.ar-properties-hero h1 {
  max-width: 900px;

  margin: 25px 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 400;

  font-size:
    clamp(50px,7vw,100px);

  line-height: .95;

  letter-spacing: -.045em;
}


.ar-properties-hero h1 em {
  font-style: italic;
}


.ar-properties-hero p {
  max-width: 560px;

  font-size: 15px;

  line-height: 1.8;

  color: var(--ar-muted);
}


/* =========================================================
   SECTIONS
   ========================================================= */

.ar-search-section,
.ar-listings-section,
.ar-homefinder-section {
  padding:
    100px
    clamp(24px,7vw,110px);
}


.ar-section-heading {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  margin-bottom: 45px;

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

  padding-bottom: 25px;
}


.ar-section-heading h2 {
  margin: 12px 0 10px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(34px,4vw,56px);

  font-weight: 400;

  letter-spacing: -.035em;
}


.ar-section-heading p {
  max-width: 570px;

  margin: 0;

  color: var(--ar-muted);

  line-height: 1.7;
}


.ar-number {
  font-family: Georgia, serif;

  font-size: 16px;

  color: var(--ar-muted);
}


/* =========================================================
   QUICK SEARCH
   ========================================================= */

.ar-quick-search {
  background: #fff;

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

  border-radius: 14px;

  overflow: hidden;

  box-shadow:
    0 25px 70px rgba(40,30,20,.07);
}


.ar-quick-search iframe {
  display: block;

  width: 100%;

  height: 640px;

  min-height: 640px;

  border: 0;
}


/* =========================================================
   LISTINGS + CONTACT
   ========================================================= */

.ar-content-grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    360px;

  gap: 45px;

  align-items: start;
}


/* =========================================================
   HAR LISTINGS
   ========================================================= */

/*
   IMPORTANT:

   HAR's footer exists INSIDE the iframe.

   Because the iframe is cross-origin, our CSS cannot do:

       .idx_footer_inner { display:none; }

   Instead we make the outer wrapper shorter than the iframe.
   The bottom of the iframe is therefore clipped.
*/

.ar-idx-frame {
  position: relative;

  height: 2100px;

  background: #fff;

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

  border-radius: 14px;

  overflow: hidden;

  box-shadow:
    0 25px 70px rgba(40,30,20,.06);
}


.ar-idx-frame iframe {
  display: block;

  width: 100%;

  height: 2260px;

  border: 0;

  margin: 0;

  padding: 0;
}


/*
   WHITE MASK AT THE BOTTOM

   This covers the final pixels of the HAR document
   where its IDX footer appears.
*/

.ar-idx-frame::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 35px;

  background: #fff;

  z-index: 20;

  pointer-events: none;
}


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

.ar-contact {
  position: sticky;

  top: 110px;
}


.ar-contact-inner {
  background: var(--ar-dark);

  color: var(--ar-ivory);

  border-radius: 14px;

  padding: 42px 34px;

  box-shadow:
    0 30px 80px rgba(30,25,20,.18);
}


.ar-contact .ar-label {
  color:
    rgba(243,238,229,.55);
}


.ar-contact h2 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 400;

  font-size: 38px;

  line-height: 1;

  letter-spacing: -.035em;

  margin: 22px 0;
}


.ar-contact p {
  color:
    rgba(243,238,229,.65);

  line-height: 1.7;

  font-size: 14px;

  margin-bottom: 35px;
}


/* =========================================================
   FORM
   ========================================================= */

.ar-field {
  margin-bottom: 20px;
}


.ar-field label {
  display: block;

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: .15em;

  margin-bottom: 8px;

  color:
    rgba(243,238,229,.55);
}


.ar-field input,
.ar-field textarea {
  width: 100%;

  box-sizing: border-box;

  background: transparent;

  border: 0;

  border-bottom:
    1px solid rgba(243,238,229,.25);

  border-radius: 0;

  padding: 11px 0;

  color: var(--ar-ivory);

  font-family: inherit;

  outline: none;
}


.ar-field textarea {
  resize: vertical;
}


.ar-field input::placeholder,
.ar-field textarea::placeholder {
  color:
    rgba(243,238,229,.35);
}


.ar-field input:focus,
.ar-field textarea:focus {
  border-bottom-color:
    rgba(243,238,229,.8);
}


.ar-form button {
  width: 100%;

  margin-top: 12px;

  padding: 15px 18px;

  border: 0;

  border-radius: 30px;

  background: var(--ar-ivory);

  color: var(--ar-ink);

  font-size: 11px;

  letter-spacing: .08em;

  text-transform: uppercase;

  cursor: pointer;

  transition:
    transform .35s ease,
    background .35s ease;
}


.ar-form button:hover {
  transform: translateY(-2px);

  background: #fff;
}


.ar-form button span {
  margin-left: 8px;

  font-size: 16px;
}


/* =========================================================
   HOME FINDER
   ========================================================= */

.ar-homefinder {
  background: #fff;

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

  border-radius: 14px;

  overflow: hidden;

  box-shadow:
    0 25px 70px rgba(40,30,20,.06);
}


.ar-homefinder iframe {
  width: 100%;

  height: 1500px;

  display: block;

  border: 0;
}


/* =========================================================
   CLOSING
   ========================================================= */

.ar-closing {
  min-height: 55vh;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

  padding: 100px 24px;

  background: var(--ar-dark);

  color: var(--ar-ivory);
}


.ar-closing .ar-label {
  color:
    rgba(243,238,229,.5);
}


.ar-closing h2 {
  margin-top: 25px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 400;

  font-size:
    clamp(45px,7vw,90px);

  line-height: .95;

  letter-spacing: -.045em;
}


.ar-closing h2 em {
  font-style: italic;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

  .ar-properties-hero {
    min-height: 60vh;

    padding:
      120px 24px 65px;
  }


  .ar-search-section,
  .ar-listings-section,
  .ar-homefinder-section {
    padding:
      75px 24px;
  }


  .ar-content-grid {
    display: flex;

    flex-direction: column;
  }


  /*
     Contact first on mobile
  */

  .ar-contact {
    position: static;

    width: 100%;

    order: 0;

    margin-bottom: 40px;
  }


  .ar-listings {
    width: 100%;

    order: 1;
  }


  .ar-idx-frame {
    height: 2130px;
  }


  .ar-idx-frame iframe {
    height: 2260px;
  }


  .ar-homefinder iframe {
    height: 1700px;
  }

}


@media (max-width: 600px) {

  .ar-properties-hero h1 {
    font-size: 52px;
  }


  .ar-section-heading {
    gap: 20px;
  }


  .ar-section-heading h2 {
    font-size: 38px;
  }


  .ar-quick-search iframe {
    height: 760px;

    min-height: 760px;
  }


  .ar-idx-frame {
    height: 2430px;
  }


  .ar-idx-frame iframe {
    height: 2560px;
  }


  .ar-homefinder iframe {
    height: 1900px;
  }


  .ar-contact-inner {
    padding: 32px 24px;
  }

}/* End custom CSS */