/* Page styles for services (owner: see CONTRIBUTING.md). Shared tokens live in /assets/site.css.
   Composition (site-v2): a type-led intro with a ruled service index, then editorial spreads that alternate copy and
   illustration plate. The one available service gets the dark stage; the two planned ones share a light band and are
   marked as planned in words (flag + lead) and in form (dashed rules, quieter plates). */

/* ---- Intro: headline, scope note, book button; ruled index of the three services ---- */
.intro { padding-bottom: clamp(3rem, 1.5rem + 4vw, 5rem); }
.intro-grid { display: grid; gap: 3rem; align-items: end; }
.intro-copy .lead { max-width: 40ch; color: var(--navy); }
.scope-note { margin: 1.5rem 0 0; padding-left: 1rem; border-left: 3px solid var(--teal); font-size: var(--step-1);
  line-height: 1.55; color: var(--slate); max-width: 60ch; }
.scope-note a { font-weight: 700; }

.service-index ul { list-style: none; margin: 0; padding: 0; }
.service-index li { max-width: none; position: relative; border-top: 1px solid var(--rule); }
.service-index li:last-child { border-bottom: 1px solid var(--rule); }
.service-index li.is-open::before { content: ""; position: absolute; left: 0; top: -1px; width: 3rem; height: 3px; background: var(--teal); }
.service-index li.is-planned { border-top-style: dashed; }
.service-index a { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.1rem 0; text-decoration: none; color: var(--navy);
  transition: padding var(--dur-state) var(--ease-out); }
.service-index .index-name { font-size: var(--step-3); font-weight: 800; font-stretch: var(--display-stretch); line-height: 1.1; letter-spacing: -0.015em; }
.service-index .index-state { font-size: var(--step--1); font-weight: 600; color: var(--slate); }
.service-index a:hover .index-name { text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .service-index a:hover { padding-left: 0.5rem; } }

/* ---- Spreads: copy + plate + deliverables. Phone: stacked. 64rem+: copy and list in one column, plate beside. ---- */
.spread { scroll-margin-top: 5rem; }
.spread-grid { display: grid; gap: 2rem; grid-template-areas: "copy" "plate" "list"; }
.spread-copy { grid-area: copy; }
.spread .plate { grid-area: plate; }
.spread-list { grid-area: list; }
.spread-copy .lead { max-width: 42ch; }
.spread-copy > p:not(.lead):not(.flag) { max-width: 60ch; }

.plate { margin: 0; padding: clamp(0.5rem, 0.3rem + 0.6vw, 0.9rem); border-radius: var(--radius); background: var(--mint); }
.plate img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-small); }
.plate-dark { box-shadow: var(--edge-dark); }
.plate-planned { border: 2px dashed var(--rule); background: var(--warm-white); }
.plate-planned img { opacity: 0.82; }

.spread-list h3, .spread-list h4 { font-size: var(--step-2); line-height: 1.2; font-weight: 720; font-stretch: var(--title-stretch);
  letter-spacing: -0.01em; margin: 0 0 0.9rem; color: var(--navy); }
.on-navy .spread-list h3 { color: var(--warm-white); }

.deliverables { margin: 0; }
.deliverables > div { padding: 0.9rem 0; border-top: 1px solid var(--rule); }
.deliverables > div:last-child { border-bottom: 1px solid var(--rule); }
.deliverables dt { color: var(--navy); font-weight: 700; }
.deliverables dd { margin: 0.15rem 0 0; font-size: var(--step-1); line-height: 1.55; max-width: 60ch; }
.on-navy .deliverables > div { border-color: var(--rule-navy); }
.on-navy .deliverables dt { color: var(--warm-white); }
.on-navy .deliverables dd { color: var(--mist); }
.spread-planned .deliverables > div { border-top-style: dashed; }

@media (min-width: 48rem) {
  .deliverables > div { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; }
  .deliverables dd { margin: 0; }
}
@media (min-width: 64rem) {
  .spread-grid { grid-template-columns: 7fr 5fr; grid-template-rows: auto 1fr; gap: 2.5rem 4.5rem;
    grid-template-areas: "copy plate" "list plate"; }
  .is-flipped .spread-grid { grid-template-columns: 5fr 7fr; grid-template-areas: "plate copy" "plate list"; }
  .spread .plate { align-self: start; position: sticky; top: 6.5rem; margin-top: 4.25rem; }
  .deliverables > div { grid-template-columns: 13rem 1fr; }
}

/* Lead Recovery: the one available service, on the dark stage */
.spread-open h2 { font-size: var(--step-4); max-width: 14ch; }
.spread-open .lead { color: var(--mist); }
.spread-open .flag { background: rgba(248, 250, 249, 0.1); color: var(--warm-white); }   /* same as Home's dark panel flag */

/* ---- Planned band: both planned services, white, dashed rules ---- */
.planned { background: var(--white); }
.planned-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.planned-head h2 { font-size: var(--step-4); }
.spread-planned { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); border-top: 2px dashed var(--rule); }
.spread-planned + .spread-planned { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.spread-title { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; font-stretch: var(--display-stretch);
  line-height: 1.05; letter-spacing: -0.02em; }
.flag-planned { background: transparent; border: 1.5px dashed var(--slate); padding-block: 0.15rem; }
.flag-planned::before { background: transparent; border: 2px solid var(--teal); }

/* ---- Shared rules (the one mint band) ---- */
.rule-list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 2rem 3rem; }
.rule-list li { max-width: none; border-top: 3px solid var(--teal); padding-top: 1rem; }
.rule-list h3 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.rule-list p { margin: 0; font-size: var(--step-1); line-height: 1.55; }
@media (min-width: 48rem) { .rule-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Closing band (Home pattern) ---- */
.final-grid { display: grid; gap: 2rem; }
.final-cta h2 { font-size: var(--step-5); max-width: 16ch; }
.final-cta .lead { max-width: 52ch; }

@media (min-width: 64rem) {
  .intro-grid { grid-template-columns: 7fr 5fr; gap: 5rem; }
}