
:root{
  --ink:#18343a;
  --ocean:#0c7f86;
  --deep:#07585f;
  --sand:#f4efe6;
  --white:#fff;
  --coral:#e3785d;
  --shadow:0 18px 50px rgba(13,46,52,.15);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"DM Sans",sans-serif;color:var(--ink);background:#fff;line-height:1.6}
img{display:block;width:100%;height:100%;object-fit:cover}
a{text-decoration:none;color:inherit}
.site-header{position:fixed;z-index:20;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(0,0,0,.08)}
.brand{display:flex;align-items:baseline;gap:.45rem;font-family:"Playfair Display",serif;font-size:1.55rem;font-weight:700}
.brand small{text-transform:uppercase;letter-spacing:.2em;font-family:"DM Sans",sans-serif;font-size:.62rem;color:var(--ocean)}
nav{display:flex;align-items:center;gap:1.7rem;font-weight:600;font-size:.93rem}
.nav-cta{background:var(--ocean);color:white;padding:.65rem 1rem;border-radius:999px}
.menu-button{display:none;border:0;background:none;font-size:1.6rem}
.hero{height:min(880px,100vh);min-height:680px;position:relative;margin-top:76px;color:white}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,31,37,.75),rgba(3,31,37,.15) 70%),linear-gradient(0deg,rgba(3,31,37,.2),transparent)}
.hero-content{position:absolute;left:7vw;bottom:12%;max-width:700px}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.77rem;font-weight:700;margin:0 0 .8rem}
.eyebrow.dark{color:var(--ocean)}
h1,h2,h3{font-family:"Playfair Display",serif;line-height:1.08;margin:0}
h1{font-size:clamp(3.4rem,7vw,6.7rem);max-width:900px}
h2{font-size:clamp(2.3rem,4vw,4.3rem)}
h3{font-size:1.75rem}
.hero-content>p:not(.eyebrow){font-size:1.2rem;max-width:650px}
.hero-actions{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:.95rem 1.4rem;font:inherit;font-weight:700;cursor:pointer}
.button.primary{background:var(--coral);color:white}
.button.ghost{border:1px solid rgba(255,255,255,.7);color:white;background:rgba(255,255,255,.08)}
.button.secondary{background:var(--ink);color:white;margin:2rem auto 0}
.section{padding:7rem 7vw}
.intro{display:grid;grid-template-columns:1.1fr 1fr;gap:8vw;align-items:end}
.intro>p{font-size:1.14rem;margin:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--sand);padding:2.5rem 7vw}
.stats div{text-align:center;border-right:1px solid rgba(24,52,58,.17)}
.stats div:last-child{border:0}
.stats strong{display:block;font-family:"Playfair Display",serif;font-size:2rem}
.stats span{font-size:.85rem;text-transform:uppercase;letter-spacing:.12em}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.feature-grid article{background:white;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.feature-grid article img{height:300px}
.feature-grid article div{padding:1.6rem}
.gallery-section{background:var(--sand);padding:7rem 5vw;text-align:center}
.section-heading{max-width:850px;margin:0 auto 3rem}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:260px;gap:12px}
.gallery-item{padding:0;border:0;overflow:hidden;cursor:pointer;background:none}
.gallery-item.wide{grid-column:span 2}
.gallery-item img{transition:transform .35s ease}
.gallery-item:hover img{transform:scale(1.035)}
.stay{display:grid;grid-template-columns:1.15fr .85fr;gap:6vw;align-items:center}
.stay-photo{height:640px;border-radius:22px;overflow:hidden}
.stay-copy p{font-size:1.08rem}
.stay-copy ul{padding-left:1.2rem;columns:2;column-gap:2rem}
.location{height:720px;position:relative;color:white}
.location:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,31,37,.64),rgba(3,31,37,.08))}
.location-card{position:absolute;z-index:2;left:7vw;top:50%;transform:translateY(-50%);max-width:590px}
.location-card p:last-child{font-size:1.1rem}
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:7vw;background:#f8fbfb}
.contact form{background:white;padding:2rem;border-radius:20px;box-shadow:var(--shadow)}
label{display:block;font-weight:700;font-size:.9rem;margin-bottom:1rem}
input,textarea{width:100%;margin-top:.4rem;border:1px solid #c9d5d7;border-radius:10px;padding:.85rem;font:inherit}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-note{font-size:.78rem;color:#60777b}
footer{padding:3rem 7vw;background:var(--ink);color:white;display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.footer-brand small{color:#7dd1d5}
dialog{border:0;padding:0;background:transparent;max-width:min(92vw,1400px)}
dialog::backdrop{background:rgba(0,0,0,.88)}
dialog img{max-height:88vh;width:auto;max-width:92vw;object-fit:contain}
#closeLightbox{position:fixed;right:2rem;top:1.5rem;border:0;background:transparent;color:white;font-size:3rem;cursor:pointer}
@media(max-width:900px){
  nav{display:none;position:absolute;top:76px;left:0;right:0;background:white;padding:1.5rem 5vw;flex-direction:column;align-items:flex-start;box-shadow:var(--shadow)}
  nav.open{display:flex}.menu-button{display:block}
  .intro,.stay,.contact{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr);gap:1.5rem}
  .stats div{border:0}
  .feature-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:210px}
  .stay-photo{height:460px}
}
@media(max-width:560px){
  .site-header{padding:0 1rem}.brand{font-size:1.3rem}
  .hero{min-height:620px}.hero-content{left:1.2rem;right:1.2rem;bottom:8%}
  .section{padding:5rem 1.2rem}
  .stats{padding:2rem 1rem}
  .gallery-section{padding:5rem .7rem}
  .gallery{grid-auto-rows:160px;gap:6px}
  .gallery-item.wide{grid-column:span 2}
  .stay-copy ul{columns:1}
  .form-row{grid-template-columns:1fr}
  footer{padding:2.5rem 1.2rem}
}
