/* ==========================================================================
   ULTRA-PREMIUM LIQUID GLASS SERVICES SECTION - V5 (THIN TYPOGRAPHY REFINEMENT)
   ========================================================================== */

:root {
  --svc-font-main: 'Inter', sans-serif;
  --services-bg: url("/assets/service bg.jpeg"); 
  --liquid-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --glass-border: rgba(255, 255, 255, 0.28);
}

.services {
  padding: clamp(80px, 15vh, 180px) 0;
  color: #fff;
  position: relative;
  isolation: isolate;
  font-family: var(--svc-font-main);
  background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)), var(--services-bg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* --- HEADING SECTION --- */
.services__head {
  text-align: center;
  margin: 0 auto 140px; 
  padding: 0 6vw;
  z-index: 50;
  position: relative;
}

.services__head h2 {
  font-size: clamp(34px, 5vw, 60px);
  /* ✅ THINNER WEIGHT: Changed from 800 to 300 for premium professional look */
  font-weight: 300; 
  text-transform: uppercase;
  /* ✅ ELEGANT SPACING: Increased letter spacing for the thin font */
  letter-spacing: 0.15em; 
  /* ✅ GAP: Precise 25px gap preserved */
  margin-bottom: 25px; 
  background: linear-gradient(to bottom, #ffffff 60%, rgba(255,255,255,0.4));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}

.services__head p {
  max-width: 600px;
  margin: 0 auto;
  opacity: 0.7;
  /* Thinner paragraph weight to match */
  font-weight: 300;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.6;
  letter-spacing: 0.02em;
}

/* --- DECK CONTAINER --- */
.services__deck {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  height: 620px;
  perspective: 2000px;
}

/* --- PREMIUM GLASS CARD --- */
.service-card {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(940px, 92%);
  border-radius: 40px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%);
  background-color: rgba(10, 10, 10, 0.45); 
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 
    0 40px 100px rgba(0,0,0,0.6),
    inset 0 1px 1px rgba(255,255,255,0.35),
    0 0 30px rgba(255,255,255,0.05);
  transition: transform 1.2s var(--liquid-ease), opacity 1.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card__title {
  padding: 50px 30px 15px;
  font-size: clamp(24px, 2.5vw, 32px);
  /* Slightly thinner title to match the new aesthetic */
  font-weight: 500; 
  text-align: center;
  letter-spacing: 0.05em;
}

.card__sub {
  text-align: center;
  opacity: 0.6;
  padding: 0 40px 25px;
  font-size: clamp(14px, 1vw, 16px);
  font-weight: 300;
  flex-grow: 1;
}

/* --- TIGHT IMAGE BOUNDARY --- */
.card__media {
  width: calc(100% - 8px);
  margin: 0 auto 4px;
  border-radius: 36px;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid rgba(255,255,255,0.1);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- STACKING SYSTEM --- */
.is-front { z-index: 10; transform: translate(-50%, 0) scale(1); opacity: 1; }
.is-mid   { z-index: 5; transform: translate(-50%, -75px) scale(0.92); opacity: 0.55; }
.is-back  { z-index: 2; transform: translate(-50%, -140px) scale(0.85); opacity: 0.25; }

/* --- REFINED CONTROLS --- */
.services-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 100px;
  position: relative;
  z-index: 100;
}

.svc-btn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  padding: 15px 32px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.4s ease;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.15em;
  backdrop-filter: blur(15px);
}

.svc-btn.active, .svc-btn:hover {
  background: #fff;
  color: #000;
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(255,255,255,0.2);
}

.svc-play { 
  width: 65px; 
  height: 65px; 
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.1);
  cursor: pointer;
  display: flex; 
  align-items: center; 
  justify-content: center;
  position: relative;
  transition: 0.3s;
}

.svc-play:hover { background: rgba(255,255,255,0.2); scale: 1.05; }

.svc-play img { 
  width: 24px; 
  height: 24px; 
  position: absolute;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.svc-play .icon-pause { opacity: 0; pointer-events: none; transform: scale(0.8); }
.svc-play .icon-play { opacity: 1; transform: scale(1); }

.svc-play.playing .icon-play { opacity: 0; pointer-events: none; transform: scale(0.8); }
.svc-play.playing .icon-pause { opacity: 1; transform: scale(1); }

/* --- MOBILE OPTIMIZATION --- */
@media (max-width: 640px) {
  .services__head { margin-bottom: 110px; }
  
  .service-card {
    width: calc(100% - 24px); 
    border-radius: 32px;
  }

  .card__media { border-radius: 28px; }
  .services__deck { height: 420px; }
  .is-mid { transform: translate(-50%, -45px) scale(0.93); }
  .is-back { transform: translate(-50%, -85px) scale(0.86); }

  .services-controls { 
    margin-top: 30px; 
    gap: 10px; 
  }
  .svc-btn { padding: 12px 18px; font-size: 10px; }
  .svc-play { width: 55px; height: 55px; }
}