/* Services preview: preserve the existing narrative, with a clearer entry point. */
.preview-header { position: sticky; top: 0; z-index: 60; }
main { padding-top: 0; }
.services-open .pin { position: relative; }
.services-title, .services-intro, .services-links, .services-scroll { position: relative; z-index: 2; }
.services-title { font-size: clamp(3.4rem, 9vw, 8rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; }
.services-intro { margin-top: 1.25rem; max-width: 31ch; font-size: clamp(1.25rem, 2.2vw, 1.8rem); line-height: 1.4; text-wrap: balance; }
.services-links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 2rem; max-width: 56rem; }
.services-links a { display: inline-block; padding: .6rem 0; font-weight: 600; font-size: 1rem; text-decoration: none; box-shadow: 0 1px 0 color-mix(in srgb, var(--paper) 45%, transparent); }
.services-links a:hover { color: var(--champagne); }
.services-links a span { margin-left: .4rem; }
.services-scroll { margin-top: 2rem; color: var(--paper-dim); }
.services-next { margin-top: 1.8rem; }
.services-preview-note { margin-top: 1rem; }
.services-open a:focus-visible { outline-color: var(--paper); }
.services-open .plate.side::after { background: linear-gradient(90deg, color-mix(in srgb, var(--obsidian) 88%, transparent), color-mix(in srgb, var(--obsidian) 35%, transparent)); }
html:not(.js) main { padding-top: 0; }
html:not(.js) .services-open .pin, html.rm .services-open .pin { position: static; }
html.rm .evo-field { position: relative; height: 56vh; }
html.rm .evo-steps { margin-top: 0; pointer-events: auto; }
html.rm .evo-step { display: block; min-height: 0; width: 100%; padding: 2rem var(--gutter); }
html.rm .evo-step > div { position: static; height: auto; visibility: visible; overflow: visible; padding: 0; border: 0; }
html.rm .evo-step > div > * { opacity: 1; }
html.rm .evo-step .say { max-width: 28ch; }
html.rm .evo-step .sub { max-width: 60ch; }
@media (max-width: 860px) {
  .services-links { gap: .45rem 1.1rem; margin-top: 1.4rem; }
  .services-links a { font-size: .95rem; }
  .services-intro { max-width: 27ch; }
  html.js .evo-step > div { height: auto; min-height: calc(var(--pin) * .42); max-height: calc(var(--pin) * .58); overflow-y: auto; }
  html.js .evo.is-before .evo-step > div { top: calc(var(--pin) * .50); }
  html.rm .evo-step > div { min-height: 0; max-height: none; overflow: visible; }
}
@media (max-height: 550px) and (min-width: 861px) {
  .services-title { font-size: 4rem; }
  .services-intro { margin-top: .8rem; font-size: 1.2rem; }
  .services-links { margin-top: .8rem; }
  .services-scroll { margin-top: 1rem; }
}
