/* Villas page hero (owner 22 Oct, option 2a): full-width slideshow, alternating villas, headline on top. */
.hvx{position:relative;overflow:hidden;background:var(--green-dk);min-height:560px;height:min(86vh,820px)}
.hvx .hero-headline{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:min(900px,calc(100% - 150px));text-align:center;z-index:6;background:transparent!important;margin:0;padding:0}
.hvx-slide{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.hvx-slide.on{opacity:1;animation:hvxZoom 9s ease-out forwards}
@keyframes hvxZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.hvx-shade{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;background:rgba(12,28,18,.5);pointer-events:none}
.hvx-label{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:60px 5% 24px;background:linear-gradient(transparent,rgba(22,61,34,.92));display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.hvx-btns{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:0;padding:4px}
/* a framing layer on each button (owner 22 Oct): green around the gold one, gold around the green one */
.hvx-btns .btn-g{outline:2px solid var(--green);outline-offset:3px}
.hvx-btns .btn-dk{outline:2px solid var(--gold);outline-offset:3px}
.hvx-go{font-family:var(--ff-u);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--green);background:var(--gold);padding:12px 20px;text-decoration:none;white-space:nowrap}
.hvx-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:1px solid var(--gold);background:rgba(22,61,34,.55);color:#fff;font-size:22px;cursor:pointer}
.hvx-prev{left:18px}.hvx-next{right:18px}
.hvx-dots{position:absolute;left:0;right:0;bottom:104px;z-index:4;display:flex;gap:2px;justify-content:center}
.hvx-dot{width:28px;height:28px;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.hvx-dot span{width:9px;height:9px;border-radius:50%;border:1.5px solid #fff}
.hvx-dot.on span{background:var(--gold);border-color:var(--gold)}
/* hero search bar (owner 22 Oct): white pill under the headline: villa · check-in · checkout · guests · gold search button */
.hero .hsb{display:grid;grid-template-columns:1.25fr 1fr 1fr 0.9fr auto;align-items:center;max-width:860px;margin:30px auto 0;padding:8px 8px 8px 10px;border:0;border-radius:999px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25);text-align:left}
.hsb-f{display:flex;flex-direction:column;padding:6px 18px;border-right:1px solid #ddd;cursor:pointer;min-width:0}
.hsb-f:nth-child(4){border-right:0}
/* fonts follow the site (owner 23 Oct): labels in the small spaced capitals used across the site, values in Cormorant */
.hsb-f > span{font-family:var(--ff-u);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--green)}
.hsb-f input,.hsb-f select{font-family:var(--ff-d);font-size:19px;font-weight:600;color:var(--text);border:0;background:transparent;padding:2px 0 0;width:100%;outline:none;font-style:normal}
.hsb-f input:invalid{color:#8a8a8a}
.hsb-f:focus-within{background:#f3f3f3;border-radius:999px}
.hsb-villa{flex-direction:row;align-items:center;gap:8px;color:#444}
.hsb-villa select{padding:0;font-size:16px}
.hsb-villa select:invalid{color:#555}
/* Villa field: our own list in the site's fonts instead of the browser's (owner 23 Oct) */
.hsb-villa{position:relative}
.hsb-dd-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none}
.hsb-dd{flex:1;min-width:0}
.hsb-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;border:0;background:transparent;padding:2px 0;cursor:pointer;font-family:var(--ff-d);font-size:19px;font-weight:600;color:#8a8a8a;text-align:left}
.hsb-dd.has-value .hsb-dd-btn{color:var(--text)}
.hsb-f:not(.hsb-villa) .hsb-dd{position:relative}
.hsb-dd-right .hsb-dd-list{left:auto;right:-10px;min-width:180px;max-height:300px;overflow-y:auto}
.hsb-dd-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hsb-dd-list{position:absolute;left:-6px;top:calc(100% + 14px);z-index:20;min-width:320px;margin:0;padding:8px;list-style:none;background:#fff;border:1px solid var(--gold-dim);border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.hsb-dd-list li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:10px;cursor:pointer;outline:none}
.hsb-dd-list li strong{font-family:var(--ff-d);font-size:21px;font-weight:600;color:var(--green);line-height:1.15}
.hsb-dd-list li small{font-family:var(--ff-u);font-size:11px;letter-spacing:.04em;color:var(--muted)}
.hsb-dd-list li:hover,.hsb-dd-list li:focus{background:var(--cream)}
.hsb-dd-list li[aria-selected="true"] strong::after{content:"  ✓";color:var(--gold);font-size:16px}
.hero .hsb .hsb-go{width:56px;height:56px;margin:0;padding:0;border-radius:50%;background:var(--gold);color:var(--green);display:flex;align-items:center;justify-content:center}
.hero .hsb .hsb-msg{grid-column:1 / -1;margin:0;min-height:0;padding:0 18px;text-align:center}
.hero .hsb .hsb-msg:empty{display:none}
.hero .hsb .hsb-browse{position:absolute;left:0;right:0;bottom:-34px;color:#fff;font-size:13px}
.hero .hsb{position:relative}
@media (max-width:760px){
  .hero .hsb{grid-template-columns:1fr 1fr;border-radius:18px;padding:10px;gap:4px}
  .hsb-f{border-right:0;border-bottom:1px solid #eee}
  .hsb-f:nth-child(1){grid-column:1 / -1}
  .hero .hsb .hsb-go{grid-column:1 / -1;width:100%;height:48px;border-radius:12px}
  .hsb-f:focus-within{border-radius:10px}
}
@media (max-width:760px){
  .hvx{height:auto;min-height:600px}
  .hvx .hero-headline{top:36%}
  .hvx-nav{width:40px;height:40px}
  .hvx-dots{bottom:150px}
}
@media (prefers-reduced-motion:reduce){.hvx-slide.on{animation:none}}