/* 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;
  gap: 48px;
  width: max-content;
  animation: scroll-awards 30s linear infinite;
  animation-play-state: paused;
}

/* Activate scroll after hero video ends */
.awards-scroll.awards-scroll-active {
  animation-play-state: running;
}

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

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

.award-logo {
  width: 64px;
  height: 64px;
  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 - "Calculate your Vana Advantage"
   ============================================================================= */

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

.savings-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

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

.savings-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F6513B;
  margin: 0 0 12px;
}

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

.savings-headline-accent {
  color: #F6513B;
  font-style: italic;
}

.savings-subtext {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
  max-width: 520px;
}

.savings-highlight {
  background: rgba(246, 81, 59, 0.12);
  color: #F6513B;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

/* Calculator Row - Sliders left, Ring right */
.savings-calc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  margin-bottom: 48px;
}

.savings-calc-left {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.savings-calc-right {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(10, 105, 184, 0.06);
  border-radius: 24px;
  padding: 40px;
}

/* Slider Groups */
.savings-slider-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.savings-slider-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.savings-slider-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
}

.savings-slider-value {
  font-size: 2rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.02em;
  line-height: 1;
}

.savings-slider-value small {
  font-size: 1.25rem;
  font-weight: 700;
}

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

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

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

.slider-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  cursor: pointer;
  z-index: 2;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #F6513B;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 10px rgba(246, 81, 59, 0.4);
}

.slider-input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.1);
}

.slider-input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #F6513B;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.slider-input::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 10px rgba(246, 81, 59, 0.4);
}

.slider-input::-moz-range-track {
  background: transparent;
  border: none;
}

.calculator-slider {
  max-width: 100%;
}

.slider-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 6px;
}

/* Savings Ring */
.savings-ring-container {
  position: relative;
  width: 320px;
  height: 320px;
}

.savings-ring-bg {
  position: absolute;
  inset: -20px;
  background: radial-gradient(ellipse at center, rgba(10, 105, 184, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.savings-ring-visual {
  position: relative;
  width: 100%;
  height: 100%;
}

.savings-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.savings-ring-arc {
  transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.savings-ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.savings-ring-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #475569;
  margin-bottom: 4px;
}

.savings-ring-amount {
  display: block;
  font-size: 2.75rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.savings-ring-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 14px;
  background: #0a69b8;
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 20px;
}

/* Value Props - Full width 4-column row */
.savings-info-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-bottom: 48px;
  padding-top: 32px;
  border-top: 1px solid #e2e8f0;
}

.savings-info-card {
  padding: 0;
}

.savings-info-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F6513B;
  margin: 0 0 8px;
}

.savings-info-text {
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.5;
  margin: 0;
}

/* Comparison Cards */
.savings-comparison-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.savings-compare-card {
  position: relative;
  background: white;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.savings-compare-card.recommended {
  border-color: #F6513B;
  border-width: 2px;
}

.savings-compare-recommended-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  background: #F6513B;
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 4px;
}

.savings-compare-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 8px;
}

.savings-compare-label.accent {
  color: #F6513B;
}

.savings-compare-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}

.savings-compare-amount span {
  font-size: 1.75rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.02em;
}

.savings-compare-amount.accent span {
  color: #F6513B;
}

.savings-compare-amount small {
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 600;
}

.savings-compare-bar {
  height: 4px;
  border-radius: 2px;
  width: 60%;
}

.savings-compare-bar.traditional {
  background: #475569;
}

.savings-compare-bar.vana {
  background: #F6513B;
  width: 40%;
}

/* CTA Block */
.savings-cta-block {
  text-align: center;
}

.savings-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 48px;
  background: #F6513B;
  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(246, 81, 59, 0.3);
}

.savings-cta-button:hover {
  background: #D9412D;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(246, 81, 59, 0.4);
}

.savings-cta-quote {
  margin: 24px auto 0;
  max-width: 560px;
  font-size: 0.9375rem;
  font-style: italic;
  color: #64748b;
  line-height: 1.6;
}

/* Mobile */
@media (max-width: 768px) {
  .savings-section {
    padding: 56px 0 72px;
  }

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

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

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

  .savings-subtext {
    max-width: 100%;
    font-size: 1rem;
  }

  .savings-calc-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .savings-ring-container {
    width: 240px;
    height: 240px;
    margin: 0 auto;
  }

  .savings-ring-amount {
    font-size: 2rem;
  }

  .savings-info-row {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

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

/* ===== VANA HERO SECTION ===== */
.vana-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #0a69b8 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,
    #F6513B 0%,
    #fbbf24 25%,
    #ffffff 50%,
    #fbbf24 75%,
    #F6513B 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, #F6513B 0%, #D9412D 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(246, 81, 59, 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: #F6513B;
  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: #0a69b8;
  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, #F6513B 0%, #D9412D 50%, #F6513B 100%);
  opacity: 0.7;
}

.arch-card.featured:hover {
  border-color: rgba(246, 81, 59, 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, #F6513B 0%, #D9412D 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: #F6513B;
  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(246, 81, 59, 0.3) 5deg,
    transparent 10deg,
    transparent 40deg,
    rgba(246, 81, 59, 0.3) 45deg,
    transparent 50deg,
    transparent 80deg,
    rgba(246, 81, 59, 0.3) 85deg,
    transparent 90deg,
    transparent 120deg,
    rgba(246, 81, 59, 0.3) 125deg,
    transparent 130deg,
    transparent 160deg,
    rgba(246, 81, 59, 0.3) 165deg,
    transparent 170deg,
    transparent 200deg,
    rgba(246, 81, 59, 0.3) 205deg,
    transparent 210deg,
    transparent 240deg,
    rgba(246, 81, 59, 0.3) 245deg,
    transparent 250deg,
    transparent 280deg,
    rgba(246, 81, 59, 0.3) 285deg,
    transparent 290deg,
    transparent 320deg,
    rgba(246, 81, 59, 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: #F6513B;
  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: #0a69b8;
}

.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, #F6513B 0%, #D9412D 100%);
  color: white;
  box-shadow:
    0 4px 12px rgba(246, 81, 59, 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(246, 81, 59, 0.4),
    0 0 16px rgba(246, 81, 59, 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);
}

/* ===== ARCH CARD EYEBROW ===== */
.arch-card-eyebrow {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  z-index: 2;
  background: rgba(255, 255, 255, 0.8);
  padding: 4px 10px;
  border-radius: 4px;
}

/* ===== VANA FULL-SERVICE SECTION ===== */
.vana-fullservice-section {
  background: #f8fafc;
  padding: 80px 0 64px;
}

.vana-fullservice-header {
  margin-bottom: 24px;
}

.vana-fullservice-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F6513B;
  margin: 0 0 12px;
}

.vana-fullservice-headline {
  font-size: 2.75rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.vana-fullservice-headline em {
  font-style: italic;
}

.vana-fullservice-intro {
  max-width: 560px;
  margin-bottom: 56px;
}

.vana-fullservice-intro p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

.vana-fullservice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.vana-fullservice-card {
  text-decoration: none;
  padding: 0;
  transition: transform 0.3s ease;
}

.vana-fullservice-card:hover {
  transform: translateY(-4px);
}

.vana-fullservice-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(10, 105, 184, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background 0.3s ease;
}

.vana-fullservice-icon i {
  font-size: 1.25rem;
  color: #0a69b8;
  transition: transform 0.3s ease;
}

.vana-fullservice-card:hover .vana-fullservice-icon {
  background: rgba(10, 105, 184, 0.14);
}

.vana-fullservice-card:hover .vana-fullservice-icon i {
  transform: scale(1.1);
}

.vana-fullservice-card-title {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.vana-fullservice-card-text {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}

/* Divider line above the grid */
.vana-fullservice-grid::before {
  content: '';
  grid-column: 1 / -1;
  height: 1px;
  background: #e2e8f0;
  margin-bottom: 8px;
}

@media (max-width: 1024px) {
  .vana-fullservice-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 24px;
  }
}

@media (max-width: 640px) {
  .vana-fullservice-section {
    padding: 48px 0 40px;
  }

  .vana-fullservice-headline {
    font-size: 2rem;
  }

  .vana-fullservice-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 16px;
  }

  .vana-fullservice-intro {
    margin-bottom: 36px;
  }
}

/* ===== 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(246, 81, 59, 0.12);
  box-shadow: 0 0 0 4px rgba(246, 81, 59, 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(10, 105, 184, 0.12),
              0 0 0 1px rgba(10, 105, 184, 0.05);
}

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

.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: #F6513B;
  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(246, 81, 59, 0.3);
}

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

.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(246, 81, 59, 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 - matches savings section pattern */
.live-homes-eyebrow {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F6513B;
  margin: 0 0 12px;
}

/* 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 {
  margin-bottom: 32px;
}

.live-homes-title {
  font-size: 3rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 16px;
}

.live-homes-title-accent {
  color: #F6513B;
  font-style: italic;
}

.live-homes-subtitle {
  font-size: 1.0625rem;
  color: #475569;
  margin: 0;
  line-height: 1.6;
  max-width: 520px;
}

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

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

.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 */
.live-homes-grid .listing-tile {
  width: 100%;
  height: 380px;
}

/* 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: #0a69b8;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 50px;
  border: 2px solid #0a69b8;
  text-decoration: none;
  transition: all 0.3s ease;
}

.live-homes-see-more:hover {
  background: #0a69b8;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 105, 184, 0.3);
}

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

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


/* =============================================================================
   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, #F6513B 0%, #D9412D 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(246, 81, 59, 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-title {
    font-size: 2rem;
  }

  .live-homes-subtitle {
    font-size: 1rem;
    max-width: 100%;
  }

  .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(10, 105, 184, 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(10, 105, 184, 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: #0a69b8;
  border-radius: 50%;
}

.service-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0a69b8;
  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;
  }
}

/* =============================================================================
   CLOSING CTA SECTION
   Final conversion section before footer
   ============================================================================= */

.closing-cta-section {
  padding: 80px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #eef4fa 50%, #dbeafe 100%);
}

.closing-cta-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.closing-cta-headline {
  font-size: 2.75rem;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 16px;
}

.closing-cta-subtext {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #475569;
  margin: 0 0 36px;
}

.closing-cta-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.closing-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  letter-spacing: -0.01em;
}

.closing-btn-primary {
  background: #F6513B;
  color: white;
  box-shadow: 0 4px 16px rgba(246, 81, 59, 0.35);
}

.closing-btn-primary:hover {
  background: #D9412D;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(246, 81, 59, 0.4),
              0 0 16px rgba(246, 81, 59, 0.2);
}

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

.closing-btn-secondary:hover {
  background: #0a69b8;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(10, 105, 184, 0.3);
}

@media (max-width: 640px) {
  .closing-cta-section {
    padding: 48px 0;
  }

  .closing-cta-headline {
    font-size: 2rem;
  }

  .closing-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .closing-btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* =============================================================================
   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, #F6513B 0%, #D9412D 100%);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(246, 81, 59, 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: #0a69b8;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(10, 105, 184, 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, #F6513B 0%, #2563eb 100%);
    color: white;
    font-size: 1.125rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(246, 81, 59, 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;
  }
}