/* ============================================================
   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;
}
/* A standfirst under the title needs its own air: .section-title's own
   bottom margin is zeroed above, and .section-head supplies only the gap
   below the whole block. */
.section-head .section-large-text {
  margin-top: var(--space-5);
  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);
}
/* Text-only diff cards (the mastering requirements) have no photo to
   anchor them, so the icon does that job instead. */
.service-diff-card__icon {
  display: inline-flex;
  color: var(--accent-strong);
  margin-bottom: var(--space-4);
}
.service-diff-card__icon .dd-icon {
  width: 2em;
  height: 2em;
}
.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);
}
/* Stacked leads had no margin at all and ran together as one block. */
.service-split__lead + .service-split__lead {
  margin-top: var(--space-5);
}
/* A line that carries on its own: full-strength ink and real room under
   it, so what follows reads as a new thought rather than the same one. */
.service-split__lead--statement {
  color: var(--text);
  margin-top: var(--space-7);
  margin-bottom: var(--space-7);
}

/* 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 advice page (#257). Body copy that runs at the
   page's own width, and the cards naming the studios we send work
   to. These are recommendations, not partners: no logo slot is
   used until the studios have agreed to be listed.
   ============================================================ */
/* Body copy inside a service section. Runs at the container's width like
   everything else on these pages — it is not a pull-out, so it gets no
   card, no narrower measure and no divider of its own. */
.service-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  font-size: var(--fs-body);
  color: var(--text-muted);
  line-height: var(--lh-body);
}
/* Detail under a split is set a step below the lead above it, and given
   real distance instead — it reads as a second thought rather than a
   quieter version of the first. */
.service-split + .service-body {
  margin-top: var(--space-11);
}
/* Where every paragraph carries the same weight (the mastering argument:
   the case is made across all three, and the last two land hardest). */
.service-body--lead p {
  font-size: var(--fs-lead);
  color: var(--text);
}
.service-body__intro {
  color: var(--text);
}
.service-body .dd-dot-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: var(--space-6);
}
/* The items are the substance of their section, not a footnote to it —
   same size as every other line in the block. */
.service-body .dd-dot-list > li {
  color: var(--text);
}

/* A pull quote: the one place on this page the studio speaks about itself
   rather than about mastering, so it is set apart from the body copy. The
   coral rule is a border, which is what the palette allows the brand pink
   to be (design-language.md §1). */
.service-quote {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-6);
  border-left: 3px solid var(--accent);
  font-size: var(--fs-lead);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--text);
  /* Set explicitly rather than left to `auto`, so the pair is the same in
     every browser — and Spanish gets its own angle quotes rather than
     English ones translated. */
  quotes: "\201C" "\201D" "\2018" "\2019";
}
.service-quote:lang(es) {
  quotes: "\AB" "\BB" "\201C" "\201D";
}
/* The marks belong to the styling, not to the copy — nothing translatable
   carries a quote character, and none can be forgotten at a call site. */
.service-quote::before {
  content: open-quote;
}
.service-quote::after {
  content: close-quote;
}
.service-quote::before,
.service-quote::after {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}

/* Two groups of recommendation, split by reach rather than by confidence:
   the room the studio's own records go to, and the rooms whose credits
   settle the argument. Both are trusted; only one is down the road. */
.service-studios-group + .service-studios-group {
  margin-top: var(--space-10);
}
.service-studios-group > .dd-kicker {
  margin-bottom: var(--space-5);
}

.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__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
/* Where they are and what they work in — the two facts that decide
   whether a reader can actually use the recommendation. */
.service-studio-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: lowercase;
  color: var(--text-muted);
}
.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);
  margin: 0;
}

/* ============================================================
   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;
  }
}