/* ============================================================
   service.css — shared layout for the four service pages (redesign · P5)
   recording · production · mixing · mastering all extend
   services/_service_base.html and load this one stylesheet. Layout-only
   and token-only: surfaces, type, motion come from tokens/components.
   Loaded LAST so it wins over feature CSS. Motion gated by
   prefers-reduced-motion. Mirrors the home page's art direction (photo
   hero under a dreamy veil, calm white sections, deliberate pink moments)
   without depending on home.css.
   ============================================================ */

/* ============================================================
   HERO — full-bleed studio photo + soft white veil + glow + grain,
   content lower-anchored into the bright zone (mirrors .home-hero).
   Standalone: scrolls normally above the pinned stage.
   ============================================================ */
.service-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  padding: calc(var(--navbar-h) + var(--space-8)) var(--container-pad) var(--space-10);
}

.service-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  z-index: -3;
}

/* Dreamy veil: coral haze + a centered light bloom that keeps the ink
   headline legible, grounding to the page colour at the bottom so it still
   blends when the hero stacks above the next section on small screens. */
.service-hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    var(--glow-coral),
    radial-gradient(86% 60% at 50% 50%,
      color-mix(in srgb, var(--paper-2) 64%, transparent) 0%,
      color-mix(in srgb, var(--paper-2) 24%, transparent) 50%,
      transparent 76%),
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--paper-2) 12%, transparent) 34%,
      color-mix(in srgb, var(--paper-2) 42%, transparent) 74%,
      var(--bg) 100%);
}

.service-hero__grain {
  position: absolute;
  z-index: -1;
}

.service-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  max-width: 56rem;
}

/* Darker than --text-muted so the kicker clears AA over the photo. */
.service-hero__kicker {
  color: var(--text-soft);
}

.service-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  max-width: 20ch;
}

.service-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-soft);
  max-width: 46rem;
}

.service-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
}

/* Scroll cue — a coral dot scrubbing down a fading line. */
.service-hero__scroll {
  position: absolute;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--space-2);
}
.service-hero__scroll:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.service-hero__scroll-track {
  position: relative;
  display: block;
  width: 2px;
  height: 56px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to bottom, var(--accent), transparent);
}
.service-hero__scroll-dot {
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: var(--radius-pill);
  background: var(--accent-strong);
  animation: svcHeroScroll 1.9s var(--ease-soft) infinite;
}
@keyframes svcHeroScroll {
  0%   { transform: translateY(-2px); opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(50px); opacity: 0; }
}

/* ============================================================
   SECTION HEAD — mono kicker + display title (centered), reused by
   every section/slide. (style.css owns .section / .section-title.)
   ============================================================ */
.section-head {
  max-width: 52rem;
  margin: 0 auto var(--space-10);
  text-align: center;
}
.section-head .dd-kicker {
  margin-bottom: var(--space-4);
}
.section-head .section-title {
  margin-bottom: 0;
}

/* ============================================================
   INTRO / "WHAT'S DIFFERENT" — the standalone pitch under the hero.
   A lead paragraph + a squircle card grid (photo + heading + copy).
   ============================================================ */
.service-intro__lead {
  max-width: 50rem;
  margin: 0 auto var(--space-10);
  text-align: center;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

.service-diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}

.service-diff-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
}
.service-diff-card__media {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-5);
  aspect-ratio: 4 / 3;
}
.service-diff-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-dreamy);
}
.service-diff-card:hover .service-diff-card__media img {
  transform: scale(1.05);
}
.service-diff-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--text);
  margin-bottom: var(--space-3);
}
.service-diff-card p {
  color: var(--text-muted);
  line-height: var(--lh-body);
  margin-bottom: var(--space-3);
}
.service-diff-card p:last-child {
  margin-bottom: 0;
}

/* Image + copy split (mastering's "what is mastering" slide; also fine
   stacked). Naturally one screen, so it cross-fades cleanly in the pin. */
.service-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--space-10);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
}
.service-split__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
}
.service-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.service-split__body .section-title,
.service-split__body .dd-kicker {
  text-align: left;
}
.service-split__body .section-title {
  margin-bottom: var(--space-4);
}
.service-split__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* A single feature image inside an intro/editorial section. */
.service-figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin: 0 auto var(--space-9);
  max-width: 64rem;
  aspect-ratio: 16 / 9;
}
.service-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "how we work" — the two-column activities/genres blocks. style.css
   styles .section-columns/.section-column; service pages just need the
   responsive stack + a dot-list flavour. */
.service-columns .dd-dot-list {
  margin-top: var(--space-4);
}
/* the outcome line under the columns (was an inline margin). Hook kept on the
   "how we work" section (.service-how) now that the pinned-stage classes are gone. */
.service-how .service-intro__lead {
  margin-top: var(--space-8);
}

/* ============================================================
   HEAR IT — the audio-example block (the audio_player feature owns the
   player chrome; this just centres + bounds it).
   ============================================================ */
.service-audio {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

/* ============================================================
   MASTERING — the partner-studio cards ("who we work with").
   Replaces the legacy float-based .mastering-studio markup.
   ============================================================ */
.service-studios-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-7);
  align-items: stretch;
}
.service-studio-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
}
.service-studio-card__logo {
  border-radius: var(--radius-md);
  background: var(--surface-tint);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9rem;
}
.service-studio-card__logo img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
.service-studio-card__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  color: var(--text);
}
.service-studio-card__text {
  color: var(--text-muted);
  line-height: var(--lh-body);
}
.service-studio-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
}

/* ============================================================
   PRIMARY ACTION — the standalone booking / enquiry / intake section.
   The form renders through the P2 _form.html system in a squircle panel.
   ============================================================ */
.service-action {
  scroll-margin-top: calc(var(--navbar-h) + var(--space-6));
}
.service-form {
  max-width: 44rem;
  margin: 0 auto;
}
.service-form__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-9);
}
.service-form__card .dd-btn {
  margin-top: var(--space-2);
}

/* ============================================================
   CONTACT — recording's dedicated contact section: info + form split.
   ============================================================ */
.service-contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: var(--space-10);
  align-items: start;
}
.service-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.service-contact-info .section-title {
  text-align: left;
  margin-bottom: var(--space-2);
}
.contact-detail h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: lowercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.contact-detail a {
  color: var(--link);
  font-weight: 600;
}
.contact-detail a:hover {
  color: var(--link-hover);
}
.contact-detail p {
  color: var(--text-soft);
  line-height: var(--lh-snug);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .service-diff-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 38rem;
    margin-inline: auto;
  }
  .service-studios-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .service-contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
  .service-contact-info .section-title {
    text-align: center;
  }
  .service-split {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .service-split__body {
    text-align: center;
  }
  .service-split__body .section-title,
  .service-split__body .dd-kicker {
    text-align: center;
  }
  .service-split__body .dd-kicker {
    justify-content: center;
  }
}

/* The production/mixing process tabs use the sidebar variant
   (.process-tabs.production: 22% nav / 78% content). That's cramped below
   the desktop width, so collapse it to the stacked top-tabs layout. */
@media (max-width: 1024px) {
  .process-tabs.production {
    flex-direction: column;
    gap: var(--space-6);
  }
  .process-tabs-nav.production {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .process-tabs-nav.production .process-tab {
    flex: 1 1 40%;
  }
  .process-tabs-content.production {
    width: 100%;
  }
}

/* style.css gives .section-columns a fixed 2-up flex with no stacking —
   add the service-page stack so the activities/genres columns are usable. */
@media (max-width: 768px) {
  .section-columns {
    flex-direction: column;
  }
  .section-columns .section-column {
    width: 100%;
  }
  .service-form__card {
    padding: var(--space-7);
  }
}

@media (max-width: 480px) {
  .service-hero {
    min-height: 88vh;
    min-height: 88svh;
  }
  .service-hero__cta {
    flex-direction: column;
    width: 100%;
    max-width: 22rem;
  }
  .service-hero__cta .dd-btn {
    width: 100%;
  }
}

/* ============================================================
   FAQ — the page-specific accordion (P11), embedded after the
   primary action by services/_service_base.html. Header is the shared
   centered .section-head; this just holds the Q&As in a reading column.
   (Accordion itself is components/accordion.css.)
   ============================================================ */
.service-faq__list {
  max-width: 48rem;
  margin: 0 auto;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .service-hero__scroll-dot {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .service-diff-card__media img {
    transition: none;
  }
  .service-diff-card:hover .service-diff-card__media img {
    transform: none;
  }
}