/* ==========================================================================
   SERVICES — podcast production for hire (dark, numbered-row layout)
   ========================================================================== */

.services {
  background:
    radial-gradient(90% 70% at 85% 0%, #2c1f14 0%, transparent 55%),
    var(--ink);
  color: var(--cream-on-dark);
  padding: clamp(4.5rem, 10vh, 8rem) 0;
}

.services-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.services-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }
.services-head .section-title { margin-top: 1.2rem; }

.services-dek {
  margin-top: 1.1rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted-on-dark);
  max-width: 44ch;
}

/* ─── Carousel ─── */
.services-carousel-wrap { position: relative; }

.services-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.services-carousel::-webkit-scrollbar { display: none; }

.service-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 32fr) minmax(0, 68fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2.6rem, 6vh, 4rem) 0.2rem;
}

/* Decorative visual: circular badge + faint giant numeral, editorial-style
   (same "large italic Fraunces watermark" language used in Journey).
   The numeral sits BEHIND the badge (lower z-index) — the badge's own
   background is opaque enough to read as occluding it, so wherever the two
   overlap the icon wins, and the numeral only shows in the clear space
   around it. This replaces an earlier mask-based approach: masking tied
   the numeral's box tightly to the badge's exact geometry, which broke the
   moment either was resized and left no room for the glyph's corners. */
.service-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(11rem, 20vw, 15rem);
}

/* Shrink-wraps to the badge (the numeral is absolutely positioned out of
   flow, so it doesn't affect this box's size) — giving both the numeral
   and the badge the same, single centre-point to anchor from. Positioning
   the numeral straight off .service-visual instead (a much wider flex row)
   was the bug last time: "50%" there landed nowhere near the actual
   circle, leaving it floating disconnected in empty space. */
.service-visual-graphic {
  position: relative;
  margin-left: clamp(-1.7rem, -2.6vw, -0.9rem);
}

.service-visual-num {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%) translate(3.3rem, -3.6rem);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(4.4rem, 9vw, 5.8rem);
  color: var(--orange);
  opacity: 0.68;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.service-visual-badge {
  position: relative;
  z-index: 1;
  width: clamp(6.8rem, 11.5vw, 8.6rem);
  height: clamp(6.8rem, 11.5vw, 8.6rem);
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
}
.service-visual-badge svg {
  width: 46%;
  height: 46%;
}

.service-body { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }

.service-tag {
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.service-name {
  font-family: var(--font-display);
  font-weight: 470;
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--cream-on-dark);
}

.service-desc {
  font-size: 0.98rem;
  line-height: 1.72;
  color: var(--muted-on-dark);
  max-width: 46ch;
}

.service-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1.4rem;
  margin-top: 0.3rem;
}

.service-checklist li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  color: var(--cream-on-dark);
}

.service-checklist svg {
  flex-shrink: 0;
  width: 27px;
  height: 27px;
  padding: 2px;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--orange);
  box-sizing: border-box;
}

/* ─── Controls: progress bars (arrows removed) ─── */
.services-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.6rem;
}

.services-dots {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: min(15rem, 60%);
}

.services-dot {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  border: none;
  padding: 0;
  background: var(--line-dark);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.services-dot-fill {
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
}

/* Already-viewed slides sit fully lit, no animation. */
.services-dot.is-done .services-dot-fill { transform: scaleX(1); }

/* The current slide fills like a countdown, timed to match the autoplay
   dwell in script.js (6s). Pausing toggles animation-play-state rather than
   restarting anything, so the fill and the actual slide timer never drift
   apart — the animation's own clock freezes and resumes exactly where it
   left off. */
.services-dot.is-active .services-dot-fill {
  animation: services-dot-progress 6s linear forwards;
}
.services-dots.is-paused .services-dot.is-active .services-dot-fill {
  animation-play-state: paused;
}

@keyframes services-dot-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ─── CTA foot ─── */
.services-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  margin-top: clamp(2.5rem, 6vh, 3.5rem);
}

.services-cta p {
  font-size: 1.05rem;
  color: var(--cream-on-dark);
}

.services-cta em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--orange);
}

/* ─── Responsive ─── */
@media (max-width: 860px) {
  .service-slide {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
    text-align: center;
    padding: 2.2rem 0.2rem 2.6rem;
  }
  .service-visual { height: clamp(8rem, 34vw, 10rem); }
  .service-visual-graphic { margin-left: 0; }
  .service-visual-badge {
    width: clamp(6.2rem, 24vw, 7.6rem);
    height: clamp(6.2rem, 24vw, 7.6rem);
  }
  .service-visual-num {
    font-size: clamp(3.6rem, 18vw, 4.3rem);
    /* A fixed offset here under-pushed at iPad widths: the badge keeps
       growing with viewport (up to 860px) after the numeral's font-size
       has already hit its own max, so a flat translate left more of it
       swallowed by the bigger circle the wider the tablet. Scaling the
       offset with vw too keeps it proportional to the badge across the
       whole mobile/tablet range instead of just at one width. */
    transform: translate(-50%, -50%) translate(clamp(2.2rem, 7vw, 2.8rem), clamp(-3.1rem, -8vw, -2.5rem));
  }
  .service-body { align-items: center; }
  .service-desc { max-width: 34ch; }
  .service-checklist {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    max-width: 22rem;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 560px) {
  .services-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .services-cta .btn { text-align: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .services-carousel { scroll-behavior: auto; }
  .services-dot.is-active .services-dot-fill { animation: none; transform: scaleX(1); }
}