.hero-text{padding-left: clamp(1.25rem, 4vw, 4rem);}
.hero-text .display {margin-bottom: 0.75rem;}
.hero-text .display em{margin-left: -4px;}
.hero-logo {
    width: clamp(150px, 13vw, 210px);
    height: auto;
    display: block;
    margin: 0px 0px 1.5rem;
}

.promo-band {
  color: var(--ink-deep);
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.promo-track {width: max-content; animation: promo-scroll 50s linear infinite;}
.promo-track:hover {animation-play-state: paused;}
.promo-item {gap: 1.2rem; padding: 0 3rem; border-right: 1px solid rgba(0, 62, 81, 0.14); color: inherit; transition: opacity .25s ease;}
.promo-community {font-size: 0.76rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent);}
.promo-offer {font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 400; color: var(--ink-deep); letter-spacing: -0.005em;}

@keyframes promo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.section-dark {background: var(--ink-deep);}
.section-dark .body {color: #b9cad1;}
.section-dark .display, .section-dark .eyebrow {color:var(--canvas)}

.why-grid {max-width: var(--max-w);  gap: clamp(2rem, 5vw, 5rem);}
.why-text {padding-right: 1rem; max-width: 36rem;}
.dare-panels {margin-top: 2.5rem;}

.dare-hotspot-list {gap: 0.6rem; margin-top: 1.75rem;}
.dare-hotspot-list.is-hidden {display: none !important;}
.dare-hotspot-item {font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; color: rgba(255, 255, 255, 0.55); cursor: pointer; padding: 0.4rem 0; transition: color .2s ease;}
.dare-hotspot-item:hover {color: rgba(255, 255, 255, 0.85);}
.dare-hotspot-item.active {color: var(--accent);}

.dare-back {display: none; gap: 0.45rem; margin: 0 0 1.1rem; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; color: var(--accent); cursor: pointer;
transition: gap .2s ease, opacity .2s ease;}
.dare-back.is-visible {display: inline-flex; animation: 0.3s ease 0s 1 normal none running dare-fade-in;}
.dare-panel {display: none;}
.dare-panel.active {display: block; animation: 0.3s ease 0s 1 normal none running dare-fade-in;}

.dare-panel h3 {font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 1.25rem;}
.dare-features {gap: 1.4rem;}

.dare-feature-name {font-size: 0.66rem; font-weight: 600; letter-spacing: 0.22em; color: var(--accent); margin-bottom: 0.55rem;}
.compare-row {gap: 0.7rem; padding: 0.35rem 0;}
.compare-row.estela .compare-mark {background: var(--accent); color: var(--ink-deep);}
.compare-row.typical .compare-mark {color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.1);}
.compare-row.typical p {color: rgba(255, 255, 255, 0.6);}

.compare-mark {--size:22px; width: 22px; height: 22px; flex-shrink: 0; font-size: 0.7rem; font-weight: 600; margin-top: 0.1rem;}
.compare-row p {font-size: 0.92rem; line-height: 1.45;}

.why-image {aspect-ratio: 37 / 27;}
.why-image img[src*="backyard"] {object-position: 70% center;}
.why-image img {display: block; object-position: center center; transition: opacity .22s ease;}
.why-image.has-active .hotspot:not(.active) {opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s;}

.hotspot {left: var(--x); top: var(--y); width: 22px; height: 22px; margin: -11px 0 0 -11px; background: rgba(155, 211, 221, 0.92); border: 2px solid rgba(255, 255, 255, 0.9);
cursor: pointer; z-index: 2; animation: hotspot-pulse 2.4s ease-out infinite; transition: transform .25s ease, opacity .25s ease, background .2s ease, box-shadow .2s ease, visibility 0s linear 0s;}
.hotspot-label{left: calc(100% + 10px); top: 50%; transform: translateY(-50%) translateX(-6px); background: var(--accent); color: var(--ink-deep);
padding: 0.4rem 0.8rem; border-radius: 3px; font-family: var(--font-body); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.22em; opacity: 1; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);}

.hotspot.active .hotspot-label {opacity: 1; transform: translateY(-50%) translateX(0px);}
.hotspot.label-left .hotspot-label {left: auto; right: calc(100% + 10px); transform: translateY(-50%) translateX(6px);}
.hotspot.label-left.active .hotspot-label {transform: translateY(-50%) translateX(0);}


.dare-cta {margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.15);}
.dare-cta-line {font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0 0 1.1rem; letter-spacing: -0.01em;}
.dare-cta .btn-primary {margin-bottom: 0.85rem; background: var(--ink-deep-hi); border-color: var(--ink-deep);}
.dare-cta-note {font-family: var(--font-body); font-size: 0.85rem; color: rgba(255, 255, 255, 0.65);}

.left-hotspot-pill .dare-hotspot-item{border-color: rgba(255, 255, 255, 0.25)!important; transition:all 0.5s ease;}
.left-hotspot-pill .dare-hotspot-item:hover{border-color: rgba(255, 255, 255, 0.50)!important;}

.listing-carousel-nav {display:flex; gap:0.6rem; flex-shrink:0; margin-bottom:0.5rem;}
.listing-arrow:disabled {opacity:0.25; cursor:not-allowed;}
.listing-arrow {--size:44px; width:var(--size); height:var(--size); border:1.5px solid var(--ink-deep); background:transparent;
color:var(--ink-deep); cursor:pointer; transition:background .2s ease, color .2s ease, opacity .2s ease;}
.listing-arrow:hover:not(:disabled) {background:var(--ink-deep); color:#fff;}
.listing-arrow svg {--size:16px; width:var(--size); height:var(--size); display:block; fill: none;}


@media all and (min-width:800px){
  .hero-inner{grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);}
  .review-info p{max-width:84%; }

  .section-built .group-hd{max-width:80%;}
  .front-txt{max-width:60%;}
  .section-built{ padding-right: var(--section-gap-medium);}
  .why-grid {grid-template-columns: minmax(0, 1fr) minmax(0, 1.43fr);}
  .home-hero{padding-right: var(--pad-x);}
}

@media all and (max-width:960px){
  .review-info p {font-size: 1.2rem; line-height: 2rem;}
  .home-hero{height: auto!important;} 
  .hero-text {padding: var(--pad-y) var(--pad-x);}  
}

/* Popup Modal Form */
button.cta-card { background: none; appearance: none; -webkit-appearance: none; font: inherit; text-align: left; cursor: pointer; width: 100%; }

.form-modal .modal-content{background: var(--ink-deep)}
.form-modal .btn-close{filter: invert(96%) sepia(13%) saturate(0%) hue-rotate(259deg) brightness(104%) contrast(101%); z-index: 5; opacity:1;}
.brochure-title {font-family:var(--font-display); font-size:clamp(1.8rem, 3vw, 2.6rem); margin:0 0 0.5rem; letter-spacing:-0.01em; line-height:1.1;}
.form-row {grid-template-columns:1fr 1fr; gap:0.75rem;}
.form-field {gap:0.35rem;}
.form-field span {font-size:0.62rem; font-weight:600; letter-spacing:0.22em; color:rgba(255, 255, 255, 0.6);}
.form-field input, .form-field select {padding:0.7rem 0.95rem; border:1px solid rgba(255, 255, 255, 0.18); background:rgba(255, 255, 255, 0.04); color:#fff; border-radius:4px; font-family:var(--font-body); font-size:0.95rem; transition:border-color .2s ease, background .2s ease;}
.brochure-submit {margin-top:0.5rem; padding:1.1rem 1.6rem; background:var(--accent); color:var(--ink-deep); font-family:var(--font-body); font-size:0.78rem; font-weight:600; letter-spacing:0.22em; cursor:pointer; transition:background .2s ease, transform .15s ease;}
.brochure-submit:hover {background:#b9e0e8; transform:translateY(-1px);}
.form-meta {margin:0.4rem 0 0; font-family:var(--font-body); font-size:0.72rem; color:rgba(255, 255, 255, 0.55); letter-spacing:0.02em;}
.form-field input:focus, .form-field select:focus {outline:none; border-color:var(--accent); background:rgba(255, 255, 255, 0.08);}
.modal-backdrop {--bs-backdrop-zindex: 9999;}
.form-modal{z-index: 10000;}
.form-modal .modal-dialog{max-width:600px}

@media all and (max-width:900px){
    .form-row {grid-template-columns:1fr;}
}


@media all and (min-width: 1100px) and (max-width: 1300px) {
  .hero-logo{margin:2rem 0px 1rem 0px!important;max-height: 60px!important;}
  .display {font-size: clamp(2.4rem, 4vw, 4rem);}
  .hero-inner {grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);}
}