/* ============================================================
   24 Ocean — shared styles
   Coastal-elegance aesthetic (Cormorant serif + Jost sans,
   sand/sea palette, generous whitespace, all-caps eyebrows)
   ============================================================ */
:root{
  --sand:#f4efe7;
  --sand-deep:#e7ddcd;
  --ink:#2c3338;
  --ink-soft:#5b6670;
  --sea:#6f97a3;
  --sea-deep:#3f5f6b;
  --shell:#ffffff;
  --line:#ded4c4;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Jost',-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);color:var(--ink);background:var(--shell);
  font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:.01em;line-height:1.15;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px;}
.eyebrow{
  font-family:var(--sans);font-weight:400;text-transform:uppercase;
  letter-spacing:.32em;font-size:.72rem;color:var(--sea);
}

/* ---------- NAV ---------- */
header.nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;}
.brand{font-family:var(--serif);font-size:1.5rem;letter-spacing:.18em;text-transform:uppercase;}
.brand small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.34em;color:var(--sea);text-align:center;margin-top:2px;}
nav ul{display:flex;gap:28px;list-style:none;align-items:center;}
nav a{text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;font-weight:400;color:var(--ink-soft);transition:color .2s;}
nav a:hover,nav a.active{color:var(--sea-deep);}
.menu-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--ink);}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:78vh;display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;overflow:hidden;padding:0;
  background-size:cover;background-position:center;
  background-image:linear-gradient(180deg,rgba(40,55,62,.28),rgba(40,55,62,.5)),
    linear-gradient(120deg,#8fb0b8,#5f8290 55%,#3f5f6b);
}
/* photo-backed tiles: when an inline background-image is set, cover it and hide the label text */
.ph[style*="url"],.media[style*="url"],.home-img[style*="url"],.mini-img[style*="url"]{
  background-size:cover !important;background-position:center !important;color:transparent !important;font-size:0 !important;
}
.hero.short{min-height:56vh;}
.hero .placeholder-note{position:absolute;bottom:14px;left:0;right:0;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7;}
.hero-content{padding:40px 20px;max-width:820px;}
.hero h1{font-size:clamp(2.6rem,6vw,4.6rem);color:#fff;font-weight:500;}
.hero .sub{margin-top:16px;font-size:1.05rem;letter-spacing:.06em;font-weight:300;}
.hero .eyebrow{color:#e7ddcd;}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-block;margin-top:30px;padding:14px 34px;border:1px solid rgba(255,255,255,.8);
  color:#fff;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;cursor:pointer;
  background:none;font-family:var(--sans);transition:background .25s,color .25s;
}
.btn:hover{background:#fff;color:var(--sea-deep);}
.btn.dark{border-color:var(--sea-deep);color:var(--sea-deep);}
.btn.dark:hover{background:var(--sea-deep);color:#fff;}
.btn.solid{background:var(--sea-deep);border-color:var(--sea-deep);color:#fff;}
.btn.solid:hover{background:var(--sea);border-color:var(--sea);color:#fff;}

/* ---------- SECTIONS ---------- */
section{padding:96px 0;}
.center{text-align:center;max-width:760px;margin:0 auto;}
.section-title{font-size:clamp(1.9rem,3.6vw,2.8rem);margin:14px 0 20px;}
.lead{font-size:1.12rem;color:var(--ink-soft);font-weight:300;}
.rule{width:60px;height:1px;background:var(--sea);margin:26px auto;}
.alt{background:var(--sand);}

/* ---------- IMAGE TRIO (Haven motif) ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:52px;}
.trio .ph{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#cdd9d8,#9db6bc 60%,#6f97a3);
  color:rgba(255,255,255,.85);font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:10px;
}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px;}
.gallery .ph{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#cdd9d8,#9db6bc 60%,#6f97a3);
  color:rgba(255,255,255,.85);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;text-align:center;padding:10px;
}
.gallery .ph.wide{grid-column:span 2;aspect-ratio:8/3;}

/* ---------- FEATURE BLOCK (alternating image + text) ---------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;margin-top:0;}
.feature .media{
  min-height:380px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#cdd9d8,#9db6bc 60%,#6f97a3);
  color:rgba(255,255,255,.85);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:16px;
}
.feature .text{padding:64px 56px;display:flex;flex-direction:column;justify-content:center;}
.feature .text h3{font-size:2rem;margin:10px 0 14px;}
.feature.reverse .media{order:2;}
.feature.reverse .text{order:1;}

/* ---------- HOMES GRID (home page) ---------- */
.homes{display:grid;grid-template-columns:repeat(2,1fr);gap:38px;margin-top:56px;}
.home-card{background:var(--shell);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;}
.home-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(63,95,107,.14);}
.home-img{
  aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#cdd9d8,#9db6bc 60%,#6f97a3);
  color:rgba(255,255,255,.85);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
}
.home-body{padding:30px 32px 34px;flex:1;display:flex;flex-direction:column;}
.home-num{font-family:var(--sans);font-size:.7rem;letter-spacing:.3em;color:var(--sea);text-transform:uppercase;}
.home-body h3{font-size:1.7rem;margin:6px 0 4px;}
.home-addr{font-size:.82rem;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;}
.home-feat{margin-top:16px;color:var(--ink-soft);flex:1;}
.home-link{margin-top:20px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sea-deep);border-bottom:1px solid var(--sea);display:inline-block;padding-bottom:3px;align-self:flex-start;}

/* ---------- SPEC STRIP ---------- */
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:52px;text-align:center;}
.spec .n{font-family:var(--serif);font-size:2.4rem;color:var(--sea-deep);}
.spec .l{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;}
.amen{margin-top:44px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.amen span{border:1px solid var(--line);background:#fff;padding:9px 18px;border-radius:40px;font-size:.76rem;letter-spacing:.08em;color:var(--ink-soft);}

/* ---------- BOOKING CARDS ---------- */
.book-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:38px;margin-top:52px;text-align:left;}
.book-card{background:#fff;border:1px solid var(--line);padding:36px 38px;}
.book-card h3{font-size:1.5rem;margin-bottom:10px;}
.book-card ul{list-style:none;margin-top:14px;}
.book-card li{padding:9px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:.94rem;}
.book-card li:last-child{border-bottom:none;}
.book-card li span:first-child{color:var(--ink-soft);letter-spacing:.04em;}
.book-card li span:last-child{font-weight:400;text-align:right;}

/* ---------- INQUIRY FORM ---------- */
.form-wrap{max-width:760px;margin:52px auto 0;text-align:left;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;}
.field{display:flex;flex-direction:column;}
.field.full{grid-column:1 / -1;}
.field label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;}
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:.98rem;font-weight:300;color:var(--ink);
  background:#fff;border:1px solid var(--line);padding:13px 15px;border-radius:2px;transition:border-color .2s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--sea);}
.field textarea{resize:vertical;min-height:120px;}
.radios{display:flex;gap:22px;flex-wrap:wrap;margin-top:2px;}
.radios label{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:.02em;font-size:.92rem;color:var(--ink);margin:0;cursor:pointer;}
.radios input{accent-color:var(--sea-deep);}
.form-actions{margin-top:30px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.form-note{font-size:.82rem;color:var(--ink-soft);}
.form-msg{margin-top:20px;padding:14px 18px;border-radius:3px;font-size:.92rem;display:none;}
.form-msg.ok{display:block;background:#eaf2f0;border:1px solid var(--sea);color:var(--sea-deep);}
.form-msg.err{display:block;background:#f7ece9;border:1px solid #cba79c;color:#8a4a3a;}

/* ---------- MAP ---------- */
.map-ph{margin-top:40px;aspect-ratio:16/7;background:linear-gradient(135deg,#cdd9d8,#9db6bc 60%,#6f97a3);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--line);text-align:center;padding:12px;}
.map-frame{margin-top:40px;border:1px solid var(--line);overflow:hidden;line-height:0;}
.map-frame iframe{display:block;width:100%;height:460px;border:0;}

/* ---------- OTHER HOMES (bottom of property page) ---------- */
.more-homes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:48px;}
.mini-card{border:1px solid var(--line);background:#fff;text-align:center;padding:0 0 26px;transition:transform .2s,box-shadow .2s;}
.mini-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(63,95,107,.13);}
.mini-card .mini-img{aspect-ratio:3/2;background:linear-gradient(135deg,#cdd9d8,#9db6bc 60%,#6f97a3);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px;}
.mini-card h4{font-family:var(--serif);font-size:1.3rem;font-weight:500;}
.mini-card p{font-size:.78rem;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;margin-top:2px;}

/* ---------- CONTACT FOOTER ---------- */
footer.contact{background:var(--sea-deep);color:#fff;padding:90px 0 60px;text-align:center;}
footer.contact h2{color:#fff;font-size:clamp(2rem,4vw,3rem);}
footer.contact .eyebrow{color:#bcd2d6;}
footer.contact a.mail{display:inline-block;margin-top:22px;font-size:1.35rem;font-family:var(--serif);border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:3px;}
.nap{margin-top:26px;font-size:.9rem;letter-spacing:.06em;color:#cfe0e3;}
.foot-note{margin-top:44px;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:#9fbcc1;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:820px){
  nav ul{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--line);}
  nav ul.open{display:flex;}
  nav li{border-top:1px solid var(--line);}
  nav a{display:block;padding:16px 28px;}
  .menu-toggle{display:block;}
  .homes,.book-grid,.form-grid{grid-template-columns:1fr;}
  .feature{grid-template-columns:1fr;}
  .feature.reverse .media{order:1;}
  .feature.reverse .text{order:2;}
  .feature .text{padding:44px 28px;}
  .spec{grid-template-columns:repeat(2,1fr);gap:34px 24px;}
  .trio,.gallery,.more-homes{grid-template-columns:1fr;}
  .gallery .ph.wide{grid-column:auto;aspect-ratio:4/3;}
  section{padding:70px 0;}
}