/* ================= services (wave 2): the intro line, the services index, the closing block =================
   Greys plus the acid only. The index is one list, two layouts: desktop, a small terminal list under the scene window
   (sticky, it stays with the roof while the six services scroll past); phones, a sticky row of chips under the nav. */
.sv-in{margin-top:18px;font-size:16px;line-height:1.7;color:var(--mute)}
.sv-in::before{content:"+";margin-right:.8em;color:var(--dim)}

/* desktop: one row at the foot of the scene's column (the grid matches .split), just above the HUD line: 01 .. 06, the one
   you are reading in the accent with its name after it. Sticky, so it stays with the roof; it never adds height */
.sv-run{position:relative}
.sv-ix{position:sticky;top:calc(100vh - 74px);height:30px;margin-bottom:-30px;z-index:3;pointer-events:none}
.sv-ix .wrap{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1fr);column-gap:40px;height:100%}
.sv-ixl{grid-column:2;display:flex;align-items:center;width:max-content;pointer-events:auto;font:400 12.5px/1 var(--mono);letter-spacing:.02em}
.sv-ixl a{display:flex;align-items:center;height:30px;padding:0 7px;color:var(--mute);white-space:nowrap;transition:color .15s}
.sv-ixl li:first-child a{padding-left:0}
.sv-ixl .n{color:var(--dim);transition:color .15s}
.sv-ixl .t{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sv-ixl a:hover .n,.sv-ixl a:focus-visible .n{color:var(--fg)}
.sv-ixl a.on .n{color:var(--lime)}
.sv-ixl a.on .n::before{content:"[";margin-right:.25em;color:var(--fg2)}
.sv-ixl a.on .n::after{content:"]";margin-left:.25em;color:var(--fg2)}
.sv-ixl a.on .t{position:static;width:auto;height:auto;margin:0 0 0 .7em;overflow:visible;clip:auto;color:var(--fg);text-transform:lowercase}
.sv-ixl a:focus-visible{outline:1px solid var(--lime);outline-offset:2px}
@media (max-width:1100px){ .sv-ix .wrap{column-gap:28px} }

.sv-end .lede{max-width:34em}
.sv-end .cta{margin-top:32px}

/* phones: the chips, sticky under the nav; the row scrolls sideways (the page never does) */
@media (max-width:860px){
  .sv-ix{position:sticky;top:var(--nav);height:auto;margin:0;z-index:5;pointer-events:auto;background:var(--bg);border-bottom:1px solid var(--line)}
  .sv-ix .wrap{display:block;padding:0}
  .sv-ixl{display:flex;gap:8px;width:auto;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:8px var(--pad);font-size:14px}
  .sv-ixl::-webkit-scrollbar{display:none}
  .sv-ixl li{flex:none}
  .sv-ixl li:first-child a,.sv-ixl a{height:44px;padding:0 16px;border:1px solid #2E2E2E;border-radius:22px;color:var(--fg2)}
  .sv-ixl .n{display:none}
  .sv-ixl .t,.sv-ixl a.on .t{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;color:inherit;text-transform:none}
  .sv-ixl a.on{background:var(--fg);border-color:var(--fg);color:var(--bg)}
  .sv{scroll-margin-top:calc(var(--nav) + 62px)}
  .sv:first-of-type{padding-top:40px}
}
@media (prefers-reduced-motion:reduce){ .sv-ixl a,.sv-ixl .n{transition:none} }