/* Home Page Styles */

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Hide scrollbar but keep scroll functionality */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Opera */
}

/* =============================================================================
   STORY FLOW - Unified continuous narrative
   ============================================================================= */

.story-flow {
  background: linear-gradient(180deg,
    #ffffff 0%,
    #f8fafc 8%,
    #f8fafc 92%,
    #ffffff 100%
  );
}

/* Global scroll reveal animation */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal-on-scroll.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Section bridge text - connects sections narratively */
.section-bridge {
  text-align: center;
  padding: 48px 24px;
}

.section-bridge p {
  font-size: 1.125rem;
  font-weight: 500;
  color: #64748b;
  font-style: italic;
  margin: 0;
}

/* =============================================================================
   AWARDS SECTION - Quiet confidence
   ============================================================================= */

.awards-section {
  padding: 32px 0 40px;
}

.awards-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.stat-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-divider {
  width: 1px;
  height: 24px;
  background: #e2e8f0;
}

.awards-scroll-wrapper {
  position: relative;
  overflow: hidden;
}

.awards-fade-left,
.awards-fade-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}

.awards-fade-left {
  left: 0;
  background: linear-gradient(to right, #f8fafc, transparent);
}

.awards-fade-right {
  right: 0;
  background: linear-gradient(to left, #f8fafc, transparent);
}

.awards-track {
  overflow: hidden;
}

.awards-scroll {
  display: flex;
  animation: scroll-awards 25s linear infinite;
}

.awards-scroll:hover {
  animation-play-state: paused;
}

.awards-set {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 16px;
  flex-shrink: 0;
}

.award-logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.award-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

@keyframes scroll-awards {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .awards-stats {
    gap: 8px;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    padding: 0 4px;
  }

  .stat-number {
    font-size: 1.1rem;
  }

  .stat-divider {
    display: none;
  }

  .stat-item {
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex: 1;
    min-width: 0;
  }

  .stat-label {
    font-size: 0.5rem;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  .awards-stats {
    gap: 4px;
  }

  .stat-number {
    font-size: 0.95rem;
  }

  .stat-label {
    font-size: 0.45rem;
  }
}

/* =============================================================================
   SAVINGS SECTION - Embedded helper
   ============================================================================= */

/* =============================================================================
   SAVINGS SECTION - Compact layout with chart + benefits
   ============================================================================= */

.savings-section {
  padding: 64px 0 80px;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.savings-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.savings-header {
  text-align: center;
  margin-bottom: 40px;
}

.savings-headline {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.savings-subtext {
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
}

.savings-pain {
  color: #1e293b;
  font-weight: 600;
}

.savings-impact {
  color: #64748b;
}

/* Calculator Row - Chart + Benefits side by side */
.savings-calc-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-bottom: 32px;
}

.savings-calc-left {
  flex-shrink: 0;
}

.savings-calc-right {
  text-align: left;
}

.savings-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
}

.savings-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: #374151;
  padding: 10px 0;
}

.savings-benefits li i {
  color: #f16700;
  font-size: 0.875rem;
  width: 20px;
  text-align: center;
}

/* Donut - Smaller, supporting role */
.donut-visual {
  --fee-percent: 30%;
  position: relative;
  width: 160px;
  height: 160px;
  margin: 0 auto 24px;
}

/* Donut Ring Styles */
.donut-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #f16700;
  position: relative;
  box-shadow:
    0 4px 20px rgba(241, 103, 0, 0.2),
    inset 0 0 0 2px rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.3s ease;
}

.donut-fee-arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #64748b 0%,
    #64748b var(--fee-percent),
    transparent var(--fee-percent),
    transparent 100%
  );
  transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.donut-ring::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 65%;
  height: 65%;
  background: white;
  border-radius: 50%;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.06);
  z-index: 2;
}

.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 3;
}

.donut-price {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.donut-keep {
  display: block;
  font-size: 0.5625rem;
  color: #f16700;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 3px;
}

.donut-fee-label {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #475569;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.6875rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 10;
}

.donut-fee-label span {
  color: rgba(255, 255, 255, 0.7);
}

.donut-fee-label strong {
  color: white;
  margin-left: 4px;
}

.donut-visual:hover .donut-fee-label {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

/* Slider - Minimal, clean */
.calculator-slider {
  max-width: 360px;
  margin: 0 auto;
}

.slider-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: #94a3b8;
  margin-top: 6px;
}
/* CTA Block - Single CTA carries the number */
.savings-cta-block {
  text-align: center;
}

.savings-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 36px;
  background: #f16700;
  color: white;
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(241, 103, 0, 0.3);
}

.savings-cta-button:hover {
  background: #ea580c;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(241, 103, 0, 0.4);
}

.savings-cta-button i {
  font-size: 0.875rem;
  transition: transform 0.2s ease;
}

.savings-cta-button:hover i {
  transform: translateX(4px);
}

.cta-dynamic {
  display: inline;
}

/* Legacy calculator stats - kept for compatibility */
.calculator-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}

/* Savings number animations */
@keyframes savingsBounce {
  0% { transform: scale(1); }
  25% { transform: scale(1.15); }
  50% { transform: scale(0.95); }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes savingsPulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

.calculator-stat-value {
  display: inline-block;
}

.savings-bounce {
  animation: savingsBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.savings-pulse {
  animation: savingsPulse 0.3s ease-out;
}

/* Legacy grid layout fallback */
.calculator-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: center;
  margin-bottom: 24px;
}

.calculator-stat-value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 4px;
}

.calculator-stat.primary .calculator-stat-value {
  color: #f16700;
}

.calculator-stat-label {
  font-size: 0.75rem;
  color: #64748b;
}

.slider-track {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}

.slider-track-bg {
  position: absolute;
  inset: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 10px;
  background: #e2e8f0;
  border-radius: 5px;
}

.slider-track-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 10px;
  background: #2563eb;
  border-radius: 5px;
  transition: width 0.1s ease;
}

.slider-dots {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}

.slider-dots .dot {
  width: 8px;
  height: 8px;
  background: #cbd5e1;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.slider-dots .dot.active {
  background: #2563eb;
}

.slider-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* =============================================================================
   SAVINGS COMPARISON - Fee comparison with bars
   ============================================================================= */

.savings-comparison {
  margin: 24px 0 8px;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 16px;
  border: 1px solid #e2e8f0;
}

.comparison-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comparison-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.comparison-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
  color: #64748b;
}

.comparison-icon i {
  font-size: 1rem;
}

/* Vana logo container */
.comparison-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: white;
  padding: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.vana-logo-compare {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.comparison-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.comparison-label {
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 500;
}

.comparison-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: #475569;
  transition: all 0.3s ease;
}

.comparison-value.vana-value {
  color: #f16700;
}

.comparison-bar {
  flex: 1;
  height: 8px;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}

.comparison-bar-track {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.comparison-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.comparison-bar-fill.traditional-fill {
  background: linear-gradient(90deg, #cbd5e1 0%, #94a3b8 100%);
  width: 30%;
}

.comparison-bar-fill.vana-fill {
  background: linear-gradient(90deg, #fdba74 0%, #f16700 100%);
  width: 0%;
}

@media (max-width: 768px) {
  .savings-section {
    padding: 48px 0 64px;
  }

  .savings-container {
    padding: 0 16px;
  }

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

  .savings-headline {
    font-size: 1.875rem;
  }

  .savings-subtext {
    font-size: 1rem;
  }

  .savings-calc-row {
    flex-direction: column;
    gap: 24px;
  }

  .savings-calc-right {
    text-align: center;
  }

  .savings-benefits {
    display: inline-block;
    text-align: left;
  }

  .savings-benefits li {
    font-size: 0.9375rem;
    padding: 8px 0;
  }

  .donut-visual {
    width: 140px;
    height: 140px;
    margin-bottom: 20px;
  }

  .donut-price {
    font-size: 1.25rem;
  }

  .donut-keep {
    font-size: 0.5rem;
  }

  .donut-fee-label {
    display: none;
  }

  .savings-cta-button {
    padding: 14px 28px;
    font-size: 1rem;
  }
}

/* ===== VANA HERO SECTION ===== */
.vana-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #1e40af 0%,
    #2563eb 15%,
    #3b82f6 30%,
    #60a5fa 45%,
    #93c5fd 60%,
    #bfdbfe 75%,
    #dbeafe 85%,
    #f0f9ff 93%,
    #ffffff 100%
  ) !important;
}

/* #home-main-hero gradient removed - now using background image */

/* Hero content - stays above background */
.hero-content {
  position: relative;
  z-index: 5;
  max-width: 1100px;
  margin: 0 auto;
  padding: 140px 24px 100px;
  text-align: center;
}

.hero-content h1 {
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: clamp(36px, 5vw, 56px);
  margin: 0;
}

#home-main-hero h1 {
  min-height: auto;
  display: block;
  line-height: 1.1;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.hero-content p {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
}

/* Animated gradient line under subtitle, above CTAs */
.hero-content .text-center::after {
  content: '';
  display: block;
  width: 360px;
  height: 3px;
  margin: 20px auto 0;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    #f97316 0%,
    #fbbf24 25%,
    #ffffff 50%,
    #fbbf24 75%,
    #f97316 100%
  );
  background-size: 200% 100%;
  animation: lineGradientShift 4s ease-in-out infinite;
}

@keyframes lineGradientShift {
  0%, 100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

.hero-content > * {
  pointer-events: auto;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-content {
    padding: 100px 16px 60px;
  }

  .hero-content h1,
  #home-main-hero h1 {
    font-size: clamp(28px, 7vw, 40px);
  }

  .hero-content p {
    font-size: 16px;
  }

  .vana-hero::before {
    background-size: 50px 50px;
  }
}

/* ===== HOME HERO SPLIT LAYOUT ===== */

/* .home-hero styles moved to home.css for #home-main-hero */

/* Two-column split layout */
.home-hero-split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
  align-items: stretch;
  min-height: 550px;
}

/* Left side - CTA Content */
.home-hero-left {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 10px;
}

.home-hero-headline {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 16px 0;
  text-align: left;
  min-height: 70px; /* Accommodate 2 lines on desktop */
}

.home-hero-subheadline {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  margin: 0;
  max-width: 440px;
  text-align: left;
  min-height: 56px; /* Accommodate 2 lines */
}

/* CTA Buttons - Equal Width */
.home-hero-left .cta-btn {
  flex: 1;
  justify-content: center;
  white-space: nowrap;
}

/* Right side - Video/Image */
.home-hero-right {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 400px;
}

.home-hero-media {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.2),
    0 16px 32px rgba(0, 0, 0, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.home-hero-media:hover {
  transform: translateY(-8px);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.25),
    0 20px 40px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.15),
    0 0 60px rgba(59, 130, 246, 0.15);
}

/* Subtle image zoom on hover */
.home-hero-media:hover .home-hero-image {
  transform: scale(1.02);
}

.home-hero-image,
.home-hero-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ===== HOME HERO LIGHTS EFFECT ===== */
/* Main styles in home.css - these are just for the lights animation */

/* Night overlay for house */
.home-hero-bg .night-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 15, 30, 0.4);
  transition: opacity 1200ms ease;
  pointer-events: none;
  z-index: 1;
}

/* When lights are on, reduce night overlay */
#home-main-hero.is-day .home-hero-bg .night-overlay {
  opacity: 0.15;
}

/* Window glow for lights effect */
.home-hero-bg .window-glow {
  position: absolute;
  background: rgba(255, 210, 120, 0.8);
  filter: blur(25px);
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 800ms ease, transform 800ms ease;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
}

.home-hero-bg .window-glow.glow-on {
  opacity: 1;
  transform: scale(1.1);
}

.home-hero-bg .window-glow.glow-on::after {
  content: '';
  position: absolute;
  inset: -30%;
  background: inherit;
  filter: blur(40px);
  border-radius: inherit;
  opacity: 0.6;
  animation: glowPulseBg 4s ease-in-out infinite;
}

@keyframes glowPulseBg {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.15); }
}

/* ===== HERO LISTING OVERLAY ===== */
.hero-listing-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* VANA LISTED Badge - top left */
.hero-badge-vana {
  position: absolute;
  top: 20px;
  left: 20px;
  background: linear-gradient(135deg, #f16700 0%, #ea580c 100%);
  color: white;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(241, 103, 0, 0.4);
}

.hero-badge-vana i {
  font-size: 0.875rem;
}

/* Status Badge - top right (narrative whisper, not a button) */
.hero-badge-status {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  padding: 0;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Bottom listing info */
.hero-listing-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(0, 0, 0, 0.5) 60%,
    transparent 100%
  );
  border-radius: 0 0 24px 24px;
}

.hero-listing-price {
  font-size: 2rem;
  font-weight: 800;
  color: white;
  margin-bottom: 4px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.hero-listing-address {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.hero-listing-details {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.9);
}

.hero-listing-details span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-listing-details i {
  color: #f97316;
  font-size: 0.875rem;
}

/* Sell page - emotional tagline styling */
.hero-listing-tagline {
  font-size: 0.9375rem;
  color: white !important;
  font-style: italic;
  margin-top: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Make address more prominent on sell page */
#sell-main-hero .hero-listing-address {
  font-size: 1.25rem;
  font-weight: 600;
  color: white;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .hero-listing-tagline {
    font-size: 0.875rem;
  }

  #sell-main-hero .hero-listing-address {
    font-size: 1rem;
  }
}

/* Reduced motion for hero card */
@media (prefers-reduced-motion: reduce) {
  .home-hero-media,
  .home-hero-image,
  .home-hero-video {
    transition: none;
  }

  .home-hero-media:hover {
    transform: none;
  }

  .home-hero-media:hover .home-hero-image {
    transform: none;
  }
}

/* Responsive adjustments for overlay */
@media (max-width: 768px) {
  .hero-badge-vana,
  .hero-badge-status {
    padding: 8px 12px;
    font-size: 0.8125rem;
    top: 12px;
  }

  .hero-badge-vana {
    left: 12px;
  }

  .hero-badge-status {
    right: 12px;
  }

  .hero-listing-info {
    padding: 16px;
  }

  .hero-listing-price {
    font-size: 1.5rem;
  }

  .hero-listing-address {
    font-size: 0.875rem;
  }

  .hero-listing-details {
    gap: 12px;
    font-size: 0.8125rem;
  }
}

/* ===== HOME HERO RESPONSIVE ===== */

@media (max-width: 1024px) {
  .home-hero {
    min-height: auto;
  }

  .home-hero-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .home-hero-left {
    order: 1;
  }

  .home-hero-right {
    order: 2;
  }

  .home-hero-right {
    min-height: 350px;
  }

  .home-hero-media {
    max-width: 100%;
    height: 100%;
  }
}

@media (max-width: 768px) {
  .home-hero-split {
    padding-top: 2rem;
    padding-bottom: 2rem;
    gap: 24px;
  }

  .home-hero-headline {
    font-size: 1.75rem;
    min-height: 80px; /* 2 lines at 1.75rem */
  }

  .home-hero-subheadline {
    font-size: 1rem;
    min-height: 52px; /* 2 lines */
  }

  .home-hero-media {
    max-width: 100%;
    border-radius: 16px;
  }
}

@media (max-width: 480px) {
  .home-hero-headline {
    font-size: 1.5rem;
    min-height: 72px; /* 2 lines at 1.5rem */
  }

  .home-hero-subheadline {
    font-size: 0.9375rem;
    min-height: 48px; /* 2 lines */
  }
}

/* ===== ARCH CARD SERVICES SECTION ===== */

/* ===== SECTION LAYOUT ===== */
.arch-services-section {
  background: transparent;
  padding: 64px 0 32px;
}

.arch-services-header {
  text-align: center;
  margin-bottom: 48px;
}

.arch-services-header h2 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 12px;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.arch-services-header p {
  font-size: 1.125rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
  letter-spacing: -0.01em;
}

/* Value Prop - Differentiator line */
.arch-services-value-prop {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1e40af;
  max-width: 600px;
  margin: 0 auto;
  letter-spacing: -0.01em;
}

/* ===== GRID LAYOUT ===== */
.arch-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== FEATURED CARDS LAYOUT (Sell & Find) ===== */
.arch-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  max-width: 960px;
  margin: 0 auto 40px;
  padding: 0 24px;
}

/* ===== SECONDARY CARDS LAYOUT (Finance, Insure, Escrow, Manage) ===== */
.arch-secondary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== FEATURED CARD STYLES - Softer, unified ===== */
.arch-card.featured {
  padding: 32px 28px;
  border: 1px solid rgba(226, 232, 240, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.98);
}

.arch-card.featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f16700 0%, #ea580c 50%, #f97316 100%);
  opacity: 0.7;
}

.arch-card.featured:hover {
  border-color: rgba(241, 103, 0, 0.15);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.arch-card.featured .arch-image {
  aspect-ratio: 1 / 0.75;
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%);
}

.arch-card.featured .arch-card-title {
  font-size: 1.5rem;
}

.arch-card.featured .arch-card-subtitle {
  font-size: 1rem;
  color: #475569;
}

/* Start here badge for featured cards */
.arch-card.featured .start-badge {
  display: inline-block;
  background: linear-gradient(135deg, #f16700 0%, #ea580c 100%);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* ===== SECONDARY CARD STYLES ===== */
.arch-card.secondary {
  padding: 20px 16px;
}

.arch-card.secondary .arch-image {
  aspect-ratio: 1 / 0.7;
}

.arch-card.secondary .arch-illustration {
  width: 50%;
  height: 50%;
}

.arch-card.secondary .arch-card-title {
  font-size: 1.1rem;
}

.arch-card.secondary .arch-card-subtitle {
  font-size: 0.8rem;
}

.arch-card.secondary .arch-card-description {
  font-size: 0.8rem;
}

.arch-card.secondary .arch-btn {
  padding: 8px 16px;
  font-size: 0.8rem;
  width: 100%;
  justify-content: center;
}

/* ===== REASSURANCE LINE ===== */
.arch-card-reassurance {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 4px;
  font-weight: 500;
}

.arch-card.featured .arch-card-reassurance {
  font-size: 0.85rem;
}

/* "Includes" line - hidden by default, fades in on hover */
.arch-card-includes {
  font-size: 0.75rem;
  color: #f16700;
  font-weight: 600;
  margin-top: 8px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease 0.1s, max-height 0.3s ease;
}

.arch-card:hover .arch-card-includes,
.arch-card.featured .arch-card-includes {
  opacity: 1;
  max-height: 30px;
}

/* Transition line between featured and secondary cards */
.arch-services-transition {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 32px 0 24px;
  position: relative;
}

.arch-services-transition::before,
.arch-services-transition::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0);
}

.arch-services-transition::before {
  right: calc(50% + 140px);
  background: linear-gradient(90deg, transparent, #e2e8f0);
}

.arch-services-transition::after {
  left: calc(50% + 140px);
  background: linear-gradient(90deg, #e2e8f0, transparent);
}

/* ===== RESPONSIVE FEATURED/SECONDARY GRIDS ===== */
@media (max-width: 1024px) {
  .arch-secondary-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 700px;
  }
}

@media (max-width: 768px) {
  .arch-featured-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 400px;
  }

  .arch-secondary-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 400px;
  }

  .arch-card.featured {
    padding: 24px 20px;
  }

  .arch-card.secondary {
    padding: 20px 16px;
  }
}

/* ===== ARCH CARD - Softer, less card-y ===== */
.arch-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 20px;
  padding: 28px 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(226, 232, 240, 0.5);
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
  text-align: center;
  position: relative;
}

.arch-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  border-color: rgba(226, 232, 240, 0.7);
}

/* Shared baseline connector between cards */
.arch-cards-baseline {
  width: 100%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
  margin: 32px auto 0;
}

/* ===== ARCH IMAGE CONTAINER ===== */
.arch-image {
  width: 100%;
  aspect-ratio: 1 / 0.9;
  border-radius: 120px 120px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  position: relative;
}

/* Unified arch background - soft neutral */
.arch-image {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
}

.arch-card:hover .arch-image {
  transform: scale(1.02);
}

/* ===== SVG ILLUSTRATION ===== */
.arch-illustration {
  width: 55%;
  height: 55%;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.arch-card:hover .arch-illustration {
  transform: scale(1.12) translateY(-4px);
}

/* ===== ANIMATED STARBURST ===== */
@keyframes starburstExpand {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  20% {
    opacity: 0.6;
  }
  100% {
    transform: scale(1.5) rotate(15deg);
    opacity: 0;
  }
}

.starburst-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(0);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(241, 103, 0, 0.3) 5deg,
    transparent 10deg,
    transparent 40deg,
    rgba(241, 103, 0, 0.3) 45deg,
    transparent 50deg,
    transparent 80deg,
    rgba(241, 103, 0, 0.3) 85deg,
    transparent 90deg,
    transparent 120deg,
    rgba(241, 103, 0, 0.3) 125deg,
    transparent 130deg,
    transparent 160deg,
    rgba(241, 103, 0, 0.3) 165deg,
    transparent 170deg,
    transparent 200deg,
    rgba(241, 103, 0, 0.3) 205deg,
    transparent 210deg,
    transparent 240deg,
    rgba(241, 103, 0, 0.3) 245deg,
    transparent 250deg,
    transparent 280deg,
    rgba(241, 103, 0, 0.3) 285deg,
    transparent 290deg,
    transparent 320deg,
    rgba(241, 103, 0, 0.3) 325deg,
    transparent 330deg,
    transparent 360deg
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.arch-card.featured:hover .starburst-animation {
  animation: starburstExpand 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* Ensure SVG stays above starburst */
.arch-card .arch-illustration {
  position: relative;
  z-index: 1;
}

/* ===== FONT AWESOME ICON VERSION ===== */
.arch-image-icon {
  font-size: 3rem;
  color: #f16700;
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%);
}

/* ===== SERVICE-SPECIFIC BACKGROUNDS ===== */
/* Sell - warm orange/coral */
.arch-card[data-service="sell"] .arch-image {
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%);
}

/* Find - cool blue */
.arch-card[data-service="find"] .arch-image {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
}
.arch-card[data-service="find"] .starburst-animation {
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(59, 130, 246, 0.25) 5deg, transparent 10deg,
    transparent 40deg, rgba(59, 130, 246, 0.25) 45deg, transparent 50deg,
    transparent 80deg, rgba(59, 130, 246, 0.25) 85deg, transparent 90deg,
    transparent 120deg, rgba(59, 130, 246, 0.25) 125deg, transparent 130deg,
    transparent 160deg, rgba(59, 130, 246, 0.25) 165deg, transparent 170deg,
    transparent 200deg, rgba(59, 130, 246, 0.25) 205deg, transparent 210deg,
    transparent 240deg, rgba(59, 130, 246, 0.25) 245deg, transparent 250deg,
    transparent 280deg, rgba(59, 130, 246, 0.25) 285deg, transparent 290deg,
    transparent 320deg, rgba(59, 130, 246, 0.25) 325deg, transparent 330deg,
    transparent 360deg
  );
}
.arch-card[data-service="find"]::before {
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 50%, #60a5fa 100%) !important;
}
.arch-card[data-service="find"] .start-badge {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
}

/* All secondary cards use cohesive brand blue palette */
.arch-card[data-service="finance"] .arch-image-icon,
.arch-card[data-service="insure"] .arch-image-icon,
.arch-card[data-service="escrow"] .arch-image-icon,
.arch-card[data-service="manage"] .arch-image-icon {
  background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  color: #1e40af;
}

.arch-image-icon i {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.arch-card:hover .arch-image-icon i {
  transform: scale(1.15) translateY(-4px);
}

/* ===== CARD CONTENT ===== */
.arch-card-content {
  text-align: center;
}

.arch-card-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
}

.arch-card-subtitle {
  font-size: 0.9rem;
  color: #64748b;
  margin: 0;
  line-height: 1.4;
  letter-spacing: -0.01em;
}

/* ===== HOVER HINT - "Click me" affordance ===== */
.arch-card-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: #9ca3af;
  transition: all 0.3s ease;
}

.arch-card-hint i {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

.arch-card:hover .arch-card-hint {
  opacity: 0;
  transform: translateY(-8px);
}

.arch-card:hover .arch-card-hint i {
  transform: translateX(4px);
}

/* ===== HIDDEN DETAILS (Revealed on Hover) ===== */
.arch-card-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0;
  transition: max-height 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              opacity 0.4s ease 0.1s,
              padding-top 0.4s ease;
}

.arch-card:hover .arch-card-details {
  max-height: 180px;
  opacity: 1;
  padding-top: 16px;
}

/* Secondary cards: always show details (no hover reveal) */
.arch-card.secondary .arch-card-details {
  max-height: 180px;
  opacity: 1;
  padding-top: 12px;
}

/* Featured cards: always show details (no hover reveal) */
.arch-card.featured .arch-card-details {
  max-height: 180px;
  opacity: 1;
  padding-top: 16px;
}

.arch-card-description {
  font-size: 0.875rem;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 16px 0;
}

/* Bullet points for cards - cleaner than dense paragraphs */
.arch-card-bullets {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  text-align: left;
}

.arch-card-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #475569;
  padding: 4px 0;
}

.arch-card-bullets li i {
  color: #22c55e;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* ===== CTA BUTTONS ===== */
.arch-card-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.arch-btn {
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.arch-btn.primary {
  background: linear-gradient(135deg, #f16700 0%, #ea580c 100%);
  color: white;
  box-shadow:
    0 4px 12px rgba(241, 103, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.arch-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(241, 103, 0, 0.4),
    0 0 16px rgba(241, 103, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.arch-btn.secondary {
  background: white;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.arch-btn.secondary:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateY(-2px);
}


/* ===== SCROLL REVEAL ANIMATIONS ===== */
.arch-card.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.arch-card.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.arch-card.scroll-reveal[data-delay="1"] { transition-delay: 0.05s; }
.arch-card.scroll-reveal[data-delay="2"] { transition-delay: 0.1s; }
.arch-card.scroll-reveal[data-delay="3"] { transition-delay: 0.15s; }
.arch-card.scroll-reveal[data-delay="4"] { transition-delay: 0.2s; }
.arch-card.scroll-reveal[data-delay="5"] { transition-delay: 0.25s; }
.arch-card.scroll-reveal[data-delay="6"] { transition-delay: 0.3s; }

/* Hover state overrides scroll-reveal transition */
.arch-card.scroll-reveal.revealed:hover {
  transform: translateY(-16px);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .arch-services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 700px;
  }

  .arch-services-header h2 {
    font-size: 2rem;
  }
}

@media (max-width: 640px) {
  .arch-services-section {
    padding: 60px 0;
  }

  .arch-services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 400px;
    padding: 0 16px;
  }

  .arch-services-header h2 {
    font-size: 1.75rem;
  }

  .arch-card {
    padding: 24px 20px;
  }

  /* Show details by default on mobile (no hover) */
  .arch-card .arch-card-details {
    max-height: 180px;
    opacity: 1;
    padding-top: 16px;
  }

  .arch-card-cta {
    flex-direction: column;
  }

  .arch-btn {
    justify-content: center;
    width: 100%;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .arch-card,
  .arch-card.scroll-reveal,
  .arch-image,
  .arch-illustration,
  .arch-card-details,
  .arch-btn {
    transition: none;
  }

  .arch-card.scroll-reveal {
    opacity: 1;
    transform: none;
  }

  .arch-card .arch-card-details {
    max-height: 180px;
    opacity: 1;
    padding-top: 16px;
  }
}


/* =============================================================================
   STORY STEP - Timeline marker between sections
   ============================================================================= */

.story-step {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 8px;
  background: #ffffff;
}

.story-step-line {
  flex: 1;
  max-width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #cbd5e1 50%, transparent 100%);
}

.story-step-marker {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15),
              0 2px 8px rgba(96, 165, 250, 0.3);
  margin: 0 16px;
}

.story-step-text {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  margin: 0;
  padding: 0 24px;
  letter-spacing: -0.01em;
  background: #ffffff;
}

@media (max-width: 640px) {
  .story-step {
    padding: 16px 16px 6px;
  }

  .story-step-line {
    max-width: 60px;
  }

  .story-step-marker {
    width: 8px;
    height: 8px;
    margin: 0 10px;
  }

  .story-step-text {
    font-size: 0.8125rem;
  }
}

/* =============================================================================
   SERVICE SPLIT PANEL - Brand-aligned design
   Icon left, numbered nav right, light background
   ============================================================================= */

.service-split-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  padding: 80px 0;
}

.service-split-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 500px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  gap: 48px;
  align-items: center;
}

/* =============================================================================
   LEFT PANEL - Icon + Brand + Caption
   ============================================================================= */

.service-split-left {
  position: relative;
  height: 100%;
  min-height: 450px;
}

.service-image-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-20px);
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-image-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* Visual panel with icon */
.service-panel-visual {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 50%, #bfdbfe 100%);
  border-radius: 24px;
  padding: 48px;
  border: 2px solid transparent;
  transition: border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Subtle orange warmth on active panel */
.service-image-panel.is-active .service-panel-visual {
  border-color: rgba(241, 103, 0, 0.12);
  box-shadow: 0 0 0 4px rgba(241, 103, 0, 0.04);
}

.panel-icon-large {
  width: 200px;
  height: 200px;
  background: white;
  border-radius: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(30, 64, 175, 0.12),
              0 0 0 1px rgba(30, 64, 175, 0.05);
}

.panel-icon-large i,
.panel-icon-large svg {
  font-size: 6rem;
  width: 6rem;
  height: 6rem;
  color: #1e40af;
}

.panel-brand {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e3a5f;
  letter-spacing: -0.02em;
}

/* Caption below icon */
.service-panel-caption {
  text-align: center;
  max-width: 320px;
}

.service-panel-caption p {
  color: #475569;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
}

/* =============================================================================
   RIGHT PANEL - Numbered Navigation
   ============================================================================= */

.service-split-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}

.service-nav-list {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* Individual nav item */
.service-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  border-bottom: 1px solid #e2e8f0;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-nav-item:first-child {
  border-top: 1px solid #e2e8f0;
}

.service-nav-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Step label - sequential context */
.service-nav-step {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Title */
.service-nav-title {
  font-size: 2.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #cbd5e1;
  transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              font-weight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Arrow indicator */
.service-nav-indicator {
  opacity: 0;
  transform: translateX(-8px);
  color: #f16700;
  font-size: 1.25rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Active state */
.service-nav-item.is-active {
  border-bottom-color: rgba(241, 103, 0, 0.3);
}

.service-nav-item.is-active .service-nav-step {
  color: #f16700;
}

.service-nav-item.is-active .service-nav-title {
  color: #1e293b;
  font-weight: 600;
}

.service-nav-item.is-active .service-nav-indicator {
  opacity: 1;
  transform: translateX(0);
}

/* Hover state for inactive items */
.service-nav-item:not(.is-active):hover {
  border-bottom-color: rgba(241, 103, 0, 0.15);
}

.service-nav-item:not(.is-active):hover .service-nav-step {
  color: #64748b;
}

.service-nav-item:not(.is-active):hover .service-nav-title {
  color: #64748b;
}

.service-nav-item:not(.is-active):hover .service-nav-indicator {
  opacity: 0.5;
  transform: translateX(0);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
  .service-split-container {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 32px;
  }

  .service-split-left {
    height: auto;
    min-height: 350px;
  }

  .service-split-right {
    padding: 0;
  }

  .service-nav-title {
    font-size: 2rem;
  }

  .service-nav-item {
    padding: 16px 0;
  }

  .service-nav-step {
    font-size: 0.6875rem;
  }

  .panel-icon-large {
    width: 160px;
    height: 160px;
  }

  .panel-icon-large i,
  .panel-icon-large svg {
    font-size: 5.5rem;
    width: 5.5rem;
    height: 5.5rem;
  }

  .panel-brand {
    font-size: 1.5rem;
  }

  .service-panel-caption p {
    font-size: 1rem;
  }
}

@media (max-width: 640px) {
  .service-split-section {
    padding: 60px 0;
  }

  .service-split-left {
    min-height: 280px;
  }

  .service-panel-visual {
    padding: 32px;
    gap: 24px;
  }

  .panel-icon-large {
    width: 140px;
    height: 140px;
    border-radius: 32px;
  }

  .panel-icon-large i,
  .panel-icon-large svg {
    font-size: 5rem;
    width: 5rem;
    height: 5rem;
  }

  .panel-brand {
    font-size: 1.25rem;
  }

  .service-nav-title {
    font-size: 1.5rem;
  }

  .service-nav-item {
    padding: 14px 0;
  }

  .service-nav-step {
    font-size: 0.625rem;
  }

  .service-nav-indicator {
    font-size: 1rem;
  }

  .service-panel-caption p {
    font-size: 0.9375rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .service-image-panel,
  .service-nav-item,
  .service-nav-title,
  .service-nav-number {
    transition: none;
  }
}

/* =============================================================================
   LIVE HOMES SECTION - Horizontal scrolling property cards
   ============================================================================= */

.live-homes-section {
  background: transparent;
  padding: 32px 0 48px;
}

/* Eyebrow text - dual-purpose framing */
.live-homes-eyebrow {
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  margin: 0 0 8px;
  font-style: italic;
}

/* Micro-bridge text - psychological scroll guide */
.live-homes-bridge {
  font-size: 0.875rem;
  font-weight: 500;
  color: #94a3b8;
  text-align: left;
  margin: 0 0 6px;
  font-style: italic;
}

.live-homes-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
}

.live-homes-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.live-homes-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.02em;
  margin: 0;
}

.live-homes-subtitle {
  font-size: 1rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

.live-homes-see-all {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1e40af;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease;
}

.live-homes-see-all:hover {
  color: #f16700;
}

.live-homes-see-all i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.live-homes-see-all:hover i {
  transform: translateX(4px);
}

/* 4-Column Grid Layout */
.live-homes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 0;
}

/* Ensure listing tiles fill grid cells with proper aspect ratio */
.live-homes-grid .listing-tile {
  width: 100%;
  aspect-ratio: 3 / 4;
}

/* See More Homes CTA - right on desktop, center on mobile */
.live-homes-cta-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 24px;
}

/* Legacy centered version */
.live-homes-cta {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}

.live-homes-see-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: white;
  color: #1e40af;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 50px;
  border: 2px solid #1e40af;
  text-decoration: none;
  transition: all 0.3s ease;
}

.live-homes-see-more:hover {
  background: #1e40af;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

.live-homes-see-more i {
  transition: transform 0.3s ease;
}

.live-homes-see-more:hover i {
  transform: translateX(4px);
}

/* City subtitle styling */
.listing-tile-city {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 2px 0 0;
}

/* =============================================================================
   PROPERTY CARD - Flat design (Redfin-inspired)
   ============================================================================= */

.property-card-flat {
  flex: 0 0 auto;
  width: 300px;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid #e2e8f0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.property-card-flat:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

/* Image container */
.property-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
  overflow: hidden;
}

.property-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.property-card-flat:hover .property-card-image img {
  transform: scale(1.05);
}

.property-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #94a3b8;
  font-size: 2.5rem;
}

/* Vana/Featured Badge */
.property-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.property-card-badge.badge-vana {
  background: linear-gradient(135deg, #f16700 0%, #ea580c 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(241, 103, 0, 0.3);
}

.property-card-badge.badge-featured {
  background: rgba(255, 255, 255, 0.95);
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.property-card-badge i {
  font-size: 0.7rem;
}

/* Status Badge */
.property-card-status {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  z-index: 2;
}

.property-card-status.status-active {
  background: #22c55e;
  color: white;
}

.property-card-status.status-pending {
  background: #eab308;
  color: white;
}

.property-card-status.status-closed,
.property-card-status.status-sold {
  background: #ef4444;
  color: white;
}

.property-card-status.status-coming-soon {
  background: #3b82f6;
  color: white;
}

/* Content area */
.property-card-content {
  padding: 16px;
}

.property-card-header {
  margin-bottom: 6px;
}

.property-card-price {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  letter-spacing: -0.02em;
}

/* Stats row */
.property-card-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  font-size: 0.8125rem;
  color: #475569;
}

.property-card-stats span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.property-card-stats span i {
  color: #94a3b8;
  font-size: 0.75rem;
}

/* Address */
.property-card-address {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #1e293b;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.property-card-city {
  font-size: 0.8125rem;
  color: #64748b;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =============================================================================
   LIVE HOMES RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
  .live-homes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .live-homes-section {
    padding: 8px 0 20px;
  }

  .live-homes-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .live-homes-title {
    font-size: 1.375rem;
  }

  .live-homes-subtitle {
    font-size: 0.9375rem;
  }

  .live-homes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .live-homes-cta-row {
    justify-content: center;
  }

  .live-homes-see-more {
    padding: 12px 24px;
    font-size: 0.9375rem;
  }
}

@media (max-width: 540px) {
  .live-homes-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =============================================================================
   SERVICE HOVER REVEAL GRID
   4-card grid with slide-up content reveal on hover + diagonal split effect
   ============================================================================= */

.service-hover-section {
  background: transparent;
  padding: 32px 0 80px;
}

.service-hover-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Individual Card */
.service-hover-card {
  position: relative;
  aspect-ratio: 1 / 1.3;
  background: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-hover-card:hover {
  box-shadow: 0 12px 32px rgba(30, 64, 175, 0.12);
  transform: translateY(-4px);
}

/* Gray diagonal split - visible by default */
.service-card-gray-diagonal {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 45%,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.5) 100%
  );
  z-index: 1;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-hover-card:hover .service-card-gray-diagonal {
  opacity: 0;
}

/* Background layers - blue on hover */
.service-card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #dbeafe 0%, #93c5fd 100%);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.service-hover-card:hover .service-card-bg {
  opacity: 1;
}

/* Diagonal split overlay - creates depth on hover */
.service-card-diagonal {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, 0.3) 40%,
    rgba(255, 255, 255, 0.3) 100%
  );
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  z-index: 3;
}

.service-hover-card:hover .service-card-diagonal {
  opacity: 1;
}

/* View details indicator - top right */
.service-card-indicator {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(148, 163, 184, 0.5);
  border-radius: 20px;
  z-index: 15;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card-indicator span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #475569;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card-indicator i {
  color: #475569;
  font-size: 0.75rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-hover-card:hover .service-card-indicator {
  background: rgba(30, 64, 175, 0.9);
  padding: 8px 14px;
}

.service-hover-card:hover .service-card-indicator span {
  opacity: 1;
  max-width: 80px;
  color: white;
}

.service-hover-card:hover .service-card-indicator i {
  color: white;
  transform: translateX(2px);
}

/* Default State: Icon + Title (visible by default) */
.service-card-default {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 24px;
  z-index: 10;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-hover-card:hover .service-card-default {
  opacity: 0;
  transform: translateY(-20px);
}

.service-card-icon {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.service-card-icon i {
  font-size: 5.5rem;
  color: #475569;
  transition: color 0.4s ease;
}

.service-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
  text-align: center;
  letter-spacing: -0.02em;
}

/* Reveal State: Content slides up from bottom on hover */
.service-card-reveal {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
  z-index: 12;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-hover-card:hover .service-card-reveal {
  transform: translateY(0);
  opacity: 1;
}

.service-card-label {
  display: inline-block;
  background: #1e293b;
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.service-card-description {
  font-size: 0.9375rem;
  color: #1e3a5f;
  line-height: 1.6;
  margin: 0 0 20px;
  font-weight: 500;
}

/* Bullet points for service cards */
.service-card-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.service-card-bullets li {
  font-size: 0.875rem;
  color: #1e3a5f;
  line-height: 1.5;
  padding: 3px 0;
  padding-left: 16px;
  position: relative;
}

.service-card-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: #1e40af;
  border-radius: 50%;
}

.service-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1e40af;
  transition: gap 0.3s ease;
}

.service-card-cta i {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.service-hover-card:hover .service-card-cta i {
  transform: translateX(4px);
}

/* =============================================================================
   SERVICE HOVER REVEAL - RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
  .service-hover-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .service-hover-card {
    aspect-ratio: 1 / 1.2;
  }
}

@media (max-width: 640px) {
  .service-hover-section {
    padding: 60px 0;
  }

  .service-hover-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 400px;
  }

  .service-hover-card {
    aspect-ratio: 1 / 0.9;
  }

  /* Show reveal state by default on mobile (no hover) */
  .service-card-default {
    position: relative;
    padding: 20px 20px 8px;
    justify-content: flex-start;
    flex-direction: row;
    gap: 12px;
  }

  .service-hover-card .service-card-default {
    opacity: 1;
    transform: none;
  }

  .service-card-icon {
    width: 48px;
    height: 48px;
  }

  .service-card-icon i {
    font-size: 1.75rem;
  }

  .service-card-title {
    font-size: 1.125rem;
    text-align: left;
  }

  .service-card-reveal {
    position: relative;
    transform: none;
    opacity: 1;
    padding: 0 20px 20px;
  }

  .service-card-label {
    font-size: 0.625rem;
    padding: 4px 8px;
    margin-bottom: 8px;
  }

  .service-card-description {
    font-size: 0.875rem;
    margin-bottom: 12px;
  }

  .service-card-indicator {
    top: 12px;
    right: 12px;
    padding: 6px 10px;
  }

  .service-card-indicator span {
    display: none;
  }

  /* Enable background on mobile */
  .service-hover-card .service-card-gray-diagonal {
    opacity: 0;
  }

  .service-hover-card .service-card-bg {
    opacity: 1;
  }

  .service-hover-card .service-card-diagonal {
    opacity: 1;
  }
}

/* =============================================================================
   STICKY MOBILE CTA
   Fixed bottom bar on mobile for key actions
   3-button layout: [Browse] [chat icon] [List Free]
   ============================================================================= */

.sticky-mobile-cta {
  display: none;
}

@media (max-width: 768px) {
  .sticky-mobile-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    gap: 8px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 999;
    border-top: 1px solid #e2e8f0;
  }

  /* Primary action button (Browse) */
  .sticky-mobile-cta .sticky-cta-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f16700 0%, #ea580c 100%);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(241, 103, 0, 0.3);
    transition: all 0.2s ease;
  }

  .sticky-mobile-cta .sticky-cta-primary:active {
    transform: scale(0.98);
  }

  /* Secondary action button (List Free) */
  .sticky-mobile-cta .sticky-cta-secondary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 10px;
    background: #1e40af;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
    transition: all 0.2s ease;
  }

  .sticky-mobile-cta .sticky-cta-secondary:active {
    transform: scale(0.98);
  }

  /* Chat icon button in the middle */
  .sticky-mobile-cta .sticky-cta-chat {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f16700 0%, #2563eb 100%);
    color: white;
    font-size: 1.125rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(241, 103, 0, 0.3);
    transition: all 0.2s ease;
    flex-shrink: 0;
  }

  .sticky-mobile-cta .sticky-cta-chat:active {
    transform: scale(0.95);
  }

  /* Add bottom padding to body to prevent content from being hidden */
  body {
    padding-bottom: 80px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .service-hover-card,
  .service-card-bg,
  .service-card-diagonal,
  .service-card-gray-diagonal,
  .service-card-default,
  .service-card-reveal,
  .service-card-plus {
    transition: none;
  }

  /* Show content by default for reduced motion preference */
  .service-card-reveal {
    transform: none;
    opacity: 1;
  }

  .service-card-default {
    opacity: 0;
  }

  .service-card-gray-diagonal {
    opacity: 0;
  }

  .service-card-bg,
  .service-card-diagonal {
    opacity: 1;
  }
}