/* NEXESS Management – version 2: same base, a bit more life (palm photos, color, depth) */
@import url("style.css");

:root{
  --blue-dark:#1683b5;
  --tint:#e9f5f8;
  --shadow:0 18px 40px -18px rgba(22,60,80,.28);
}
h1,h2{font-weight:700;letter-spacing:-.02em}
.eyebrow{color:#1a8fa0}
.btn-primary{background:var(--blue-dark);border-color:var(--blue-dark);box-shadow:0 8px 20px -8px rgba(22,131,181,.6)}
.btn-primary:hover{background:#0f6f9c;border-color:#0f6f9c}
.tint{background:var(--tint)}

/* full-width palm hero */
.hero-full{position:relative;min-height:min(86vh,780px);display:flex;align-items:center;padding:96px 0 150px;overflow:hidden}
.hero-full .bg,.banner .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.hero-full::before,.banner::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(250,248,244,.97) 0%,rgba(250,248,244,.9) 38%,rgba(250,248,244,.35) 64%,rgba(250,248,244,0) 80%)}
.hero-full .wrap,.banner .wrap{position:relative;z-index:2;width:100%}
.hero-text{max-width:540px}
.hero-full h1{font-size:clamp(3rem,6.5vw,5.2rem);margin-bottom:.15em;color:#14222c}
.hero-full .tagline{font:600 .9rem/1.5 "Montserrat",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:1.5em}
.hero-full .lead{color:var(--ink);margin-bottom:2em}
.hero-full .btn-ghost{background:rgba(255,255,255,.7)}

/* facts float over the hero */
.facts{position:relative;z-index:3;margin-top:-90px;background:var(--white);border:0;border-radius:18px;box-shadow:var(--shadow);padding:36px 40px}
.fact svg{width:44px;height:44px;padding:10px;border-radius:50%;background:var(--tint);color:var(--blue-dark)}

/* sub-page banners */
.banner{position:relative;min-height:440px;display:flex;align-items:center;padding:80px 0;overflow:hidden}
.banner-text{max-width:560px}
.banner .lead{color:var(--ink)}

/* cards with depth */
.dest{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .3s}
.dest:hover{transform:translateY(-4px)}
.dest .ph{border-radius:0;margin:0 0 22px;aspect-ratio:4/3}
.dest>:not(.ph){padding:0 26px}
.dest>p{padding-bottom:28px}
.stay .ph{box-shadow:var(--shadow)}
.split-img,.hero-img{box-shadow:var(--shadow)}
.unit{box-shadow:0 10px 30px -20px rgba(22,60,80,.35);border-color:transparent}
/* unit cards with a cover photo from the listing */
.units{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.unit:has(.ph){overflow:hidden;padding-top:0}
.unit .ph{display:block;margin:0 -28px 22px;aspect-ratio:3/2;overflow:hidden}
.unit .ph img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.unit .ph:hover img{transform:scale(1.04)}
.unit .beds{display:inline-flex;align-items:center;gap:.45em;margin:.1em 0 .6em;padding:.25em .75em;border-radius:999px;background:var(--tint);color:var(--blue-dark);font-weight:600;font-size:.85rem}
.unit .beds::before{content:"";width:1.1em;height:1.1em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 18V7M3 14h18v4M21 14v-2a3 3 0 0 0-3-3h-7v5M7 11.5h.01'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 18V7M3 14h18v4M21 14v-2a3 3 0 0 0-3-3h-7v5M7 11.5h.01'/%3E%3C/svg%3E") center/contain no-repeat}

/* palm photo behind the management band */
.band{background:linear-gradient(rgba(16,38,52,.8),rgba(16,38,52,.8)),url("img/hero-old.jpg") center 35%/cover}

/* footer gets a soft tint */
.site-footer{background:var(--tint);border-top:0}
.social a{background:var(--white);border-color:transparent}

@media (max-width:860px){
  .hero-full{min-height:0;padding:64px 0 140px}
  .hero-full::before,.banner::before{background:linear-gradient(180deg,rgba(250,248,244,.9) 0%,rgba(250,248,244,.72) 55%,rgba(250,248,244,.2) 100%)}
  .facts{margin-top:-80px;padding:28px 24px}
  .banner{min-height:340px}
}