/* Services — the locked "E · Hybrid" list (demos/services-options.js).
   Other options are archived in ../../Archive/Technique Lab - all variants 2026-09-25/. */

/* Heading: left-aligned headline, short intro on the right */
#services.svs-b { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: clamp(32px, 6vw, 110px); align-items: end; }
#services.svs-b > .svc-head { grid-column: 1; text-align: left; margin: 0; max-width: none; }
#services.svs-b > .svc-head h2 { margin-inline: 0; max-width: 17ch; }
#services.svs-b > .svc-meta { display: none; }
.svb-intro { grid-column: 2; justify-self: end; max-width: 36ch; color: var(--muted); font-size: 15px; line-height: 1.65; padding-bottom: 8px; }

/* List: big names, description, type; a green bar slides behind the hovered row */
.svc2 { position: relative; grid-column: 1 / -1; margin-top: var(--head-gap); }
.svc2-rows { position: relative; }
.svc2-bar { position: absolute; left: 0; right: 0; top: 0; height: 0; opacity: 0; background: var(--accent); border-radius: 14px; z-index: 0; pointer-events: none; }
.svc2-row { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.15fr) minmax(0, .45fr); gap: clamp(24px, 3vw, 56px); align-items: center;
  padding: clamp(26px, 3.2vw, 48px) 20px; border-bottom: 1px solid var(--line); cursor: pointer; outline: none; }
.svc2-row h3 { font: 500 clamp(40px, 5.2vw, 88px)/1 Inter, sans-serif; letter-spacing: -.045em; white-space: nowrap; }
.svc2-row p { color: var(--muted); font-size: 15px; line-height: 1.5; max-width: 46ch; }
.svc2-row span { justify-self: end; font: 500 12px Inter, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.svc2-row h3, .svc2-row p, .svc2-row span { transition: color .35s ease; }
.svc2-row.is-on h3, .svc2-row.is-on p, .svc2-row.is-on span { color: var(--on-accent); }

/* Preview that trails the cursor; each image opens from its centre (clip-path) */
.svc2-float { position: fixed; left: 0; top: 0; z-index: 44; width: clamp(240px, 21vw, 340px); aspect-ratio: 19.5 / 22.5; pointer-events: none; }
.svc2-float figure { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; visibility: hidden; clip-path: inset(50%); }
.svc2-float img { width: 100%; height: 100%; object-fit: cover; }

@media (hover: none), (max-width: 900px) {
  #services.svs-b { grid-template-columns: 1fr; }
  .svb-intro { grid-column: 1; justify-self: start; margin-top: 20px; }
  .svc2-row { grid-template-columns: 1fr; gap: 8px; }
  .svc2-row h3 { white-space: normal; }
  .svc2-row span { justify-self: start; }
  .svc2-float { display: none; }
}