/* ─────────────────────────────────────────────────────────────
   Groovies Production Studio — routed-page layout helpers
   Used by /production, /dance-classes, /dj-classes, /blitz30
   alongside site.css.

   Pure layout & spacing built on the SAME design tokens as the
   homepage (var(--bg), --yellow, --display, etc.). No new colors,
   fonts, or component restyling — visual elements reuse the shared
   homepage classes (.svc-card, .svc-grid, .btn-yellow, .section-*).
   The intro padding simply clears the fixed nav, since these pages
   have no hero in front of their first section.
   ───────────────────────────────────────────────────────────── */

.sp-intro {
  max-width: 1380px;
  margin: 0 auto;
  padding: 12rem 5rem 4rem;
}
.sp-intro .section-label { margin-bottom: 1.4rem; }
.sp-title {
  font-family: var(--display);
  font-size: clamp(3rem, 6.5vw, 6rem);
  line-height: .92;
  text-transform: uppercase;
  margin-bottom: 1.9rem;
}
.sp-title i { font-style: normal; color: var(--yellow); text-shadow: 0 0 26px rgba(212,255,0,.45); }
.sp-lead {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--fg-muted);
  max-width: 62ch;
  margin-bottom: 2.6rem;
}
.sp-lead b { color: var(--fg); font-weight: 600; }
.sp-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.sp-section { max-width: 1380px; margin: 0 auto; padding: 3rem 5rem 5rem; }
.sp-section-head { margin-bottom: 2.5rem; }
.sp-body {
  font-size: .95rem;
  line-height: 1.9;
  color: var(--fg-muted);
  max-width: 70ch;
}
.sp-body + .sp-body { margin-top: 1.3rem; }
.sp-body b { color: var(--fg); font-weight: 600; }

/* Reused .svc-card as a link — keep the homepage hover feel, no underline */
a.svc-card { text-decoration: none; color: inherit; display: block; }

@media (max-width: 860px) {
  .sp-intro { padding: 9rem 1.5rem 3rem; }
  .sp-section { padding: 2rem 1.5rem 4rem; }
}