body{margin:0}
/* Layout: site-plan-led single page. Hero pairs headline with a drawn plot layout; plot calculator is the interactive centerpiece. */
:root{
  --bg:#EEF1EA; --surface:#FFFFFF; --fg:#16241A; --muted:#55645A; --line:#D3DACD;
  --forest:#1F4D32; --forest-ink:#F2F6EE; --marigold:#E8A317; --plot:#CFDDC6; --plot-sold:#B9C4B0;
  --display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --body:'Public Sans','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:400 16px/1.6 var(--body);padding-block:0;margin:0}
.wrap{max-width:1184px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-.02em}
h1{font-size:clamp(2.4rem,6vw,4.4rem);font-weight:800}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700}
h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}
p{margin:0}
.label{font:500 .75rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
a{color:inherit}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px;flex-wrap:wrap}
.logo{font:800 1.25rem var(--display);text-decoration:none;display:flex;align-items:center;gap:10px}
.logo i{width:22px;height:22px;background:var(--forest);border-radius:50% 0 50% 0;display:block}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav ul a{text-decoration:none;font-weight:500;font-size:.95rem}
nav ul a:hover{text-decoration:underline;text-underline-offset:4px}
.btn{display:inline-block;background:var(--forest);color:var(--forest-ink);padding:13px 22px;font:600 .95rem var(--body);border:0;border-radius:4px;text-decoration:none;cursor:pointer}
.btn.alt{background:transparent;color:var(--fg);border:1.5px solid var(--fg)}
.actions{display:flex;gap:12px;flex-wrap:wrap}
section{padding-block:64px;border-top:1px solid var(--line)}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:36px;max-width:60ch}
.sec-head p{color:var(--muted)}
.amen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-left:1px solid var(--line)}
.amen div{padding:4px 22px 28px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px;min-width:0}
.amen ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;color:var(--muted)}
.amen li::before{content:"";display:inline-block;width:8px;height:2px;background:var(--marigold);margin-right:10px;vertical-align:middle}
.location-intro{max-width:70ch;margin-bottom:28px}
.location-map,.location-landmarks{min-width:0}
.map-frame{width:100%;aspect-ratio:4/3;margin:0;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.map-frame iframe{display:block;width:100%;height:100%;border:0}
#location{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(24px,5vw,56px);align-items:start}
#location{position:relative;isolation:isolate;color:#EAF1E6;--muted:#A5B5A9;--line:#2D4034;--surface:#16261B}
#location::before,#location::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%)}
#location::before{background:#0E1A12}
#location::after{background:url(bgimage/photo6.jfif) center/cover no-repeat;opacity:.28}
.location-intro{grid-column:1/-1}
.location-landmarks h3{display:inline-flex;align-items:center;background:var(--marigold);color:#16241A;font-size:1.45rem;padding:12px 18px;margin:0 0 14px;border-radius:4px}
.location-landmarks ol{list-style:none;margin:0;padding:0}
.location-landmarks li{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.location-landmarks li span:first-child{flex:1;min-width:0}
.location-landmarks li .km{font:500 .95rem var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:var(--surface);border:1px solid var(--line);padding:28px}
form label{display:flex;flex-direction:column;gap:6px;font-weight:500;font-size:.9rem;min-width:0}
form .full{grid-column:1/-1}
form input,form select,form textarea{font:400 1rem var(--body);padding:11px 12px;border:1.5px solid var(--line);background:var(--bg);color:var(--fg);border-radius:4px;width:100%}
.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:18px}
.contact-info p{color:var(--muted)}
.sel{font-family:var(--mono);user-select:all;color:var(--fg)}
#msg{grid-column:1/-1;font-weight:600;color:var(--forest)}
footer{border-top:1px solid var(--line);padding-block:32px 40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
@media (max-width:820px){
  #location{grid-template-columns:1fr;row-gap:24px}
  .location-intro,.location-map,.location-landmarks{grid-column:1}
  .contact{grid-template-columns:1fr;gap:28px}
  form{grid-template-columns:1fr}
  section{padding-block:48px}
}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .15s}.btn:hover{transform:translateY(-2px)}}

.slider{position:relative;height:clamp(480px,84vh,780px);overflow:hidden;background:#0F2A1B;color:#fff;touch-action:pan-y}
.slide{position:absolute;inset:0;transform:translateX(100%);visibility:hidden;transition:transform .85s cubic-bezier(.65,0,.35,1)}
.slide.active{transform:none;visibility:visible}
.bg{position:absolute;inset:-2%;background:var(--img,var(--ph)) center/cover no-repeat}
.bg.zoom{animation:zoom 7s ease-out forwards}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.07)}}


/* .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,18,10,.82) 0%,rgba(6,18,10,.48) 55%,rgba(6,18,10,.1) 100%),linear-gradient(0deg,rgba(6,18,10,.65),transparent 45%)} */

.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,18,10,.5) 0%,rgba(6,18,10,.2) 50%,rgba(6,18,10,0) 100%),linear-gradient(0deg,rgba(6,18,10,.45),transparent 40%)}


.ph-label{position:absolute;top:16px;right:max(16px,env(safe-area-inset-right,0px));font:500 .72rem var(--mono);letter-spacing:.06em;background:rgba(0,0,0,.5);padding:6px 10px;color:#fff}
.slide .wrap{position:relative;height:100%;display:flex;align-items:flex-end;padding-bottom:92px}
.copy{max-width:660px;display:flex;flex-direction:column;gap:18px;min-width:0}


/* .slide .hl{font:800 clamp(2.1rem,5.4vw,4.2rem)/1.04 var(--display);letter-spacing:-.02em;margin:0;color:#fff;text-wrap:balance}
.slide p.sub{font-size:1.12rem;color:rgba(255,255,255,.9);max-width:44ch} */

.slide .hl{font:800 clamp(1.6rem,3.6vw,2.7rem)/1.1 var(--display);letter-spacing:-.02em;margin:0;color:#fff;text-wrap:balance;text-shadow:0 2px 12px rgba(0,0,0,.45)}
.slide p.sub{font-size:1rem;color:#fff;max-width:44ch;text-shadow:0 1px 8px rgba(0,0,0,.5)}


.slide .btn{background:var(--marigold);color:#1B1A10}
.slide .btn.alt{background:transparent;color:#fff;border:1.5px solid #fff}
.ui{position:absolute;left:0;right:0;bottom:24px;z-index:3}
.ui .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px}
.dots{display:flex;gap:8px}
.dot{position:relative;width:clamp(30px,8vw,56px);height:24px;padding:0;background:none;border:0;cursor:pointer}
.dot::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:rgba(255,255,255,.38)}
.dot span{position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;width:0;background:var(--marigold)}
.dot.active span{animation:fill 4s linear forwards}
@keyframes fill{from{width:0}to{width:100%}}
.slider.paused .dot.active span{animation-play-state:paused}
@media (hover:hover){.slider:hover .dot.active span{animation-play-state:paused}}
.arrows{display:flex;gap:10px}
.arrows button{width:44px;height:44px;border:1.5px solid rgba(255,255,255,.75);background:rgba(0,0,0,.28);color:#fff;border-radius:50%;cursor:pointer;font-size:1.1rem}
.arrows button:hover{background:rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){.dot.active span{animation:none;width:100%}.bg.zoom{animation:none}.slide{transition-duration:.01s}}
@media (max-width:820px){.slide .wrap{padding-bottom:84px}.ph-label{top:12px}.arrows button{width:40px;height:40px}}

.sum-top{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;margin-bottom:40px}
.sum-top .sec-head{margin:0}
.sum-top>p{color:var(--muted);font-size:1.05rem;max-width:52ch}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.fact{padding:26px 22px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:8px;min-width:0}
.fact:first-child{border-left:0;padding-left:0}
.fact b{font:800 clamp(1.8rem,3.4vw,2.6rem)/1 var(--display);letter-spacing:-.02em;color:var(--forest)}
.fact span{font:500 .74rem/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fa-head{display:flex;flex-direction:column;align-items:center;text-align:center;margin:60px 0 30px}
.fa-head h3{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;font-style:italic}
.fa-head h3::after{content:"";display:block;width:56px;height:4px;background:var(--marigold);margin:14px auto 0}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcard{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--forest);padding:26px 24px 28px;display:flex;flex-direction:column;gap:16px;min-width:0}
.ficon{width:48px;height:48px;border-radius:50%;background:var(--forest);color:var(--forest-ink);display:grid;place-items:center}
.ficon svg{width:24px;height:24px}
.fcard h3{font-size:1.25rem}
.fcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.fcard li{display:flex;gap:12px;font-size:.97rem;line-height:1.4}
.fcard li::before{content:"";flex:none;width:6px;height:11px;border:solid var(--forest);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin:1px 5px 0 3px}
.band{margin-top:40px;background:var(--forest);color:var(--forest-ink);padding:26px 32px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;font:500 1.08rem/1.5 var(--body)}
.band p{margin:0;flex:1;min-width:240px;text-wrap:balance}
.band b{color:var(--marigold);font-weight:700;white-space:nowrap}
.band-tag{font:500 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--marigold);border:1.5px solid var(--marigold);padding:8px 11px;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){.fcard{transition:transform .2s,box-shadow .2s}.fcard:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(22,36,26,.12)}}
@media (max-width:820px){.sum-top{grid-template-columns:1fr;gap:20px}.facts{grid-template-columns:1fr 1fr}.fact:nth-child(3){border-left:0;padding-left:0}.fact:nth-child(n+3){border-top:1px solid var(--line)}.fgrid{grid-template-columns:1fr}.band{padding:22px 20px}}

body{overflow-x:clip}
#amenities{
  position:relative;isolation:isolate;color:var(--fg);
  --fg:#EAF1E6;--muted:#A5B5A9;--line:#2D4034;--surface:#16261B;--forest:#8CCB9B;--forest-ink:#0E1A12;
}
#amenities::before,#amenities::after{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
}
#amenities::before{background:#0E1A12}
#amenities::after{background:url(bgimage/photo6.jfif) center/cover no-repeat;opacity:.28}
#amenities .band{background:#1F4D32;color:#F2F6EE}
#amenities .fcard:hover{box-shadow:0 12px 28px rgba(0,0,0,.45)}

.promo{display:grid;grid-template-columns:1fr 1fr;gap:3px;background:var(--bg)}
.promo-panel{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(420px,62vh,600px);display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:56px max(20px,env(safe-area-inset-left,0px))}
.promo-panel::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--img,var(--ph)) center/cover no-repeat}
.promo-panel::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(6,18,10,.55)}
.promo-copy{max-width:440px;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
.promo-kicker{font:500 .78rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--marigold)}
.promo-copy h2{font-size:clamp(1.6rem,3vw,2.4rem);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.promo-copy h2::after{content:"";display:block;width:56px;height:3px;background:var(--marigold);margin:18px auto 0}
.promo-copy p{color:rgba(255,255,255,.92);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.promo .btn{background:var(--marigold);color:#1B1A10;margin-top:8px}
@media (prefers-reduced-motion:no-preference){.promo-panel::before{transition:transform 6s ease}.promo-panel:hover::before{transform:scale(1.06)}}
@media (max-width:820px){.promo{grid-template-columns:1fr}.promo-panel{min-height:380px}}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gallery button{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;background:var(--plot);overflow:hidden;cursor:zoom-in}
.gallery img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.gallery-modal{position:fixed;inset:0;z-index:90;background:rgba(6,14,9,.78);padding:clamp(12px,3vw,36px);display:flex;align-items:center;justify-content:center}
.gallery-modal[hidden]{display:none}
body.modal-open{overflow:hidden}
.gallery-modal-panel{width:min(1184px,100%);height:min(90vh,900px);background:var(--bg);color:var(--fg);padding:clamp(16px,3vw,32px);display:flex;flex-direction:column;overflow:hidden}
.gallery-modal-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:20px}
.gallery-modal-head h2{margin-top:10px}
.modal-close{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:1.7rem;cursor:pointer;color:var(--fg)}

.gallery-modal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:10px;overflow:auto;padding:2px;overscroll-behavior:contain;flex:1 1 auto;min-height:0}

.gallery-modal-grid button{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;background:var(--plot);overflow:hidden;cursor:zoom-in}
.gallery-modal-grid img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.gallery-more{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:32px;flex-wrap:wrap}
.lb{position:fixed;inset:0;z-index:100;background:rgba(6,14,9,.94);display:flex;align-items:center;justify-content:center;padding:60px max(16px,env(safe-area-inset-left,0px))}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;object-fit:contain}
.lb button{position:absolute;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);background:rgba(0,0,0,.45);color:#fff;font-size:1.2rem;cursor:pointer}
.lb-close{top:12px;right:max(12px,env(safe-area-inset-right,0px))}
.lb-prev{left:max(12px,env(safe-area-inset-left,0px));top:50%;margin-top:-22px}
.lb-next{right:max(12px,env(safe-area-inset-right,0px));top:50%;margin-top:-22px}
.lb-count{position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#fff;font:500 .8rem var(--mono)}
@media (prefers-reduced-motion:no-preference){.gallery img{transition:transform .4s}.gallery button:hover img{transform:scale(1.05)}}
@media (max-width:820px){.gallery{grid-template-columns:1fr 1fr}.gallery-modal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-modal{padding:0}.gallery-modal-panel{height:100dvh;padding:18px max(16px,env(safe-area-inset-left,0px)) max(18px,env(safe-area-inset-bottom,0px))}}


#gallery{
  position:relative;isolation:isolate;color:#fff;
  --fg:#fff;--muted:rgba(255,255,255,.78);--line:#2D4034;--surface:#16261B;--plot:#223228;
}
#gallery::before,#gallery::after{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
}
#gallery::before{background:#0E1A12}
#gallery::after{background:url(bgimage/photo10.jpg) center/cover no-repeat;opacity:.28}
#gallery .btn{background:var(--marigold);color:#1B1A10}


#contact{
  position:relative;isolation:isolate;color:#fff;color-scheme:dark;
  --fg:#fff;--bg:#0E1A12;--muted:rgba(255,255,255,.78);--line:#34493B;--surface:rgba(14,26,18,.82);--forest:#8CCB9B;
}
#contact::before,#contact::after{
  content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
}
#contact::before{background:#0E1A12}
#contact::after{background:url(bgimage/photo11.jpg) center/cover no-repeat;opacity:.28}
#contact .btn{background:var(--marigold);color:#1B1A10}


.logo img{display:block;height:44px;width:auto}
@media (max-width:820px){.logo img{height:36px}}