@charset "utf-8";
/* CSS Document */

.modal-footer{display: none;}
/* Hero overlay text (hidden on mobile via d-none d-md-block in markup) */

/* Fullscreen cap */
.rev_slider_wrapper, .rev_slider, .fullscreenbanner { max-height: 90vh; overflow: hidden; }

/* Big icon stats */
.spec-stats i { font-size: clamp(25px, 6vw, 25px); color:#002d62; line-height:1; }
.spec-stats .value { font-weight:800; font-size: 20pt; color:#002d62; line-height:1.1; margin-top:6px; }
.spec-stats .label { font-weight:600; color:#002d62; opacity:.9; font-size: 0.80rem; }

/* Description */
.spec-desc p { margin: 0 0 0.9rem 0; }

/* Floorplan thumbs */
.fp-thumb { cursor:pointer; border:2px solid transparent; border-radius:8px; overflow:hidden; }
.fp-thumb.active, .fp-thumb:hover { border-color:#002d62; }

/* Photogallery: grid + filter buttons */
#photogallery-border .pg-filter { margin: 0 0 16px; text-align:center; }
#photogallery-border .pg-filter .btn { margin: 0 6px 6px; }
#photogallery-border .photogallery-masonry {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 576px){
#photogallery-border .photogallery-masonry { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
#photogallery-border .photogallery-masonry { grid-template-columns: repeat(3, 1fr); }
}
.photogallery-item { display:block; border:1px solid #ddd; border-radius:8px; overflow:hidden; cursor:pointer; }
.photogallery-item img { display:block; width:100%; height:auto; }

	
.photogallery-item.is-hidden { display: none !important; }
	
	
/* About gallery: keep your masonry columns */
.aboutgallery-masonry { column-count: 1; column-gap: 12px; }
@media (min-width: 576px){ .aboutgallery-masonry { column-count: 2; } }
@media (min-width: 992px){ .aboutgallery-masonry { column-count: 3; } }
.aboutgallery-item { margin: 0 0 12px; display: inline-block; width: 100%; border-radius:8px; overflow:hidden; cursor:pointer; border:1px solid #ddd; }
.aboutgallery-item img { width:100%; height:auto; display:block; }

/* About tab cards polish */
#about-border .card { border-radius: 10px; }
#about-border .card-body { padding: 16px 18px; }
	
	iframe.video-100 {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
 
	
	/* Gallery filter via container class */
#photogallery-border.filter-elev .photogallery-item[data-type="int"]  { display:none !important; }
#photogallery-border.filter-int  .photogallery-item[data-type="elev"] { display:none !important; }
/* Lightbox controls: side-centered arrows */
.lb-modal .modal-body{ position:relative; min-height:70vh; }
.lb-modal .lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  background:#000a; color:#fff; border:0;
  display:flex; align-items:center; justify-content:center;
  z-index:1056; cursor:pointer;
}
.lb-modal .lightbox-prev{ left:10px; }
.lb-modal .lightbox-next{ right:10px; }
.lb-modal .lightbox-nav:hover{ background:#000d; }
.lb-modal .btn-close{ z-index:1062; }
 


	
	/* Fix: modal video on mobile (Bootstrap .ratio + our .video-100) */
#aboutVideoModal .ratio { --bs-aspect-ratio: 56.25%; }               /* 16:9 */
#aboutVideoModal .ratio > * { position:absolute; inset:0; width:100%; height:100%; }
#aboutVideoModal .video-100 {
  width:100% !important;
  height:100% !important;     /* override height:auto */
  aspect-ratio:auto !important;
  margin:0 !important;
}
	
 
	
	/* Modal video sizing: keep a clean 16:9 and no extra blank space */
#aboutVideoModal .ratio { --bs-aspect-ratio:56.25%; }           /* 16:9 */
#aboutVideoModal .ratio > * { position:absolute; inset:0; width:100%; height:100%; }
#aboutVideoModal .video-100 { width:100%!important; height:100%!important; aspect-ratio:auto!important; margin:0!important; }

	
/* About media grid */
.media-tile{
  position:relative; display:block; width:100%;
  aspect-ratio:1/1; background-size:cover; background-position:center;
  border-radius:10px; overflow:hidden; border:1px solid #e3e3e3;
}
.media-tile::after{
  content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 60%, rgba(0,0,0,.25));
}
.media-tile .tile-badge{
  position:absolute; left:12px; top:12px;
  background:#fff; color:#002d62; font-weight:700; font-size:.9rem;
  padding:.3rem .5rem; border-radius:6px; z-index:1;
}
.media-tile .tile-play{
  position:absolute; left:12px; bottom:12px; z-index:1;
  background:#ffffff; color:#003366; font-weight:900; line-height:1;
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
   font-size:.9rem; box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.media-tile .tile-count{
  position:absolute; right:12px; bottom:12px; z-index:1;
  background:#fff; color:#002d62; font-weight:700; font-size:.9rem;
  padding:.3rem .5rem; border-radius:6px;
}
 
/* Darken video tile and show a big play icon */
.media-tile.is-video::before{
  content:"";
  position:absolute; inset:0;
  background:#002d62;        /* navy */
  opacity:.75;               /* ~75% */
  z-index:1;
  pointer-events:none;
}
.media-tile .tile-play-icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:2; color:#fff; pointer-events:none;
  /* Big, responsive-ish size; ~40% of common tile sizes */
  font-size: clamp(30px, 12vw, 90px);
}
	
	/* Reuse the same dark overlay for Lot Map and the "+N" tile */
.media-tile.is-lotmap::before,
.media-tile.is-more::before{
  content:"";
  position:absolute; inset:0;
  background:#002d62;      /* navy */
  opacity:.75;             /* ~75% */
  z-index:1; pointer-events:none;
}

/* Center icon helper (for Lot Map + "+N") */
.media-tile .tile-center-icon{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:2; color:#fff; pointer-events:none;
  font-size:clamp(30px, 12vw, 90px); /* ~40% of tile */
}
	
	
	
	/* Darken the video tile & show big play icon */
.media-tile.is-video::before{
  content:""; position:absolute; inset:0;
  background:#002d62; opacity:.75; z-index:1; pointer-events:none;
}
.media-tile .tile-play-icon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:2; pointer-events:none; color: #fff ;}
	
	.media-tile.is-video:hover .tile-play-icon {
  color: #fff;            /* brighter red on hover */
  transform: scale(1.04);
}
	
.media-tile .tile-play-icon svg{
  width:25%; height:25%;    /* ~40% of the tile */
}
	
 /* Address + price tag layout */
.address-price-wrap{
  display:flex;
  align-items:center;              /* <-- center against the two-line address */
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.address-price-wrap h2{
  margin:0;                        /* remove bottom gap that throws centering off */
  line-height:1.1;                 /* consistent line height */
}

.price-tag{
  background:#002d62; color:#fff;
  padding:12px 16px;
  border-radius:12px;
  font-weight:700;
  line-height:1.15;
  text-align:center;
  min-width:180px;
  margin-left:auto;                /* <-- push to far right */
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
.price-tag .was,
.price-tag .now{ font-size:1rem; letter-spacing:.2px; }
.price-tag .now{ font-size:1.25rem; font-weight:800 }
 
.price-tag .moneyicon{
  height:50px;  float: left;
}
	
.price-tag .was .num{ text-decoration:line-through; }

/* Mobile: drop below the address cleanly */
@media (max-width: 575.98px){
  .price-tag{ min-width:unset; width:100%; }
}

/* OPTIONAL: make the tag EXACTLY the same height as the address block */
.address-price-wrap.price-stretch{ align-items:stretch; }   /* match tallest item */
.address-price-wrap.price-stretch .price-tag{
  display:flex; flex-direction:column; justify-content:center; /* center contents inside the taller tag */
}


/* --- Photogallery: mobile carousel vs desktop grid --- */

/* --- Photogallery: mobile carousel vs desktop grid --- */
/* ≥ sm (tablet/desktop): show grid (default), hide the mobile carousels */
@media (min-width: 576px){
  #photogallery-border .pg-mobile{ display:none !important; }
}

/* < sm (phones): hide the grid; show exactly ONE carousel based on the filter */
@media (max-width: 575.98px){
  /* hide the desktop grid on phones */
  #photogallery-border .photogallery-masonry{ display:none !important; }

  /* both mobile carousels are hidden by default... */
  #photogallery-border .pg-mobile{ display:none !important; }

  /* ...then we show ONE based on the container filter class set by JS */
  #photogallery-border.filter-elev .pg-mobile-elev { display:block !important; }
  #photogallery-border.filter-int  .pg-mobile-int  { display:block !important; }
}

/* --- About tab: mobile actions + carousel vs desktop grid --- */

/* ≥ sm (tablet/desktop): keep the grid, hide the mobile layout */
@media (min-width: 576px){
  #about-mobile { display:none !important; }
}

/* < sm (phones): hide desktop grid; show mobile layout */
@media (max-width: 575.98px){
  #about-media-grid { display:none !important; }
  #about-mobile     { display:block !important; }
}

/* Pretty blue action buttons for mobile */
.btn-fth {
  background:#002d62; color:#fff; border:0; font-weight:700;
  padding:.7rem 1rem; border-radius:.5rem;
}
.btn-fth:hover, .btn-fth:focus { background:#083b7f; color:#fff; }










.headline-spec-overlay1 {
position:absolute; left:0px; bottom:129px;
z-index:50;
text-shadow:0 3px 8px rgba(0,45,98,.9); color:#fff;
padding: 0px 10px 0px 100px; font-size: 50px;
}

p.addessoverlay { margin:0; padding:0; font-size: 30px;}

.headline-spec-overlay2 {
position:absolute; left:0px; bottom:60px;
background:rgba(0,45,98,.80);
box-shadow:0 1px 6px rgba(0,45,98,.9);
z-index:5;
text-shadow:0 2px 8px rgba(0,45,98,.9);color:#fff; 
padding: 10px 15px 15px 100px;	
}
	
h1.headline{ color:#fff; font-weight:800;  letter-spacing:.5px; padding:0px 0px 5px 0px; margin:0; font-size: clamp(15px, 3.2vw, 25px); }	

.spec-overlay .ready { color:#fff; font-weight:800;  letter-spacing:.5px; font-size: clamp(22px, 3.2vw, 44px); padding:0px 0px 0px 0px; margin:0; 
position:absolute; 
color:#fff;   z-index:10;
}	
	
/* Status label with colored dot */
.spec-status{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:700;
  line-height:1.2;
  padding: 0 0 0 5px;
}
.spec-status::before{
  content:"";
  display:inline-block; 
  width:.7rem;
  height:.7rem;
  border-radius:50%;
  background:#94a3b8;            /* default gray */
  box-shadow:0 0 0 2px #fff;     /* white ring so it reads on dark bg */
  flex:0 0 .7rem;
}

/* Map data-status → dot color */
:root{
  --status-green:#22c55e;
  --status-yellow:#f59e0b;
  --status-red:#ED1C24;
}
.spec-status[data-status*="now available" i]::before { background: var(--status-green); }
.spec-status[data-status*="coming soon"  i]::before { background: var(--status-yellow); }
.spec-status[data-status*="under contract" i]::before,
.spec-status[data-status*="sold" i]::before { background: var(--status-red); }
	.spec-status.status-sold::before { background: var(--status-red); }


	
	/* Attribute-based (text) */
.spec-status[data-status*="under construction" i]::before { background: var(--status-yellow); }
.spec-status[data-status*="move-in ready" i]::before      { background: var(--status-green); }

/* Class-based (extra safety) */
.spec-status.status-build::before { background: var(--status-yellow); }
.spec-status.status-ready::before { background: var(--status-green); }

	
	.fp-download-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #002D62;  /* blue */
  color: #fff;                 /* white text */
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 4px;
  text-decoration: none;
  z-index: 20;                 /* ensure it’s above the image */
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: all 0.2s ease-in-out;
}
.fp-download-btn:hover {
  background-color: #fff;      /* white background */
  color: #002D62  ;          /* blue text/icon */
  text-decoration: none;
  border: 1px solid #002D62;
}
	
 
/* Mobile-only polish for the price tag */
@media (max-width: 575.98px){
  .price-tag{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap: .35rem;
    padding: 14px 16px;
    border-radius: 14px;
    background: #002d62;              /* keep brand navy */
    color:#fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
  }

  .price-tag .was{
    order: 1;
    font-size: .95rem;
    letter-spacing: .02em;
    opacity: .85;
  }
  .price-tag .was .num{
    text-decoration: line-through;
    opacity: .9;
  }

  .price-tag .now{
    order: 2;
    font-weight: 900;
    font-size: 1.45rem;               /* bigger on mobile */
    line-height: 1.1;
  }
  .price-tag .now > span{
    display:inline-block;
    transform: translateY(1px);       /* micro optical alignment */
  }

.price-tag .save-pill{
  order: 3;
  background:#fff;
  color:#002d62;
  font-weight:800;
  font-size:.9rem;
  padding:.28rem .6rem;
  border-radius:999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* White background while the calculator tab is active */
#getlistofhomesx.is-calc,
#getlistofhomesx.is-calc .gap {
  background-color: #fff !important;
}
 
	
/* Full-width separator at the very top of the calc section */
#getlistofhomesx.is-calc {
  background: #fff !important;
  position: relative;                 /* enable pseudo-elem positioning */
}
#getlistofhomesx.is-calc::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: #DFE3E8;
  pointer-events: none;
} 
	
	
	/* Keep the calc tab white */
#calc-border{
  background:#fff !important;
  padding:24px 0 50px;
}

#getlistofhomesx.is-calc{ box-shadow: inset 0 1px 0 #DFE3E8; }

/* Floorplan mobile carousel controls (navy buttons) */
#fpMobileCarousel .carousel-control-prev,
#fpMobileCarousel .carousel-control-next{
  opacity: 1;             /* keep them visible */
  width: 3rem;            /* a little easier to tap */
}

#fpMobileCarousel .carousel-control-prev-icon,
#fpMobileCarousel .carousel-control-next-icon{
  background-color: #002d62;   /* navy disc */
  border-radius: 9999px;
  width: 2.25rem;
  height: 2.25rem;
  background-size: 60% 60%;    /* arrow size inside the disc */
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
	
	/* Put the dots below the image (mobile only) */
@media (max-width: 575.98px){
  #fpMobileCarousel .carousel-indicators{
    position: static;     /* takes them out of overlay */
    margin: .5rem 0 0;    /* space under the image */
  }
  #fpMobileCarousel .carousel-indicators [data-bs-target]{
    width: 8px; height: 8px; border-radius: 50%;
    background-color: #002d62;   /* navy dots */
    opacity: .3;
  }
  #fpMobileCarousel .carousel-indicators .active{
    opacity: 1;
  }
}