/* ---------- services: an index of five names and one stage ---------- */

.services {
  --svc-name: clamp(26px, 2.9vw, 42px);
  --svc-dim: rgba(11, 11, 15, 0.4);
  --svc-trace: rgba(11, 11, 15, 0.1);
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin: 0 auto;
  padding: clamp(40px, 8vh, 96px) var(--gutter) clamp(96px, 18vh, 200px);
}

.services__intro {
  max-width: 17em;
  margin-bottom: clamp(48px, 8vh, 88px);
  font-size: clamp(27px, 3.35vw, 48px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

/* the list as written: every word readable with or without script */

.svc {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.85fr);
  column-gap: clamp(20px, 3vw, 40px);
  align-items: start;
  padding: 28px 0;
}

.svc__glyph { width: 28px; height: 28px; overflow: visible; }
.svc__glyph path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.svc__glyph .dim { stroke: var(--svc-dim); }
.svc__glyph .trace path { stroke: var(--svc-trace); }

.svc__name { font-size: clamp(21px, 1.9vw, 26px); font-weight: 500; line-height: 1.15; letter-spacing: -0.022em; }
.svc__desc { font-size: 16px; line-height: 1.5; color: var(--t-low); max-width: 36ch; }
.svc__items { font-size: 14px; line-height: 1.75; color: var(--t-faint); }

@media (max-width: 1000px) {
  .svc { grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.2fr); row-gap: 10px; }
  .svc__items { grid-column: 3; }
}

@media (max-width: 760px) {
  .svc { grid-template-columns: 36px minmax(0, 1fr); padding: 22px 0; }
  .svc__glyph { width: 26px; height: 26px; margin-top: -1px; }
  .svc__desc, .svc__items { grid-column: 2; }
}

/* with script: the names become an index and the stage beside them draws the one in hand */

.services__stage { display: none; }

.js .services__body {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  column-gap: clamp(40px, 6vw, 96px);
}
.js .services__list { grid-area: 1 / 1; }
.js .services__stage { display: block; grid-area: 1 / 2; container-type: inline-size; }

.services__stage svg {
  position: sticky;
  top: calc(50vh - min(31vh, 38.5cqw));
  display: block;
  width: 100%;
  height: min(62vh, 77cqw);
}

.js .svc {
  grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-areas: "glyph name name" ". desc items";
  row-gap: 14px;
  padding: 26px 0 30px;
}
.js .svc__glyph { grid-area: glyph; margin-top: calc((var(--svc-name) * 1.1 - 28px) / 2); }
.js .svc__name { grid-area: name; font-size: var(--svc-name); line-height: 1.1; letter-spacing: -0.034em; }
.js .svc__desc { grid-area: desc; }
.js .svc__items { grid-area: items; }

.svc__pick {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* the name in hand is ink, the others rest a step quieter; its glyph draws over its trace */
.services.is-live .svc__pick { color: var(--t-quiet); transition: color var(--t-out) var(--ease); }
.services.is-live .svc.is-on .svc__pick { color: var(--ink); transition-duration: 240ms; }

.services.is-live .svc__glyph .draw path:not(.dotted) {
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 1.05;
  transition: stroke-dashoffset 280ms var(--ease-exit);
}
.services.is-live .svc.is-on .svc__glyph .draw path:not(.dotted) {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 820ms var(--ease) var(--delay, 0ms);
}
.services.is-live .svc__glyph .draw .dotted { opacity: 0; transition: opacity 280ms var(--ease-exit); }
.services.is-live .svc.is-on .svc__glyph .draw .dotted { opacity: 0.55; transition: opacity 600ms var(--ease) 300ms; }

/* the scenes: one stroke grammar, bright ink with a dim companion, a faint trace under both */

.services__stage path,
.services__stage circle {
  fill: none;
  stroke: none;
  stroke-width: var(--svc-stroke, 1.5);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.services__stage .k { stroke: var(--ink); stroke-dasharray: 1 1.1; }
.services__stage .d { stroke: var(--svc-dim); stroke-dasharray: 1 1.1; }
.services__stage .o { stroke: var(--svc-dim); stroke-dasharray: 0.01 6.5; }
.services__stage .f { fill: rgba(11, 11, 15, 0.045); }
.services__stage .f2 { fill: rgba(11, 11, 15, 0.085); }
.services__stage .s { fill: var(--ink); }
.services__stage .v__trace .k,
.services__stage .v__trace .d,
.services__stage .v__ghost path { stroke: var(--svc-trace); }
.services__stage .v__trace .o { stroke: rgba(11, 11, 15, 0.16); }

.services__stage .v {
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms var(--ease-exit), visibility 0s linear 180ms;
}
.services__stage .v.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms var(--ease), visibility 0s;
}

/* between the wide layout's two columns: the details stack under each name */
@media (min-width: 761px) and (max-width: 1180px) {
  .js .svc {
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-areas: "glyph name" ". desc" ". items";
    row-gap: 10px;
    padding: 24px 0 26px;
  }
  .js .svc__glyph { width: 26px; height: 26px; margin-top: calc((var(--svc-name) * 1.1 - 26px) / 2); }
}

/* phones: the stage pins under the nav and the list reads beneath it */
@media (max-width: 760px) {
  .js .services__body { display: block; }
  .js .services__intro { position: relative; z-index: 3; margin-bottom: 0; }
  .js .services__stage {
    position: sticky;
    top: 0;
    z-index: 2;
    margin-top: -44px;
    padding-top: 76px;
    background: var(--paper);
    container-type: normal;
  }
  .js .services__stage::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 28px;
    background: linear-gradient(var(--paper), rgba(255, 255, 255, 0));
    pointer-events: none;
  }
  .services__stage svg { position: static; height: clamp(184px, 28vh, 236px); }
  .js .svc {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas: "glyph name" ". desc" ". items";
    row-gap: 10px;
    padding: 20px 0 24px;
  }
  .js .svc:first-child { padding-top: 36px; }
  .js .svc__glyph { width: 26px; height: 26px; margin-top: calc((var(--svc-name) * 1.1 - 26px) / 2); }
}

@media (prefers-contrast: more) {
  .services { --svc-dim: rgba(11, 11, 15, 0.64); --svc-trace: rgba(11, 11, 15, 0.24); }
  .services__stage .v__trace .o { stroke: rgba(11, 11, 15, 0.3); }
}

@media (forced-colors: active) {
  .services__stage .k, .services__stage .d, .services__stage .o { stroke: CanvasText; }
  .services__stage .s { fill: CanvasText; }
  .services__stage .f, .services__stage .f2 { fill: none; }
}

@media (prefers-reduced-motion: reduce) {
  .services.is-live .svc__glyph .draw path:not(.dotted) { stroke-dashoffset: 0; }
  .services.is-live .svc__glyph .draw .dotted { opacity: 0.55; }
}