/* What we do: the chapter selector list with the stretching brushed-silver pill */
.services .svc-wrap { margin: var(--s6) auto 0; display: flex; flex-direction: column; align-items: center; }
.services .svc-list { position: relative; display: inline-flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; }
.services .svc-list li { display: block; }
.services .svc-list a { position: relative; z-index: 1; }
.services .pill { position: absolute; left: 50%; top: 0; z-index: 0; border: 1px solid var(--accent); border-radius: 80px; pointer-events: none; transform: translate(-50%, 0); background: url('../assets/photos/texture-brushed-metal-illustrative-overlay.svg') center / cover, rgba(199, 194, 184, .05); background-blend-mode: soft-light; }
.services .svc-list a { display: block; min-height: 48px; padding: 2.2vh 7vw; color: var(--ink); text-decoration: none; font: 200 clamp(30px, 4vw, 58px)/1.15 var(--font-display); text-transform: uppercase; letter-spacing: .14em; padding-left: calc(7vw + .14em); overflow-wrap: anywhere; }
.services .svc-list a.on { letter-spacing: .3em; padding-left: calc(7vw + .3em); }
.services .svc-list.held a { transition: letter-spacing 480ms var(--ease), padding 480ms var(--ease), color var(--t-ctl) var(--ease); }
.services .svc-list a:not(.on) { color: var(--soft); }
.services .svc-list a:focus-visible { outline: 2px solid var(--ink); outline-offset: -6px; border-radius: 80px; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .services .svc-list a:hover { color: var(--ink); } }
.services .svc-fr { margin-top: var(--s4); }
@media (max-width: 760px) {
  .services .svc-list a { padding: 18px 9vw; padding-left: calc(9vw + .1em); letter-spacing: .1em; font-size: 30px; }
  .services .svc-list a.on { letter-spacing: .2em; padding-left: calc(9vw + .2em); }
}

/* This page keeps the original arrival and shell; only the service chapters use these layers. */
.astro-services-page .service-page-chapters {
  position: relative; isolation: isolate; width: min(1120px, 100% - 2 * var(--gut));
  height: auto !important; margin: 0 auto; text-align: left;
}
.astro-services-page .service-row {
  --focus: 0; --plate-y: 0px; --symbol-y: 0px; --trace-y: 0px; --trace-turn: 0deg; --rule: 1;
  position: relative; isolation: isolate; width: 100%; margin: 0;
  min-height: 80svh; padding: clamp(72px, 9vw, 128px) clamp(24px, 4vw, 56px);
  border-top-color: var(--line); scroll-margin-top: var(--s4);
  overflow: clip; overflow-wrap: anywhere;
}
.astro-services-page .service-copy { position: relative; z-index: 1; min-width: 0; }
.astro-services-page .service-heading { position: relative; padding-bottom: var(--s4); }
.astro-services-page .service-heading::after {
  content: ''; position: absolute; bottom: 0; left: 0; height: 1px;
  width: min(100%, 360px); background: var(--accent);
  opacity: calc(.2 + var(--focus) * .8); transform: scaleX(var(--rule)); transform-origin: left;
}
.astro-services-page .service-row .part-title {
  max-width: 17ch; margin: var(--s2) 0 0;
  font: 200 clamp(34px, 5.2vw, 68px)/1.08 var(--font-display);
  letter-spacing: .025em; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere;
}
.astro-services-page .service-row .cap { letter-spacing: .26em; }
.astro-services-page .service-intro {
  margin: var(--s4) 0 var(--s5); max-width: 57ch;
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 300; line-height: 1.75;
}
.astro-services-page .service-row p, .astro-services-page .service-row li { overflow-wrap: anywhere; }
.astro-services-page .service-row h3 {
  font-size: 13px; letter-spacing: .18em; color: var(--ink); margin-bottom: var(--s3);
}
.astro-services-page .service-row .cols {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px);
}
.astro-services-page .service-row .cols > div { min-width: 0; }
.astro-services-page .service-row .cols li + li { margin-top: var(--s2); }
.astro-services-page .service-row .tags { padding: 0; gap: 0 var(--s3); }
.astro-services-page .service-row .tags li {
  min-width: 0; max-width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line);
  font-size: 12px; letter-spacing: .12em;
}
.astro-services-page .service-row .platform { margin: var(--s6) 0; }
.astro-services-page .service-row .platform-shots {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); align-items: start;
}
.astro-services-page .service-row .platform img { max-width: 100%; height: auto; }
.astro-services-page .service-row .platform img + img {
  margin-top: var(--s5); transform: translateY(var(--media-y, 0px));
}
.astro-services-page .service-row .platform figcaption { margin-top: var(--s3); }
.astro-services-page .service-row .prods {
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s6);
}
.astro-services-page .service-row .prod {
  min-width: 0; padding: var(--s3) 0 0; border: 0; border-top: 1px solid var(--line); background: transparent;
}
.astro-services-page .service-row .prod h3 { margin-top: 0; }
.astro-services-page .service-row .prod p + p { margin-top: var(--s3); }
.astro-services-page .service-row .k { color: var(--accent); font-size: 11px; letter-spacing: .18em; }
.astro-services-page .service-search { min-height: 72svh; }
.astro-services-page .service-search .service-intro { margin-bottom: var(--s4); }
.astro-services-page .service-depth { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: clip; }
.astro-services-page .service-depth::after {
  content: ''; position: absolute; inset: 0; background: var(--surface); opacity: calc(var(--focus) * .24);
}
.astro-services-page .service-plate {
  position: absolute; inset: -100px -40px;
  background: url('../assets/photos/background-plate-03-what-we-do.svg') center / cover;
  opacity: .18; transform: translate3d(0, var(--plate-y), 0);
}
.astro-services-page .service-symbol {
  position: absolute; top: 12%; right: -4%; width: clamp(220px, 38vw, 520px); height: auto;
  opacity: .045; transform: translate3d(0, var(--symbol-y), 0);
}
.astro-services-page .service-trace {
  position: absolute; top: 12%; right: 10%; width: min(42vw, 440px); aspect-ratio: 1;
  border: 1px solid var(--accent); border-left: 0; border-bottom: 0; opacity: calc(.1 + var(--focus) * .16);
  transform: translate3d(0, var(--trace-y), 0) rotate(var(--trace-turn)); transform-origin: center;
}
.astro-services-page .service-row:nth-of-type(2) .service-symbol { top: 42%; right: 0; }
.astro-services-page .service-search .service-trace { aspect-ratio: 2; top: 35%; right: 2%; }
.astro-services-page .service-track {
  position: absolute; inset: 0 auto 0 0; width: 2px; z-index: 2; background: var(--line); pointer-events: none;
}
.astro-services-page .service-highlight {
  position: absolute; top: 0; left: 0; width: 2px; height: 88px; background: var(--accent);
  transform: translate3d(0, var(--highlight-y, 0px), 0);
}
.astro-services-page .svc-enter { transform: translate3d(0, var(--entry-y, 0px), 0); opacity: var(--entry-alpha, 1); }
.astro-services-page .service-page-chapters[data-motion-ready] .service-heading {
  clip-path: inset(var(--entry-clip, 0%) 0 0 0);
}
@media (max-width: 760px) {
  .astro-services-page .service-row { padding: var(--s6) 20px var(--s7); min-height: 70svh; }
  .astro-services-page .service-row .part-title { font-size: clamp(30px, 8.5vw, 44px); letter-spacing: .015em; }
  .astro-services-page .service-row .cols,
  .astro-services-page .service-row .prods,
  .astro-services-page .service-row .platform-shots { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .astro-services-page .service-row .platform img + img { margin-top: 0; }
  .astro-services-page .service-row .platform { margin: var(--s4) 0 var(--s5); }
  .astro-services-page .service-row .prods { gap: var(--s5); }
  .astro-services-page .service-plate { display: none; }
  .astro-services-page .service-symbol { width: 240px; right: -40px; opacity: .035; }
  .astro-services-page .service-trace { width: 65%; right: 5%; }
}
@media (prefers-reduced-motion: reduce) {
  .astro-services-page .svc-enter,
  .astro-services-page .service-symbol,
  .astro-services-page .service-plate,
  .astro-services-page .service-trace,
  .astro-services-page .service-row .platform img + img { transform: none !important; }
  .astro-services-page .svc-enter { opacity: 1 !important; clip-path: none !important; }
  .astro-services-page .service-highlight { display: none; }
  .astro-services-page .service-heading::after { opacity: 1; transform: none; }
  .astro-services-page .service-depth::after { opacity: .12; }
}

.services .svc-list, .services .svc-list li { min-width: 0; max-width: 100%; }