/* =========================================================
   Oceanfront Villas — Blue Hills, Turks & Caicos
   Stylesheet
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --turquoise:      #23A6A0;
  --turquoise-deep: #0E6E6A;
  --turquoise-pale: #DFF1EF;
  --ink:             #171B1B;
  --ink-soft:        #4A5252;
  --bone:            #F6F1E6;
  --bone-deep:       #E7DAB9;
  --violet:          #8E5AA0;
  --violet-pale:     #F0E4F1;
  --white:           #FFFFFF;

  --serif: 'Playfair Display', 'Times New Roman', serif;
  --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --container: 1200px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color:var(--ink);
  background:var(--bone);
  line-height:1.6;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  margin:0 0 .5em;
  line-height:1.15;
  color:var(--ink);
}
p{ margin:0 0 1em; }
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}
.eyebrow{
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--turquoise-deep);
  font-weight:500;
  margin-bottom:.9em;
  display:inline-block;
}
.section{ padding:96px 0; }
.section--tight{ padding:64px 0; }
.section--bone{ background:var(--bone); }
.section--white{ background:var(--white); }
.section--pale{ background:var(--turquoise-pale); }
.section--ink{ background:var(--ink); color:var(--bone); }
.section--ink h2, .section--ink h3{ color:var(--bone); }
.center{ text-align:center; }
.lede{
  font-size:1.08rem;
  color:var(--ink-soft);
  max-width:640px;
}
.center .lede{ margin-left:auto; margin-right:auto; }

/* Buttons */
.btn{
  display:inline-block;
  padding:14px 30px;
  border-radius:2px;
  font-family:var(--sans);
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .25s ease;
}
.btn--primary{ background:var(--turquoise); color:var(--white); }
.btn--primary:hover{ background:var(--turquoise-deep); }
.btn--outline{ border-color:var(--white); color:var(--white); }
.btn--outline:hover{ background:rgba(255,255,255,.15); }
.btn--dark{ background:var(--ink); color:var(--bone); }
.btn--dark:hover{ background:#000; }
.btn--violet{ background:var(--violet); color:var(--white); }
.btn--violet:hover{ background:#6f4380; }

/* =========== HEADER =========== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:22px 0;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
  background:rgba(23,27,27,.92);
  padding:12px 0;
  box-shadow:0 2px 18px rgba(0,0,0,.15);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
}
.logo{
  font-family:var(--serif);
  font-style:italic;
  color:var(--white);
  font-size:1.5rem;
  letter-spacing:.02em;
  display:flex; align-items:center; gap:10px;
}
.logo-mark{ width:32px; height:32px; flex:none; display:block; }
.logo span{
  font-family:var(--sans);
  font-style:normal;
  font-size:.62rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  opacity:.85;
  vertical-align:middle;
}
.nav-toggle{
  display:none;
  background:none; border:0; cursor:pointer;
  width:32px; height:24px; position:relative;
}
.nav-toggle span{
  position:absolute; left:0; right:0; height:2px; background:var(--white);
  transition:all .25s ease;
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:11px; }
.nav-toggle span:nth-child(3){ bottom:0; }

.main-nav ul{ display:flex; gap:36px; align-items:center; }
.main-nav a{
  color:var(--white);
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:400;
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, opacity .2s ease;
}
.main-nav a:hover, .main-nav a.is-active{ border-color:var(--turquoise); }
.main-nav a.btn--outline{ border:1px solid var(--white); padding:10px 22px; }
.main-nav a.btn--outline:hover{ border-color:var(--turquoise); }

/* =========== HERO =========== */
.hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  color:var(--white);
}
.hero::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,18,18,.15) 0%, rgba(15,18,18,.15) 40%, rgba(15,18,18,.75) 100%);
}
.hero-inner{
  position:relative; z-index:2;
  padding-bottom:80px;
  width:100%;
}
.hero .eyebrow{ color:var(--turquoise-pale); }
.hero h1{
  color:var(--white);
  font-size:clamp(2.4rem, 5.4vw, 4.4rem);
  max-width:820px;
}
.hero p.lede{ color:rgba(255,255,255,.88); }
.hero-cta{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }

.hero--sub{ min-height:90vh; }
.hero--sub .hero-inner{ padding-bottom:56px; }

/* =========== COLLECTION CARDS =========== */
.grid-3{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:32px;
  margin-top:56px;
}
.model-card{
  background:var(--white);
  overflow:hidden;
  border:1px solid var(--bone-deep);
  transition:transform .3s ease, box-shadow .3s ease;
}
.model-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px rgba(23,27,27,.12); }
.model-card__img{ height:230px; overflow:hidden; }
.model-card__img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.model-card:hover .model-card__img img{ transform:scale(1.06); }
.model-card__body{ padding:28px; }
.model-card__tag{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--violet); font-weight:500; margin-bottom:.6em; display:block;
}
.model-card__specs{
  display:flex; gap:18px; margin:16px 0 20px;
  font-size:.82rem; color:var(--ink-soft);
}
.model-card__specs strong{ display:block; color:var(--ink); font-family:var(--serif); font-size:1.05rem; }
.model-card a.btn{ width:100%; text-align:center; }

/* =========== ABOUT / SPLIT =========== */
.split{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.split img{ width:100%; height:100%; object-fit:cover; }
.split-copy h2{ margin-bottom:.6em; }
.split--wide-image{ grid-template-columns:1.9fr 1fr; }

/* =========== SITE PLAN =========== */
.siteplan-figure{ position:relative; margin-top:48px; }
.siteplan-figure img{ width:100%; display:block; }

.siteplan-figure--wide{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  margin-top:40px;
  margin-bottom:44px;
}

.siteplan-numbers{
  position:relative;
  height:40px;
  margin-bottom:6px;
}
.siteplan-numbers span{
  position:absolute; top:0; transform:translateX(-50%);
  width:32px; height:32px; border-radius:50%;
  background:var(--turquoise-deep); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:.92rem; font-weight:500;
}
.siteplan-numbers span::after{
  content:''; position:absolute; top:100%; left:50%;
  width:1px; height:12px; background:var(--bone-deep);
  transform:translateX(-50%);
}

.siteplan-key{
  display:flex; justify-content:center; gap:36px; flex-wrap:wrap;
  margin:0 0 44px; list-style:none; padding:0;
}
.siteplan-key li{ display:flex; align-items:center; gap:12px; }
.siteplan-key__nums{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 10px;
  border-radius:20px; background:var(--turquoise-pale); color:var(--turquoise-deep);
  font-family:var(--serif); font-size:.9rem; font-weight:500;
}
.siteplan-key__label{ font-size:.88rem; letter-spacing:.02em; color:var(--ink-soft); }

/* =========== FLOOR PLAN =========== */
.floorplan-figure{ max-width:860px; margin:48px auto 0; text-align:center; }
.floorplan-figure img{ width:100%; }
.siteplan-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
  margin-top:40px; text-align:center;
}
.siteplan-facts div{ padding:18px 10px; border-left:1px solid var(--bone-deep); }
.siteplan-facts div:first-child{ border-left:none; }
.siteplan-facts strong{ display:block; font-family:var(--serif); font-size:1.5rem; color:var(--turquoise-deep); }
.siteplan-facts span{ font-size:.8rem; color:var(--ink-soft); letter-spacing:.03em; }

/* =========== ROOM BY ROOM =========== */
.room-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--bone-deep);
  margin-top:48px;
}
.room-card{ background:var(--white); padding:38px 34px; }
.room-card .num{
  font-family:var(--serif); font-style:italic; color:var(--turquoise-deep);
  font-size:1rem; margin-bottom:14px; display:block;
}
.room-card h3{ font-size:1.15rem; margin-bottom:.5em; }
.room-card p{ font-size:.92rem; color:var(--ink-soft); margin:0; line-height:1.6; }

/* =========== TCI INFO =========== */
.tci-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:rgba(246,241,230,.15);
  margin-top:56px;
}
.tci-card{
  background:var(--ink); padding:38px 30px;
}
.tci-card .num{
  font-family:var(--serif); font-style:italic; color:var(--turquoise);
  font-size:1rem; margin-bottom:14px; display:block;
}
.tci-card h3{ color:var(--bone); font-size:1.15rem; }
.tci-card p{ color:rgba(246,241,230,.72); font-size:.92rem; margin:0; }

/* =========== GALLERY (model pages) =========== */
.gallery-wrap{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0 10px;
}
.gallery{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  grid-auto-rows:190px;
  gap:10px;
  margin-top:20px;
}
.gallery a{ display:block; overflow:hidden; grid-column:span 2; grid-row:span 2; cursor:zoom-in; }
.gallery a:nth-child(1){ grid-column:span 4; grid-row:span 3; }
.gallery a:nth-child(2){ grid-column:span 2; grid-row:span 3; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery a:hover img{ transform:scale(1.07); }

.gallery--strip{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:280px; }
.gallery--strip a,
.gallery--strip a:nth-child(1),
.gallery--strip a:nth-child(2){ grid-column:span 1; grid-row:span 1; }

.gallery--photos{ grid-template-columns:repeat(3, 1fr); grid-auto-rows:230px; }
.gallery--photos a,
.gallery--photos a:nth-child(1),
.gallery--photos a:nth-child(2){ grid-column:span 1; grid-row:span 1; }

/* =========== PASSWORD GATE =========== */
.pw-gate{
  position:fixed; inset:0; z-index:2000;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.pw-gate__box{
  background:var(--white);
  padding:56px 48px;
  max-width:420px; width:100%;
  text-align:center;
  border-radius:2px;
}
.pw-gate__mark{ width:58px; height:58px; display:block; margin:0 auto 14px; }
.pw-gate__logo{
  font-family:var(--serif); font-style:italic; font-size:1.5rem; color:var(--ink);
  display:block; margin-bottom:26px;
}
.pw-gate__logo span{
  font-family:var(--sans); font-style:normal; font-size:.68rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft); display:block; margin-top:6px;
}
.pw-gate__box h2{ margin:0 0 10px; }
.pw-gate__box p{ color:var(--ink-soft); font-size:.92rem; margin:0 0 24px; }
.pw-gate__box input[type="password"]{ margin-bottom:16px; text-align:center; letter-spacing:.15em; }
.pw-gate__box .btn{ width:100%; border:none; }
.pw-gate__error{
  color:#B23B3B; font-size:.85rem; margin:16px 0 0; display:none;
}
.pw-gate__error.is-visible{ display:block; }

/* =========== LIGHTBOX =========== */
.lightbox{
  position:fixed; inset:0; z-index:1200; background:#0F1212;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s ease;
  padding:60px 90px;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-img-wrap{ max-width:100%; max-height:100%; text-align:center; }
.lightbox img{
  max-width:100%; max-height:80vh; width:auto; height:auto;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  opacity:0; transform:scale(.97); transition:opacity .25s ease, transform .25s ease;
}
.lightbox.is-open img{ opacity:1; transform:scale(1); }
.lightbox-caption{
  color:rgba(246,241,230,.7); font-size:.82rem; letter-spacing:.04em;
  margin-top:16px; text-align:center;
}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:transparent; border:1px solid rgba(246,241,230,.35);
  color:var(--bone); cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{
  background:rgba(246,241,230,.12); border-color:rgba(246,241,230,.7);
}
.lightbox-close{
  top:26px; right:26px; width:44px; height:44px; border-radius:50%; font-size:1.3rem;
}
.lightbox-prev, .lightbox-next{
  top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; font-size:1.4rem;
}
.lightbox-prev{ left:26px; }
.lightbox-next{ right:26px; }
.lightbox-counter{
  position:absolute; top:30px; left:30px; color:rgba(246,241,230,.6);
  font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
}
@media (max-width:680px){
  .lightbox{ padding:80px 20px; }
  .lightbox-prev, .lightbox-next{ width:42px; height:42px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
  .lightbox-close{ top:16px; right:16px; }
  .lightbox-counter{ top:20px; left:20px; }
}

/* =========== SPECS TABLE =========== */
.specs-panel{
  background:var(--white); border:1px solid var(--bone-deep);
  padding:44px; display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
}
.specs-panel div{ text-align:center; }
.specs-panel div:last-child:nth-child(3n+1){ grid-column:1 / -1; max-width:220px; margin:0 auto; }
.specs-panel strong{ display:block; font-family:var(--serif); font-size:1.35rem; margin-bottom:4px; }
.specs-panel span{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.tbd{ color:var(--violet); font-style:italic; font-family:var(--serif); }

.feature-list{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; margin-top:28px;
}
.feature-list li{
  padding-left:26px; position:relative; font-size:.96rem; color:var(--ink-soft);
}
.feature-list li::before{
  content:''; position:absolute; left:0; top:9px; width:10px; height:10px;
  border:1.5px solid var(--turquoise); border-radius:50%;
}

/* =========== MODEL SWITCH STRIP =========== */
.model-switch{
  display:flex; border-top:1px solid var(--bone-deep); border-bottom:1px solid var(--bone-deep);
}
.model-switch a{
  flex:1; text-align:center; padding:20px 10px;
  font-family:var(--serif); font-size:1rem; color:var(--ink-soft);
  border-right:1px solid var(--bone-deep);
  transition:background .2s ease, color .2s ease;
}
.model-switch a:last-child{ border-right:none; }
.model-switch a.is-active, .model-switch a:hover{ background:var(--ink); color:var(--bone); }

/* =========== CONTACT / FOOTER =========== */
.contact-wrap{ display:grid; grid-template-columns:1.1fr 1fr; gap:64px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.form-row.full{ grid-template-columns:1fr; }
input, textarea, select{
  width:100%; padding:14px 16px; font-family:var(--sans); font-size:.92rem;
  border:1px solid var(--bone-deep); background:var(--white); color:var(--ink);
}
textarea{ resize:vertical; min-height:120px; }
label{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:block; margin-bottom:6px; }
.contact-info dt{ font-family:var(--serif); color:var(--turquoise-deep); margin-top:22px; }
.contact-info dt:first-child{ margin-top:0; }
.contact-info dd{ margin:2px 0 0; color:var(--ink-soft); }

.site-footer{
  background:var(--ink); color:rgba(246,241,230,.65);
  padding:50px 0 26px; font-size:.85rem;
}
.site-footer .container{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
}
.site-footer a{ color:rgba(246,241,230,.65); }
.site-footer a:hover{ color:var(--turquoise); }
.footer-links{ display:flex; flex-wrap:wrap; gap:12px 24px; }
.footer-links a{ white-space:nowrap; }

.violet-accent{ color:var(--violet); }
.bloom-divider{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0 0 40px; color:var(--violet);
}
.bloom-divider::before, .bloom-divider::after{
  content:''; height:1px; width:60px; background:var(--bone-deep);
}

/* =========== RESPONSIVE =========== */
@media (max-width: 980px){
  .main-nav{
    position:fixed; inset:0 0 0 auto; width:78%; max-width:340px;
    background:var(--ink); padding:100px 32px 32px;
    transform:translateX(100%); transition:transform .35s ease;
  }
  .main-nav.is-open{ transform:translateX(0); }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:22px; }
  .nav-toggle{ display:block; z-index:1100; }
  .split, .contact-wrap{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
  .siteplan-facts{ grid-template-columns:repeat(2,1fr); }
  .siteplan-facts div:nth-child(3){ border-left:none; }
  .tci-grid{ grid-template-columns:1fr; }
  .room-grid{ grid-template-columns:1fr; }
  .specs-panel{ grid-template-columns:repeat(2,1fr); }
  .specs-panel div:last-child:nth-child(3n+1){ grid-column:auto; max-width:none; margin:0; }
  .specs-panel div:last-child:nth-child(2n+1){ grid-column:1 / -1; max-width:220px; margin:0 auto; }
  .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; }
  .gallery a:nth-child(1){ grid-column:span 2; grid-row:span 2; }
  .gallery a:nth-child(2){ grid-column:span 2; grid-row:span 2; }
  .gallery--strip{ grid-template-columns:1fr; grid-auto-rows:220px; }
  .gallery--strip a:nth-child(1),
  .gallery--strip a:nth-child(2){ grid-column:span 1; grid-row:span 1; }
  .gallery--photos{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; }
  .gallery--photos a:nth-child(1),
  .gallery--photos a:nth-child(2){ grid-column:span 1; grid-row:span 1; }
  .feature-list{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .site-footer .container{ flex-direction:column; text-align:center; }
  .footer-links{ justify-content:center; }
  .siteplan-key{ flex-direction:column; align-items:center; gap:14px; }
}

@media (max-width:680px){
  .hero{ min-height:76vh; align-items:flex-end; }
  .hero--sub{ min-height:64vh; }
  .hero-inner{ padding-bottom:32px; }
  .hero--sub .hero-inner{ padding-bottom:28px; }
  .hero .eyebrow{ font-size:.68rem; letter-spacing:.13em; margin-bottom:.65em; }
  .hero h1{ font-size:1.9rem; max-width:100%; line-height:1.14; }
  .hero p.lede{ font-size:.9rem; line-height:1.5; max-width:100%; margin-bottom:.8em; }
  .hero-cta{ gap:10px; margin-top:16px; }
  .hero-cta .btn{ padding:12px 20px; font-size:.72rem; letter-spacing:.07em; }
  .model-switch a{ padding:14px 8px; font-size:.85rem; }
}

@media (max-width:480px){
  .container{ padding:0 20px; }
  .logo{ font-size:1.1rem; gap:6px; }
  .logo span{ font-size:.5rem; letter-spacing:.1em; }
  .logo-mark{ width:22px; height:22px; }
  .hero{ min-height:70vh; }
  .hero--sub{ min-height:58vh; }
  .hero h1{ font-size:1.6rem; }
  .hero .eyebrow{ font-size:.62rem; }
  .hero p.lede{ font-size:.86rem; }
  .hero-cta{ gap:8px; }
  .hero-cta .btn{ padding:11px 18px; font-size:.7rem; }
  .siteplan-numbers{ height:30px; }
  .siteplan-numbers span{ width:24px; height:24px; font-size:.72rem; }
}