/* 6758 Gilda Court - Complete Luxury Real Estate Showcase
   Featuring: Automatic Crossfading Hero Photo Slideshow & 3D Tour Embed
   Branded for: Chris Moore · The Moore Group (mooregroupfl.com) */

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

:root {
  --hr-bright-bg: #F5F5F7;
  --hr-light-gray: #F0F2F5;
  --hr-white-card: #FFFFFF;
  --hr-text-dark: #002244;
  --hr-text-muted: #4F585C;
  --hr-blue-primary: #002244;
  --hr-blue-glow: #14456B;
  --hr-blue-light: rgba(0, 34, 68, 0.10);
  --hr-border: #D6DADC;
  --accent-gold: #69BE28;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 12px 32px rgba(7, 14, 26, 0.06);
  --shadow-glow: 0 10px 30px rgba(0, 34, 68, 0.22);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--hr-bright-bg);
  color: var(--hr-text-dark);
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 85px; /* Space for 100% full-width sticky bottom banner */
}

img, video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* STICKY HEADER */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(245, 245, 247, 0.94);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--hr-border);
  padding: 16px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-wrapper {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-icon-box {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #002244 0%, #14456B 100%);
  color: #69BE28;
  box-shadow: inset 0 0 0 1.5px #69BE28;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.brand-title-group h1 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--hr-text-dark);
}
.brand-title-group p {
  font-size: 0.72rem;
  color: #3D7A18;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}

/* HOMERUNNER HOVER MEGA-MENU DROPDOWN SYSTEM */
.nav-links {
  display: flex;
  gap: 12px;
  list-style: none;
}
.nav-item-dropdown {
  position: relative;
}
.nav-link-btn {
  color: var(--hr-text-dark);
  font-size: 0.9rem;
  font-weight: 700;
  transition: var(--transition);
  padding: 10px 16px;
  border-radius: 30px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
}
.nav-item-dropdown:hover .nav-link-btn {
  color: var(--hr-blue-primary);
  background: #FFFFFF;
  box-shadow: var(--shadow-sm);
}

.dropdown-mega-popup {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  width: 540px;
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  border-radius: var(--radius-lg);
  padding: 18px;
  box-shadow: 0 20px 45px rgba(7, 14, 26, 0.14);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2000;
}
.nav-item-dropdown:hover .dropdown-mega-popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(4px);
}
.mega-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mega-card-item {
  position: relative;
  height: 120px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--hr-border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 10px;
  text-decoration: none;
}
.mega-card-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  z-index: 0;
}
.mega-card-item:hover img {
  transform: scale(1.1);
}
.mega-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 14, 26, 0.75) 0%, rgba(7, 14, 26, 0.2) 100%);
  z-index: 1;
  transition: var(--transition);
}

.mega-card-content {
  position: relative;
  z-index: 2;
  color: #FFFFFF;
  background: rgba(7, 14, 26, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 8px 12px;
}
.mega-card-title {
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.2;
}
.mega-card-desc {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 2px;
}

/* BUTTONS */
.btn-blue {
  background: var(--hr-blue-primary);
  color: #FFFFFF;
  font-weight: 800;
  padding: 12px 26px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-glow);
}
.btn-blue:hover {
  background: #14456B;
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(0, 34, 68, 0.35);
}

.btn-white {
  background: #FFFFFF;
  color: var(--hr-text-dark);
  font-weight: 700;
  padding: 12px 24px;
  border: 1px solid var(--hr-border);
  border-radius: 30px;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}
.btn-white:hover {
  border-color: var(--hr-blue-primary);
  color: var(--hr-blue-primary);
  transform: translateY(-2px);
}

/* DYNAMIC HERO WITH AUTOMATIC CROSSFADING PHOTO SLIDESHOW */
#sitehero {
  position: relative;
  min-height: 100vh;
  background: #070E1A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  padding: 100px 24px 36px;
  overflow: hidden;
}

.hero-slideshow-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity 1.8s ease-in-out;
  transform: scale(1.02);
}

.hero-slide.active {
  opacity: 1;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(7, 14, 26, 0.25) 0%,
    rgba(7, 14, 26, 0.1) 45%,
    rgba(245, 245, 247, 0.35) 85%,
    rgba(245, 245, 247, 0.7) 100%
  );
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}

.liquid-glass-card {
  background: rgba(15, 23, 42, 0.26);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 24px;
  padding: 22px 36px;
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.3);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.liquid-glass-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.liquid-glass-content {
  position: relative;
  z-index: 2;
}

.hero-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.95);
  color: var(--hr-blue-primary);
  padding: 3px 14px;
  border-radius: 30px;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.hero-headline {
  font-size: clamp(1.5rem, 2.66vw, 2.25rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: #FFFFFF;
  text-shadow: 
    0 2px 14px rgba(0, 0, 0, 0.8),
    0 1px 4px rgba(0, 0, 0, 0.6);
}

.hero-subheadline {
  font-size: 0.98rem;
  color: #FFFFFF;
  max-width: 760px;
  margin: 0 auto;
  font-weight: 700;
  line-height: 1.45;
  text-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.85),
    0 1px 3px rgba(0, 0, 0, 0.6);
}
.hero-subheadline strong {
  color: var(--hr-blue-glow);
  font-weight: 800;
}

/* FLOATING QUICK PRICE WIDGET */
.hero-widget-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-lg);
  padding: 14px 28px;
  box-shadow: 0 20px 50px rgba(7, 14, 26, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  max-width: 940px;
  margin: 0 auto;
}
.widget-stat-group {
  display: flex;
  gap: 20px;
  align-items: center;
}
.widget-stat-item {
  text-align: center;
}
.widget-stat-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--hr-blue-primary);
}
.widget-stat-lbl {
  font-size: 0.7rem;
  color: var(--hr-text-muted);
  text-transform: uppercase;
  font-weight: 600;
}
.widget-divider {
  width: 1px;
  height: 32px;
  background: var(--hr-border);
}
.widget-price {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--accent-gold);
  line-height: 1;
}

/* HOMERUNNER SCROLL-DRIVEN STICKY ZOOM PINNING SEQUENCE */
.zoom-pin-container {
  position: relative;
  height: 260vh;
  background: #070E1A;
}

.zoom-sticky-view {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zoom-media-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  transform: scale(1.0);
  filter: brightness(0.8) contrast(1.05);
  transition: transform 0.1s linear;
}

.zoom-overlay-dark {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(7, 14, 26, 0.15) 0%, rgba(7, 14, 26, 0.55) 100%);
  z-index: 1;
}

.zoom-glass-card {
  position: relative;
  z-index: 2;
  background: rgba(7, 14, 26, 0.28);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 32px;
  padding: 44px 56px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.3);
  text-align: center;
  color: #FFFFFF;
  max-width: 920px;
  margin: 0 24px;
}

.zoom-step-badge {
  display: inline-block;
  background: rgba(89, 169, 255, 0.3);
  border: 1px solid var(--hr-blue-glow);
  color: var(--hr-blue-glow);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}

.zoom-headline {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 18px;
  color: #FFFFFF;
  text-shadow: 0 4px 20px rgba(0,0,0,0.6);
}

.zoom-subtext {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.95);
  max-width: 720px;
  margin: 0 auto 30px;
  line-height: 1.6;
}

/* MARQUEE STRIP WITH LIQUID GLASS CARD LABELS */
.marquee-section {
  padding: 40px 0;
  overflow: hidden;
  background: var(--hr-light-gray);
  border-top: 1px solid var(--hr-border);
  border-bottom: 1px solid var(--hr-border);
}
.marquee-wrapper {
  display: flex;
  overflow: hidden;
  user-select: none;
}
.marquee-track {
  display: flex;
  gap: 20px;
  animation: scrollMarquee 35s linear infinite;
  white-space: nowrap;
}
@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-card {
  width: 320px;
  height: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border: 1px solid var(--hr-border);
  box-shadow: var(--shadow-sm);
}
.marquee-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.marquee-card:hover img {
  transform: scale(1.08);
}

.marquee-card-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(7, 14, 26, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}

/* 🌙 HIGH-CONTRAST DEEP DARKENED PHOTO BACKGROUND FOR ESTATE FEATURES */
.why-home-section {
  position: relative;
  padding: 110px 24px;
  background-image: 
    linear-gradient(rgba(7, 14, 26, 0.82), rgba(7, 14, 26, 0.88)),
    url('assets/photos/003_aerial_property_overview.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-bottom: 1px solid #1E293B;
  color: #FFFFFF;
}

.why-home-container {
  position: relative;
  z-index: 2;
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items: center;
}

.ambient-quote-callout {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  color: #FFFFFF;
  line-height: 1.4;
  margin: 20px 0 28px;
  position: relative;
  padding: 22px 28px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-left: 4px solid var(--hr-blue-glow);
  border-radius: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.why-badge {
  color: var(--hr-blue-glow);
  text-transform: uppercase;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.why-headline {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.15;
  color: #FFFFFF;
  margin: 10px 0 14px;
  text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.why-text {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
  margin-bottom: 16px;
}

.why-subtext {
  font-size: 0.95rem;
  color: var(--hr-blue-glow);
  font-weight: 600;
  margin-bottom: 28px;
}

.why-home-right-box {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--hr-border);
  border-radius: 32px;
  padding: 44px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  color: var(--hr-text-dark);
}

.amenities-icon-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.amenity-icon-card {
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  border-radius: 22px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.amenity-icon-card:hover {
  transform: translateY(-6px);
  border-color: var(--hr-blue-primary);
  box-shadow: 0 16px 35px rgba(0, 34, 68, 0.15);
}

.amenity-icon-bubble {
  width: 56px;
  height: 56px;
  background: var(--hr-bright-bg);
  border: 1px solid var(--hr-border);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 12px;
  transition: var(--transition);
}

.amenity-icon-card:hover .amenity-icon-bubble {
  background: var(--hr-blue-light);
  border-color: var(--hr-blue-primary);
  transform: scale(1.1);
}

.amenity-icon-label {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--hr-text-dark);
}

/* 🌙 DEEP DARKENED PHOTO BACKGROUND FOR STORYTELLING TABS */
.storytelling-section {
  padding: 100px 24px;
  background-image: 
    linear-gradient(rgba(7, 14, 26, 0.85), rgba(7, 14, 26, 0.9)),
    url('assets/photos/001_front_exterior_dusk.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-bottom: 1px solid #1E293B;
  color: #FFFFFF;
}

.storytelling-section h2 {
  color: #FFFFFF;
}

.storytelling-tabs {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.w-tab-link {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.85);
  padding: 14px 28px;
  border-radius: 30px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.w-tab-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background-color: var(--hr-blue-glow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.w-tab-link:hover, .w-tab-link.active {
  color: #FFFFFF;
  border-color: var(--hr-blue-glow);
  background: var(--hr-blue-primary);
}
.w-tab-link.active::after {
  transform: scaleX(1);
}

.tab-preview-box {
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  color: var(--hr-text-dark);
}

.tab-media-frame {
  height: 440px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  border: 1px solid var(--hr-border);
}
.tab-media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PROPERTY FACTS SPECS SECTION */
.property-facts-section {
  padding: 90px 24px;
  max-width: 1380px;
  margin: 0 auto;
}

.facts-header {
  margin-bottom: 32px;
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
  border-top: 1px solid var(--hr-border);
}

.fact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--hr-border);
  gap: 16px;
}

.fact-label {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--hr-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fact-value {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--hr-text-dark);
  text-align: right;
}

/* 🌙 DEEP DARKENED PHOTO BACKGROUND FOR FEATURED HIGHLIGHTS */
.highlights-section {
  padding: 100px 24px;
  background-image: 
    linear-gradient(rgba(7, 14, 26, 0.85), rgba(7, 14, 26, 0.9)),
    url('assets/photos/003_aerial_property_overview.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  border-bottom: 1px solid #1E293B;
  color: #FFFFFF;
}
.highlights-section .section-title {
  color: #FFFFFF;
}
.highlights-section .section-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
  margin-top: 32px;
}

.area-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 260px;
  cursor: pointer;
  border: 1px solid var(--hr-border);
  box-shadow: var(--shadow-card);
  background: #fff;
}
.area-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.area-card:hover img {
  transform: scale(1.08);
}

.area-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--hr-blue-primary);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 4px 14px;
  border-radius: 20px;
  box-shadow: var(--shadow-glow);
  z-index: 2;
  text-transform: uppercase;
}

.area-overlay {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  background: rgba(7, 14, 26, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  padding: 14px 18px;
  transition: var(--transition);
  z-index: 2;
}
.area-title {
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
}

/* PRIMARY PHOTO SURROUND GALLERY SECTION */
.gallery-section {
  padding: 100px 24px 60px;
  max-width: 1400px;
  margin: 0 auto;
}

.gallery-nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 28px;
}

.gallery-filter-btn {
  background: #FFFFFF;
  border: 1.5px solid var(--hr-border);
  color: var(--hr-text-dark);
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 12px rgba(7, 14, 26, 0.08);
}

.gallery-filter-btn:hover {
  border-color: var(--hr-blue-primary);
  color: var(--hr-blue-primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 34, 68, 0.15);
}

.gallery-filter-btn.active {
  background: var(--hr-blue-primary);
  color: #FFFFFF;
  border-color: var(--hr-blue-primary);
  box-shadow: var(--shadow-glow);
}

.gallery-surround-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-flow: dense;
  gap: 18px;
  align-items: stretch;
  min-height: 560px;
}

.gallery-card {
  position: relative;
  min-height: 220px;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--hr-border);
  box-shadow: var(--shadow-card);
  background: #fff;
}
.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-card:hover img {
  transform: scale(1.08);
}

.gallery-card-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(7, 14, 26, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  padding: 12px 16px;
  opacity: 0;
  transition: var(--transition);
  z-index: 2;
}
.gallery-card:hover .gallery-card-overlay {
  opacity: 1;
}

/* CENTER REALTOR CONTACT CARD */
.gallery-center-contact-card {
  grid-column: 2 / 5;
  grid-row: span 2;
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 2px solid var(--hr-blue-primary);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  box-shadow: 0 20px 50px rgba(0, 34, 68, 0.10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 10;
}

.gallery-center-contact-card::before {
  content: "";
  position: absolute;
  top: 0;
  inset-x: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--hr-blue-primary), var(--hr-blue-glow), var(--accent-gold));
}

.contact-card-badge {
  background: var(--hr-blue-light);
  color: var(--hr-blue-primary);
  padding: 6px 18px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.contact-card-title {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--hr-text-dark);
  line-height: 1.2;
}

.contact-card-address {
  font-size: 0.95rem;
  color: var(--hr-text-muted);
  margin-top: 4px;
  margin-bottom: 20px;
  font-weight: 600;
}

.inline-contact-form {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inline-form-group {
  display: flex;
  gap: 12px;
}
.inline-form-group input, .inline-contact-form input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--hr-border);
  background: #FFFFFF;
  color: var(--hr-text-dark);
  font-size: 0.9rem;
  font-family: inherit;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);
}
.inline-form-group input:focus, .inline-contact-form input:focus {
  outline: none;
  border-color: var(--hr-blue-primary);
  box-shadow: 0 0 0 3px rgba(0, 34, 68, 0.15);
}

/* DEDICATED SECONDARY 3x5 PHOTO CAROUSEL SECTION ("Browse More Residence Photos") */
.more-photos-section {
  padding: 60px 24px 100px;
  max-width: 1400px;
  margin: 0 auto;
}

.more-photos-header {
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 18px;
}

.secondary-5col-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  align-items: stretch;
  min-height: 540px;
}

.gallery-pagination-ctrls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-gallery-arrow {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--hr-bright-bg);
  border: 1px solid var(--hr-border);
  color: var(--hr-text-dark);
  font-size: 1.3rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}
.btn-gallery-arrow:hover:not(:disabled) {
  background: var(--hr-blue-primary);
  color: #FFFFFF;
  border-color: var(--hr-blue-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
.btn-gallery-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.gallery-page-indicator {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--hr-blue-primary);
  background: var(--hr-blue-light);
  border: 1px solid var(--hr-border);
  padding: 10px 22px;
  border-radius: 30px;
}

/* 🌙 DEEP DARKENED PHOTO BACKGROUND FOR LIGHT MODE SPECIFICATIONS */
.light-section {
  background-image: 
    linear-gradient(rgba(7, 14, 26, 0.88), rgba(7, 14, 26, 0.92)),
    url('assets/photos/004_kitchen_island.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: #FFFFFF;
  padding: 100px 24px;
  border-top: 1px solid #1E293B;
  border-bottom: 1px solid #1E293B;
}

.light-section h2 {
  color: #FFFFFF;
}

.light-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3);
  color: #FFFFFF;
}
.light-card h3 {
  color: #FFFFFF !important;
}
.light-card ul li {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 3D VIRTUAL TOUR & FLOOR PLAN CONTAINER STYLES */
.virtual-tour-section {
  padding: 90px 24px;
  max-width: 1380px;
  margin: 0 auto;
}

.virtual-tour-frame-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 640px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hr-border);
  box-shadow: var(--shadow-card);
  background: #070E1A;
}

.virtual-tour-frame-box iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.virtual-tour-launch-overlay {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}

.floorplan-card-box {
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-card);
  margin-top: 40px;
  text-align: center;
}

.floorplan-image-frame {
  max-width: 1050px;
  margin: 20px auto 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--hr-border);
  box-shadow: var(--shadow-sm);
}

.floorplan-image-frame img {
  width: 100%;
  height: auto;
  display: block;
}

/* INLINE MORTGAGE CALCULATOR SECTION ABOVE AGENT SPOTLIGHT */
.mortgage-section {
  padding: 100px 24px;
  max-width: 1380px;
  margin: 0 auto;
}

.mortgage-card-container {
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.mortgage-inputs-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.mortgage-field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mortgage-field-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--hr-text-dark);
}
.mortgage-field-val {
  color: var(--hr-blue-primary);
  font-weight: 800;
}

.mortgage-field-group input[type="range"] {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  accent-color: var(--hr-blue-primary);
  cursor: pointer;
}

.mortgage-display-col {
  background: linear-gradient(135deg, #070E1A 0%, #0F172A 100%);
  border-radius: 24px;
  padding: 40px 36px;
  color: #FFFFFF;
  text-align: center;
  box-shadow: 0 20px 45px rgba(7, 14, 26, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mortgage-display-title {
  font-size: 0.8rem;
  color: var(--hr-blue-glow);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.mortgage-big-price {
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--accent-gold);
  line-height: 1.1;
  margin: 12px 0 20px;
}

.mortgage-breakdown-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  margin-bottom: 24px;
}

.mortgage-breakdown-item {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 10px 14px;
  text-align: left;
}
.mortgage-breakdown-lbl {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  font-weight: 700;
}
.mortgage-breakdown-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-top: 2px;
}

/* CHRIS MOORE FEATURED REALTOR SPOTLIGHT SECTION */
.realtor-spotlight-section {
  padding: 60px 24px 100px;
  max-width: 1380px;
  margin: 0 auto;
}

.realtor-spotlight-card {
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  border-radius: var(--radius-lg);
  padding: 50px;
  box-shadow: var(--shadow-card);
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 50px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.realtor-spotlight-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg, var(--hr-blue-primary), var(--hr-blue-glow), var(--accent-gold));
}

.realtor-portrait-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(7, 14, 26, 0.18);
  border: 3px solid #FFFFFF;
  aspect-ratio: 4/5;
}
.realtor-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.realtor-navy-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  background: rgba(7, 14, 26, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  padding: 10px 14px;
  color: #FFFFFF;
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.realtor-bio-box {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.realtor-eyebrow {
  color: var(--hr-blue-primary);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.realtor-name-title {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--hr-text-dark);
  line-height: 1.15;
}

.realtor-motto-quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--hr-text-dark);
  background: var(--hr-light-gray);
  border-left: 4px solid var(--hr-blue-primary);
  padding: 14px 20px;
  border-radius: 12px;
  margin: 4px 0;
}

.realtor-bio-p {
  font-size: 1.05rem;
  color: var(--hr-text-muted);
  line-height: 1.7;
}

.realtor-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  background: var(--hr-bright-bg);
  border: 1px solid var(--hr-border);
  border-radius: 18px;
  padding: 20px;
  margin: 10px 0;
  text-align: center;
}

.realtor-stat-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--hr-blue-primary);
  line-height: 1;
}

.realtor-stat-lbl {
  font-size: 0.72rem;
  color: var(--hr-text-muted);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 4px;
}

.realtor-contact-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

/* OFFICIAL REALTOR FOOTER MATCHING mooregroupfl.com */
footer.official-site-footer {
  background: #070E1A !important;
  color: #FFFFFF !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 48px 40px 110px;
  text-align: left;
}

.footer-top-grid {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 30px;
}

.footer-brand-title {
  font-size: 1.3rem;
  font-weight: 900;
  color: #FFFFFF;
}
.footer-brand-title span {
  color: var(--hr-blue-glow);
}

.footer-license-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 6px;
}

.footer-badges-list {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 14px;
}

.footer-realtor-gold {
  color: var(--accent-gold);
  font-weight: 800;
}

.footer-legal-box {
  text-align: right;
  max-width: 440px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
}

.footer-links-row {
  margin-top: 8px;
}
.footer-links-row a {
  color: var(--hr-blue-glow);
  margin-left: 12px;
}

.footer-fair-housing {
  margin-top: 10px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.5;
}

/* FIXED DARK HIGH-CONTRAST 100% STICKY BOTTOM ACTION BANNER */
.sticky-bottom-banner {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100% !important;
  z-index: 2500 !important;
  background: #070E1A !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
  padding: 14px 40px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  box-shadow: 0 -12px 35px rgba(0, 0, 0, 0.6) !important;
}

.bottom-banner-info {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #FFFFFF !important;
}

.bottom-price-tag {
  font-size: 1.9rem !important;
  font-weight: 900 !important;
  color: var(--accent-gold) !important;
  line-height: 1 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.bottom-address-specs {
  font-size: 0.95rem !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

.bottom-banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.btn-call-agent {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  padding: 11px 24px !important;
  border-radius: 30px !important;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem !important;
}
.btn-call-agent:hover {
  background: var(--hr-blue-primary) !important;
  border-color: var(--hr-blue-primary) !important;
}

/* MODALS & LIGHTBOX */
.calc-overlay {
  position: fixed;
  inset: 0;
  z-index: 2500;
  background: rgba(7, 14, 26, 0.7);
  backdrop-filter: blur(16px);
  display: none;
  align-items: center;
  justify-content: center;
}
.calc-overlay.active { display: flex; }
.calc-card-box {
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 90%;
  max-width: 650px;
  position: relative;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
  color: var(--hr-text-dark);
}

.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(5, 12, 23, 0.96);
  backdrop-filter: blur(20px);
  display: none;
  align-items: center;
  justify-content: center;
}
.lightbox-modal.active { display: flex; }
.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
}
.lightbox-content img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: var(--transition);
}
.lightbox-close { top: 20px; right: 30px; }
.lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
  background: var(--hr-blue-primary);
  color: #fff;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
  .why-home-container { grid-template-columns: 1fr; }
  .mortgage-card-container { grid-template-columns: 1fr; gap: 32px; }
  .realtor-spotlight-card { grid-template-columns: 1fr; gap: 30px; }
  .gallery-surround-grid, .secondary-5col-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery-center-contact-card {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (max-width: 768px) {
  .facts-grid { grid-template-columns: 1fr; }
  .realtor-stats-row { grid-template-columns: repeat(2, 1fr); }
  .sticky-bottom-banner { padding: 12px 20px !important; flex-direction: column; gap: 10px; text-align: center; }
  .bottom-banner-info { flex-direction: column; gap: 4px; }
  .footer-legal-box { text-align: left; }
  .amenities-icon-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-surround-grid, .secondary-5col-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sticky-header { padding: 16px 20px; }
  .liquid-glass-card { padding: 24px 18px; border-radius: 24px; }
  .zoom-glass-card { padding: 28px 20px; }
  .dropdown-mega-popup { width: 90vw; left: 50%; transform: translateX(-50%) translateY(10px); }
  .tab-preview-box { grid-template-columns: 1fr; }
  .widget-stat-group { flex-wrap: wrap; justify-content: center; }
  .hero-widget-card { justify-content: center; text-align: center; }
}

/* REALMLS LIVE IDX SECTION STYLES */
.idx-section {
  padding: 90px 24px;
  background: var(--hr-bright-bg);
  border-top: 1px solid var(--hr-border);
}

.idx-container {
  max-width: 1400px;
  margin: 0 auto;
}

.idx-header {
  text-align: center;
  margin-bottom: 36px;
}

.idx-badge {
  color: var(--hr-blue-primary);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.idx-header h2 {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--hr-text-dark);
  margin-top: 6px;
}

.idx-header p {
  color: var(--hr-text-muted);
  font-size: 1.05rem;
  margin-top: 4px;
}

.idx-filter-bar {
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.idx-filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 160px;
}

.idx-filter-group label {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--hr-text-dark);
  text-transform: uppercase;
}

.idx-filter-group input, .idx-filter-group select {
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--hr-border);
  background: var(--hr-light-gray);
  color: var(--hr-text-dark);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
}

.idx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.idx-card {
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.idx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(7, 14, 26, 0.12);
  border-color: var(--hr-blue-primary);
}

.idx-card-img-frame {
  height: 220px;
  position: relative;
  overflow: hidden;
  background: #070E1A;
}

.idx-card-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.idx-card:hover .idx-card-img-frame img {
  transform: scale(1.08);
}

.idx-status-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--hr-blue-primary);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
}

.idx-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.idx-card-price {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--accent-gold);
}

.idx-card-address {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--hr-text-dark);
  line-height: 1.3;
}

.idx-card-specs {
  display: flex;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--hr-text-muted);
  font-weight: 700;
  margin-top: 4px;
}

.idx-attribution {
  text-align: center;
  margin-top: 32px;
  font-size: 0.76rem;
  color: var(--hr-text-muted);
}

/* OPEN HOUSE BANNER STYLES */
.open-house-banner {
  background: linear-gradient(90deg, #69BE28 0%, #3D7A18 100%);
  color: #FFFFFF;
  padding: 12px 24px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(180, 83, 9, 0.3);
}

.open-house-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-weight: 800;
  font-size: 0.95rem;
}

.open-house-badge {
  background: #FFFFFF;
  color: #3D7A18;
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-gold-sm {
  background: #FFFFFF;
  color: #3D7A18;
  border: none;
  padding: 6px 18px;
  border-radius: 20px;
  font-weight: 900;
  font-size: 0.82rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn-gold-sm:hover {
  transform: scale(1.05);
}

/* PRICE HISTORY & MLS DATA WIDGET */
.price-history-box {
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  border-radius: var(--radius-lg);
  padding: 24px 32px;
  box-shadow: var(--shadow-sm);
  margin-top: 28px;
}

.price-history-header {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--hr-blue-primary);
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.price-history-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.price-history-item {
  flex: 1;
  min-width: 140px;
  padding: 14px 18px;
  background: var(--hr-light-gray);
  border-radius: 12px;
  border: 1px solid var(--hr-border);
}

.price-history-lbl {
  font-size: 0.76rem;
  color: var(--hr-text-muted);
  font-weight: 800;
  text-transform: uppercase;
}

.price-history-val {
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--hr-text-dark);
  margin-top: 4px;
}

/* GOOGLE MAPS & NEIGHBORHOOD AMENITIES STYLES */
.amenities-section {
  padding: 100px 24px;
  background: var(--hr-bright-bg);
  border-top: 1px solid var(--hr-border);
}

.amenities-container {
  max-width: 1400px;
  margin: 0 auto;
}

.amenities-header {
  text-align: center;
  margin-bottom: 36px;
}

.amenities-badge {
  color: var(--hr-blue-primary);
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.amenities-header h2 {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--hr-text-dark);
  margin-top: 6px;
}

.amenities-header p {
  color: var(--hr-text-muted);
  font-size: 1.05rem;
  margin-top: 4px;
}

.amenities-filter-pills {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.amenities-pill {
  padding: 10px 22px;
  border-radius: 30px;
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  color: var(--hr-text-dark);
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.amenities-pill:hover, .amenities-pill.active {
  background: var(--hr-blue-primary);
  color: #FFFFFF;
  border-color: var(--hr-blue-primary);
  transform: translateY(-2px);
}

.amenities-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.amenities-map-frame {
  height: 520px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--hr-border);
  box-shadow: var(--shadow-card);
}

.amenities-places-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 520px;
  overflow-y: auto;
  padding-right: 8px;
}

.amenity-place-card {
  background: #FFFFFF;
  border: 1px solid var(--hr-border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.amenity-place-card:hover {
  transform: translateX(6px);
  border-color: var(--hr-blue-primary);
  box-shadow: var(--shadow-card);
}

.amenity-place-info h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--hr-text-dark);
}

.amenity-place-info p {
  font-size: 0.82rem;
  color: var(--hr-text-muted);
  margin-top: 2px;
  font-weight: 600;
}

.amenity-place-meta {
  text-align: right;
}

.amenity-place-dist {
  font-size: 0.9rem;
  font-weight: 900;
  color: var(--hr-blue-primary);
}

.amenity-place-rating {
  font-size: 0.78rem;
  color: var(--accent-gold);
  font-weight: 800;
  margin-top: 2px;
}


/* ---- brand link back to the main site ---- */
.brand-wrapper { text-decoration: none; color: inherit; }
.brand-wrapper:hover .brand-title-group h1 { color: #3D7A18; }
.brand-wrapper:focus-visible { outline: 2px solid #69BE28; outline-offset: 4px; border-radius: 10px; }


/* Concept B hero: city sits under the address, description is one line.
   Standard for every listing page going forward. */
.hero-city {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin: 0 0 10px;
  text-shadow: 0 1px 6px rgba(255, 255, 255, 0.9);
}
.hero-subheadline {
  font-size: 1rem;
  max-width: 680px;
}
@media (max-width: 640px) {
  .liquid-glass-card { padding: 18px 20px; }
  .hero-city { font-size: 0.74rem; }
}


/* ---- Gallery filter pills ----
   These buttons reuse .w-tab-link, which is white-on-translucent for use over
   a dark hero. The gallery sits on a light cream section, so scope a solid
   pill here that matches the amenity pills exactly. */
#gallery-filter-bar button {
  background: #FFFFFF;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--hr-border);
  color: var(--hr-text-dark);
  padding: 10px 22px;
  font-size: 0.88rem;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}
#gallery-filter-bar button:hover,
#gallery-filter-bar button.active {
  background: var(--hr-blue-primary);
  color: #FFFFFF;
  border-color: var(--hr-blue-primary);
  transform: translateY(-2px);
}
#gallery-filter-bar button::after { display: none; }

/* Hero card proportions. The card is sized by its content, so undersized type
   leaves dead space inside the frosted panel. These match the reference page:
   a headline that carries the address, a tighter measure so the description
   wraps to two balanced lines, and padding that hugs the text. */
.liquid-glass-card {
  padding: 26px 40px 28px;
  margin-bottom: 16px;
}
.hero-headline {
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.04;
  margin-bottom: 8px;
}
.hero-city {
  font-size: 0.92rem;
  letter-spacing: 0.12em;
  margin: 0 0 14px;
}
.hero-subheadline {
  font-size: 1.12rem;
  line-height: 1.5;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px) {
  .liquid-glass-card { padding: 20px 22px 22px; }
  .hero-subheadline { font-size: 1rem; max-width: 100%; }
  .hero-city { font-size: 0.78rem; margin-bottom: 10px; }
}


/* Footer brokerage line — centred, links to the agent's about page. */
.footer-brokerage-bar {
  width: 100%;
  text-align: center;
  margin: 18px auto 0;
  padding: 16px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-brokerage-link {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: inherit;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 30px;
  transition: background 0.2s;
}
.footer-brokerage-link strong { font-weight: 900; color: var(--accent-gold); }
.footer-brokerage-link:hover { background: rgba(255, 255, 255, 0.08); }
.footer-brokerage-link:focus-visible { outline: 2px solid var(--accent-gold); outline-offset: 3px; }


/* ---- Footer rebuild ----
   Problems this fixes:
   1. .footer-legal-box was text-align:right, so the copyright, address and
      fair-housing paragraph read as ragged and randomly indented.
   2. The footer carried 110px of bottom padding to clear the sticky CTA bar,
      which left a large empty void under the last line. That clearance now
      lives on <body>, so the footer can end where its content ends.
   3. The brokerage line is the final element, sitting on its own rule. */
footer.official-site-footer {
  padding: 46px 40px 26px !important;
}
body { padding-bottom: 88px; }

.footer-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 44px;
  align-items: start;
  max-width: 1240px;
}
.footer-legal-box {
  text-align: left !important;
  max-width: 100% !important;
  line-height: 1.6;
}
.footer-links-row {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
}
.footer-fair-housing {
  margin-top: 12px;
  max-width: 460px;
  line-height: 1.55;
}
.footer-license-text { max-width: 620px; line-height: 1.6; }
.footer-badges-list { margin-top: 16px; row-gap: 8px; }

.footer-brokerage-bar {
  max-width: 1240px;
  margin: 30px auto 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
}

@media (max-width: 860px) {
  footer.official-site-footer { padding: 36px 22px 22px !important; }
  .footer-top-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-fair-housing { max-width: 100%; }
  body { padding-bottom: 104px; }
}


/* ---- Footer frosted panels ----
   The footer sits on near-black navy, so plain text floats with no structure.
   These give each block the same frosted-glass treatment as the hero card:
   a light translucent fill, hairline border and blur. Over a solid background
   backdrop-filter has little to blur, so the fill and border carry the effect. */
.footer-top-grid > div {
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  padding: 24px 26px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.footer-top-grid > div:hover { background: rgba(255, 255, 255, 0.075); }
.footer-top-grid > div { transition: background 0.25s ease; }

/* lift the text a little so it reads cleanly on the panel */
.footer-license-text,
.footer-legal-box { color: rgba(255, 255, 255, 0.78) !important; }
.footer-fair-housing { color: rgba(255, 255, 255, 0.58) !important; }
.footer-badges-list  { color: rgba(255, 255, 255, 0.85) !important; }

/* the brokerage line becomes a frosted pill rather than a bare rule */
.footer-brokerage-bar {
  border-top: none !important;
  padding: 0 !important;
  margin: 26px auto 0 !important;
}
.footer-brokerage-link {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 12px 30px !important;
}
.footer-brokerage-link:hover {
  background: rgba(255, 255, 255, 0.11) !important;
  border-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 860px) {
  .footer-top-grid > div { padding: 18px 18px; border-radius: 14px; }
}


/* ---- Footer text on dark ----
   The footer sits on #070E1A. --hr-blue-glow is a mid-navy meant for light
   cards; on the footer it measured 1.7:1 and was effectively invisible.
   Anything sitting on the dark footer uses the site accent or white instead. */
.footer-brand-title span {
  color: var(--accent-gold);
}
.footer-links-row a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
}
.footer-links-row a:hover,
.footer-links-row a:focus-visible {
  color: var(--accent-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* The mortgage card is dark navy; --hr-blue-glow is a mid-navy meant for light
   cards and measured 1.78:1 on it. The site accent reads at 7.4:1 there. */
.mortgage-display-title { color: var(--accent-gold); }


/* ============================================================
   HERO WALKTHROUGH VIDEO
   The compressed walkthrough plays muted on loop as the hero banner.
   The photo slideshow underneath is the fallback: if autoplay is blocked
   or the visitor prefers reduced motion, app.js hides .hero-video and the
   slideshow shows through unchanged.
   ============================================================ */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
  pointer-events: none;
  background: #070E1A;
}
.hero-video[hidden] { display: none; }

/* Overlay and content must sit above the video. */
.hero-video-overlay { z-index: 2; }
.hero-content { z-index: 4; }

@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}

/* Moving footage behind the text needs a stronger scrim than a still photo,
   otherwise the headline flickers between light and dark frames. */
#sitehero .hero-video-overlay {
  background: linear-gradient(
    180deg,
    rgba(7, 14, 26, 0.55) 0%,
    rgba(7, 14, 26, 0.38) 40%,
    rgba(7, 14, 26, 0.45) 70%,
    rgba(245, 245, 247, 0.55) 92%,
    rgba(245, 245, 247, 0.85) 100%
  );
}

/* The frosted card was smearing the footage behind it into an unreadable
   blob. A denser tint with a lighter blur keeps the glass look but holds
   the type legible over every frame of the video. */
.liquid-glass-card {
  background: rgba(9, 16, 30, 0.52);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
  border-color: rgba(255, 255, 255, 0.28);
}
.liquid-glass-card::before { display: none; }

/* City line under the address: white so it reads over the footage.
   (It was gold with a white glow, which disappeared against light frames.) */
.hero-city {
  color: #FFFFFF;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.85),
    0 1px 4px rgba(0, 0, 0, 0.7);
}


/* ============================================================
   HERO FIT + MOBILE HEADER
   ============================================================ */

/* The hero was a flat 100vh sitting *below* an 85px sticky header, with a
   70px fixed bottom banner over its last rows — so the stat/price widget
   fell off the bottom of the first screen. Size the hero to the space it
   actually occupies and pad it clear of the fixed banner. app.js keeps the
   two offsets in sync with the real element heights. */
#sitehero {
  min-height: calc(100vh - var(--hero-top-offset, 85px));
  min-height: calc(100svh - var(--hero-top-offset, 85px));
  padding-top: 32px;
  padding-bottom: calc(var(--hero-bottom-offset, 70px) + 22px);
  justify-content: center;
}

/* Mobile header. The nav is a hover-only mega-menu, which does nothing on a
   touch screen and was forcing the brand to wrap onto three lines and the
   links to overflow off-screen. Below 900px the brand and the primary CTA
   carry the header; the fixed bottom banner already provides call + showing. */
@media (max-width: 900px) {
  .sticky-header {
    padding: 12px 16px;
    gap: 12px;
    flex-wrap: nowrap;
  }
  .nav-links { display: none; }
  .header-actions .btn-white { display: none; }
  .header-actions .btn-blue {
    padding: 10px 16px;
    font-size: 0.82rem;
    white-space: nowrap;
  }
  .brand-wrapper { gap: 10px; min-width: 0; }
  .brand-icon-box { width: 38px; height: 38px; font-size: 1.15rem; flex-shrink: 0; }
  .brand-title-group h1 { font-size: 1rem; white-space: nowrap; }
  .brand-title-group p { font-size: 0.6rem; letter-spacing: 0.6px; white-space: nowrap; }
}

@media (max-width: 380px) {
  .brand-title-group p { display: none; }
  .header-actions .btn-blue { padding: 9px 12px; font-size: 0.76rem; }
}