/* Services: the page name as a monument, one verb per kind of work, then every service in full. */

/* One size for the name and the verbs, so the page carries a single monumental step. */
.services { --monument: min(20.6vw, 300px); }
/* Spanish display words need room at the same viewport breakpoints. */
html:lang(es) .services { --monument: min(17.2vw, 250px); }

/* The skip link waits further up so it never reads as a label over the title. */
.skip { top: -9rem; }

/* ---------- header: the shared page-head, with the phone beside the button ---------- */
.svc-head__call { display: grid; gap: var(--space-2xs); font-weight: 500; text-align: right; }

/* ---------- one verb at a time: a full screen per kind of work ---------- */
.verbs__panel {
  position: relative;
  display: flex; flex-direction: column;
  height: 100svh; min-height: 32rem;
  overflow: clip;
  background: var(--surface);
}
.verbs__panel:target { scroll-margin-top: 0; }
.verbs__pic { position: absolute; inset: 0; }
.verbs__pic picture { display: contents; }
.verbs__pic img { object-position: var(--pos, 50% 50%); }

/* The word holds the middle of the screen while its picture passes, then the next one pushes it out. */
.verbs__track { position: relative; z-index: 1; flex: 1 1 auto; padding-top: clamp(1.5rem, 4vh, 3rem); }
.verbs__word {
  position: sticky; top: calc(50vh - 0.4em); top: calc(50svh - 0.4em);
  font-size: var(--monument); line-height: 0.8; letter-spacing: -0.05em; text-transform: uppercase;
  text-align: center; white-space: nowrap; color: var(--verb, var(--ink));
}

.verbs__word a { text-decoration: none; }
.verbs__word a:hover { color: var(--water); }

/* ---------- every service in full: name and drawing on the side, the text on the rail ---------- */
.scope { border-top: 1px solid var(--line); }
.scope__intro { align-items: end; padding-bottom: var(--space-xl); }
.scope__lead { max-width: 44ch; }
.scope__row { align-items: start; border-top: 1px solid var(--line); scroll-margin-top: 0; }
.scope__head { display: grid; gap: var(--space-l); justify-items: start; align-content: start; padding-right: var(--space-l); }
.scope__drawing { width: min(100%, 20rem); height: auto; background: none; }
.scope__text { display: grid; gap: var(--space-s); }
.scope__text > p { max-width: var(--measure); }
/* What to watch for and what to send: one quiet panel, two entries split by a hairline. */
.scope__notes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: calc(var(--measure) + 4rem);
  margin-top: var(--space-xs); background: var(--surface); border-top: 2px solid var(--line-strong);
}
.scope__note { padding: var(--space-m); font-size: var(--step-small); line-height: 1.5; color: var(--muted); max-width: none; }
.scope__note + .scope__note { border-left: 1px solid var(--line); }
.scope__note strong { display: block; margin-bottom: var(--space-2xs); font-weight: 700; font-size: var(--step-body); color: var(--ink); }

/* ---------- how a job starts: the barge on the side, the first moves on the rail ---------- */
.start { align-items: end; border-top: 1px solid var(--line); }
.start__pic { grid-column: 1 / span 4; aspect-ratio: 3 / 4; }
.start__text { grid-column: 5 / -1; display: grid; gap: var(--space-m); justify-items: start; padding-left: var(--space-l); }
.start__text .lead { max-width: 40ch; }
.start__text p { max-width: var(--measure); }
.start__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); margin-top: var(--space-xs); font-weight: 500; }


@media (max-width: 860px) {
  .services { --monument: 19vw; }
  .svc-head__call { text-align: left; }
  /* On a phone the long service rows are simply there; the entrance stays on wider screens. */
  .js .scope__row[data-reveal] > * { opacity: 1; transform: none; }
  .scope__head { grid-template-columns: minmax(0, 1fr) 8.5rem; align-items: center; padding-right: 0; gap: var(--space-m); }
  .scope__drawing { width: 100%; }
  .scope__notes { grid-template-columns: minmax(0, 1fr); }
  .scope__note + .scope__note { border-left: 0; border-top: 1px solid var(--line); }
  .start__pic, .start__text { grid-column: 1 / -1; }
  .start__pic { aspect-ratio: 4 / 5; margin-bottom: var(--space-l); }
  .start__text { padding-left: 0; }
  .start__actions .btn { width: 100%; }
}