/* Home Page Styles */

/* ===== 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 {
  position: relative;
  min-height: 650px;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    #1e40af 0%,
    #2563eb 15%,
    #3b82f6 30%,
    #60a5fa 45%,
    #93c5fd 60%,
    #bfdbfe 75%,
    #dbeafe 85%,
    #f0f9ff 93%,
    #ffffff 100%
  );
}

/* 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;
}

.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;
}

/* 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);
}

/* ===== 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;
}

/* 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;
  }

  .home-hero-subheadline {
    font-size: 1rem;
  }

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

@media (max-width: 480px) {
  .home-hero-headline {
    font-size: 1.5rem;
  }

  .home-hero-subheadline {
    font-size: 0.9375rem;
  }
}

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

/* ===== SECTION LAYOUT ===== */
.arch-services-section {
  background: #ffffff;
  padding: 80px 0;
}

.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;
}

/* ===== 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 - Tech-forward ===== */
.arch-card.featured {
  padding: 32px 28px;
  border: 1px solid rgba(241, 103, 0, 0.12);
  box-shadow:
    0 8px 32px rgba(241, 103, 0, 0.06),
    0 0 0 1px rgba(241, 103, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 237, 0.5) 100%);
}

.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.9;
}

.arch-card.featured:hover {
  border-color: rgba(241, 103, 0, 0.2);
  box-shadow:
    0 24px 56px rgba(241, 103, 0, 0.12),
    0 0 24px rgba(241, 103, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.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 - Tech-forward styling ===== */
.arch-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.6);
  cursor: pointer;
  transform-origin: bottom center;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.4s ease,
              border-color 0.3s ease;
  text-align: center;
  position: relative;
}

.arch-card:hover {
  transform: translateY(-12px);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.03),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  border-color: rgba(226, 232, 240, 0.8);
}

/* ===== 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;
}

/* ===== 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: #ffffff;
  padding: 8px 0 24px;
}

.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 */
.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-see-more {
    padding: 12px 24px;
    font-size: 0.9375rem;
  }
}

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