@charset "utf-8";
:root{
  --PrimaryClr        :#003e52;
  --SecondaryClr     :#5dd1ef; 

  --Bodytext          : 0.9rem; 
  --BodyFont          : 'Gotham', sans-serif;
  --HeadingFont       :  'Sherika', sans-serif;
  --BorderRadius      : 1.25rem;

  --section-gap-large: clamp(3rem, 5vw, 5rem);      /* 48px → 80px */
  --section-gap-medium: clamp(2rem, 4vw, 3.75rem); /* 40px → 60px */
  --section-gap-Small  : 1.875rem;  /* 30px */


  --ink-deep: #003E51;
  --ink-deep-hi: #0d556d;
  --ink-mute: #4d6772;
  --ink-soft: #889aa3;
  --accent: #9BD3DD;
  --canvas: #ffffff;
  --canvas-soft: #f6f8f9;
  --rule: #e6e8ea;
  --navy: var(--ink-deep);
  --navy-mid: var(--ink-deep-hi);
  --navy-deep: #001f29;
  --cream: var(--canvas);
  --cream-light: var(--canvas-soft);
  --white: var(--canvas);
  --text: var(--ink-deep);
  --text-muted: var(--ink-mute);

  --pad-x: clamp(1.25rem, 5vw, 5rem);
  --pad-y: clamp(3rem, 7vw, 3rem);
  --max-w: 1680px;
  --font-display: "Sherika", "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Gotham", "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

@font-face {
  font-family: "Sherika";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Sherika-Light.woff2") format('woff2');
}
@font-face {
  font-family: "Sherika";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Sherika-Regular.woff2") format("opentype");
}
@font-face {
  font-family: "Sherika";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/Sherika-Bold.woff2") format('woff2');
}

@font-face {
  font-family: "Gotham";
  font-weight: 300; font-style: normal;
  src: url("../fonts/Gotham-Light.woff2") format("opentype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 300; font-style: italic;
  src: url("../fonts/Gotham-LightItalic.woff2") format("opentype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 400; font-style: normal;
  src: url("../fonts/Gotham-Book.woff2") format("opentype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 400; font-style: italic;
  src: url("../fonts/Gotham-BookItalic.woff2") format("opentype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 500; font-style: normal;
  src: url("../fonts/Gotham-Medium.woff2") format("opentype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 600; font-style: normal;
  src: url("../fonts/Gotham-Bold.woff2") format("opentype");
}

@font-face {
  font-family: "Mulish";
  font-weight: 100 900; font-style: normal;
  src: url("../fonts/Mulish-VariableFont_wght.ttf") format('woff2');
}


figure,h1,h2,h3,h4,p{padding:0;margin:0}h4,ol,ul,ul ul{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:0}:focus,body a,body a:active,input[type=text]:focus,textarea:focus{outline:0}article,aside,dialog,figure,footer,header,hgroup,nav,ol,p,section{display:block}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,command,datalist,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,keygen,label,legend,li,meter,nav,object,ol,output,p,pre,progress,q,s,samp,section,small,source,span,strike,strong,sub,sup{outline:0;vertical-align:baseline}figure,p{-webkit-margin-before:0;-webkit-margin-after:0;-webkit-margin-start:0;-webkit-margin-end:0}ol{list-style-type:decimal}a img,img{vertical-align:middle}a img{border:0}body a:focus{-mos-outline-style:none;outline:0}body:-moz-any-link:focus{outline:0}
html {-webkit-text-size-adjust:none;}
div{vertical-align:top;}
img{max-width:100%; width:auto; height:auto;}
a{cursor:pointer; transition:all 0.2s ease; text-decoration:none; color: inherit;}
a:hover, a:focus{text-decoration:none;}
html {-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
html {position:relative; min-height:100%;}
aside, .right-side, .navbar-collapse{transition:all 0.5s ease;}
button:focus {outline:0px dotted; outline:0px auto -webkit-focus-ring-color;}
.btn.focus, .btn:focus {outline:0; box-shadow:0 0 0 0rem rgb(0 123 255 / 25%);}

::-moz-selection { /* Code for Firefox */
  color: white;
  background:var(--PrimaryClr);
}
::selection {
  color: white;
  background:var(--PrimaryClr);
}

/*Typekit*/
html, body{font-family:var(--BodyFont); color:var(--ink-mute); font-size:var(--Bodytext); font-weight:400; padding:0px; margin:0px;}
p{margin-bottom:15px}
div p:last-child{margin-bottom:0px;}
.form-control:focus{box-shadow:0 0 0 0rem rgba(47,203,75,.25);}
.row:before, .row:after {display:none !important;}

h1, h2, h3, h4, h5, h6{font-family:var(--HeadingFont); margin-bottom:20px; font-weight:normal;}

/*Typekit END*/
html{font-size:100%;}
.text-balance {text-wrap: balance;}
.color-primary{color: var(--PrimaryClr);}
.fw-900{font-weight:900;}
.full-width{grid-column: 1 / -1;}
.flex-center {display: flex; align-items: center; justify-content: center;}

.fs-14{font-size: 14px;}
.section-gap{padding: var(--pad-y) var(--pad-x);max-width: var(--max-w); margin: 0 auto; scroll-margin-top: 6rem;}

.site-nav a:not(.btn) {
    color: var(--ink-deep);
}

.btn {
  display: inline-flex;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--ink-deep);
  border-radius: 7px;
  background: transparent;
  color: var(--ink-deep);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .15s ease;
  white-space: nowrap;
}
.btn:hover {transform: translateY(-1px);}

.btn-primary{background: var(--ink-deep); color: #fff; border-color: var(--ink-deep);}
.btn-primary:hover{background: var(--ink-deep-hi); border-color: var(--ink-deep);}

.site-header .btn-primary{padding: 0.75rem 1.4rem; font-size: 0.78rem; margin-left:3.25rem;}
.site-header.scrolled .btn-primary {
    background: #fff;
    color: var(--ink-deep);
    border-color: #fff;
    padding: 0.55rem 1.2rem;
    font-size: 0.72rem;
}

.phone-tab {top: 35%; right: 0; width: 44px; height: 210px; background:var(--PrimaryClr); text-decoration: none; transition: background 0.22s ease;}
.phone-tab:hover {background:var(--SecondaryClr);}
.phone-tab__text {writing-mode: vertical-rl;transform: rotate(180deg); font-size: 12px;letter-spacing: 0.18em;user-select: none;}

/* New CSS */
.display {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  color: var(--ink-deep);
}
.display em {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.eyebrow {
    font-family: var(--font-body);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    font-weight: 500;
    color: var(--ink-deep);
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}
.lede {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-deep);
  margin: 0 0 2rem;
  font-weight: 500;
}
.body {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--ink-mute);
    margin: 0;
    max-width: 40rem;
    line-height: 1.6;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.05rem 2.1rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border: 1.5px solid var(--ink-deep);
  border-radius: 7px;
  background: transparent;
  color: var(--ink-deep);
  cursor: pointer;
  transition: background .25s ease, color .25s ease, gap .25s ease;
  white-space: nowrap;
}
.btn-ghost:hover {
  background: var(--ink-deep);
  color: #fff;
}
.btn-ghost-light {
    border-color: #fff;
    background: #fff;
    color: var(--ink-deep);
}
.btn-ghost-light:hover {
    background: var(--ink-deep);
    border-color: var(--ink-deep);
    color: #fff;
}
.section-intro {
  margin-bottom: 3rem;
  max-width: 60rem;
}

/* Card */
.communities-grid{gap: 2.5rem;}
.community-card.is-selected .community-card-image {box-shadow: 0 0 0 3px var(--ink-deep); border-radius: 4px;}
.community-card-image::after {content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 30, 40, 0.55) 0%, rgba(0, 30, 40, 0) 55%); pointer-events: none; z-index: 1;}
.community-card-image {aspect-ratio: 4 / 2.6; cursor: pointer;}
.community-card-image img{transition: transform .5s ease;}
.community-card-image:hover img {transform: scale(1.04);}
.status-selling {background: var(--ink-deep);}
.status-pill {top: 1rem; left: 1rem; padding: 0.45rem 0.9rem; font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.2em;}
.status-coming {color: var(--ink-deep)!important; background: var(--accent);}
.community-name {bottom: 1.1rem; left: 1.25rem; right: 1.25rem; font-family: var(--font-display); font-size: clamp(1.4rem, 1.85vw, 1.85rem); letter-spacing: -0.005em;}

.community-meta {padding: 1.25rem 0 0; grid-template-columns: 1fr auto; gap: 1.5rem; border-top: 1px solid var(--rule); margin-top: 1.25rem;}
.meta-address {margin: 0 0 0.25rem; font-size: 0.8rem; color: var(--ink-mute); letter-spacing: 0.02em;}
.meta-price {margin: 0; font-size: 0.9rem; color: var(--ink-deep);}
.meta-specs {gap: 0.4rem; font-size: 0.85rem; color: var(--ink-deep);}
.meta-specs li {gap: 0.55rem;}
.meta-specs svg {width: 22px; height: 18px; color: var(--ink-deep);}
.community-card.is-disabled {opacity: 0.88;}

/* Card  end*/
.testimonial {color: var(--ink-deep); gap: 2.5rem; padding: 3rem var(--pad-x); max-width: var(--max-w);}
.testimonial-quote {padding-left: 3rem; max-width: 42rem;}
.quote-mark {top: -1.5rem; font-family: var(--font-display); font-size: 5.5rem; color: var(--accent);}
.testimonial-quote p {font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.35; margin: 0 0 1.4rem; color: var(--ink-deep);}
.testimonial-cite {font-size: 0.78rem; font-weight: 500; letter-spacing: 0.18em; color: var(--ink-mute);}

/* CTA */
.cta-section {gap: clamp(2.5rem, 5vw, 5rem);}
.cta-text .display {margin-bottom: 1.25rem;}
.cta-sub {font-family: var(--font-body); font-size: 0.95rem; color: var(--ink-mute); max-width: 28rem; line-height: 1.5;}
.cta-actions {gap: 0.9rem;}
.cta-card {gap: 1rem; padding: 1.3rem 1.5rem; border-radius: 7px; text-decoration: none; color: var(--ink-deep); border: 1.5px solid var(--ink-deep); transition: transform .2s ease, background .25s ease, color .25s ease;}
.cta-card:hover {background: var(--ink-deep); color: #fff; transform: translateY(-2px);}
.cta-icon {flex-shrink: 0; width: 42px; height: 42px; background: rgba(0, 62, 81, 0.08); transition: background .25s ease;}
.cta-card:hover .cta-icon { background: rgba(255, 255, 255, 0.15); }
.cta-card-text {gap: 0.15rem; min-width: 0; }

.cta-card-label {font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; opacity: 0.7;}
.cta-card-value {font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


/* Header */
.site-header {z-index: 999; padding: 1.75rem var(--pad-x); transition: background .3s ease, padding .3s ease, box-shadow .3s ease;}
.site-header.scrolled {background: var(--ink-deep); padding-top: 0.55rem; padding-bottom: 0.55rem; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);}
.header-logo{width: 200px; height: 133px;}
.header-logo img{width: 110px;}

.site-header.scrolled .header-logo{width:110px; height: 74px;}
.site-header.scrolled .header-logo img{width:82px;}

header .navbar-nav{gap: 2.25rem;}
header .nav-link{font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.22em;}

.dropdown-menu{top: calc(100% + 0.6rem); min-width: 14rem; padding: 0.5rem 0; border: 1px solid var(--rule); box-shadow: 0 14px 40px rgba(0, 62, 81, 0.14); border-radius: 4px;}
.dropdown-menu li a {padding: 0.7rem 1.4rem; font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; color: var(--ink-deep); transition: background .15s ease;}
.dropdown-menu li a:hover, .dropdown-menu li a:focus-visible {background: rgba(0, 62, 81, 0.06); outline: none;}
.dropdown-toggle::after {margin-left: 0.4rem; border-top: .28em solid; border-right: .28em solid transparent; border-left: .28em solid transparent; transition: transform .2s ease;}

.nav-item.dropdown:hover .dropdown-toggle::after{transform: translateY(0px) rotate(180deg);}
.min-w-auto{min-width:unset}


/* Footer */
.site-footer {background: var(--ink-deep); color: #fff; padding: 5rem var(--pad-x) 3rem;}
.footer-grid {gap: 2rem;}
.footer-col h4 {font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.22em; font-weight: 500; color: var(--accent); margin: 0 0 1.25rem;}
.footer-col ul li, .footer-col p {font-size: 0.9rem; color: #cfd9dd; line-height: 1.8; margin: 0;}
.footer-col ul li a:hover, .footer-col p a:hover {color: var(--accent);}

.footer-brand {gap: 1.5rem;}
.footer-brand .brand-mark {width: 100%; max-width: 150px;}
.socials a {width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent);}
.socials svg {width: 22px; height: 22px;}
.socials a:hover{color:#ffffff;}

.footer-legal {max-width: var(--max-w); margin: 3rem auto 0; padding: 1.75rem var(--pad-x) 0; border-top: 1px solid rgba(255, 255, 255, 0.14);}
.footer-legal-left {gap: 0.7rem;}
.eho-logo {--size:30px; width: var(--size); height: var(--size); flex-shrink: 0;}
.footer-legal-left span {font-size: 0.68rem; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.7);}

.footer-legal-right {font-size: 0.72rem; color: rgba(255, 255, 255, 0.55);}
.footer-legal-right .license {letter-spacing: 0.04em;}
/* Footer */

.fullpage-modal{z-index: 999999;}
.fullpage-modal .modal-content{min-height: 100vh; background: var(--ink-deep);}
.navbar-toggler:focus{box-shadow: none;}

@media all and (min-width: 1100px) and (max-width: 1300px) {
    .site-header .btn-primary{margin-left: 2rem;}
    header .navbar-nav {gap: 1.5rem;}
    .site-header {padding: 0rem var(--pad-x) 1.75rem var(--pad-x);}
}

@media (min-width: 992px) {
  .site-header.over-photo:not(.scrolled) .nav-item > a:not(.btn), .site-header.over-photo:not(.scrolled) .nav-trigger {color: #fff;}
  .site-header.scrolled .nav-link {font-size: 0.78rem; color: var(--canvas);}
  .dropdown-menu {display: block; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;}
  .dropdown:hover .dropdown-menu {opacity: 1; visibility: visible; transform: translateY(0px);}
}

@media (min-width: 800px) {
  .cta-section {grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);}
  .cta-actions{grid-template-columns: 1fr 1fr;}
  .communities-grid {grid-template-columns: repeat(3, 1fr); gap: 2rem 1.75rem;}
  .footer-grid {max-width: var(--max-w); grid-template-columns: repeat(4, 1fr) auto;}
  .testimonial{ grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); padding: clamp(4rem, 7vw, 6rem) var(--pad-x); gap: clamp(2.5rem, 6vw, 5.5rem); }
}

@media all and (max-width:960px){
  .header-logo,
  .site-header.scrolled .header-logo{width: auto; height: auto;}
  .navbar-toggler{order: 4; background: var(--canvas);}
  .btn-close-white{opacity: 1; filter: none;}
  .phone-tab{top:18%;}

  .site-header .btn-primary {padding: 0.75rem 1rem; margin-left: 0rem;}
}

@media all and (max-width:767px){
  .phone-tab{top: unset; bottom: 0px; width: 100%; height: auto;}
  .phone-tab__text {writing-mode: unset; transform: rotate(0deg); font-size: 1.1rem; padding: 1rem;}

}

/* Choices.js — brand theme for select pickers (Front) */
.choices__list--dropdown, .choices__list[aria-expanded]{border-color: var(--rule)!important;}
.choices{margin-bottom:0;display:block;width:100%;font-size:inherit}
.choices__inner{width:100%;min-height:44px;padding:10px 14px;background-color:#fff;border:1px solid var(--rule);border-radius:3px;font-size:15px;font-family:inherit}
.choices.is-focused .choices__inner,.choices.is-open .choices__inner{border-color:var(--rule);box-shadow:none}
.choices__list--single{padding:0;width:100%}
.choices__list--single .choices__item{color:var(--ink-deep)}
.choices[data-type*=select-one]::after{border-color:var(--PrimaryClr) transparent transparent}
.choices[data-type*=select-one].is-open::after{border-color:transparent transparentvar(--rule)}
.choices__list--dropdown,.choices__list[aria-expanded]{border-color:var(--rule);border-radius:0 0 4px 4px;z-index:20}
.choices__list--dropdown .choices__item--selectable,.choices__list[aria-expanded] .choices__item--selectable{padding:7px 12px; color: var(--PrimaryClr); font-size: 12px; font-weight: 500;}
.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:#ececec;color:var(--ink-deep)}
.choices__placeholder{opacity:1;color:#6c757d}

.grecaptcha-badge{opacity: 0; visibility: hidden;}



/* LOADER */
#pageLoader {inset: 0; z-index: 999999; display: grid; place-items: center; background:var(--ink-deep); transition: opacity .4s ease, visibility .4s ease;}
#pageLoader.is-hidden {opacity: 0; visibility: hidden; pointer-events: none;}
.loader-content {width: min(90%, 360px);}

.loader-logo-wrap {width: 190px; height: 190px; margin: 0 auto 35px; place-items: center;}
.loader-logo {z-index: 3; width: 130px; animation: logoPulse 2s ease-in-out infinite;}
.loader-ring,
.loader-pulse {position: absolute; border-radius: 50%;}
.loader-pulse {
    width: 105px;
    height: 105px;
    border: 1px solid rgba(255,255,255,.25);
    animation: pulse 2s ease-out infinite;
}
.loader-ring {
    border: 1px solid rgba(255,255,255,.18);
}
.ring-1 {
    width: 150px;
    height: 150px;
    border-top-color: rgba(255,255,255,.8);
    border-right-color: transparent;
    animation: rotate 5s linear infinite;
}
.ring-2 {
    width: 185px;
    height: 185px;
    border-bottom-color: rgba(255,255,255,.55);
    border-left-color: transparent;
    animation: rotateReverse 7s linear infinite;
}
/* ANIMATIONS */
@keyframes logoPulse {
    50% {
        transform: scale(1.04);
        opacity: .9;
    }
}

@keyframes pulse {
    from {
        transform: scale(.7);
        opacity: .7;
    }
    to {
        transform: scale(1.6);
        opacity: 0;
    }
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateReverse {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes loading {
    from {
        transform: translateX(-130%);
    }
    50% {
        transform: translateX(120%);
    }
    to {
        transform: translateX(350%);
    }
}


/* MOBILE */

@media (max-width:575px) {

    .loader-logo-wrap {
        width: 160px;
        height: 160px;
    }

    .loader-logo {
        width: 110px;
    }

    .ring-1 {
        width: 130px;
        height: 130px;
    }

    .ring-2 {
        width: 155px;
        height: 155px;
    }

}