/* ==========================================================================
   ↓↓↓ KBCG MASTER ARCHIVE CSS ENGINE ↓↓↓ 
   ========================================================================== */

:root {
  /* These map directly to the ACF Global Settings injected into the header */
  --brand-primary: var(--kbcg-brand-primary);
  --brand-secondary: var(--kbcg-brand-secondary);

  /* Auto-creates a darker hover color based on whatever the Primary color is! */
  --brand-primary-dark: color-mix(
    in srgb,
    var(--kbcg-brand-primary) 80%,
    black
  );
}

/* ==========================================================
   2. GLOBAL CARD UI (Homes, Plans, Communities)
   ========================================================== */
#home-list article,
#community-list article {
  background-color: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #dcdcdc !important;
  margin-bottom: 50px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  transition: box-shadow 0.3s ease !important;
}
#home-list article:hover,
#community-list article:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

/* ==========================================================
   3. PREMIUM FLOOR PLAN ARCHIVE LAYOUT 
   ========================================================== */
#main-content .plan-info-top {
  padding: 30px 5% 0px !important;
}
#main-content .plan-info-bottom {
  padding: 10px 5% 30px !important;
}

/* The Dynamic Brand Title */
#main-content .plan-info-top .address h2 a strong {
  color: var(--brand-primary) !important;
}

/* Desktop Icon Centering */
#main-content ul.plan-info-icons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 !important;
  width: 100% !important;
}

/* Mobile Left-Aligned Vertical Stack */
@media screen and (max-width: 768px) {
  #main-content ul.plan-info-icons {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding-left: 0 !important;
  }
  #main-content ul.plan-info-icons li {
    width: auto !important;
    margin: 0 0 15px 0 !important;
  }
}

/* ==========================================================
   COMMUNITY ARCHIVE CARDS
   ========================================================== */
.kbcg-archive-card-content {
  padding: 25px 20px;
}

.kbcg-card-title-wrap {
  margin-bottom: 25px;
  text-align: center;
}

.kbcg-card-title {
  font-size: 28px;
  line-height: 1.2;
  margin: 0;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.kbcg-card-title a {
  text-decoration: none;
  color: var(--brand-primary) !important;
}

.kbcg-card-city {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--brand-secondary);
  margin-top: 10px;
  font-weight: 800;
}

.kbcg-card-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 15px;
  align-items: center;
  margin-bottom: 25px;
  background: #f9f9f9;
  padding: 20px 10px;
  border-radius: 6px;
  border: 1px solid #eaeaea;
}

.kbcg-stat-box {
  text-align: center;
}

.kbcg-stat-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #888;
  font-weight: 800;
  margin-bottom: 6px;
}

.kbcg-stat-value {
  font-size: 18px;
  color: var(--brand-primary);
  font-weight: 800;
}

.kbcg-stat-divider {
  background: #ddd;
  height: 40px;
  width: 1px;
  margin: 0 auto;
}

.kbcg-card-inventory {
  margin-bottom: 25px;
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Forces the button to stretch full width in the card */
.kbcg-archive-card-content .kbcg-view-details-btn {
  width: 100%;
  display: block;
}

/* ==========================================================
   4. GLOBAL BUTTON STYLING (Homes, Plans, Communities)
   ========================================================== */

/* Isolated Custom Button Styles */
.kbcg-archive-card .btn,
#kbcg-unified-card .btn {
  display: inline-block;
  background: var(--brand-primary);
  padding: 0.5em 1.5em;
  border-radius: 4px;
  border: 1px solid var(--brand-primary);
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-family: inherit;
  font-size: 16px;
  transition: all 0.2s ease-out;
  top: 10px;
  position: relative;
  text-decoration: none;
}

.kbcg-archive-card .btn:hover,
#kbcg-unified-card .btn:hover {
  background: white;
  color: var(--brand-primary);
}

.kbcg-archive-card .btn.outline,
#kbcg-unified-card .btn.outline {
  background: transparent;
  border: 2px solid var(--brand-primary);
  color: var(--brand-primary);
}

.kbcg-archive-card .btn.outline:hover,
#kbcg-unified-card .btn.outline:hover {
  background: var(--brand-primary);
  color: #fff;
}

#home-list article .btn,
#community-list article .btn {
  display: block !important;
  text-align: center !important;
  max-width: 75% !important;
  margin: 0 auto !important;
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  border: 2px solid var(--brand-primary) !important;
  position: relative !important;
  padding: 12px 60px 12px 20px !important;
  transition: all 0.3s ease !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  border-radius: 6px !important;
}
#home-list article .btn:hover,
#community-list article .btn:hover {
  background: #ffffff !important;
  color: var(--brand-primary) !important;
}
#home-list article .btn:after,
#community-list article .btn:after {
  content: "»" !important;
  position: absolute !important;
  right: 20px !important;
  font-size: 22px !important;
  line-height: 1 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: all 0.3s ease !important;
}
#home-list article .btn:hover:after,
#community-list article .btn:hover:after {
  right: 12px !important;
  color: var(--brand-primary) !important;
}

#main-content .home-info-bottom .btn:hover,
#main-content .plan-info-bottom .btn:hover {
  background: #ffffff !important;
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

#main-content .home-info-bottom .btn:hover:after,
#main-content .plan-info-bottom .btn:hover:after {
  color: var(--brand-primary) !important;
}

/* ==========================================================
    5. SINGLE PAGE UNIFIED SPEC CARD 
   ========================================================== */
body #kbcg-unified-card {
  background: #f8f8f8 !important;
  padding: 40px !important;
  border-radius: 12px !important;
  border: 1px solid #dcdcdc !important;
  margin: 20px auto 40px auto !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
  max-width: 1000px !important;
  display: flex !important;
  flex-direction: column !important;
}

body .card-top-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 40px !important;
}

body .card-col-specs {
  flex: 1 !important;
  order: 1 !important;
}

body .card-col-image {
  flex: 0 0 320px !important;
  text-align: center !important;
  order: 2 !important;
}

body .card-col-image img {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  border: 1px solid #dcdcdc !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.3s ease !important;
}

body .card-col-image img:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12) !important;
  border-color: var(--brand-primary) !important;
}

body .click-to-view-label {
  color: var(--brand-primary) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  margin-top: 12px !important;
  text-transform: uppercase !important;
  display: block !important;
}

body .spec-divider-final {
  border: 0 !important;
  border-top: 1px solid #dcdcdc !important;
  margin: 30px 0 !important;
  opacity: 0.6 !important;
  order: 3 !important;
}

body #flyer-button-wrap {
  display: flex !important;
  justify-content: center !important;
  order: 4 !important;
}

body a.download-flyer-btn {
  display: inline-block !important;
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  border: 2px solid var(--brand-primary) !important;
  padding: 12px 35px !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  text-decoration: none !important;
  font-size: 16px !important;
  transition: all 0.3s ease-in-out !important;
}

body a.download-flyer-btn:hover {
  background: #ffffff !important;
  color: var(--brand-primary) !important;
  cursor: pointer !important;
}

@media screen and (max-width: 768px) {
  body #kbcg-unified-card {
    padding: 30px 20px !important;
  }
  body .card-top-row {
    display: block !important;
  }
  body .card-col-specs {
    order: 1 !important;
    margin-bottom: 20px !important;
  }
  body .spec-divider-final {
    order: 2 !important;
  }
  body #flyer-button-wrap {
    order: 3 !important;
    margin-bottom: 30px !important;
  }
  body .card-col-image {
    order: 4 !important;
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  body a.download-flyer-btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* ==========================================================
    6. UNIFIED SPEC CARD ICONS (HAVYN-STYLE EXPANDED)
   ========================================================== */
body ul#single-specs,
body ul#single-specs-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 32px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 20px 0 30px 0 !important;
}

body ul#single-specs li,
body ul#single-specs-list li {
  padding: 0 0 0 65px !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 40px 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 45px !important;
  margin: 0 !important;
  font-size: 20px !important;
  color: #333333 !important;
  font-weight: 600 !important;
}

/* The Number */
body ul#single-specs li span:first-child,
body ul#single-specs-list li .kbcg-red-stat {
  font-size: 22px !important;
  color: var(--brand-primary) !important;
  font-weight: 800 !important;
  margin-right: 8px !important;
  line-height: 1 !important;
}

/* The Label */
body ul#single-specs-list li .kbcg-grid-label {
  font-size: 18px !important;
  color: #333333 !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.5px !important;
}

/* Ensure 'Type' items without secondary labels still get the brand primary treatment */
body ul#single-specs-list li.type .kbcg-red-stat {
  color: var(--brand-primary) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  margin-right: 0 !important;
}

/* Fallback icons */
body ul#single-specs li.sqft,
body ul#single-specs-list li#sqft-target {
  background-image: url("/wp-content/uploads/icon-plans.png") !important;
}
body ul#single-specs li.beds,
body ul#single-specs-list li#beds-target {
  background-image: url("/wp-content/uploads/icon-beds.png") !important;
}
body ul#single-specs li.baths,
body ul#single-specs-list li#baths-target {
  background-image: url("/wp-content/uploads/icon-baths.png") !important;
}
body ul#single-specs li.garage,
body ul#single-specs-list li#garage-target {
  background-image: url("/wp-content/uploads/icon-garage.png") !important;
}
body ul#single-specs li.type,
body ul#single-specs-list li#type-target {
  background-image: url("/wp-content/uploads/icon-type.png") !important;
}

/* ==========================================================
    7. SINGLE PLAN CTAs & BUTTONS
   ========================================================== */
.plan-cta-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 20px 0 0 0;
  width: 100%;
}

#overview-inventory-target,
#plan-target {
  width: 100%;
}

.plan-cta-wrapper .btn {
  width: 100%;
  display: block;
  text-align: center;
  box-sizing: border-box;
  padding: 14px 24px !important;
  font-weight: bold !important;
  border-radius: 4px !important;
  transition: all 0.3s ease;
}

@media (min-width: 768px) {
  .plan-cta-wrapper {
    flex-direction: row;
    justify-content: space-between;
  }
  #overview-inventory-target,
  #plan-target {
    flex: 1;
  }
}

body .plan-primary-btn,
body .plan-primary-btn:link,
body .plan-primary-btn:visited {
  background-color: var(--brand-primary) !important;
  color: #ffffff !important;
  border: none !important;
}
body .plan-primary-btn:hover {
  background-color: var(--brand-primary-dark) !important;
  color: #ffffff !important;
}

body .plan-secondary-btn,
body .plan-secondary-btn:link,
body .plan-secondary-btn:visited {
  background-color: #333333 !important;
  color: #ffffff !important;
  border: none !important;
}
body .plan-secondary-btn:hover {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* ==========================================================
    8. FOOTER & DISCLAIMER
   ========================================================== */
.kbcg-plan-legal-branding {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
}

.kbcg-plan-disclaimer-wrap {
  max-width: 1000px;
  margin: 0 auto 30px auto;
  padding: 0 5%;
}
.kbcg-plan-disclaimer-wrap p {
  color: #999999 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  text-align: center;
  font-style: italic;
}

.kbcg-plan-mini-footer {
  background-color: var(--brand-primary) !important;
  padding: 40px 0 !important;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  max-width: 100vw !important;
}

.kbcg-mini-footer-logo {
  max-width: 180px !important;
  height: auto !important;
  display: block;
}

@media screen and (max-width: 768px) {
  .kbcg-plan-mini-footer {
    padding: 30px 0 !important;
  }
  .kbcg-mini-footer-logo {
    max-width: 140px !important;
  }
}

/* ==========================================================
    9. SUB-MENU ACTION BAR (DESKTOP & BASE STYLES)
   ========================================================== */
#single-home-sub-menu {
  width: 100% !important;
  background-color: #333333 !important;
  padding: 0 !important;
  position: relative;
  z-index: 99;
}

#single-home-sub-menu ul {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 20px !important;
}

#single-home-sub-menu li {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 10px !important;
  margin: 0 !important;
}

#single-home-sub-menu a {
  color: #ffffff !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 12px 15px !important;
  border-radius: 4px;
  display: inline-block !important;
  transition: all 0.3s ease-in-out !important;
}

#single-home-sub-menu a:hover {
  background-color: #ffffff !important;
  color: var(--brand-primary) !important;
  letter-spacing: 1.5px !important;
}

@media (min-width: 981px) {
  #single-home-sub-menu ul {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px 0 !important;
    padding: 5px 20px !important;
  }

  #single-home-sub-menu li:not(:first-child)::before {
    content: "|" !important;
    position: absolute !important;
    left: 0 !important;
    transform: translateX(-50%) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    font-weight: 300 !important;
  }

  #single-home-sub-menu .external-inventory-link,
  #single-home-sub-menu li[style*="margin-left"] {
    margin-left: 0 !important;
    padding-left: 0 !important;
    border-left: none !important;
  }
}

/* ==========================================================
    10. GALLERY & FORM STRETCH FIX
   ========================================================== */
@media screen and (min-width: 981px) {
  .et_pb_row:has(#single-home-sub-menu),
  .et_pb_row:has(#plan-gallery-grid) {
    width: 80% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}

body .plan-gallery-grid .et_pb_gallery_items {
  display: grid !important;
  gap: 2px !important;
  width: 100% !important;
}
body .plan-gallery-grid .et_pb_gallery_item {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  clear: none !important;
  float: none !important;
  display: block !important;
}

body .plan-gallery-grid .et_pb_gallery_image,
body .plan-gallery-grid .et_pb_gallery_image img {
  display: block !important;
  vertical-align: bottom !important;
  line-height: 0 !important;
  margin-bottom: 0 !important;
}

#plan-gallery-slider img {
  object-fit: cover !important;
}

@media screen and (min-width: 981px) {
  .et_pb_column:has(.plan-gallery-grid) {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
  }

  .plan-gallery-grid {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body .plan-gallery-grid .et_pb_gallery_items {
    height: 100% !important;
    grid-template-rows: repeat(6, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }

  body .plan-gallery-grid .et_pb_gallery_item {
    min-height: 0 !important;
    height: 100% !important;
  }
}

body .plan-gallery-grid .et_pb_gallery_image,
body .plan-gallery-grid .et_pb_gallery_image a,
body .plan-gallery-grid .et_pb_gallery_image img {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
}

@media screen and (min-width: 981px) {
  body .plan-gallery-grid .et_pb_gallery_items {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  body .plan-gallery-grid .et_pb_gallery_item:nth-of-type(n + 25) {
    display: none !important;
  }

  body
    .plan-gallery-grid
    .et_pb_gallery_item:nth-of-type(24)
    .et_pb_gallery_image {
    position: relative !important;
    display: block !important;
  }
  body
    .plan-gallery-grid
    .et_pb_gallery_item:nth-of-type(24)
    .et_pb_gallery_image::after {
    content: "+ View More Photos" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: color-mix(
      in srgb,
      var(--brand-primary) 85%,
      transparent
    ) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
    z-index: 9999 !important;
  }
  body .plan-gallery-grid .et_pb_gallery_item:nth-of-type(24) .et_overlay {
    display: none !important;
  }
}

@media screen and (max-width: 980px) {
  body .plan-gallery-grid .et_pb_gallery_items {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  body .plan-gallery-grid .et_pb_gallery_item:nth-of-type(n + 5) {
    display: none !important;
  }

  body
    .plan-gallery-grid
    .et_pb_gallery_item:nth-of-type(4)
    .et_pb_gallery_image {
    position: relative !important;
    display: block !important;
  }
  body
    .plan-gallery-grid
    .et_pb_gallery_item:nth-of-type(4)
    .et_pb_gallery_image::after {
    content: "+ View More Photos" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background-color: color-mix(
      in srgb,
      var(--brand-primary) 85%,
      transparent
    ) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 18px !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
    z-index: 9999 !important;
  }
  body .plan-gallery-grid .et_pb_gallery_item:nth-of-type(4) .et_overlay {
    display: none !important;
  }
}

.et_pb_column:has(.gform_wrapper),
.et_pb_column:has(.gform_confirmation_wrapper) {
  background-color: #131313 !important;
  padding: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

@media screen and (min-width: 981px) {
  .et_pb_column:has(.gform_wrapper),
  .et_pb_column:has(.gform_confirmation_wrapper) {
    min-height: 600px !important;
  }
}

/* ==========================================================
    11. THE "NO-JUMP" STRETCH SLIDER (The Holy Grail)
   ========================================================== */
@media screen and (min-width: 981px) {
  .et_pb_row:has(#plan-gallery-slider),
  .et_pb_row:has(#community-gallery-slider) {
    width: 80% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
  }

  .et_pb_column:has(#plan-gallery-slider),
  .et_pb_column:has(#community-gallery-slider) {
    flex: 2 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    position: relative !important;
    min-height: 550px !important;
  }

  #plan-gallery-slider,
  #community-gallery-slider {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

#plan-gallery-slider .et_pb_gallery_items,
#community-gallery-slider .et_pb_gallery_items,
#plan-gallery-slider .et_pb_slider,
#community-gallery-slider .et_pb_slider,
#plan-gallery-slider .et_pb_slides,
#community-gallery-slider .et_pb_slides {
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

#plan-gallery-slider .et_pb_slide,
#community-gallery-slider .et_pb_slide,
#plan-gallery-slider .et_pb_gallery_item,
#community-gallery-slider .et_pb_gallery_item {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  opacity: 0;
  z-index: 1;
  transition: opacity 0.8s ease-in-out !important;
}

#plan-gallery-slider .et_pb_slide:first-child,
#community-gallery-slider .et_pb_slide:first-child,
#plan-gallery-slider .et_pb_gallery_item:first-child,
#community-gallery-slider .et_pb_gallery_item:first-child {
  opacity: 1;
  z-index: 2;
}

#plan-gallery-slider .et-pb-active-slide,
#community-gallery-slider .et-pb-active-slide {
  opacity: 1 !important;
  z-index: 3 !important;
}

#plan-gallery-slider img,
#community-gallery-slider img,
#plan-gallery-slider .et_pb_gallery_image,
#community-gallery-slider .et_pb_gallery_image,
#plan-gallery-slider .et_pb_gallery_image a,
#community-gallery-slider .et_pb_gallery_image a {
  height: 100% !important;
  width: 100% !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  max-height: none !important;
}
#plan-gallery-slider img,
#community-gallery-slider img {
  object-fit: cover !important;
  object-position: center !important;
}

#plan-gallery-slider .et-pb-controllers,
#community-gallery-slider .et-pb-controllers,
#plan-gallery-slider .et-pb-arrow-prev,
#plan-gallery-slider .et-pb-arrow-next,
#community-gallery-slider .et-pb-arrow-prev,
#community-gallery-slider .et-pb-arrow-next {
  z-index: 10 !important;
}

@media screen and (max-width: 980px) {
  .et_pb_row:has(#plan-gallery-slider),
  .et_pb_row:has(#community-gallery-slider) {
    display: block !important;
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 auto !important;
  }
  #plan-gallery-slider,
  #community-gallery-slider {
    position: relative !important;
    height: 350px !important;
  }
}

#plan-gallery-slider .et-pb-arrow-prev,
#plan-gallery-slider .et-pb-arrow-next,
#community-gallery-slider .et-pb-arrow-prev,
#community-gallery-slider .et-pb-arrow-next {
  color: #ffffff !important;
  font-size: 36px !important;
  background-color: rgba(19, 19, 19, 0.85) !important;
  padding: 15px 20px !important;
  border-radius: 0px !important;
  transition: all 0.3s ease !important;
  text-shadow: none !important;
}
#plan-gallery-slider .et-pb-arrow-prev:hover,
#plan-gallery-slider .et-pb-arrow-next:hover,
#community-gallery-slider .et-pb-arrow-prev:hover,
#community-gallery-slider .et-pb-arrow-next:hover {
  background-color: #000000 !important;
}
#plan-gallery-slider .et-pb-controllers,
#community-gallery-slider .et-pb-controllers {
  background-color: rgba(0, 0, 0, 0.5) !important;
  border-radius: 20px !important;
  padding: 5px 12px !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 15px !important;
}
#plan-gallery-slider .et-pb-controllers a,
#community-gallery-slider .et-pb-controllers a {
  background-color: rgba(255, 255, 255, 0.5) !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 4px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}
#plan-gallery-slider .et-pb-controllers .et-pb-active-control,
#community-gallery-slider .et-pb-controllers .et-pb-active-control {
  background-color: #ffffff !important;
  transform: scale(1.3) !important;
}

/* ==========================================================
    12. AVAILABLE HOMES OVERVIEW STYLING 
   ========================================================== */
div.card-header-flex {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 15px !important;
}
h2#single-street {
  margin-bottom: 0 !important;
}
div#single-home-row-2 h4,
h4#single-status {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

h2.kbcg-price-tag {
  color: var(--brand-primary) !important;
  font-weight: 900 !important;
  font-size: 34px !important;
  margin-top: 0 !important;
  text-align: right !important;
}
hr.kbcg-divider {
  border: none !important;
  border-top: 1px solid #aaaaaa !important;
  opacity: 1 !important;
  margin: 15px 0 !important;
}
span.kbcg-red-stat {
  color: var(--brand-primary) !important;
  font-weight: 800 !important;
  font-size: 18px !important;
}

div#single-home-row-3 {
  width: 100% !important;
  display: block !important;
}

div.card-links-row {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: 20px !important;
}
div.card-links-row h4 {
  margin-bottom: 0 !important;
}

@media screen and (max-width: 980px) {
  div.card-header-flex {
    flex-direction: column !important;
  }
  h2.kbcg-price-tag {
    width: 100% !important;
    text-align: left !important;
    border-top: 1px solid #aaaaaa !important;
    opacity: 1 !important;
    margin-top: 15px !important;
    padding-top: 15px !important;
  }
  div.card-links-row {
    flex-direction: column !important;
    gap: 15px !important;
  }
  h4#plan {
    border-top: 1px solid #aaaaaa !important;
    opacity: 1 !important;
    padding-top: 15px !important;
  }
}

.kbcg-mobile-badge-divider {
  display: none !important;
}
@media (max-width: 767px) {
  .kbcg-mobile-badge-divider {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ==========================================================
    13. SCHOOL CARD & COMMUNITY CARD UI
   ========================================================== */
.single-community #single-home-row-1 {
  background: transparent !important;
  padding: 0 !important;
}

#school-info-card,
.kbcg-community-card {
  background-color: #ffffff !important;
  padding: 30px 40px !important;
  border-radius: 8px !important;
  border: 1px solid #eaeaea !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important;
  max-width: 998px !important;
  margin: 30px auto !important;
  display: block !important;
  box-sizing: border-box !important;
  clear: both !important;
}

#school-info-card h3.school-header,
.kbcg-community-card h3,
.kbcg-community-card h2,
.kbcg-card-header {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #222 !important;
  margin: 0 0 20px 0 !important;
  padding: 10px 0 15px 0 !important;
  border-bottom: 1px solid #eaeaea !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

.school-icon-svg,
.kbcg-card-icon {
  width: 24px !important;
  height: 24px !important;
  fill: var(--brand-primary) !important;
  flex-shrink: 0;
}

#school-info-card ul#dynamic-school-list,
.kbcg-community-card ul.kbcg-card-list {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#school-info-card ul#dynamic-school-list li,
.kbcg-community-card ul.kbcg-card-list li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 16px !important;
  padding: 14px 20px !important;
  margin: 0 !important;
  border-radius: 6px !important;
  line-height: 1.4 !important;
  border: none !important;
  background: transparent !important;
}

#school-info-card ul#dynamic-school-list li:nth-child(even),
.kbcg-community-card ul.kbcg-card-list li:nth-child(even) {
  background-color: #f4f4f4 !important;
}

#school-info-card ul#dynamic-school-list li strong,
.kbcg-community-card ul.kbcg-card-list li strong {
  color: #555 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
  min-width: 150px !important;
  margin-top: 0 !important;
}

#school-info-card .kbcg-red-stat,
.kbcg-community-card .kbcg-red-stat,
#school-info-card .fr-red-stat,
.kbcg-community-card .fr-red-stat {
  font-weight: 800 !important;
  color: var(--brand-primary) !important;
  text-align: right !important;
  font-size: 18px !important;
}

@media screen and (max-width: 980px) {
  #school-info-card,
  .kbcg-community-card {
    padding: 25px 20px !important;
  }

  #school-info-card ul#dynamic-school-list li,
  .kbcg-community-card ul.kbcg-card-list li {
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 15px !important;
    flex-wrap: nowrap;
  }

  #school-info-card ul#dynamic-school-list li strong,
  .kbcg-community-card ul.kbcg-card-list li strong {
    margin-bottom: 5px !important;
    text-align: center !important;
    width: 100% !important;
  }

  #school-info-card .kbcg-red-stat,
  .kbcg-community-card .kbcg-red-stat {
    text-align: center !important;
    width: 100% !important;
  }
}

/* ==========================================================
   14. DYNAMIC BADGES
========================================================== */
.kbcg-status-badge {
  position: absolute;
  top: 30px;
  right: -70px;
  width: 250px;
  text-align: center;
  padding: 6px 0 6px 15px;
  color: #ffffff;
  font-weight: 900;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  transform: rotate(45deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 10;
}
.badge-sold-out {
  background-color: #000000;
}
.badge-coming-soon {
  background-color: #1e73be;
}
.badge-grand-opening {
  background-color: var(--brand-primary);
}

.kbcg-image-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 10 !important;
  padding: 6px 16px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(3px) !important;
}
.kbcg-badge-red {
  background-color: rgba(255, 207, 201, 0.85) !important;
  color: #a61b00 !important;
}
.kbcg-badge-gold {
  background-color: rgba(255, 229, 160, 0.85) !important;
  color: #8a6500 !important;
}
.kbcg-badge-green {
  background-color: rgba(212, 237, 188, 0.85) !important;
  color: #2f6600 !important;
}
.kbcg-badge-black {
  background-color: rgba(232, 234, 237, 0.85) !important;
  color: #333333 !important;
}

/* Status Pill/Dot */
.kbcg-status-pill {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background-color: #f0f0f0 !important;
  color: #333 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  letter-spacing: 0.5px !important;
}
.kbcg-status-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}
.kbcg-dot-green {
  background-color: #28a745 !important;
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.4) !important;
}
.kbcg-dot-yellow {
  background-color: #f1c40f !important;
  box-shadow: 0 0 5px rgba(241, 196, 15, 0.4) !important;
}
.kbcg-dot-red {
  background-color: var(--brand-primary) !important;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
}
.kbcg-dot-gray {
  background-color: #242323 !important;
}

/* ==========================================================
    15. ARCHIVE HOMES CARD STYLING (V7 - EXPANDED LUXURY)
   ========================================================== */
.kbcg-archive-card-content {
  padding: 35px 30px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

.kbcg-price-row {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 15px !important;
  margin-bottom: 5px !important;
}
.kbcg-big-price {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--brand-primary) !important;
  line-height: 1 !important;
}

body .kbcg-archive-card-content .address h2 a span,
body .kbcg-archive-card-content .address p.kbcg-city-state {
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #666666 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  display: block !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
}

body .kbcg-archive-card-content .address h2 a span {
  font-weight: 800 !important;
  font-size: 14px !important;
  color: #666666 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  display: block !important;
  margin-top: 4px !important;
}

.kbcg-archive-card-content .address h2 span {
  font-weight: 800 !important;
  font-size: 13px !important;
  color: #777 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* ==========================================================
   THE 3-COLUMN GRID (Beefed Up 25%)
   ========================================================== */
body ul.kbcg-icon-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  padding: 25px 0 20px 0 !important;
  margin: 5px 0 !important;
  list-style: none !important;
  border-top: 1px solid #eaeaea !important;
  border-bottom: 1px solid #eaeaea !important;
}

body ul.kbcg-icon-grid li {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 45px 0 0 0 !important;
  background-size: 35px 35px !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  min-height: 45px !important;
}

body ul.kbcg-icon-grid li .kbcg-red-stat {
  font-size: 20px !important;
  color: var(--brand-primary) !important;
  font-weight: 900 !important;
  margin-bottom: 4px !important;
  line-height: 1 !important;
}

body ul.kbcg-icon-grid li .kbcg-grid-label {
  font-size: 12px !important;
  color: #555555 !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

.kbcg-meta-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  font-size: 15px !important;
  margin-bottom: 15px !important;
}

.kbcg-meta-label {
  font-weight: 800 !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  color: #222 !important;
  margin-right: 6px !important;
  letter-spacing: 0.5px !important;
}

.kbcg-dynamic-link {
  color: var(--brand-primary) !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
.kbcg-dynamic-span {
  color: var(--brand-primary) !important;
  font-weight: 700 !important;
}

.kbcg-view-details-btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 10px !important;
  box-sizing: border-box !important;
  padding: 15px !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  font-size: 15px !important;
  letter-spacing: 1.5px !important;
}

/* ==========================================================
   MONTHLY PAYMENT BANNER (LUXURY UPGRADE)
   ========================================================== */
body .mh-payment-banner-archive {
  background: linear-gradient(
    135deg,
    var(--brand-primary) 0%,
    var(--brand-primary-dark) 100%
  ) !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-align: center !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-top: -4px !important;
  transition: all 0.3s ease !important;
  font-size: 12px !important;
  padding: 12px 15px !important;
}

body .kbcg-archive-card:hover .mh-payment-banner-archive {
  background: linear-gradient(
    135deg,
    var(--brand-primary-dark) 0%,
    var(--brand-primary) 100%
  ) !important;
  color: #ffffff !important;
}

body .mh-payment-banner-archive .kbcg-pay-num {
  font-size: 1.35em !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 4px !important;
  letter-spacing: 0 !important;
}

body .mh-payment-banner-archive .kbcg-pay-arrow {
  display: inline-block !important;
  transition: transform 0.3s ease !important;
}

body .kbcg-archive-card:hover .mh-payment-banner-archive .kbcg-pay-arrow {
  transform: translateX(6px) !important;
}

@media screen and (min-width: 981px) {
  body .mh-payment-banner-archive {
    font-size: 14px !important;
    padding: 16px 20px !important;
    letter-spacing: 1.5px !important;
  }
}

/* ==========================================================
    16. MONTHLY PAYMENT BANNERS
   ========================================================== */
.mh-payment-banner-archive,
.mh-payment-banner-archive * {
  font-size: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}
@media screen and (min-width: 981px) {
  .mh-payment-banner-archive,
  .mh-payment-banner-archive * {
    font-size: 20px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.single-home-payment-banner {
  background-color: var(--brand-primary);
  color: #ffffff !important;
  text-align: center !important;
  padding: 15px !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  margin: 15px 0 5px 0 !important;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15) !important;
}
.single-home-payment-banner strong {
  font-size: 26px !important;
  font-weight: 900 !important;
  margin-left: 5px !important;
}
.single-home-payment-disclaimer {
  font-size: 11px !important;
  line-height: 1.4 !important;
  color: #777777 !important;
  margin-top: 5px !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

/* ==========================================================
    17. ARCHIVE DROPDOWNS & SIDEBAR & RECAPTCHA
   ========================================================== */
select#refine-area-homes,
select#refine-plan-homes,
select#refine-sort-homes {
  min-height: 48px !important;
  height: auto !important;
  padding: 0 15px !important;
  line-height: 48px !important;
  background-color: var(--brand-primary);
  color: #ffffff;
  border: 1px solid var(--brand-primary-dark);
  font-size: 16px;
}

.grecaptcha-badge {
  bottom: 90px !important;
  z-index: 9999 !important;
}

@media (min-width: 981px) {
  body.archive .container {
    width: 80% !important;
    max-width: 1080px !important;
  }
  body.archive #left-area,
  body.archive #content-area {
    width: 100% !important;
    float: none !important;
    position: relative !important;
    padding-right: 0 !important;
  }
  body.archive #sidebar {
    display: none !important;
  }

  #homes-top-bar,
  #plans-top-bar {
    width: 65% !important;
    margin-left: 0 !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #home-list,
  #community-list {
    display: block !important;
    width: 100% !important;
  }
  #home-list article.et_pb_post,
  #community-list article.et_pb_post {
    width: 65% !important;
    margin: 20px 0 40px 0 !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  #request-info-sidebar {
    display: block !important;
    position: absolute;
    top: 310px;
    left: 68%;
    width: 350px !important;
    background: #000000 !important;
    padding: 30px !important;
    color: #ffffff !important;
    z-index: 99 !important;
    box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.2) !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body #request-info-tab {
    display: none !important;
  }
}

@media (max-width: 980px) {
  #home-count,
  #homes-top-bar,
  #plans-top-bar {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  #home-list article.et_pb_post {
    width: 100% !important;
  }
}

.post-type-archive-plans #content-area,
.post-type-archive-homes #content-area,
.post-type-archive-community #content-area {
  width: 100% !important;
  float: none !important;
}

/* ==========================================================
   18. GRAVITY FORMS DARK MODE (Master Edition)
========================================================== */
html body .gform_validation_container,
html body .gfield_visibility_hidden {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
}

html body #request-info-box .thrive-modal {
  padding: 35px 25px 25px 25px !important;
  background: #111111 !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  position: relative !important;
}

html body .gform_wrapper .gfield_label {
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: bold !important;
  margin-bottom: 4px !important;
  display: block !important;
  text-align: left !important;
}

html body .gform_wrapper input[type="text"],
html body .gform_wrapper input[type="email"],
html body .gform_wrapper input[type="tel"],
html body .gform_wrapper textarea {
  width: 100% !important;
  max-width: 100% !important;
  padding: 12px 15px !important;
  border: 1px solid #666666 !important; /* Brighter border for crisp edges */
  border-radius: 6px !important;
  background-color: #333333 !important; /* Lighter grey so it lifts off the background */
  color: #ffffff !important;
  box-sizing: border-box !important;
  margin-bottom: 10px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  transition: all 0.3s ease !important; /* Smooth transition for focus */
}

/* Add a glowing border when the user clicks inside the box */
html body .gform_wrapper input[type="text"]:focus,
html body .gform_wrapper input[type="email"]:focus,
html body .gform_wrapper input[type="tel"]:focus,
html body .gform_wrapper textarea:focus {
  border-color: var(--brand-primary) !important;
  outline: none !important;
  background-color: #404040 !important;
}

html body .gform_wrapper ::placeholder {
  color: #bbbbbb !important; /* Brighter placeholder text */
}

html body .gform_wrapper input[type="submit"],
html body .gform_wrapper .gform_button {
  background-color: var(--brand-primary) !important;
  color: #ffffff !important;
  width: 100% !important;
  padding: 14px !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 6px !important;
  margin-top: 5px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.3s ease !important;
}

html body .gform_wrapper input[type="submit"]:hover,
html body .gform_wrapper .gform_button:hover {
  background-color: #ffffff !important;
  color: var(--brand-primary) !important;
  box-shadow: 0 0 20px var(--brand-primary) !important;
}

html body .gform_validation_errors,
html body .gform_validation_errors *,
html body .gfield_description.validation_message,
html body .gform_wrapper .gfield_error .gfield_label {
  color: #ff4d4d !important;
  font-weight: bold !important;
}

html body .gform_wrapper ul {
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ==========================================================
   18B. MODAL TAB & DESKTOP KILL-SWITCH
========================================================== */
#request-info-tab {
  display: none !important;
}

@media (max-width: 980px) {
  body #request-info-sidebar {
    display: none !important;
  }

  #request-info-tab {
    position: fixed !important;
    top: 50% !important;
    right: 0 !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 45px !important;
    height: auto !important;
    padding: 25px 0 !important;
    margin: 0 !important;
    background-color: var(--brand-primary) !important;
    color: #ffffff !important;
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px 0 0 8px !important;
    z-index: 99999 !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3) !important;
    cursor: pointer !important;
  }
}

html body #request-info-box .thrive-modal a[href^="tel"] {
  display: block !important;
  margin-bottom: 30px !important;
}
html body #request-info-box .thrive-modal-exit {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 26px !important;
  text-align: center !important;
  background-color: transparent !important;
  background-image: none !important;
  color: #888888 !important;
  border: 2px solid #888888 !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  font-weight: bold !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}
html body #request-info-box .thrive-modal-exit:hover {
  color: #ffffff !important;
  border-color: #ffffff !important;
}
html body .thrive-modal-entire.modal-visible,
html body #thrive-modal-background {
  z-index: 999999999 !important;
}

/* ==========================================================
   18C. PHONE LINKS 
========================================================== */
a.kbcg-request-phone,
#request-info-sidebar a[href^="tel"],
#request-info-box a[href^="tel"],
.thrive-modal a[href^="tel"] {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  display: block !important;
  text-align: center !important;
  margin-bottom: 15px !important;
  transition: color 0.3s ease !important;
}

a.kbcg-request-phone:hover,
#request-info-sidebar a[href^="tel"]:hover,
#request-info-box a[href^="tel"]:hover,
.thrive-modal a[href^="tel"]:hover {
  color: var(--brand-primary) !important;
}

/* ==========================================================
   19. MOBILE HEADER: THE AGENCY STACK (Logos Centered)
   ========================================================== */
@media (max-width: 980px) {
  header#header .et_menu_container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    padding-top: 20px !important;
  }
  #logo {
    order: 1 !important;
    margin: 0 0 20px 0 !important;
    max-width: 220px !important;
    width: auto !important;
    float: none !important;
  }
  #logo-2 {
    order: 2 !important;
    margin: 0 0 15px 0 !important;
    max-width: 180px !important;
    width: auto !important;
    float: none !important;
  }
  #header-mid {
    order: 3 !important;
    width: 100% !important;
  }
  .mobile_menu_bar {
    position: absolute !important;
    top: 30px !important;
    right: 20px !important;
    margin: 0 !important;
    z-index: 100 !important;
  }
}

/* ==========================================================
   20. INTERACTIVE PLAT SVG 
   ========================================================== */
.plat-container {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}
.plat-image {
  display: block;
  width: 100%;
  height: auto;
}
.plat-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

/* ==========================================================
   21. ARCHIVE LAYOUT & CARD UI 
   ========================================================== */
#home-count {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  text-align: center !important;
  margin: 30px auto !important;
  font-size: 18px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
}
@media (min-width: 981px) {
  #home-count {
    justify-content: flex-start !important;
    text-align: left !important;
    margin: 20px 0 !important;
    width: 65% !important;
  }
}
#home-count span {
  background: var(--brand-primary) !important;
  color: #fff !important;
  padding: 10px 15px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  margin-right: 8px !important;
}

#homes-top-bar form {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}

.kbcg-archive-card {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid #cccccc !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 50px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}
.home-gallery img {
  width: 100% !important;
  display: block !important;
}

.kbcg-image-badge {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 10 !important;
  padding: 6px 16px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: blur(3px) !important;
}

.kbcg-archive-card-content .address h2 {
  font-size: 24px !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  font-weight: 800 !important;
}
.kbcg-archive-card-content .address h2 a {
  text-decoration: none !important;
}
.kbcg-archive-card-content .address h2 strong {
  display: block !important;
  color: #333 !important;
  margin-bottom: 4px !important;
}
.kbcg-archive-card-content .address h2 span {
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #777 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.kbcg-meta-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  font-size: 13px !important;
}

.kbcg-dynamic-link {
  color: var(--brand-primary) !important;
  text-decoration: none !important;
}
.kbcg-dynamic-span {
  color: var(--brand-primary) !important;
}

.kbcg-view-details-btn {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 25px !important;
  box-sizing: border-box !important;
  padding: 14px !important;
  text-decoration: none !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
}

.kbcg-no-results {
  margin-top: 20px !important;
}

/* ==========================================================
   22. SIDEBAR & MODAL STYLING
   ========================================================== */
.kbcg-sidebar-wrapper {
  background-color: #000000 !important;
  padding: 20px 30px 25px 30px !important;
  color: #ffffff !important;
  box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.2) !important;
  border-radius: 12px !important;
}

.kbcg-sidebar-wrapper h2,
#request-info-box h2 {
  color: #ffffff !important;
  margin-top: 0 !important;
  margin-bottom: 5px !important;
  font-size: 22px !important;
  text-transform: uppercase !important;
  text-align: center !important;
}

.kbcg-sidebar-wrapper p,
#request-info-box p {
  color: #cccccc !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

a.kbcg-request-phone,
#request-info-sidebar a[href^="tel"],
#request-info-box a[href^="tel"],
.thrive-modal a[href^="tel"] {
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 24px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
  transition: color 0.3s ease !important;
}

a.kbcg-request-phone img,
#request-info-sidebar a[href^="tel"] img,
#request-info-box a[href^="tel"] img,
.thrive-modal a[href^="tel"] img {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  display: block !important;
  object-fit: contain !important;
}

#request-info-sidebar .gform_wrapper,
#request-info-box .gform_wrapper {
  margin-top: 0 !important;
}

/* ==========================================================
   F. STATUS RIBBON (The Mathematically Perfect Centering)
========================================================== */
.home-gallery,
.et_pb_image_wrap {
  position: relative !important;
  overflow: hidden !important;
}

.ribbon-wrapper {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 160px !important;
  height: 160px !important;
  z-index: 20 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.home-ribbon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 300px !important;
  padding: 12px 0 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  text-align: center !important;
  transform: translate(-50%, -50%) rotate(45deg) translateY(-45px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.ribbon-green {
  background-color: #28a745 !important;
}
.ribbon-red {
  background-color: #cd3239 !important;
}
.home-ribbon.ribbon-yellow,
.single-home-ribbon.ribbon-yellow {
  background-color: #ffc107 !important;
  color: #000000 !important;
}
.ribbon-gray {
  background-color: #888888 !important;
}
.ribbon-teal {
  background-color: var(--brand-primary) !important;
}

/* --- G. FILTER BAR: 3-COL DESKTOP & WHITE ARROWS --- */
#homes-top-bar form {
  display: flex !important;
  gap: 15px !important;
  margin-bottom: 30px !important;
}
@media (min-width: 981px) {
  #homes-top-bar form {
    flex-wrap: nowrap !important;
  }
  #homes-top-bar form select {
    flex: 1 1 33% !important;
    min-width: 0 !important;
  }
}

select#refine-area-homes,
select#refine-plan-homes,
select#refine-sort-homes {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: right 15px center !important;
  padding-right: 40px !important;
}

.card-top-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 40px !important;
}
@media (max-width: 980px) {
  .card-top-row {
    flex-direction: column !important;
  }
}

/* ==========================================================
   JUMBO HERO RIBBON (For Single Homes Only)
========================================================== */
.single-ribbon-wrapper {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 250px !important;
  height: 250px !important;
  z-index: 20 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.single-home-ribbon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 450px !important;
  padding: 16px 0 !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  text-align: center !important;
  transform: translate(-50%, -50%) rotate(45deg) translateY(-70px) !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4) !important;
}

/* ==========================================================
   SINGLE PLAN OVERRIDES
============================================================= */
#kbcg-unified-card {
  background: #f8f8f8 !important;
  padding: 40px !important;
  border-radius: 8px !important;
  border: 1px solid #eaeaea !important;
  margin: 30px 0 !important;
}
.card-top-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 40px !important;
}
.card-col-specs {
  flex: 0 0 250px !important;
}
.card-col-image {
  flex: 1 !important;
  text-align: center !important;
}
.click-to-view-label {
  font-size: 13px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  color: var(--brand-primary) !important;
  margin-top: 15px !important;
}

/* ==========================================================
   AGENCY UPGRADES & DIVI OVERRIDES (SINGLE PAGE FIXES)
============================================================= */
#main-content .container > h1:first-of-type,
h1.main_title {
  display: none !important;
}

.et_pb_post_title#home-title {
  background-color: var(--brand-primary) !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
.et_pb_post_title#home-title h1 {
  color: #ffffff !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 15px 10px !important;
  text-align: center !important;
  display: block !important;
}

#home-title > iframe,
#plan-tour > iframe,
.fluid-width-video-wrapper,
#home-title .fluid-width-video-wrapper iframe {
  bottom: 0 !important;
  margin-bottom: 0 !important;
}
#home-title .et_pb_title_featured_container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0 !important;
}

html body .gform_wrapper .gform_footer input[type="submit"],
html body .gform_wrapper .gform_footer button.gform_button {
  background-color: var(--brand-primary) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 15px 25px !important;
  width: 100% !important;
  height: auto !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  font-weight: bold !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  font-size: 16px !important;
  -webkit-appearance: none !important;
  margin-top: 10px !important;
}
html body .gform_wrapper .gform_footer input[type="submit"]:hover {
  background-color: #333333 !important;
}

@media screen and (max-width: 980px) {
  .card-top-row {
    flex-direction: column !important;
  }
  .card-col-specs {
    flex: auto !important;
    width: 100% !important;
  }

  #single-home-hero .et_pb_row:first-child {
    width: 90% !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #home-title > iframe,
  #plan-tour > iframe,
  .fluid-width-video-wrapper,
  #home-title .fluid-width-video-wrapper iframe {
    bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  #home-title .et_pb_title_featured_container {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0 !important;
  }

  #homes-refine {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    margin-bottom: 25px;
  }

  #homes-refine select {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* ==========================================================
    23. GLOBAL BRAND BUTTONS (.btn-brand)
   ========================================================== */
.btn-brand {
  display: inline-block !important;
  background-color: var(--brand-primary) !important;
  color: #ffffff !important;
  padding: 14px 30px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  border: 2px solid var(--brand-primary) !important;
  transition: all 0.4s ease-in-out !important;
  text-align: center !important;
  cursor: pointer !important;
}

.btn-brand:hover {
  background-color: #ffffff !important;
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.btn-brand.full-width {
  display: block !important;
  width: 100% !important;
}

/* ==========================================================
    16B. GLOBAL BRAND BUTTONS (Light Version for Dark Backgrounds)
   ========================================================== */
.btn-brand-alt {
  display: inline-block !important;
  background-color: #ffffff !important;
  color: var(--brand-primary) !important;
  padding: 14px 30px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  border: 2px solid #ffffff !important;
  transition: all 0.4s ease-in-out !important;
  text-align: center !important;
  cursor: pointer !important;
}

.btn-brand-alt:hover {
  background-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================
   24. FULL-IMAGE CATEGORY CARDS (#mid-blocks) - HAVYN POLISH
   ========================================================== */
#mid-blocks .et_pb_row {
  width: 95% !important;
  max-width: 1600px !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 20px !important;
  justify-content: center !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#mid-blocks .et_pb_column {
  flex: 1 1 0 !important;
  margin: 0 !important;
  position: relative !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  transition: box-shadow 0.6s ease !important;
  min-height: 320px !important;
}

#mid-blocks .et_pb_column::before {
  content: "";
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform 0.8s ease !important;
  z-index: 0 !important;
}

#mid-blocks .et_pb_column:hover::before {
  transform: scale(1.04) !important;
}

#mid-blocks .et_pb_column::after {
  content: "";
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5) !important;
  transition: background 0.6s ease !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

#mid-blocks .et_pb_column:hover::after {
  background: rgba(0, 0, 0, 0.25) !important;
}

#mid-blocks .et_pb_module {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

#mid-blocks .et_pb_module h4,
#mid-blocks .et_pb_module h4 a {
  font-family: "Oswald", "Lato", sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-shadow: 0px 4px 15px rgba(0, 0, 0, 0.6) !important;
  text-decoration: none !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

@media screen and (max-width: 980px) {
  #mid-blocks .et_pb_row {
    flex-wrap: wrap !important;
  }
  #mid-blocks .et_pb_column {
    flex: 1 1 calc(50% - 20px) !important;
    min-height: 250px !important;
  }
}

@media screen and (max-width: 767px) {
  #mid-blocks .et_pb_column {
    flex: 1 1 100% !important;
  }
}

/* ==========================================================
   25. MOBILE MASTER STACK (REFINED ALIGNMENT & BOXING)
   ========================================================== */
@media (max-width: 980px) {
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  #single-home-sub-menu {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  #single-home-sub-menu ul {
    flex-direction: column !important;
    padding: 0 !important;
  }
  #single-home-sub-menu li {
    width: 100% !important;
    justify-content: center !important;
    padding: 0 !important;
    display: block !important;
  }

  #single-home-sub-menu a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 15px 20px !important;
    text-align: center !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  #single-home-sub-menu li:last-child a {
    border-bottom: none !important;
  }

  #single-home-sub-menu a:hover {
    background-color: transparent !important;
    color: #ffffff !important;
    letter-spacing: 1px !important;
  }

  #single-home-sub-menu li::before,
  #single-home-sub-menu li::after {
    display: none !important;
  }

  #school-info-card,
  .kbcg-community-card {
    width: 94% !important;
    max-width: 94% !important;
    margin: 20px auto !important;
    background-color: #f8f8f8 !important;
    border: 1px solid #dcdcdc !important;
    box-shadow: none !important;
    border-radius: 8px !important;
  }

  #single-home-row-1,
  #kbcg-unified-card,
  .et_pb_row:has(.plan-gallery-grid),
  .plan-gallery-grid {
    width: 94% !important;
    max-width: 94% !important;
    margin: 5px auto 15px auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  body
    .plan-gallery-grid
    .et_pb_gallery_item:nth-of-type(4)
    .et_pb_gallery_image::after,
  body
    .plan-gallery-grid
    .et_pb_gallery_item:nth-of-type(20)
    .et_pb_gallery_image::after {
    content: "+ VIEW PHOTOS" !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--brand-primary) !important;
  }
}

/* ==========================================================
   26. GLOBAL SMART VIDEO TESTIMONIALS 
   ========================================================== */
.kbcg-smart-yt {
  position: relative;
  cursor: pointer;
  display: block;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  background: #000;
}
.kbcg-smart-yt img {
  width: 100%;
  display: block;
  transition: opacity 0.3s ease;
}
.kbcg-smart-yt:hover img {
  opacity: 0.85;
}
.kbcg-yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65px;
  height: 65px;
  background: var(--brand-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.kbcg-smart-yt:hover .kbcg-yt-play {
  background: #e52d27;
  transform: translate(-50%, -50%) scale(1.1);
}
.kbcg-yt-play::after {
  content: "";
  border-style: solid;
  border-width: 12px 0 12px 18px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}

/* ==========================================================
   27. KBCG PREMIUM GALLERY CARDS (THE TOP-OF-FUNNEL GRID)
   ========================================================== */
.kbcg-gallery-card {
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
  cursor: pointer !important;
}

.kbcg-gallery-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.kbcg-gallery-card .et_pb_image_wrap {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3/2 !important;
  overflow: hidden !important;
}

.kbcg-gallery-card.et_pb_image {
  margin: 0 !important;
  padding: 0 !important;
}

.kbcg-gallery-card .et_pb_image_wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.kbcg-gallery-card .et_pb_image_wrap::before {
  content: "" !important;
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--brand-primary) !important;
  opacity: 0;
  transition: opacity 0.3s ease-in-out !important;
  z-index: 10;
}

.kbcg-gallery-card:hover .et_pb_image_wrap::before {
  opacity: 0.85 !important;
}

.kbcg-gallery-card .et_pb_image_wrap::after {
  content: "VIEW THIS HOME" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -40%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  border: 1px solid #ffffff !important;
  padding: 12px 20px !important;
  border-radius: 4px !important;
  opacity: 0;
  transition: all 0.3s ease-in-out !important;
  z-index: 11;
  white-space: nowrap !important;
}

.kbcg-gallery-card:hover .et_pb_image_wrap::after {
  opacity: 1 !important;
  transform: translate(-50%, -50%) !important;
}

.kbcg-gallery-card.kbcg-has-video::before,
.kbcg-gallery-card.kbcg-has-3d::after,
.kbcg-gallery-card.kbcg-has-both::before,
.kbcg-gallery-card.kbcg-has-both::after {
  position: absolute !important;
  top: 15px !important;
  background: rgba(0, 0, 0, 0.7) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  z-index: 15 !important;
  pointer-events: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

.kbcg-gallery-card.kbcg-has-video::before {
  content: "▶ VIDEO" !important;
  right: 15px !important;
}
.kbcg-gallery-card.kbcg-has-3d::after {
  content: "3D TOUR" !important;
  right: 15px !important;
}
.kbcg-gallery-card.kbcg-has-both::before {
  content: "▶ VIDEO" !important;
  right: 105px !important;
}
.kbcg-gallery-card.kbcg-has-both::after {
  content: "3D TOUR" !important;
  right: 15px !important;
}

/* ==========================================================
   28. KBCG SMART TRIM GALLERY (SINGLE HOME DASHBOARD)
   ========================================================== */
.kbcg-smart-gallery .et_pb_gallery_items {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 10px !important;
  padding: 0 !important;
}

@media (max-width: 767px) {
  .kbcg-smart-gallery .et_pb_gallery_items {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.kbcg-smart-gallery .et_pb_gallery_item:nth-child(n + 5) {
  display: none !important;
}

.kbcg-smart-gallery .et_pb_gallery_item {
  margin: 0 !important;
  width: 100% !important;
}

.kbcg-gallery-more-overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: color-mix(
    in srgb,
    var(--brand-primary) 85%,
    transparent
  ) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 1.5px !important;
  text-align: center !important;
  z-index: 10 !important;
  pointer-events: none !important;
  transition: background 0.3s ease !important;
}

.kbcg-smart-gallery .et_pb_gallery_item:hover .kbcg-gallery-more-overlay {
  background: color-mix(
    in srgb,
    var(--brand-primary-dark) 85%,
    transparent
  ) !important;
}

.kbcg-smart-gallery .et_overlay {
  background-color: rgba(255, 255, 255, 0.75) !important;
}
.kbcg-smart-gallery .et_overlay::before {
  color: var(--brand-primary) !important;
}

.kbcg-smart-gallery .et_pb_gallery_item:nth-child(4) .et_overlay {
  display: none !important;
}

/* ==========================================================
   GLOBAL LIGHTBOX DISCLAIMER (Anti-Collision Update)
   ========================================================== */
.mfp-bottom-bar {
  display: block !important;
  margin-top: 5px !important;
}

.mfp-bottom-bar::after {
  content: "Disclaimer: Photography and renderings may depict optional features, custom modifications, or discontinued selections not included in standard offerings. Please consult with a representative for current availability and specific details." !important;
  display: block !important;
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  letter-spacing: 0.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-align: left !important;
  padding-right: 60px !important;
  margin-top: 5px !important;
}

.mfp-title {
  display: none !important;
}

/* ==========================================================
   29. KBCG SMART MATTERPORT FACADE (IN-PLACE LOAD + CUBE ICON)
   ========================================================== */
.kbcg-smart-3d {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer !important;
  background: #000 !important;
  margin-bottom: 20px !important;
}

.kbcg-smart-3d img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.7;
  transition: opacity 0.3s ease !important;
}

.kbcg-smart-3d:hover img {
  opacity: 0.5 !important;
}

.kbcg-3d-btn {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: var(--brand-primary) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  padding: 15px 25px !important;
  border-radius: 50px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  z-index: 10 !important;
  white-space: nowrap !important;
}

.kbcg-3d-btn::before {
  content: "" !important;
  display: block !important;
  width: 22px;
  height: 22px;
  background-color: #ffffff;

  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>')
    no-repeat center !important;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>')
    no-repeat center !important;

  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  transition: background-color 0.3s ease !important;
}

.kbcg-smart-3d:hover .kbcg-3d-btn {
  background: #ffffff !important;
  color: var(--brand-primary) !important;
  transform: translate(-50%, -50%) scale(1.05) !important;
}

.kbcg-smart-3d:hover .kbcg-3d-btn::before {
  background-color: var(--brand-primary) !important;
}

/* ==========================================================
   30. KBCG MEDIA DASHBOARD FINISHING 
   ========================================================== */
.kbcg-media-container {
  background-color: #ffffff !important;
  background-image: none !important;
  width: 85% !important;
  max-width: 1200px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  margin: 40px auto 100px auto !important;
  border: 1px solid #e0e0e0 !important;
  border-left: 8px solid var(--brand-primary) !important;
  padding: 0 !important;
}

.kbcg-media-title {
  background-color: var(--brand-primary) !important;
  padding: 20px 30px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  margin: 0 0 20px 0 !important;
  box-sizing: border-box !important;
}

.kbcg-media-title h2 {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.kbcg-media-title p {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  text-align: left !important;
}

.kbcg-media-container .et_pb_row:not(.kbcg-media-title) {
  width: 94% !important;
  max-width: 94% !important;
  padding: 5px 0 15px 0 !important;
}

.kbcg-media-container .et_pb_gallery_items {
  padding: 0 !important;
}

@media (min-width: 768px) {
  .kbcg-mobile-break {
    display: none !important;
  }
}
@media (max-width: 767px) {
  .kbcg-mobile-break {
    display: block !important;
    content: "";
    margin-top: 2px;
  }
}

/* ==========================================================
   31. KBCG GLOBAL DASHBOARD BUTTONS
   ========================================================== */
.kbcg-card-btn .et_pb_button {
  background-color: transparent !important;
  color: var(--brand-primary) !important;
  border: 2px solid var(--brand-primary) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  padding: 12px 30px !important;
  border-radius: 4px !important;
  transition: all 0.3s ease-in-out !important;
  text-align: center !important;
  display: inline-block !important;
}

.kbcg-card-btn .et_pb_button:hover {
  background-color: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(141, 51, 44, 0.3) !important;
}

.kbcg-card-btn {
  text-align: center !important;
  margin-top: 10px !important;
  margin-bottom: 20px !important;
}

.kbcg-card-btn.et_pb_module {
  text-align: center !important;
  width: 100% !important;
}

/* ==========================================================
   32. KBCG HERO GRID TITLES
   ========================================================== */
.kbcg-hero-title {
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: var(--brand-primary) !important;
  margin-top: 15px !important;
  margin-bottom: 40px !important;
}

/* ==========================================================
   UNIVERSAL INTERACTIVE IMAGE HOVER (Plats & Floorplans)
   ========================================================== */
.kbcg-interactive-img-link {
  display: inline-block !important;
  position: relative !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
}

.kbcg-interactive-img-link img {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
  border: 2px solid transparent !important;
  transition: all 0.3s ease !important;
  margin: 0 auto !important;
}

.kbcg-interactive-img-link .click-to-view-label {
  color: var(--brand-primary) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  margin-top: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  opacity: 0.8 !important;
  transition: all 0.3s ease !important;
}

.kbcg-interactive-img-link:hover {
  transform: translateY(-5px) !important;
}

.kbcg-interactive-img-link:hover img {
  transform: scale(1.02) !important;
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15) !important;
  border-color: var(--brand-primary) !important;
}

.kbcg-interactive-img-link:hover .click-to-view-label {
  opacity: 1 !important;
  color: #000000 !important;
  letter-spacing: 1.5px !important;
}

/* ==========================================================
   DROPDOWN MENU ZEBRA STRIPES (BULLETPROOF DIVI FIX)
   ========================================================== */
#top-menu .sub-menu {
  padding: 0 !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  width: 250px !important;
}
#top-menu .sub-menu li {
  border-bottom: 1px solid #ebebeb !important;
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
}
#top-menu .sub-menu li:last-child {
  border-bottom: none !important;
}
#top-menu .sub-menu li a {
  padding: 14px 20px !important;
  transition: background 0.2s ease !important;
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

#top-menu .sub-menu li:nth-child(even) {
  background-color: #fafafa !important;
}
#top-menu .sub-menu li:hover {
  background-color: #f1f1f1 !important;
}

/* ==========================================================
   SINGLE POST TITLE (RED GABLE STYLE)
   ========================================================== */
.kbcg-single-title,
.kbcg-single-title.et_pb_post_title {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  overflow: visible !important;
}

.kbcg-single-title .et_pb_title_featured_container img {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-bottom: none !important;
  border-radius: 4px 4px 0 0 !important;
  width: 100% !important;
  display: block !important;
  margin-bottom: 0 !important;
}

.kbcg-single-title .et_pb_title_container {
  background-color: var(--brand-primary) !important;
  padding: 20px !important;
  text-align: center !important;
  border-radius: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
}

.kbcg-single-title h1.entry-title {
  font-size: 36px !important;
  line-height: 1.2em !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
}

/* ==========================================================
   KBCG UNIVERSAL PNG ICONS (MASTER ENGINE)
   ========================================================== */
ul#single-specs li::before,
ul#single-specs-list li::before,
ul.kbcg-icon-grid li::before,
ul.plan-info-icons li::before {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

ul.kbcg-icon-grid li,
ul#single-specs li,
ul#single-specs-list li,
ul.plan-info-icons li {
  padding-left: 35px !important;
  background-size: 24px 24px !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  position: relative;
}

ul.kbcg-icon-grid li.beds,
ul#single-specs li.beds,
ul#single-specs-list li.beds,
ul.plan-info-icons li.beds {
  background-image: url("/wp-content/uploads/icon-beds.png") !important;
}
ul.kbcg-icon-grid li.baths,
ul#single-specs li.baths,
ul#single-specs-list li.baths,
ul.plan-info-icons li.baths {
  background-image: url("/wp-content/uploads/icon-baths.png") !important;
}
ul.kbcg-icon-grid li.sqft,
ul#single-specs li.sqft,
ul#single-specs-list li.sqft,
ul.plan-info-icons li.sqft {
  background-image: url("/wp-content/uploads/icon-plans.png") !important;
}
ul#single-specs li.garage,
ul#single-specs-list li.garage {
  background-image: url("/wp-content/uploads/icon-garage.png") !important;
}
ul#single-specs li.type,
ul#single-specs-list li.type {
  background-image: url("/wp-content/uploads/icon-type.png") !important;
}

/* ==========================================================
   GLOBAL FIXES
   ========================================================== */
html,
body {
  overflow-x: hidden !important;
  width: 100%;
}
/* =======================================================
   SINGLE HOMES: MOBILE LAYOUT FIXES
   ======================================================= */
@media screen and (max-width: 980px) {
  .kbcg-sh-header {
    flex-direction: column !important;
    gap: 15px !important;
  }
  .kbcg-sh-price {
    border-top: 1px solid #dcdcdc !important;
    width: 100% !important;
    padding-top: 15px !important;
  }

  .kbcg-sh-status-wrap {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .kbcg-sh-pill-divider {
    display: block !important;
  }
  .kbcg-single-marketing-pill {
    margin-top: 0 !important;
  }

  .kbcg-sh-footer {
    flex-direction: column !important;
    gap: 20px !important;
  }
}

#school-info-card ul#dynamic-school-list li:nth-child(even),
.kbcg-community-card ul.kbcg-card-list li:nth-child(even) {
  background-color: #e8e8e8 !important;
}

/* =======================================================
   MOBILE LAYOUT: SPECS & SUB-MENU RESTORATION
   ======================================================= */
@media screen and (min-width: 981px) {
  #single-home-sub-menu li:has(.external-inventory-link) {
    margin-left: 0 !important;
    padding-left: 10px !important;
  }
}

@media screen and (max-width: 980px) {
  body ul#single-specs li,
  body ul#single-specs-list li {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  #single-home-sub-menu ul {
    flex-direction: column !important;
    padding: 0 !important;
  }

  #single-home-sub-menu li {
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  }

  #single-home-sub-menu a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 15px 20px !important;
    border-radius: 0 !important;
    border-bottom: none !important;
  }

  #single-home-sub-menu li:last-child {
    border-bottom: none !important;
  }

  #single-home-sub-menu li::before,
  #single-home-sub-menu li::after {
    display: none !important;
  }
}

/* =======================================================
   MOBILE SVG LOGO FIX
   ======================================================= */
@media screen and (max-width: 980px) {
  #logo,
  .et_mobile_menu_logo img {
    width: 100% !important;
    min-width: 180px !important;
    max-width: 220px !important;
    height: auto !important;
    display: block !important;
  }
}

/* ==========================================================
   33. AWARDS & LOGO ROW (AUTO-FLOW FLEXBOX)
   ========================================================== */
#main-content .kbcg-awards-row,
.kbcg-awards-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 40px !important;
  width: 95% !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 60px 0 !important;
}

.kbcg-awards-row::before,
.kbcg-awards-row::after {
  display: none !important;
  content: none !important;
}

.kbcg-awards-row .et_pb_column {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  display: block !important;
}

.kbcg-awards-row img {
  display: block !important;
  margin: 0 auto !important;
  width: auto !important;
  height: 110px !important;
  object-fit: contain !important;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.kbcg-awards-row img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@media screen and (max-width: 980px) {
  #main-content .kbcg-awards-row,
  .kbcg-awards-row {
    gap: 30px !important;
    padding: 40px 0 !important;
  }
  .kbcg-awards-row img {
    height: 80px !important;
  }
}

@media screen and (max-width: 480px) {
  #main-content .kbcg-awards-row,
  .kbcg-awards-row {
    gap: 20px !important;
  }
  .kbcg-awards-row img {
    height: 60px !important;
  }
}

/* ==========================================================
   34. STATIC HERO CONTENT OVER BACKGROUND SLIDER (GHOST FIX)
   ========================================================== */
.kbcg-background-slider-section {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 700px !important;
  z-index: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

.kbcg-background-slider-section .et_pb_fullwidth_slider,
.kbcg-background-slider-section .et_pb_slides,
.kbcg-background-slider-section .et_pb_slide {
  height: 100% !important;
  min-height: 700px !important;
}

.kbcg-static-hero-content {
  position: relative !important;
  z-index: 10 !important;
  min-height: 700px !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  margin: 0 !important;
}

.kbcg-background-slider-section .et-pb-controllers {
  bottom: 30px !important;
  z-index: 20 !important;
}

.kbcg-background-slider-section .et-pb-controllers a {
  background: rgba(255, 255, 255, 0.4) !important;
  width: 35px !important;
  height: 4px !important;
  border-radius: 2px !important;
  margin: 0 6px !important;
  transition: all 0.4s ease !important;
}

.kbcg-background-slider-section .et-pb-controllers a.et-pb-active-control {
  background: var(--brand-primary) !important;
  width: 55px !important;
}

@media screen and (max-width: 980px) {
  .kbcg-background-slider-section,
  .kbcg-background-slider-section .et_pb_fullwidth_slider,
  .kbcg-background-slider-section .et_pb_slide,
  .kbcg-static-hero-content {
    height: 500px !important;
    min-height: 500px !important;
  }
}

.kbcg-background-slider-section .et_pb_slide::after {
  content: "";
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.5) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.kbcg-background-slider-section .et_pb_slide {
  position: relative !important;
}

/* ==========================================================
   35. MOBILE HEADER CLEANUP (RESET & STACK)
   ========================================================== */
@media screen and (max-width: 980px) {
  #page-container {
    display: block !important;
    padding-top: 0 !important;
  }

  #top-header {
    position: relative !important;
    padding: 10px 0 !important;
    background-color: #fff !important;
  }

  #top-header .container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #et-info-phone {
    float: none !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: var(--brand-primary) !important;
  }

  #main-header {
    position: relative !important;
    top: 0 !important;
    padding: 15px 0 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
  }

  #main-header .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
  }

  #logo {
    position: relative !important;
    display: block !important;
    margin: 0 auto 15px auto !important;
    max-width: 140px !important;
    transition: none !important;
  }

  #et-top-navigation {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
  }

  #et_mobile_nav_menu {
    float: none !important;
    margin: 0 auto !important;
  }

  .mobile_menu_bar::before {
    position: relative !important;
    top: 0 !important;
    color: var(--brand-primary) !important;
  }
}

/* ==========================================================
   NEW BRAND BUTTON (.kbcg-btn-premium)
   ========================================================== */
.et_pb_button.kbcg-btn-premium,
.kbcg-btn-premium {
  background-color: var(--brand-primary) !important;
  color: #ffffff !important;
  border: 2px solid var(--brand-primary) !important;
  padding: 14px 32px !important;
  font-family: "Oswald", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  border-radius: 4px !important;
  transition: all 0.4s ease !important;
  display: inline-block !important;
  text-align: center !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.et_pb_button.kbcg-btn-premium:hover,
.kbcg-btn-premium:hover {
  background-color: transparent !important;
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  letter-spacing: 3px !important;
}

.et_pb_button.kbcg-btn-premium::after {
  display: none !important;
}

/* ==========================================================
   ALT BRAND BUTTON (.kbcg-btn-premium-alt) - For Dark Backgrounds
   ========================================================== */

.et_pb_button.kbcg-btn-premium-alt,
.kbcg-btn-premium-alt {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  padding: 14px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  border-radius: 4px !important;
  transition: all 0.4s ease !important; /* The smooth animation */
  display: inline-block !important;
  text-align: center !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

/* Hover State - Flips to Solid White, Secondary Text */
.et_pb_button.kbcg-btn-premium-alt:hover,
.kbcg-btn-premium-alt:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: var(--kbcg-brand-secondary) !important;
  letter-spacing: 3px !important;
}

/* Remove Divi's default "icon on hover" */
.et_pb_button.kbcg-btn-premium-alt::after {
  display: none !important;
}

/* ==========================================================
   THE GENTLE NUDGE ANIMATION
   ========================================================== */
.open-form-btn,
.gentle-nudge-button {
  display: inline-block !important;
  transform-origin: center !important;
  animation: nudge 6s infinite;

  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  perspective: 1000px !important;
  z-index: 999999 !important;
}
.kbcg-sticky-parent {
  z-index: 9999 !important;
  overflow: visible !important;
}

@keyframes nudge {
  0%,
  75%,
  100% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(3deg);
  }
  84% {
    transform: rotate(-3deg);
  }
  88% {
    transform: rotate(2deg);
  }
  92% {
    transform: rotate(-2deg);
  }
  96% {
    transform: rotate(0deg);
  }
}

body .et_pb_module.gentle-nudge-button,
body .et_pb_module.open-form-btn {
  position: fixed !important;
  z-index: 999999 !important;
}

.kbcg-sticky-parent {
  position: relative !important;
  z-index: 500 !important;
}

.et_pb_section {
  z-index: 1;
}

/* ==========================================================
   36. FULLWIDTH POST TITLE (50% BIGGER & CENTERED FIX)
   ========================================================== */
.et_pb_fullwidth_post_title.kbcg-tall-post-title {
  padding-top: 220px !important;
  padding-bottom: 220px !important;
  text-align: center !important;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.35) !important;
}

.kbcg-tall-post-title .et_pb_title_container {
  padding: 0 !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.kbcg-tall-post-title h1.entry-title {
  display: block !important;
  text-align: center !important;
  color: #ffffff !important;
  font-size: 76px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 6px !important;
  text-shadow: 2px 4px 15px rgba(0, 0, 0, 0.6) !important;
  margin: 0 auto !important;
  padding-bottom: 25px !important;
  position: relative !important;
}

.kbcg-tall-post-title h1.entry-title::after {
  content: "";
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80px !important;
  height: 3px !important;
  background-color: var(--brand-primary) !important;
}

/* ==========================================================
   FLUID RESPONSIVE HERO TITLES (GALLERY & PAGES)
   ========================================================== */
.et_pb_fullwidth_post_title h1.entry-title,
.et_pb_fullwidth_post_title .title,
.kbcg-tall-post-title h1.entry-title {
  font-size: clamp(36px, 6vw, 64px) !important; /* The magic scaling math! */
  line-height: 1.2 !important;
  letter-spacing: 4px !important; /* Tucked in slightly from the massive 6px */
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
}

/* ==========================================================
   37. THE MOBILE HERO "SHRINK & SYNC" FIX
   ========================================================== */
@media screen and (max-width: 980px) {
  .kbcg-background-slider-section,
  .kbcg-background-slider-section .et_pb_fullwidth_slider,
  .kbcg-background-slider-section .et_pb_slide,
  .kbcg-static-hero-content {
    height: 550px !important;
    min-height: 550px !important;
  }

  #messaging-text {
    min-width: 0 !important;
    width: 85% !important;
    padding: 20px 15px !important;
    margin: 0 auto !important;
  }

  #messaging-text h4 {
    font-size: 16px !important;
    margin-bottom: 5px !important;
    line-height: 1.2 !important;
  }

  #messaging-text h4 strong {
    font-size: 22px !important;
  }

  #messaging-text h1 {
    font-size: 32px !important;
  }

  #messaging-text h1 strong {
    font-size: 44px !important;
    padding-bottom: 5px !important;
    margin-bottom: 5px !important;
  }

  #messaging-text .et_pb_button {
    padding: 10px 24px !important;
    font-size: 16px !important;
  }
}

/* ==========================================================
   38. THE PREMIUM "ABOUT US" REDESIGN
   ========================================================== */
.kbcg-about-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  overflow: visible !important;
  padding-top: 100px !important;
  padding-bottom: 80px !important;
}

.kbcg-about-row .et_pb_column {
  overflow: visible !important;
}

.kbcg-about-row .et_pb_text {
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 20px !important;
}

.kbcg-about-row h1,
.kbcg-about-row h2,
.kbcg-about-row h3 {
  font-size: 42px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  color: #ffffff !important;
  margin-bottom: 25px !important;
  line-height: 1.2 !important;
}

.kbcg-about-row h1::after,
.kbcg-about-row h2::after,
.kbcg-about-row h3::after {
  content: "";
  display: block;
  width: 60px !important;
  height: 3px !important;
  background-color: var(--brand-primary) !important;
  margin-top: 15px !important;
}

.kbcg-about-row p {
  font-size: 16px !important;
  line-height: 1.8em !important;
  color: rgba(255, 255, 255, 0.85) !important;
  margin-bottom: 20px !important;
}

.kbcg-about-row .et_pb_image,
.kbcg-about-row img {
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;
  border-radius: 12px !important;
}

@media screen and (max-width: 980px) {
  .kbcg-about-row {
    flex-direction: column !important;
    gap: 40px !important;
  }

  .kbcg-about-row .et_pb_column {
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .kbcg-about-row .et_pb_text {
    text-align: center !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .kbcg-about-row h1::after,
  .kbcg-about-row h2::after,
  .kbcg-about-row h3::after {
    margin: 15px auto 0 auto !important;
  }

  .kbcg-about-row .et_pb_button_wrapper {
    text-align: center !important;
  }
}

/* ==========================================================
   THE BRAND NEW HERO CARD (NO CONFLICTS)
   ========================================================== */
.kbcg-hero-card {
  padding: 30px 40px !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: fit-content !important;
  margin: 0 auto !important;
  min-width: 480px !important;
  height: auto !important;
  box-shadow: 1px 1px 12px rgba(0, 0, 0, 0.2) !important;
}

.kbcg-hero-card h4 {
  font-size: 24px !important;
  margin: 0 auto 5px auto !important;
  color: #000 !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

.kbcg-hero-card h4 strong {
  color: var(--brand-primary) !important;
  font-size: 32px !important;
}

.kbcg-hero-card h1 {
  font-size: 60px !important;
  font-weight: 700 !important;
  color: var(--brand-primary) !important;
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}

.kbcg-hero-card h1 strong {
  font-style: normal !important;
  display: block !important;
  font-size: 76px !important;
  text-transform: uppercase !important;
  color: var(--brand-primary) !important;
  font-weight: 900 !important;
  padding-bottom: 10px !important;
}

.kbcg-hero-card .et_pb_button {
  border: 2px solid transparent !important;
  box-sizing: border-box !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
}

.kbcg-hero-card .et_pb_button:hover {
  border: 2px solid var(--brand-primary) !important;
}

/* ==========================================================
   HORIZONTAL LIST (NO BULLETS)
   ========================================================== */
.kbcg-inline-list ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 25px !important;
}

.kbcg-inline-list ul li {
  list-style-type: none !important;
  margin-bottom: 0 !important;
  display: block !important;
}

/* ==========================================================
   39. PLAY BUTTON & TEXT ALIGNMENT (SINGLE MODULE FIX)
   ========================================================== */
.kbcg-play-button-wrap .et_pb_text_inner,
.kbcg-play-button-wrap p {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 15px !important;
  margin: 0 !important;
}

.kbcg-play-button-wrap img,
.kbcg-play-button-wrap a {
  margin: 0 !important;
  line-height: 0 !important;
  display: inline-block !important;
}

/* ==========================================================
   40. MOBILE PLAY BUTTON LIST FIX
   ========================================================== */
.kbcg-inline-list.kbcg-play-button-wrap ul {
  align-items: center !important;
  gap: 15px !important;
}

.kbcg-inline-list.kbcg-play-button-wrap ul li {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.kbcg-inline-list.kbcg-play-button-wrap h3 {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

.kbcg-inline-list.kbcg-play-button-wrap img {
  margin: 0 !important;
  display: block !important;
}

/* ==========================================================
   41. STICKY BUTTON CLICK FIX (THE GLASS WALL BREAKER)
   ========================================================== */
body .et_pb_module.gentle-nudge-button,
body .et_pb_module.open-form-btn {
  position: fixed !important;
  bottom: 30px !important; /* Locks to the bottom */
  right: 30px !important; /* Locks to the right */
  left: auto !important; /* Overrides Divi's bottom-left setting */
  top: auto !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

.kbcg-about-row {
  position: relative !important;
  z-index: 1 !important;
}

.et_pb_sticky_module_wrapper {
  z-index: 2147483647 !important;
  pointer-events: none;
}

.et_pb_sticky_module_wrapper .et_pb_module {
  pointer-events: auto;
}

.kbcg-article-footer {
  position: relative !important;
  z-index: 1 !important;
}

/* ==========================================================
   43. ZILLOW-STYLE MINI SLIDER (ARCHIVE CARDS)
   ========================================================== */
.kbcg-mini-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.kbcg-mini-slider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.kbcg-mini-slide {
  flex: 0 0 100%;
  width: 100%;
  display: block;
}

.kbcg-mini-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  aspect-ratio: 3/2;
}

.kbcg-mini-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.3);
  color: white;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  z-index: 20;
  opacity: 0;
  transition:
    opacity 0.2s,
    background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
}

.kbcg-mini-slider:hover .kbcg-mini-nav {
  opacity: 1;
}
.kbcg-mini-nav:hover {
  background: rgba(0, 0, 0, 0.8);
}
.kbcg-mini-prev {
  left: 10px;
}
.kbcg-mini-next {
  right: 10px;
}

.kbcg-mini-dots {
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 20;
}

.kbcg-mini-dot {
  width: 7px;
  height: 7px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition:
    background 0.2s,
    transform 0.2s;
}

.kbcg-mini-dot.active {
  background: #ffffff;
  transform: scale(1.3);
}

/* ==========================================================
   44. ZILLOW SLIDER: END-OF-SWIPE OVERLAY
   ========================================================== */
.kbcg-swipe-end-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.65) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  pointer-events: none;
}

.kbcg-swipe-end-overlay span {
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border: 2px solid #ffffff;
  padding: 10px 18px;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease !important;
}

.kbcg-mini-slide:hover .kbcg-swipe-end-overlay span {
  background-color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================
   45. FAT FOOTER HOVER EFFECTS
   ========================================================== */
.kbcg-ff-links a,
.kbcg-ff-contact-link {
  display: inline-block !important;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.kbcg-ff-links a:hover,
.kbcg-ff-contact-link:hover {
  color: var(--brand-primary) !important;
  transform: translateX(6px);
}

/* ==========================================================
   46. THE ULTIMATE FOOTER OVERRIDE (Colors, Text, YouTube)
   ========================================================== */

/* 1. Force the Main Footer Backgrounds to Primary */
#main-footer {
  background-color: var(--kbcg-brand-primary) !important;
  border-top: none !important;
}

#footer-bottom {
  background-color: color-mix(
    in srgb,
    var(--kbcg-brand-primary) 85%,
    black
  ) !important;
}

/* 2. Force All Text, Headings, Spans, and Icons to PURE WHITE (Nuclear Option) */
#main-footer,
#main-footer p,
#main-footer li,
#main-footer div,
#main-footer span,
#footer-info,
#footer-bottom p,
#footer-bottom .et-copy,
#main-footer .footer-widget h1,
#main-footer .footer-widget h2,
#main-footer .footer-widget h3,
#main-footer .footer-widget h4,
#main-footer .footer-widget h5,
#main-footer .footer-widget h6,
#main-footer .footer-widget strong,
#main-footer .footer-widget *,
#main-footer .et-pb-icon,
#footer-bottom .et-pb-icon,
#main-footer span[class*="et-pb-icon"],
#footer-bottom span[class*="et-pb-icon"] {
  color: #ffffff !important;
  border-bottom: none !important;
}

#main-footer svg,
#footer-bottom svg,
#main-footer .et-pb-icon svg,
#footer-bottom .et-pb-icon svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* 3. Links & Buttery Smooth Hover */
#main-footer a,
#footer-info a,
#footer-bottom a,
#main-footer .footer-widget li a {
  color: #ffffff !important; /* <--- THIS IS THE FIX! */
  display: inline-block !important;
  transition: all 0.3s ease-in-out !important;
}

#main-footer a:hover,
#main-footer a:hover *,
#footer-info a:hover,
#footer-bottom a:hover,
#main-footer .footer-widget li a:hover {
  transform: translateX(6px) !important;
  color: var(--kbcg-brand-accent, #d5b172) !important;
}

/* 4. Magic RSS-to-YouTube Icon Swapper */
ul.et-social-icons li.et-social-rss a.icon::before {
  content: "\E0A3" !important;
}
ul.et-social-icons li.et-social-rss a:hover {
  color: var(--kbcg-brand-accent, #d5b172) !important;
  transform: none !important; /* Stops the icon from sliding sideways! */
}

/* ==========================================================
   THE THRIVE MODAL REPLACEMENT (GLOBAL OVERLAY FIX)
   ========================================================== */
.thrive-modal-entire {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* Use 100% instead of vw/vh to avoid issues with mobile browser chrome */
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.85) !important;
  z-index: 9999999 !important;
  backdrop-filter: blur(5px);
  overflow: hidden !important; /* Prevent scrollbars on the overlay itself */
}

/* When the JS clicks the button, this forces the dark overlay to center the box */
.thrive-modal-entire.modal-visible {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.thrive-modal-container {
  width: 100%;
  height: 100%; /* Ensure container fills the overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px; /* Add padding so modal doesn't touch screen edges */
  box-sizing: border-box;
}

#request-info-box .thrive-modal {
  position: relative !important;
  max-width: 500px !important;
  width: 100% !important; /* Allow it to fill the padded container */
  background: #111111 !important;
  color: #ffffff !important;
  padding: 40px 30px !important;
  border-radius: 8px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5) !important;
  max-height: 90vh !important;
  overflow-y: auto !important; /* Allow scrolling *inside* the modal box if form is long */
}

.thrive-modal-exit {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  font-size: 24px !important;
  font-weight: bold !important;
  color: #888888 !important;
  cursor: pointer !important;
  transition: color 0.2s ease !important;
  line-height: 1 !important;
  z-index: 10; /* Ensure the X is clickable */
}

.thrive-modal-exit:hover {
  color: #ffffff !important;
}

/* ==========================================================
   THE MOBILE TAB OVERRIDE (KILL LEGACY RULES & FIX SIZING)
   ========================================================== */
@media screen and (max-width: 980px) {
  body #request-info-tab {
    left: auto !important;
    right: 0 !important;
    /* Allow width to expand based on content, but set a min-width */
    width: auto !important;
    min-width: 45px !important;
    max-width: none !important;
    margin: 0 !important;
    /* Adjust padding to accommodate the vertical text */
    padding: 20px 12px !important;
    border-radius: 8px 0 0 8px !important;
    transform: translateY(-50%) !important;
    /* Ensure white-space doesn't wrap the text inappropriately */
    white-space: nowrap !important;
  }
}

/* ==========================================================
   SMART VIDEO TESTIMONIAL GRID (FIXED WIDTHS)
   ========================================================== */
.kbcg-video-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 40px !important;
  width: 100% !important;
}

.kbcg-video-grid .et_pb_module {
  width: 100% !important;
  margin-bottom: 0 !important; /* Stops Divi from adding weird extra spaces */
}

/* Mobile Override */
@media screen and (max-width: 980px) {
  .kbcg-video-grid {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }
}

/* ==========================================================
   ARCHIVE CARD IMAGE GAP FIX
   ========================================================== */

/* 1. Kill the legacy 30px top margin pushing the image down */
#home-list .home-gallery,
#community-list .home-gallery,
.kbcg-archive-card .home-gallery {
  margin-top: 0 !important;
}

/* 2. Strip out Divi's default post padding just to be safe */
.kbcg-archive-card.et_pb_post {
  padding-top: 0 !important;
}

/* ==========================================================
   BUILD ON YOUR LAND (BOYL) MASTER ENGINE
   ========================================================== */

/* --- 1. BOYL Section Cards & Spacing --- */
.boyl-section-card {
  background: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #eaeaea !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
  margin: 60px auto !important; /* <--- This applies 60px to the Top AND Bottom */
  max-width: 1080px !important;
}

.boyl-section-content {
  padding: 30px !important;
}

@media (max-width: 980px) {
  .boyl-section-card {
    width: 92% !important; /* Leaves a crisp 4% margin on the left and right */
  }
}

/* --- 2. BOYL Section Headers --- */
.boyl-section-header {
  background-color: var(--brand-primary) !important;
  padding: 24px 30px 24px 30px !important;
  margin: 0 !important;
  margin-bottom: 0 !important; /* Kills Divi's default bottom margin */
  display: flex !important;
  align-items: center !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Forces all text and heading tags inside to be white */
.boyl-section-header,
.boyl-section-header h1,
.boyl-section-header h2,
.boyl-section-header h3,
.boyl-section-header h4 {
  color: #ffffff !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
}

/* Base SVG Icon Structure */
.boyl-section-header::before {
  content: "" !important;
  display: inline-block !important;
  margin-right: 15px !important;
  width: 24px !important;
  height: 24px !important;
  background-color: #ffffff !important; /* The icon color */
  transform: translateY(-2px) !important; /* Perfect optical centering */
}

/* The Flawless SVG Masks (No more trash cans) */

/* 1. Floor Plan / Blueprint (What We Build) */
.boyl-icon-build::before {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M20.5%203H3.5A1.5%201.5%200%200%200%202%204.5v15A1.5%201.5%200%200%200%203.5%2021h17a1.5%201.5%200%200%200%201.5-1.5v-15A1.5%201.5%200%200%200%2020.5%203zM10%2019H4v-6h6v6zm9%200h-7v-3h3v-3h4v6zm0-8h-4v-2h-3v-2h7v4z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat center / contain !important;
}

/* 2. Glitch-Free Map Pin (Where We Build) */
.boyl-icon-where::before {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7zm0%209.5c-1.38%200-2.5-1.12-2.5-2.5s1.12-2.5%202.5-2.5%202.5%201.12%202.5%202.5-1.12%202.5-2.5%202.5z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat center / contain !important;
}

/* 3. Gears (Our Process) */
.boyl-icon-process::before {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19.43%2012.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49%201c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.488.488%200%200%200%2014%202h-4c-.25%200-.46.18-.49.42l-.38%202.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49%200-.61.22l-2%203.46c-.13.22-.07.49.12.64l2.11%201.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11%201.65c-.19.15-.24.42-.12.64l2%203.46c.12.22.39.3.61.22l2.49-1c.52.4%201.08.73%201.69.98l.38%202.65c.03.24.24.42.49.42h4c.25%200%20.46-.18.49-.42l.38-2.65c.61-.25%201.17-.59%201.69-.98l2.49%201c.23.09.49%200%20.61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12%2015.5c-1.93%200-3.5-1.57-3.5-3.5s1.57-3.5%203.5-3.5%203.5%201.57%203.5%203.5-1.57%203.5-3.5%203.5z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat center / contain !important;
}

/* 4. Gallery (View Our Work) */
.boyl-icon-work::before {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M21%2019V5c0-1.1-.9-2-2-2H5c-1.1%200-2%20.9-2%202v14c0%201.1.9%202%202%202h14c1.1%200%202-.9%202-2zM8.5%2013.5l2.5%203.01L14.5%2012l4.5%206H5l3.5-4.5z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat center / contain !important;
}

/* 5. Circled Quotes (Client Stories) */
.boyl-icon-stories::before {
  -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm0%2018c-4.41%200-8-3.59-8-8s3.59-8%208-8%208%203.59%208%208-3.59%208-8%208zM10%2013c0%201.1-.9%202-2%202s-2-.9-2-2c0-1.7%201.3-3.6%202.6-4.6l.8.6C8.5%209.8%208%2010.8%208%2011.5c.3-.2.6-.5%201-.5%201.1%200%202%20.9%202%202zm6%200c0%201.1-.9%202-2%202s-2-.9-2-2c0-1.7%201.3-3.6%202.6-4.6l.8.6c-.9.8-1.4%201.8-1.4%202.5.3-.2.6-.5%201-.5%201.1%200%202%20.9%202%202z%22%2F%3E%3C%2Fsvg%3E")
    no-repeat center / contain !important;
}

/* --- BOYL Header Subtext --- */
.boyl-section-header .boyl-header-subtext {
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.85) !important; /* Softened white */
  font-weight: 400 !important;
  font-style: italic !important;
  text-transform: none !important; /* Turns off the uppercase rule */
  letter-spacing: normal !important;
  margin: 4px 0 0 0 !important; /* Adds a tiny gap below the main title */
  line-height: 1.4 !important;
  max-width: 100% !important; /* Allows it to flow naturally without forced wrapping */
}

/* --- 3. BOYL Bulletproof Services Grid --- */
.boyl-services-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 15px !important;
  padding: 30px !important; /* Keeps grid from touching the header */
}
@media (min-width: 981px) {
  .boyl-services-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 30px !important;
  }
}
.boyl-service-card {
  background: #ffffff !important;
  border-radius: 8px !important;
  padding: 30px 15px !important;
  text-align: center !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06) !important;
  text-decoration: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  border: 1px solid #eaeaea !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}
.boyl-service-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}
.boyl-service-card svg {
  width: 48px !important;
  height: 48px !important;
  fill: var(--brand-primary) !important; /* Inherits global brand color */
  margin-bottom: 15px !important;
  display: block !important;
}
.boyl-service-card h3 {
  font-size: 18px !important;
  margin: 0 0 5px 0 !important;
  color: #333333 !important;
  font-weight: 700 !important;
  font-family: inherit !important;
}
.boyl-service-card p {
  font-size: 13px !important;
  color: #666666 !important;
  margin: 0 !important;
  line-height: 1.4em !important;
}

/* --- 4. BOYL Zebra City List --- */
.boyl-zebra-list ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #eaeaea !important;
  border-radius: 6px !important;
  overflow: hidden !important;
}
.boyl-zebra-list li {
  padding: 12px 15px 12px 40px !important;
  position: relative !important;
  border-bottom: 1px solid #eaeaea !important;
  margin: 0 !important;
  font-weight: 600 !important;
  color: #333333 !important;
}
.boyl-zebra-list li:last-child {
  border-bottom: none !important;
}
.boyl-zebra-list li:nth-child(even) {
  background-color: #f8f8f8 !important; /* Matches unified card background */
}
.boyl-zebra-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  background-color: var(--brand-primary) !important;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/></svg>')
    no-repeat center / contain !important;
  mask: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/></svg>')
    no-repeat center / contain !important;
}

/* --- 5. BOYL Isolated Map Pin Pulse (Doubled Size) --- */
.boyl-pulse-container {
  position: relative !important;
  width: 96px !important; /* Doubled from 48px */
  height: 96px !important;
  color: var(--brand-primary) !important;
  z-index: 10 !important;
}
.boyl-pulse-container svg {
  width: 100% !important;
  height: 100% !important;
  fill: currentColor !important;
  position: relative !important;
  z-index: 2 !important;
}
.boyl-pulse-ring {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 160px !important; /* Doubled from 80px */
  height: 160px !important;
  margin: -80px 0 0 -80px !important; /* Keeps the massive ring perfectly centered */
  border-radius: 50% !important;
  background-color: currentColor !important;
  animation: boyl-ping 2s infinite ease-out !important;
  z-index: 1 !important;
}
@keyframes boyl-ping {
  0% {
    transform: scale(0.4);
    opacity: 0.8;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .boyl-mobile-pin {
    top: 33% !important; /* Adjust this up or down */
    left: 39% !important; /* Adjust this left or right */
  }
}

/* --- 6. BOYL Process Slider (Modern Aspect-Ratio Fix) --- */
.boyl-process-slider {
  border-radius: 0 0 8px 8px !important; /* Flat on top, rounded on the bottom */
  overflow: hidden !important;
  border: 1px solid #eaeaea !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.boyl-process-slider,
.boyl-process-slider .et_pb_slider,
.boyl-process-slider .et_pb_slides,
.boyl-process-slider .et_pb_gallery_items {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  display: block !important;
}

.boyl-process-slider .et_pb_slide,
.boyl-process-slider .et_pb_gallery_item {
  height: 100% !important;
  width: 100% !important;
}

.boyl-process-slider .et_pb_slide_image img,
.boyl-process-slider .et_pb_gallery_image img,
.boyl-process-slider .et_pb_gallery_item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

.boyl-process-slider .et-pb-slider-arrows a {
  color: #ffffff !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  font-size: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
  text-shadow: none !important;
  opacity: 0;
}
.boyl-process-slider:hover .et-pb-slider-arrows a {
  opacity: 1 !important;
}
.boyl-process-slider .et-pb-slider-arrows a:hover {
  background: var(--brand-primary) !important;
  transform: scale(1.1) !important;
}
.boyl-process-slider .et-pb-arrow-prev {
  left: 15px !important;
}
.boyl-process-slider .et-pb-arrow-next {
  right: 15px !important;
}

.boyl-process-slider .et-pb-controllers {
  bottom: 15px !important;
  z-index: 10 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
}
.boyl-process-slider .et-pb-controllers a {
  background: rgba(255, 255, 255, 0.4) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  margin: 0 4px !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}
.boyl-process-slider .et-pb-controllers a.et-pb-active-control {
  background: #ffffff !important;
  transform: scale(1.3) !important;
}

.boyl-slider-instruction,
.boyl-slider-instruction p,
.boyl-slider-instruction h3,
.boyl-slider-instruction h4 {
  font-size: 14px !important;
  color: #666666 !important;
  font-style: italic !important;
  text-align: center !important;
  line-height: 1.5 !important;
  padding: 0 15px 15px 15px !important;
  margin: 0 auto !important;
  max-width: 400px !important; /* Forces the text to wrap cleanly instead of stretching across the screen */
}

/* --- 7. BOYL External Link Icon --- */
.boyl-service-card svg.boyl-external-icon {
  width: 14px !important;
  height: 14px !important;
  fill: none !important; /* Kills the solid blue fill */
  stroke: #666666 !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  display: inline-block !important;
  margin: 0 0 0 5px !important; /* Removes bottom margin, adds left spacing */
  transform: translateY(
    2px
  ) !important; /* Optically centers with lowercase text */
}

/* --- Benefits Section Checkmarks --- */

/* Container styling */
.checkmark-list {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
  text-align: left;
}

/* Individual list item styling */
.checkmark-list li {
  position: relative;
  /* Increased padding to make room for the circle */
  padding-left: 38px;
  margin-bottom: 16px;
  /* Aligns the text nicely with the center of the circle */
  display: flex;
  align-items: center;
  min-height: 28px;
  transition: transform 0.25s ease-in-out;
  transform-origin: left center;
}

/* White circle checkmark injection */
.checkmark-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  /* Circle dimensions and background */
  width: 28px;
  height: 28px;
  background-color: var(--kbcg-brand-secondary);
  border-radius: 50%;
  /* Centers the checkmark inside the circle */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Checkmark styling */
  color: #ffffff;
  font-weight: bold;
  font-size: 16px;
  /* Optional: Adds a subtle shadow so the white circle pops on light backgrounds */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Shift and zoom effect on hover */
.checkmark-list li:hover {
  /* Halved the distance and reduced the scale for a more premium, subtle feel */
  transform: translateX(4px) scale(1.01);
}

/* ==========================================================
   KBCG HEADER MENU
   ========================================================== */

/* --- DESKTOP TOPBAR FIXES --- */
#et-info.kb-noble-topbar {
  display: flex;
  justify-content: flex-end;
  align-items: center; /* Aligns buttons and social icons vertically */
  gap: 15px;
  float: right;
  width: 100%;
  margin-bottom: 25px;
  clear: both;
}

/* --- DESKTOP LOGO & MENU ALIGNMENT FIX --- */
@media (min-width: 981px) {
  #main-header .container.et_menu_container {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  #et-info.kb-noble-topbar {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-bottom: 5px !important; /* Reduced from 25px to pull the bottom row up */
    justify-content: flex-end !important;
    align-items: center !important;
  }

  #logo {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    top: 0px !important; /* Reset from -12px to align naturally with the flexbox */
    max-height: 85px; /* Adjust this value if the logo needs to be physically smaller to fit */
  }

  #top-navigation {
    flex: 1 !important;
    width: auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    margin: 25px 0 0 0 !important; /* Added 15px top margin to push it down */
    padding: 0 !important;
  }

  /* FIX: Removed the 3px nudge so the text perfectly centers with the circles */
  .kb-noble-btn {
    position: relative !important;
    top: 6px !important;
    margin-top: 0 !important;
  }
}

/* --- BASE BUTTON STYLES --- */
.kb-noble-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px !important;
  border-radius: 4px;
  font-size: 15px !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none !important;
  transition: all 0.3s ease;
  line-height: 1 !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

.kb-noble-btn svg {
  position: relative;
  top: 1px;
}

/* KBCG Brand Phone Button */
#header #custom-et-info-phone.kb-btn-call {
  background-color: var(--kbcg-brand-primary) !important;
  color: #ffffff !important;
  border: 2px solid var(--kbcg-brand-primary) !important;
}

/* Dark Contact Button */
.kb-btn-contact {
  background-color: #222222 !important;
  color: #ffffff !important;
  border: 2px solid #222222 !important;
}

/* Button Hover States */
#header #custom-et-info-phone.kb-btn-call:hover {
  background-color: transparent !important;
  color: var(--kbcg-brand-primary) !important;
}
.kb-btn-contact:hover {
  background-color: transparent !important;
  color: #222222 !important;
}

/* --- SOLID SOCIALS --- */
.kb-noble-topbar .et-social-icons {
  display: flex !important;
  align-items: center;
  gap: 18px !important; /* Increased from 10px for breathing room */
  margin: 0 0 0 20px !important; /* Added more space between the button and icons */
}
.kb-noble-topbar .et-social-icons li {
  margin: 0 !important;
}
.kb-noble-topbar .et-social-icon a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  background-color: var(--kbcg-brand-primary) !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  padding: 0 !important;
  transition: all 0.3s ease;
  border: none !important; /* Removes the previous outline */
}
.kb-noble-topbar .et-social-icon a:hover {
  background-color: var(
    --kbcg-brand-secondary
  ) !important; /* Dark hover state */
  color: #ffffff !important;
}

/* Force YouTube icon to display if missing */
.et-social-youtube a.icon::before {
  content: "\e0a3" !important;
  font-family: "ETmodules" !important;
}

/* --- MOBILE STACKING & LEFT ALIGNED LOGO --- */
@media (max-width: 980px) {
  #header .container.et_menu_container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
    padding-top: 20px !important;
  }

  /* FIX: Align logo with the left edge of the buttons below */
  #logo {
    order: 1 !important;
    align-self: flex-start !important;
    /* Match the 15px side padding of the buttons below */
    margin: 0 0 25px 15px !important;
    max-width: 220px !important;
    width: auto !important;
    float: none !important;
  }

  .mobile_menu_bar {
    position: absolute !important;
    top: 25px !important;
    right: 15px !important;
    z-index: 100 !important;
  }

  #et-info.kb-noble-topbar {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    float: none !important;
    gap: 12px !important;
    padding: 0 15px !important; /* This is the 15px the logo needs to match */
    box-sizing: border-box !important;
  }

  .kb-noble-btn {
    width: 100% !important;
    /* Remove the desktop top margin adjustment on mobile */
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #header #custom-et-info-phone.kb-btn-call {
    margin: 0 !important;
  }

  .kb-noble-topbar .et-social-icons {
    margin: 20px auto 0 auto !important; /* Added a bit more space above the icons */
    justify-content: center !important;
    width: 100% !important;
    gap: 20px !important; /* Ensures the icons have plenty of space to be tapped on mobile */
  }
}