/* EFEKT 2.0 - services on chrome. Polished metal replaces the black here (lime stays the signal).
   Four directions to compare, switched with ?sv=1..4 or the small picker bottom-left:
   A Index (Swiss industrial rows) · B Marquee (kinetic words) · C Specimen (type specimen sheet) · D Plates (stamped metal) */

.services.chrome {
  --ch-ink: #0E0F11; --ch-dim: rgba(14,15,17,.62); --ch-line: rgba(14,15,17,.85);
  position: relative; isolation: isolate; color: var(--ch-ink); overflow: hidden;
  background:
    linear-gradient(180deg, #c9ccce 0%, #eceeef 9%, #b4b8bb 24%, #e2e4e5 41%, #a8acb0 58%, #dcdedf 74%, #b9bcbf 88%, #e6e7e8 100%);
}
/* the sheen: a soft band of light that travels down the metal while you scroll */
.services.chrome::before { content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.75) 47%, rgba(255,255,255,.1) 50%, rgba(255,255,255,.55) 53%, transparent 62%);
  background-size: 100% 260%; background-position: 0 calc(100% - var(--sh, 0%)); mix-blend-mode: soft-light; }
/* brushed grain */
.services.chrome::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background: repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 7px); }
.services.chrome .s-lead { color: var(--ch-dim); }
.services.chrome .s-links a { color: var(--ch-ink); box-shadow: inset 0 0 0 1.5px var(--ch-ink); border-radius: 0; }
.services.chrome .s-links a:hover, .services.chrome .s-links a:focus-visible { background: var(--lime); color: var(--ch-ink); box-shadow: inset 0 0 0 1.5px var(--ch-ink); }
.services.chrome .s-pricing { color: var(--ch-ink); }

.sv { position: relative; margin: 0 calc(var(--pad) * -1); }
.sv-a { display: block; color: inherit; text-decoration: none; position: relative; }
.sv-a:focus-visible { outline: 3px solid var(--ch-ink); outline-offset: -3px; }
.sv h3 { margin: 0; font-weight: 500; }
.sv p { margin: 0; }
.sv ul { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.sv ul li::before { content: "/// "; opacity: .5; }
.sv-go { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; display: inline-flex; gap: 8px; }
.sv-go i { font-style: normal; transition: transform .4s var(--ease); }
.sv-a:hover .sv-go i { transform: translateX(6px); }

/* ============ A · INDEX - Swiss industrial: four ruled rows, one giant word each, lime fills the row you are on ============ */
.sv1 { border-top: 2px solid var(--ch-line); }
.sv1 .sv-it { position: relative; border-bottom: 2px solid var(--ch-line); overflow: hidden; }
.sv1 .sv-it::before { content: ""; position: absolute; inset: 0; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); z-index: 0; }
.sv1 .sv-it.on::before, .sv1 .sv-it:hover::before { transform: scaleX(1); }
.sv1 .sv-a { z-index: 1; display: grid; grid-template-columns: 9ch 1fr minmax(240px, 30%); align-items: end; gap: 0 3vw; padding: 3.2vh var(--pad) 2.6vh; }
.sv1 .sv-n { align-self: start; padding-top: 1.2em; font-size: 12px; letter-spacing: .1em; }
.sv1 .sv-w { grid-row: 1 / span 4; grid-column: 2; font: 700 clamp(64px, 11.5vw, 220px)/.8 var(--f-sans); letter-spacing: -.065em; text-transform: uppercase; white-space: nowrap; transition: transform .7s var(--ease), letter-spacing .7s var(--ease); }
.sv1 .sv-it.on .sv-w, .sv1 .sv-it:hover .sv-w { transform: translateX(1.5vw); letter-spacing: -.045em; }
.sv1 h3 { grid-column: 3; font-size: 13px; font-family: var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.sv1 p { grid-column: 3; margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--ch-dim); }
.sv1 ul { grid-column: 3; margin-top: 12px; }
.sv1 .sv-go { grid-column: 3; margin-top: 14px; opacity: 0; transition: opacity .4s; }
.sv1 .sv-it.on .sv-go, .sv1 .sv-it:hover .sv-go { opacity: 1; }
@media (max-width: 899px) {
  .sv1 .sv-a { grid-template-columns: 1fr; padding: 22px var(--pad) 24px; }
  .sv1 .sv-n { padding: 0 0 6px; }
  .sv1 .sv-w, .sv1 h3, .sv1 p, .sv1 ul, .sv1 .sv-go { grid-column: 1; grid-row: auto; }
  .sv1 .sv-w { font-size: clamp(64px, 21vw, 120px); margin-bottom: 14px; }
  .sv1 .sv-go { opacity: 1; }
}









.rm .sv * { transition: none !important; }