/* 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;
  --accent-text: #3D7A18;
  --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, var(--hr-blue-primary) 0%, var(--hr-blue-glow) 100%);
  color: var(--accent-gold);
  box-shadow: inset 0 0 0 1.5px var(--accent-gold);
  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: var(--accent-text);
  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: var(--hr-blue-glow);
  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-text);
  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 {
  /* This used to reference assets/photos/004_kitchen_island.jpg - a filename
     from the donor listing that exists on no built page, so the 404'd image
     left only the gradient. 004.jpg is the numbering every build actually
     produces, so the texture now shows up. */
  background-image:
    linear-gradient(rgba(7, 14, 26, 0.88), rgba(7, 14, 26, 0.92)),
    url('assets/photos/004.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;
}

/* ".light-section" is a misnomer: it paints a DARK overlay and puts white text
   on it. Only <h3> and <ul><li> were ever given a colour, because the original
   section contained nothing else. Any <p> added later inherited
   --hr-text-muted (#4F585C) and rendered dark-grey on near-black - invisible.
   Everything that can hold text inside these sections is covered here so the
   next person to add a paragraph does not ship an unreadable block.
   The contrast auditor did not catch this, so do not treat a clean audit as
   proof that added copy is readable - look at it. */
.light-card p,
.light-card li,
.light-card span,
.light-card div,
.light-section > div > p,
.light-section p {
  color: rgba(255, 255, 255, 0.88) !important;
}
.light-section h2,
.light-section h3,
.light-card h2,
.light-card h4 {
  color: #FFFFFF !important;
}
.light-section a:not(.btn-blue):not(.btn-white) {
  color: #FFFFFF !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-text);
}

.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, var(--hr-blue-primary) 0%, var(--hr-blue-glow) 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: var(--accent-text);
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.btn-gold-sm {
  background: #FFFFFF;
  color: var(--accent-text);
  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-text);
  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: var(--accent-text); }
.brand-wrapper:focus-visible { outline: 2px solid var(--accent-gold); 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-text);
  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 video. The listing video is the hero whenever one exists; the photo
   slideshow is only a fallback, and the two must never run together. */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.95);
}



/* Hero readability. Keep the frosted glass Tim's page uses (translucent, you
   can still see the photo through it) but add a soft scrim behind the text so
   it stays legible over a bright frame. Do NOT make the card opaque. */
.liquid-glass-card {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.9);
}
.hero-headline {
  color: #06121F;
  text-shadow: 0 1px 12px rgba(255, 255, 255, 0.75);
}
.hero-city {
  color: var(--accent-text);
  font-weight: 900;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.8);
}
.hero-subheadline {
  color: #14212E;
  font-weight: 650;
  text-shadow: 0 1px 8px rgba(255, 255, 255, 0.8);
}

/* Brokerage attribution: one quiet line under the stat bar. Required on
   Florida advertising, but it is fine print - not a second card competing
   with the price, and never repeating the agent name already in the hero. */
.listing-brokerage-line {
  position: relative;
  z-index: 4;
  max-width: 1050px;
  margin: 12px auto 0;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.listing-brokerage-line strong { font-weight: 800; }
@media (max-width: 640px) {
  .listing-brokerage-line { font-size: 0.72rem; margin: 10px 16px 0; }
}

/* 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 (or their
   homepage when that agent has no 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, color 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); }