/* Custom luxury styling for Ecomriwon */

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #081526;
}
::-webkit-scrollbar-thumb {
  background: #10233D;
  border: 1px solid rgba(217, 182, 111, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #D9B66F;
}

/* Luxury Glow & Borders */
.glow-gold {
  box-shadow: 0 0 25px -5px rgba(217, 182, 111, 0.18);
}

.gold-gradient-text {
  background: linear-gradient(135deg, #E9CC8B 0%, #D9B66F 50%, #B8934A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Glassmorphism Card Style */
.glass-card {
  background: rgba(16, 35, 61, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(217, 182, 111, 0.2);
}

.glass-card:hover {
  border-color: rgba(217, 182, 111, 0.5);
  box-shadow: 0 10px 30px -10px rgba(8, 21, 38, 0.8), 0 0 20px rgba(217, 182, 111, 0.1);
}

/* Smooth Interactive Keyframes */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: floatSlow 6s ease-in-out infinite;
}

/* Accordion Smooth Expansion */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  opacity: 0;
}

.faq-answer.open {
  max-height: 500px;
  opacity: 1;
}

/* Custom Selection Highlight */
::selection {
  background-color: #D9B66F;
  color: #081526;
}

/* Focus styles for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid #D9B66F;
  outline-offset: 2px;
}


/* Premium locally hosted photography */
.hero-photo-shell {
  isolation: isolate;
  background: #081526;
  transform: translateZ(0);
}
.hero-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 66% center;
  background: #10233D;
}
.hero-photo-shade {
  position: absolute;
  inset: 30% 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(8,21,38,.28) 52%, rgba(8,21,38,.93) 100%);
}
.hero-photo-caption {
  position: absolute;
  inset: auto 1.25rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  z-index: 2;
}
.hero-photo-kicker, .consultation-caption-kicker {
  color: #E9CC8B;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1.4;
  text-transform: uppercase;
}
.hero-photo-caption-title {
  max-width: 24rem;
  color: #FAF7F2;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 600;
  line-height: 1.25;
}
.hero-photo-caption-note {
  color: rgba(247,243,234,.72);
  font-size: .68rem;
}
.consultation-photo-card {
  position: relative;
  isolation: isolate;
  background: #081526;
}
.consultation-photo-card img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}
.consultation-caption {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: 1.25rem 1.4rem 1.45rem;
  border-top: 1px solid rgba(217,182,111,.22);
  background: linear-gradient(135deg, #10233D, #081526);
}
.consultation-caption-title {
  color: #F7F3EA;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
}
.consultation-caption-text {
  color: #A9B5C7;
  font-size: .85rem;
  line-height: 1.65;
}
.service-card {
  border-color: rgba(217,182,111,.20);
  background: linear-gradient(180deg, rgba(16,35,61,.92), rgba(8,21,38,.98));
  box-shadow: 0 16px 38px -32px rgba(0,0,0,.75);
}
.service-card:hover {
  border-color: rgba(217,182,111,.72);
  box-shadow: 0 18px 42px -25px rgba(217,182,111,.22);
  transform: translateY(-4px);
}
.service-image-frame {
  height: 190px;
  background: #10233D;
}
.service-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  filter: saturate(.9) contrast(1.02);
}
.service-card:hover .service-image {
  transform: scale(1.045);
  filter: saturate(1.05) contrast(1.03);
}
.service-image-shade {
  position: absolute;
  inset: 35% 0 0;
  background: linear-gradient(180deg, transparent, rgba(8,21,38,.56));
  pointer-events: none;
}
.service-image-badge {
  position: absolute;
  left: 1rem;
  bottom: .9rem;
  z-index: 2;
  padding: .4rem .65rem;
  max-width: calc(100% - 2rem);
  border: 1px solid rgba(233,204,139,.48);
  border-radius: 999px;
  background: rgba(8,21,38,.84);
  color: #E9CC8B;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.25;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.service-card-cta {
  text-wrap: balance;
}
@media (max-width: 1023px) {
  .hero-photo {
    aspect-ratio: 16 / 11;
    object-position: 68% center;
  }
}
@media (max-width: 640px) {
  .service-image-frame { height: 180px; }
  .hero-photo { aspect-ratio: 4 / 3; object-position: 66% center; }
  .hero-photo-caption { inset: auto 1rem 1rem; }
  .hero-photo-caption-title { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
  .service-image, .service-card { transition: none !important; }
  .service-card:hover { transform: none; }
}