/* ════════════════════════════════════════════════════════════════
   BENJI'S REAL ESTATE — MODERN RGB DESIGN SYSTEM
   Professional Property Platform with RGB Spectrum Colors
   Red (#E8001A) · Green (#00B34C) · Blue (#0052CC) 
   + Black · Yellow (#FFD700) · White
   ════════════════════════════════════════════════════════════════ */

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

/* ─── MODERN COLOR PALETTE ──────────────────────────────────────── */
:root {
  /* RGB Primary Colors */
  --color-red:        #E8001A;
  --color-red-light:  #FF4D4D;
  --color-red-dark:   #A00011;
  --color-red-bg:     #FFE8E8;
  
  --color-green:      #00B34C;
  --color-green-light: #4DD0A8;
  --color-green-dark: #006B2E;
  --color-green-bg:   #E8F8F0;
  
  --color-blue:       #0052CC;
  --color-blue-light: #5A8FFF;
  --color-blue-dark:  #002B7F;
  --color-blue-bg:    #E8F0FF;
  
  /* Accent Colors */
  --color-yellow:     #FFD700;
  --color-yellow-dark: #DAA520;
  --color-yellow-light: #FFE64D;
  
  --color-black:      #0F0F0F;
  --color-white:      #FFFFFF;
  
  /* Neutrals & Grays */
  --color-gray-50:    #F8F9FA;
  --color-gray-100:   #F0F2F5;
  --color-gray-200:   #E4E6EB;
  --color-gray-300:   #D0D5DD;
  --color-gray-400:   #98A2B3;
  --color-gray-500:   #65676B;
  --color-gray-600:   #454F5B;
  --color-gray-700:   #323A46;
  
  /* Status Colors */
  --color-success:    var(--color-green);
  --color-warning:    var(--color-yellow-dark);
  --color-error:      var(--color-red);
  --color-info:       var(--color-blue);
  
  /* Gradients */
  --gradient-rgb:     linear-gradient(135deg, #E8001A 0%, #00B34C 50%, #0052CC 100%);
  --gradient-warm:    linear-gradient(135deg, #FFD700 0%, #E8001A 100%);
  --gradient-cool:    linear-gradient(135deg, #0052CC 0%, #00B34C 100%);
  --gradient-dark:    linear-gradient(135deg, #0F0F0F 0%, #323A46 100%);
  --gradient-hero:    linear-gradient(165deg, rgba(15,15,15,0.95) 0%, rgba(50,58,70,0.85) 50%, rgba(8,89,77,0.2) 100%);
  
  /* Shadows */
  --shadow-xs:        0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:        0 2px 4px rgba(0,0,0,0.08);
  --shadow-md:        0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg:        0 8px 24px rgba(0,0,0,0.15);
  --shadow-xl:        0 12px 32px rgba(0,0,0,0.18);
  --shadow-2xl:       0 16px 48px rgba(0,0,0,0.22);
  
  --shadow-red:       0 8px 24px rgba(232,0,26,0.2);
  --shadow-green:     0 8px 24px rgba(0,179,76,0.2);
  --shadow-blue:      0 8px 24px rgba(0,82,204,0.2);
  
  /* Typography */
  --font-display:     'Playfair Display', serif;
  --font-body:        'Inter', system-ui, sans-serif;
  --font-mono:        'Roboto Mono', monospace;
  
  /* Spacing */
  --spacing-xs:       4px;
  --spacing-sm:       8px;
  --spacing-md:       16px;
  --spacing-lg:       24px;
  --spacing-xl:       32px;
  --spacing-2xl:      48px;
  --spacing-3xl:      64px;
  
  /* Border Radius */
  --radius-xs:        4px;
  --radius-sm:        6px;
  --radius-md:        8px;
  --radius-lg:        12px;
  --radius-xl:        16px;
  --radius-2xl:       24px;
  --radius-pill:      9999px;
  
  /* Transitions */
  --transition-fast:  all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:  all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── RESET & BASE ──────────────────────────────────────────────── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-gray-700);
  background: var(--color-white);
  overflow-x: hidden;
}

/* ─── TYPOGRAPHY ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-black);
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.01em;
}

h3 {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
}

h4 {
  font-size: 1.25rem;
  font-weight: 700;
}

h5 {
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h6 {
  font-size: 0.875rem;
  font-weight: 600;
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--color-gray-600);
  line-height: 1.7;
}

a {
  color: var(--color-blue);
  text-decoration: none;
  transition: var(--transition-fast);
  font-weight: 500;
}

a:hover {
  color: var(--color-blue-dark);
}

ul, ol {
  list-style: none;
}

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

/* ─── BUTTONS ──────────────────────────────────────────────────── */
button, .btn {
  font-family: var(--font-body);
  font-size: inherit;
  cursor: pointer;
  border: none;
  outline: none;
  transition: var(--transition-base);
  border-radius: var(--radius-lg);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  text-decoration: none;
  min-height: 44px;
  white-space: nowrap;
}

/* Primary Button - Red */
.btn-primary {
  background: var(--color-red);
  color: var(--color-white);
  box-shadow: var(--shadow-red);
}

.btn-primary:hover {
  background: var(--color-red-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Secondary Button - Green */
.btn-secondary {
  background: var(--color-green);
  color: var(--color-white);
  box-shadow: var(--shadow-green);
}

.btn-secondary:hover {
  background: var(--color-green-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Tertiary Button - Blue */
.btn-tertiary {
  background: var(--color-blue);
  color: var(--color-white);
  box-shadow: var(--shadow-blue);
}

.btn-tertiary:hover {
  background: var(--color-blue-dark);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

/* Outline Button */
.btn-outline {
  background: transparent;
  color: var(--color-blue);
  border: 2px solid var(--color-blue);
}

.btn-outline:hover {
  background: var(--color-blue-bg);
  color: var(--color-blue-dark);
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: var(--color-gray-700);
  border: 1px solid var(--color-gray-300);
}

.btn-ghost:hover {
  background: var(--color-gray-50);
  border-color: var(--color-gray-400);
}

/* Button Sizes */
.btn-sm {
  padding: 6px 12px;
  font-size: 0.875rem;
  min-height: 36px;
}

.btn-lg {
  padding: 12px 32px;
  font-size: 1rem;
  min-height: 48px;
  border-radius: var(--radius-xl);
}

/* ─── FORMS ────────────────────────────────────────────────────── */
input, textarea, select {
  font-family: var(--font-body);
  font-size: inherit;
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 2px solid var(--color-gray-300);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
  background: var(--color-white);
  color: var(--color-gray-700);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px var(--color-blue-bg);
}

input:invalid, textarea:invalid {
  border-color: var(--color-error);
}

input:invalid:focus, textarea:invalid:focus {
  box-shadow: 0 0 0 3px var(--color-red-bg);
}

label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 600;
  color: var(--color-gray-700);
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

/* ─── NAVIGATION ────────────────────────────────────────────────– */
nav {
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 100;
}

nav ul {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  flex-wrap: wrap;
}

nav a {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-md) 0;
  font-weight: 500;
  color: var(--color-gray-700);
  border-bottom: 2px solid transparent;
  transition: var(--transition-base);
}

nav a:hover, nav a.active {
  color: var(--color-blue);
  border-bottom-color: var(--color-blue);
}

/* ─── HEADER & HERO ────────────────────────────────────────────── */
.header, .hero {
  background: var(--gradient-hero);
  color: var(--color-white);
  padding: var(--spacing-3xl) var(--spacing-lg);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(232, 0, 26, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 82, 204, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 0%, rgba(0, 179, 76, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero h1 {
  color: var(--color-white);
  margin-bottom: var(--spacing-md);
  font-size: clamp(2.5rem, 6vw, 4rem);
}

.hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(1rem, 2vw, 1.25rem);
  margin-bottom: var(--spacing-xl);
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── CONTAINERS ────────────────────────────────────────────────– */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

.section {
  padding: var(--spacing-3xl) var(--spacing-lg);
}

.section-alt {
  background: var(--color-gray-50);
}

/* ─── CARDS ────────────────────────────────────────────────────– */
.card {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition-base);
  display: flex;
  flex-direction: column;
}

.card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.card-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-gray-200);
}

.card-body {
  padding: var(--spacing-lg);
  flex: 1;
}

.card-footer {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-gray-200);
  background: var(--color-gray-50);
}

.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--color-gray-200);
}

/* ─── BADGES & TAGS ────────────────────────────────────────────– */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-red {
  background: var(--color-red-bg);
  color: var(--color-red-dark);
}

.badge-green {
  background: var(--color-green-bg);
  color: var(--color-green-dark);
}

.badge-blue {
  background: var(--color-blue-bg);
  color: var(--color-blue-dark);
}

.badge-yellow {
  background: #FFF8E1;
  color: var(--color-yellow-dark);
}

/* ─── ALERTS ──────────────────────────────────────────────────– */
.alert {
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-lg);
  border-left: 4px solid;
  margin-bottom: var(--spacing-lg);
}

.alert-success {
  background: var(--color-green-bg);
  border-left-color: var(--color-green);
  color: var(--color-green-dark);
}

.alert-error {
  background: var(--color-red-bg);
  border-left-color: var(--color-red);
  color: var(--color-red-dark);
}

.alert-warning {
  background: #FFF8E1;
  border-left-color: var(--color-yellow-dark);
  color: var(--color-yellow-dark);
}

.alert-info {
  background: var(--color-blue-bg);
  border-left-color: var(--color-blue);
  color: var(--color-blue-dark);
}

/* ─── GRID LAYOUT ──────────────────────────────────────────────– */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ─── FLEXBOX UTILITIES ────────────────────────────────────────– */
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-col {
  flex-direction: column;
}

.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* ─── MARGIN & PADDING UTILITIES ────────────────────────────────– */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* ─── TEXT UTILITIES ────────────────────────────────────────────– */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }

.text-muted { color: var(--color-gray-500); }
.text-light { color: var(--color-gray-400); }

.fw-light { font-weight: 300; }
.fw-normal { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.fw-extrabold { font-weight: 900; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

/* ─── COLOR TEXT ────────────────────────────────────────────────– */
.text-red { color: var(--color-red); }
.text-green { color: var(--color-green); }
.text-blue { color: var(--color-blue); }
.text-yellow { color: var(--color-yellow-dark); }

/* ─── BACKGROUND UTILITIES ─────────────────────────────────────– */
.bg-red { background: var(--color-red); }
.bg-green { background: var(--color-green); }
.bg-blue { background: var(--color-blue); }
.bg-yellow { background: var(--color-yellow); }
.bg-black { background: var(--color-black); }
.bg-white { background: var(--color-white); }
.bg-gray { background: var(--color-gray-100); }

.bg-gradient-rgb { background: var(--gradient-rgb); }
.bg-gradient-warm { background: var(--gradient-warm); }
.bg-gradient-cool { background: var(--gradient-cool); }

/* ─── SHADOWS ──────────────────────────────────────────────────– */
.shadow-none { box-shadow: none; }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

/* ─── BORDER RADIUS ────────────────────────────────────────────– */
.rounded-none { border-radius: 0; }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: 50%; }

/* ─── RESPONSIVE UTILITIES ────────────────────────────────────– */
@media (max-width: 768px) {
  .hide-mobile {
    display: none;
  }
  
  h1 {
    font-size: 1.75rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) {
  .hide-desktop {
    display: none;
  }
}

/* ─── ANIMATIONS ────────────────────────────────────────────────– */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-in {
  animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-slide-left {
  animation: slideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-slide-right {
  animation: slideInRight 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ─── FOOTER ────────────────────────────────────────────────────– */
footer {
  background: var(--color-black);
  color: var(--color-white);
  padding: var(--spacing-3xl) var(--spacing-lg);
  margin-top: auto;
}

footer a {
  color: var(--color-blue-light);
}

footer a:hover {
  color: var(--color-yellow-light);
}

/* ─── PRINT STYLES ────────────────────────────────────────────– */
@media print {
  * {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  body {
    background: var(--color-white);
  }
  
  nav, footer {
    display: none;
  }
}
h2{font-family:var(--ff-display);font-size:clamp(2rem,3.8vw,3.2rem);font-weight:600;line-height:1.13;letter-spacing:-.02em}
h3{font-family:var(--ff-body);font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700;line-height:1.3}
h4{font-family:var(--ff-body);font-size:1rem;font-weight:700}
p{color:var(--slate);font-size:.95rem;line-height:1.78}

/* ─── KENYA STRIPE ──────────────────────────────────────────── */
.kenya-stripe{display:flex;width:100%;height:5px}
.kenya-stripe span:nth-child(1){flex:1;background:#000}
.kenya-stripe span:nth-child(2){flex:2;background:var(--red-vivid)}
.kenya-stripe span:nth-child(3){flex:1;background:#000}
.kenya-stripe span:nth-child(4){flex:2;background:var(--green)}
.kenya-stripe span:nth-child(5){flex:1;background:#000}

/* ─── LAYOUT ────────────────────────────────────────────────── */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 32px}
.section{padding:32px 0}
.section-sm{padding:16px 0}
.pt-nav{padding-top:0}

/* ─── HERO SECTION ────────────────────────────────────────────── */
.hero {
  min-height: calc(100vh - var(--header-h));
  position: relative;
  display: flex;
  align-items: center;
  background: var(--gradient-hero);
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
}
.hero-stats {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-stats-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 32px;
}
.hstat {
  text-align: center;
  color: #fff;
  padding: 20px 0;
  flex: 1;
  position: relative;
}
.hstat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.1);
}
.hstat-num {
  font-size: 1.8rem;
  font-weight: 900;
  font-family: var(--ff-display);
  letter-spacing: -0.02em;
}
.hstat-num em { font-style: normal; }
.hstat-lbl {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════
   ██ BUTTONS ██
   ════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:0 28px;height:50px;border-radius:var(--r-pill);
  font-weight:800;font-size:.88rem;letter-spacing:.01em;
  transition:all .26s var(--ease);white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(rgba(255,255,255,.15),transparent);
  opacity:0;transition:opacity .15s;
}
.btn:hover::after{opacity:1}

/* Green Primary */
.btn-primary{
  background:var(--grad-primary);color:#fff;
  box-shadow:0 4px 20px var(--green-glow);
}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 36px var(--green-glow)}

/* Gold CTA */
.btn-gold{
  background:var(--grad-gold);color:#fff;
  box-shadow:0 4px 20px var(--gold-glow);
}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 12px 36px var(--gold-glow)}

/* Blue Trust */
.btn-blue{
  background:var(--grad-blue);color:#fff;
  box-shadow:0 4px 20px var(--blue-glow);
}
.btn-blue:hover{transform:translateY(-3px);box-shadow:0 12px 36px var(--blue-glow)}

/* Red Urgent */
.btn-red{
  background:var(--grad-red);color:#fff;
  box-shadow:0 4px 20px var(--red-glow);
}
.btn-red:hover{transform:translateY(-3px);box-shadow:0 12px 36px var(--red-glow)}

/* Outline */
.btn-secondary{background:#fff;color:var(--green);border:2.5px solid var(--green)}
.btn-secondary:hover{background:var(--green-lt);transform:translateY(-2px)}

/* Ghost (on dark) */
.btn-ghost{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);border:2px solid rgba(255,255,255,.25);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);color:#fff;transform:translateY(-2px)}

/* Dark */
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2);transform:translateY(-2px)}

/* RGB Spectrum Button — eye-catching CTA */
.btn-spectrum{
  background:linear-gradient(90deg,var(--red-vivid),var(--gold),var(--green),var(--blue-vivid));
  background-size:300% 100%;color:#fff;font-weight:900;
  animation:spectrumShift 4s linear infinite;
  box-shadow:0 6px 28px rgba(0,0,0,.3);
}
@keyframes spectrumShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.btn-spectrum:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 14px 44px rgba(0,0,0,.4)}

/* Sizes */
.btn-sm{height:38px;padding:0 18px;font-size:.8rem}
.btn-lg{height:58px;padding:0 38px;font-size:.95rem}
.btn-xl{height:66px;padding:0 46px;font-size:1rem}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:2px solid var(--cloud);color:var(--ink-3);transition:all .15s}
.btn-icon:hover{border-color:var(--green);color:var(--green);background:var(--green-lt);transform:scale(1.08)}

/* ─── BADGES ────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:var(--r-pill);font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.badge-green{background:var(--green-lt);color:var(--green-dk)}
.badge-red{background:var(--red-lt);color:var(--red)}
.badge-blue{background:var(--blue-lt);color:var(--blue)}
.badge-gold{background:var(--gold-lt);color:var(--gold-dk)}
.badge-dark{background:var(--ink);color:#fff}
.badge-spectrum{background:var(--grad-rgb);color:#fff;box-shadow:0 3px 14px rgba(0,0,0,.2)}

/* ─── FORMS ─────────────────────────────────────────────────── */
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:.8rem;font-weight:800;color:var(--ink-2);letter-spacing:.02em;text-transform:uppercase}
.form-input{width:100%;height:50px;padding:0 18px;border-radius:var(--r-sm);border:2px solid var(--cloud);background:#fff;font-size:.92rem;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.form-input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(0,154,68,.12)}
.form-input::placeholder{color:var(--mist)}
.form-hint{font-size:.76rem;color:var(--mist)}
.form-error{font-size:.76rem;color:var(--red);font-weight:700}
select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23526673' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:44px}
textarea.form-input{height:auto;padding:16px 18px;resize:vertical}

/* ════════════════════════════════════════════════════════════════
   ██ TOP INFO BAR ██
   ════════════════════════════════════════════════════════════════ */
#topInfoBar{
  background:linear-gradient(90deg,var(--black) 0%,#0a1018 50%,var(--black) 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* ════════════════════════════════════════════════════════════════
   ██ NAVBAR ██
   ════════════════════════════════════════════════════════════════ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:997;
  height:var(--nav-h);
  background:rgba(4,8,10,.97);
  backdrop-filter:blur(28px) saturate(2);
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .3s,box-shadow .3s,border-color .3s,top .25s ease;
}
/* Spectrum bottom line on scroll */
.navbar.scrolled{
  background:rgba(2,5,8,.99);
  box-shadow:0 4px 40px rgba(0,0,0,.6);
  border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,var(--red-vivid),var(--gold),var(--green),var(--blue-vivid)) 1;
}
.nav-wrap{display:flex;align-items:center;height:100%;max-width:100%;padding:0 36px;gap:0}

/* Logo */
.nav-logo{display:flex;align-items:center;gap:14px;color:#fff;flex-shrink:0;margin-right:40px;transition:opacity .2s}
.nav-logo:hover{opacity:.85}
.nav-logo-icon{
  width:44px;height:44px;border-radius:11px;
  background:linear-gradient(145deg,var(--green-dk),var(--green-mid));
  display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;
  box-shadow:0 4px 20px var(--green-glow);
  position:relative;overflow:hidden;
}
.nav-logo-icon::after{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(rgba(255,255,255,.2),transparent)}
.nav-logo-text{display:flex;flex-direction:column;line-height:1}
.nav-logo-text strong{font-size:1.12rem;font-weight:900;letter-spacing:-.01em;color:#fff}
.nav-logo-text small{font-size:.64rem;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:.1em;text-transform:uppercase;margin-top:3px}

/* Nav menu */
.nav-menu{display:flex;align-items:center;gap:1px;flex:1}
.nav-item{position:relative}
.nav-link{
  display:flex;align-items:center;gap:5px;padding:9px 16px;
  color:rgba(255,255,255,.68);font-size:.875rem;font-weight:700;
  border-radius:9px;transition:color .15s,background .15s;
  white-space:nowrap;cursor:pointer;user-select:none;letter-spacing:.01em;
}
.nav-link:hover,.nav-item:hover>.nav-link,.nav-item.active>.nav-link{color:#fff;background:rgba(255,255,255,.09)}
.nav-item.active>.nav-link{color:var(--gold-vivid)}
.nav-chevron{transition:transform .28s var(--spring);opacity:.5;flex-shrink:0}
.nav-item:hover .nav-chevron{transform:rotate(180deg);opacity:1}

/* 3D DROPDOWN */
.nav-dropdown{
  position:absolute;top:calc(100% + 14px);left:0;
  background:#fff;border-radius:22px;
  box-shadow:var(--shadow-3d);border:1px solid rgba(0,0,0,.06);
  min-width:230px;overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;
  transform-origin:top center;
  transform:perspective(1200px) rotateX(-14deg) translateY(-12px) scale(.96);
  transition:opacity .28s var(--ease),transform .32s var(--spring),visibility 0s .28s;
}
/* Spectrum top border */
.nav-dropdown::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:1;
  background:linear-gradient(90deg,var(--red-vivid),var(--gold-vivid),var(--green),var(--blue-vivid));
}
.nav-dropdown::after{
  content:'';position:absolute;top:-8px;left:30px;
  width:16px;height:16px;background:#fff;transform:rotate(45deg);
  border-top:1px solid rgba(0,0,0,.07);border-left:1px solid rgba(0,0,0,.07);
  border-radius:3px 0 0 0;z-index:0;
}
.nav-item:hover>.nav-dropdown,.nav-item.dd-open>.nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:perspective(1200px) rotateX(0deg) translateY(0) scale(1);
  transition:opacity .28s var(--ease),transform .32s var(--spring),visibility 0s;
}
/* Mega */
.nav-dropdown.mega{display:flex;min-width:740px;padding:28px 28px 24px;gap:0;left:-100px}
.nav-dropdown.mega::after{left:130px}
.dd-col{flex:1;padding:0 22px 0 0;border-right:1px solid var(--cloud)}
.dd-col:last-of-type{border-right:none}
.dd-col-title{font-size:.67rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);padding-bottom:14px;margin-bottom:8px;border-bottom:1px solid var(--cloud)}
.dd-link{display:flex;align-items:center;gap:12px;padding:10px;border-radius:11px;color:var(--ink-2);margin-bottom:2px;transition:background .12s,transform .12s}
.dd-link:hover{background:var(--paper);transform:translateX(5px)}
.dd-link-icon{width:40px;height:40px;border-radius:10px;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;transition:background .12s}
.dd-link:hover .dd-link-icon{background:var(--green-lt)}
.dd-link-text{display:flex;flex-direction:column;line-height:1.25}
.dd-link-text strong{font-size:.86rem;font-weight:800;color:var(--ink)}
.dd-link-text small{font-size:.74rem;color:var(--mist);font-weight:500;margin-top:1px}
/* Feature panel — now uses spectrum gradient */
.dd-feature{
  width:210px;flex-shrink:0;margin-left:22px;padding:24px;
  background:linear-gradient(145deg,var(--green-dk) 0%,var(--blue) 60%,var(--green) 100%);
  border-radius:16px;color:#fff;display:flex;flex-direction:column;gap:14px;
  position:relative;overflow:hidden;
}
.dd-feature::before{content:'';position:absolute;top:-50px;right:-50px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.07)}
.dd-feature::after{display:none}
.dd-feature-tag{display:inline-block;background:rgba(255,255,255,.2);padding:3px 12px;border-radius:var(--r-pill);font-size:.67rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;width:fit-content}
.dd-feature h4{font-size:.96rem;font-weight:900;color:#fff;line-height:1.38}
.dd-feature p{font-size:.76rem;color:rgba(255,255,255,.75);line-height:1.55}
.dd-feature a{display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding:9px 18px;background:rgba(255,255,255,.2);border-radius:var(--r-pill);font-size:.79rem;font-weight:700;color:#fff;transition:background .15s,transform .15s}
.dd-feature a:hover{background:rgba(255,255,255,.32);transform:translateX(4px)}
/* Simple dropdown */
.dd-simple{padding:10px;min-width:220px}
.dd-simple a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;color:var(--ink-2);font-size:.87rem;font-weight:700;transition:background .12s,color .12s,transform .12s}
.dd-simple a:hover{background:var(--paper);color:var(--green);transform:translateX(5px)}
.dd-divider{height:1px;background:var(--cloud);margin:6px 0}
/* Nav right */
.nav-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}
.nav-avatar{width:38px;height:38px;border-radius:50%;border:2.5px solid var(--green);background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;flex-shrink:0}
.nav-badge{position:absolute;top:-3px;right:-3px;min-width:17px;height:17px;background:var(--red-vivid);color:#fff;border-radius:var(--r-pill);font-size:.62rem;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #04080A}
.nav-sep{width:1px;height:22px;background:rgba(255,255,255,.1);margin:0 4px}
/* Hamburger */
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.nav-toggle span{display:block;height:2px;background:#fff;border-radius:2px;transition:all .3s var(--spring)}
.nav-toggle span:nth-child(1){width:22px}
.nav-toggle span:nth-child(2){width:16px}
.nav-toggle span:nth-child(3){width:22px}
.nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);width:22px}
.nav-toggle.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);width:22px}

/* ════════════════════════════════════════════════════════════════
   ██ HERO ██  —  Deep black with RGB light rays
   ════════════════════════════════════════════════════════════════ */
.hero{
  min-height:100vh;position:relative;overflow:hidden;
  display:flex;align-items:center;
  background:var(--grad-hero);
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:url('/assets/img/nairobi-skyline.jpg') center/cover no-repeat;
  filter:brightness(.22) saturate(.6);
  transform:scale(1.06);
  animation:heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift{to{transform:scale(1.14) translate(10px,-6px)}}
/* Multi-colour overlay — the "RGB light" effect */
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(ellipse 60% 50% at 15% 30%, rgba(0,154,68,.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 20%, rgba(0,71,171,.22) 0%, transparent 60%),
    radial-gradient(ellipse 40% 55% at 50% 80%, rgba(204,0,0,.14) 0%, transparent 65%),
    radial-gradient(ellipse 80% 40% at 50% 105%, rgba(245,166,35,.10) 0%, transparent 65%),
    linear-gradient(to bottom,rgba(4,8,10,.75) 0%,rgba(4,8,10,.28) 45%,rgba(4,8,10,.92) 100%);
}
/* Animated RGB light beams */
.hero-beams{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.beam{
  position:absolute;border-radius:50%;filter:blur(80px);
  animation:beamFloat 14s ease-in-out infinite alternate;
}
.beam-1{width:500px;height:500px;background:rgba(0,154,68,.12);top:-10%;left:-10%;animation-delay:0s}
.beam-2{width:400px;height:400px;background:rgba(0,71,171,.14);top:5%;right:-5%;animation-delay:-4s}
.beam-3{width:350px;height:350px;background:rgba(204,0,0,.10);bottom:10%;left:20%;animation-delay:-8s}
.beam-4{width:300px;height:300px;background:rgba(245,166,35,.10);top:50%;right:25%;animation-delay:-2s}
@keyframes beamFloat{0%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-30px) scale(1.15)}100%{transform:translate(-20px,50px) scale(.9)}}
/* Particles */
.hero-particles{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none}
.particle{position:absolute;border-radius:50%;animation:floatUp linear infinite}
@keyframes floatUp{0%{transform:translateY(100vh) scale(1);opacity:0}5%{opacity:.6}95%{opacity:.15}100%{transform:translateY(-10vh) scale(.3);opacity:0}}
.hero-content{position:relative;z-index:2;width:100%;padding-top:var(--nav-h)}

/* Eyebrow pill */
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);border-radius:var(--r-pill);
  padding:6px 18px 6px 10px;margin-bottom:30px;
}
.eyebrow-dot{
  width:9px;height:9px;border-radius:50%;background:var(--green-mid);
  box-shadow:0 0 12px var(--green-mid);animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.6}}
.hero-eyebrow span{font-size:.75rem;font-weight:800;color:rgba(255,255,255,.8);letter-spacing:.08em;text-transform:uppercase}

/* Hero title — RGB gradient on the italic line */
.hero-title{color:#fff;margin-bottom:24px}
.hero-title .line2{
  display:block;color:transparent;
  background:linear-gradient(125deg,#FFD700 0%,#F5A623 30%,var(--green-mid) 65%,#4DD6FF 100%);
  -webkit-background-clip:text;background-clip:text;
  font-style:italic;
  text-shadow:none;
}
.hero-desc{font-size:1.08rem;color:rgba(255,255,255,.6);max-width:520px;margin-bottom:40px;line-height:1.82}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:52px}
.hero-trust{display:flex;gap:22px;flex-wrap:wrap}
.hero-trust-item{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.48);font-size:.8rem;font-weight:700}
.hero-trust-sep{width:1px;height:16px;background:rgba(255,255,255,.12)}

/* ── Search Card ──────────────────────────────────────────── */
.search-card{
  background:rgba(255,255,255,.97);border-radius:24px;
  padding:30px 32px 26px;max-width:560px;
  box-shadow:0 40px 100px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05),0 0 60px rgba(0,154,68,.1);
  backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.15);
}
.sc-tabs{display:flex;gap:4px;background:var(--paper);border-radius:12px;padding:4px;margin-bottom:22px}
.sc-tab{flex:1;padding:10px;border-radius:9px;font-size:.82rem;font-weight:800;color:var(--slate);text-align:center;cursor:pointer;transition:all .18s;user-select:none}
.sc-tab.active{background:#fff;color:var(--green);box-shadow:0 2px 10px rgba(0,0,0,.1)}
.sc-fields{display:flex;flex-direction:column;gap:10px}
.sc-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sc-field{position:relative}
.sc-field select,.sc-field input{
  width:100%;height:50px;padding:0 40px 0 16px;
  border-radius:10px;border:2px solid var(--cloud);
  background:var(--paper);font-size:.87rem;font-weight:700;
  color:var(--ink);appearance:none;cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.sc-field select:focus,.sc-field input:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 4px rgba(0,154,68,.1)}
.sc-field::after{content:'';position:absolute;right:14px;top:50%;translate:0 -50%;width:12px;height:7px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23526673' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center}
.sc-field.no-arrow::after{display:none}
.sc-field.no-arrow input{padding-right:16px}
.sc-submit{
  width:100%;height:54px;border-radius:12px;
  background:linear-gradient(135deg,var(--green-dk),var(--green-mid));
  color:#fff;font-size:.96rem;font-weight:900;letter-spacing:.01em;
  box-shadow:0 6px 24px var(--green-glow);transition:all .22s;margin-top:6px;
  position:relative;overflow:hidden;
}
.sc-submit::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-100%);transition:transform .5s}
.sc-submit:hover::before{transform:translateX(100%)}
.sc-submit:hover{transform:translateY(-2px);box-shadow:0 12px 36px var(--green-glow)}
.sc-meta{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.sc-meta span{font-size:.76rem;color:var(--mist);font-weight:700}

.hero-slider-dots {
  position: absolute;
  bottom: 110px; /* Positioned above the stats bar */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 5;
  align-items: center;
  justify-content: center;
}
.hero-dot {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  max-width: 10px !important;
  border-radius: 50% !important;
  cursor: pointer;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, 0.4) !important;
  transition: all 0.3s var(--ease);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  flex-shrink: 0;
}
.hero-dot.active {
  background: #fff !important;
  width: 28px !important; /* Pill shape for active */
  border-radius: 6px !important;
  transform: none;
}

/* ════════════════════════════════════════════════════════════════
   ██ PROPERTY CARDS ██
   ════════════════════════════════════════════════════════════════ */
.prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.prop-grid-4{grid-template-columns:repeat(4,1fr)}
.prop-grid-2{grid-template-columns:repeat(2,1fr)}

.prop-card{
  border-radius:20px;overflow:hidden;background:#fff;
  border:1px solid var(--cloud);
  box-shadow:0 3px 14px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.04);
  transition:transform .32s var(--spring),box-shadow .32s var(--ease);
  display:flex;flex-direction:column;position:relative;
}
.prop-card:hover{
  transform:translateY(-9px);
  box-shadow:0 28px 72px rgba(0,0,0,.15),0 6px 20px rgba(0,0,0,.08);
}
/* Coloured left border on hover using box-shadow */
.prop-card:hover::before{
  content:'';position:absolute;inset:0;border-radius:20px;
  box-shadow:inset 3px 0 0 var(--green);pointer-events:none;z-index:1;
}
.prop-card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper)}
.prop-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.prop-card:hover .prop-card-img img{transform:scale(1.08)}
.prop-card-img-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:3.5rem;background:linear-gradient(135deg,var(--paper),var(--cloud))}

.pc-badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.pc-badge{padding:4px 12px;border-radius:var(--r-pill);font-size:.68rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;backdrop-filter:blur(10px)}
.pc-badge-verified{background:rgba(0,100,44,.92);color:#fff}
.pc-badge-featured{background:rgba(245,166,35,.96);color:#fff}
.pc-badge-sale{background:rgba(0,71,171,.9);color:#fff}
.pc-badge-rent{background:rgba(4,8,10,.88);color:#fff}
.pc-badge-sold{background:rgba(204,0,0,.92);color:#fff}
.pc-save{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.95rem;box-shadow:0 2px 12px rgba(0,0,0,.18);transition:transform .22s var(--spring),background .15s}
.pc-save:hover{background:#fff;transform:scale(1.18)}
.pc-save.saved{color:var(--red-vivid)}

.pc-body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.pc-price{display:flex;align-items:baseline;gap:6px}
.pc-price strong{font-size:1.35rem;font-weight:900;color:var(--ink);font-family:var(--ff-display);letter-spacing:-.02em}
.pc-price span{font-size:.76rem;color:var(--mist);font-weight:700}
.pc-price .poa{font-size:.9rem;color:var(--green);font-weight:800}
.pc-title{font-size:.92rem;font-weight:700;color:var(--ink);line-height:1.42;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pc-loc{display:flex;align-items:center;gap:5px;font-size:.79rem;color:var(--slate);font-weight:700}
.pc-specs{display:flex;gap:14px;padding-top:12px;border-top:1px solid var(--cloud)}
.pc-spec{display:flex;align-items:center;gap:5px;font-size:.77rem;color:var(--slate);font-weight:700}
.pc-spec svg{opacity:.5;flex-shrink:0}
.pc-footer{display:flex;align-items:center;gap:9px;padding-top:10px;border-top:1px solid var(--cloud);margin-top:auto}
.pc-agent-av{width:27px;height:27px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:900;flex-shrink:0}
.pc-agent-name{font-size:.74rem;color:var(--mist);font-weight:700}
.pc-ref{font-family:var(--ff-mono);font-size:.66rem;color:var(--fog);margin-left:auto}

/* Featured card: gold outline + shimmer */
.prop-card.sponsored{
  border:2px solid var(--gold);
  box-shadow:0 4px 24px var(--gold-glow);
}
.prop-card.sponsored::after{content:'⭐ Featured';position:absolute;top:0;left:50%;translate:-50% 0;background:var(--grad-gold);color:#fff;padding:4px 16px;border-radius:0 0 12px 12px;font-size:.64rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;z-index:3}

/* List view */
.prop-card.list-view{flex-direction:row;max-height:190px}
.prop-card.list-view .prop-card-img{width:240px;flex-shrink:0;aspect-ratio:auto;height:100%}
.prop-card.list-view .pc-body{padding:20px 22px}

/* ════════════════════════════════════════════════════════════════
   ██ SECTION HEADERS ██
   ════════════════════════════════════════════════════════════════ */
.section-header{display:flex;flex-direction:column;gap:12px}
.section-header.center{text-align:center;align-items:center}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.7rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase;
}
/* RGB eyebrow lines */
.section-eyebrow.green{color:var(--green)}
.section-eyebrow.green::before,.section-eyebrow.green::after{content:'';width:24px;height:2.5px;background:var(--green);border-radius:2px}
.section-eyebrow.blue{color:var(--blue)}
.section-eyebrow.blue::before,.section-eyebrow.blue::after{content:'';width:24px;height:2.5px;background:var(--blue);border-radius:2px}
.section-eyebrow.gold{color:var(--gold-dk)}
.section-eyebrow.gold::before,.section-eyebrow.gold::after{content:'';width:24px;height:2.5px;background:var(--gold);border-radius:2px}
.section-eyebrow.red{color:var(--red)}
.section-eyebrow.red::before,.section-eyebrow.red::after{content:'';width:24px;height:2.5px;background:var(--red);border-radius:2px}
/* Backward compat */
.section-eyebrow::before,.section-eyebrow::after{content:'';width:24px;height:2.5px;background:currentColor;border-radius:2px;opacity:.5}
.section-title{color:var(--ink)}
.section-desc{max-width:500px;font-size:.95rem}

/* ════════════════════════════════════════════════════════════════
   ██ AD BANNERS ██
   ════════════════════════════════════════════════════════════════ */
.ad-banner{
  border-radius:22px;overflow:hidden;position:relative;
  min-height:130px;display:flex;align-items:center;cursor:pointer;
  transition:transform .3s var(--spring),box-shadow .3s;
}
.ad-banner:hover{transform:translateY(-5px);box-shadow:var(--shadow-green)}
.ad-banner-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.35);transition:filter .3s}
.ad-banner:hover .ad-banner-bg{filter:brightness(.28)}
.ad-banner-grad{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,70,0,.88) 0%,rgba(0,50,100,.6) 60%,transparent 100%)}
.ad-banner-content{position:relative;z-index:1;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.ad-banner-text h3{color:#fff;font-size:1.12rem;font-weight:900;margin-bottom:5px}
.ad-banner-text p{color:rgba(255,255,255,.62);font-size:.83rem}
.ad-tag{position:absolute;top:10px;right:14px;font-size:.6rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.32)}

/* ════════════════════════════════════════════════════════════════
   ██ FILTERS & LISTINGS ██
   ════════════════════════════════════════════════════════════════ */
.filter-sidebar{
  width:294px;flex-shrink:0;background:#fff;border-radius:20px;
  border:1px solid var(--cloud);box-shadow:var(--shadow-xs);
  overflow:hidden;height:fit-content;
  position:sticky;top:calc(var(--nav-h) + 20px);
}
.filter-head{padding:20px 22px;border-bottom:1px solid var(--cloud);display:flex;align-items:center;justify-content:space-between}
.filter-head h3{font-size:.93rem;color:var(--ink);font-weight:800}
.filter-body{padding:22px;display:flex;flex-direction:column;gap:22px}
.filter-grp{display:flex;flex-direction:column;gap:9px}
.filter-grp-lbl{font-size:.7rem;font-weight:900;color:var(--mist);letter-spacing:.1em;text-transform:uppercase}
.filter-pills{display:flex;flex-wrap:wrap;gap:6px}
.filter-pill{padding:6px 14px;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;background:var(--paper);color:var(--slate);border:2px solid var(--cloud);cursor:pointer;transition:all .15s;display:inline-flex;user-select:none}
.filter-pill.active,.filter-pill:hover{background:var(--green);color:#fff;border-color:var(--green)}
.filter-range{display:flex;gap:8px}
.filter-clear-all{font-size:.78rem;color:var(--red);font-weight:800;cursor:pointer;background:none;border:none;padding:0}
.filter-clear-all:hover{text-decoration:underline}
.active-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.a-pill{display:flex;align-items:center;gap:6px;padding:5px 13px;background:var(--green-lt);color:var(--green-dk);border-radius:var(--r-pill);font-size:.76rem;font-weight:800;border:1.5px solid rgba(0,154,68,.2)}
.a-pill button{color:var(--green-dk);font-size:.85rem;opacity:.7;transition:opacity .15s}
.a-pill button:hover{opacity:1}
.results-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:26px}
.results-count{font-size:.87rem;font-weight:700;color:var(--slate)}
.results-count strong{color:var(--ink)}
.view-toggle{display:flex;background:var(--paper);border-radius:10px;padding:3px;border:1px solid var(--cloud)}
.view-btn{padding:7px 11px;border-radius:8px;color:var(--mist);transition:all .15s}
.view-btn.active{background:#fff;color:var(--ink);box-shadow:var(--shadow-xs)}

/* ════════════════════════════════════════════════════════════════
   ██ PROPERTY DETAIL ██
   ════════════════════════════════════════════════════════════════ */
.gallery-main{border-radius:22px;overflow:hidden;aspect-ratio:16/10;position:relative;background:var(--paper);cursor:zoom-in}
.gallery-main img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.gallery-main:hover img{transform:scale(1.04)}
.gallery-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.gthumb{border-radius:11px;overflow:hidden;aspect-ratio:4/3;cursor:pointer;border:3px solid transparent;transition:border-color .15s,transform .15s}
.gthumb:hover,.gthumb.active{border-color:var(--green);transform:scale(1.04)}
.gthumb img{width:100%;height:100%;object-fit:cover}
.gthumb-more{position:relative;display:flex;align-items:center;justify-content:center}
.gthumb-more::after{content:attr(data-more);position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;font-size:1.05rem;font-weight:800;color:#fff;border-radius:11px}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.97);display:none;align-items:center;justify-content:center;animation:fadeIn .2s}
.lightbox.open{display:flex}
@keyframes fadeIn{from{opacity:0}}
.lb-img{max-width:90vw;max-height:88vh;border-radius:14px;object-fit:contain}
.lb-close{position:absolute;top:20px;right:24px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.4rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;z-index:1;border:1px solid rgba(255,255,255,.12)}
.lb-close:hover{background:rgba(255,255,255,.2)}
.lb-nav{position:absolute;top:50%;translate:0 -50%;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;cursor:pointer;border:1px solid rgba(255,255,255,.14);transition:background .15s;z-index:1}
.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-prev{left:22px}
.lb-next{right:22px}
.lb-counter{position:absolute;bottom:22px;left:50%;translate:-50% 0;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.5);background:rgba(255,255,255,.09);padding:6px 18px;border-radius:var(--r-pill)}

/* Property info panel */
.pip{background:#fff;border-radius:24px;border:1px solid var(--cloud);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:calc(var(--nav-h) + 20px)}
.pip-head{
  padding:26px 28px;
  background:linear-gradient(135deg,var(--black) 0%,var(--ink-2) 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.pip-price{font-size:2.2rem;font-weight:900;color:#fff;font-family:var(--ff-display);letter-spacing:-.03em}
.pip-price-label{font-size:.8rem;color:rgba(255,255,255,.45);font-weight:700;margin-top:5px}
.pip-body{padding:24px 28px;display:flex;flex-direction:column;gap:18px}
.pip-ref{font-family:var(--ff-mono);font-size:.76rem;color:var(--mist);background:var(--paper);padding:8px 14px;border-radius:9px}

/* Attributes grid */
.attrs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.attr-item{
  background:var(--paper);border-radius:12px;padding:16px;
  border:1px solid var(--cloud);display:flex;flex-direction:column;gap:5px;
  transition:border-color .15s,box-shadow .15s;
}
.attr-item:hover{border-color:var(--green);box-shadow:0 4px 16px var(--green-glow)}
.attr-icon{font-size:1.35rem}
.attr-val{font-size:1.05rem;font-weight:900;color:var(--ink)}
.attr-lbl{font-size:.7rem;font-weight:800;color:var(--mist);text-transform:uppercase;letter-spacing:.06em}

/* Booking calendar */
.booking-cal{background:#fff;border-radius:16px;border:1px solid var(--cloud);overflow:hidden}
.cal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--cloud)}
.cal-nav-btn{width:34px;height:34px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s;border:1px solid var(--cloud);font-size:.9rem}
.cal-nav-btn:hover{background:var(--green);color:#fff;border-color:var(--green)}
.cal-month{font-size:.93rem;font-weight:900;color:var(--ink)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-dn{padding:10px 0;text-align:center;font-size:.68rem;font-weight:900;color:var(--mist);letter-spacing:.04em}
.cal-day{padding:9px 0;text-align:center;font-size:.82rem;font-weight:700;cursor:pointer;color:var(--ink-2);border-radius:9px;transition:all .12s;margin:1px}
.cal-day:hover:not(.dis):not(.bkd){background:var(--green-lt);color:var(--green)}
.cal-day.today{background:var(--blue-lt);color:var(--blue);font-weight:900}
.cal-day.sel{background:var(--green);color:#fff;box-shadow:0 3px 12px var(--green-glow)}
.cal-day.bkd{color:var(--fog);cursor:not-allowed;text-decoration:line-through}
.cal-day.dis{color:var(--cloud);cursor:not-allowed}

/* Time slots */
.time-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tslot{padding:10px 4px;border-radius:10px;border:2px solid var(--cloud);text-align:center;font-size:.76rem;font-weight:800;cursor:pointer;transition:all .14s;background:var(--paper);color:var(--ink-2)}
.tslot:hover:not(.taken){border-color:var(--green);background:var(--green-lt);color:var(--green)}
.tslot.sel{border-color:var(--green);background:var(--green);color:#fff}
.tslot.taken{background:var(--red-lt);color:var(--fog);border-color:transparent;cursor:not-allowed}

/* ════════════════════════════════════════════════════════════════
   ██ COUNTY GRID ██
   ════════════════════════════════════════════════════════════════ */
.county-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.county-card{border-radius:20px;overflow:hidden;position:relative;aspect-ratio:4/3;cursor:pointer;transition:transform .3s var(--spring),box-shadow .3s}
.county-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lg)}
.county-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.48);transition:filter .3s,transform .55s}
.county-card:hover .county-bg{filter:brightness(.36) saturate(1.2);transform:scale(1.1)}
.county-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,8,10,.9) 0%,rgba(4,8,10,.1) 60%,transparent 100%)}
/* Coloured top accent bar per county card */
.county-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-rgb);z-index:2}
.county-body{position:absolute;bottom:0;left:0;right:0;padding:16px 15px}
.county-name{font-size:.96rem;font-weight:900;color:#fff}
.county-count{font-size:.72rem;color:rgba(255,255,255,.58);font-weight:700;margin-top:3px}

/* ════════════════════════════════════════════════════════════════
   ██ HOW IT WORKS ██
   ════════════════════════════════════════════════════════════════ */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;position:relative}
.steps-grid::before{content:'';position:absolute;top:33px;left:13%;right:13%;height:2px;background:linear-gradient(90deg,var(--green),var(--blue),var(--red),var(--gold));opacity:.25;z-index:0;border-radius:2px}
.step-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;position:relative;z-index:1}
/* Each step gets its own accent colour */
.step-card:nth-child(1) .step-num.active{background:var(--grad-primary);box-shadow:0 6px 24px var(--green-glow)}
.step-card:nth-child(2) .step-num.active{background:var(--grad-blue);box-shadow:0 6px 24px var(--blue-glow)}
.step-card:nth-child(3) .step-num.active{background:var(--grad-gold);box-shadow:0 6px 24px var(--gold-glow)}
.step-card:nth-child(4) .step-num.active{background:var(--grad-red);box-shadow:0 6px 24px var(--red-glow)}
.step-num{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:900;font-family:var(--ff-display);background:#fff;border:2px solid var(--cloud);color:var(--ink-3);box-shadow:var(--shadow-sm)}
.step-num.active{border-color:transparent;color:#fff}
.step-title{font-weight:900;font-size:.94rem;color:var(--ink)}
.step-desc{font-size:.81rem;color:var(--mist);line-height:1.65}

/* ════════════════════════════════════════════════════════════════
   ██ TESTIMONIALS ██
   ════════════════════════════════════════════════════════════════ */
.tcard{background:#fff!important;border-radius:20px;padding:30px;border:1px solid var(--cloud);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;gap:16px;transition:transform .3s var(--spring),box-shadow .3s}
.tcard:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.tcard-stars{display:flex;gap:3px;font-size:1.1rem}
.tcard-quote{font-size:.94rem;color:var(--ink-2);line-height:1.76;font-style:italic}
.tcard-author{display:flex;align-items:center;gap:13px;margin-top:auto}
.tcard-av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;flex-shrink:0;color:#fff}
.tcard:nth-child(1) .tcard-av{background:var(--grad-primary)}
.tcard:nth-child(2) .tcard-av{background:var(--grad-blue)}
.tcard:nth-child(3) .tcard-av{background:var(--grad-gold)}
.tcard:nth-child(4) .tcard-av{background:var(--grad-red)}
.tcard-name{font-weight:800;font-size:.87rem;color:var(--ink)}
.tcard-role{font-size:.74rem;color:var(--mist)}

/* ════════════════════════════════════════════════════════════════
   ██ AUTH PAGES ██
   ════════════════════════════════════════════════════════════════ */
.auth-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-visual{
  position:relative;
  background:linear-gradient(155deg,var(--black) 0%,var(--blue) 40%,var(--green-dk) 75%,#0a0505 100%);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  padding:60px 56px;overflow:hidden;
}
.auth-visual-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.12;mix-blend-mode:luminosity}
.auth-visual::before{content:'';position:absolute;top:-100px;right:-100px;width:420px;height:420px;border-radius:50%;background:rgba(0,71,171,.2)}
.auth-visual::after{content:'';position:absolute;bottom:30%;left:-60px;width:200px;height:200px;border-radius:50%;background:rgba(245,166,35,.12)}
/* RGB stripe at top of auth panel */
.auth-visual-stripe{position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-rgb)}
.av-content{position:relative;z-index:1;color:#fff}
.av-content h2{font-size:clamp(2rem,4vw,3.2rem);color:#fff;margin-bottom:18px}
.av-content p{color:rgba(255,255,255,.6);max-width:380px}
.av-stats{position:relative;z-index:1;display:flex;gap:36px;margin-bottom:44px}
.av-stat strong{display:block;font-size:1.95rem;font-weight:900;color:#fff;font-family:var(--ff-display)}
.av-stat span{font-size:.7rem;color:rgba(255,255,255,.42);font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.auth-form-wrap{display:flex;flex-direction:column;justify-content:center;padding:60px 68px;overflow-y:auto}
.auth-logo{display:flex;align-items:center;gap:13px;margin-bottom:40px;color:var(--ink)}
.auth-logo-icon{width:44px;height:44px;border-radius:11px;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 4px 18px var(--green-glow)}
.auth-logo-text strong{display:block;font-size:1rem;font-weight:900;color:var(--ink)}
.auth-logo-text small{font-size:.65rem;color:var(--mist);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.auth-title{font-size:clamp(1.8rem,3vw,2.4rem);color:var(--ink);margin-bottom:8px}
.auth-sub{color:var(--mist);margin-bottom:38px}
.auth-form{display:flex;flex-direction:column;gap:18px}
.auth-divider{display:flex;align-items:center;gap:12px;color:var(--mist);font-size:.76rem;font-weight:800}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--cloud)}
.auth-social{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.auth-social-btn{display:flex;align-items:center;justify-content:center;gap:9px;height:46px;border-radius:10px;border:2px solid var(--cloud);font-size:.83rem;font-weight:800;color:var(--ink-2);background:#fff;transition:all .15s}
.auth-social-btn:hover{border-color:var(--green);background:var(--green-lt);color:var(--green)}
.auth-switch{text-align:center;font-size:.83rem;color:var(--mist);margin-top:8px}
.auth-switch a{color:var(--green);font-weight:800}
.auth-switch a:hover{text-decoration:underline}
.otp-wrap{display:flex;gap:10px;justify-content:center}
.otp-input{width:60px;height:70px;text-align:center;font-size:1.8rem;font-weight:800;border:2.5px solid var(--cloud);border-radius:14px;font-family:var(--ff-mono);color:var(--ink);background:var(--paper);transition:border-color .15s,box-shadow .15s}
.otp-input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(0,154,68,.13);background:#fff}
.otp-input.filled{border-color:var(--green);background:var(--green-lt)}

/* ════════════════════════════════════════════════════════════════
   ██ MODALS ██
   ════════════════════════════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:24px;width:100%;max-width:530px;box-shadow:var(--shadow-xl);max-height:90vh;overflow-y:auto;position:relative;animation:modalIn .28s var(--spring)}
/* Coloured top stripe on modals */
.modal-box::before{content:'';display:block;height:4px;background:var(--grad-rgb);border-radius:24px 24px 0 0}
@keyframes modalIn{from{transform:scale(.9) translateY(20px);opacity:0}}
.modal-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--slate);transition:all .15s}
.modal-close:hover{background:var(--cloud);color:var(--ink)}
.payment-method{display:flex;align-items:center;gap:14px;padding:16px;border-radius:14px;border:2px solid var(--cloud);cursor:pointer;transition:all .15s}
.payment-method:hover,.payment-method.sel{border-color:var(--green);background:var(--green-lt)}
.pm-icon{width:48px;height:48px;border-radius:10px;object-fit:contain;background:var(--paper);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0}
.pm-name{font-weight:800;font-size:.9rem;color:var(--ink)}
.pm-desc{font-size:.75rem;color:var(--mist)}

/* ════════════════════════════════════════════════════════════════
   ██ TOAST ██
   ════════════════════════════════════════════════════════════════ */
#toast-container{position:fixed;bottom:32px;right:32px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{display:flex;align-items:flex-start;gap:12px;background:var(--ink);color:#fff;padding:16px 20px;border-radius:18px;box-shadow:var(--shadow-xl);min-width:290px;max-width:400px;pointer-events:all;animation:toastIn .35s var(--spring) both;cursor:pointer;border-left:4px solid var(--green)}
.toast.success{border-left-color:var(--green-mid)}
.toast.error{border-left-color:var(--red-vivid)}
.toast.info{border-left-color:var(--gold)}
.toast.blue{border-left-color:var(--blue-vivid)}
@keyframes toastIn{from{transform:translateX(120%);opacity:0}}
.toast-icon{font-size:1.1rem;flex-shrink:0;margin-top:1px}
.toast-title{font-size:.87rem;font-weight:800}
.toast-msg{font-size:.78rem;opacity:.72;margin-top:2px;line-height:1.45}

/* ════════════════════════════════════════════════════════════════
   ██ ADMIN PANEL ██  (uses its own styles in _admin.php, 
      but these improve the stats grid and chip colours)
   ════════════════════════════════════════════════════════════════ */
.admin-layout{display:flex;min-height:100vh;background:#edf1f3}
.admin-sidebar{width:264px;flex-shrink:0;background:var(--black);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
/* Sidebar top spectrum bar */
.admin-sidebar::before{content:'';display:block;height:3px;background:var(--grad-rgb);flex-shrink:0}
.asl-logo{padding:22px 20px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:13px;color:#fff}
.asl-logo-icon{width:38px;height:38px;border-radius:10px;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0;box-shadow:0 4px 14px var(--green-glow)}
.asl-logo-text strong{display:block;font-size:.97rem;font-weight:900;color:#fff}
.asl-logo-text small{display:block;font-size:.63rem;color:rgba(255,255,255,.32);font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.asl-badge{background:var(--green);color:#fff;padding:2px 10px;border-radius:var(--r-pill);font-size:.6rem;font-weight:900;text-transform:uppercase;margin-left:auto}
.asl-nav{flex:1;padding:14px 12px;display:flex;flex-direction:column;gap:2px}
.asl-sec-lbl{font-size:.6rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.2);padding:14px 8px 6px;margin-top:4px}
.asl-link{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:rgba(255,255,255,.48);font-size:.85rem;font-weight:700;transition:all .15s;white-space:nowrap;overflow:hidden}
.asl-link:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.85)}
.asl-link.active{background:var(--green);color:#fff;box-shadow:0 4px 18px var(--green-glow)}
.asl-icon{font-size:1.1rem;flex-shrink:0}
.asl-count{margin-left:auto;min-width:20px;height:20px;border-radius:var(--r-pill);background:var(--red-vivid);color:#fff;font-size:.63rem;font-weight:900;display:flex;align-items:center;justify-content:center}
.asl-footer{padding:16px 12px;border-top:1px solid rgba(255,255,255,.07)}
.admin-main{flex:1;overflow:hidden;display:flex;flex-direction:column;min-width:0}
.admin-topbar{height:64px;background:#fff;border-bottom:1px solid var(--cloud);display:flex;align-items:center;gap:16px;padding:0 28px;box-shadow:0 2px 12px rgba(0,0,0,.05);flex-shrink:0}
.admin-page{padding:32px;flex:1;overflow-y:auto}
.admin-page-title{font-size:1.5rem;font-weight:900;color:var(--ink);margin-bottom:4px}
.admin-page-sub{font-size:.83rem;color:var(--mist);margin-bottom:28px}
/* Stat cards with colour coding */
.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:28px}
.stat-card{background:#fff;border-radius:18px;padding:24px;border:1px solid var(--cloud);box-shadow:var(--shadow-xs);display:flex;align-items:flex-start;gap:14px;transition:transform .2s var(--spring),box-shadow .2s}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stat-card:nth-child(1){border-top:3px solid var(--green)}
.stat-card:nth-child(2){border-top:3px solid var(--blue)}
.stat-card:nth-child(3){border-top:3px solid var(--gold)}
.stat-card:nth-child(4){border-top:3px solid var(--red)}
.sc-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.35rem;flex-shrink:0}
.sc-icon.green{background:var(--green-lt)}
.sc-icon.blue{background:var(--blue-lt)}
.sc-icon.red{background:var(--red-lt)}
.sc-icon.gold{background:var(--gold-lt)}
.sc-icon.dark{background:var(--paper)}
.sc-body-val{font-size:1.7rem;font-weight:900;color:var(--ink);font-family:var(--ff-display);letter-spacing:-.02em}
.sc-body-lbl{font-size:.74rem;color:var(--mist);font-weight:700;margin-top:3px}
.sc-body-delta{font-size:.71rem;font-weight:800;margin-top:5px}
.sc-body-delta.up{color:var(--green)}
.sc-body-delta.down{color:var(--red)}
.data-table-wrap{background:#fff;border-radius:18px;border:1px solid var(--cloud);overflow:hidden;box-shadow:var(--shadow-xs)}
.dt-header{padding:20px 26px;border-bottom:1px solid var(--cloud);display:flex;align-items:center;justify-content:space-between;gap:16px}
.dt-header h3{font-size:.98rem;font-weight:900;color:var(--ink)}
table.dt{width:100%;border-collapse:collapse}
table.dt thead th{padding:12px 22px;text-align:left;font-size:.7rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;color:var(--mist);background:var(--paper);border-bottom:1px solid var(--cloud)}
table.dt tbody td{padding:15px 22px;font-size:.85rem;color:var(--ink-2);border-bottom:1px solid var(--cloud);vertical-align:middle}
table.dt tbody tr:last-child td{border-bottom:none}
table.dt tbody tr:hover{background:var(--paper)}
.td-strong{font-weight:800;color:var(--ink)}
.td-mono{font-family:var(--ff-mono);font-size:.76rem}
.td-actions{display:flex;gap:7px}
.td-btn{padding:6px 13px;border-radius:9px;font-size:.74rem;font-weight:800;background:var(--paper);color:var(--ink-2);border:1px solid var(--cloud);cursor:pointer;transition:all .15s}
.td-btn:hover{background:var(--green);color:#fff;border-color:var(--green)}
.td-btn.danger:hover{background:var(--red);border-color:var(--red);color:#fff}
/* Status chips */
.status-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 11px;border-radius:var(--r-pill);font-size:.7rem;font-weight:900}
.status-chip::before{content:'';width:5px;height:5px;border-radius:50%}
.status-chip.confirmed,.status-chip.available,.status-chip.completed{background:var(--green-lt);color:var(--green-dk)}
.status-chip.confirmed::before,.status-chip.available::before,.status-chip.completed::before{background:var(--green)}
.status-chip.pending{background:var(--gold-lt);color:var(--gold-dk)}
.status-chip.pending::before{background:var(--gold)}
.status-chip.cancelled,.status-chip.failed,.status-chip.sold{background:var(--red-lt);color:var(--red)}
.status-chip.cancelled::before,.status-chip.failed::before,.status-chip.sold::before{background:var(--red)}
/* Admin dashboard stat grid (inline styles in _admin.php use these) */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-box{background:#fff;border-radius:16px;padding:22px;border:1px solid var(--cloud);box-shadow:var(--shadow-xs);display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;transition:all .2s var(--spring)}
.stat-box:hover{transform:translateY(-5px);box-shadow:var(--shadow-green);border-color:var(--green)}
.stat-ic{font-size:1.8rem}
.stat-val{font-size:1.8rem;font-weight:900;color:var(--ink);font-family:var(--ff-display)}
.stat-lbl{font-size:.72rem;font-weight:800;color:var(--mist);text-transform:uppercase;letter-spacing:.06em;text-align:center}
.adm-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);background:var(--red-vivid);color:#fff;font-size:.62rem;font-weight:900}
.chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--r-pill);font-size:.7rem;font-weight:900}
.chip-g{background:var(--green-lt);color:var(--green-dk)}
.chip-gold{background:var(--gold-lt);color:var(--gold-dk)}
.chip-r{background:var(--red-lt);color:var(--red)}
.chip-b{background:var(--blue-lt);color:var(--blue)}
.empty-state{padding:40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.empty-state .ico{font-size:2.5rem}
.empty-state h3{font-size:1rem;font-weight:800;color:var(--ink)}
.empty-state p{font-size:.84rem;color:var(--mist)}
/* Admin tables */
.tbl{width:100%;border-collapse:collapse}
.tbl th{padding:10px 16px;text-align:left;font-size:.67rem;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:var(--mist);background:var(--paper);border-bottom:1px solid var(--cloud)}
.tbl td{padding:13px 16px;font-size:.84rem;color:var(--ink-2);border-bottom:1px solid var(--cloud);vertical-align:middle}
.tbl tbody tr:hover{background:var(--paper)}
/* Admin topbar elements */
.adm-topbar{height:62px;background:#fff;border-bottom:1px solid var(--cloud);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.adm-topbar-title{flex:1}
.adm-topbar-title strong{display:block;font-size:1rem;font-weight:900;color:var(--ink)}
.adm-topbar-title small{font-size:.74rem;color:var(--mist)}
.adm-page{padding:24px 26px;flex:1}
.btn-p{background:var(--grad-primary);color:#fff;box-shadow:0 3px 14px var(--green-glow)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--green-glow)}
.btn-r{background:var(--grad-red);color:#fff}
.btn-r:hover{transform:translateY(-2px)}
.btn-ghost.adm{background:transparent;color:var(--slate);border:2px solid var(--cloud)}
.btn-ghost.adm:hover{border-color:var(--green);color:var(--green)}

/* ════════════════════════════════════════════════════════════════
   ██ FOOTER ██
   ════════════════════════════════════════════════════════════════ */
footer{
  background:linear-gradient(175deg,var(--black) 0%,#050d12 40%,#05100a 80%,var(--black) 100%);
  color:rgba(255,255,255,.5);
  position:relative;overflow:hidden;
}
/* Subtle RGB glow at top of footer */
footer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--green),var(--blue),var(--red),var(--gold),transparent);
}
.footer-main{padding:80px 0 52px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px}
.footer-brand{display:flex;flex-direction:column;gap:24px}
.footer-logo{display:flex;align-items:center;gap:14px;color:#fff}
.footer-logo-icon{width:42px;height:42px;border-radius:11px;background:var(--grad-primary);display:flex;align-items:center;justify-content:center;font-size:21px;box-shadow:0 4px 18px var(--green-glow)}
.footer-logo-text strong{display:block;font-size:1rem;font-weight:900;color:#fff}
.footer-logo-text small{font-size:.63rem;color:rgba(255,255,255,.32);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.footer-desc{font-size:.87rem;line-height:1.8;color:rgba(255,255,255,.45)}
/* Social icons — each with its brand colour on hover */
.footer-social{display:flex;gap:10px}
.fsocial-link{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .2s var(--spring)}
.fsocial-link:hover{transform:translateY(-4px) scale(1.12)}
.fsocial-link.yt:hover{background:#FF0000;border-color:#FF0000;box-shadow:0 6px 20px rgba(255,0,0,.4)}
.fsocial-link.tw:hover{background:var(--ink-2);border-color:var(--ink-2)}
.fsocial-link.li:hover{background:#0A66C2;border-color:#0A66C2;box-shadow:0 6px 20px rgba(10,102,194,.4)}
.fsocial-link.ig:hover{background:linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);border-color:transparent}
.fsocial-link.fb:hover{background:#1877F2;border-color:#1877F2;box-shadow:0 6px 20px rgba(24,119,242,.4)}
.footer-col-title{font-size:.68rem;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.26);margin-bottom:18px}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:.87rem;color:rgba(255,255,255,.46);transition:color .12s,padding-left .12s}
.footer-links a:hover{color:#fff;padding-left:6px}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.06);padding:24px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.footer-bottom-left{font-size:.8rem;color:rgba(255,255,255,.28)}
.footer-bottom-links{display:flex;gap:22px}
.footer-bottom-links a{font-size:.79rem;color:rgba(255,255,255,.28);transition:color .12s}
.footer-bottom-links a:hover{color:rgba(255,255,255,.65)}

/* Float chat */
.float-chat-btn{
  position:fixed;bottom:32px;right:32px;z-index:900;
  width:60px;height:60px;border-radius:50%;
  background:var(--grad-primary);color:#fff;font-size:1.45rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 36px var(--green-glow),0 2px 8px rgba(0,0,0,.2);
  cursor:pointer;transition:transform .25s var(--spring),box-shadow .25s;
  border:3px solid rgba(255,255,255,.2);
}
.float-chat-btn:hover{transform:scale(1.13) rotate(-6deg);box-shadow:0 16px 50px var(--green-glow)}
.float-chat-badge{position:absolute;top:-3px;right:-3px;width:21px;height:21px;border-radius:50%;background:var(--red-vivid);color:#fff;font-size:.63rem;font-weight:900;display:flex;align-items:center;justify-content:center;border:2.5px solid var(--black)}

/* ════════════════════════════════════════════════════════════════
   ██ CHAT (Admin) ██
   ════════════════════════════════════════════════════════════════ */
.admin-chat{display:grid;grid-template-columns:300px 1fr;height:calc(100vh - 128px);border:1px solid var(--cloud);border-radius:20px;overflow:hidden;background:#fff}
.chat-sidebar{border-right:1px solid var(--cloud);display:flex;flex-direction:column}
.chat-sidebar-search{padding:14px 16px;border-bottom:1px solid var(--cloud)}
.chat-thread-list{overflow-y:auto;flex:1}
.cthread{padding:14px 16px;display:flex;gap:10px;cursor:pointer;border-bottom:1px solid var(--cloud);transition:background .12s}
.cthread:hover,.cthread.active{background:var(--paper)}
.cthread.active{border-left:3px solid var(--green)}
.cthread-av{width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.87rem;flex-shrink:0}
.cthread-name{font-size:.85rem;font-weight:800;color:var(--ink)}
.cthread-preview{font-size:.75rem;color:var(--mist);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;margin-top:2px}
.cthread-time{font-size:.68rem;color:var(--mist);flex-shrink:0}
.cthread-badge{min-width:18px;height:18px;border-radius:var(--r-pill);background:var(--green);color:#fff;font-size:.63rem;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 4px}
.chat-main{display:flex;flex-direction:column;background:var(--paper)}
.chat-msgs{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px}
.cbubble{max-width:68%;display:flex;flex-direction:column;gap:4px}
.cbubble.mine{align-self:flex-end;align-items:flex-end}
.cbubble.other{align-self:flex-start}
.cbubble-body{padding:13px 17px;border-radius:18px;font-size:.87rem;line-height:1.58}
.cbubble.mine .cbubble-body{background:var(--grad-primary);color:#fff;border-bottom-right-radius:4px}
.cbubble.other .cbubble-body{background:#fff;color:var(--ink-2);border:1px solid var(--cloud);border-bottom-left-radius:4px}
.cbubble-time{font-size:.67rem;color:var(--mist);padding:0 4px}
.chat-input-bar{padding:16px 20px;background:#fff;border-top:1px solid var(--cloud);display:flex;gap:10px}
.chat-input{flex:1;height:46px;padding:0 18px;border-radius:var(--r-pill);border:2px solid var(--cloud);font-size:.87rem;transition:border-color .15s,box-shadow .15s}
.chat-input:focus{border-color:var(--green);box-shadow:0 0 0 4px rgba(0,154,68,.1)}

/* Upload */
.upload-zone{border:2px dashed var(--fog);border-radius:20px;padding:48px;text-align:center;cursor:pointer;background:var(--paper);transition:border-color .2s,background .2s}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--green);background:var(--green-lt)}
.upload-zone-icon{font-size:2.8rem;margin-bottom:14px}
.upload-preview{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.upload-thumb{position:relative;width:104px;height:82px;border-radius:11px;overflow:hidden;border:2px solid var(--cloud)}
.upload-thumb img{width:100%;height:100%;object-fit:cover}
.upload-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;cursor:pointer;transition:background .12s}
.upload-del:hover{background:var(--red)}

/* ════════════════════════════════════════════════════════════════
   ██ UTILITIES ██
   ════════════════════════════════════════════════════════════════ */
.fade-up{opacity:0;transform:translateY(30px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.fade-up.visible{opacity:1;transform:translateY(0)}
.skeleton{background:linear-gradient(90deg,var(--cloud) 0%,var(--paper) 50%,var(--cloud) 100%);background-size:200% 100%;animation:shimmer 1.6s infinite;border-radius:10px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.hidden{display:none!important}
.text-green{color:var(--green)}.text-red{color:var(--red)}.text-blue{color:var(--blue)}.text-gold{color:var(--gold)}.text-mist{color:var(--mist)}.text-white{color:#fff}
.text-center{text-align:center}.font-display{font-family:var(--ff-display)}.font-mono{font-family:var(--ff-mono)}
.flex{display:flex}.flex-center{display:flex;align-items:center;justify-content:center}.flex-between{display:flex;align-items:center;justify-content:space-between}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr)}.grid-3{display:grid;grid-template-columns:repeat(3,1fr)}
.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.gap-32{gap:32px}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
/* Premium Banner */
.exclusive-banner {
  background: linear-gradient(90deg, #051a0e 0%, #0a2d1a 50%, #051a0e 100%);
  border-radius: 24px;
  padding: 32px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(37, 211, 102, 0.15);
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  margin-top: 40px;
  position: relative;
  overflow: hidden;
}
.exclusive-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--grad-primary);
}
.ex-content h3 { font-size: 1.6rem; color: #fff; margin-bottom: 6px; font-weight: 900; }
.ex-content p { color: rgba(255,255,255,0.6); font-size: 0.95rem; }
.ex-badge { background: #25D366; color: #fff; padding: 4px 12px; border-radius: 30px; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; margin-bottom: 10px; display: inline-block; }

/* ════════════════════════════════════════════════════════════════
   ██ RESPONSIVE ██
   ════════════════════════════════════════════════════════════════ */
@media (max-width:1200px){.prop-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:1024px){
  .nav-menu{display:none}
  .nav-menu.open{
    display:flex;flex-direction:column;
    position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
    background:rgba(8,15,8,.98);backdrop-filter:blur(20px);
    padding:20px;gap:5px;z-index:9000;
    animation:navSlideDown .3s var(--spring);
    overflow-y:auto;
  }
  @keyframes navSlideDown{from{transform:translateY(-20px);opacity:0}}
  .nav-menu.open .nav-link{font-size:1.1rem;padding:15px;width:100%;border-bottom:1px solid rgba(255,255,255,.05)}
  .nav-menu.open .nav-dropdown{display:block;position:static;background:none;box-shadow:none;padding-left:20px;opacity:1;visibility:visible;transform:none}
  
  .nav-right .btn-secondary,.nav-sep,.nav-search-form{display:none}
  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:40px;height:40px;cursor:pointer;z-index:9001;margin-left:15px;
  }
  .nav-toggle span{display:block;width:26px;height:2.5px;background:#fff;border-radius:2px;transition:all .3s}
  .nav-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav-toggle.open span:nth-child(2){opacity:0}
  .nav-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}

  .nav-logo{margin-right:auto}
  .auth-page{grid-template-columns:1fr}
  .auth-visual{display:none}
}
@media (max-width:768px){
  .container{padding:0 20px}.section{padding:72px 0}
  h1{font-size:2.4rem}h2{font-size:1.9rem}
  .hero .container .grid,.hero-content>div{grid-template-columns:1fr!important;gap:40px!important}
  .search-card{max-width:100%}.sc-row{grid-template-columns:1fr}
  .hero-stats-inner{flex-wrap:wrap;padding:0 20px}.hstat{min-width:50%;border-right:none;border-bottom:1px solid rgba(255,255,255,.06)}
  .prop-grid,.prop-grid-4{grid-template-columns:1fr}.steps-grid{grid-template-columns:1fr 1fr;gap:24px}
  .county-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr}
  .auth-form-wrap{padding:40px 28px}.attrs-grid{grid-template-columns:repeat(2,1fr)}
  .stat-grid,.stat-cards{grid-template-columns:repeat(2,1fr)}.admin-chat{grid-template-columns:1fr}
  .chat-sidebar{display:none}.pip{position:static}
  /* Gallery & Mobile Tweaks */
  .gallery-thumbs{grid-template-columns:repeat(4,1fr);gap:6px}
  .gthumb{border-width:2px}
  .pip-head{padding:18px 20px}
  .pip-price{font-size:1.6rem}
  
  /* Stacked Header for Phones */
  .nav-wrap{padding:10px 0;height:auto;flex-wrap:wrap;justify-content:space-between}
  .nav-right{margin-left:0}
  .nav-search-form.mobile-show{display:flex !important;width:100%;max-width:none !important;order:3;margin-top:12px;margin-right:0}
}
@media (max-width:480px){
  .sc-tabs{flex-direction:row}.btn-lg{height:50px;padding:0 24px;font-size:.88rem}
  .steps-grid{grid-template-columns:1fr}.county-grid{grid-template-columns:1fr 1fr}
  .hstat{min-width:100%}.time-slots{grid-template-columns:repeat(3,1fr)}
  .stat-grid,.stat-cards{grid-template-columns:1fr}
}

/* ════ GALLERY CLEAN MODE ════ */
body.lb-open .wa-widget,
body.lb-open .float-chat-btn,
body.lb-open #topInfoBar {
  display: none !important;
}

/* 🎥 CINEMATIC 3D PAN/ZOOM (Ken Burns) */
.ken-burns {
  animation: kenBurns 25s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  0%   { transform: scale(1.0); transform-origin: center center; }
  100% { transform: scale(1.18); transform-origin: top right; }
}

/* 📱 MOBILE HELPERS */
.mobile-only { display: none !important; }
@media (max-width:1024px) {
  .mobile-only { display: block !important; }
  .desktop-only { display: none !important; }
  .auth-page { grid-template-columns: 1fr !important; }
  .auth-visual { display: none !important; }
}
/* ── ARCHITECTURAL LIGHTING ── */
.architectural-lighting {
  filter: brightness(1.04) contrast(1.05) saturate(1.1) !important;
}

.pt-nav {
  padding-top: var(--header-h) !important;
}