/* -----------------------------------------------------------
   GLOBAL TOKENS & BOOTSTRAP OVERRIDES
   ----------------------------------------------------------- */


:root {
  --cnvs-themecolor: #002D62;
  --cnvs-themecolor-rgb: 0, 45, 98;
  --cnvs-body-font: "Montserrat", sans-serif, #212529;
  --cnvs-body-font-color: #212529;
  --cnvs-primary-font: "Montserrat", sans-serif;
  --cnvs-secondary-font: "Montserrat", serif;
  --brand: #002D62;
  --txt: #ffffff;
  --txt-dark: #002D62;
  --radius: 4px;

  /* Bootstrap colour map */
  --bs-primary: #002D62;
  --bs-primary-rgb: 0, 45, 98;

  /* Sticky-header fallback — JS keeps it updated */
  /*--header-height:          80px;*/
}

/* Utility overrides */
.bg-primary {
  background: #002D62 !important;
}

.text-primary {
  color: #002D62 !important;
}

.border-primary {
  border-color: #002D62 !important;
}

/* -----------------------------------------------
   TYPOGRAPHY – fixed the stray brace here ↓
------------------------------------------------ */
#header.sticky-header {
  z-index: 1300;
}

#headingCity {
  color: #fff !important;
  font-family: 'Montserrat', sans-serif;
}

html {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  max-width: 100%;
  overflow-x: visible !important;
  position: relative;
}
body {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
  position: relative;
}

#wrapper {
  width: 100%;
  max-width: 100%;
  overflow: visible !important;
  position: relative;
}

#footer {
  width: 100%;
  max-width: 100%;
  overflow: hidden !important;
}

/* -----------------------------------------------------------
   STICKY SECONDARY NAV  (the only copy!)
----------------------------------------------------------- */
.sticky-blue-bar {
  position: sticky;
  /* becomes fixed after header */
  /*  top:var(--header-height);   */
  /* live offset from JS        */
  left: 0;
  right: 0;
  width: 100%;
  background: #002D62;
  z-index: 1050;
}

/* Mobile: hide bar */
@media (max-width:991.98px) {
  .sticky-blue-bar {
    display: none !important;
  }
}

/* Spacer div no longer needed (kept for legacy markup) */
.sticky-blue-bar-spacer {
  display: none !important;
}

/* -----------------------------------------------
   FORM FIELDS — use for ALL forms everywhere!
------------------------------------------------ */
.ftx-form {
  max-width: 560px;
  margin: 2rem auto;
  padding: 2.5rem 2rem 2rem;
  background: var(--brand);
  color: var(--txt);
  border-radius: var(--radius);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .50);
  position: relative;
  overflow: hidden;
}

.ftx-form::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("https://cdn.firsttexashomes.com/images/backgrounds/line-texture-2880w-2880w.png") repeat;
  opacity: .25;
  pointer-events: none;
  border-radius: inherit;
}


.ftx-form-commpage {

  color: var(--brand);
}

.ftx-title {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 1.5rem;
}

.ftx-thanks {
  display: none;
  text-align: center;
  font-size: 1.2rem;
}

.ftx-fields {
  /* wrapper for stacked fields (optional, for visual grouping) */
}

.ftx-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.ftx-field label {
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: .25rem;
}

.ftx-field input,
.ftx-field textarea,
.ftx-field select {
  font: 1rem 'Montserrat', sans-serif;
  color: var(--txt-dark);
  background: #fafafa;
  border: 1px solid #d0d0d0;
  border-radius: var(--radius);
  padding: .55rem .75rem;
  transition: border-color .2s, box-shadow .2s;
}

.ftx-field input:focus,
.ftx-field textarea:focus,
.ftx-field select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(29,49,97, .15);
  outline: none;
}

.ftx-field select {
  width: 100%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath fill='%23002d62' d='M7 8 0 0h14z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  background-size: .55rem .35rem;
  appearance: none;
  line-height: 1.4;
  transition: border .15s ease-in-out;
  border: 1px solid #ced4da;
  border-radius: var(--radius, 4px);
}

.ftx-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.ftx-inline .ftx-field {
  flex: 1 1 0;
}



ftx-red-bg {
  background-color: #FF0000
}


/* --- Card bottom buttons (shared) --- */
.card-btnbar {
  display: flex;
  width: 100%;
}

.btn-learnmore,
.btn-requesttour,
.btn-requestinfo {
  flex: 1 1 50%;
  padding: .9rem 1rem;
  border: 0;
  border-radius: 4;
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  line-height: 1em
}

/* View Details: blue -> invert on hover */
.btn-learnmore {
  background: var(--brand-blue);
  color: #fff;
  line-height: 1em;
  border: none;
}

.btn-learnmore:hover {
  background: #fff;
  color: var(--brand-blue);
  border-right: 1px solid #002D62;
  line-height: 1em;
  font-weight: 800;
}

/* Tour/Request: red -> invert on hover */
.btn-requesttour {
  background: var(--brand-red);
  color: #fff;
  line-height: 1em;
  border: none;
}

.btn-requesttour:hover {
  background: #fff;
  color: var(--brand-red);
  border-left: 1px solid #002D62;
  line-height: 1em;
  font-weight: 800;
}

/* Tour/Request: red -> invert on hover */
.btn-requestinfo,
.btn-requestinfo {
  background: #fff;
  color: #002D62;
  line-height: 1em;
  border: none;
}

.btn-requestinfo:hover,
.btn-requestinfo:hover {
  background: #fff;
  color: var(--brand-red);

  line-height: 1em;
  font-weight: 800;
}

/* Subtle divider between the 2 buttons */
.btn-divider-left {
  border-left: 1px solid rgba(255, 255, 255, .2);
}



.req {
  color: #336dff;
  font-weight: 700;
  font-size: 1rem;
}

@media (max-width: 480px) {
  .ftx-form {
    padding: 1.75rem 1rem;
  }
}


/***********************************************************
  SECTION 1: MAP LAYOUT
************************************************************/
.gmap-fullwrap {
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
  background: #fff;
  padding: 0;
  z-index: 5;
}

.gmap-fullwrap {
  position: relative;
  overflow: visible;
  width: 100%;
  /* prevents x-overflow when map expands to 100vw */
}


#map {
  width: 100vw;
  height: 650px;
  /* Increased from 480px */
  min-height: 400px;
  /* Increased from 320px */
  max-width: 100vw;
  display: block;
  background: #fff;
}

/* Taller map on mobile too */
@media (max-width: 991.98px) {
  #map {
    height: 420px;
    /* Was 320px, now taller for mobile */
    min-height: 300px;
    max-width: 100vw;
  }
}


/***********************************************************
  SECTION 2: MAP FILTER PANEL (SIDEBAR / OVERLAY)
************************************************************/
.map-filter-panel {
  position: absolute;
  top: 32px;
  right: 40px;
  width: 340px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  padding: 2rem 1.25rem 1.25rem 1.25rem;
  z-index: 10;
  min-width: 240px;
  max-width: 96vw;
  transition: top 0.2s, right 0.2s;
}

@media (max-width: 991.98px) {
  .map-filter-panel {
    position: static;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    margin: 0 auto 0 auto;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    padding: 1.15rem 1rem 1rem 1rem;
    top: 0;
    right: 0;
  }
}



/***********************************************************
  SECTION 3: FILTER PANEL FIELDS AND BUTTONS
************************************************************/
.ftx-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.ftx-field label {
  font-size: .95rem;
  font-weight: 600;
  margin-bottom: .25rem;
}

.ftx-field select {
  width: 100%;
  padding: .65rem .75rem;
  font: inherit;
  color: #0d1a26;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath fill='%23002d62' d='M7 8 0 0h14z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  background-size: .55rem .35rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
  appearance: none;
  line-height: 1.4;
  transition: border .15s ease-in-out;
}

.ftx-field select:focus {
  outline: none;
  border-color: #002D62;
  box-shadow: 0 0 0 2px rgba(29,49,97, .2);
}



/***********************************************************
  SECTION 4: MAP HINT / TOOLTIP
************************************************************/
.map-hint {
  background: #002D62;
  color: #fff;
  padding: 8px 12px;
  font: 14px 'Montserrat', sans-serif;
  border-radius: 0 0px 4px 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}


/***********************************************************
  SECTION 5: INFO WINDOW (GOOGLE MAPS POPUPS)
************************************************************/
.infobox {
  position: relative;
  font: 1rem 'Montserrat', sans-serif;
  color: #002b59;
  background: #fff;
  border-radius: 12px;
  min-width: 240px;
  /* a little wider for long names       */
  max-width: 360px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .12);

  /* ⤷ equal padding all sides; no extra room reserved for the ✕      */
  padding: 1.5rem 1.5rem 1.25rem;
  overflow: visible;
  /* no scrollbars for the normal case   */
}

/* centred navy button inside every infobox */
.infobox .view-btn {
  display: block;
  width: max-content;
  /* shrink to text */
  margin: 1rem auto 0;
  /* centred */
  padding: .55rem 1.25rem;
  font: 600 0.95rem/1 'Montserrat', sans-serif;
  color: #fff;
  background: #002D62;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
  transition: background .15s;
}

.infobox .view-btn:hover {
  background: #ed1c24;
}


/* When JS adds class="multiple" (stacked communities) … */
.infobox.multiple {
  max-height: 300px;
  /* enough for ≈3-4 communities          */
  overflow-y: auto;
  /* scrollbar only when really required  */
}

/* hide the grey WebKit scrollbar rail so it feels native */
.infobox.multiple::-webkit-scrollbar {
  width: 0;
  height: 0
}

/* (Removed unused infowindow view-btn styles) */


/* Custom close button – now sits OUTSIDE the card        */
.close-x {
  position: absolute;
  top: -16px;
  /* pulls it 16 px above the card        */
  right: -16px;
  /* 16 px to the right → outside border  */
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ed1c24;
  color: #fff;
  border: none;
  font: 900 22px/1 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  cursor: pointer;
  z-index: 10;
  transition: background .15s;
}

.close-x:hover,
.close-x:focus {
  background: #002D62;
}

/***********************************************************
  SECTION 6: FORCE-HIDE GOOGLE'S DEFAULT INFO WINDOW X
  (unchanged – keep as-is)
************************************************************/
.gm-ui-hover-effect {
  display: none !important;
}

/***********************************************************
  SECTION 5-bis: OVERRIDE GOOGLE’S INFO-WINDOW WRAPPER
  (add AFTER your existing Section 5 & 6 – no other code changes)
************************************************************/
/* ************************************************************
   SECTION 5-ter · Final cleanup of Google’s wrapper
************************************************************* */
.gm-style-iw-c {
  background: transparent !important;
  /* kill 2nd white card   */
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
  /* let our red button poke out */
}

/* scroll container: keep content visible, never scroll */
.gm-style-iw-d {
  overflow: visible !important;
  max-height: none !important;
}

/* tiny white corner-pointer Google draws → hide */
.gm-style-iw-t::after,
.gm-style-iw-t::before {
  display: none !important;
}










/* Menu spacing tweaks */
nav.primary-menu ul.menu-container>li.menu-item {
  margin-right: 10px;
}

nav.primary-menu ul.menu-container>li.menu-item>a.menu-link {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

nav.primary-menu ul.menu-container>li.menu-item:hover {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  text-decoration: underline;
}



/* Mega menu: edge-to-edge, horizontal on desktop */
.mega-menu-content .row {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0 24px;
  /* edge gutters */
}

.mega-menu-content .mega-menu-column.col {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 18px;
  margin: 0;
  list-style: none;
}

/* Highlight city names in menu */
.mega-menu-title>.menu-link>div {
  color: #002b59 !important;
}

/* Expanded menu tweaks */
.is-expanded-menu .primary-menu,
.is-expanded-menu .menu-container>.menu-item {
  flex: 1 1 auto;
}

.is-expanded-menu .primary-menu.with-arrows .menu-link .sub-menu-indicator {
  font-size: 80%;
}

/* Mega menu: edge-to-edge, horizontal on desktop */
.mega-menu-content .row {
  display: flex;
  flex-wrap: nowrap;
  margin: 0;
  padding: 0 24px;
}

.mega-menu-content .mega-menu-column.col {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 18px;
  margin: 0;
  list-style: none;
}

a.menu-link.city-name {

  font-size: 14px !important;
  color: #002D62
}

a.menu-link.city-name:hover {
  font-size: 14px !important;
  color: #002D62;
  text-decoration: underline !important;
}







/* make .video-wrap a positioning context */
.video-wrap {
  position: relative;
  overflow: hidden;
  height: min(800px, 100vh);

}

/* centre the caption, keep it above the dark overlay */
.video-caption {
  position: absolute;
  inset: 0;
  /* stretch full frame */
  display: flex;
  /* centre with flexbox */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
  /* > .video-overlay (which is z-index:1) */
  color: #fff;
  pointer-events: none;
  /* clicks go through to play/pause if needed */
  text-shadow: 0 3px 8px rgba(0, 0, 0, .6);
  /* keeps it readable */
}


.video-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top:0; right:0; bottom:0; left:0             */
  width: 100vw;
  /* full viewport width …                         */
  left: 50%;
  /* … but anchored from the middle …              */
  transform: translateX(-50%);
  /* … then shifted another 50 % left → +15 px */
  z-index: -1;
  /* sits underneath the <video>                   */
}



/* tweak typography if you like */
@media(max-width:768px) {
  .video-caption .display-4 {
    font-size: 1.75rem;
  }

  .video-caption .lead {
    font-size: 1rem;
  }
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  color: #002b59;
}

















/* HERO PANEL + SLIDER - UNIVERSAL STYLES */
.communities-panel {
  position: relative;
  overflow: hidden;
  background: #002D62;
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 2;
  margin: 0;
  display: flex;
  align-items: center;
}

/* Overlay texture - ONLY on the blue panel */
.communities-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("https://cdn.firsttexashomes.com/images/backgrounds/line-texture-2880w-2880w.png") repeat;
  opacity: 0.25;
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}

/* Panel content above texture */
.communities-panel-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* (Removed unused explore-btn hover/focus overrides) */



/* Slider wrapper */
#lechefheader_wrapper {
  border-radius: 8px;
  overflow: hidden;
  width: 100%;
  margin: 0;
  max-width: 100%;
  background: #000;
  padding: 0;
}

/* DESKTOP (≥992px): Floating panel overlays grid-aligned slider */
@media (min-width: 992px) {
  .hero-container {
    min-height: 440px;
  }

  .row.position-relative {
    min-height: 440px;
  }

  .communities-panel {
    position: absolute;
    top: 50%;
    left: 0;
    width: 570px;
    max-width: 95vw;
    transform: translateY(-50%);
    margin: 0;
    display: flex;
    align-items: center;
  }

  .communities-panel-inner {
    padding: 2.5rem 2.5rem 2rem 2.5rem;
  }
}

/* MOBILE (<992px): Both edge-to-edge, slider first, panel second, NO gap, NO overlay on slider */
@media (max-width: 991.98px) {
  .hero-container {
    min-height: unset;
  }

  .row.position-relative {
    display: flex;
    flex-direction: column;
    min-height: unset;
  }

  .col-12,
  .communities-panel,
  #lechefheader_wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .communities-panel {
    position: static !important;
    transform: none !important;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    z-index: 2;
    display: block;
  }

  .communities-panel-inner {
    padding: 1.75rem 1rem 1.5rem 1rem;
    box-sizing: border-box;
  }

  #lechefheader_wrapper {
    margin-bottom: 0 !important;
    border-radius: 0 !important;
  }
}



/* Kill the built-in vertical gaps just for this page --------------- */
#slider.slider-element,
#slider .slider-inner,
#rev_slider_k_fullwidth_wrapper,
#rev_slider_k_fullwidth,
#content,
#content .content-wrap,
#content .section:first-child {}

/* If you prefer the Canvas utility syntax ------------------------- */
/* <section id="slider" class="slider-element slider-parallax revslider-wrap min-vh-0 mb-0 pb-0"> */
/* <section id="content" class="mb-0 pb-0">                         */



.inventory-card img {
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
}

.inventory-card .card {
  border-radius: .75rem;
}

.inventory-card .badge {
  background: #002D62;
  font-size: .75rem;
  padding: 7.5px;
}


/* ——— compact card for the map infowindow ——— */
.map-card {
  width: 260px;
  font-size: .9rem;
  position: relative;
  background: #fff;
  border-radius: .25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  padding-bottom: 2px;
}

.map-card img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

.map-card .title {
  font-weight: 600;
  font-size: 1rem;
  margin: .4rem .6rem .25rem;
  color: #002b59;
}

.map-card .city {
  color: #666;
  font-size: .85rem;
  margin: 0 .6rem .25rem;
}

.map-card .price {
  font-weight: 500;
  margin: 0 .6rem .4rem;
}

.map-card a.btn {
  display: inline-block;
  margin: .25rem .6rem .4rem;
  font-size: .8rem;
  padding: .15rem .5rem;
}

/* ▼ our white speech‑bubble pointer */
.map-card::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 -2px 4px rgba(0, 0, 0, .1));
}

/* hide Google default pointer / frame */
.gm-style-iw-c,
.gm-style-iw-d,
.gm-style-iw-tc,
.gm-style-iw-s {
  background: transparent !important;
  box-shadow: none !important;
}

/* remove Google close "x" */
.gm-ui-hover-effect {
  display: none !important;
}

/* close button inside our click‑info card */
.close-x {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ED1C24;
  color: #fff;
  font-weight: bold;
  border: none;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
}

/* --- existing overrides (keep) --- */
.gm-style-iw-c,
.gm-style-iw-d,
.gm-style-iw-tc,
.gm-style-iw-s {
  background: transparent !important;
  box-shadow: none !important;
}


@media (max-width: 991px) {
  .mega-menu-content .row {
    flex-direction: column !important;
  }

  .mega-menu-content .mega-menu-column.col {
    width: 100% !important;
    flex: unset !important;
    max-width: 100% !important;
    display: block !important;
  }
}

.hotspot-link span {
  --cnvs-hotspot-dot-size: 26px;
  position: absolute;
  top: auto;
  left: auto;
  width: var(--cnvs-hotspot-dot-size);
  height: var(--cnvs-hotspot-dot-size);
  text-align: center;
  line-height: calc(var(--cnvs-hotspot-dot-size) - 6px);
  background: #000;
  border-radius: 50%;
  border: 2px solid white;
  color: white;
  font-size: 1rem;
  cursor: pointer;
}

.badge-image-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.badge-image-wrapper .sale-flash {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  /* Optional: add shadow for contrast */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
}

.badge-image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  /* Prevents badge from pushing image down */
}


.error404-wrap .error404 {
  line-height: 0.9;
  margin-bottom: 40px;
  font-weight: bold;
  font-size: 19vw;
  color: #fff !important;
  opacity: 0.8;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
}



/*Community Detail Styles */
@media (max-width: 991.98px) {
  .nav {
    gap: 10px !important;
    flex-wrap: wrap;
  }

  h1.fw-medium {
    font-size: 1.1rem !important;
    margin-bottom: 0.5rem !important;
  }
}

.red-pill-btn {
  background: #ED1C24;
  color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  padding: 5px 22px;
  transition: all 0.18s cubic-bezier(.4, 0, .2, 1);
  box-shadow: none;
  display: inline-block;
  text-align: center;
  outline: none;
  line-height: 1.25;
  margin: 0;
  vertical-align: middle;
}

.red-pill-btn:hover,
.red-pill-btn:focus {
  background: #fff;
  color: #002D62;
  border: 1px solid #002D62;
  text-decoration: none;
}

ul.nav {
  gap: 24px;
}

#header,
#header .primary-menu,
#header .mega-menu-content,
#header .sub-menu-container,
#header .menu-container,
#header .menu-link {
  z-index: 1200 !important;
}

#header,
#header-wrap {
  border-bottom: 0 !important;
}

/* Prevent global img rules from affecting Google Maps tiles/markers */
.gm-style img {
  max-width: none !important;
}


.breadcrumb a:hover {
  text-decoration: underline;
}

#map {
  width: 100%;
  height: 560px;
  /* or whatever height you want */
}

strong {

  color: #002D62;
}


div.widget strong {

  color: #fff;
}

.fw-bold {
  color: #002D62;
}


/* =========================================================
   Unified hero overlay + slider sizing (spec & plan)
   ========================================================= */

/* Overlay block (identical on both pages) */
.headline-spec-overlay2,
.headline-plan-overlay2 {
  position: absolute;
  z-index: 5;

  /* same Y position */
  bottom: 60px;

  /* anchor flush-left; use padding for the inset */
  left: 0;
  right: auto;
  margin: 0;

  /* background + depth */
  background: rgba(29,49,97, 0.82);
  box-shadow: 0 1px 6px rgba(29,49,97, .9);

  /* internal spacing — 100px = your desired left inset */
  padding: 12px 18px 16px 100px;

  /* let content determine width (no artificial max) */
  max-width: none;
}

/* Headline (shared) */
h1.headline {
  color: #fff;
  font-weight: 800;
  letter-spacing: .5px;
  margin: 0;
  padding: 0 0 6px 0;
  font-size: clamp(20px, 3vw, 28px);
}

/* Secondary line (community/address) — both class names supported */
p.addessoverlay,
.plan-addressoverlay {
  margin: 0 0 4px 0;
  padding: 0;
  font-size: clamp(15px, 2.2vw, 18px);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}

/* Small spacing under headline to status/price line */
.headline-spec-overlay2 .spec-status,
.headline-plan-overlay2 .display-7 {
  margin-top: 2px;
}

/* Tablet/phone tweaks (if you do show the overlay there) */
@media (max-width: 767.98px) {

  .headline-spec-overlay2,
  .headline-plan-overlay2 {
    bottom: 40px;
    padding: 10px 14px 12px 24px;
    /* shallower left inset on small screens */
  }
}

/* =========================================================
   Slider stack: same height; no grey wrapper gap
   ========================================================= */

/* Constrain the entire hero stack to 90vh and hide overflow */
#slider .rev_slider_wrapper,
#slider .rev_slider,
#slider .fullscreenbanner {
  height: 90vh !important;
  max-height: 90vh !important;
  overflow: hidden !important;
}

/* Wrapper should not show its own background or padding */
#slider .rev_slider_wrapper {
  background: transparent !important;
  padding: 0 !important;
}

/*SPEC STATUS OVERLAY */

.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);
}


/* --- Diagonal Ribbon for Spec Cards --- */
.spec-ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.spec-ribbon.diagonal span {
  --ribbon-color: #ED1C24;
  --ribbon-height: 44px;
  --ribbon-angle: -35deg;

  position: absolute;
  top: 50%;
  left: 50%;
  width: 160%;
  height: var(--ribbon-height);
  line-height: var(--ribbon-height);
  transform: translate(-50%, -50%) rotate(var(--ribbon-angle));
  background: var(--ribbon-color);
  color: #fff;
  text-align: center;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  white-space: nowrap;
}

@media (max-width: 576px) {
  .spec-ribbon.diagonal span {
    --ribbon-height: 36px;
    font-size: .85rem;
  }
}

/* Map popup infobox ribbon overrides */
.infobox .spec-ribbon.diagonal span {
  --ribbon-height: 26px;
  font-size: 0.7rem;
}


/* ===== Mobile floorplan lightbox (shared) ===== */
.fp-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1057;
  background: #002D62;
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.fp-close-btn:hover {
  background: #003c84;
}

.fp-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: #002D62;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1056;
}

.fp-lightbox-prev {
  left: 12px;
}

.fp-lightbox-next {
  right: 12px;
}

.fp-lightbox-nav:hover {
  background: #003c84;
}


/* ===== specdetail Photo Gallery parity with plandetail ===== */

/* Zoom modal: blue "Close" pill pinned top-right */
#pgZoomModal .pg-close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto;
  z-index: 1057;
  background: #002D62;
  color: #fff;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  line-height: 1;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

#pgZoomModal .pg-close-btn:hover {
  background: #003c84;
}

/* Blue side nav arrows; keep them centered vertically */
#pgZoomModal.lb-modal .lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #002D62;
  color: #fff;
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .30);
  z-index: 1056;
  cursor: pointer;
}

#pgZoomModal .lightbox-prev {
  left: 12px;
}

#pgZoomModal .lightbox-next {
  right: 12px;
}

#pgZoomModal .lightbox-nav:hover {
  background: #003c84;
}

/* Desktop masonry grid already defined on specdetail; keep it. */
/* Ensure the cards look consistent */
#photogallery-border .photogallery-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}

/* Mobile carousels: blue circular arrows + dots (match plandetail) */
#photogallery-border .pg-mobile .carousel-control-prev,
#photogallery-border .pg-mobile .carousel-control-next {
  width: auto;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
}

#photogallery-border .pg-mobile .carousel-control-prev-icon,
#photogallery-border .pg-mobile .carousel-control-next-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background-color: #002D62;
  background-size: 60% 60%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  filter: invert(1);
}

#photogallery-border .pg-mobile .carousel-indicators {
  position: static;
  margin: .5rem 0 0;
}

#photogallery-border .pg-mobile .carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #002D62;
  opacity: .35;
  border-top: 0;
  border-bottom: 0;
  padding: 0;
  margin: 0 6px;
}

#photogallery-border .pg-mobile .carousel-indicators .active {
  opacity: 1;
}

/* Use the existing filter classes on the container to show/hide sets */
#photogallery-border.filter-elev .photogallery-masonry .photogallery-item[data-type="int"] {
  display: none !important;
}

#photogallery-border.filter-int .photogallery-masonry .photogallery-item[data-type="elev"] {
  display: none !important;
}

/* Mobile: your existing CSS expects .pg-mobile-elev / .pg-mobile-int */
@media (max-width: 575.98px) {
  #photogallery-border .photogallery-masonry {
    display: none !important;
  }

  #photogallery-border .pg-mobile {
    display: none !important;
  }

  #photogallery-border.filter-elev .pg-mobile-elev {
    display: block !important;
  }

  #photogallery-border.filter-int .pg-mobile-int {
    display: block !important;
  }
}

@media (min-width: 576px) {
  #photogallery-border .pg-mobile {
    display: none !important;
  }
}


/* ===== SPECDETAIL Photo Gallery (mobile) — force blue arrows & round dots ===== */

/* Kill Bootstrap's beige sprite + draw our own navy circular buttons */
#photogallery-border .pg-mobile .carousel-control-prev-icon,
#photogallery-border .pg-mobile .carousel-control-next-icon {
  background-image: none !important;
  /* remove default tan sprite */
  display: none !important;
  /* we'll render with ::after */
}

#photogallery-border .pg-mobile .carousel-control-prev::after,
#photogallery-border .pg-mobile .carousel-control-next::after {
  content: '';
  /* replaced below per side */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: #002D62;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  font: 900 1rem "Font Awesome 6 Free";
  /* FA 6 is already loaded */
  z-index: 2;
}

#photogallery-border .pg-mobile .carousel-control-prev::after {
  content: '\f053';
}

/* fa-chevron-left */
#photogallery-border .pg-mobile .carousel-control-next::after {
  content: '\f054';
}

/* fa-chevron-right */

/* Dots: make them true circles (Bootstrap pills -> circles) */
#photogallery-border .pg-mobile .carousel-indicators {
  position: static !important;
  margin: .5rem 0 0 !important;
}

#photogallery-border .pg-mobile .carousel-indicators [data-bs-target] {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #002D62 !important;
  opacity: .35 !important;

  /* kill pill styling */
  border: 0 !important;
  padding: 0 !important;
  margin: 0 6px !important;
  flex: 0 0 auto !important;
  box-sizing: content-box !important;
}

#photogallery-border .pg-mobile .carousel-indicators .active {
  opacity: 1 !important;
}


/* ===== ABOUT TAB (both pages) – unify tile icon sizes/overlay look ===== */
.media-tile.is-video::before,
.media-tile.is-lotmap::before,
.media-tile.is-more::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #002D62;
  opacity: .75;
  z-index: 1;
  pointer-events: none;
}

.media-tile .tile-center-icon,
.media-tile .tile-play-icon {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-shadow: none;
  /* same size everywhere */
  font-size: clamp(30px, 12vw, 90px) !important;
}

/* ===== ABOUT mobile carousel (spec & plan) – navy circular arrows + round dots ===== */
#aboutMobileCarousel .carousel-control-prev-icon,
#aboutMobileCarousel .carousel-control-next-icon {
  background-image: none !important;
  /* kill Bootstrap sprite */
  display: none !important;
  /* we render with ::after */
}

#aboutMobileCarousel .carousel-control-prev::after,
#aboutMobileCarousel .carousel-control-next::after {
  content: '';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: #002D62;
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  font: 900 1rem "Font Awesome 6 Free";
  /* FA 6 already loaded */
}

#aboutMobileCarousel .carousel-control-prev::after {
  content: '\f053';
}

/* fa-chevron-left  */
#aboutMobileCarousel .carousel-control-next::after {
  content: '\f054';
}

/* fa-chevron-right */

/* ===== Lot Map Modal Carousel – Match the main picture gallery arrows exactly ===== */
#lotMapCarousel .carousel-control-prev,
#lotMapCarousel .carousel-control-next {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #002D62 !important;
  color: #fff !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1056 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .30) !important;
  opacity: 1 !important;
  bottom: auto !important;
}

#lotMapCarousel .carousel-control-prev:hover,
#lotMapCarousel .carousel-control-next:hover {
  background: #003c84 !important;
  opacity: 1 !important;
}

#lotMapCarousel .carousel-control-prev {
  left: 12px !important;
  right: auto !important;
}

#lotMapCarousel .carousel-control-next {
  right: 12px !important;
  left: auto !important;
}

#lotMapCarousel .carousel-control-prev i,
#lotMapCarousel .carousel-control-next i {
  font-size: 1.25rem !important;
  color: #fff !important;
}

#aboutMobileCarousel .carousel-indicators {
  position: static !important;
  margin: .5rem 0 0 !important;
}

#aboutMobileCarousel .carousel-indicators [data-bs-target] {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #002D62 !important;
  opacity: .35 !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 6px !important;
  flex: 0 0 auto !important;
}

#aboutMobileCarousel .carousel-indicators .active {
  opacity: 1 !important;
}

/* ===== ABOUT modals (spec) – use the same blue pill close button ===== */
#aboutVideoModal .btn-close.btn-close-white {
  display: none !important;
}

/* hide default X */
#lotMapModal .btn-close.btn-close-white {
  display: none !important;
}

.pg-close-btn,
.lb-close-btn,
.fp-close-btn {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 1057 !important;
  background: #002D62 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25) !important;
}

.pg-close-btn:hover,
.lb-close-btn:hover,
.fp-close-btn:hover {
  background: #003c84 !important;
}

/* Force ALL generic lightboxes (About grid) to brand blue */
.lb-modal .lightbox-nav {
  background: #002D62 !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .30) !important;
}

.lb-modal .lightbox-nav:hover {
  background: #003c84 !important;
}

.lb-modal .lightbox-prev {
  left: 12px !important;
}

.lb-modal .lightbox-next {
  right: 12px !important;
}

/* SPECDETAIL About lightbox – force brand arrows (desktop + mobile) */
.lb-modal .lightbox-nav {
  background: #002D62 !important;
  /* solid navy */
  color: #fff !important;
  opacity: 1 !important;
  /* kill any incidental transparency */
  box-shadow: 0 2px 10px rgba(0, 0, 0, .30) !important;
}

.lb-modal .lightbox-nav:hover {
  background: #003c84 !important;
}

/* If you want to be ultra-specific to the About modal only: */
#aboutmediagridModal .lightbox-nav {
  background: #002D62 !important;
  color: #fff !important;
  opacity: 1 !important;
}

#aboutmediagridModal .lightbox-nav:hover {
  background: #003c84 !important;
}



























/* ===== Testimonials Slider ===== */
#t-slider {
  position: relative;
}

#t-slider .t-track {
  display: grid;
  grid-auto-flow: column;
  gap: 16px;
  grid-auto-columns: 88%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px 2.75rem;
  /* room for arrows */
  scroll-behavior: smooth;
}

#t-slider .t-track::-webkit-scrollbar {
  display: none;
}

.t-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 16px;
  padding: 18px 18px 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.t-stars i {
  color: #FFC107;
  margin-right: 2px;
}

.t-quote {
  font-size: 1rem;
  line-height: 1.55;
  color: #333;
}

.t-byline {
  margin-top: auto;
  font-weight: 700;
  color: #002D62;
  font-size: .95rem;
}

#t-slider .t-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #002D62;
  color: #fff;
  border: 0;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
  cursor: pointer;
}

#t-slider .t-prev {
  left: 0.25rem;
}

#t-slider .t-next {
  right: 0.25rem;
}

#t-slider .t-nav.disabled {
  opacity: .35;
  pointer-events: none;
}

/* responsive columns in the scroller */
@media (min-width: 576px) {
  #t-slider .t-track {
    grid-auto-columns: 62%;
  }
}

@media (min-width: 768px) {
  #t-slider .t-track {
    grid-auto-columns: 48%;
  }
}

@media (min-width: 992px) {
  #t-slider .t-track {
    grid-auto-columns: 32%;
  }

  #t-slider .t-nav {
    display: flex;
  }
}

@media (min-width: 1400px) {
  #t-slider .t-track {
    grid-auto-columns: 25%;
  }
}







/* ===== COMMUNITIES — DESKTOP ONLY (>=992px) ===== */
@media (min-width: 992px) {

  /* Open on hover + layer above hero */
  #mm-communities {
    position: static !important;
  }

  #mm-communities>.mega-menu-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 2px 0 0 0 !important;
    border-top: 2px solid #002D62 !important;
    border-bottom: 2px solid #002D62 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 5px 0 5px 35px !important;
    /* minimal top/bottom; no side inset */
    background-image: linear-gradient(to bottom, rgba(243, 244, 244, 0.7) 25%, rgba(255, 255, 255, 0.7) 90%) !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .05) !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 6000 !important;
  }




  #mm-communities:hover>.mega-menu-content,
  #mm-communities.active>.mega-menu-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  #mm-quickmovein {
    position: static !important;
  }

  #mm-quickmovein>.mega-menu-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 2px 0 0 0 !important;
    border-top: 2px solid #002D62 !important;
    border-bottom: 2px solid #002D62 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 5px 0 5px 35px !important;
    /* minimal top/bottom; no side inset */
    background-image: linear-gradient(to bottom, rgba(243, 244, 244, 0.7) 25%, rgba(255, 255, 255, 0.7) 90%) !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .05) !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 6000 !important;
  }

  #mm-quickmovein:hover>.mega-menu-content,
  #mm-quickmovein.active>.mega-menu-content {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Full-width grid layout */
  #mm-communities>.mega-menu-content>.row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(80px, 1fr)) !important;
    column-gap: 25px !important;
    row-gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* First column breathing room (your “40”) */
  #mm-communities>.mega-menu-content>.row>.mega-menu-column:first-child {
    padding-left: 10px !important;
  }




  /* City headings — no underline rule, tight spacing */
  #mm-communities .mega-menu-title {
    margin: 0 0 0px 0 !important;
    padding: 0 !important;
  }

  /* Add separation before subsequent cities in the same column */
  #mm-communities .mega-menu-column > .mega-menu-title + .mega-menu-title {
    margin-top: 18px !important;
  }

  #mm-communities .mega-menu-title>a.menu-link {
    padding: 0 !important;
  }

  #mm-communities .mega-menu-title>a.menu-link div {
    font-weight: 800 !important;
    color: #002D62 !important;
    letter-spacing: .2px !important;
    line-height: 1.0 !important;
    margin: 0 0 0px 0 !important;
    position: relative !important;
  }

  #mm-communities .mega-menu-title>a.menu-link div::after {
    display: none !important;
  }

  /* kill theme line */

  /* Community list — compact rhythm */
  #mm-communities .mega-menu-title>.sub-menu-container {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  #mm-communities .mega-menu-title>.sub-menu-container>.menu-item {
    margin: 0 !important;
    padding: 0 !important;
  }

  #mm-communities .mega-menu-title>.sub-menu-container>.menu-item+.menu-item {
    margin-top: 3px !important;
  }

  #mm-communities .mega-menu-title>.sub-menu-container a.menu-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    column-gap: 6px !important;
    row-gap: 2px !important;
    padding: 2.5px 0 !important;
    border: 0 !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
  }

  #mm-communities .community-name {
    display: inline-block !important;
    color: #3f4346 !important;
    font-weight: 500 !important;
    font-size: .85rem !important;
    font-family: 'Montserrat', sans-serif !important;
    transition: color 0.2s ease-in-out;
  }

  #mm-communities .mega-menu-title>.sub-menu-container a.menu-link:hover .community-name {
    color: var(--cnvs-primary-menu-submenu-hover-color) !important;
    font-weight: 600 !important;
  }

  #mm-communities .mega-menu-title>.sub-menu-container a.menu-link:hover {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    column-gap: 6px !important;
    row-gap: 2px !important;
    padding: 2.5px 0 2.5px 10px !important;
    border: 0 !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
  }



  /* Extra space after the LAST community in each city */
  #mm-communities>.mega-menu-content>.row>.mega-menu-column>.mega-menu-title>.sub-menu-container>.menu-item:last-child {
    margin-bottom: 12px !important;
  }

  /* Safety: no stray column rules from theme */
  #mm-communities .mega-menu-column::before,
  #mm-communities .line-left::after {
    display: none !important;
  }
}



/* 5-up on mid desktops (avoid squeeze) */
@media (min-width:992px) and (max-width:1366px) {
  #mm-communities>.mega-menu-content>.row {
    grid-template-columns: repeat(5, minmax(180px, 1fr)) !important;
    column-gap: 0px !important;
  }

  #mm-communities>.mega-menu-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 2px 0 0 0 !important;
    border-top: 2px solid #002D62 !important;
    border-bottom: 2px solid #002D62 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 5px 0 5px 5px !important;
    /* minimal top/bottom; no side inset */
    background-image: linear-gradient(to bottom, rgba(243, 244, 244, 0.7) 50%, rgba(255, 255, 255, 0.7) 90%) !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .05) !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 6000 !important;
  }

  #mm-quickmovein>.mega-menu-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 2px 0 0 0 !important;
    border-top: 2px solid #002D62 !important;
    border-bottom: 2px solid #002D62 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    padding: 5px 0 5px 5px !important;
    /* minimal top/bottom; no side inset */
    background-image: linear-gradient(to bottom, rgba(243, 244, 244, 0.7) 50%, rgba(255, 255, 255, 0.7) 90%) !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .05) !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 6000 !important;
  }



}

/* Pills — compact & baseline for both desktop and mobile viewports */
.city-status {
  display: inline-block !important;
  vertical-align: baseline !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: .70rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #fff !important;
  margin: 0 !important;
  position: static !important;
  float: none !important;
}

/* Global styling for communities menu links on both desktop and mobile viewports */
.community-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  column-gap: 6px !important;
  row-gap: 2px !important;
  line-height: 1.2 !important;
}

.community-name {
  display: inline-block !important;
  color: #3f4346 !important;
  font-weight: 500 !important;
  font-size: .85rem !important;
  font-family: 'Montserrat', sans-serif !important;
  transition: color 0.2s ease-in-out;
}

.community-link:hover .community-name {
  color: var(--cnvs-primary-menu-submenu-hover-color) !important;
  font-weight: 600 !important;
}



@media (min-width: 991px) {
  #mm-communities .is-first-col {
    padding-left: 0px !important;
  }

  #mm-communities>.mega-menu-content {
    padding: 5px 0 5px 35px !important;
  }
}

/* Inline pill inside standard sub-menus (About dropdown, etc.) next to text */
#primary-menu .menu-link.has-right-pill {
  position: relative;
  padding-right: 0 !important;
  z-index: 1;
}

#primary-menu .menu-link.has-right-pill .nav-new-pill {
  position: static !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
  white-space: nowrap !important;
  transform: none !important;

  /* match mega-menu .city-status look */
  padding: 2px 8px !important;
  border-radius: 999px !important;
  font-size: .70rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  /* force brand red + white text so no theme rule can override */
  background: #ED1C24 !important;
  color: #fff !important;

  box-shadow: 0 1px 2px rgba(0, 0, 0, .08) !important;
  pointer-events: none !important;
  /* clicks still hit the link */
}

/* Make first-level dropdowns wider (so long labels don’t wrap) */
@media (min-width: 992px) {
  #primary-menu>.menu-container>.menu-item>.sub-menu-container {
    min-width: 380px !important;
    /* tweak 420–520px to taste */
  }
}

/* Mobile tweaks for the pill */
@media (max-width: 991.98px) {
  #primary-menu .menu-link.has-right-pill {
    padding-right: 0 !important;
  }

  /* Tighten subdivision city columns and links indentation on mobile menu */
  #mm-communities > .mega-menu-content {
    padding: 0 !important;
    margin: 0 !important;
  }
  #mm-communities > .mega-menu-content > .row {
    margin: 0 !important;
    padding: 0 !important;
  }
  #mm-communities .mega-menu-column {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #mm-communities .city-title {
    margin: 10px 0 5px 0 !important;
    padding: 0 !important;
  }
  #mm-communities .city-title a {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 0 !important;
    display: inline-block !important;
  }
  #mm-communities .community-link {
    padding-left: 15px !important;
    padding-right: 0 !important;
    margin-top: 3px !important;
    margin-bottom: 3px !important;
    display: inline-flex !important;
    font-size: 0.85rem !important;
  }

  /* Remove stacked column padding/margins on QMI mobile menu */
  #mm-quickmovein .mega-menu-content {
    padding: 0 !important;
    margin: 0 !important;
  }
  #mm-quickmovein .mega-menu-content > .row {
    margin: 0 !important;
    padding: 0 !important;
  }
  #mm-quickmovein .mega-menu-column {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Restore top border on the first-child menu-item of subsequent columns when stacked on mobile */
  #mm-communities .mega-menu-column:not(:first-child) > .menu-item:first-child,
  #mm-quickmovein .mega-menu-column:not(:first-child) > .menu-item:first-child {
    border-top: var(--cnvs-primary-menu-submenu-border) !important;
  }
}

#save-on-upgrades {
  background-image: url('https://cdn.firsttexashomes.com/images/backgrounds/shaps-bg.png');
  background-position: center center;
  background-size: cover;
  /* scale to fill, keep aspect */
  background-repeat: no-repeat;
  /* don't tile */
  /* background-attachment: scroll;  // keep it regular (avoid parallax seams) */
}


.toggle-title {
  font-weight: 700;
  color: var(--fth-navy);
}


.ftx-submit,
.ftx-button {
  display: block;
  width: 100%;
  margin-top: .75rem;
  padding: .75rem 1rem;
  font: 700 1rem/1 'Montserrat', sans-serif;
  letter-spacing: .5px;
  color: #fff;
  border: 1px;
  border-radius: var(--radius, 8px);
  cursor: pointer;
  transition: background .2s;
  text-align: center;
}

.ftx-submit:hover,
.ftx-button:hover {}

.ftxbluebutton {
  background-color: #002D62;
  font-weight: 700;
  color: #fff;
  border: 1px solid #002D62;
  border-radius: var(--radius, 8px);
}

.ftxbluebutton:hover {
  background-color: #fff;
  font-weight: 700;
  color: #002D62;
  border: 1px solid #002D62;
  border-radius: var(--radius, 8px);
}

.ftxredbutton {
  background-color: #FF0006;
  font-weight: 700;
  color: #ffffff;
  border: 1px solid #FF0006;
  border-radius: var(--radius, 8px);
}

.ftxredbutton:hover {
  background-color: #fff;
  font-weight: 700;
  color: #FF0006;
  border: 1px solid #FF0006;
  border-radius: var(--radius, 8px);
}

.btn-close {
  background-color: #002D62;
  font-weight: 700;
  color: #fff;
  border: 1px solid #002D62;
  border-radius: var(--radius, 8px);
}

.btn-close:hover {
  background-color: #fff;
  font-weight: 700;
  color: #002D62;
  border: 1px solid #002D62;
  border-radius: var(--radius, 8px);
}

.req {
  color: #FF0006;
}





/*404 Page */
/* Minimal helpers that play nice with Canvas */
.pill {
  display: inline-block;
  padding: .45rem .8rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  margin: .25rem;
  text-decoration: none
}

.muted {
  color: #6b7280
}

.tiny {
  font-size: .9rem
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
}

.card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem;
  background: #fff
}

.card h3 {
  margin: .25rem 0 .35rem;
  font-size: 1.05rem
}

/* (Removed unused searchbar styles) */

.btn {
  display: inline-block;
  padding: .6rem .9rem;
  border-radius: 10px;
  border: 1px solid #002D62;
  text-decoration: none
}

.btn-primary {
  background: #002D62;
  color: #fff
}

/* (Removed unused btn-outline styles) */

.section {
  padding: 2.5rem 0
}

.error404 {
  display: block;
  font-size: 10vw;
  font-weight: 700;
  color: #ddd;
  line-height: 1;
  letter-spacing: 4px;
}

.error404-wrap .container {
  z-index: 7;
}

.error404-wrap .error404 {
  line-height: 0.9;
  margin-bottom: 40px;
  font-weight: bold;
  font-size: 10vw;
  color: #fff !important;
  opacity: 0.5;
  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
}

.error404-wrap .heading-block h4,
.error404-wrap .heading-block .h4 {
  font-weight: 300;
  margin-bottom: 8px;
}

.error404-wrap .heading-block span {
  font-size: 1.125rem;
}

.error404-wrap form {
  max-width: 500px;
}

/*404 Page */

/* Hero overflow clip (prevents cloned slides from widening the page) */
#wrapper section#slider#slider .hero-owl .owl-stage-outer,
#wrapper section#slider#slider #heroOwl .owl-stage-outer {
  overflow-x: hidden !important;
  overflow-y: hidden;
}

#wrapper section#slider#slider #heroOwl .owl-stage {
  transform: translate3d(0, 0, 0);
}

/* If you still see a 1px bar on some DPR/zoom combos, add: */
#wrapper section#slider#slider {
  overflow: hidden !important;
}



/*PROMO STICKY BAR*/
/* Promo bar above nav */
#promo-bar {
  background-color: #002D62;
  /* FTH navy / adjust as needed */
  color: #ffffff;
  font-size: 16px;
  line-height: 1.4;
}

#promo-bar .promo-bar-inner {
  padding-top: 8px;
  padding-bottom: 8px;
  justify-content: center;
}

#promo-bar .promo-bar-text {
  text-align: center;
  font-weight: 600;
}

/* Button on the right – keeps it tight like the example */
#promo-bar .promo-bar-btn {
  margin-left: 24px;
  white-space: nowrap;
}

/* Mobile: stack text and button */
@media (max-width: 991.98px) {
  #promo-bar .promo-bar-inner {
    flex-direction: column;
    text-align: center;
  }

  #promo-bar .promo-bar-btn {
    margin-left: 0;
    margin-top: 6px;
  }
}

.ftxspecialbutton {
  background-color: #ed1c24;
  font-weight: 700;
  color: #fff;
  border: 1px solid #ffffff;
  border-radius: var(--radius, 8px);
}

.ftxspecialbutton:hover {
  background-color: #fff;
  font-weight: 700;
  color: #ed1c24;
  border: 1px solid #ed1c24;
  border-radius: var(--radius, 8px);
}


/* --- Incentive Banner --- */
.incentive-banner {
  position: relative;
  border-radius: 14px;
  border: 1px solid #e8e0d7;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
  overflow: hidden;
  padding: 0 10px;
  background-color: #002D62;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(30, 58, 138, 0.8) 0%, transparent 80%),
    radial-gradient(ellipse at 70% 80%, rgba(127, 29, 29, 0.3) 0%, transparent 50%),
    linear-gradient(180deg, hsl(220 50% 8%) 0%, hsl(220 50% 12%) 50%, hsl(220 50% 8%) 100%);
  z-index: 0;

}



.incentive-banner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(180deg, #4479ad 0%, #002D62 50%, #4479ad 100%);
  z-index: 0;
  pointer-events: none;
}

.incentive-banner .incentive-script {}

.incentive-copy {
  color: #17ae1b;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1), -1px -1px 2px rgba(0, 0, 0, 0.2);
  line-height: 1.2;
  margin: 0 !important;
}

.incentive-banner> :first-child {
  margin-top: 0 !important;
}

.incentive-banner> :last-child {
  margin-bottom: 0 !important;
}

.incentive-banner .incentive-script {
  margin: 2px 0 6px !important;
}

@media (min-width: 992px) {
  .incentive-banner {
    padding: 18px 28px;
  }
}

@media (max-width: 575.98px) {
  .incentive-banner {
    background-position: 50% 40%;
  }
}

/* =========================================================
   Universal Sub-Navigation Sticky Bar (.StickSubNav)
   ========================================================= */

.StickSubNav {
  position: relative;
  width: 100%;
  left: 0;
  right: 0;
  background: #002D62 !important;
  margin: 0 !important;
  padding: 0 !important;
  isolation: isolate;
  will-change: top;
  transform: translateZ(0);
}

@media (min-width: 768px) {
  .StickSubNav {
    position: sticky !important;
    top: calc(var(--header-visible-bottom, 0px) - 1px) !important;
    z-index: 1030 !important;
  }
}

/* Paint a navy overlap that covers any fractional seam */
.StickSubNav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: #002D62;
  pointer-events: none;
}

/* Nav list styling inside the StickSubNav */
.StickSubNav #stickSubNavList {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
}

@media (min-width: 992px) {
  .StickSubNav #stickSubNavList {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    width: 100%;
  }
  .StickSubNav #stickSubNavList .nav-item {
    white-space: nowrap !important;
  }
}

/* Fluid responsive text & button sizes for sub-nav links */
.StickSubNav #stickSubNavList .nav-link {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  padding: 8px 12px !important;
  transition: opacity 0.2s ease;
}

.StickSubNav #stickSubNavList .nav-link:hover {
  opacity: 0.8;
}

.StickSubNav #stickSubNavList .red-pill-btn {
  background: #ED1C24 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  padding: 10px 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease;
}

.StickSubNav #stickSubNavList .red-pill-btn:hover {
  background-color: #d1171d !important;
}

/* Responsive scaling for viewport widths between 992px and 1199.98px to prevent wrap */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .StickSubNav #stickSubNavList {
    gap: 8px !important;
  }
  .StickSubNav #stickSubNavList .nav-link {
    font-size: 0.8rem !important;
    padding: 6px 8px !important;
  }
  .StickSubNav #stickSubNavList .red-pill-btn {
    font-size: 0.8rem !important;
    padding: 8px 12px !important;
  }
}

/* ===================================================================================
   CONSOLIDATED & DEDUPLICATED DETAIL PAGE STYLES (COMMUNITY, PLAN, SPEC)
   =================================================================================== */

/* -----------------------------------------------------------
   1. Brand Fonts, MTM Headline & Variables
   ----------------------------------------------------------- */
@font-face {
  font-family: 'ZingRustDemo';
  src: url('/promos/fonts/ZingRustDemo.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HaveHeartOne';
  src: url('/promos/fonts/HaveHeartOne.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.mtm-headline {
  font-family: 'ZingRustDemo', sans-serif;
  font-size: clamp(.8rem, 12vw, 2.8rem);
  font-weight: bold;
  color: white;
  line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  animation: mtm-fadeInUp 0.8s ease-out 0.1s both;
}

:root {
  --status-green: #22c55e;
  --status-yellow: #f59e0b;
  --status-red: #ED1C24;
  --status-gray: #94a3b8;
  --brand-navy: #002D62;
  --brand-navy-2: #003c84;
}

/* -----------------------------------------------------------
   2. Layout Helpers & Reset Rules
   ----------------------------------------------------------- */
html {
  max-width: 100%;
  overflow-x: visible !important;
}
body {
  max-width: 100%;
  overflow-x: hidden !important;
  padding-bottom: var(--msf-h, 0px);
}
#wrapper {
  overflow: visible !important;
}
#allthedata {
  margin-top: 60px;
}
.spec-desc p {
  margin: 0 0 0.9rem 0;
}

/* -----------------------------------------------------------
   3. Micro-Animations & Utilities
   ----------------------------------------------------------- */
@keyframes heartbeat {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); box-shadow: 0 0 10px rgba(255,255,255,0.3); }
  100% { transform: scale(1); }
}
.heartbeat-animation {
  animation: heartbeat 2s infinite ease-in-out;
}
.btn-light.heartbeat-animation:hover {
  background-color: rgba(255,255,255,0.3) !important;
  text-decoration: none;
}
.mobile-final-fix {
  margin-left: 15px !important;
  width: calc(100% - 30px) !important;
}

/* -----------------------------------------------------------
   4. Your Home On Your Terms Promo Banner
   ----------------------------------------------------------- */
.yhoyt-banner {
  border: 4px solid #002D62;
  background: #ffffff;
  margin-bottom: 2rem;
  font-family: 'Montserrat', sans-serif;
}
.yhoyt-left {
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.yhoyt-right {
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
@media (min-width: 992px) {
  .yhoyt-left {
    border-right: 2px solid #000;
    align-items: center;
  }
}
.yhoyt-h1 {
  color: #002D62; 
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 5vw, 4.5rem); 
  font-weight: 400; 
  line-height: 1; 
  letter-spacing: 2px; 
  text-transform: uppercase;
  white-space: nowrap;
}
.yhoyt-sub {
  color: #222;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-top: 5px;
  white-space: nowrap;
}
.yhoyt-disc {
  font-size: 0.65rem; 
  color: #000; 
  margin-top: 15px; 
  line-height: 1.2;
  font-weight: 500;
  text-align: justify;
}
.yhoyt-red {
  color: #ed1c24;
  font-family: 'Montserrat', sans-serif;
}
.yhoyt-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.5rem, 5.5vw, 4.5rem); 
  letter-spacing: 1px; 
  margin-bottom: -4px; 
  line-height: 1; 
  font-weight: 400;
  white-space: nowrap;
}

/* Patriotic Theme for Move-In Ready Specs */
.yhoyt-banner-patriotic {
  background: repeating-linear-gradient(
    135deg,
    #ec0f0f,
    #ec0f0f 15px,
    #ffffff 15px,
    #ffffff 30px
  ) !important;
  padding: 8px !important;
  border: none !important;
}
.yhoyt-banner-patriotic > .row {
  background: #ffffff;
  border: 4px solid #002D62;
  margin: 0 !important;
}
.yhoyt-banner-patriotic .yhoyt-left {
  background-color: #002D62;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpolygon points='20,2 25,14 38,14 28,22 32,35 20,27 8,35 12,22 2,14 15,14' fill='white' fill-opacity='0.12'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 35px 35px;
  border-bottom: 4px solid #002D62 !important;
  border-right: none !important;
}
@media (min-width: 992px) {
  .yhoyt-banner-patriotic .yhoyt-left {
    border-right: 4px solid #002D62 !important;
    border-bottom: none !important;
  }
}
.yhoyt-banner-patriotic .yhoyt-h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.yhoyt-banner-patriotic .yhoyt-sub {
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* -----------------------------------------------------------
   5. Hero Image & Carousel Layouts
   ----------------------------------------------------------- */
#slider.slider-element {
  position: relative !important;
  height: calc(90vh - var(--initial-header-bottom, var(--header-visible-bottom, 0px))) !important;
  max-height: 90vh;
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
}
@supports (height: 100svh) {
  #slider.slider-element {
    height: calc(90svh - var(--initial-header-bottom, var(--header-visible-bottom, 0px))) !important;
    max-height: 90svh;
  }
}
@supports (height: 100dvh) {
  #slider.slider-element {
    height: calc(90dvh - var(--initial-header-bottom, var(--header-visible-bottom, 0px))) !important;
    max-height: 90dvh;
  }
}

#heroOwl,
#heroOwl.owl-loaded,
#heroOwl.owl-height {
  height: 100% !important;
  border-bottom: none !important;
}
#heroOwl .owl-stage-outer,
#heroOwl .owl-stage,
#heroOwl .owl-item,
#heroOwl .item {
  height: 100% !important;
}
#heroOwl .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center !important;
  display: block;
}
#heroOwl .owl-dots {
  display: none !important;
}
#heroOwl .owl-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  margin-top: 0 !important;
}
#heroOwl .owl-nav button {
  pointer-events: auto;
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  padding: 12px 10px !important;
}
#heroOwl .owl-nav .owl-prev { margin-left: 6px; }
#heroOwl .owl-nav .owl-next { margin-right: 6px; }

/* LCP Hero Placeholder Overlays */
.hero-placeholder {
  position: absolute !important;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  overflow: hidden;
  background: #f0f0f0;
}
.hero-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.owl-carousel.owl-loaded + .hero-placeholder {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.5s ease-out !important;
}
.owl-carousel .owl-stage-outer {
  z-index: 1;
}

/* Mobile Hero Height Lock */
@media (max-width: 575.98px) {
  #slider.slider-element {
    height: var(--hero-lock, calc(100dvh - var(--header-visible-bottom, 0px))) !important;
    max-height: var(--hero-lock, 100dvh) !important;
    overflow: hidden;
    background: #fff;
  }
}

/* -----------------------------------------------------------
   6. Header Overlay Headlines
   ----------------------------------------------------------- */
.headline-spec-overlay2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: rgba(29,49,97, 0.82) !important;
  box-shadow: 0 1px 6px rgba(29,49,97, .9);
  padding: 20px 18px 20px 100px;
  color: #fff;
  pointer-events: none;
}
.headline-spec-overlay2 p,
.headline-spec-overlay2 h1,
.headline-spec-overlay2 span {
  pointer-events: auto;
  margin-left: 0;
}
.headline-spec-overlay2 .addessoverlay {
  font-size: clamp(15px, 2.2vw, 18px);
  margin-bottom: 6px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}
.headline-spec-overlay2 .headline {
  font-size: clamp(20px, 3vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
@media (max-width: 767.98px) {
  .headline-spec-overlay2 {
    padding: 15px 14px 15px 24px;
  }
}

.headline-plan-overlay1 {
  position: absolute;
  left: 0;
  bottom: 129px;
  z-index: 50;
  text-shadow: 0 3px 8px rgba(29,49,97,.9);
  color: #fff;
  padding: 0 10px 0 100px;
  font-size: 50px;
}
.plan-addressoverlay {
  margin: 0;
  padding: 0;
  font-size: 30px;
}
.headline-plan-overlay2 {
  position: absolute;
  left: 0;
  bottom: 60px;
  background: rgba(29,49,97,.80);
  box-shadow: 0 1px 6px rgba(29,49,97,.9);
  z-index: 5;
  text-shadow: 0 2px 8px rgba(29,49,97,.9);
  color: #fff;
  padding: 10px 15px 15px 100px;
}

.headline-ds-overlay {
  position: absolute;
  left: 0;
  bottom: 60px;
  background: rgba(29,49,97, 0.82);
  box-shadow: 0 1px 6px rgba(29,49,97, .9);
  z-index: 5;
  text-shadow: 0 2px 8px rgba(29,49,97, .9);
  color: #fff;
  padding: 10px 15px 10px 100px;
  border-radius: 0;
  font-weight: 800;
}
@media (max-width: 575.98px) {
  .headline-ds-overlay {
    bottom: 16px;
    padding: 10px 14px 12px 16px;
  }
}

/* Mobile Hero Captions */
.hero-caption {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.hero-caption .display-1,
.hero-caption h1 {
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
@media (max-width: 575.98px) {
  .hero-caption {
    padding: 0 14px;
    gap: .35rem;
  }
  .hero-caption .display-1 {
    font-size: clamp(24px, 8.5vw, 34px);
    line-height: 1.08;
    margin: 0;
  }
  .hero-caption h1 {
    font-size: clamp(14px, 4.6vw, 18px);
    line-height: 1.18;
    margin: 0;
    font-weight: 700;
  }
}

/* -----------------------------------------------------------
   7. Availability Status Indicators & Ribbons
   ----------------------------------------------------------- */
.spec-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 700;
}
.spec-status::before {
  content: "";
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--status-gray);
  flex: 0 0 .7rem;
  box-shadow: 0 0 0 2px #fff;
}
.spec-status[data-status*="under contract" i]::before,
.spec-status[data-status="sold"]::before {
  background-color: var(--status-red) !important;
  border-color: var(--status-red) !important;
}
.spec-status[data-status="move-in-ready"]::before,
.spec-status[data-status="move-in ready" i]::before,
.spec-status[data-status="now available" i]::before {
  background-color: var(--status-green) !important;
  border-color: var(--status-green) !important;
}
.spec-status[data-status="under-construction"]::before,
.spec-status[data-status="under_construction"]::before,
.spec-status[data-status*="construction"]::before,
.spec-status[data-status="under construction" i]::before {
  background-color: var(--status-yellow) !important;
  border-color: var(--status-yellow) !important;
}
.spec-status::before {
  background-color: var(--status-gray);
  border-color: var(--status-gray);
}
.status-ribbon {
  font-size: .9rem;
}

/* Diagonal Sold Ribbons */
.spec-ribbon {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.spec-ribbon.diagonal span {
  --ribbon-color: #ED1C24;
  --ribbon-height: 44px;
  --ribbon-angle: -35deg;

  position: absolute;
  top: 50%;
  left: 50%;
  width: 160%;
  height: var(--ribbon-height);
  line-height: var(--ribbon-height);
  transform: translate(-50%, -50%) rotate(var(--ribbon-angle));
  background: var(--ribbon-color);
  color: #fff;
  text-align: center;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  white-space: nowrap;
}
@media (max-width: 576px) {
  .spec-ribbon.diagonal span {
    --ribbon-height: 36px;
    font-size: .85rem;
  }
}

/* -----------------------------------------------------------
   8. Stats & Spec Specifications Layouts
   ----------------------------------------------------------- */
.spec-stats i {
  font-size: 18px;
  color: #002D62;
  line-height: 1;
}
.spec-stats .value {
  font-weight: 800;
  font-size: 18pt;
  color: #002D62;
  line-height: 1.1;
  margin-top: 6px;
}
.spec-stats .label {
  font-weight: 600;
  color: #002D62;
  opacity: .9;
  font-size: .7rem;
}

/* -----------------------------------------------------------
   9. Masonry Galleries & Image Zoom Modals
   ----------------------------------------------------------- */
.fp-thumb {
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
}
.fp-thumb.active,
.fp-thumb:hover {
  border-color: #002D62;
}

/* Media Gallery Masonry Grids */
#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;
}

.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;
}

/* Media Tiles Components */
.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));
  pointer-events: none;
}
.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;
}
.media-tile.is-video::before,
.media-tile.is-lotmap::before,
.media-tile.is-more::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #002D62;
  opacity: .75;
  z-index: 1;
  pointer-events: none;
}
.media-tile .tile-play-icon,
.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);
}
.media-tile.is-video:hover .tile-play-icon {
  color: #fff;
  transform: scale(1.04);
}
.media-tile .tile-play-icon svg {
  width: 25%;
  height: 25%;
}

#about-media-grid .col-12.col-sm-6.col-lg-4 {
  margin-bottom: .25rem;
}

/* Mobile Masonry Grids Toggle */
@media (max-width: 575.98px) {
  #photogallery-border .photogallery-masonry,
  #about-media-grid {
    display: none !important;
  }
  #photogallery-border .pg-mobile,
  #about-mobile {
    display: none !important;
  }
  #photogallery-border.filter-elev .pg-mobile-elev,
  #photogallery-border.filter-int .pg-mobile-int {
    display: block !important;
  }
}

/* Floorplan Download Button */
.fp-download-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: #002D62;
  color: #fff;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 4px;
  text-decoration: none;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  transition: all 0.2s ease-in-out;
}
.fp-download-btn:hover {
  background-color: #fff;
  color: #002D62;
  text-decoration: none;
  border: 1px solid #002D62;
}

/* -----------------------------------------------------------
   10. Detail Modals & Embeds
   ----------------------------------------------------------- */
.modal-backdrop {
  z-index: 99999 !important;
}
.modal {
  z-index: 999999 !important;
}
/* Specifically ensure media/zoom modals sit above the sticky header */
#pgZoomModal,
#fpZoomModal,
#vtourModal,
#videoModal,
#aboutVideoModal,
#lotMapModal {
  z-index: 999999 !important;
}
.modal-footer {
  display: none;
}
#infoRequestModal .modal-content,
#infoRequestTourModal .modal-content,
div.modal-content.bg-white {
  background-color: #ffffff !important;
  background: #ffffff !important;
  color: #1d3161 !important;
}

/* Ensure datepicker popup always sits above Bootstrap modals */
.datepicker,
.datepicker-dropdown,
div.datepicker,
.bootstrap-datetimepicker-widget,
.ui-datepicker {
  z-index: 9999999 !important;
}

/* Hide native inner calendar indicator icon inside input[type="date"] */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
  display: none !important;
  -webkit-appearance: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Force 100% Identical Symmetrical Width & Height for Date & Time Input Groups */
.ftx-inline {
  display: flex !important;
  gap: 15px !important;
  width: 100% !important;
}

.ftx-inline .ftx-field {
  flex: 1 1 0% !important;
  width: 50% !important;
  min-width: 0 !important;
}

.ftx-field .input-group {
  display: flex !important;
  width: 100% !important;
}

.ftx-field .input-group .form-control,
.ftx-field .input-group .form-select,
input[type="date"].form-control,
input[type="date"].ftx-date-input {
  flex: 1 1 0% !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  padding: 0.5rem 0.75rem !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border: 1px solid #ced4da !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.ftx-field .input-group .input-group-text {
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: #f8f9fa !important;
  border: 1px solid #ced4da !important;
  border-left: 0 !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
}
@media (max-width: 768px) {
  #infoRequestModal .modal-content {
    padding-bottom: 10px !important;
  }
  #infoRequestModal .modal-body {
    padding-bottom: 10px !important;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
}
@media (max-width: 576px) {
  #calcModal .modal-dialog {
    max-width: 100vw !important;
    margin: 0 !important;
  }
}

/* Mortgage Calculator Modal Inner */
#calcContainer {
  position: relative;
  min-height: 420px;
}
#calcLoading {
  position: absolute !important;
  inset: 0 !important;
  display: none;
  align-items: center;
  justify-content: center;
  background: #fff;
  z-index: 2;
  pointer-events: none;
}
#calcLoading.is-on {
  display: flex;
}
#calcContainer iframe#calcFrame {
  display: block;
  width: 100%;
  height: calc(100dvh - 160px);
  border: 0;
}
@media (max-width: 576px) {
  #calcContainer iframe#calcFrame {
    height: calc(100dvh - 140px);
  }
}

/* Video aspect ratio overrides */
#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;
}
#aboutVideoModal .ratio {
  --bs-aspect-ratio: 56.25%;
}
#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;
}

/* Lightboxes overlays */
.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; }

/* -----------------------------------------------------------
   11. Address & Price Tags
   ----------------------------------------------------------- */
.address-price-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.address-price-wrap h2 {
  margin: 0;
  line-height: 1.1;
}
.price-tag {
  background: #002D62;
  color: #fff;
  padding: 12px 10px;
  border-radius: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  min-width: 170px;
  margin-left: auto;
  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.2rem;
  font-weight: 800;
}
.price-tag .moneyicon {
  height: 50px;
  float: left;
}
.price-tag .was .num {
  text-decoration: line-through;
}
.address-price-wrap.price-stretch {
  align-items: stretch;
}
.address-price-wrap.price-stretch .price-tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 575.98px) {
  .price-tag {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 0 0 !important;
    padding: 14px 16px;
    border-radius: 14px;
    background: #002D62;
    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 .now {
    order: 2;
    font-weight: 900;
    font-size: 1.45rem;
    line-height: 1.1;
  }
  .price-tag .now>span {
    display: inline-block;
    transform: translateY(1px);
  }
  .price-tag .save-pill {
    order: 3;
    background: #fff;
    color: #002D62;
    font-weight: 800;
    font-size: .9rem;
    padding: .28rem .6rem;
    border-radius: 999px;
    margin: 0 20px 0 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  }
  
  #getlistofhomesx.is-calc,
  #getlistofhomesx.is-calc .gap {
    background-color: #fff !important;
  }
  #getlistofhomesx.is-calc {
    background: #fff !important;
    position: relative;
    box-shadow: inset 0 1px 0 #DFE3E8;
  }
  #getlistofhomesx.is-calc::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: #DFE3E8;
    pointer-events: none;
  }
  #calc-border {
    background: #fff !important;
    padding: 24px 0 50px;
  }
}

/* -----------------------------------------------------------
   12. Forms & Search Filters
   ----------------------------------------------------------- */
.ftx-form label {
  color: var(--brand-blue);
  font-weight: 600;
}
#qmi-filters .form-label,
#plans-filters .form-label {
  color: var(--brand-blue);
  font-weight: 600;
}

/* -----------------------------------------------------------
   13. Tab Interfaces
   ----------------------------------------------------------- */
@media (max-width: 575.98px) {
  #canvas-tab-border {
    display: grid;
    grid-template-columns: 1fr;
    gap: .5rem;
  }
  #canvas-tab-border .nav-item,
  #canvas-tab-border .nav-link {
    width: 100%;
  }
  .carousel-indicators .active {
    opacity: 1;
  }
}

/* -----------------------------------------------------------
   14. Card Action Buttons
   ----------------------------------------------------------- */
.card-btnbar {
  display: flex;
  align-items: stretch;
}
.card-btnbar .btn {
  border-radius: 0;
}
.btn.btn-learnmore {
  background: #002D62;
  color: #fff;
  width: 33.333%;
}
.btn.btn-requestinfo {
  background: #fff;
  color: #002D62;
  width: 33.333%;
}
.btn.btn-requesttour {
  background: #ED1C24;
  color: #fff;
  width: 33.333%;
}

.btn-fth,
.about-mobile-actions .btn-fth,
.btn.btn-fth {
  background: #002D62 !important;
  color: #fff !important;
  border: 0;
  font-weight: 700;
  padding: .7rem 1rem;
  border-radius: .5rem;
  --bs-btn-bg: #002D62;
  --bs-btn-color: #fff;
  --bs-btn-border-color: #002D62;
}
.btn-fth:hover,
.btn-fth:focus,
.about-mobile-actions .btn-fth:hover,
.about-mobile-actions .btn-fth:focus,
.btn.btn-fth:hover,
.btn.btn-fth:focus {
  background: #083b7f !important;
  color: #fff !important;
}

/* -----------------------------------------------------------
   15. Floorplan & Gallery Mobile Controls
   ----------------------------------------------------------- */
@media (max-width: 575.98px) {
  #fpMobileCarousel .carousel-control-prev,
  #fpMobileCarousel .carousel-control-next {
    opacity: 1;
    width: 3rem;
  }
  #fpMobileCarousel .carousel-control-prev-icon,
  #fpMobileCarousel .carousel-control-next-icon {
    background-color: #002D62;
    border-radius: 9999px;
    width: 2.25rem;
    height: 2.25rem;
    background-size: 60% 60%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  }
  #fpMobileCarousel .carousel-indicators {
    position: static;
    margin: .5rem 0 0;
  }
  #fpMobileCarousel .carousel-indicators [data-bs-target] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #002D62;
    opacity: .3;
  }
  #fpMobileCarousel .carousel-indicators .active {
    opacity: 1;
  }
}

/* -----------------------------------------------------------
   16. Build This Plan Table Styles
   ----------------------------------------------------------- */
.ftp-table thead {
  background: #002D62;
  color: #fff;
}
.ftp-table thead th {
  font-weight: 700;
  vertical-align: middle;
  cursor: pointer;
}
.ftp-table thead th .th-sort {
  margin-left: .35rem;
  display: inline-block;
  width: 1rem;
  text-align: center;
}
.ftp-table thead th .th-sort i {
  opacity: .7;
}
.ftp-table thead th.active-asc .th-sort i {
  opacity: 1;
}
.ftp-table thead th.active-desc .th-sort i {
  opacity: 1;
}
.ftp-table thead th:hover .th-sort i {
  opacity: 1;
}

#findthisplan-border .ftpX-table thead,
#findthisplan-border .ftpX-table thead tr,
#findthisplan-border .ftpX-table thead th {
  background: #002D62 !important;
  color: #fff !important;
}
#findthisplan-border .ftpX-table thead th .th-sort {
  margin-left: .35rem;
  display: inline-block;
  width: 1rem;
  text-align: center;
}
#findthisplan-border .ftpX-table thead th .th-sort i {
  opacity: .7;
}
#findthisplan-border .ftpX-table thead th {
  cursor: pointer;
}
#findthisplan-border .ftpX-table tbody a.comm-link {
  color: #002D62 !important;
  text-decoration: underline;
}
#findthisplan-border .ftpX-table tbody a.comm-link i.fa-arrow-up-right-from-square {
  font-size: .85em;
  opacity: .65;
}
#findthisplan-border .btn-navy {
  background: #002D62;
  color: #fff;
  border: 0;
  font-weight: 700;
}
#findthisplan-border .btn-navy:hover {
  background: #003c84;
  color: #fff;
}

#ftpXBuildTable tbody tr:nth-child(odd) {
  background: #ffffff;
}
#ftpXBuildTable tbody tr:nth-child(even) {
  background: #f8fafc;
}

@media (max-width: 575.98px) {
  #ftpXBuildTable th:nth-child(3),
  #ftpXBuildTable td:nth-child(3),
  #ftpXBuildTable th:nth-child(6),
  #ftpXBuildTable td:nth-child(6) {
    display: none !important;
  }
  #ftpXBuildTable th,
  #ftpXBuildTable td {
    white-space: normal !important;
    word-break: break-word;
    padding: .55rem .5rem;
    font-size: .92rem;
    line-height: 1.2;
  }
  #ftpXBuildTable th.text-end,
  #ftpXBuildTable td.text-end {
    text-align: left !important;
  }
  #ftpXBuildTable td .btn-navy {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: .9rem;
  }
}

/* -----------------------------------------------------------
   17. Google Maps Layout Overrides
   ----------------------------------------------------------- */
[id^="google-map-"] {
  width: 100% !important;
  height: 600px !important;
  min-height: 400px;
  display: block;
  float: none !important;
  clear: both;
}
[id^="google-map-"].alignright {
  float: none !important;
}
#schools-border [id^="google-map-"] {
  display: block !important;
  width: 100% !important;
  float: none !important;
}

/* Recaptcha scale */
#gRecaptchaTour {
  transform-origin: 0 0;
}
@media (min-width: 768px) {
  #gRecaptchaTour[data-size="normal"] {
    transform: scale(1.12);
  }
}
@media (max-width: 767.98px) {
  #gRecaptchaTour {
    transform: none;
  }
}

/* -----------------------------------------------------------
   18. 3D & Virtual Tours
   ----------------------------------------------------------- */
#tour3d-border .ratio {
  --bs-aspect-ratio: 56.25%;
  position: relative;
}
#tour3d-border .ratio > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#tour3d-border iframe,
#tour3d-border iframe.video-100 {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border: 0;
}

#getlistofhomes { 
  scroll-margin-top: calc(var(--header-visible-bottom, 0px) + 70px);
}

.vtour-slot {
  height: 28px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  font-size: 1em;
  color: #002D62;
}
.vtour-slot a {
  font-weight: 600;
  color: #002D62;
  text-decoration: underline;
}

/* ===================================================================================
   UNIFIED WEBSITE STYLES (MERGED FROM INDEX.CSS & SHAREDSTYLES.CSS)
   =================================================================================== */

/* --- Styles from sharedstyles.css --- */
/* =========================================================
   Shared Styles
   Consolidated styles for new reusable sections (Testimonials, etc.)
   ========================================================= */

/* --- Testimonials Slider (Horizontal Scroll) --- */
#t-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Arrows sit outside or on edge */
}

.t-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 10px 4px 20px 4px;
  /* Bottom padding for shadow/scroll bar */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Hide scrollbar Firefox */
}

.t-track::-webkit-scrollbar {
  display: none;
}

/* Hide Chrome/Safari */

.t-card {
  flex: 0 0 280px;
  /* Fixed width cards */
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  .t-card {
    flex: 0 0 320px;
  }
}

.t-stars {
  color: #ffc107;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.t-quote {
  font-style: italic;
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
  flex-grow: 1;
}

.t-byline {
  font-weight: 700;
  color: #002D62;
  font-size: 0.85rem;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
  padding-top: 10px;
}

/* Navigation Arrows */
.t-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #002D62;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.t-nav:hover {
  background: #002D62;
  color: #fff;
  border-color: #002D62;
}

.t-nav.disabled {
  opacity: 0;
  pointer-events: none;
}

/* Hide if at end */
.t-prev {
  left: 0;
}

.t-next {
  right: 0;
}

@media (max-width: 767.98px) {

  /* On mobile, maybe hide arrows and let them swipe? */
  .t-nav {
    width: 32px;
    height: 32px;
  }

  .t-prev {
    left: -10px;
  }

  .t-next {
    right: -10px;
  }

  /* Ensure cards aren't too small */
  .t-card {
    flex: 0 0 85vw;
  }
}


/* Standardized Card Badge Styles (Floating Pill) */
.inventory-card .spec-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #002D62;
  /* Navy */
  color: #fff;
  font-weight: 700;
  /* Bold */
  padding: 8px 16px;
  /* Increased padding for larger look */
  border-radius: 6px;
  /* Slightly squarer or standard rounded */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Clear gap */
  line-height: 1.2;
  /* Normalized line-height */
  font-size: 16px;
  /* Increased font size */
  white-space: nowrap;
  pointer-events: none;
}

/* Status Indicator Dot */
.inventory-card .spec-badge::before {
  content: "";
  display: block !important;
  position: static !important;
  width: 12px;
  /* Larger dot */
  height: 12px;
  border-radius: 50%;
  background-color: #9ca3af;
  border: 2px solid #fff;
  /* White ring effect */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
  /* Subtle definition */
  flex-shrink: 0;
}

/* Status Colors */
.inventory-card .spec-badge[data-status="Now Available"]::before,
.inventory-card .spec-badge[data-status="Move-In Ready"]::before,
.inventory-card .spec-badge[data-status="Quick Move-In"]::before {
  background-color: #2ecc71;
  /* Green */
}

.inventory-card .spec-badge[data-status="Under Construction"]::before {
  background-color: #f39c12;
  /* Orange/Yellow */
}

/* ── Map Infobox Badge Overrides ─────────────────────────── */
.gm-style .infobox .spec-badge {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background: #002b59 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 8px 6px 14px !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.gm-style .infobox .spec-badge::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
  margin: 0 3px 0 0;
}

/* Map Status Colors */
.gm-style .infobox .spec-badge[data-status="Now Available"]::before,
.gm-style .infobox .spec-badge[data-status="Move-In Ready"]::before,
.gm-style .infobox .spec-badge[data-status="Quick Move-In"]::before {
  background: #2ecc71;
  /* Green */
}

.gm-style .infobox .spec-badge[data-status="Under Construction"]::before {
  background: #f39c12;
  /* Orange */
}

.gm-style .infobox .spec-badge[data-status="Quick Move-In"]::before {
  background: #2ecc71;
  /* Green */
}


/* ── Infobox (Google Maps) ─────────────────────────── */
.infobox {
  position: relative;
  background: #fff;
  width: auto;
  max-width: 550px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

.infobox .close-x {
  position: absolute;
  right: 8px;
  top: 8px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  text-align: center;
  font-size: 18px;
  line-height: 24px;
  color: #c00;
  cursor: pointer;
  z-index: 5;
}

.infobox .infobox-body {
  padding: 10px;
}

.infobox .infobox-scroll {
  max-height: 420px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px;
}

.infobox .info-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.infobox .text-col {
  flex: 1 1 auto;
  min-width: 0;
}

.infobox .title {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 4px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.infobox .image-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 200px;
  width: 200px;
  height: 120px;
}

.infobox .image-wrap--single {
  flex-basis: 180px;
  width: 180px;
  height: 120px;
}

/* ---------- Mobile tweaks for infobox ---------- */
@media (max-width:575.98px) {
  .infobox .info-row {
    flex-direction: column;
  }

  .infobox .image-wrap,
  .infobox .image-wrap--single {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }

  .infobox .title {
    margin-top: 6px;
  }

  /* tightened stack */
  .infobox .info-row>.image-wrap,
  .infobox .info-row>.image-wrap--single {
    margin-bottom: 10px;
  }

  .infobox .image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .infobox .infobox-body {
    padding: 10px 12px;
  }
}

/* ---------- Section full-bleed dividers ---------- */
.section-divider-bottom,
.section-divider-top {
  position: relative;
}

.section-divider-bottom::after,
.section-divider-top::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: 1px;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .08), transparent);
  pointer-events: none;
  z-index: 2;
}

/* keep following sections from overlapping */
section {
  position: relative;
  z-index: 0;
}

/* ---------- Tight tabs-to-content seam + visibility ---------- */
#aboutTabContent>.tab-pane>*:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#commTabPane .gmap-edge {
  margin-top: 0 !important;
}

#qmiTabPane>.section:first-child,
#qmiTabPane>.section:first-child .container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.about-tabs {
  margin-bottom: 0 !important;
}

.about-tabs+.tab-content {
  margin-top: 0 !important;
}

/* Ensure maps/slider are always visible (no lazy subtree issues) */
#comm_map,
#qmi_map,
#commTabPane .gmap-edge,
#qmiTabPane .gmap-edge,
#t-slider {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}

/* Owl Carousel gallery */
#ss-gallery .ss-slide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

#ss-gallery .owl-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #002D62 !important;
  color: #fff !important;
  border: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

#ss-gallery .owl-nav .owl-prev {
  left: 8px;
}

#ss-gallery .owl-nav .owl-next {
  right: 8px;
}

#ss-gallery .owl-nav button span {
  font-size: 22px;
  line-height: 1;
}

#ss-gallery .owl-dots {
  margin-top: 10px;
}

@media (max-width:575.98px) {
  #ss-gallery .owl-nav button {
    width: 40px;
    height: 40px;
  }
}

/* Misc */
.toggle-title {
  font-weight: 700;
  color: var(--fth-navy);
}

/* --- Heartbeat Animation (Shared) --- */
@keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); box-shadow: 0 0 10px rgba(255,255,255,0.3); }
    100% { transform: scale(1); }
}
.heartbeat-animation { animation: heartbeat 2s infinite ease-in-out; }

/* Only apply the white-ghost hover effect to .btn-light buttons (like in price tags),
   so red nav buttons keep their red background on hover. */
.btn-light.heartbeat-animation:hover { 
    background-color: rgba(255,255,255,0.3) !important; 
    text-decoration: none; 
}

/* --- Styles from index.css --- */
/* ── Infobox base ─────────────────────────────────────────── */
.infobox {
    position: relative;
    background: #fff;
    width: auto;
    max-width: 520px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
}

/* Close button */
.infobox .close-x {
    position: absolute;
    right: 8px;
    top: 8px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    text-align: center;
    font-size: 18px;
    line-height: 24px;
    color: #c00;
    cursor: pointer;
    z-index: 5;
}

.infobox .close-x:hover {
    color: #900;
}

/* Content layout */
.infobox .infobox-body {
    padding: 10px;
}

.infobox .infobox-scroll {
    max-height: 420px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
}

.infobox .info-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.infobox .text-col {
    flex: 1 1 auto;
    min-width: 0;
}

.infobox .title {
    font-weight: 700;
    font-size: 16px;
    margin: 0 0 4px;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.infobox .meta {
    color: #333;
    margin-bottom: 8px;
}

.infobox .cta {
    display: inline-block;
    padding: .5rem .8rem;
    border-radius: 10px;
}

/* Image + container */
.infobox .image-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    flex: 0 0 200px;
    width: 200px;
    height: 120px;
}

.infobox .image-wrap--single {
    flex-basis: 180px;
    width: 180px;
    height: 120px;
}

.infobox .image-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ── Mobile tweaks ───────────────────────────────────────── */
@media (max-width:600px) {
    .infobox {
        width: 90vw;
        max-width: 340px;
        font-size: .92rem;
    }

    .infobox .info-row {
        flex-direction: column;
    }

    .infobox .image-wrap,
    .infobox .image-wrap--single {
        width: 100%;
        height: auto;
        max-height: 160px;
        aspect-ratio: 16/9;
    }

    .infobox .image-wrap img {
        max-height: 160px;
    }

    .infobox .spec-badge {
        font-size: .7rem;
        padding: 4px 8px;
    }

    .infobox .title {
        font-size: .95rem;
    }
}

/* ── Google Maps scoping & paint hacks ───────────────────── */

/* ── Badge (always above image) ──────────────────────────── */

#map {
    width: 100vw;
    height: 560px;
}


/* ===================================================================================
   INLINE PAGE & COMPONENT STYLES (EXTRACTED & CONSOLIDATED)
   =================================================================================== */
/* =========================================================
   EXTRACTED FROM: index.php
   ========================================================= */

/* --- Block 1 --- */
/* Kill accidental horizontal scroll globally (modern browsers) */
  html, body { overflow-x: clip; } /* use hidden if you need older Safari: overflow-x:hidden; */

  /* Replace 100vw offenders with a viewport-safe full-width */
  .vw-safe { width: 100%; }

  /* If you still want true edge-to-edge (bleed) without scrollbars: */
  .bleed-x {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;             /* keeps the bleed aligned to the viewport */
    max-width: 100vw;         /* prevents > viewport expansion */
  }
	
	  .video-hero-wrap{position:relative;overflow:hidden;width:100vw;min-height:220px;max-height:810px;background:#001b3a;}
  @media (min-width:992px){ .video-hero-wrap{height:810px;} }
  .embed-16x9{position:relative;width:100%;height:100%;}
  .embed-16x9 iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .video-overlay{position:absolute;inset:0;background:rgba(0,43,89,0.45);z-index:2;pointer-events:none;}
  .video-caption{position:absolute;left:0;top:50%;width:100%;transform:translateY(-50%);z-index:3;text-align:center;}
	
	.gm-style .infobox .spec-badge[data-status="Quick Move-In"]::before { background:#22c55e; margin: 0 3px 0 0; }

/* =========================================================
   EXTRACTED FROM: about-customerreviews.php
   ========================================================= */

/* --- Block 1 --- */
:root{
--brand-navy:#002D62;
--brand-navy-2:#003c84;
--text-on-navy:#fff;
--tile-shadow:0 8px 24px rgba(0,0,0,.12);
--tile-radius:10px;

/* Brand */
--brand-blue: #002D62;
--brand-red:  #ED1C24;

/* Stacking order */
--z-slider: 1;
--z-header: 1040;
--z-sticky: 1030;
--z-modal-backdrop: 10500;
--z-modal: 10510;

--status-green: #22c55e;     /* Move‑In Ready / Now Available */
--status-yellow:#f59e0b;     /* Under Construction */
--status-red:   var(--brand-red); /* Sold: Under Contract */
--status-gray:  #94a3b8;     /* Fallback */
}



/* ======= Page-specific styles ======= */

/* Masonry via CSS columns */
.masonry {
column-gap: 1rem;
}

@media (max-width: 575.98px) {
.masonry {
column-count: 1;
}
}

@media (min-width: 576px) {
.masonry {
column-count: 2;
}
}

@media (min-width: 992px) {
.masonry {
column-count: 3;
}
}

@media (min-width: 1400px) {
.masonry {
column-count: 4;
}
}
/* Cards */
.t-card {
break-inside: avoid;
display: inline-block;
width: 100%;
margin: 0 0 1rem 0;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 6px 20px rgba(0,0,0,.06);
background: #fff;
border: 1px solid #eee;
}
/* Image figure with reserved aspect ratio (set inline) */
.t-figure {
position: relative;
width: 100%;
background: #f2f2f2;
}
.t-figure img {
width: 100%;
height: auto;
display: block;
}
/* Captions */
.t-body {
padding: .9rem 1rem 1rem;
color: #222;
}
.t-quote {
font-size: 1rem;
line-height: 1.5;
}
.t-byline {
margin-top: .5rem;
color: #002D62;
font-weight: 700;
font-size: .95rem;
}
.t-commline {
color: #555;
font-size: .92rem;
margin-top: .1rem;
}
/* Stars block (reuse communitydetail markup) */
.t-stars {
margin: .6rem 0 .5rem 0;
font-size: 1rem;
}
.t-stars i {
margin-right: 2px;
}

/* =========================================================
   EXTRACTED FROM: about-energy.php
   ========================================================= */

/* --- Block 1 --- */
:root{ --fth-navy:#002D62; --muted:#6b7280; }

:root{
--brand-navy:#002D62;
--brand-navy-2:#003c84;
--text-on-navy:#fff;
--tile-shadow:0 8px 24px rgba(0,0,0,.12);
--tile-radius:10px;

/* Brand */
--brand-blue: #002D62;
--brand-red:  #ED1C24;

/* Stacking order */
--z-slider: 1;
--z-header: 1040;
--z-sticky: 1030;
--z-modal-backdrop: 10500;
--z-modal: 10510;

--status-green: #22c55e;     /* Move‑In Ready / Now Available */
--status-yellow:#f59e0b;     /* Under Construction */
--status-red:   var(--brand-red); /* Sold: Under Contract */
--status-gray:  #94a3b8;     /* Fallback */
}



/* ===== Hotspots (accessible, navy) ===== */
.hotspot-stage{ position:relative; } /* parent for absolute hotspots */
.hotspot-link span{
position:absolute;
width:30px; height:30px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-weight:800; font-size:18px; line-height:1;
color:#fff; background:var(--fth-navy);
box-shadow:0 0 8px rgba(0,0,0,.35);
cursor:pointer; user-select:none;
outline:0; /* custom focus below */
animation:pulse 2s infinite;
}
.hotspot-link span:focus-visible{
outline:3px solid #ffffff; outline-offset:3px;
box-shadow:0 0 0 3px rgba(29,49,97,.35), 0 0 8px rgba(0,0,0,.35);
}
@keyframes pulse{
0%{ box-shadow:0 0 0 0 rgba(29,49,97,.55); }
70%{ box-shadow:0 0 0 14px rgba(29,49,97,0); }
100%{ box-shadow:0 0 0 0 rgba(29,49,97,0); }
}
@media (prefers-reduced-motion: reduce){
.hotspot-link span{ animation:none; }
}

/* ===== Reason cards / section icons ===== */
.reason-card{ border:1px solid #e8edf5; border-radius:18px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.04); }
.reason-icon{ width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;background:#f0f4fa;color:var(--fth-navy);font-size:22px; }

/* ===== Modal polish ===== */
.modal-header{ border-bottom:0; }
.ftx-modal-head{ display:flex; align-items:center; gap:12px; }
.ftx-modal-icon{
width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
background:#eaf2ff;color:var(--fth-navy);font-size:20px;flex:0 0 44px;
}
.ftx-modal-h{ font-weight:800;margin:0;color:var(--fth-navy);letter-spacing:.2px;font-size:1.2rem; }
.ftx-sub{ color:var(--muted); margin:.2rem 0 0 0; font-size:.95rem; }
.bg-soft{ background:#f8fbff; border:1px solid #e6edf7; border-radius:14px; }
.ftx-list{ list-style:none; padding-left:0; margin:0; }
.ftx-list li{ display:flex; gap:10px; align-items:flex-start; margin:.5rem 0; line-height:1.5; }
.ftx-tick{ color:#2ecc71; margin-top:2px; flex:0 0 18px; font-size:1rem; }
.ftx-note{ font-size:.85rem; color:var(--muted); }
.ftx-split{ display:grid; grid-template-columns:1fr; gap:16px; }
@media(min-width:576px){ .ftx-split{ grid-template-columns:1.2fr .8fr; } }
.ftx-chip{ display:inline-block; background:#f0f6ff; border:1px solid #e0eaff; padding:.25rem .55rem; border-radius:999px; font-size:.8rem; color:var(--fth-navy); font-weight:600; }

/* Toggle icons navy */
#energy-faq .toggle .toggle-icon i{ color:var(--fth-navy); }

/* Small helper text */
.muted{ color:var(--muted); }

.toggle-title{ font-weight:700; color:var(--fth-navy); }
label{color:var(--fth-navy);}


.modal { z-index: 1065 !important; }
.modal-backdrop { z-index: 1060 !important; }
	
/* Lock the Close button into the top-right of every modal header */
.modal-header { position: relative; }
.modal-header .ftx-modal-close,
.modal-header button[data-bs-dismiss="modal"],
.modal-header button[data-dismiss="modal"] {
  position: absolute;
  top: 1rem;
  right: .75rem;
  z-index: 1;            /* stays above header contents */
  line-height: 1;
  padding: .25rem .6rem; /* keep it compact */
}
	
/* Keep room for the Close button so text never wraps underneath it */
.modal-header { 
  position: relative; 
  padding-right: 4.5rem;  /* <-- reserve space on the right */
}
.modal-header .ftx-modal-close,
.modal-header button[data-bs-dismiss="modal"],
.modal-header button[data-dismiss="modal"] {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 1;
  line-height: 1;
  padding: .25rem .6rem;
}
.ftx-modal-head { min-width: 0; }
.ftx-modal-head > div { min-width: 0; }
.ftx-modal-h, .ftx-sub { overflow-wrap: anywhere; } /* prevent long titles from pushing */

#infoRequestModal .modal-dialog,
#infoRequestTourModal .modal-dialog {
  max-width: 620px !important;
}

/* --- Block 2 --- */
#infoRequestTourModal { z-index: 10600 !important; }
/* Only raise the backdrop when the TOUR modal is open — tag it via JS */
  .modal-backdrop[data-for="tour"] { z-index: 10590 !important; }

/* =========================================================
   EXTRACTED FROM: about-fth-select.php
   ========================================================= */

/* --- Block 1 --- */
/* ---------- CSS Variables ---------- */
:root {
  --fth-navy:#002D62;
  --fth-red:#ee1f24;
  --fth-muted:#6b7280;
  --brand-navy:#002D62;
  --brand-navy-2:#003c84;
  --text-on-navy:#fff;
  --tile-shadow:0 8px 24px rgba(0,0,0,.12);
  --tile-radius:10px;

  /* Brand */
  --brand-blue:#002D62;
  --brand-red:#ED1C24;

  /* Z-index (standard) */
  --z-slider:1;
  --z-header:1040;
  --z-sticky:1030;

  /* Status colors */
  --status-green:#22c55e;      /* Move-In Ready / Now Available */
  --status-yellow:#f59e0b;     /* Under Construction */
  --status-red:var(--brand-red); /* Sold: Under Contract */
  --status-gray:#94a3b8;       /* Fallback */
}

/* ---------- HERO ---------- */
.about-hero {
  background:#002D62;
  color:#fff;
}
.about-hero h1 { letter-spacing:.3px; }
.about-hero .lead-lg { font-size:1.15rem; color:#e8eef9; }

/* ---------- Content Cards ---------- */
.reason-card {
  border:1px solid #e8edf5;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
  transition:transform .2s, box-shadow .2s, border-color .2s;
  height:100%;
}
.reason-card:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  border-color:#dfe7f2;
}
.reason-icon {
  width:46px; height:46px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f0f4fa; font-size:22px; color:var(--fth-navy);
}
.eyebrow {
  text-transform:uppercase; font-size:.78rem; letter-spacing:.18em;
  color:var(--fth-red); font-weight:700;
}
.section-title { letter-spacing:.2px; font-weight:800; color:var(--fth-navy); }
.muted { color:var(--fth-muted); }

.divider {
  height:1px; width:100%;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  margin:30px 0;
}

/* ---------- Tabs (nav-pills) ---------- */
.about-tabs .nav { gap:10px; }
.about-tabs .nav-pills .nav-link {
  background:#f4f7fb; color:#002D62; font-weight:700;
  border-radius:999px; padding:.6rem 1rem; border:1px solid #e3e9f3;
}
.about-tabs .nav-pills .nav-link.active {
  background:#002D62; color:#fff; border-color:#002D62;
}

/* ---------- Edge-to-edge maps ---------- */
.gmap-edge {
  position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; width:100vw;
}
#comm_map, #qmi_map { width:100%; height:600px; }
.headingcity { text-transform:none; }

/* ---------- Infobox (Google Maps) ---------- */
.infobox {
  position:relative; background:#fff; width:auto; max-width:550px;
  border-radius:8px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.15);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}
.infobox .close-x {
  position:absolute; right:8px; top:8px; background:#fff; border:1px solid #ccc;
  border-radius:50%; width:26px; height:26px; text-align:center;
  font-size:18px; line-height:24px; color:#c00; cursor:pointer; z-index:5;
}
.infobox .infobox-body { padding:10px; }
.infobox .infobox-scroll {
  max-height:420px; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px;
}
.infobox .info-row { display:flex; gap:12px; align-items:flex-start; }
.infobox .text-col { flex:1 1 auto; min-width:0; }
.infobox .title {
  font-weight:700; font-size:16px; margin:0 0 4px; word-break:break-word; overflow-wrap:anywhere;
}
.infobox .image-wrap {
  position:relative; border-radius:8px; overflow:hidden; flex:0 0 200px;
  width:200px; height:120px;
}
.infobox .image-wrap--single { flex-basis:180px; width:180px; height:120px; }

/* Infobox status badge (absolute inside map balloons) */


/* CARD badges only (not the map infobox) */


/* You can set colors by status via data-status attr if needed:
.inventory-card .spec-badge[data-status="Now Available"]::before { background:var(--status-green); }
.inventory-card .spec-badge[data-status="Under Construction"]::before { background:var(--status-yellow); }
.inventory-card .spec-badge[data-status="Sold: Under Contract"]::before { background:var(--status-red); }
*/

/* ---------- Mobile tweaks for infobox ---------- */
@media (max-width:575.98px) {
  .infobox .info-row { flex-direction:column; }
  .infobox .image-wrap, .infobox .image-wrap--single {
    width:100%; height:auto; aspect-ratio:16/9;
  }
  .infobox .title { margin-top:6px; }
  /* tightened stack */
  .infobox .info-row > .image-wrap, .infobox .info-row > .image-wrap--single {
    margin-bottom:10px;
  }
  .infobox .image-wrap img {
    display:block; width:100%; height:100%; object-fit:cover;
  }
  .infobox .infobox-body { padding:10px 12px; }
}

/* ---------- Section full-bleed dividers ---------- */
.section-divider-bottom,
.section-divider-top { position:relative; }
.section-divider-bottom::after,
.section-divider-top::after {
  content:""; position:absolute; left:50%; width:100vw; margin-left:-50vw;
  height:1px; bottom:0;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  pointer-events:none; z-index:2;
}

/* keep following sections from overlapping */
section { position:relative; z-index:0; }

/* ---------- Tight tabs-to-content seam + visibility ---------- */
#aboutTabContent > .tab-pane > *:first-child { margin-top:0 !important; padding-top:0 !important; }
#commTabPane .gmap-edge { margin-top:0 !important; }
#qmiTabPane > .section:first-child,
#qmiTabPane > .section:first-child .container { margin-top:0 !important; padding-top:0 !important; }

.about-tabs { margin-bottom:0 !important; }
.about-tabs + .tab-content { margin-top:0 !important; }

/* Ensure maps/slider are always visible (no lazy subtree issues) */
#comm_map, #qmi_map, #commTabPane .gmap-edge, #qmiTabPane .gmap-edge, #t-slider {
  content-visibility:visible !important;
  contain-intrinsic-size:auto !important;
}

/* =========================================
   About-Select specific (safe for both pages)
   ========================================= */

/* Testimonials slider */
#t-slider { position:relative; }
#t-slider .t-track {
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 48px; /* space for arrows */
}
#t-slider .t-card {
  flex:0 0 320px; scroll-snap-align:start;
  border:1px solid #e8edf5; border-radius:16px; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.05); padding:16px 18px;
}
#t-slider .t-stars { color:#f5b301; }
#t-slider .t-quote { color:#1f2c45; line-height:1.45; }
#t-slider .t-byline { color:#6b7280; font-weight:600; }
#t-slider .t-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; background:#002D62; color:#fff;
  border:0; display:flex; align-items:center; justify-content:center;
}
#t-slider .t-prev { left:0; }
#t-slider .t-next { right:0; }
#t-slider .t-nav.disabled { opacity:.5; pointer-events:none; }

/* Section padding helper */
#select-series-included { padding:50px 0; }

/* Owl Carousel gallery */
#ss-gallery .ss-slide img {
  width:100%; height:auto; display:block; border-radius:14px;
}
#ss-gallery .owl-nav button {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#002D62 !important; color:#fff !important; border:0 !important;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
#ss-gallery .owl-nav .owl-prev { left:8px; }
#ss-gallery .owl-nav .owl-next { right:8px; }
#ss-gallery .owl-nav button span { font-size:22px; line-height:1; }
#ss-gallery .owl-dots { margin-top:10px; }

@media (max-width:575.98px) {
  #ss-gallery .owl-nav button { width:40px; height:40px; }
}

/* Misc */
.toggle-title { font-weight:700; color:var(--fth-navy); }
	
/* Keep bottom CTA padded inside cards (fixes Gallery card) */
.inventory-card .card > .px-0.pb-3{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Optional: make the CTA fill width neatly and remove extra margins */
.inventory-card .card > .px-0.pb-3 .ftx-button{
  width: 100%;
  margin: 0; /* you had margin:5px 0 ... */
}	
	
		
	
/* --- Fix unexpected horizontal scrolling from 100vw patterns --- */
html, body { overflow-x: clip; } /* safer than hidden; no page-wide x-scroll */

.gmap-edge{
  /* center a true viewport-width strip without overshoot */
  position: relative;
  left: 50% !important;
  right: auto !important;
  width: 100dvw !important;
  max-width: 100dvw !important;
  margin-left: -50dvw !important;
  margin-right: 0 !important;
}

/* full-bleed divider lines */
.section-divider-bottom::after,
.section-divider-top::after{
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100dvw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fallback for very old browsers without dvw support */
@supports not (width: 100dvw) {
  .gmap-edge { width: 100vw !important; margin-left: -50vw !important; }
  .section-divider-bottom::after,
  .section-divider-top::after { width: 100vw !important; }
}
	
	/* Map infobox dot: Quick Move-In should be GREEN */

/* --- Block 2 --- */
/* Owl item sizing */
  #ss-gallery .ss-slide img{ width:100%; height:auto; display:block; border-radius:14px; }
  /* Brand nav buttons */
  #ss-gallery .owl-nav button{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%;
    background:#002D62 !important; color:#fff !important; border:0 !important;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 6px 18px rgba(0,0,0,.18);
  }
  #ss-gallery .owl-nav .owl-prev{ left:8px; }
  #ss-gallery .owl-nav .owl-next{ right:8px; }
  #ss-gallery .owl-nav button span{ font-size:22px; line-height:1; }
  #ss-gallery .owl-dots{ margin-top:10px; }
  @media (max-width: 575.98px){
    #ss-gallery .owl-nav button{ width:40px; height:40px; }
  }

/* =========================================================
   EXTRACTED FROM: about-fth.php
   ========================================================= */

/* --- Block 1 --- */
/* ---------- CSS Variables ---------- */
:root {
  --fth-navy:#002D62;
  --fth-red:#ee1f24;
  --fth-muted:#6b7280;
  --brand-navy:#002D62;
  --brand-navy-2:#003c84;
  --text-on-navy:#fff;
  --tile-shadow:0 8px 24px rgba(0,0,0,.12);
  --tile-radius:10px;

  /* Brand */
  --brand-blue:#002D62;
  --brand-red:#ED1C24;

  /* Z-index (standard) */
  --z-slider:1;
  --z-header:1040;
  --z-sticky:1030;

  /* Status colors */
  --status-green:#22c55e;      /* Move-In Ready / Now Available */
  --status-yellow:#f59e0b;     /* Under Construction */
  --status-red:var(--brand-red); /* Sold: Under Contract */
  --status-gray:#94a3b8;       /* Fallback */
}

/* ---------- HERO ---------- */
.about-hero {
  background:#002D62;
  color:#fff;
}
.about-hero h1 { letter-spacing:.3px; }
.about-hero .lead-lg { font-size:1.15rem; color:#e8eef9; }

/* ---------- Content Cards ---------- */
.reason-card {
  border:1px solid #e8edf5;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
  transition:transform .2s, box-shadow .2s, border-color .2s;
  height:100%;
}
.reason-card:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  border-color:#dfe7f2;
}
.reason-icon {
  width:46px; height:46px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f0f4fa; font-size:22px; color:var(--fth-navy);
}
.eyebrow {
  text-transform:uppercase; font-size:.78rem; letter-spacing:.18em;
  color:var(--fth-red); font-weight:700;
}
.section-title { letter-spacing:.2px; font-weight:800; color:var(--fth-navy); }
.muted { color:var(--fth-muted); }

.divider {
  height:1px; width:100%;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  margin:30px 0;
}

/* ---------- Tabs (nav-pills) ---------- */
.about-tabs .nav { gap:10px; }
.about-tabs .nav-pills .nav-link {
  background:#f4f7fb; color:#002D62; font-weight:700;
  border-radius:999px; padding:.6rem 1rem; border:1px solid #e3e9f3;
}
.about-tabs .nav-pills .nav-link.active {
  background:#002D62; color:#fff; border-color:#002D62;
}

/* ---------- Edge-to-edge maps ---------- */
.gmap-edge {
  position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; width:100vw;
}
#comm_map, #qmi_map { width:100%; height:600px; }
.headingcity { text-transform:none; }

/* =========================================================
   EXTRACTED FROM: about-gallery.php
   ========================================================= */

/* --- Block 1 --- */
/* ---------- CSS Variables ---------- */
:root {
  --fth-navy:#002D62;
  --fth-red:#ee1f24;
  --fth-muted:#6b7280;
  --brand-navy:#002D62;
  --brand-navy-2:#003c84;
  --text-on-navy:#fff;
  --tile-shadow:0 8px 24px rgba(0,0,0,.12);
  --tile-radius:10px;

  /* Brand */
  --brand-blue:#002D62;
  --brand-red:#ED1C24;

  /* Z-index */
  --z-slider:1;
  --z-header:1040;
  --z-sticky:1030;
  --z-modal-backdrop:10500;
  --z-modal:10510;

  /* Status colors */
  --status-green:#22c55e;      /* Move-In Ready / Now Available */
  --status-yellow:#f59e0b;     /* Under Construction */
  --status-red:var(--brand-red); /* Sold: Under Contract */
  --status-gray:#94a3b8;       /* Fallback */
}

/* ---------- HERO ---------- */
.about-hero {
  background:#002D62;
  color:#fff;
}
.about-hero h1 { letter-spacing:.3px; }
.about-hero .lead-lg { font-size:1.15rem; color:#e8eef9; }

/* ---------- Content Cards ---------- */
.reason-card {
  border:1px solid #e8edf5;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
  transition:transform .2s, box-shadow .2s, border-color .2s;
  height:100%;
}
.reason-card:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  border-color:#dfe7f2;
}
.reason-icon {
  width:46px; height:46px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f0f4fa; font-size:22px; color:var(--fth-navy);
}
.eyebrow {
  text-transform:uppercase; font-size:.78rem; letter-spacing:.18em;
  color:var(--fth-red); font-weight:700;
}
.section-title { letter-spacing:.2px; font-weight:800; color:var(--fth-navy); }
.muted { color:var(--fth-muted); }

.divider {
  height:1px; width:100%;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  margin:30px 0;
}

/* ---------- Tabs (nav-pills) ---------- */
.about-tabs .nav { gap:10px; }
.about-tabs .nav-pills .nav-link {
  background:#f4f7fb; color:#002D62; font-weight:700;
  border-radius:999px; padding:.6rem 1rem; border:1px solid #e3e9f3;
}
.about-tabs .nav-pills .nav-link.active {
  background:#002D62; color:#fff; border-color:#002D62;
}

/* ---------- Edge-to-edge maps ---------- */
.gmap-edge {
  position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; width:100vw;
}
#comm_map, #qmi_map { width:100%; height:600px; }
.headingcity { text-transform:none; }

/* ---------- Infobox (Google Maps) ---------- */
.infobox {
  position:relative; background:#fff; width:auto; max-width:550px;
  border-radius:8px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.15);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}
.infobox .close-x {
  position:absolute; right:8px; top:8px; background:#fff; border:1px solid #ccc;
  border-radius:50%; width:26px; height:26px; text-align:center;
  font-size:18px; line-height:24px; color:#c00; cursor:pointer; z-index:5;
}
.infobox .infobox-body { padding:10px; }
.infobox .infobox-scroll {
  max-height:420px; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px;
}
.infobox .info-row { display:flex; gap:12px; align-items:flex-start; }
.infobox .text-col { flex:1 1 auto; min-width:0; }
.infobox .title {
  font-weight:700; font-size:16px; margin:0 0 4px; word-break:break-word; overflow-wrap:anywhere;
}
.infobox .image-wrap {
  position:relative; border-radius:8px; overflow:hidden; flex:0 0 200px;
  width:200px; height:120px;
}
.infobox .image-wrap--single { flex-basis:180px; width:180px; height:120px; }

/* Infobox status badge (absolute inside map balloons) */


/* CARD badges only (not the map infobox) */


 
 

/* ---------- Mobile tweaks for infobox ---------- */
@media (max-width:575.98px) {
  .infobox .info-row { flex-direction:column; }
  .infobox .image-wrap, .infobox .image-wrap--single {
    width:100%; height:auto; aspect-ratio:16/9;
  }
  .infobox .title { margin-top:6px; }
  /* tightened stack */
  .infobox .info-row > .image-wrap, .infobox .info-row > .image-wrap--single {
    margin-bottom:10px;
  }
  .infobox .image-wrap img {
    display:block; width:100%; height:100%; object-fit:cover;
  }
  .infobox .infobox-body { padding:10px 12px; }
}

/* ---------- Section full-bleed dividers ---------- */
.section-divider-bottom,
.section-divider-top { position:relative; }
.section-divider-bottom::after,
.section-divider-top::after {
  content:""; position:absolute; left:50%; width:100vw; margin-left:-50vw;
  height:1px; bottom:0;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  pointer-events:none; z-index:2;
}

/* keep following sections from overlapping */
section { position:relative; z-index:0; }

/* ---------- Tight tabs-to-content seam + visibility ---------- */
#aboutTabContent > .tab-pane > *:first-child { margin-top:0 !important; padding-top:0 !important; }
#commTabPane .gmap-edge { margin-top:0 !important; }
#qmiTabPane > .section:first-child,
#qmiTabPane > .section:first-child .container { margin-top:0 !important; padding-top:0 !important; }

.about-tabs { margin-bottom:0 !important; }
.about-tabs + .tab-content { margin-top:0 !important; }

/* Ensure maps/slider are always visible (no lazy subtree issues) */
#comm_map, #qmi_map, #commTabPane .gmap-edge, #qmiTabPane .gmap-edge, #t-slider {
  content-visibility:visible !important;
  contain-intrinsic-size:auto !important;
}

/* =========================================
   About-Select specific (safe for both pages)
   ========================================= */

/* Testimonials slider */
#t-slider { position:relative; }
#t-slider .t-track {
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 48px; /* space for arrows */
}
#t-slider .t-card {
  flex:0 0 320px; scroll-snap-align:start;
  border:1px solid #e8edf5; border-radius:16px; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.05); padding:16px 18px;
}
#t-slider .t-stars { color:#f5b301; }
#t-slider .t-quote { color:#1f2c45; line-height:1.45; }
#t-slider .t-byline { color:#6b7280; font-weight:600; }
#t-slider .t-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; background:#002D62; color:#fff;
  border:0; display:flex; align-items:center; justify-content:center;
}
#t-slider .t-prev { left:0; }
#t-slider .t-next { right:0; }
#t-slider .t-nav.disabled { opacity:.5; pointer-events:none; }

/* Section padding helper */
#select-series-included { padding:50px 0; }

/* Owl Carousel gallery */
#ss-gallery .ss-slide img {
  width:100%; height:auto; display:block; border-radius:14px;
}
#ss-gallery .owl-nav button {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#002D62 !important; color:#fff !important; border:0 !important;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
#ss-gallery .owl-nav .owl-prev { left:8px; }
#ss-gallery .owl-nav .owl-next { right:8px; }
#ss-gallery .owl-nav button span { font-size:22px; line-height:1; }
#ss-gallery .owl-dots { margin-top:10px; }

@media (max-width:575.98px) {
  #ss-gallery .owl-nav button { width:40px; height:40px; }
}

/* Misc */
.toggle-title { font-weight:700; color:var(--fth-navy); }
	
/* Keep bottom CTA padded inside cards (fixes Gallery card) */
.inventory-card .card > .px-0.pb-3{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Optional: make the CTA fill width neatly and remove extra margins */
.inventory-card .card > .px-0.pb-3 .ftx-button{
  width: 100%;
  margin: 0; /* you had margin:5px 0 ... */
}

/* =========================================================
   EXTRACTED FROM: about-harwood.php
   ========================================================= */

/* --- Block 1 --- */
/* ---------- CSS Variables ---------- */
:root {
  --fth-navy:#002D62;
  --fth-red:#ee1f24;
  --fth-muted:#6b7280;
  --brand-navy:#002D62;
  --brand-navy-2:#003c84;
  --text-on-navy:#fff;
  --tile-shadow:0 8px 24px rgba(0,0,0,.12);
  --tile-radius:10px;

  /* Brand */
  --brand-blue:#002D62;
  --brand-red:#ED1C24;

  /* Z-index */
  --z-slider:1;
  --z-header:1040;
  --z-sticky:1030;
  --z-modal-backdrop:10500;
  --z-modal:10510;

  /* Status colors */
  --status-green:#22c55e;      /* Move-In Ready / Now Available */
  --status-yellow:#f59e0b;     /* Under Construction */
  --status-red:var(--brand-red); /* Sold: Under Contract */
  --status-gray:#94a3b8;       /* Fallback */
}

/* ---------- HERO ---------- */
.about-hero {
  background:#002D62;
  color:#fff;
}
.about-hero h1 { letter-spacing:.3px; }
.about-hero .lead-lg { font-size:1.15rem; color:#e8eef9; }

/* ---------- Content Cards ---------- */
.reason-card {
  border:1px solid #e8edf5;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.04);
  transition:transform .2s, box-shadow .2s, border-color .2s;
  height:100%;
}
.reason-card:hover {
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(0,0,0,.06);
  border-color:#dfe7f2;
}
.reason-icon {
  width:46px; height:46px; border-radius:14px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#f0f4fa; font-size:22px; color:var(--fth-navy);
}
.eyebrow {
  text-transform:uppercase; font-size:.78rem; letter-spacing:.18em;
  color:var(--fth-red); font-weight:700;
}
.section-title { letter-spacing:.2px; font-weight:800; color:var(--fth-navy); }
.muted { color:var(--fth-muted); }

.divider {
  height:1px; width:100%;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  margin:30px 0;
}

/* ---------- Tabs (nav-pills) ---------- */
.about-tabs .nav { gap:10px; }
.about-tabs .nav-pills .nav-link {
  background:#f4f7fb; color:#002D62; font-weight:700;
  border-radius:999px; padding:.6rem 1rem; border:1px solid #e3e9f3;
}
.about-tabs .nav-pills .nav-link.active {
  background:#002D62; color:#fff; border-color:#002D62;
}

/* ---------- Edge-to-edge maps ---------- */
.gmap-edge {
  position:relative; left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw; width:100vw;
}
#comm_map, #qmi_map { width:100%; height:600px; }
.headingcity { text-transform:none; }

/* ---------- Infobox (Google Maps) ---------- */
.infobox {
  position:relative; background:#fff; width:auto; max-width:550px;
  border-radius:8px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.15);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}
.infobox .close-x {
  position:absolute; right:8px; top:8px; background:#fff; border:1px solid #ccc;
  border-radius:50%; width:26px; height:26px; text-align:center;
  font-size:18px; line-height:24px; color:#c00; cursor:pointer; z-index:5;
}
.infobox .infobox-body { padding:10px; }
.infobox .infobox-scroll {
  max-height:420px; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px;
}
.infobox .info-row { display:flex; gap:12px; align-items:flex-start; }
.infobox .text-col { flex:1 1 auto; min-width:0; }
.infobox .title {
  font-weight:700; font-size:16px; margin:0 0 4px; word-break:break-word; overflow-wrap:anywhere;
}
.infobox .image-wrap {
  position:relative; border-radius:8px; overflow:hidden; flex:0 0 200px;
  width:200px; height:120px;
}
.infobox .image-wrap--single { flex-basis:180px; width:180px; height:120px; }

/* Infobox status badge (absolute inside map balloons) */


/* CARD badges only (not the map infobox) */


 
 

/* ---------- Mobile tweaks for infobox ---------- */
@media (max-width:575.98px) {
  .infobox .info-row { flex-direction:column; }
  .infobox .image-wrap, .infobox .image-wrap--single {
    width:100%; height:auto; aspect-ratio:16/9;
  }
  .infobox .title { margin-top:6px; }
  /* tightened stack */
  .infobox .info-row > .image-wrap, .infobox .info-row > .image-wrap--single {
    margin-bottom:10px;
  }
  .infobox .image-wrap img {
    display:block; width:100%; height:100%; object-fit:cover;
  }
  .infobox .infobox-body { padding:10px 12px; }
}

/* ---------- Section full-bleed dividers ---------- */
.section-divider-bottom,
.section-divider-top { position:relative; }
.section-divider-bottom::after,
.section-divider-top::after {
  content:""; position:absolute; left:50%; width:100vw; margin-left:-50vw;
  height:1px; bottom:0;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
  pointer-events:none; z-index:2;
}

/* keep following sections from overlapping */
section { position:relative; z-index:0; }

/* ---------- Tight tabs-to-content seam + visibility ---------- */
#aboutTabContent > .tab-pane > *:first-child { margin-top:0 !important; padding-top:0 !important; }
#commTabPane .gmap-edge { margin-top:0 !important; }
#qmiTabPane > .section:first-child,
#qmiTabPane > .section:first-child .container { margin-top:0 !important; padding-top:0 !important; }

.about-tabs { margin-bottom:0 !important; }
.about-tabs + .tab-content { margin-top:0 !important; }

/* Ensure maps/slider are always visible (no lazy subtree issues) */
#comm_map, #qmi_map, #commTabPane .gmap-edge, #qmiTabPane .gmap-edge, #t-slider {
  content-visibility:visible !important;
  contain-intrinsic-size:auto !important;
}

/* =========================================
   About-Select specific (safe for both pages)
   ========================================= */

/* Testimonials slider */
#t-slider { position:relative; }
#t-slider .t-track {
  display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px 48px; /* space for arrows */
}
#t-slider .t-card {
  flex:0 0 320px; scroll-snap-align:start;
  border:1px solid #e8edf5; border-radius:16px; background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.05); padding:16px 18px;
}
#t-slider .t-stars { color:#f5b301; }
#t-slider .t-quote { color:#1f2c45; line-height:1.45; }
#t-slider .t-byline { color:#6b7280; font-weight:600; }
#t-slider .t-nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%; background:#002D62; color:#fff;
  border:0; display:flex; align-items:center; justify-content:center;
}
#t-slider .t-prev { left:0; }
#t-slider .t-next { right:0; }
#t-slider .t-nav.disabled { opacity:.5; pointer-events:none; }

/* Section padding helper */
#select-series-included { padding:50px 0; }

/* Owl Carousel gallery */
#ss-gallery .ss-slide img {
  width:100%; height:auto; display:block; border-radius:14px;
}
#ss-gallery .owl-nav button {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%;
  background:#002D62 !important; color:#fff !important; border:0 !important;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
#ss-gallery .owl-nav .owl-prev { left:8px; }
#ss-gallery .owl-nav .owl-next { right:8px; }
#ss-gallery .owl-nav button span { font-size:22px; line-height:1; }
#ss-gallery .owl-dots { margin-top:10px; }

@media (max-width:575.98px) {
  #ss-gallery .owl-nav button { width:40px; height:40px; }
}

/* Misc */
.toggle-title { font-weight:700; color:var(--fth-navy); }
	
/* Keep bottom CTA padded inside cards (fixes Gallery card) */
.inventory-card .card > .px-0.pb-3{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Optional: make the CTA fill width neatly and remove extra margins */
.inventory-card .card > .px-0.pb-3 .ftx-button{
  width: 100%;
  margin: 0; /* you had margin:5px 0 ... */
}

/* =========================================================
   EXTRACTED FROM: about-smarthomes.php
   ========================================================= */

/* --- Block 1 --- */
:root{ --fth-navy:#002D62; --muted:#6b7280; --soft:#f7f9fd; }
	
	:root{
--brand-navy:#002D62;
--brand-navy-2:#003c84;
--text-on-navy:#fff;
--tile-shadow:0 8px 24px rgba(0,0,0,.12);
--tile-radius:10px;

/* Brand */
--brand-blue: #002D62;
--brand-red:  #ED1C24;

/* Stacking order */
--z-slider: 1;
--z-header: 1040;
--z-sticky: 1030;
--z-modal-backdrop: 10500;
--z-modal: 10510;

--status-green: #22c55e;     /* Move‑In Ready / Now Available */
--status-yellow:#f59e0b;     /* Under Construction */
--status-red:   var(--brand-red); /* Sold: Under Contract */
--status-gray:  #94a3b8;     /* Fallback */
}
	
 

  .eyebrow{
    text-transform:uppercase; font-size:.78rem; letter-spacing:.18em;
    font-weight:800; color:#ee1f24;
  }
  .section-title{ letter-spacing:.2px; font-weight:800; color:var(--fth-navy); }
  .muted{ color:var(--muted); }

  /* Cards / icons */
  .reason-card{ border:1px solid #e8edf5; border-radius:18px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.04); }
  .reason-icon{
    width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
    background:#f0f4fa;color:var(--fth-navy);font-size:22px;
  }

.soft-band{
  background: 
    linear-gradient(0deg, rgba(255,255,255,0.85), rgba(255,255,255,0.85)),
    url('https://cdn.firsttexashomes.com/images/backgrounds/bg3.jpg') center/cover no-repeat;
  border-top: 1px solid #e6edf7;
  border-bottom: 1px solid #e6edf7;
}


  /* FAQ toggle accent: keep canvas styles, set icon navy */
  #smart-faq .toggle .toggle-icon i{ color:var(--fth-navy); }

  /* CTA band */
  .cta-band{ background:#f7f9fd; border-top:1px solid #e6edf7; }
	
		.toggle-title{ font-weight:700; color:var(--fth-navy); }

/* --- Block 2 --- */
#infoRequestTourModal { z-index: 10600 !important; }
/* Only raise the backdrop when the TOUR modal is open — tag it via JS */
  .modal-backdrop[data-for="tour"] { z-index: 10590 !important; }

/* =========================================================
   EXTRACTED FROM: communitysearch.php
   ========================================================= */

/* --- Block 1 --- */
/* ── Infobox base ─────────────────────────────────────────── */
.infobox{
  position:relative;
  background:#fff;
  width:auto;
  max-width:520px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}

/* Close button */
.infobox .close-x{
  position:absolute; right:8px; top:8px;
  background:#fff; border:1px solid #ccc; border-radius:50%;
  width:26px; height:26px; text-align:center;
  font-size:18px; line-height:24px; color:#c00;
  cursor:pointer; z-index:5;
}
.infobox .close-x:hover{ color:#900; }

/* Content layout */
.infobox .infobox-body{ padding:10px; }
.infobox .infobox-scroll{ max-height:420px; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px; }
.infobox .info-row{ display:flex; gap:12px; align-items:flex-start; }
.infobox .text-col{ flex:1 1 auto; min-width:0; }
.infobox .title{ font-weight:700; font-size:16px; margin:0 0 4px; word-break:break-word; overflow-wrap:anywhere; }
.infobox .meta{ color:#333; margin-bottom:8px; }
.infobox .cta{ display:inline-block; padding:.5rem .8rem; border-radius:10px; }

/* Image + container */
.infobox .image-wrap{
  position:relative; border-radius:8px; overflow:hidden;
  flex:0 0 200px; width:200px; height:120px;
}
.infobox .image-wrap--single{ flex-basis:180px; width:180px; height:120px; }
.infobox .image-wrap img{
  display:block; width:100%; height:100%; object-fit:cover;
  -webkit-transform:translateZ(0); transform:translateZ(0);
}

/* ── Mobile tweaks ───────────────────────────────────────── */
@media (max-width:600px){
  .infobox{ width:90vw; max-width:340px; font-size:.92rem; }
  .infobox .info-row{ flex-direction:column; }

  .infobox .image-wrap,
  .infobox .image-wrap--single{
    width:100%; height:auto; max-height:160px; aspect-ratio:16/9;
  }
  .infobox .image-wrap img{ max-height:160px; }
  .infobox .spec-badge{ font-size:.7rem; padding:4px 8px; }
  .infobox .title{ font-size:.95rem; }
}

/* ── Google Maps scoping & paint hacks ───────────────────── */
.gm-style .infobox .image-wrap{ position:relative !important; overflow:hidden !important; }
.gm-style .infobox .image-wrap img{
  display:block !important; width:100% !important; height:100% !important; object-fit:cover !important;
  position:relative !important; z-index:1 !important;
  -webkit-transform:none !important; transform:none !important; /* avoid creating a new stacking context */
}

/* ── Badge (always above image) ──────────────────────────── */
/* ── Badge (always above image) ──────────────────────────── */
/* Styles moved to card-badge-css.php */


.headingcity { text-transform: none; }

/* =========================================================
   EXTRACTED FROM: locations/index.php
   ========================================================= */

/* --- Block 1 --- */
/* ── Infobox base ─────────────────────────────────────────── */
.infobox {
  position:relative;
  background:#fff;
  width:auto;
  max-width:300px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  padding: 10px;
}

.infobox .close-x {
  position:absolute; right:8px; top:8px;
  background:#fff; border:1px solid #ccc; border-radius:50%;
  width:26px; height:26px; text-align:center;
  font-size:18px; line-height:24px; color:#c00;
  cursor:pointer; z-index:5;
}
.infobox .close-x:hover { color:#900; }

.infobox .title { font-weight:700; font-size:16px; margin:0 0 4px; word-break:break-word; }
.infobox .meta { color:#333; margin-bottom:8px; font-size: 14px; }

/* ── Map ─────────────────────────────────────────────────── */
.gmap-fullwrap { width: 100%; position: relative; }
#map { height: 600px; width: 100%; }

/* ── Table ───────────────────────────────────────────────── */
.locations-table-wrap {
  margin: 40px 0;
  overflow-x: auto;
}
.locations-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.locations-table th {
  background-color: #002D62;
  color: #fff;
  padding: 12px 25px 12px 15px !important; /* give room for sort icons */
  text-align: left;
  border: 1px solid #002D62;
  cursor: pointer;
}
.locations-table td {
  padding: 12px 15px;
  border: 1px solid #dee2e6;
  color: #333;
}
.locations-table tr:nth-child(even) {
  background-color: #f8f9fa;
}
.locations-table tr:hover {
  background-color: #e9ecef;
}
.locations-table a {
  color: #002D62;
  text-decoration: none;
  font-weight: 600;
}
.locations-table a:hover {
  text-decoration: underline;
}

/* --- Block 2 --- */
/* ── DataTables Overrides ────────────────────────────────── */
.dataTables_wrapper .dataTables_filter input { border: 1px solid #ccc; border-radius: 4px; padding: 4px 8px; }
.dataTables_wrapper .dataTables_length select { border: 1px solid #ccc; border-radius: 4px; padding: 4px; }
table.dataTable thead th, table.dataTable thead td { border-bottom: none; }
table.dataTable.no-footer { border-bottom: 2px solid #002D62; }
table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { background-position: right 8px center !important; }

/* =========================================================
   EXTRACTED FROM: qmisearch.php
   ========================================================= */

/* --- Block 1 --- */
/* ── Infobox base ─────────────────────────────────────────── */
strong{color:#002b59;}
.infobox{
  position:relative;
  background:#fff;
  width:auto;
  max-width:550px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
}

/* Close button */
.infobox .close-x{
  position:absolute; right:8px; top:8px;
  background:#fff; border:1px solid #ccc; border-radius:50%;
  width:26px; height:26px; text-align:center;
  font-size:18px; line-height:24px; color:#c00;
  cursor:pointer; z-index:5;
}
.infobox .close-x:hover{ color:#900; }

/* Content layout */
.infobox .infobox-body{ padding:10px; }
.infobox .infobox-scroll{ max-height:420px; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px; }
.infobox .info-row{ display:flex; gap:12px; align-items:flex-start; }
.infobox .text-col{ flex:1 1 auto; min-width:0; }
.infobox .title{ font-weight:700; font-size:16px; margin:0 0 0px; word-break:break-word; overflow-wrap:anywhere; }
.infobox .meta{ color:#333; margin-bottom:8px; }
.infobox .cta{ display:inline-block; padding:.5rem .8rem; border-radius:10px; }

/* Image + container */
.infobox .image-wrap{
  position:relative; border-radius:8px; overflow:hidden;
  flex:0 0 200px; width:200px; height:120px;
}
.infobox .image-wrap--single{ flex-basis:180px; width:180px; height:120px; }
.infobox .image-wrap img{
  display:block; width:100%; height:100%; object-fit:cover;
  -webkit-transform:translateZ(0); transform:translateZ(0);
}

/* ── Mobile tweaks ───────────────────────────────────────── */
@media (max-width:600px){
  .infobox{ width:90vw; max-width:340px; font-size:.92rem; }
  .infobox .info-row{ flex-direction:column; }
  .infobox .image-wrap,
  .infobox .image-wrap--single{
    width:100%; height:auto; max-height:160px; aspect-ratio:16/9;
  }
  .infobox .image-wrap img{ max-height:160px; }
  .infobox .spec-badge{ font-size:.7rem; padding:4px 8px; }
  .infobox .title{ font-size:.95rem; }
}

/* ── Google Maps scoping & paint hacks ───────────────────── */
.gm-style .infobox .image-wrap{ position:relative !important; overflow:hidden !important; }
.gm-style .infobox .image-wrap img{
  display:block !important; width:100% !important; height:100% !important; object-fit:cover !important;
  position:relative !important; z-index:1 !important;
  -webkit-transform:none !important; transform:none !important;
}

/* ── Badge (always above image) ──────────────────────────── */
/* ── Badge (always above image) ──────────────────────────── */
/* Styles moved to card-badge-css.php */


/* Compact one-row filter on desktop, wraps on mobile */
#specFilter .form-group-inline{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:end; }
#specFilter .form-group-inline .fg{ min-width:140px; }
#specFilter .btn-reset{ white-space:nowrap; }

/* =========================================================
   EXTRACTED FROM: contactus.php
   ========================================================= */

/* --- Block 1 --- */
:root{
--brand-navy:#002D62;
--brand-navy-2:#003c84;
--text-on-navy:#fff;
--tile-shadow:0 8px 24px rgba(0,0,0,.12);
--tile-radius:10px;

/* Brand */
--brand-blue: #002D62;
--brand-red:  #ED1C24;

/* Stacking order */
--z-slider: 1;
--z-header: 1040;
--z-sticky: 1030;
--z-modal-backdrop: 10500;
--z-modal: 10510;

--status-green: #22c55e;     /* Move‑In Ready / Now Available */
--status-yellow:#f59e0b;     /* Under Construction */
--status-red:   var(--brand-red); /* Sold: Under Contract */
--status-gray:  #94a3b8;     /* Fallback */
}

/* =========================================================
   EXTRACTED FROM: careers.php
   ========================================================= */

/* --- Block 1 --- */
:root{
  --fth-navy:#002D62;
  --fth-red:#ee1f24;
  --cell:240px; /* bottom gallery */
}

/* ===== HERO ===== */
.careers-hero{ position:relative; min-height:40vh; display:flex; align-items:center; background:#002D62; }
.careers-hero .inner{ position:relative; z-index:1; text-align:center; color:#fff; }
.careers-hero h1{ font-weight:800; letter-spacing:.3px; text-shadow:0 6px 22px rgba(0,0,0,.35); font-size: clamp(30px, 4.2vw, 60px); line-height:1.15; margin:0 0 8px; }
.careers-hero .sub{ font-size: clamp(18px, 2.2vw, 26px); color:#e9eef8; }

/* ===== INTRO + FORM ===== */
.intro-card{
  border-radius:14px; background:#fff; border:1px solid #e5e7eb;
  box-shadow:0 12px 28px rgba(0,0,0,.06);
}
.intro-card h2{ color:var(--fth-navy); font-weight:800; }
.intro-card p{ font-size:1.02rem; line-height:1.55; }

/* Form card (compact) */
#careers-form .ftx-form{
  border-radius:14px; background:#fff; border:1px solid #e5e7eb;
  box-shadow:0 12px 28px rgba(0,0,0,.06);
}
#careers-form .ftx-title{ margin:0; padding:12px 16px; font-weight:800; background:#fff; color:var(--fth-navy); border-bottom:1px solid #eef2f7; }
#careers-form .ftx-fields{ padding:14px 16px; }
#careers-form label{ font-family: var(--font-headings), sans-serif; font-weight:600; color: var(--fth-navy); font-size:.95rem; margin-bottom:4px; }
#careers-form input, #careers-form select{
  width:100%; border-radius:8px; border:1px solid #cbd5e1; padding:8px 10px; background:#fff; font-size:.96rem;
}
.req{ color:#dc2626; }
.help{ font-size:.85rem; color:#475569; }

/* ===== PPC-LIKE MASONRY (EXACT LAYOUT RULES) ===== */
#ppc-grid{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: var(--cell); gap:18px; }
.ppc-tile{ display:block; width:100%; height:100%; border-radius:14px; overflow:hidden; border:1px solid #e8edf5; background:#fff; box-shadow:0 8px 24px rgba(0,0,0,.05); }
.ppc-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.span-1{ grid-row-end: span 1; } .span-2{ grid-row-end: span 2; }
@media (min-width:1400px){ :root{ --cell:260px; } }
@media (min-width:992px) and (max-width:1399.98px){ :root{ --cell:230px; } }
@media (min-width:768px) and (max-width:991.98px){ :root{ --cell:220px; } }

/* Disable clicking (keep anchor markup for identical layout) */
#ppc-grid .ppc-tile{ pointer-events:none; cursor:default; }

/* Mobile: make carousel items auto-height (override desktop grid rules) */
@media (max-width: 767.98px){
  #ppc-mobile-carousel .ppc-tile{ height:auto !important; }
  #ppc-mobile-carousel .ppc-tile img{
    width:100%;
    height:auto !important;  /* key fix */
    aspect-ratio: auto;      /* cancel any previous aspect-ratio */
  }

  /* Make the Owl container follow content height */
  #ppc-mobile-carousel .owl-stage-outer,
  #ppc-mobile-carousel .owl-stage,
  #ppc-mobile-carousel .owl-item{
    height:auto !important;
  }
}

/* =========================================================
   EXTRACTED FROM: heroes.php
   ========================================================= */

/* --- Block 1 --- */
:root{ --fth-navy:#002D62; --fth-red:#ee1f24; --fth-muted:#6b7280; }

/* ===== HERO ===== */
.heroes-hero{
position: relative;
background: #002D62;
color: #fff;
overflow: hidden;
}
.heroes-hero .hero-bg{
position:absolute; inset:0; background:
linear-gradient(180deg, rgba(29,49,97,.75), rgba(29,49,97,.85)),
url('https://cdn.firsttexashomes.com/images/heroes/hero-bg.jpg?v=1') center/cover no-repeat;
filter: saturate(1.05);
}
.heroes-hero .container{ position: relative; z-index: 1; }

.lead-lg{ font-size:1.1rem; color:#e8eef9; }

/* ===== Cards / Content polish (reused from energy page style) ===== */
.reason-card{ border:1px solid #e8edf5; border-radius:18px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.04); transition:.2s transform, .2s box-shadow, .2s border-color; height:100%; }

.reason-icon{ width:46px; height:46px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; background:#f0f4fa; font-size:22px; color:var(--fth-navy); }
.section-title{ letter-spacing:.2px; font-weight:800; color:var(--fth-navy); }
.muted{ color:var(--fth-muted); }
.divider{ height:1px; width:100%; background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent); margin:30px 0; }
.brand-link{ color:var(--fth-navy); text-decoration:underline; font-weight:700; }
.brand-link:hover{ text-decoration:none; }

/* ===== Icon grid (who qualifies) ===== */
.qualify-icon{
width:52px; height:52px; border-radius:14px;
background:#f0f4fa; color:var(--fth-navy);
display:flex; align-items:center; justify-content:center; font-size:22px;
}
.qualify-card{ border:1px solid #e8edf5; border-radius:16px; padding:16px; height:100%; background:#fff; }

/* ===== Carousel (benefits) ===== */
.benefit-card{
border:1px solid #e8edf5; border-radius:18px; background:#fff; overflow:hidden;
box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.benefit-media{
aspect-ratio:16/9; background:#f7f9fc center/cover no-repeat;
border-bottom:1px solid #eef3fb;
}
.carousel-control-prev, .carousel-control-next{
filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

/* ===== Timeline (How it works) ===== */
.timeline{ display:grid; gap:18px; }
@media (min-width:768px){ .timeline{ grid-template-columns: repeat(3,1fr); } }
.t-step{ background:#fff; border:1px solid #e8edf5; border-radius:14px; padding:16px; height:100%; }
.t-num{ width:36px;height:36px;border-radius:50%; background:var(--fth-navy); color:#fff; display:flex;align-items:center;justify-content:center; font-weight:800; }

/* ===== Full-bleed divider (reused) ===== */
.section-divider-bottom{ position:relative; }
.section-divider-bottom::after{
content:""; position:absolute; left:50%; width:100vw; margin-left:-50vw; height:1px; bottom:0;
background:linear-gradient(90deg,transparent,rgba(0,0,0,.08),transparent);
pointer-events:none; z-index:2;
}

/* CTA */
.cta-band{ background:#f7f9fd; border-top:1px solid #e6edf7; }

/* Modal */
.modal .form-label{ font-weight:600; color:#27364f; }
.req{ color:#ee1f24; }

/* Small footnotes */
.fineprint{ font-size:.85rem; color:#6b7280; }

.eyebrow{ text-transform:uppercase; font-size:.78rem; letter-spacing:.18em; color:var(--fth-red); font-weight:800; }

/* === Heroes carousel nav: match lightbox round buttons === */
.heroes-carousel {
position: relative;
}

/* Lock card layout so heights don’t bounce */
.heroes-carousel .benefit-card{
height:100%;
display:flex; flex-direction:column;
}
.heroes-carousel .benefit-media{ flex:0 0 auto; }
.heroes-carousel .benefit-card .p-4{ flex:1 1 auto; }

.heroes-carousel .carousel-control-prev,
.heroes-carousel .carousel-control-next{ width:auto; opacity:1 !important; filter:none; }
.heroes-carousel .carousel-control-prev { left: 10px; }
.heroes-carousel .carousel-control-next { right: 10px; }
.heroes-carousel .nav-btn{
width:48px;height:48px;border-radius:50%;
background:var(--fth-navy); display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 18px rgba(0,0,0,.45); border:2px solid rgba(255,255,255,.35);
}
.heroes-carousel .nav-btn:hover{ background:#083b7f; }
.heroes-carousel .nav-btn svg{ width:22px;height:22px; }
.heroes-carousel .carousel-control-prev-icon,
.heroes-carousel .carousel-control-next-icon{ display:none !important; }

/* Center nav vertically by default */
.heroes-carousel .carousel-control-prev,
.heroes-carousel .carousel-control-next{
position: absolute;
top: 50%;
transform: translateY(-50%);
}

/* On mobile, nudge them a bit higher so they don't sit mid-stack */
@media (max-width: 575.98px){
.heroes-carousel .carousel-control-prev,
.heroes-carousel .carousel-control-next{
top: 35%;
transform: translateY(-35%);
}
}


/* Keep each slide to a nice readable width and center it */
.heroes-carousel .carousel-item {
text-align: center; /* so the child container centers */
}
.heroes-carousel .carousel-item > .container {
max-width: 760px;   /* <= adjust if you want a wider card */
margin: 0 auto;
padding-left: 0;
padding-right: 0;
}

/* Keep the media area stable to kill “bounce” */
.heroes-carousel .benefit-media {
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
}

/* Smooth, normal slide (no “snap/zoom” feel) */
.heroes-carousel .carousel-item {
transition: transform .45s ease; /* standard across the site */
}

/* On phones, still 1-up, just fill the screen width nicely */
@media (max-width: 575.98px){
.heroes-carousel .carousel-item > .container {
max-width: 560px;
}
}

/* Show carousel on mobile/tablet; hide grid */
@media (max-width: 991.98px){
#benefitsCarousel { display:block !important; }
#benefitsGrid     { display:none  !important; }
}

/* Show static grid on desktop; hide carousel */
@media (min-width: 992px){
#benefitsCarousel { display:none  !important; }
#benefitsGrid     { display:block !important; }
}

/* Optional: keep card sizes stable on desktop grid too */
#benefitsGrid .benefit-card{
height:100%;
display:flex; flex-direction:column;
max-width: 780px;      /* keeps artwork from getting gigantic on ultra-wide */
margin: 0 auto;        /* center within its col when narrow art */
}
#benefitsGrid .benefit-media{
aspect-ratio:16/9;
background-size:cover;
background-position:center;
}
	
	/* --- Who Qualifies: desktop inner layout (icon column + text column) --- */
.qualify-card .qualify-inner{
  display:grid;
  grid-template-columns: 52px 1fr; /* icon col + text col */
  gap:12px;
  align-items:center;
}
.qualify-title{ font-weight:700; color:var(--fth-navy); line-height:1.2; }
.qualify-desc{ color:var(--fth-muted); font-size:.9rem; }

/* Mobile carousel dots spacing */
#qualifyCarousel .owl-dots{ margin-top:12px; }
#qualifyCarousel .owl-dot span{ width:8px; height:8px; }
#qualifyCarousel .owl-dot.active span{ transform:scale(1.15); }

/* Show mobile items even if Owl fails to init */
#qualifyCarousel .owl-carousel:not(.owl-loaded){ display:block; }
#qualifyCarousel .owl-carousel:not(.owl-loaded) .item{
  display:block;
  margin-bottom:12px;
}
	
		
/* --- Fix unexpected horizontal scrolling from 100vw patterns --- */
html, body { overflow-x: clip; } /* safer than hidden; no page-wide x-scroll */

.gmap-edge{
  /* center a true viewport-width strip without overshoot */
  position: relative;
  left: 50% !important;
  right: auto !important;
  width: 100dvw !important;
  max-width: 100dvw !important;
  margin-left: -50dvw !important;
  margin-right: 0 !important;
}

/* full-bleed divider lines */
.section-divider-bottom::after,
.section-divider-top::after{
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100dvw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Fallback for very old browsers without dvw support */
@supports not (width: 100dvw) {
  .gmap-edge { width: 100vw !important; margin-left: -50vw !important; }
  .section-divider-bottom::after,
  .section-divider-top::after { width: 100vw !important; }
}

 
/* === Compact modal & form === */
#heroesModal .modal-dialog { max-width: 820px; }
#heroesModal .modal-content { border-radius: 14px; }
#heroesModal .modal-header { padding: 10px 14px; }
#heroesModal .modal-body   { padding: 14px; }

/* Cap overall height to viewport and reduce inner scroll chance */
#heroesModal .modal-dialog.modal-dialog-scrollable {
  max-height: 92vh;
}
#heroesModal .modal-dialog.modal-dialog-scrollable .modal-content {
  max-height: 92vh;
}

/* Compact form spacing */
.compact-form .form-label {
  font-size: .9rem;
  margin-bottom: .25rem;
}
.compact-form .form-control,
.compact-form .form-select {
  padding: .35rem .6rem;
  font-size: .95rem;
  height: calc(1.6em + .7rem + 2px);
}
.compact-form textarea.form-control {
  min-height: 80px;
}
.compact-form .row.g-3 { --bs-gutter-y: .5rem; --bs-gutter-x: .5rem; }
.compact-form .row.g-2 { --bs-gutter-y: .4rem; --bs-gutter-x: .5rem; }

/* Make the captcha box not explode the layout on desktop */
@media (min-width: 768px){
  .compact-form .captcha-wrap {
    display: flex; align-items: center; gap: .75rem;
  }
  .compact-form .captcha-wrap .g-recaptcha { transform: scale(.92); transform-origin: left center; }
}

/* Smaller fineprint */
.compact-form .fineprint { font-size: .82rem; margin-top: .4rem; }

/* Slightly tighter switch */
.compact-form .form-check.form-switch .form-check-input {
  width: 2.2em; height: 1.1em;
}

/* =========================================================
   EXTRACTED FROM: designstudio.php
   ========================================================= */

/* --- Block 1 --- */
:root{ --fth-navy:#002D62; --muted:#6b7280; --soft:#f7f9fd; }


:root{
--brand-navy:#002D62;
--brand-navy-2:#003c84;
--text-on-navy:#fff;
--tile-shadow:0 8px 24px rgba(0,0,0,.12);
--tile-radius:10px;

/* Brand */
--brand-blue: #002D62;
--brand-red:  #ED1C24;

/* Stacking order */
--z-slider: 1;
--z-header: 1040;
--z-sticky: 1030;
--z-modal-backdrop: 10500;
--z-modal: 10510;

--status-green: #22c55e;     /* Move‑In Ready / Now Available */
--status-yellow:#f59e0b;     /* Under Construction */
--status-red:   var(--brand-red); /* Sold: Under Contract */
--status-gray:  #94a3b8;     /* Fallback */
}





/* Typography helpers */
.eyebrow{ text-transform:uppercase; font-size:.78rem; letter-spacing:.18em; font-weight:800; color:#ee1f24; }
.section-title{ letter-spacing:.2px; font-weight:800; color:var(--fth-navy); }
.muted{ color:var(--muted); }

/* HERO */
.ds-hero{ background:#002D62; color:#fff; }
.ds-lead{ color:#e8eef9; }

/* Intro band */
.soft-band{
background:
linear-gradient(0deg, rgba(255,255,255,.45), rgba(255,255,255,.80)),
url('https://cdn.firsttexashomes.com/images/backgrounds/designbg1.jpg') center/cover no-repeat;
border-top: 1px solid #e6edf7; border-bottom: 1px solid #e6edf7;
}

/* Why / copy cards (match your About pages look) */
.reason-card{ border:1px solid #e8edf5; border-radius:18px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.04); }
.reason-icon{
width:46px;height:46px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
background:#f0f4fa;color:var(--fth-navy);font-size:22px;
}

/* Team spotlight (full-bleed) */
.team-spot{
position:relative; overflow:hidden; border-top:1px solid #e6edf7; border-bottom:1px solid #e6edf7;
}
.team-spot .bg{
position:absolute; inset:0; background-size:cover; background-position:center;
transform:scale(1.025); filter:saturate(1.02);
}
.team-spot::after{
content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.15));
}
.team-spot .inner{
position:relative; z-index:1; color:#fff; text-align:center; padding:200px 0;
}
.team-spot h2{ font-weight:900; letter-spacing:.2px; color:#fff }
.team-spot p{ color:#e9eef8; margin:0 auto; max-width:900px; }

.g-item{ break-inside: avoid; margin:0 0 1.2rem 0; position:relative; }
.g-card{
display:block; background:#fff; border:1px solid #e8edf5; border-radius:14px; overflow:hidden;
box-shadow:0 8px 24px rgba(0,0,0,.05); transition:transform .18s ease, box-shadow .18s ease;
}
.g-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.06); }
.g-card img{ width:100%; height:auto; display:block; }

.g-cap{
padding:10px 14px; font-size:.92rem; color:#334155; border-top:1px solid #edf2f7;
display:flex; align-items:center; gap:8px;
}
.g-cap i{ color:var(--fth-navy); }

/* Navy Lightbox */
.lb-modal .modal-body{ position:relative; min-height:70vh; padding:0; background:#0b1628; margin: 10px 0 0 0 }
.lb-modal .btn-close{ filter: invert(1); opacity:.9; margin: 0 10px 0 0 }
.lb-nav{
position:absolute; top:50%; transform:translateY(-50%);
width:48px; height:48px; border-radius:50%; background:#002D62; border:2px solid rgba(255,255,255,.35);
box-shadow:0 6px 18px rgba(0,0,0,.45); color:#fff; display:flex; align-items:center; justify-content:center; z-index:5;
}
.lb-prev{ left:12px; } .lb-next{ right:12px; }
.lb-img{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:0px;
}
.lb-img img{ width:100%; height:auto; max-height:calc(100vh - 80px); object-fit:contain; }

/* CTA */
.cta-band{ background:#f7f9fd; border-top:1px solid #e6edf7; }









#studioGallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1rem;
}

.g-item {
border-radius: 14px;
overflow: hidden;
border: 1px solid #e8edf5;
box-shadow: 0 8px 24px rgba(0,0,0,.05);
}
.g-item img { width:100%; height:100%; object-fit:cover; display:block; }

/* Sizes */
.g-small  { grid-column: span 4; grid-row: span 1; }   /* quarter width */
.g-tall   { grid-column: span 4; grid-row: span 2; }   /* taller portrait */
.g-wide   { grid-column: span 8; grid-row: span 1; }   /* wide landscape */
.g-full   { grid-column: 1 / -1; grid-row: span 1; }   /* full 12-col */

#studioGallery img[src*="4.jpg"] {
height: 100% !important;  /* force-fit inside its grid box */
object-fit: cover;        /* crop instead of stretch */
display: block;
}


/* Target only the tall image slot */
.g-tall img {
height: 100% !important;   /* fill its grid cell exactly */
width: 100%;               /* stretch across the slot */
object-fit: cover;         /* crop rather than distort */
display: block;
}

/* Navy round carousel buttons (mobile) */
#studioGalleryCarousel .carousel-control-prev,
#studioGalleryCarousel .carousel-control-next {
width: auto;
opacity: 1 !important;
filter: none;
top: 50%;
transform: translateY(-50%);
}

#studioGalleryCarousel .nav-btn {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--fth-navy);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(0,0,0,.45);
border: 2px solid rgba(255,255,255,.35);
}

#studioGalleryCarousel .nav-btn svg {
width: 22px;
height: 22px;
}

#studioGalleryCarousel .carousel-control-prev-icon,
#studioGalleryCarousel .carousel-control-next-icon {
display: none !important; /* hide default bootstrap icons */
}

/* Owl hero fills viewport beneath the header (like other pages) */
.hero-owl,
.hero-owl .owl-stage-outer,
.hero-owl .owl-stage,
.hero-owl .owl-item,
.hero-owl .item {
height: calc(100vh - var(--header-visible-bottom, 0px));
max-height: 90vh;
overflow: hidden;
}
.hero-owl .item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* Blue flyout overlay for the H1 */
.ds-hero-flyout{
position: absolute;
left: 0;
bottom: 40px;
background: rgba(29,49,97,.88);
color: #fff;
padding: 12px 18px;
border-radius: 0 10px 10px 0;
box-shadow: 0 1px 6px rgba(29,49,97,.6);
z-index: 5;
}
.ds-hero-flyout h1{
font-size: clamp(22px, 3vw, 40px);
letter-spacing: .3px;
}

/* Optional: shrink bottom offset on very small screens */
@media (max-width: 575.98px){
.ds-hero-flyout{ bottom: 16px; padding: 10px 14px; }
}


/* Design Studio hero overlay — matches the other page */
.headline-ds-overlay{
position: absolute;
left: 0;
bottom: 60px;
background: rgba(29,49,97,.80);
box-shadow: 0 1px 6px rgba(29,49,97,.9);
z-index: 5;
text-shadow: 0 2px 8px rgba(29,49,97,.9);
color: #fff;
padding: 10px 15px 15px 100px; /* same left inset */
border-radius: 0;              /* flat bar like the other page */
}

h1{
color: #fff;
font-weight: 800;
letter-spacing: .5px;
margin: 0;
font-size: clamp(20px, 3.2vw, 28px);

}

/* Optional: tighten for small screens if you keep it visible on mobile */
@media (max-width: 575.98px){
.headline-ds-overlay{
bottom: 16px;
padding: 10px 14px 12px 16px; /* smaller left pad on phones */
}
}

/* --- Block 2 --- */
/* keep tour modal above the fixed header/nav */
  #infoRequestTourModal.modal, .lb-modal { z-index: 10600 !important; }
  .modal-backdrop[data-for="tour"] { z-index: 10590 !important; }

/* =========================================================
   EXTRACTED FROM: financing.php
   ========================================================= */

/* --- Block 1 --- */
:root {
--fth-navy:#002D62;
--muted:#6b7280;
--soft:#f7f9fd;
--ink:#1f2937;
}
.eyebrow {
    text-transform: uppercase;
    font-size: .78rem;
    letter-spacing: .18em;
    font-weight: 800;
    color: #ee1f24;
}
.section-title {
    letter-spacing: .2px;
    font-weight: 800;
    color: var(--fth-navy);
}
.muted {
    color: var(--muted);
}
.reason-card {
    border: 1px solid #e8edf5;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.reason-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f0f4fa;
    color: var(--fth-navy);
    font-size: 22px;
}
.soft-band {
    background: linear-gradient(0deg, rgba(255,255,255,.45), rgba(255,255,255,.80)), url('https://cdn.firsttexashomes.com/images/bg4.jpg') center/cover no-repeat;
    border-top: 1px solid #e6edf7;
    border-bottom: 1px solid #e6edf7;
}
#fin-acc .toggle .toggle-icon i {
    color: var(--fth-navy);
}
#fin-acc .toggle .toggle-title {
    font-weight: 700;
    color: var(--fth-navy);
}
#fin-acc .toggle {
    border-radius: 14px;
}
.disclaimer {
    font-size: .95rem;
    color: #4b5563;
}
.fine-print {
    font-size: .85rem;
    color: #6b7280;
}
/* Testimonials look */
#loTrack .t-card {
    border: 1px solid #e8edf5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
    padding: 16px 18px;
}
#loTrack .t-stars {
    color: #f5b301;
}
#loTrack .t-quote {
    color: #1f2c45;
    line-height: 1.45;
}
#loTrack .t-byline {
    color: #6b7280;
    font-weight: 600;
}
#loTrack {
    display: block !important;
    padding: 0 !important;
    gap: 0 !important;
    scroll-snap-type: none !important;
}
#loTrack .t-card {
    flex: initial !important;
    width: auto !important;
}
#loTrack .owl-stage-outer, #loTrack .owl-stage, #loTrack .owl-item, #loTrack .t-card {
    height: auto !important;
}
#lo-slider {
    position: relative;
}
#lo-slider .t-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #002D62;
    color: #fff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px rgba(0,0,0,.15);
    z-index: 3;
}
#lo-slider .t-prev {
    left: -10px;
}
#lo-slider .t-next {
    right: -10px;
}

@media (max-width:575.98px) {
#lo-slider .t-nav {
    display: none !important;
}
}
/* Selected community panel */
.sel-panel {
    border: 1px solid #e4eaf5;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.04);
}
.sel-panel h4 {
    color: var(--fth-navy);
    font-weight: 800;
}
.sel-list {
    font-size: .95rem;
    line-height: 1.35;
    margin: 0;
    padding-left: 1.1rem;
}
.sel-list li {
    margin: .25rem 0;
}
/* Hide by default; JS toggles it */
#selectedPromoPanel {
    display: none;
}
/* Column governs image widths responsively */
#loanOfficerCard .lo-photo-col {
    width: 100px;
}

@media (min-width: 992px) {
#loanOfficerCard .lo-photo-col {
    width: 200px;
}
}

@media (min-width: 1200px) {
#loanOfficerCard .lo-photo-col {
    width: 220px;
}
}
/* Headshot fills column width, stays circular */
#loanOfficerCard img.lo-headshot {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--fth-navy);
}
/* Logo matches column width, keeps natural height */
#loanOfficerCard img.lo-logo {
    width: 100%;
    height: auto;          /* ← natural height */
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: block;
    margin: .5rem auto 0;
}
/* Column governs image widths responsively */
#loanOfficerCard .lo-photo-col {
    width: 100px;
}

@media (min-width: 992px) {
#loanOfficerCard .lo-photo-col {
    width: 200px;
}
}

@media (min-width: 1200px) {
#loanOfficerCard .lo-photo-col {
    width: 220px;
}
}
/* Headshot fills column width, stays circular */
#loanOfficerCard img.lo-headshot {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--fth-navy);
}
/* Logo matches column width, keeps natural height */
#loanOfficerCard img.lo-logo {
    width: 100%;
    height: auto;
    border: 0;
    border-radius: 0;
    display: block;
    margin: .5rem auto 0;
}
.scroll-flash {
    box-shadow: 0 0 0 3px rgba(29,49,97,.25) inset;
    transition: box-shadow .6s;
}

/* =========================================================
   EXTRACTED FROM: photogallery.php
   ========================================================= */

/* --- Block 1 --- */
:root{ --fth-navy:#002D62; --gap:12px; }

  body{ background:#fff; }

  /* Hero */
  .section-hero{ background:var(--fth-navy); color:#fff; }
  .section-hero h1{ color:#fff; }

  /* Breadcrumbs */
  .crumbs{ font-weight:600; color:#666; font-size:.95rem; }
  .crumbs a{ color:var(--fth-navy); text-decoration:none; }
  .crumbs a:hover{ text-decoration:underline; }

  /* Intro / category description blocks */
  .gallery-intro, .category-desc{
    text-align:center; color:#444; max-width:900px; margin:0 auto 1rem auto;
    font-size:1.05rem;
  }

  /* MAIN: 7 category tiles (3-col on md+) — 16:9 height (~60% of square) */
  .cats-grid{ display:grid; gap:16px; }
  @media (min-width: 576px){ .cats-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (min-width: 992px){ .cats-grid{ grid-template-columns:repeat(3,1fr); } }

  .cat-card{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08); }
  .cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .cat-overlay{
    position:absolute; inset:0; background:rgba(29,49,97,.68);
    display:flex; align-items:center; justify-content:center; text-align:center; color:#fff;
    padding:12px; font-weight:800; font-size:1.15rem; letter-spacing:.3px;
  }
  .cat-card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); transition:.15s; }

  /* FOLDER: absolute-position Masonry (no libs) */
  .m-wrap{ position:relative; }
  .m-tile{
    position:absolute;
    overflow:hidden; /* crop */
    background:#f6f8fb;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
    cursor:pointer;
  }
  .m-tile img{
    width:100%; height:100%; object-fit:cover; display:block; /* crop, never stretch */
  }

  /* Modal viewer (above nav) */
  .gallery-modal{ z-index: 1085; } /* higher than sticky nav */
  .modal-backdrop.gallery-backdrop{ z-index: 1080; }
  .gallery-modal .modal-content{ background:#000; border:0; border-radius:16px; overflow:hidden; }
  .gallery-modal .modal-body{ position:relative; padding:0; min-height:40vh; display:flex; align-items:center; justify-content:center; }
  #galleryModalImg{ max-width:92vw; max-height:85vh; width:auto; height:auto; object-fit:contain; background:#000; }

  /* Controls: circular arrows + close pill */
  .gal-control{
    position:absolute; z-index:6; background: var(--fth-navy); color:#fff;
    font-weight:700; display:flex; align-items:center; justify-content:center; user-select:none; opacity:.95;
  }
  .gal-control:hover{ opacity:1; }
  .gal-arrow{ width:56px; height:56px; border-radius:50%; font-size:24px; line-height:56px; padding:0; }
  .gal-prev{ top:50%; left:12px; transform:translateY(-50%); }
  .gal-next{ top:50%; right:12px; transform:translateY(-50%); }
  .gal-close{ top:25px; right:12px; border-radius:4px; height:30px; line-height:44px; padding:4px 14px; }
  .gal-count{ position:absolute; left:12px; top:30px; z-index:6; background:rgba(0,0,0,.45); color:#fff; font-weight:700; padding:4px 10px; border-radius:4px; font-size:.9rem; }
  @media (max-width:575.98px){ .gal-arrow{ width:48px; height:48px; font-size:20px; line-height:48px; } .gal-close{ height:40px; line-height:40px; padding:0 12px; } }

/* =========================================================
   EXTRACTED FROM: events-gallery.php
   ========================================================= */

/* --- Block 1 --- */
:root{ --fth-navy:#002D62; --gap:12px; }

  body{ background:#fff; }

  /* Hero */
  .section-hero{ background:var(--fth-navy); color:#fff; }
  .section-hero h1{ color:#fff; }

  /* Breadcrumbs */
  .crumbs{ font-weight:600; color:#666; font-size:.95rem; }
  .crumbs a{ color:var(--fth-navy); text-decoration:none; }
  .crumbs a:hover{ text-decoration:underline; }

  /* Intro / category description blocks */
  .gallery-intro, .category-desc{
    text-align:center; color:#444; max-width:900px; margin:0 auto 1rem auto;
    font-size:1.05rem;
  }

  /* MAIN: 7 category tiles (3-col on md+) — 16:9 height (~60% of square) */
  .cats-grid{ display:grid; gap:16px; }
  @media (min-width: 576px){ .cats-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (min-width: 992px){ .cats-grid{ grid-template-columns:repeat(3,1fr); } }

  .cat-card{ position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08); }
  .cat-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
  .cat-overlay{
    position:absolute; inset:0; background:rgba(29,49,97,.68);
    display:flex; align-items:center; justify-content:center; text-align:center; color:#fff;
    padding:12px; font-weight:800; font-size:1.15rem; letter-spacing:.3px;
  }
  .cat-card:hover{ transform:translateY(-2px); box-shadow:0 16px 36px rgba(0,0,0,.12); transition:.15s; }

  /* FOLDER: absolute-position Masonry (no libs) */
  .m-wrap{ position:relative; }
  .m-tile{
    position:absolute;
    overflow:hidden; /* crop */
    background:#f6f8fb;
    box-shadow:0 6px 16px rgba(0,0,0,.06);
    cursor:pointer;
  }
  .m-tile img{
    width:100%; height:100%; object-fit:cover; display:block; /* crop, never stretch */
  }

  /* Modal viewer (above nav) */
  .gallery-modal{ z-index: 1085; } /* higher than sticky nav */
  .modal-backdrop.gallery-backdrop{ z-index: 1080; }
  .gallery-modal .modal-content{ background:#000; border:0; border-radius:16px; overflow:hidden; }
  .gallery-modal .modal-body{ position:relative; padding:0; min-height:40vh; display:flex; align-items:center; justify-content:center; }
  #galleryModalImg{ max-width:92vw; max-height:85vh; width:auto; height:auto; object-fit:contain; background:#000; }

  /* Controls: circular arrows + close pill */
  .gal-control{
    position:absolute; z-index:6; background: var(--fth-navy); color:#fff;
    font-weight:700; display:flex; align-items:center; justify-content:center; user-select:none; opacity:.95;
  }
  .gal-control:hover{ opacity:1; }
  .gal-arrow{ width:56px; height:56px; border-radius:50%; font-size:24px; line-height:56px; padding:0; }
  .gal-prev{ top:50%; left:12px; transform:translateY(-50%); }
  .gal-next{ top:50%; right:12px; transform:translateY(-50%); }
  .gal-close{ top:25px; right:12px; border-radius:4px; height:30px; line-height:44px; padding:4px 14px; }
  .gal-count{ position:absolute; left:12px; top:30px; z-index:6; background:rgba(0,0,0,.45); color:#fff; font-weight:700; padding:4px 10px; border-radius:4px; font-size:.9rem; }
  @media (max-width:575.98px){ .gal-arrow{ width:48px; height:48px; font-size:20px; line-height:48px; } .gal-close{ height:40px; line-height:40px; padding:0 12px; } }

/* =========================================================
   EXTRACTED FROM: warranty.php
   ========================================================= */

/* --- Block 1 --- */
:root{ --fth-navy:#002D62; --fth-red:#EE1F24; --ink:#1f2937; }

  body{ background:#fff; }

  /* Hero */
  .section-hero{ background:var(--fth-navy); color:#fff; }
  .section-hero h1{ color:#fff; }

  /* Buttons */
  .btn-navy{ background:var(--fth-navy); color:#fff !important; border-color:var(--fth-navy); font-weight:700; }
  .btn-navy:hover{ background:#06367a; color:#fff !important; border-color:#06367a; font-weight:700; }
  .btn-outline-navy{ background:#fff; border:2px solid var(--fth-navy); color:var(--fth-navy) !important;  font-weight:700;}
  .btn-outline-navy:hover{ background:var(--fth-navy); color:#fff !important;  font-weight:700;}

 

  /* Video grid */
  #warrantyVideoGrid .card{ border:0; border-radius:1rem; overflow:hidden; height:100%;
    box-shadow:0 4px 14px rgba(0,0,0,.06); transition:transform .15s ease, box-shadow .15s ease; }
  #warrantyVideoGrid .card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.12); }
  .ratio > img{ object-fit:cover; width:100%; height:100%; display:block; }

  /* Permanent navy overlay with centered text on thumbnails */
  .thumb-overlay{
    position:absolute; inset:0; background:rgba(29,49,97,.68);
    display:flex; align-items:center; justify-content:center; text-align:center;
    color:#fff; padding:12px; font-weight:700; line-height:1.25;
  }
  .thumb-title{ font-size:1rem; }

  /* Video modal (16:9) */
  .video-modal .modal-content{ background:#000; border:0; border-radius:1rem; overflow:hidden; }
  .video-modal .modal-body{ position:relative; padding:0; background:#000; }
  #videoAspect{ position:relative; width:100%; }
  #videoAspect::before{ content:""; display:block; padding-top:56.25%; } /* 16:9 */
  #videoPlayerMount{ position:absolute; inset:0; width:100%; height:100%; }

  /* Title badge now top-left, small, navy */
  .video-title{
    position:absolute; top:12px; left:12px; z-index:6;
    background:var(--fth-navy); color:#fff; border-radius:.5rem;
    padding:6px 10px; font-weight:700; font-size:.9rem;
  }

  /* Controls unified: pill style for Prev, Next, Close */
  .video-control{
    position:absolute; z-index:6; background:var(--fth-navy); color:#fff;
    border-radius:999px; height:44px; line-height:44px; padding:20px;
    display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none;
    font-weight:700; font-size:1rem; opacity:.95;
  }
  .video-control:hover{ opacity:1; }
  .video-prev{ top:50%; left:12px; transform:translateY(-50%); }
  .video-next{ top:50%; right:12px; transform:translateY(-50%); }
  .video-close{ top:12px; right:12px; }

  @media (max-width: 575.98px){
    .video-control{ height:40px; line-height:40px; padding:0 12px; font-size:.95rem; }
  }
	
	
	
 
  /* Wufoo modal: long form scrolls inside the modal */
  #WarrantyFormModal .modal-dialog{ max-width:1080px; }
  #WarrantyFormModal .modal-body{ padding:0; }
  #WarrantyFormModal .wufoo-scroll{
    height:85vh;             /* lock modal viewport height */
    max-height:85vh;
    overflow:auto;           /* enable scroll */
    -webkit-overflow-scrolling:touch; /* smooth iOS scroll */
  }
  #WarrantyFormModal .wufoo-scroll iframe{
    display:block;
    width:100%;
    height:100%;             /* fill the scroll container */
    border:0;
  }
 
  /* Constrain modal to viewport and let body scroll */
  #WarrantyFormModal .modal-content{
    max-height: 92dvh;                 /* respect mobile dynamic viewport */
  }
  #WarrantyFormModal .modal-body{
    overflow-y: auto !important;       /* force scrolling here */
    -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
  }
  /* If you keep a wrapper around the form, make sure it can scroll too */
  #WarrantyFormModal .wufoo-scroll{
    max-height: calc(92dvh - 64px);    /* header height buffer */
    overflow-y: auto !important;
	  -webkit-overflow-scrolling: touch;}
	
	.modal#WarrantyFormModal .modal-body,
#WarrantyFormModal .modal .modal-body,
#WarrantyFormModal .modal-dialog .modal-content .modal-body { overflow-y:auto !important; }

  /* Mobile accordion video player (16:9) */
  .video-accordion .accordion-button{
    color: var(--fth-navy);
    font-weight: 700;
  }
  .video-acc-player{ position:relative; width:100%; }
  .video-acc-player::before{ content:""; display:block; padding-top:56.25%; } /* 16:9 */
  .video-acc-mount{ position:absolute; inset:0; width:100%; height:100%; }	
	
 
  /* Mobile accordion video player (16:9) + visual polish */
  .video-accordion .accordion-item{
    border:1px solid #e5e7eb;
    border-radius:.75rem;
    overflow:hidden;
    margin-bottom:.75rem;
    background:#fff;
  }
  .video-accordion .accordion-button{
    background:#fff;
    color:var(--fth-navy);
    font-weight:700;
    box-shadow:none;
  }
  .video-accordion .accordion-button:not(.collapsed){
    background:#f6f8fb;
    color:var(--fth-navy);
    box-shadow:none;
  }
  .video-accordion .accordion-button:focus{ box-shadow:none; }
  .video-accordion .accordion-body{ padding:0; background:#fff; }

 
	
	
	/* Mobile accordion: thumbnail + play overlay */
  .acc-video {}
  .acc-thumb { position: relative; border-radius: .75rem; overflow: hidden; }
  .acc-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
  .acc-play{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(29,49,97,.68);
    border:0; cursor:pointer;
  }
  .acc-play:focus { outline: 2px solid #fff; outline-offset: -4px; }
  .acc-play .play-circle{
    width:64px; height:64px; border-radius:999px;
    background:#fff; color:var(--fth-navy);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:26px; line-height:1;
    box-shadow:0 6px 18px rgba(0,0,0,.25);
  }
  .acc-play:hover .play-circle{ background:#fff; }

  /* Inline player (16:9) after clicking play */
  .video-acc-player{ position:relative; width:100%; }
  .video-acc-player::before{ content:""; display:block; padding-top:56.25%; }
  .video-acc-mount{ position:absolute; inset:0; width:100%; height:100%; }

/* =========================================================
   EXTRACTED FROM: privacypolicy.php
   ========================================================= */

/* --- Block 1 --- */
:root{ --fth-navy:#002D62; --muted:#6b7280; --soft:#f7f9fd; --ink:#1f2937; }

  .eyebrow{
    text-transform:uppercase; font-size:.78rem; letter-spacing:.18em;
    font-weight:800; color:#ee1f24;
  }
  .section-title{ letter-spacing:.2px; font-weight:800; color:var(--fth-navy); }
  .muted{ color:var(--muted); }
  .soft-band{
    background:#f7f9fd;
    border-top:1px solid #e6edf7; border-bottom:1px solid #e6edf7;
  }
  .policy p, .policy li{ color:#374151; line-height:1.75; }
	
  .policy li {margin: 0 0 0 20px;}	

  /* Canvas toggle polish */
  #policy-acc .toggle .toggle-icon i{ color:var(--fth-navy); }
  #policy-acc .toggle .toggle-title{ font-weight:700; color:var(--fth-navy); }
  #policy-acc .toggle{ border-radius:14px; }

/* =========================================================
   EXTRACTED FROM: masterplandetail.php
   ========================================================= */

/* --- Block 1 --- */
.headline-overlay{ position:absolute; left:0; bottom:50px; background:rgba(29,49,97,.85); color:#fff; padding:14px 18px 16px 22px; box-shadow:0 2px 10px rgba(0,0,0,.2); }
.hero-owl,.hero-owl .owl-stage-outer,.hero-owl .owl-stage,.hero-owl .owl-item,.hero-owl .item{ height:calc(100vh - 80px); max-height:90vh; overflow:hidden;}
.hero-owl .item img{ width:100%; height:100%; object-fit:cover; display:block; }
.price-pill{ font-weight:800; background:#002D62; color:#fff; border-radius:10px; padding:.45rem .8rem; display:inline-block; }
.stat-dot{ margin:0 .5rem; opacity:.7 }
.spec-stats i{ color:#002D62; }
.sticky-bar{ background:#002D62; }
.btn-navy{ background:#002D62; color:#fff; border:0; font-weight:700; }
.btn-navy:hover{ background:#003c84; color:#fff; }
.pg-item img, .fp-thumb img{ width:100%; display:block; border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,.12); }

.fp-thumb.active img{ outline:3px solid #002D62; }

.pg-lightbox-nav, .fp-lightbox-nav{
 position:absolute; top:50%; transform:translateY(-50%); background:#002D62; color:#fff; border:0; border-radius:999px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; z-index:1056;
}
.pg-lightbox-prev,.fp-lightbox-prev{ left:12px } .pg-lightbox-next,.fp-lightbox-next{ right:12px }
.pg-close-btn,.fp-close-btn{ position:absolute; top:12px; right:12px; background:#002D62; color:#fff; font-weight:700; border:0; border-radius:999px; padding:6px 16px; z-index:1057; }

.spec-card .status{ position:absolute; top:8px; left:0; background:#002D62; color:#fff; padding:4px 10px; font-weight:700; border-radius:0 8px 8px 0; }
.spec-ribbon.diagonal span{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-35deg); width:160%; background:#ED1C24; color:#fff; height:40px; line-height:40px; text-align:center; font-weight:800; box-shadow:0 2px 10px rgba(0,0,0,.25); }

	
/* =========================
Brand tokens (keep handy)
========================= */
:root{
--brand-navy:#002D62;
--brand-navy-2:#003c84;
--text-on-navy:#fff;
--tile-shadow:0 8px 24px rgba(0,0,0,.12);
--tile-radius:10px;

/* Brand */
--brand-blue: #002D62;
--brand-red:  #ED1C24;

/* Stacking order */
--z-slider: 1;
--z-header: 1040;
--z-sticky: 1030;
--z-modal-backdrop: 10500;
--z-modal: 10510;

--status-green: #22c55e;     /* Move‑In Ready / Now Available */
--status-yellow:#f59e0b;     /* Under Construction */
--status-red:   var(--brand-red); /* Sold: Under Contract */
--status-gray:  #94a3b8;     /* Fallback */
}
	
/* =========================
Hero + price (unchanged)
========================= */
.headline-plan-overlay1{position:absolute;left:0;bottom:129px;z-index:50;text-shadow:0 3px 8px rgba(29,49,97,.9);color:#fff;padding:0 10px 0 100px;font-size:50px}
.plan-addressoverlay{margin:0;padding:0;font-size:30px}
.headline-plan-overlay2{position:absolute;left:0;bottom:60px;background:rgba(29,49,97,.80);box-shadow:0 1px 6px rgba(29,49,97,.9);z-index:5;text-shadow:0 2px 8px rgba(29,49,97,.9);color:#fff;padding:10px 15px 15px 100px}
.badge-series{background:#ee1f24;color:#fff;border-radius:999px;padding:.25rem .75rem;font-weight:700}
.rev_slider_wrapper.fullscreen-container{padding:0}
.fullscreenbanner {
max-height: 90vh;
overflow: hidden;
}
.tp-bannertimer.tp-bottom{height:5px;background:var(--brand-navy)}
.sticky-blue-bar{background:var(--brand-navy)}

.price-tag{
display:flex;flex-direction:column;align-items:center;gap:.35rem;
padding:14px 16px;border-radius:14px;background:var(--brand-navy);color:#fff;
box-shadow:0 6px 18px rgba(0,0,0,.15)
}
.price-tag .now{font-weight:900;font-size:1.25rem;line-height:1.1}

/* =========================
Spec stats (icons)
========================= */
.spec-stats i{font-size:20px;color:var(--brand-navy);line-height:1}
.spec-stats .value{font-weight:800;font-size:20pt;color:var(--brand-navy);line-height:1.1;margin-top:6px}
.spec-stats .label{font-weight:600;color:var(--brand-navy);opacity:.9;font-size:.8rem}

/* =========================
ABOUT MEDIA TILES
(match specdetail 1:1)
========================= */

/* Base tile */
.media-tile{
position:relative;display:block;width:100%;
aspect-ratio:1/1;background-size:cover;background-position:center;
border-radius:var(--tile-radius);overflow:hidden;border:1px solid #e3e3e3;
box-shadow:var(--tile-shadow);transition:transform .15s ease, box-shadow .15s ease
}
.media-tile:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.16)}

/* Remove any external gradients */
.media-tile::after{content:none!important}

/* Top-left label + bottom-right count (WHITE with BLUE text) */
.media-tile .tile-badge,
.media-tile .tile-count{
position:absolute;z-index:3;background:#fff;color:var(--brand-navy);
font-weight:800;font-size:.9rem;line-height:1;padding:.35rem .6rem;border-radius:8px;
box-shadow:0 2px 8px rgba(0,0,0,.12)
}
.media-tile .tile-badge{left:12px;top:12px}
.media-tile .tile-count{right:12px;bottom:12px}

/* Navy wash for video, lot map and "+N more" */
.media-tile.is-video::before,
.media-tile.is-lotmap::before,
.media-tile.is-more::before{
content:"";position:absolute;inset:0;background:var(--brand-navy);opacity:.75;z-index:1;pointer-events:none
}

/* Center icons (Font Awesome or Bootstrap Icons) – large, white, consistent */
.media-tile .tile-center-icon,
.media-tile .tile-play-icon{
position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
color:#fff!important;text-shadow:none;font-size:56px;line-height:1
}

/* If camera icon was previously wrapped in a blue disc, neutralize it */
.about-media-item.is-more .tile-center-icon{background:transparent!important;padding:0!important}

/* =========================
PHOTO GALLERY (desktop)
========================= */
.photogallery-masonry{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.pg-item,.photogallery-item{display:block;border-radius:8px;overflow:hidden;cursor:pointer}
.pg-item img,.photogallery-item img{width:100%;height:auto;display:block}

/* Filter helpers */
#photogallery-border.filter-elev .pg-item[data-group="int"]{display:none!important}
#photogallery-border.filter-int  .pg-item[data-group="elev"]{display:none!important}

/* =========================
LIGHTBOXES (Photo & About)
========================= */
.pg-close-btn,.lb-modal .lb-close-btn{
background:var(--brand-navy)!important;color:#fff!important;border:0!important;
box-shadow:0 2px 10px rgba(0,0,0,.25);border-radius:999px;padding:.35rem .9rem;font-weight:700
}
.pg-close-btn:hover,.lb-modal .lb-close-btn:hover{background:var(--brand-navy-2)!important}

.pg-lightbox-nav,.lb-modal .lightbox-nav{
position:absolute;top:50%;transform:translateY(-50%);
background:var(--brand-navy);border:0;border-radius:999px;width:44px;height:44px;
display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;
box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:1056;cursor:pointer
}
.pg-lightbox-prev,.lb-modal .lightbox-prev{left:12px}
.pg-lightbox-next,.lb-modal .lightbox-next{right:12px}
.pg-lightbox-nav:hover,.lb-modal .lightbox-nav:hover{background:var(--brand-navy-2)}

/* =========================
MOBILE CAROUSELS
========================= */

/* Floorplan mobile carousel: blue arrows + dots */
.fp-indicators{position:static;margin:.5rem 0 .75rem}
.fp-indicators [data-bs-target]{width:8px;height:8px;border-radius:50%;background:var(--brand-navy);opacity:.35}
.fp-indicators .active{opacity:1}

.fp-nav{width:auto}
.fp-nav-circle{
display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:999px;
background:var(--brand-navy);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);font-size:18px
}
.carousel-control-prev,.carousel-control-next{opacity:1;top:50%;transform:translateY(-50%);width:auto}
.carousel-control-prev{left:10px}.carousel-control-next{right:10px}
@media (max-width:380px){.carousel-control-prev{left:6px}.carousel-control-next{right:6px}}

/* Floorplan zoom modal buttons (match carousel) */
.fp-close-btn{
position:absolute;top:12px;right:12px;background:var(--brand-navy);color:#fff;font-weight:700;
border:none;border-radius:999px;padding:6px 16px;font-size:.9rem;box-shadow:0 2px 8px rgba(0,0,0,.3);z-index:1056
}
.fp-close-btn:hover{background:var(--brand-navy-2)}
.fp-lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:var(--brand-navy);border:0;border-radius:999px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.25rem;font-weight:bold;box-shadow:0 2px 10px rgba(0,0,0,.3);z-index:1056}
.fp-lightbox-prev{left:12px}.fp-lightbox-next{right:12px}
.fp-lightbox-nav:hover{background:var(--brand-navy-2)}

/* About (mobile) carousel: blue arrows & dots, no lightbox */
#aboutMobileCarousel .carousel-control-prev,
#aboutMobileCarousel .carousel-control-next{opacity:1;width:auto;top:50%;transform:translateY(-50%)}
#aboutMobileCarousel .carousel-control-prev-icon,
#aboutMobileCarousel .carousel-control-next-icon{
background-color:var(--brand-navy);border-radius:9999px;width:2.25rem;height:2.25rem;background-size:60% 60%;
box-shadow:0 2px 10px rgba(0,0,0,.15)
}
#aboutMobileCarousel .carousel-indicators{position:static;margin:.5rem 0 0}
#aboutMobileCarousel .carousel-indicators [data-bs-target]{width:8px;height:8px;border-radius:50%;background:var(--brand-navy);opacity:.35}
#aboutMobileCarousel .carousel-indicators .active{opacity:1}

/* =========================
Buttons (shared)
========================= */
.btn-fth{background:var(--brand-navy);color:#fff;border:0;font-weight:700;padding:.7rem 1rem;border-radius:.5rem}
.btn-fth:hover,.btn-fth:focus{background:var(--brand-navy-2);color:#fff}

/* =========================
Misc cleanup
========================= */
/* Ensure any legacy tile styles don't bleed in */
.media-tile .tile-center-icon,
.media-tile .tile-play-icon{background:none!important}

/* Hide desktop grid on phones and vice-versa where applicable (kept generic) */
@media (min-width:576px){ .d-sm-grid{display:grid!important} }
@media (min-width:992px){ .col-lg-span-4{grid-column:span 4 / span 4} .col-sm-span-6{grid-column:span 6 / span 6} }


/* ---------- FIX 1: Close button top-right overlay ---------- */
/* Make the modal body a positioning context */
#aboutVideoModal .modal-body,
#lotMapModal .modal-body,
#pgZoomModal .modal-body { position: relative; }

/* Blue "Close" pill (overlay) — force top-right */
.ftx-close-btn,
.pg-close-btn,
.lb-close-btn,
.fp-close-btn,
.gal-close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 10600 !important; /* Above iframes and backdrops */
  background: #002D62 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.25) !important;
  font-size: 14px !important;
  cursor: pointer !important;
  text-decoration: none !important;
}
.ftx-close-btn:hover,
.pg-close-btn:hover,
.lb-close-btn:hover,
.fp-close-btn:hover,
.gal-close:hover {
  background: #003c84 !important;
  color: #fff !important;
}

/* Hide Bootstrap's default X so only the pill shows when both exist */
#aboutVideoModal .btn-close.btn-close-white { display: none !important; }

/* ---------- FIX 2: Mobile shows carousel only (hide 6 tiles) ---------- */
@media (max-width: 575.98px) {
/* Hide the desktop grid of 6 tiles on phones */
#about-media-grid { display: none !important; }

/* Ensure the mobile block is visible */
#about-mobile { display: block !important; }

/* (Optional) if any grid container wrapper tries to keep its space */
#about-border .row.g-4 > .col-12.col-lg-7 {
/* remove bottom gap created by a hidden grid */
margin-bottom: 0 !important;
}
}

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

/* (Keeps arrows blue on the About mobile carousel) */
#aboutMobileCarousel .carousel-control-prev-icon,
#aboutMobileCarousel .carousel-control-next-icon {
background-color: #002D62;
border-radius: 9999px;
width: 2.25rem; height: 2.25rem;
background-size: 60% 60%;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
#aboutMobileCarousel .carousel-indicators {
position: static; margin: .5rem 0 0;
}
#aboutMobileCarousel .carousel-indicators [data-bs-target] {
width: 8px; height: 8px; border-radius: 50%;
background: #002D62; opacity: .35;
}
#aboutMobileCarousel .carousel-indicators .active { opacity: 1; }

/* ===================== PHOTO GALLERY FIXES ===================== */

/* Grid (desktop/tablet/phone) */
#photogallery-border .photogallery-masonry{
display:grid;
grid-template-columns: 1fr;             /* phones */
gap:16px;
}
@media (min-width:576px){
#photogallery-border .photogallery-masonry{
grid-template-columns: repeat(2,1fr); /* tablet */
}
}
@media (min-width:992px){
#photogallery-border .photogallery-masonry{
grid-template-columns: repeat(3,1fr); /* desktop = 3 columns */
}
}

/* Mobile carousels: blue circular arrows + dots BELOW the image */
#photogallery-border .pg-mobile .carousel-control-prev,
#photogallery-border .pg-mobile .carousel-control-next{
width:auto;
top:50%;
transform:translateY(-50%);
opacity:1;
}

#photogallery-border .pg-mobile .carousel-control-prev-icon,
#photogallery-border .pg-mobile .carousel-control-next-icon{
width:2.25rem;
height:2.25rem;
border-radius:9999px;
background-color:#002D62;               /* blue disc */
background-size:60% 60%;                /* chevron size */
box-shadow:0 2px 10px rgba(0,0,0,.15);
filter: invert(1);                       /* make bootstrap chevrons white */
}

/* Ensure chevrons align inside the blue disc */
#photogallery-border .pg-mobile .carousel-control-prev-icon{
background-position:center;
}
#photogallery-border .pg-mobile .carousel-control-next-icon{
background-position:center;
}

/* Dots below (not overlay), circular, blue */
#photogallery-border .pg-mobile .carousel-indicators{
position:static;                         /* push below image */
margin:.5rem 0 0;
}
#photogallery-border .pg-mobile .carousel-indicators [data-bs-target]{
width:8px; height:8px;
border-radius:50%;
background:#002D62;                      /* blue dots */
opacity:.35;
}
#photogallery-border .pg-mobile .carousel-indicators .active{
opacity:1;
}

/* Keep the filter buttons behavior */
#photogallery-border.filter-elev .pg-item[data-group="int"]  { display: none !important; }
#photogallery-border.filter-int  .pg-item[data-group="elev"] { display: none !important; }

/* Safety: image cards look clean */
#photogallery-border .pg-item img{
width:100%; height:auto; display:block;
border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,.12);
}



#fpMobileCarousel .carousel-indicators [data-bs-target],
#aboutMobileCarousel .carousel-indicators [data-bs-target],
#photogallery-border .pg-mobile .carousel-indicators [data-bs-target]{
width:8px !important;
height:8px !important;
border-radius:50% !important;
background:var(--brand-navy) !important;
opacity:.35 !important;

/* kill Bootstrap's pill “height” */
border-top:0 !important;
border-bottom:0 !important;
padding:0 !important;
flex:0 0 auto !important;
margin:0 6px !important;
}
#fpMobileCarousel .carousel-indicators .active,
#aboutMobileCarousel .carousel-indicators .active,
#photogallery-border .pg-mobile .carousel-indicators .active{
opacity:1 !important;
}


@media (max-width: 575.98px){
.col-span-12{ grid-column: span 12 / span 12; }
}


@media (min-width: 576px){ .col-sm-span-6{ grid-column: span 6 / span 6; } }
@media (min-width: 992px){ .col-lg-span-4{ grid-column: span 4 / span 4; } }



/* 3) Mobile Photo Gallery controls: force solid navy circular buttons */
#photogallery-border .pg-mobile .carousel-control-prev-icon,
#photogallery-border .pg-mobile .carousel-control-next-icon{
background-image:none !important; /* remove default icon bg (prevents beige look) */
display:none !important;          /* we'll draw with ::after instead */
}
#photogallery-border .pg-mobile .carousel-control-prev::after,
#photogallery-border .pg-mobile .carousel-control-next::after{
content:''; display:flex; align-items:center; justify-content:center;
width:2.25rem; height:2.25rem; border-radius:9999px;
background:var(--brand-navy); color:#fff;
box-shadow:0 2px 10px rgba(0,0,0,.15);
}
#photogallery-border .pg-mobile .carousel-control-prev::after{
content:'\f053'; /* FA solid chevron-left */
font:900 1rem "Font Awesome 6 Free";
}
#photogallery-border .pg-mobile .carousel-control-next::after{
content:'\f054'; /* FA solid chevron-right */
font:900 1rem "Font Awesome 6 Free";
}



/* ≥ sm: hide mobile-only layouts (desktop/tablet keeps grids) */
@media (min-width: 576px){

#about-mobile                  { display: none !important; }
}

/* ===== CAROUSEL SAFETY (only show active slide) ===== */
.carousel .carousel-item { display: none; }
.carousel .carousel-item.active,
.carousel .carousel-item-next,
.carousel .carousel-item-prev { display: block; }

/* Keep controls visible on mobile (if a theme lowered opacity) */
.carousel .carousel-control-prev,
.carousel .carousel-control-next { opacity: 1; }

/* ===== SMALL-LAYOUT PATCH (col-sm-1 squeezing content) ===== */
@media (min-width: 576px) and (max-width: 767.98px){
.col-sm-1 { flex: 0 0 100% !important; max-width: 100% !important; }
}

/* ===== Ensure gallery images don't stack oddly ===== */
#photogallery-border .photogallery-masonry .photogallery-item img,
#photogallery-border .pg-mobile .carousel-item img {
display: block; width: 100%; height: auto;
}

/* Keep media tile baseline intact (About desktop) */
.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)); pointer-events:none; }


/* Gallery visibility (phones vs desktop) */
@media (max-width:575.98px){
/* phones: enable the mobile carousels container */
#photogallery-border .pg-mobile{ display:block !important; }
/* if a carousel has the [hidden] attribute, keep it out of flow */
#photogallery-border .pg-mobile[hidden]{ display:none !important; }

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


/* Build This Plan table: navy header + white text + centered sort caret */
.ftp-table thead { background:#002D62; color:#fff; }
.ftp-table thead th { font-weight:700; vertical-align:middle; }
.ftp-table thead th .th-sort { margin-left:.35rem; display:inline-block; width:1rem; text-align:center; }
.ftp-table thead th .th-sort i { opacity:.7; }
.ftp-table thead th.active-asc  .th-sort i { opacity:1; }
.ftp-table thead th.active-desc .th-sort i { opacity:1; }

/* Optional hover */
.ftp-table thead th { cursor:pointer; }
.ftp-table thead th:hover .th-sort i { opacity:1; }


#findthisplan-border .ftpX-table thead,
#findthisplan-border .ftpX-table thead tr,
#findthisplan-border .ftpX-table thead th {
background:#002D62 !important;
color:#fff !important;
}
#findthisplan-border .ftpX-table thead th .th-sort { margin-left:.35rem; display:inline-block; width:1rem; text-align:center; }
#findthisplan-border .ftpX-table thead th .th-sort i { opacity:.7; }
#findthisplan-border .ftpX-table thead th { cursor:pointer; }

/* Community name: navy link */
#findthisplan-border .ftpX-table tbody a.comm-link { color:#002D62 !important; text-decoration:underline; }

/* Navy button for View {Community} */
#findthisplan-border .btn-navy { background:#002D62; color:#fff; border:0; font-weight:700; }
#findthisplan-border .btn-navy:hover { background:#003c84; color:#fff; }

/* ===== Build This Plan (mobile tweaks) ===== */
@media (max-width: 575.98px){

/* Hide: QMI Available (col 3) + View Community (col 6) */
#buildTable th:nth-child(3),
#buildTable td:nth-child(3),
#buildTable th:nth-child(6),
#buildTable td:nth-child(6){
display:none !important;
}

/* Allow wrapping so long names don’t force horizontal scroll */
#buildTable th,
#buildTable td{
white-space: normal !important;
word-break: break-word;
padding: .55rem .5rem;
}

/* Left-align numeric column that was right-aligned on desktop */
#buildTable th.text-end,
#buildTable td.text-end{
text-align:left !important;
}

/* Make the remaining “View Plan” button full-width for thumb reach */
#buildTable td .btn-navy{
display:inline-block;
width:100%;
text-align:center;
}
}



/* --- Card bottom buttons (shared) --- */
.card-btnbar { display: flex; width: 100%; }

.btn-learnmore,
.btn-requesttour,
.btn-requestinfo {
flex: 1 1 50%;
padding: .9rem 1rem;
border: 0;
border-radius: 0;
font-weight: 600;
transition: background-color .2s ease, color .2s ease, border-color .2s ease; 	line-height: 1em
}

/* View Details: blue -> invert on hover */
.btn-learnmore { background: var(--brand-blue); color: #fff; line-height: 1em; border:none;}
.btn-learnmore:hover {
background: #fff;
color: var(--brand-blue);
border-right: 1px solid color:#002D62;
line-height: 1em;
font-weight: 800;
}

/* Tour/Request: red -> invert on hover */
.btn-requesttour { background: var(--brand-red); color: #fff; line-height: 1em; border:none;}
.btn-requesttour:hover {
background: #fff;
color: var(--brand-red);
border-left: 1px solid color:#002D62;
line-height: 1em;
font-weight: 800;
}

/* Tour/Request: red -> invert on hover */
.btn-requestinfo, .btn-requestinfo { background: #fff;  color:#002D62; line-height: 1em; border:none;}
.btn-requestinfo:hover, .btn-requestinfo:hover {
background: #fff;
color: var(--brand-red);

line-height: 1em;
font-weight: 800;
}

/* Subtle divider between the 2 buttons */
.btn-divider-left { border-left: 1px solid rgba(255, 255, 255, .2); }

/* Diagonal SOLD ribbon */
.spec-ribbon {
position: absolute;
inset: 0;                 /* fill image wrapper */
pointer-events: none;     /* don't block clicks on the image */
z-index: 3;
}

.spec-ribbon.diagonal span{
--ribbon-color: #ED1C24;  /* red */
--ribbon-height: 44px;    /* thickness of the bar */
--ribbon-angle: -35deg;   /* flip to 35deg for the other diagonal */

position: absolute;
top: 50%;
left: 50%;
width: 160%;              /* long enough to span the diagonal */
height: var(--ribbon-height);
line-height: var(--ribbon-height);
transform: translate(-50%, -50%) rotate(var(--ribbon-angle));
background: var(--ribbon-color);
color: #fff;
text-align: center;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
box-shadow: 0 2px 10px rgba(0,0,0,.25);
white-space: nowrap;
}

@media (max-width: 576px){
.spec-ribbon.diagonal span{ --ribbon-height: 36px; font-size: .85rem; }
}

.qmi-plugins a { font-weight:600; color:#002D62; text-decoration:none; }
.qmi-plugins a:hover { text-decoration:none; opacity:.9; }

.qmi-link-btn{
background: none;
border: 0;
padding: 0;
margin: 0;
color: #002D62;
text-decoration: none;
cursor: pointer;
font: inherit;
font-weight: 600;
}
.qmi-link-btn:hover{ text-decoration: none; opacity:.9; }

/* 3D Tour embed — same treatment as specdetail */
iframe.video-100 { display:block; width:100%; height:100%; border:0; }
#tour3d-border .ratio { --bs-aspect-ratio:56.25%; } /* 16:9 */

/* ===== 3D Tour (plandetail) – match specdetail look ===== */
#tour3d-border .ratio {                 /* keep a true 16:9 box */
--bs-aspect-ratio: 56.25%;
position: relative;
}
#tour3d-border .ratio > * {             /* make iframe fill the box */
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
#tour3d-border iframe,
#tour3d-border iframe.video-100 {       /* nuke any old "height:auto" rules */
display: block;
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
border: 0;
}

/* Zebra stripes for Build table */
#buildTable tbody tr:nth-child(odd)  { background:#ffffff; }
#buildTable tbody tr:nth-child(even) { background:#f8fafc; }



#findthisplan-border .ftpX-table tbody a.comm-link i.fa-arrow-up-right-from-square{
font-size:.85em; opacity:.65;
}

/* Build table (mobile): hide QMI Available, tighten fonts, fix wrapping */
@media (max-width: 575.98px){
/* Hide QMI Available (3rd col) */
#buildTable th:nth-child(3),
#buildTable td:nth-child(3){ display:none !important; }

/* Allow wrapping + slightly smaller text */
#buildTable th,
#buildTable td{
white-space: normal !important;
word-break: break-word;
padding:.55rem .5rem;
font-size:.92rem;            /* smaller on mobile */
line-height:1.2;
}

/* Left-align numbers on mobile */
#buildTable th.text-end,
#buildTable td.text-end{ text-align:left !important; }

/* Make remaining button full-width for thumb reach */
#buildTable td .btn-navy{
display:inline-block; width:100%; text-align:center;
font-size:.9rem;
}
}

/* === HERO (Owl) === */
.hero-owl, .hero-owl .owl-stage-outer, .hero-owl .owl-stage, .hero-owl .owl-item, .hero-owl .item {
height: calc(90vh - var(--header-visible-bottom, 0px));
max-height: 90vh;
overflow: hidden;
}
.hero-owl .item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}


/* Make all #google-map-* boxes render even without the theme's .gmap class */
[id^="google-map-"]{
width:100% !important;
min-height:400px;
height:600px;          /* adjust per page if you need */
display:block;
}
	
	
	/* Two-column layout that collapses to one column on mobile */
.ftx-inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 767.98px) {
  .ftx-inline { grid-template-columns: 1fr; }
}

/* Make selected fields span across both columns */
.ftx-field.span-2 { grid-column: 1 / -1; }

/* Optional: upscale the normal-size captcha slightly on desktop only */
#gRecaptchaTour { transform-origin: 0 0; }
@media (min-width: 768px) {
  #gRecaptchaTour[data-size="normal"] { transform: scale(1.12); } /* tweak as you like */
}
@media (max-width: 767.98px) {
  #gRecaptchaTour { transform: none; } /* no transform when compact */
}

	#mobileStickyFooter::before{
height: 1px;
top: -1px;
background:#002D62;
}

/* Ensure page content isn’t hidden behind the fixed footer */
body { padding-bottom: var(--msf-h, 0px); }

/* Optional: ~5px taller footer on phones */
#mobileStickyFooter{
padding-top: 17px !important;
padding-bottom: 17px !important;
}




/* Desktop: sticky secondary nav that sits right under the visible header */
@media (min-width: 768px){
.sticky-blue-bar{
position: sticky;
top: var(--header-visible-bottom, 0px);
z-index: 1030; /* above content, under main header if needed */
}
}

@media (min-width: 768px){
.sticky-blue-bar.sticky-fallback-fixed{
position: fixed;
left: 0; right: 0;
top: var(--header-visible-bottom, 0px);
z-index: 1030;
width: 100%;
}
}

/* --- Mobile sticky footer polish: tighter, single-line, no seam --- */
@media (max-width: 767.98px){
/* tighten container padding (you were making it taller) */
#mobileStickyFooter{
padding: 10px 12px;                 /* down from 17px */
background-color: #002D62;
overflow: hidden !important;
}

/* kill the 1px seam/line entirely */
#mobileStickyFooter::before{ display:none !important; }
#sticky-trigger{ height:0 !important; background:transparent !important; }

/* make button text stay on one line and reduce visual bulk */
#mobileStickyFooter .btn{
white-space: nowrap;
line-height: 1.1;
font-weight: 700;
font-size: clamp(13px, 3.4vw, 16px);
padding: .62rem .8rem;
border-radius: .45rem;
}
/* phone icon button: fixed width so it doesn’t expand oddly */
#mobileStickyFooter .btn.flex-fill:first-child{
flex: 0 0 auto;
width: 46px;
padding: .62rem 0;
}
/* gap utility fallback in case .gap-* doesn’t apply */
#mobileStickyFooter .d-flex > .btn + .btn{ margin-left: .5rem; }
}

/* account for iPhone safe area so no gap appears when URL bar collapses */
@supports(padding: max(0px)){
#mobileStickyFooter{ padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}


@media (min-width:768px){
/* default behavior (when sticky works) */
.sticky-blue-bar{
position: sticky;
top: var(--header-visible-bottom, 0px);
z-index: 1030;
}
/* JS-assisted fix if sticky is blocked by an ancestor */
.sticky-blue-bar.is-fixed{
position: fixed;
left: 0; right: 0;
top: var(--header-visible-bottom, 0px);
z-index: 1030;
width: 100%;
}
}	
	
/* ===== Phone-only hero height lock to kill address-bar resize jank ===== */
@media (max-width: 575.98px){
:root{
/* JS will set this to a px value (e.g., 612px) at load/orientation change */
--hero-lock: auto;
}

/* Use the lock if present; otherwise fall back to your dvh calculation */
#slider.slider-element{
height: var(--hero-lock, calc(100dvh - var(--header-visible-bottom, 0px))) !important;
max-height: var(--hero-lock, 100dvh) !important;
overflow: hidden;
}

/* Make every Owl layer honor 100% of the slider so we never see gaps */
#heroOwl,
#heroOwl .owl-stage-outer,
#heroOwl .owl-stage,
#heroOwl .owl-item,
#heroOwl .item{
height: 100% !important;
}

/* Images stay covering the area even if we stretched a bit */
#heroOwl .item img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
}	
	
	
	
	/* Seam-proof sticky bar */
.sticky-blue-bar{
  background:#002D62;           /* already there, keep */
  position: sticky;
  top: calc(var(--header-visible-bottom, 0px) - var(--hairline, 1px));
  z-index: 1030;
  will-change: top;
  transform: translateZ(0);     /* reduce subpixel jitter on scroll */
}

/* When we fall back to fixed (your JS toggles .is-fixed), bias the same */
.sticky-blue-bar.is-fixed{
  position: fixed;
  left:0; right:0;
  top: calc(var(--header-visible-bottom, 0px) - var(--hairline, 1px));
}

/* Paint a navy overlap that covers any fractional seam */
.sticky-blue-bar::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-1px;                     /* sits *above* the bar */
  height:1px;
  background:#002D62;
  pointer-events:none;
}

/* Make sure no outer margins create visual holes */
.sticky-blue-bar { margin:0 !important; }
#sticky-trigger { height:0; background:transparent; }

/* On mobile, do the same calc to prevent the gap when URL bar collapses */
@media (max-width: 575.98px){
  .sticky-blue-bar{
    top: calc(var(--header-visible-bottom, 0px) - var(--hairline, 1px));
  }
}

/* put in your CSS */
#getlistofhomes { 
  scroll-margin-top: calc(var(--header-visible-bottom, 0px) + 70px);
}
	
/* hero overlay fixes */
#slider { position: relative; }                /* anchor absolute overlay */
.headline-overlay { z-index: 5; }              /* overlay above owl */
#heroOwl { position: relative; z-index: 1; }   /* slider below overlay */
	
	
/* --- Plan hero overlay like plandetail --- */
.headline-plan-overlay2{
  position:absolute; left:0; bottom:60px;
  background:rgba(29,49,97,.85); color:#fff;
  padding:16px 22px; box-shadow:0 1px 6px rgba(0,0,0,.25); z-index:5;
}
.headline-plan-overlay2 h1{margin:0 0 4px 0; font-weight:800; letter-spacing:.3px; font-size:clamp(20px,3.2vw,28px);}
.headline-plan-overlay2 .meta {font-weight:600; opacity:.95}
.price-tag{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:10px 14px; border-radius:12px; background:#002D62; color:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.15); font-weight:800;
}
	
  .canvas-alt-tabs2 .nav-link{ background:#e9edf3; color:#0b2e59; font-weight:700; }
  .canvas-alt-tabs2 .nav-link.active{ background:#0b2e59; color:#fff; }	


	
  #buildTable thead { background:#002D62; color:#fff; }
  #buildTable thead th { font-weight:700; }
  #buildTable thead th .th-sort i{ opacity:.75; }	
	
	

/* Zebra stripes for Build table */
#buildTable tbody tr:nth-child(odd)  { background:#ffffff; }
#buildTable tbody tr:nth-child(even) { background:#f8fafc; }



#findthisplan-border .ftpX-table tbody a.comm-link i.fa-arrow-up-right-from-square{
font-size:.85em; opacity:.65;
}

/* Build table (mobile): hide QMI Available, tighten fonts, fix wrapping */
@media (max-width: 575.98px){
/* Hide QMI Available (3rd col) */
#buildTable th:nth-child(3),
#buildTable td:nth-child(3){ display:none !important; }

/* Allow wrapping + slightly smaller text */
#buildTable th,
#buildTable td{
white-space: normal !important;
word-break: break-word;
padding:.55rem .5rem;
font-size:.92rem;            /* smaller on mobile */
line-height:1.2;
}

/* Left-align numbers on mobile */
#buildTable th.text-end,
#buildTable td.text-end{ text-align:left !important; }

/* Make remaining button full-width for thumb reach */
#buildTable td .btn-navy{
display:inline-block; width:100%; text-align:center;
font-size:.9rem;
}
}
	
	
.canvas-alt-tabs2 .nav-link{ background:#e9edf3 !important; color:#0b2e59 !important; font-weight:700; }
.canvas-alt-tabs2 .nav-link.active{ background:#0b2e59 !important; color:#fff !important; }


 
  #plansBackLink {  color:#fff;   }

	
	/* ===== Mobile Sticky Footer (master plan) ===== */
@media (max-width: 767.98px){
  #mobileStickyFooter{
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1035; /* above content, below modals */
    background: #002D62;
    padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,.15);
    overflow: hidden !important;
  }
  #mobileStickyFooter .btn{
    white-space: nowrap;
    line-height: 1.1;
    font-weight: 700;
    font-size: clamp(13px, 3.7vw, 16px);
    padding: .62rem .8rem;
    border-radius: .45rem;
  }
  #mobileStickyFooter .btn-icon{
    flex: 0 0 auto;
    width: 46px;
    padding: .62rem 0;
    display:flex; align-items:center; justify-content:center;
  }
  /* make room so content isn't hidden by the footer */
  body { padding-bottom: var(--msf-h, 56px); }
  @supports(padding: max(0px)){
    #mobileStickyFooter{ padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  }
}
	
	
	
/* --- Mobile sticky footer polish: tighter, single-line, no seam --- */
@media (max-width: 767.98px){
/* tighten container padding (you were making it taller) */
#mobileStickyFooter{
padding: 10px 12px;                 /* down from 17px */
background-color: #002D62;
overflow: hidden !important;
}

/* kill the 1px seam/line entirely */
#mobileStickyFooter::before{ display:none !important; }
#sticky-trigger{ height:0 !important; background:transparent !important; }

/* make button text stay on one line and reduce visual bulk */
#mobileStickyFooter .btn{
white-space: nowrap;
line-height: 1.1;
font-weight: 700;
font-size: clamp(13px, 3.4vw, 16px);
padding: .62rem .8rem;
border-radius: .45rem;
}
/* phone icon button: fixed width so it doesn’t expand oddly */
#mobileStickyFooter .btn.flex-fill:first-child{
flex: 0 0 auto;
width: 46px;
padding: .62rem 0;
}
/* gap utility fallback in case .gap-* doesn’t apply */
#mobileStickyFooter .d-flex > .btn + .btn{ margin-left: .5rem; }
}

/* account for iPhone safe area so no gap appears when URL bar collapses */
@supports(padding: max(0px)){
#mobileStickyFooter{ padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
	
	
		
/* Diagonal SOLD ribbon */
.spec-ribbon {
  position: absolute;
  inset: 0;                 /* fill image wrapper */
  pointer-events: none;     /* don't block clicks on the image */
  z-index: 3;
}

.spec-ribbon.diagonal span{
  --ribbon-color: #ED1C24;  /* red */
  --ribbon-height: 44px;    /* thickness of the bar */
  --ribbon-angle: -35deg;   /* flip to 35deg for the other diagonal */

  position: absolute;
  top: 50%;
  left: 50%;
  width: 160%;              /* long enough to span the diagonal */
  height: var(--ribbon-height);
  line-height: var(--ribbon-height);
  transform: translate(-50%, -50%) rotate(var(--ribbon-angle));
  background: var(--ribbon-color);
  color: #fff;
  text-align: center;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  white-space: nowrap;
}

@media (max-width: 576px){
  .spec-ribbon.diagonal span{ --ribbon-height: 36px; font-size: .85rem; }
}

 #tab-gallery #pgGrid .pg-hide { display: none !important; }

  /* status pill look + green dot */
  .status-pf {
    position:absolute; top:25px; left:16px;
    background:#002D62; color:#fff; padding:5px 14px;
    font-weight:700; border-radius:0 8px 8px 0;
    box-shadow:0 1px 6px rgba(0,0,0,.07);
  }
  .status-pf .dot{
    display:inline-block; width:10px; height:10px; border-radius:999px;
    background:#22c55e; margin-right:8px; vertical-align:middle;
  }
  /* optional: different colors by keyword */
  .status-pf[data-status*="under construction"] .dot { background:#f59e0b; }
  .status-pf[data-status*="sold"] .dot { background:#ED1C24; }	
	
	
	
	.status-pf {
    position: absolute;
    z-index: 20 !important;   /* <— the fix */
}
.status-pf .dot {
    position: relative;
    z-index: 21 !important;
}

/* --- Block 2 --- */
.mobile-final-fix { margin-left: 15px !important; width: calc(100% - 30px) !important; }

/* --- Block 3 --- */
.heartbeat-animation { animation: heartbeat 2s infinite ease-in-out; }
.heartbeat-animation:hover {
    background-color: #fff !important;
    color: #002D62 !important;
    border: 1px solid #002D62 !important;
    text-decoration: none !important;
}
        @keyframes heartbeat {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); box-shadow: 0 0 10px rgba(255,255,255,0.3); }
            100% { transform: scale(1); }
        }

/* --- Block 4 --- */
/* Keep everything scoped to this include */
  #value-package #oc-images .oc-item{ position:relative; }
  #value-package #oc-images .oc-item img{ width:100%; height:auto; display:block; border-radius:10px; }
  #value-package #oc-images .sale-flash{
    position:absolute; left:10px; top:10px; z-index:2;
    box-shadow:0 4px 10px rgba(0,0,0,.15); border-radius:8px;
  }

  /* Fallback layout when Owl isn't initialized yet.
     Force override of Owl's display:none with !important. */
  #value-package #oc-images:not(.owl-loaded){
    display:flex !important; gap:30px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
  }
  #value-package #oc-images:not(.owl-loaded) .oc-item{
    flex:0 0 auto; width:min(320px, 80vw); scroll-snap-align:center;
  }

/* =========================================================
   EXTRACTED FROM: masterplansearch.php
   ========================================================= */

/* --- Block 1 --- */
/* Keep bottom CTA padded inside cards (fixes Gallery card) */
.inventory-card .card > .px-0.pb-3{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Optional: make the CTA fill width neatly and remove extra margins */
.inventory-card .card > .px-0.pb-3 .ftx-button{
  width: 100%;
  margin: 0; /* you had margin:5px 0 ... */
}
	
	
	/* keep the filter bar tidy and wrap nicely on phones */
@media (max-width: 991.98px) {
  #specFilter .form-select { min-width: 120px; }
}
@media (max-width: 575.98px){
  #specFilter .form-select { min-width: 100%; }
}
	
	/* Horizontal filter bar: inputs stretch to fill, reset stays compact */
.filter-bar .filter-item{
  flex: 1 1 180px;        /* grow to use space, wrap when needed */
  min-width: 160px;
}
.filter-bar .filter-reset{
  flex: 0 0 auto;         /* keep button compact */
  white-space: nowrap;
}
.filter-bar .form-label{
  margin-bottom: .25rem;  /* tighten vertical spacing */
}

/* On very small screens allow selects to be full width */
@media (max-width: 575.98px){
  .filter-bar .filter-item{ flex: 1 1 100%; min-width: 100%; }
}

/* =========================================================
   EXTRACTED FROM: include/communitydetail.php
   ========================================================= */

/* --- Block 1 --- */
@font-face {
  font-family: 'ZingRustDemo';
  src: url('/promos/fonts/ZingRustDemo.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HaveHeartOne';
  src: url('/promos/fonts/HaveHeartOne.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
	
	@font-face {
  font-family: 'ZingRustDemo';
  src: url('/promos/fonts/ZingRustDemo.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
	
		
.mtm-headline {
  font-family: 'ZingRustDemo', sans-serif;
  font-size: clamp(.8rem, 12vw, 2.8rem);
  font-weight: bold;
  color: white;
  line-height: 1;
  letter-spacing: 0.02em;
  margin-bottom: 0;
  animation: mtm-fadeInUp 0.8s ease-out 0.1s both;
}

/* =========================================================
   EXTRACTED FROM: include/components/calculator-modal.php
   ========================================================= */

/* --- Block 1 --- */
/* Enforce the calculator modal sits on top of ALL site elements (site header is ~1200) */
#calcModal {
    z-index: 10600 !important;
}

/* Ensure the backdrop is also high enough to prevent clicks through to nav, but lower than modal */
.modal-backdrop.calc-modal-backdrop {
    z-index: 10550 !important;
}

/* Ensure the close button is ALWAYS on top within the modal */
.btn-close-custom {
    z-index: 11000 !important;
    position: relative;
}

/* Enforce fullscreen layout regardless of page-specific CSS overrides */
#calcModal.modal.bs-example-modal-fs .modal-dialog.modal-fullscreen {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Enforce fullscreen layout for virtual tour modal (no-scroll) */
#vtourModal .modal-dialog {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}
#vtourModal .modal-content {
  height: 100% !important;
  max-height: 100vh !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}
#vtourModal .modal-body {
  height: 100% !important;
  max-height: 100vh !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}
#vtourModal #vtourContainer {
  height: 100% !important;
  width: 100% !important;
  position: relative !important;
}

/* =========================================================
   EXTRACTED FROM: include/components/card-plan.php
   ========================================================= */

/* --- Block 1 --- */
.qmi-carousel-wrapper {
                position: relative;
                width: 100%;
                aspect-ratio: 16/9;
                overflow: hidden;
            }
            .qmi-carousel-track {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
                width: 100%;
                height: 100%;
            }
            .qmi-carousel-track::-webkit-scrollbar {
                display: none;
            }
            .qmi-carousel-track {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .qmi-carousel-slide {
                flex: 0 0 100%;
                width: 100%;
                height: 100%;
                scroll-snap-align: start;
                position: relative;
            }
            .qmi-carousel-slide img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }
            .qmi-carousel-dots {
                position: absolute;
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%);
                display: none;
                gap: 6px;
                z-index: 5;
                pointer-events: none;
            }
            .qmi-carousel-dot {
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: rgba(29, 49, 97, 0.4);
                transition: background 0.3s, transform 0.3s;
            }
            .qmi-carousel-dot.active {
                background: rgba(29, 49, 97, 0.95);
                transform: scale(1.2);
            }
            @media (min-width: 768px) {
                .qmi-carousel-arrow {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 32px;
                    height: 32px;
                    background: rgba(0, 0, 0, 0.4);
                    color: #fff;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    z-index: 5;
                    opacity: 0;
                    transition: opacity 0.3s, background 0.3s;
                    border: none;
                    font-size: 14px;
                }
                .qmi-carousel-wrapper:hover .qmi-carousel-arrow {
                    opacity: 1;
                }
                .qmi-carousel-arrow:hover {
                    background: rgba(0, 0, 0, 0.7);
                }
                .qmi-carousel-arrow-left {
                    left: 10px;
                }
                .qmi-carousel-arrow-right {
                    right: 10px;
                }
            }

/* =========================================================
   EXTRACTED FROM: include/components/card-qmi.php
   ========================================================= */

/* --- Block 1 --- */
.qmi-carousel-wrapper {
                        position: relative;
                        width: 100%;
                        aspect-ratio: 16/9;
                        overflow: hidden;
                    }
                    .qmi-carousel-track {
                        display: flex;
                        overflow-x: auto;
                        scroll-snap-type: x mandatory;
                        scroll-behavior: smooth;
                        -webkit-overflow-scrolling: touch;
                        width: 100%;
                        height: 100%;
                    }
                    .qmi-carousel-track::-webkit-scrollbar {
                        display: none;
                    }
                    .qmi-carousel-track {
                        -ms-overflow-style: none;
                        scrollbar-width: none;
                    }
                    .qmi-carousel-slide {
                        flex: 0 0 100%;
                        width: 100%;
                        height: 100%;
                        scroll-snap-align: start;
                        position: relative;
                    }
                    .qmi-carousel-slide img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                    }
                    .qmi-carousel-dots {
                        position: absolute;
                        bottom: 10px;
                        left: 50%;
                        transform: translateX(-50%);
                        display: none;
                        gap: 6px;
                        z-index: 5;
                        pointer-events: none;
                    }
                    .qmi-carousel-dot {
                        width: 6px;
                        height: 6px;
                        border-radius: 50%;
                        background: rgba(29, 49, 97, 0.4);
                        transition: background 0.3s, transform 0.3s;
                    }
                    .qmi-carousel-dot.active {
                        background: rgba(29, 49, 97, 0.95);
                        transform: scale(1.2);
                    }
                    @media (min-width: 768px) {
                        .qmi-carousel-arrow {
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 32px;
                            height: 32px;
                            background: rgba(0, 0, 0, 0.4);
                            color: #fff;
                            border-radius: 50%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            z-index: 5;
                            opacity: 0;
                            transition: opacity 0.3s, background 0.3s;
                            border: none;
                            font-size: 14px;
                        }
                        .qmi-carousel-wrapper:hover .qmi-carousel-arrow {
                            opacity: 1;
                        }
                        .qmi-carousel-arrow:hover {
                            background: rgba(0, 0, 0, 0.7);
                        }
                        .qmi-carousel-arrow-left {
                            left: 10px;
                        }
                        .qmi-carousel-arrow-right {
                            right: 10px;
                        }
                    }

/* =========================================================
   EXTRACTED FROM: include/valuepackage.php
   ========================================================= */

/* --- Block 1 --- */
/* Hero overflow clip (Owl clones) */
#wrapper section#slider .hero-owl .owl-stage-outer,
#wrapper section#slider #heroOwl .owl-stage-outer{
  overflow-x: hidden !important;
  overflow-y: hidden;
}

#wrapper section#slider #heroOwl .owl-stage{
  transform: translate3d(0,0,0);
}

/* extra guard */
#wrapper section#slider{
  overflow: hidden !important;
}
	
	#heroOwl { overflow-x: clip; }

/* --- Block 2 --- */
/* Keep everything scoped to this include */
  #value-package #oc-images .oc-item{ position:relative; }
  #value-package #oc-images .oc-item img{ width:100%; height:auto; display:block; border-radius:10px; }
  #value-package #oc-images .sale-flash{
    position:absolute; left:10px; top:10px; z-index:2;
    box-shadow:0 4px 10px rgba(0,0,0,.15); border-radius:8px;
  }

  /* Fallback layout when Owl isn't initialized yet.
     Force override of Owl's display:none with !important. */
  #value-package #oc-images:not(.owl-loaded){
    display:flex !important; gap:30px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px;
  }
  #value-package #oc-images:not(.owl-loaded) .oc-item{
    flex:0 0 auto; width:min(320px, 80vw); scroll-snap-align:center;
  }

/* =========================================================
   EXTRACTED FROM: include/video-popup.php
   ========================================================= */

/* --- Block 1 --- */
/* -------- Promo Video Popup (isolated) -------- */
  .promo-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none; /* toggled via JS */
    font-family: inherit;
  }

  .promo-video-overlay.is-active {
    display: block;
  }

  /* FULL-WINDOW BACKGROUND IMAGE, slightly transparent */
  .promo-video-overlay__backdrop {
    position: fixed;
    inset: 0;
    background: #CCE9EE url('https://cdn.firsttexashomes.com/images/promos/makethemovebackground.png') center/cover no-repeat;
    opacity: 0.9;           /* tweak 0.6–0.95 as you like */
    cursor: pointer;
  }

  /* Fireworks Canvas */
  .promo-video-overlay__canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
  }

  /* Fixed, centered modal so it never “shifts” */
  .promo-video-overlay__modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 520px;
    width: 90vw;
    border-radius: 10px;
    overflow: visible;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    background: transparent;
    z-index: 1;
  }

  /* Card background behind video & (optional) button */
  .promo-video-overlay__inner {
    position: relative;
    background: rgba(13, 31, 73, 0.8); /* slightly translucent over bg art */
    padding: 18px 18px 16px 18px;
    border-radius: 10px;
  }

  .promo-video-overlay__video-wrapper {
    position: relative;
    width: 100%;
    /* Square aspect ratio */
    padding-top: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: transparent; /* remove black edge background */
  }

  .promo-video-overlay__video-wrapper > * {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;

    /* kill any iframe border/outline/shadow that might create a line */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    display: block !important;
  }

  .promo-video-overlay__close {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    z-index: 3;

    /* pill just above the top-right corner of the card */
    top: -16px;
    right: 18px;

    padding: 6px 16px;
    background: #002D62 !important;   /* FTH navy */
    color: #ffffff !important;
    border-radius: 8px !important;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  }

  .promo-video-overlay__close:hover,
  .promo-video-overlay__close:focus {
    background: #001b3b !important;   /* slightly darker on hover */
  }

  /* Button BELOW the video (only shown when $hasCta === true) */
  .promo-video-overlay__cta-row {
    margin-top: 14px;
    text-align: center;
  }

  /* HARD RESET for CTA so global styles can't mess it up */
  .promo-video-overlay__cta {
    all: unset; /* wipe inherited styles (modern browsers) */
    box-sizing: border-box;
    display: inline-block;

    padding: 0.7em 1.4em;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;

    background: #EE1F24 !important;   /* FTH red */
    color: #fff !important;
    border-radius: 999px !important;   /* pill */
    border: none !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.5);
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
  }

  .promo-video-overlay__cta:hover,
  .promo-video-overlay__cta:focus {
    filter: brightness(1.05);
  }

  @media (max-width: 575.98px) {
    .promo-video-overlay__modal {
      max-width: 420px;
      width: 92vw;
    }

    .promo-video-overlay__inner {
      padding: 14px 14px 12px 14px;
    }

/* -------- Promo Video Popup (isolated) -------- */
  .promo-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none; /* toggled via JS */
    font-family: inherit;
  }

  .promo-video-overlay.is-active {
    display: block;
  }

  /* FULL-WINDOW BACKGROUND IMAGE, slightly transparent */
  .promo-video-overlay__backdrop {
    position: fixed;
    inset: 0;
    background: #CCE9EE url('https://cdn.firsttexashomes.com/images/promos/makethemovebackground.png') center/cover no-repeat;
    opacity: 0.9;           /* tweak 0.6–0.95 as you like */
    cursor: pointer;
  }

  /* Fireworks Canvas */
  .promo-video-overlay__canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
  }

  /* Fixed, centered modal so it never “shifts” */
  .promo-video-overlay__modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 520px;
    width: 90vw;
    border-radius: 10px;
    overflow: visible;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    background: transparent;
    z-index: 1;
  }

  /* Card background behind video & (optional) button */
  .promo-video-overlay__inner {
    position: relative;
    background: rgba(13, 31, 73, 0.8); /* slightly translucent over bg art */
    padding: 18px 18px 16px 18px;
    border-radius: 10px;
  }

  .promo-video-overlay__video-wrapper {
    position: relative;
    width: 100%;
    /* Square aspect ratio */
    padding-top: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: transparent; /* remove black edge background */
  }

  .promo-video-overlay__video-wrapper > * {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;

    /* kill any iframe border/outline/shadow that might create a line */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
    display: block !important;
  }

  .promo-video-overlay__close {
    all: unset;
    box-sizing: border-box;
    position: absolute;
    z-index: 3;

    /* pill just above the top-right corner of the card */
    top: -16px;
    right: 18px;

    padding: 6px 16px;
    background: #002D62 !important;   /* FTH navy */
    color: #ffffff !important;
    border-radius: 8px !important;

    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  }

  .promo-video-overlay__close:hover,
  .promo-video-overlay__close:focus {
    background: #001b3b !important;   /* slightly darker on hover */
  }

  /* Button BELOW the video (only shown when $hasCta === true) */
  .promo-video-overlay__cta-row {
    margin-top: 14px;
    text-align: center;
  }

  /* HARD RESET for CTA so global styles can't mess it up */
  .promo-video-overlay__cta {
    all: unset; /* wipe inherited styles (modern browsers) */
    box-sizing: border-box;
    display: inline-block;

    padding: 0.7em 1.4em;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;

    background: #EE1F24 !important;   /* FTH red */
    color: #fff !important;
    border-radius: 999px !important;   /* pill */
    border: none !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.2;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.5);
    cursor: pointer;
    white-space: nowrap;
    text-align: center;
  }

  .promo-video-overlay__cta:hover,
  .promo-video-overlay__cta:focus {
    filter: brightness(1.05);
  }

  @media (max-width: 575.98px) {
    .promo-video-overlay__modal {
      max-width: 420px;
      width: 92vw;
    }

    .promo-video-overlay__inner {
      padding: 14px 14px 12px 14px;
    }

    .promo-video-overlay__cta {
      font-size: 0.85rem !important;
      padding: 0.6em 1.2em;
    }

    .promo-video-overlay__close {
      top: -14px;
      right: 14px;
    }
  }
}

/* Blue top & bottom borders on About page maps (not on community/qmi searches) */
#aboutTabContent .gmap-edge {
  border-top: 4px solid #002D62 !important;
  border-bottom: 4px solid #002D62 !important;
}

/* Prevent desktop header button from wrapping on smaller screens */
.header-misc .button {
  white-space: nowrap !important;
}

@media (min-width: 992px) {
  .header-misc .button {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .header-misc .button {
    font-size: 11px !important;
  }
}

@media (min-width: 992px) {
  /* Header navigation spacing tweaks to prevent wrapping */
  .menu-link div > i.sub-menu-indicator {
    display: inline-block !important;
    font-size: 8px !important;
    margin-left: 3px !important;
    margin-right: 0 !important;
    width: auto !important;
  }
}

@media (min-width: 992px) {
  /* Reduce margin and padding on the menu items */
  .is-expanded-menu .menu-container > .menu-item {
    margin-right: 1px !important;
    margin-left: 0 !important;
  }
  .is-expanded-menu .menu-container > .menu-item > .menu-link {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Tighten margins and padding further on medium screens */
  .is-expanded-menu .menu-container > .menu-item {
    margin-right: 0 !important;
  }
  .is-expanded-menu .menu-container > .menu-item > .menu-link {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

/* Navigation dropdown borders configuration */
@media (min-width: 992px) {
  /* About: Add full borders; push down by 4px to align; disable transition */
  .menu-item-about > .sub-menu-container {
    border: 2px solid #002D62 !important;
    margin-top: 2px !important;
    background-image: linear-gradient(to bottom, rgba(243, 244, 244, 0.7) 25%, rgba(255, 255, 255, 0.7) 90%) !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    transition: none !important;
  }
  .menu-item-about:hover > .sub-menu-container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }

  /* Floor Plans / Photo Gallery: Add full borders; push down by 4px to align; disable transition */
  .menu-item-floor-plans > .sub-menu-container {
    border: 2px solid #002D62 !important;
    margin-top: 2px !important;
    transition: none !important;
  }
  .menu-item-floor-plans:hover > .sub-menu-container {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
  }
}

/* Mobile-only page specific styling overrides */
@media (max-width: 991.98px) {
  /* Floor Plan Library Page spacing fixes */
  .floor-plans-search-container {
    margin-top: 0 !important;
  }
  .floor-plans-search-container .mobile-filter-sticky-wrapper {
    margin-top: 0 !important;
  }
  .floor-plans-search-container .row.align-items-center {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  /* Prevent double borders on About page maps by removing top border on the mobile filter sticky bar */
  .mobile-filter-sticky-wrapper {
    border-top: 0 !important;
  }

  /* Hide the double down-chevron inside links on mobile viewports */
  .menu-link i.sub-menu-indicator {
    display: none !important;
  }

  /* About Select Series Page: mobile layout tweaks */
  #select-series-intro {
    padding-top: 0 !important;
  }
  #select-series-intro > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  #select-series-intro .row.align-items-start {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #select-series-intro .row.align-items-start > .col-12:first-child {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #select-series-intro .row.align-items-start > .col-12:last-child {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Add 1px navy border top/3px bottom of the mobile search maps */
  .gmap-fullwrap {
    border-top: 1px solid #002d62 !important;
    border-bottom: 3px solid #002d62 !important;
  }
}