/* ============================================================
   UNFO · SERVICE page — section styles
   (reuses phero/poview/pnext from project.css, proc-row + tiles
   + cta from cinematic2.css)
   ============================================================ */

/* hero — smaller than a project hero, title stays huge */
.shero { min-height: 82svh; }
.shero .phero__title { font-size: clamp(2.6rem, 9vw, 9.5rem); line-height: 0.9; }
.shero .phero__title .ln > span { white-space: normal; text-wrap: balance; }
.shero__no { font-family: var(--body); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.2em; color: var(--red); display: block; margin-bottom: clamp(0.8rem,1.6vw,1.2rem); font-variant-numeric: tabular-nums; }

/* process — full 8-step list */
.sproc { border-top: 1px solid var(--line-soft); background: var(--surface); }
.sproc .wrap { padding-block: clamp(4rem,7vw,7rem); display: grid; grid-template-columns: 0.42fr 1fr; gap: clamp(1.5rem,4vw,5rem); align-items: start; }
.sproc__t { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem,5vw,4.4rem); line-height: 0.92; letter-spacing: -0.035em; margin-top: 1rem; position: sticky; top: 120px; }
.sproc__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1.5rem,3vw,3rem); }
.sproc__list .proc-row { padding: clamp(1rem,1.6vw,1.4rem) 0; }
.sproc__list .proc-row__t { font-size: clamp(1.15rem,1.8vw,1.6rem); }

/* work — filtered tiles */
.swork { padding: clamp(5rem,9vw,9rem) 0; }
.swork__grid { display: grid; grid-template-columns: repeat(12,1fr); gap: clamp(0.8rem,1.2vw,1.3rem); }

/* contact — same cta block, form-first */
.scontact { border-top: 1px solid var(--line-soft); }

@media (max-width: 1024px) {
  .sproc .wrap { grid-template-columns: 1fr; }
  .sproc__t { position: static; }
}
@media (max-width: 640px) {
  .sproc__list { grid-template-columns: 1fr; }
  .swork__grid .tile { grid-column: span 12 !important; aspect-ratio: 16/10 !important; }
}