:root{--black:#202020; --border:#e7e7e2; --green:#63b82d; --green-dark:#4f9d21; --orange:#ef741a; --shadow:0 12px 35px rgba(31,31,31,.08); --soft:#f8f8f5; --white:#fff;}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:#fff; color:#343434; font:400 18px/1.65 'Montserrat', sans-serif; margin:0;}
a{color:inherit; text-decoration:none;}
button{font:inherit;}
img{max-width:100%;}
h1,h2,h3{color:var(--black); font-family:'Lora', serif; font-weight:500; line-height:1.05; margin:0;}
h1{font-size:clamp(3rem,4.2vw,4.4rem);}
h2{font-size:clamp(2.2rem,3.8vw,4rem);}
h3{font-size:2rem;}
p{margin:0 0 1rem;}
.eyebrow{color:#707070; font-size:.76rem; font-weight:600; letter-spacing:.13em; margin-bottom:1rem; text-transform:uppercase;}
.button{align-items:center; background:var(--green); border:1px solid var(--green); color:#fff; display:inline-flex; font-size:.88rem; font-weight:600; gap:.6rem; justify-content:center; min-height:48px; padding:.8rem 1.45rem; transition:.25s ease;}
.button:hover{background:var(--green-dark); border-color:var(--green-dark); transform:translateY(-1px);}
.button-small{min-height:40px; padding:.6rem 1.2rem;}
.button-outline{background:#fff; color:var(--green-dark); min-width:220px;}
.button-outline:hover{color:#fff;}

.site-header{background:#fff; border-bottom:1px solid rgba(0,0,0,.05); box-shadow:0 6px 22px rgba(31,31,31,.045); left:0; position:sticky; right:0; top:0; z-index:1000;}
.site-header-inner{align-items:center; display:flex; justify-content:space-between; margin:0 auto; max-width:1600px; min-height:86px; padding:0 1.5rem;}
.site-logo{align-items:center; display:flex; height:78px; overflow:hidden; width:78px;}
.site-logo img{display:block; transform-origin:center; width:100%;}
.site-nav{align-items:center; display:flex; gap:2.2rem;}
.site-nav a{font-size:.84rem; font-weight:500; transition:color .2s ease;}
.site-nav a:hover{color:var(--green-dark);}
.site-nav .button{color:#fff; margin-left:.5rem;}
.menu-toggle{background:none; border:0; cursor:pointer; display:none; padding:.5rem;}
.menu-toggle span{background:#222; display:block; height:2px; margin:5px 0; width:27px;}

main{margin:0 auto; max-width:1600px; padding:0 1.5rem;}

.hero{background:#fff; min-height:420px; overflow:hidden; position:relative;}
.hero-content{display:flex; flex-direction:column; justify-content:center; min-height:420px; padding:2.5rem 2.2rem 2.5rem 1.5rem; position:relative; width:48%; z-index:4;}
.hero-content .button{align-self:flex-start;}
.hero h1{font-size:clamp(2.7rem,3.15vw,3.2rem); max-width:720px;}
.hero h1 span{color:var(--green);}
.hero-subtitle{color:#303030; font-family:'Lora', serif; font-size:1.12rem; line-height:1.35; margin:.9rem 0; max-width:520px;}
.hero-text{font-size:.95rem; line-height:1.65; max-width:500px;}
.hero-image{background-image:linear-gradient(rgba(0,0,0,.012),rgba(0,0,0,.012)),url('../images/slider/la-ponce-revel-01.jpg'); background-position:34% center; background-size:cover; bottom:0; left:27%; position:absolute; right:0; top:0; z-index:1;}
.hero::before{background:linear-gradient(108deg,#fff 0 31%,rgba(255,255,255,.98) 31% 36%,rgba(255,255,255,.72) 36% 41%,rgba(255,255,255,.22) 41% 46%,rgba(255,255,255,0) 46% 100%); content:""; inset:0; pointer-events:none; position:absolute; z-index:2;}
.hero::after{background:linear-gradient(108deg,rgba(211,226,239,0) 0 38%,rgba(211,226,239,.28) 38% 41.5%,rgba(236,243,248,.42) 41.5% 44%,rgba(211,226,239,0) 44% 100%); content:""; inset:0; pointer-events:none; position:absolute; z-index:3;}

.key-facts{background:#fff; box-shadow:var(--shadow); display:grid; grid-template-columns:repeat(4,1fr); margin:-34px 0 1.2rem; padding:1.4rem 2rem; position:relative; z-index:5;}
.key-fact{align-items:center; border-right:1px solid #d6d6d1; display:flex; gap:1.2rem; justify-content:center; min-height:76px; padding:0 1.2rem;}
.key-fact:last-child{border-right:0;}
.key-fact i{color:var(--green); font-size:2.15rem;}
.key-fact strong,.key-fact span,.key-fact small{display:block;}
.key-fact strong{font-family:'Lora', serif; font-size:1.65rem; font-weight:500; line-height:1;}
.key-fact span{font-size:.95rem; margin-top:.35rem;}
.key-fact small{color:var(--green-dark); font-size:.84rem; font-weight:600; margin-top:.2rem;}

.section{padding:4.7rem 2rem;}
.section-soft{background:var(--soft);}
.section-heading{margin-bottom:2.2rem; max-width:720px;}
.section-heading h2,.location-content h2{color:var(--green-dark); margin-bottom:1.5rem; padding-bottom:1rem; position:relative;}
.section-heading h2::after,.location-content h2::after{background:#2b2b2b; bottom:0; content:""; height:1px; left:0; position:absolute; width:38px;}
.section-heading p:last-child{font-size:1.05rem; max-width:540px;}

.availability-section{display:grid; gap:2.2rem; grid-template-columns:290px minmax(0,1fr) 300px; padding-bottom:3.3rem; padding-top:3.3rem;}
.availability-heading{align-items:flex-start; display:flex; flex-direction:column; justify-content:flex-start; margin-bottom:0; max-width:none; min-width:0;}
.availability-heading h2{font-size:2.55rem; white-space:nowrap;}
.availability-heading .legend{margin-top:1.4rem;}
.legend{font-size:.9rem; min-width:0;}
.legend div{align-items:center; display:flex; gap:.55rem; margin:.55rem 0;}
.status-dot{border:2px solid currentColor; border-radius:50%; display:inline-block; height:15px; position:relative; width:15px;}
.status-dot::after{background:currentColor; border-radius:50%; content:""; height:5px; left:3px; position:absolute; top:3px; width:5px;}
.status-dot.available{color:var(--green);}
.status-dot.reserved{color:var(--orange);}
.status-dot.sold{color:#111;}

.availability-layout{display:contents;}
.map-wrapper{align-self:start; margin:0 auto; max-width:760px; position:relative; width:100%;}
.map-wrapper .map{display:block; height:auto; width:100%;}
.map-wrapper area{cursor:pointer;}

.lot-panel{align-self:center; background:#fff; box-shadow:var(--shadow); padding:2rem 2.1rem;}
.lot-panel-kicker{color:#777; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;}
.lot-panel h3{color:var(--green-dark); font-size:2.25rem; margin-bottom:.8rem; padding-bottom:.9rem; position:relative;}
.lot-panel h3::after{background:#e2e2de; bottom:0; content:""; height:1px; left:0; position:absolute; right:0;}
.lot-panel dl{margin:0 0 1.4rem;}
.lot-panel dl div{border-bottom:1px solid #ecece8; display:flex; font-size:.96rem; justify-content:space-between; padding:.85rem 0;}
.lot-panel dt{color:#555;}
.lot-panel dd{font-weight:500; margin:0;}
.lot-panel .status.available{color:var(--green-dark);}
.lot-panel .status.reserved{color:var(--orange);}
.lot-panel .status.sold{color:#111; text-align: right}
.lot-panel .button{width:100%;}
.lot-panel-note{font-size:.8rem; margin:.8rem 0 0; text-align:center;}

.section-heading-inline{align-items:flex-end; display:flex; justify-content:space-between; max-width:none;}

.lots-section{padding-bottom:4rem; padding-top:4rem;}
.available-count{font-size:.88rem; text-align:right;}
.available-count strong{color:var(--green-dark); display:block; font-family:'Lora', serif; font-size:2.1rem;}

.lots-carousel-wrapper{align-items:center; display:grid; gap:1rem; grid-template-columns:44px minmax(0,1fr) 44px;}
.lots-swipe-hint{display:none;}
.lots-carousel{display:grid; gap:1.2rem; grid-auto-columns:calc((100% - 6rem) / 6); grid-auto-flow:column; overflow-x:auto; overscroll-behavior-inline:contain; padding:.7rem 0 1.3rem; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none;}
.lots-carousel::-webkit-scrollbar{display:none;}
.lot-card{background:#fff; border:1px solid var(--border); box-shadow:0 8px 20px rgba(0,0,0,.05); min-width:0; padding:1.4rem 1rem; scroll-snap-align:start; text-align:center;}
.lot-number{align-items:center; border:2px solid var(--green); border-radius:50%; color:var(--green-dark); display:flex; font-weight:600; height:34px; justify-content:center; margin:0 auto 1rem; width:34px;}
.lot-card p{font-size:.95rem; margin:.4rem 0;}
.lot-card p strong{font-size:1.08rem;}
.lot-card .lot-price{font-weight:600;}
.lot-card .lot-status{color:var(--green-dark); font-weight:600; margin-top:.7rem;}
.lot-card .lot-status .status-dot{height:12px; margin-right:.35rem; vertical-align:-2px; width:12px;}
.lot-card .lot-status .status-dot::after{height:4px; left:2px; top:2px; width:4px;}
.lot-card a{color:var(--green-dark); display:inline-block; font-size:.86rem; font-weight:600; margin-top:.85rem;}
.carousel-arrow{background:#fff; border:1px solid var(--border); border-radius:50%; cursor:pointer; height:42px; transition:.2s ease; width:42px;}
.carousel-arrow:hover{border-color:var(--green); color:var(--green-dark);}

.information-section{padding-bottom:3.8rem; padding-top:3.8rem;}
.information-section .section-heading{max-width:none;}
.information-section .section-heading h2{font-size:clamp(2.55rem,3vw,3.15rem); white-space:nowrap;}

.information-grid{display:grid; gap:1.4rem; grid-template-columns:1fr 1.35fr 1fr;}
.information-card{background:#fff; border:1px solid var(--border); box-shadow:0 8px 22px rgba(0,0,0,.04); padding:1.7rem;}
.information-card h3{align-items:center; display:flex; font-family:'Montserrat',sans-serif; font-size:1.08rem; font-weight:600; gap:.7rem; margin-bottom:1.25rem;}
.information-card h3 i{color:var(--green); font-size:1.25rem;}
.information-card a{align-items:center; border-bottom:1px solid #ecece8; display:flex; font-size:1rem; justify-content:space-between; padding:.9rem 0;}
.information-card a i{color:var(--green); font-size:1.2rem;}
.information-card ul{margin:0; padding-left:1.1rem;}
.information-card li{font-size:.98rem; line-height:1.55; margin:.6rem 0;}
.fees-card h3,.fees-card h3 i{color:var(--orange);}
.professionals-card div{font-size:.96rem; line-height:1.55; margin-top:1rem;}
.professionals-card strong{font-size:1.02rem;}
.professionals-card p{margin:.25rem 0 0;}

.location-section{align-items:stretch; display:grid; grid-template-columns:35% 65%; margin-bottom:1.4rem; padding-bottom:0; padding-right:0; padding-top:0;}
.location-content{align-self:start; padding:2.7rem 3.3rem 3.3rem 0;}
.location-content h2{font-size:clamp(2.45rem,3vw,3.2rem); line-height:1.02;}
.location-content p{font-size:1rem;}
.location-content ul{list-style:none; margin:1.3rem 0 0; padding:0;}
.location-content li{font-size:1rem; margin:.72rem 0;}
.location-content li i{color:var(--green); margin-right:.5rem;}
.location-map iframe{display:block; height:100%; min-height:450px; width:100%;}

.contact-section{align-items:center; background:#fbfbfa; border-top:1px solid rgba(0,0,0,.04); display:grid; gap:2.2rem; grid-template-columns:minmax(260px,.82fr) minmax(360px,1.3fr) auto; padding:2.5rem;}
.contact-section > div:first-child{border-right:1px solid var(--border); padding-right:2.4rem;}
.contact-section .eyebrow{margin-bottom:.65rem;}
.contact-section h2{font-size:clamp(2.35rem,2.75vw,3rem); line-height:1.04;}
.contact-details{max-width:610px;}
.contact-details p{font-size:.96rem; line-height:1.55; margin-bottom:.45rem;}
.contact-details a{display:block;}
.contact-phone{color:var(--green-dark); font-size:1.55rem; font-weight:500;}
.contact-section > .button{justify-self:end; min-width:205px;}

.site-footer{background:#252525; color:#c8c8c8;}
.site-footer-inner{align-items:center; display:grid; gap:3rem; grid-template-columns:120px 1fr auto; margin:0 auto; max-width:1600px; padding:1.5rem;}
.footer-logo{align-items:center; display:flex;}
.footer-logo img{filter:brightness(0) invert(1); width:100%;}
.footer-nav{display:grid; gap:.35rem 2rem; grid-template-columns:repeat(2,max-content);}
.footer-nav a{font-size:.78rem;}
.footer-nav a:hover{color:#fff;}
.footer-legal{font-size:.74rem; text-align:right;}
.footer-legal p{margin:.15rem 0;}

@media screen and (max-width:1350px){
    .lots-carousel{grid-auto-columns:calc((100% - 4.8rem) / 5);}
}

@media screen and (max-width:1100px){
    .site-nav{gap:1.2rem;}
    .site-nav a{font-size:.7rem;}

    .hero-content{padding:2.8rem 2.6rem; width:51%;}
    .hero h1{font-size:clamp(2.6rem,4.1vw,3.05rem);}
    .hero-image{left:24%;}
    .hero::before{background:linear-gradient(108deg,#fff 0 35%,rgba(255,255,255,.98) 35% 40%,rgba(255,255,255,.72) 40% 45%,rgba(255,255,255,.22) 45% 50%,rgba(255,255,255,0) 50% 100%);}
    .hero::after{background:linear-gradient(108deg,rgba(211,226,239,0) 0 42%,rgba(211,226,239,.25) 42% 45.5%,rgba(236,243,248,.38) 45.5% 48%,rgba(211,226,239,0) 48% 100%);}

    .availability-section{display:block;}
    .availability-heading{align-items:flex-end; flex-direction:row; justify-content:space-between; margin-bottom:2.2rem;}
    .availability-heading .legend{margin-top:0;}
    .availability-layout{align-items:center; display:grid; gap:2.2rem; grid-template-columns:minmax(0,1fr) 290px;}
    .map-wrapper{max-width:760px;}

    .lots-carousel{grid-auto-columns:calc((100% - 3.6rem) / 4);}

    .key-facts{grid-template-columns:repeat(2,1fr); padding:0;}
    .key-fact{display:grid; gap:1rem; grid-template-columns:48px minmax(0,1fr); justify-content:initial; min-height:104px; padding:1.2rem 2rem;}
    .key-fact i{font-size:2rem; text-align:center; width:48px;}
    .key-fact strong{font-size:1.5rem;}
    .key-fact span{font-size:.9rem;}
    .key-fact small{font-size:.8rem;}
    .key-fact:nth-child(2){border-right:0;}
    .key-fact:nth-child(-n+2){border-bottom:1px solid #ddd;}

    .information-grid{grid-template-columns:1fr 1fr;}
    .professionals-card{grid-column:1/-1;}

    .information-section .section-heading h2{font-size:2.85rem;}

    .location-section{grid-template-columns:40% 60%;}
    .location-content{padding-right:2.5rem;}

    .contact-section{grid-template-columns:1fr 1.4fr;}
    .contact-section > .button{grid-column:2; justify-self:start;}
}

@media screen and (max-width:850px){
    .site-header-inner{min-height:76px; padding:0 1.2rem;}
    .menu-toggle{display:block;}
    .site-nav{background:#fff; box-shadow:var(--shadow); display:none; flex-direction:column; left:1rem; padding:1.2rem; position:absolute; right:1rem; top:76px;}
    .site-nav.open{display:flex;}
    .site-nav a{font-size:.82rem; width:100%;}
    .site-nav .button{margin-left:0;}

    .hero{display:flex; flex-direction:column; min-height:0;}
    .hero-content{min-height:auto; padding:4rem 2rem; width:100%;}
    .hero-content .button{align-self:flex-start;}
    .hero-image{background-position:center; left:auto; min-height:360px; position:relative; right:auto; top:auto;}
    .hero::before,.hero::after{display:none;}

    .availability-section{overflow:hidden;}
    .availability-heading{align-items:flex-start; flex-direction:column; min-width:0; width:100%;}
    .availability-heading .legend{margin-top:1.2rem;}
    .availability-heading h2{font-size:2.35rem; white-space:normal;}
    .availability-layout{grid-template-columns:minmax(0,1fr); min-width:0; width:100%;}
    .map-wrapper{max-width:100%; min-width:0; overflow:hidden; width:100%;}
    .map-wrapper > div{background:none!important; height:auto!important; max-width:100%!important; min-width:0!important; width:100%!important;}
    .map-wrapper > div canvas{display:none!important;}
    .map-wrapper > div .map{display:block!important; height:auto!important; max-width:100%!important; opacity:1!important; position:static!important; width:100%!important;}
    .lot-panel{box-sizing:border-box; margin:0 auto; max-width:100%; min-width:0; overflow:hidden; width:100%;}
    .lot-panel dl div{gap:1rem;}
    .lot-panel dt,.lot-panel dd{min-width:0;}
    .lot-panel dd{text-align:right;}

    .lots-carousel{grid-auto-columns:calc((100% - 2.4rem) / 3);}

    .location-section{grid-template-columns:1fr;}
    .location-content{padding:4rem 0 2.5rem;}
    .location-map iframe{min-height:390px;}

    .contact-section{grid-template-columns:1fr;}
    .contact-section > div:first-child{border-bottom:1px solid var(--border); border-right:0; padding-bottom:1.5rem; padding-right:0;}
    .contact-section > .button{grid-column:auto; justify-self:start;}

    .site-footer-inner{grid-template-columns:100px 1fr;}
    .footer-legal{grid-column:1/-1; text-align:left;}
}

@media screen and (max-width:650px){
    main{padding:0;}

    .hero-content{padding:3rem 1.2rem;}
    .hero-image{min-height:280px;}

    .key-facts{grid-template-columns:1fr; margin:0; padding:0 1.2rem;}
    .key-fact{border-bottom:1px solid #ddd; border-right:0!important; grid-template-columns:44px minmax(0,1fr); min-height:88px; padding:1rem .4rem;}
    .key-fact i{width:44px;}
    .key-fact:last-child{border-bottom:0;}

    .section{padding:3.5rem 1.2rem;}
    .availability-section{padding-left:1.2rem; padding-right:1.2rem;}
    .map-wrapper{margin-left:0; margin-right:0;}
    .lot-panel{padding:1.6rem 1.35rem;}
    .section-heading-inline{align-items:flex-start; flex-direction:column;}
    .available-count{text-align:left;}

    .lots-swipe-hint{align-items:center; color:#777; display:flex; font-size:.8rem; gap:.45rem; margin:-.4rem 0 .8rem;}
    .lots-swipe-hint i{color:var(--green-dark);}
    .lots-carousel-wrapper{grid-template-columns:1fr;}
    .lots-carousel{gap:1rem; grid-auto-columns:calc((100% - 1rem) / 2);}
    .carousel-arrow{display:none;}

    .information-section .section-heading h2{font-size:2.45rem; white-space:normal;}
    .information-grid{grid-template-columns:1fr;}
    .professionals-card{grid-column:auto;}

    .location-section{padding:0 1.2rem 1.2rem;}

    .contact-section{padding:3rem 1.2rem;}

    .site-footer-inner{grid-template-columns:1fr; padding:2rem 1.2rem;}
    .footer-nav{grid-template-columns:1fr 1fr;}
    .footer-legal{grid-column:auto;}
    .footer-logo{width:92px;}
}


@media screen and (max-width:460px){
    .lots-carousel{grid-auto-columns:88%; padding-right:12%;}

    .contact-section h2{font-size:2.25rem;}
}