/* ============================================================
   SECTIONS LAB · Services (SV) — candidate CSS
   Every selector carries a .svc-* class; kit classes are styled only
   inside a .svc-* root. Knobs are custom properties on the component.
   ============================================================ */

/* ---------- shared: heading row, arrow chip, row links ----------
   <div class="svc-head"><div><p class="eyebrow">…</p><h2 …>…</h2></div><p class="lead">…</p></div>
   <a class="svc-go" …>… <span class="svc-chip"><span class="arrow"></span></span></a>
   .svc-go gives any row link the house arrow cycle (the kit gives it to
   .btn, .link and .card only). */
.svc-head {
  display: grid; grid-template-columns: minmax(0, 8.5fr) minmax(0, 2.5fr);
  gap: var(--sp-5) var(--sp-8); align-items: end; margin-bottom: var(--sp-8);
}
/* Keeps "Go-live" in one piece in running text (services.js ty()). */
.svc-nw { white-space: nowrap; }
.svc-head > .lead { text-wrap: pretty; padding-bottom: .35em; }
.svc-chip {
  display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 22%, transparent); color: var(--fg);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s;
}
.svc-go:focus-visible .arrow::before { transform: translateX(170%); }
.svc-go:focus-visible .arrow::after { transform: none; }
.svc-go:focus-visible .svc-chip { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (hover: hover) {
  .svc-go:hover .arrow::before { transform: translateX(170%); }
  .svc-go:hover .arrow::after { transform: none; }
  .svc-go:hover .svc-chip { background: var(--fg); color: var(--bg); border-color: var(--fg); }
}
@media (max-width: 900px) {
  .svc-head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-7); }
  .svc-head > .lead { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .svc-head { margin-bottom: var(--sp-6); }
}
@media (prefers-reduced-motion: reduce) { .svc-chip { transition: none; } }


/* ============================================================
   SV01 · Service index, photo held beside
   <section class="svc-index"><div class="wrap">
     <div class="svc-head">…</div>
     <div class="svc-index__body">
       <ol class="svc-index__list" data-reveal-group>
         <li class="reveal"><a class="svc-index__row svc-go" data-k="erp">
           <span class="svc-index__n">01</span>
           <span class="svc-index__main"><span class="svc-index__t">…</span><span class="svc-index__p">…</span></span>
           <span class="svc-index__proof"><b>Client</b><span>result</span></span>
           <span class="svc-chip">…arrow…</span></a></li> …
       </ol>
       <div class="svc-index__stage" aria-hidden="true">
         <div class="photo photo--people parallax" data-k="erp" data-on="true">…</div> … one per row
       </div>
     </div></div></section>
   ============================================================ */
.svc-index {
  --svc-index-t: calc(var(--fs-h2) * .46);  /* row title */
  --svc-index-dim: .3;                       /* the rows not pointed at */
  --svc-index-proof: 11rem;                  /* proof column */
}
.svc-index__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-8); align-items: start; }
.svc-index__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.svc-index__row {
  display: grid; grid-template-columns: var(--sp-6) minmax(0, 1fr) var(--svc-index-proof) 36px;
  gap: var(--sp-5); align-items: center; padding-block: var(--sp-5);
  border-top: 1px solid var(--hairline); color: var(--fg); text-decoration: none;
}
.svc-index__row:focus-visible { outline-offset: 4px; }
.svc-index__n {
  align-self: start; padding-top: .7em;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.svc-index__main { display: grid; gap: var(--sp-1); }
.svc-index__t {
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--svc-index-t); line-height: 1.12; letter-spacing: var(--ls-head, var(--ls-display));
  text-wrap: balance; transition: opacity .3s, transform .5s var(--ease-out);
}
.svc-index__p { font-size: var(--fs-small); line-height: 1.55; color: var(--fg-muted); max-width: 46ch; text-wrap: pretty; transition: opacity .3s; }
.svc-index__proof {
  display: grid; gap: 2px; padding-left: var(--sp-4); border-left: 1px solid var(--hairline);
  font-size: var(--fs-small); line-height: 1.4; transition: opacity .3s;
}
.svc-index__proof b { color: var(--fg); font-weight: 600; }
.svc-index__proof span { color: var(--fg-dim); text-wrap: pretty; }
.svc-index__stage { position: sticky; top: var(--sp-8); display: grid; }
.svc-index__stage > .photo { grid-area: 1 / 1; opacity: 0; transition: opacity .7s var(--ease-out); }
.svc-index__stage > .photo[data-on="true"] { opacity: 1; }
.svc-index__list:has(.svc-index__row:focus-visible) .svc-index__row:not(:focus-visible) :is(.svc-index__t, .svc-index__p, .svc-index__proof) { opacity: var(--svc-index-dim); }
@media (hover: hover) {
  .svc-index__list:hover .svc-index__row:not(:hover) :is(.svc-index__t, .svc-index__p, .svc-index__proof) { opacity: var(--svc-index-dim); }
  .svc-index__row:hover .svc-index__t { transform: translateX(var(--sp-2)); }
}
@media (max-width: 1100px) {
  .svc-index { --svc-index-proof: 10.5rem; }
  .svc-index__body { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-7); }
}
@media (max-width: 900px) {
  .svc-index__body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .svc-index__stage { position: relative; top: auto; order: -1; }
  .svc-index__stage > .photo { aspect-ratio: var(--ratio-inline, 3 / 2); }
  .svc-index__row { grid-template-columns: var(--sp-5) minmax(0, 1fr) 36px; gap: var(--sp-1) var(--sp-4); }
  .svc-index__n { grid-column: 1; grid-row: 1; }
  .svc-index__main { grid-column: 2; grid-row: 1; }
  .svc-index__proof { grid-column: 2; grid-row: 2; display: block; padding: 0; border: 0; margin-top: var(--sp-1); }
  .svc-index__proof span::before { content: " · "; }
  .svc-index__row .svc-chip { grid-column: 3; grid-row: 1 / span 2; }
}
@media (max-width: 640px) {
  .svc-index { --svc-index-t: calc(var(--fs-h2) * .66); }
  .svc-index__row { padding-block: var(--sp-4); }
  .svc-index__n { padding-top: .45em; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-index__t, .svc-index__p, .svc-index__proof, .svc-index__stage > .photo { transition: none; }
  .svc-index__row:hover .svc-index__t { transform: none; }
}


/* ============================================================
   SV02 · One operating system, six zones
   <section class="svc-map"><div class="wrap">
     <div class="svc-head">…</div>
     <div class="svc-map__body">
       <div class="svc-map__plan" data-sel="erp">          (JS sets data-sel)
         <div class="svc-map__frame">                         (the operations ring)
           <button class="svc-map__zone svc-map__zone--ai" data-k="ai" aria-pressed>…</button>
           <span class="svc-map__wire svc-map__wire--a"><i></i></span>
           …zone--shop · wire--l · zone--erp · wire--r · zone--edi · wire--v · zone--soft
           <button class="svc-map__zone svc-map__zone--ops" data-k="ops">…</button>
         </div>
       </div>
       <div class="svc-map__panel" id="…"><article class="svc-map__art" data-k="erp" data-on>…</article> …</div>
     </div></div></section>
   The plan is HTML in a CSS grid, so its words stay real text at every
   width; on phones it turns into one column and every explanation is
   listed under it.
   ============================================================ */
.svc-map {
  --svc-map-wire: clamp(var(--sp-5), 3.4vw, var(--sp-8));     /* horizontal line length */
  --svc-map-line: color-mix(in srgb, var(--fg) 26%, transparent);
  --svc-map-dim: .5;
  --svc-map-dot: var(--brand);                                  /* the one small accent: data moving */
}
.svc-map__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-8); align-items: center; }
.svc-map__frame {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) var(--svc-map-wire) minmax(0, 1.2fr) var(--svc-map-wire) minmax(0, 1fr);
  grid-template-rows: auto var(--sp-6) auto var(--sp-7) auto;
  grid-template-areas: "ai ai ai ai ai" ". . wa . ." "shop wl erp wr edi" ". . wv . ." ". . soft . .";
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  border: 1px dashed var(--svc-map-line); border-radius: calc(var(--radius-card) * 1.5);
  transition: border-color .3s;
}
.svc-map__zone {
  appearance: none; margin: 0; font: inherit; color: var(--fg); text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: var(--sp-4); background: var(--bg);
  border: 1px solid var(--hairline); border-radius: var(--radius-card);
  transition: opacity .35s var(--ease-out), border-color .3s, background-color .3s;
}
.svc-map__zone:focus-visible { outline-offset: 3px; }
.svc-map__zone--ai { grid-area: ai; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-5); background: var(--bg-2); }
.svc-map__zone--shop { grid-area: shop; }
.svc-map__zone--erp { grid-area: erp; padding: var(--sp-5); background: var(--bg-3); border-color: color-mix(in srgb, var(--fg) 20%, transparent); }
.svc-map__zone--edi { grid-area: edi; }
.svc-map__zone--soft { grid-area: soft; }
/* Operations is the frame; its button sits on the frame's lower edge. */
.svc-map__zone--ops {
  position: absolute; left: var(--sp-5); bottom: 0; transform: translateY(50%);
  flex-direction: row; align-items: center; gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3); border-radius: 999px;
  font-size: var(--fs-small); color: var(--fg-muted);
}
.svc-map__zone--ops .ico { width: 16px; height: 16px; }
.svc-map__k {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim);
}
.svc-map__sys {
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-body); line-height: 1.3; letter-spacing: -.005em; text-wrap: balance;
}
.svc-map__zone--erp .svc-map__sys { font-size: var(--fs-h3); }
.svc-map__sub { font-size: var(--fs-small); line-height: 1.4; color: var(--fg-muted); text-wrap: pretty; }
.svc-map__chips { flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-5); font-size: var(--fs-small); color: var(--fg-muted); }
.svc-map__chips > span { display: inline-flex; align-items: center; gap: 6px; }
.svc-map__chips .ico { width: 15px; height: 15px; color: var(--fg-dim); }

/* The lines: 1px, with a node dot at each end. <i> carries the dot that
   travels once a zone that moves data is chosen. */
.svc-map__wire { position: relative; background: var(--svc-map-line); transition: background-color .3s; }
.svc-map__wire::before, .svc-map__wire::after {
  content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%; background: inherit;
}
.svc-map__wire--l, .svc-map__wire--r { align-self: center; height: 1px; }
.svc-map__wire--l { grid-area: wl; }
.svc-map__wire--r { grid-area: wr; }
.svc-map__wire--a, .svc-map__wire--v { justify-self: center; width: 1px; }
.svc-map__wire--a { grid-area: wa; }
.svc-map__wire--v { grid-area: wv; }
.svc-map__wire--l::before, .svc-map__wire--r::before { left: -2px; top: -2px; }
.svc-map__wire--l::after, .svc-map__wire--r::after { right: -2px; top: -2px; }
.svc-map__wire--a::before, .svc-map__wire--v::before { top: -2px; left: -2px; }
.svc-map__wire--a::after, .svc-map__wire--v::after { bottom: -2px; left: -2px; }
.svc-map__wire i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.svc-map__wire i::after {
  content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--svc-map-dot);
}
.svc-map__wire--l i, .svc-map__wire--r i { transform: translateX(-100%); }
.svc-map__wire--l i::after, .svc-map__wire--r i::after { right: -3px; top: -3px; }
.svc-map__wire--a i, .svc-map__wire--v i { transform: translateY(-100%); }
.svc-map__wire--a i::after, .svc-map__wire--v i::after { bottom: -3px; left: -3px; }

.svc-map__hint { margin-top: var(--sp-6); font-size: var(--fs-small); color: var(--fg-dim); max-width: none; }

/* The panel: every article in one cell, so switching never moves the page. */
.svc-map__panel { display: grid; gap: var(--sp-7); }
.svc-map__idx { font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.svc-map__art h3 {
  margin-top: var(--sp-3); font-size: calc(var(--fs-h2) * .6); line-height: 1.1;
  letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance;
}
.svc-map__art .lead { margin-top: var(--sp-4); text-wrap: pretty; }
.svc-map__where {
  margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--hairline);
  font-size: var(--fs-small); color: var(--fg-muted); text-wrap: pretty;
}
.svc-map__art .link { margin-top: var(--sp-5); }

@media (min-width: 901px) {
  .svc-map.is-live .svc-map__panel { gap: 0; }
  .svc-map.is-live .svc-map__art { grid-area: 1 / 1; transition: opacity .35s var(--ease-out), visibility 0s; }
  .svc-map.is-live .svc-map__art[data-on="false"] { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
  /* Operations wraps everything, so choosing it dims nothing but lights the frame. */
  /* The ops label sits on the dashed frame: it keeps its opaque ground and
     never takes opacity, or the frame's line would show through its words. */
  .svc-map__plan[data-sel]:not([data-sel="ops"]) .svc-map__zone:not(.svc-map__zone--ops):not([aria-pressed="true"]) { opacity: var(--svc-map-dim); }
  .svc-map__plan[data-sel="ops"] .svc-map__zone:not(.svc-map__zone--ops) { opacity: .8; }
  .svc-map__plan[data-sel] .svc-map__zone[aria-pressed="true"] { border-color: var(--fg); }
  .svc-map__plan[data-sel] .svc-map__zone--ops[aria-pressed="true"] { color: var(--fg); }
  .svc-map__plan[data-sel="ops"] .svc-map__frame { border-color: var(--fg); }
  .svc-map__plan[data-sel]:not([data-sel="ops"]) .svc-map__wire { opacity: .6; }
  .svc-map__plan[data-sel="edi"] .svc-map__wire,
  .svc-map__plan[data-sel="shop"] .svc-map__wire--l,
  .svc-map__plan[data-sel="soft"] .svc-map__wire--v,
  .svc-map__plan[data-sel="ai"] .svc-map__wire--a { background: var(--fg); opacity: 1; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .svc-map__plan[data-sel="edi"] .svc-map__wire--l i,
  .svc-map__plan[data-sel="shop"] .svc-map__wire--l i { animation: svc-map-x 1.5s var(--ease-out) .1s 2; }
  .svc-map__plan[data-sel="edi"] .svc-map__wire--r i { animation: svc-map-x 1.5s var(--ease-out) .1s 2 reverse; }
  .svc-map__plan[data-sel="edi"] .svc-map__wire--v i,
  .svc-map__plan[data-sel="soft"] .svc-map__wire--v i,
  .svc-map__plan[data-sel="ai"] .svc-map__wire--a i { animation: svc-map-y 1.3s var(--ease-out) .1s 2; }
}
@keyframes svc-map-x {
  0% { transform: translateX(-100%); opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { transform: none; opacity: 0; }
}
@keyframes svc-map-y {
  0% { transform: translateY(-100%); opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { transform: none; opacity: 0; }
}
@media (max-width: 1100px) {
  .svc-map__body { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-7); }
}
@media (max-width: 900px) {
  .svc-map__body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
  .svc-map__frame {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "ai" "wa" "shop" "wl" "erp" "wr" "edi" "wv" "soft";
    padding: var(--sp-4) var(--sp-4) var(--sp-7);
  }
  .svc-map__wire { justify-self: center; align-self: auto; width: 1px; height: var(--sp-5); }
  .svc-map__wire::before { left: -2px; top: -2px; right: auto; }
  .svc-map__wire::after { left: -2px; bottom: -2px; top: auto; right: auto; }
  .svc-map__wire i { display: none; }
  .svc-map__zone { padding: var(--sp-3) var(--sp-4); }
  /* A column must not wrap: the chips' 100% basis would push them into a
     second column beside the label. */
  .svc-map__zone--ai { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .svc-map__chips { flex: none; justify-content: flex-start; gap: var(--sp-1) var(--sp-4); }
  .svc-map__chips > span { min-width: 0; max-width: 100%; }
  .svc-map__hint { display: none; }
  .svc-map__panel { gap: 0; border-bottom: 1px solid var(--hairline); }
  .svc-map__art { padding-block: var(--sp-5); border-top: 1px solid var(--hairline); scroll-margin-top: var(--sp-5); }
  .svc-map__art h3 { margin-top: var(--sp-2); font-size: calc(var(--fs-h2) * .75); }
  .svc-map__art .lead { margin-top: var(--sp-3); font-size: var(--fs-body); }
  .svc-map__where { margin-top: var(--sp-3); padding-top: 0; border-top: 0; }
  .svc-map__art .link { margin-top: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-map__frame, .svc-map__zone, .svc-map__wire, .svc-map__art { transition: none; }
  .svc-map__wire i { animation: none; display: none; }
}


/* ============================================================
   SV03 · Service tabs with a work panel
   <section class="svc-tabs"><div class="wrap">
     <div class="svc-head">…</div>
     <div class="svc-tabs__bar" hidden>                     (JS: role=tablist, unhidden)
       <button class="svc-tabs__tab" id="…-tab-erp" aria-controls="…-panel-erp"><small>01</small>ERP</button> …
     </div>
     <div class="svc-tabs__panels">
       <div class="svc-tabs__panel" id="…-panel-erp">       (JS: role=tabpanel, data-on)
         <div class="photo parallax">…</div>
         <div class="svc-tabs__text"><h3>…</h3><p class="lead">…</p>
           <ul class="svc-tabs__out"><li><svg class="ico">…</svg><span>…</span></li> …</ul>
           <div class="svc-tabs__fig"><p class="svc-tabs__v">11</p><p class="svc-tabs__k">…</p></div>
           <a class="link">…</a></div>
       </div> …
     </div>
     <div class="svc-tabs__base"><p>…</p><a class="link">…</a></div>
   </div></section>
   Without JS the panels simply stack, each with its heading.
   ============================================================ */
.svc-tabs {
  --svc-tabs-fig: calc(var(--fs-display) * 1.15);   /* the panel's figure */
}
.svc-tabs__bar {
  display: flex; gap: var(--sp-7); margin-bottom: var(--sp-7);
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto; scrollbar-width: none;
}
.svc-tabs__tab {
  appearance: none; position: relative; flex: none; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  margin: 0; padding: var(--sp-3) 0 var(--sp-4); border: 0; background: none;
  font-family: var(--font-head); font-stretch: var(--head-stretch, normal); font-weight: 600;
  font-size: var(--fs-lead); line-height: 1.3; color: var(--fg-muted); white-space: nowrap;
  transition: color .3s;
}
.svc-tabs__tab small { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--ls-eyebrow); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.svc-tabs__tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease-out);
}
.svc-tabs__tab[aria-selected="true"] { color: var(--fg); }
.svc-tabs__tab[aria-selected="true"]::after { transform: none; }
.svc-tabs__tab:focus-visible { outline-offset: 2px; }
@media (hover: hover) { .svc-tabs__tab:hover { color: var(--fg); } }

.svc-tabs__panels { display: grid; gap: var(--sp-8); }
.svc-tabs.is-tabs .svc-tabs__panels { gap: 0; }
.svc-tabs.is-tabs .svc-tabs__panel { grid-area: 1 / 1; transition: opacity .35s var(--ease-out) .05s, visibility 0s; }
.svc-tabs.is-tabs .svc-tabs__panel[data-on="false"] { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.svc-tabs__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-8); align-items: center; }
.svc-tabs__text h3 { font-size: calc(var(--fs-h2) * .6); line-height: 1.1; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance; }
.svc-tabs__text .lead { margin-top: var(--sp-4); text-wrap: pretty; }
.svc-tabs__out { list-style: none; margin: var(--sp-5) 0 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.svc-tabs__out li { display: flex; align-items: flex-start; gap: var(--sp-3); padding-block: var(--sp-2); border-top: 1px solid var(--hairline); color: var(--fg); line-height: 1.5; }
.svc-tabs__out .ico { margin-top: 2px; color: var(--fg-dim); }
.svc-tabs__fig { margin-top: var(--sp-6); display: flex; align-items: flex-end; gap: var(--sp-4); }
.svc-tabs__v {
  flex: none; max-width: none;
  font-family: var(--font-head); font-weight: var(--fw-head, 700); font-stretch: var(--head-stretch, normal);
  font-size: var(--svc-tabs-fig); line-height: .9; letter-spacing: var(--ls-head, var(--ls-display));
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.svc-tabs__k { font-size: var(--fs-small); line-height: 1.45; color: var(--fg-muted); max-width: 30ch; }
.svc-tabs__k span { display: block; color: var(--fg-dim); }
.svc-tabs__text .link { margin-top: var(--sp-5); }
.svc-tabs__base {
  margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6);
}
.svc-tabs__base p { max-width: 72ch; }
.svc-tabs__base b { color: var(--fg); font-weight: 600; }
@media (max-width: 900px) {
  .svc-tabs__bar { gap: var(--sp-5); margin-bottom: var(--sp-6); }
  .svc-tabs__panel { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .svc-tabs__text h3 { font-size: calc(var(--fs-h2) * .8); }
  .svc-tabs__base { margin-top: var(--sp-7); }
}
@media (max-width: 640px) {
  .svc-tabs { --svc-tabs-fig: var(--fs-display); }
  .svc-tabs__bar { gap: var(--sp-4); }
  .svc-tabs__tab { font-size: var(--fs-body); }
  .svc-tabs__tab small { display: none; }
  .svc-tabs__fig { margin-top: var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-tabs__tab, .svc-tabs__tab::after, .svc-tabs.is-tabs .svc-tabs__panel { transition: none; }
}


/* ============================================================
   SV04 · Lead service staged, the rest quiet
   <section class="svc-lead"><div class="wrap">
     <div class="svc-head">…</div>
     <div class="svc-lead__body">
       <article class="svc-lead__main">
         <div class="photo parallax">…</div>               (bleeds off the left edge)
         <div class="svc-lead__text"><div>eyebrow + h3.svc-lead__t</div>
           <div><p class="lead">…</p><dl class="svc-lead__facts">…</dl><a class="btn btn--ghost">…</a></div></div>
       </article>
       <aside class="svc-lead__rest"><p class="eyebrow">…</p>
         <ul class="svc-lead__list"><li><a class="svc-lead__row svc-go">
           <span class="svc-lead__n">02</span><span class="svc-lead__name">…</span><span class="arrow"></span>
           <span class="svc-lead__p">…</span></a></li> …</ul></aside>
     </div></div></section>
   ============================================================ */
.svc-lead {
  --svc-lead-t: calc(var(--fs-h2) * .78);   /* the lead service's name */
}
.svc-lead__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-8); align-items: start; }
/* I02-style bleed: the frame runs to the viewport's left edge; only its
   inner corners stay rounded. */
.svc-lead__main > .photo {
  width: calc(100% + var(--gutter)); margin-left: calc(var(--gutter) * -1);
  border-left: 0; border-radius: 0 var(--img-radius, var(--radius-card)) var(--img-radius, var(--radius-card)) 0;
}
.svc-lead__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 var(--sp-7); margin-top: var(--sp-6); }
.svc-lead__text > .eyebrow, .svc-lead__t { grid-column: 1 / -1; }
.svc-lead__text > .eyebrow { margin-bottom: var(--sp-3); }
/* The name never splits at its hyphen ("ERP-/Beratung"): one line, sized to fit. */
.svc-lead__t {
  margin-bottom: var(--sp-5); white-space: nowrap;
  font-size: var(--svc-lead-t); line-height: 1.02; letter-spacing: var(--ls-head, var(--ls-display));
}
.svc-lead__side > .svc-lead__facts:first-child { margin-top: 0; }
.svc-lead__text .lead { color: var(--fg); text-wrap: pretty; }
.svc-lead__facts {
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-5) 0 0; padding-top: var(--sp-4); border-top: 1px solid var(--hairline);
  font-size: var(--fs-small); line-height: 1.45;
}
.svc-lead__facts dt { color: var(--fg-dim); }
.svc-lead__facts dd { margin: 0; color: var(--fg-muted); }
.svc-lead__text .btn { margin-top: var(--sp-6); }
.svc-lead__rest .eyebrow { margin-bottom: var(--sp-4); }
.svc-lead__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.svc-lead__row {
  display: grid; grid-template-columns: var(--sp-5) minmax(0, 1fr) auto;
  gap: var(--sp-1) var(--sp-3); align-items: baseline;
  padding-block: var(--sp-4) var(--sp-5); border-top: 1px solid var(--hairline);
  color: var(--fg); text-decoration: none;
}
.svc-lead__row:focus-visible { outline-offset: 4px; }
.svc-lead__n { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.svc-lead__name {
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance;
  transition: transform .5s var(--ease-out);
}
.svc-lead__row .arrow { align-self: center; color: var(--fg-dim); transition: color .3s; }
.svc-lead__p { grid-column: 2 / -1; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
@media (hover: hover) {
  .svc-lead__row:hover .svc-lead__name { transform: translateX(var(--sp-1)); }
  .svc-lead__row:hover .arrow { color: var(--fg); }
}
@media (max-width: 1100px) {
  .svc-lead__body { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-7); }
  .svc-lead__text { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .svc-lead { --svc-lead-t: calc(var(--fs-h2) * 1.1); }
  .svc-lead__body { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .svc-lead__main > .photo { width: calc(100% + var(--gutter) * 2); margin-inline: calc(var(--gutter) * -1); border-inline: 0; border-radius: 0; }
  .svc-lead__text { margin-top: var(--sp-5); }
}
@media (max-width: 640px) {
  .svc-lead { --svc-lead-t: calc(var(--fs-h2) * .9); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-lead__name, .svc-lead__row .arrow { transition: none; }
  .svc-lead__row:hover .svc-lead__name { transform: none; }
}


/* ============================================================
   SV05 · The client's question as the title
   <section class="svc-q"><div class="wrap">
     <div class="svc-head">…</div>
     <ol class="svc-q__grid" data-reveal-group>
       <li class="reveal"><a class="svc-q__item svc-go">
         <span class="svc-q__label"><span>Service</span><span>01</span></span>
         <h3 class="svc-q__ask"><span class="svc-q__oq">„</span>Question?<span>“</span></h3>
         <span class="svc-q__ans">promise</span>
         <span class="svc-q__go">Zur … <span class="arrow"></span></span></a></li> …
     </ol>
     <p class="svc-q__more">… <a href="tel:…">…</a></p>
   </div></section>
   The opening quote hangs into the margin, so every question's first
   letter sits on the grid line.
   ============================================================ */
.svc-q {
  --svc-q-ask: calc(var(--fs-h2) * .56);   /* the question */
  --svc-q-hang: -.46em;                     /* the opening mark's width */
}
.svc-q__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-8); }
.svc-q__grid > li { display: flex; }
.svc-q__item {
  display: flex; flex-direction: column; width: 100%;
  padding: var(--sp-4) 0 var(--sp-7); border-top: 1px solid var(--hairline);
  color: var(--fg); text-decoration: none; transition: border-color .3s;
}
.svc-q__item:focus-visible { outline-offset: 4px; border-top-color: var(--fg); }
.svc-q__label {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.svc-q__ask {
  margin-top: var(--sp-5); max-width: 21ch;
  font-size: var(--svc-q-ask); line-height: 1.14; letter-spacing: var(--ls-head, var(--ls-display));
  text-wrap: balance;
}
.svc-q__oq { margin-left: var(--svc-q-hang); }
.svc-q__ans { margin-top: var(--sp-4); max-width: 44ch; color: var(--fg-muted); text-wrap: pretty; }
.svc-q__go { margin-top: auto; padding-top: var(--sp-5); display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; }
.svc-q__more { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); max-width: none; }
@media (hover: hover) { .svc-q__item:hover { border-top-color: var(--fg); } }
@media (max-width: 900px) {
  .svc-q__grid { gap: 0 var(--sp-6); }
  .svc-q { --svc-q-ask: calc(var(--fs-h2) * .72); }
}
@media (max-width: 640px) {
  .svc-q__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-q { --svc-q-ask: calc(var(--fs-h2) * .75); }
  .svc-q__item { padding-bottom: var(--sp-6); }
  .svc-q__ask { margin-top: var(--sp-3); }
  .svc-q__go { padding-top: var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) { .svc-q__item { transition: none; } }


/* ============================================================
   SV06 · Sticky intro, services as chapters
   <section class="svc-chap"><div class="wrap svc-chap__grid">
     <div class="svc-chap__intro"> eyebrow, h2, lead, .svc-chap__ask (phone, hours), .btn--ghost </div>   (sticky)
     <ol class="svc-chap__list">
       <li class="svc-chap__item reveal">
         <div class="svc-chap__vis"> .photo (still)  or  <figure class="svc-chap__fig">…schematic…</figure> </div>
         <div class="svc-chap__text"><p class="svc-chap__n">01 / 06</p><h3>…</h3><p>…</p><a class="link">…</a></div>
       </li> …
     </ol></div></section>
   Schematics are HTML fragments on a --bg-2 panel in the photo's ratio,
   labelled for assistive tech as a whole (role="img"). They show a
   mechanism, never the client's UI.
   ============================================================ */
.svc-chap {
  --svc-chap-top: var(--sp-8);   /* where the intro pins */
}
.svc-chap__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
.svc-chap__intro { position: sticky; top: var(--svc-chap-top); }
.svc-chap__intro h2 { text-wrap: balance; }
.svc-chap__intro .lead { margin-top: var(--sp-5); text-wrap: pretty; }
.svc-chap__ask { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); max-width: 36ch; }
.svc-chap__ask p { font-size: var(--fs-small); }
.svc-chap__tel { margin-top: var(--sp-1); }
.svc-chap__tel a {
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.svc-chap__ask .svc-chap__hours { margin-top: var(--sp-1); color: var(--fg-dim); }
.svc-chap__intro .btn { margin-top: var(--sp-6); }
.svc-chap__list { list-style: none; margin: 0; padding: 0; }
.svc-chap__item {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--sp-6); align-items: center;
  padding-block: var(--sp-6); border-top: 1px solid var(--hairline);
}
.svc-chap__item:first-child { padding-top: 0; border-top: 0; }
.svc-chap__item:last-child { padding-bottom: 0; }
.svc-chap__n { font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.svc-chap__text h3 { margin-top: var(--sp-2); font-size: calc(var(--fs-h2) * .46); line-height: 1.12; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance; }
.svc-chap__text > p:not(.svc-chap__n) { margin-top: var(--sp-3); text-wrap: pretty; }
.svc-chap__text .link { margin-top: var(--sp-4); }

/* schematics */
.svc-chap__fig {
  margin: 0; aspect-ratio: var(--ratio-inline, 3 / 2);
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-2); border: 1px solid var(--hairline); border-radius: var(--img-radius, var(--radius-card));
  font-size: var(--fs-small); line-height: 1.35; color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.svc-chap__fig ol, .svc-chap__fig ul { list-style: none; margin: 0; padding: 0; }
.svc-chap__fig li { display: flex; align-items: center; gap: var(--sp-3); padding-block: 7px; border-top: 1px solid var(--hairline); }
.svc-chap__fh {
  display: flex; justify-content: space-between; gap: var(--sp-3); max-width: none; padding-bottom: var(--sp-1);
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
}
.svc-chap__sn { width: 1.2em; color: var(--fg-dim); }
.svc-chap__tag { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--fg-dim); }
.svc-chap__tag .ico { width: 14px; height: 14px; }
.svc-chap__fig--steps li[data-ai="true"] { color: var(--fg); }
.svc-chap__fig--steps li[data-ai="true"] .svc-chap__tag { color: var(--fg); font-weight: 600; }
.svc-chap__sync li { justify-content: space-between; }
.svc-chap__sync li b {
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); line-height: 1; color: var(--fg); transition: color .4s;
}
.svc-chap__sync li b[data-set="true"] { animation: svc-chap-set .6s var(--ease-out); }
.svc-chap__sync[data-state="stale"] li:not(:first-child) b { color: var(--fg-dim); }
.svc-chap__status { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); max-width: none; color: var(--fg); transition: color .4s; }
.svc-chap__status .ico { width: 16px; height: 16px; transition: opacity .4s; }
.svc-chap__sync[data-state="stale"] .svc-chap__status { color: var(--fg-dim); }
.svc-chap__sync[data-state="stale"] .svc-chap__status .ico { opacity: 0; }
@keyframes svc-chap-set { from { opacity: 0; transform: translateY(6px); } }
.svc-chap__fig--log time { width: 3.2em; color: var(--fg-dim); }
.svc-chap__fig--log li:last-child { color: var(--fg); }
.svc-chap__foot { margin-top: var(--sp-2); max-width: none; font-size: var(--fs-small); color: var(--fg-dim); }
@media (max-width: 1100px) {
  .svc-chap__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-7); }
  .svc-chap__item { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
}
@media (max-width: 900px) {
  .svc-chap__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
  .svc-chap__intro { position: static; }
  .svc-chap__item { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); padding-block: var(--sp-6); }
  .svc-chap__text h3 { font-size: calc(var(--fs-h2) * .72); }
}
@media (max-width: 640px) {
  .svc-chap__fig { padding: var(--sp-3) var(--sp-4); gap: var(--sp-1); }
  .svc-chap__fig li { padding-block: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-chap__sync li b, .svc-chap__status, .svc-chap__status .ico { transition: none; }
  .svc-chap__sync li b[data-set="true"] { animation: none; }
}


/* ============================================================
   SV07 · Service ledger with "ab" prices
   <section class="svc-ledger"><div class="wrap">
     <div class="svc-head">…</div>
     <table class="svc-ledger__table" style="--svc-ledger-weeks:16">
       <thead><tr><th>Leistung</th><th>Einstieg</th><th><span class="svc-ledger__axis">Dauer 0 4 8 12 16</span></th><th class="svc-ledger__num">Ab</th></tr></thead>
       <tbody><tr class="reveal">
         <th scope="row"><a class="svc-ledger__name">…</a><span class="svc-ledger__p">…</span></th>
         <td data-label="Einstieg">…</td>
         <td data-label="Dauer"><span class="svc-ledger__dur"><span class="svc-ledger__track"><span class="svc-ledger__range" style="--a:8;--b:16"></span></span><span>8–16 Wochen</span></span></td>
         <td class="svc-ledger__num" data-label="Ab"><span class="svc-ledger__price"><span class="svc-ledger__ab">ab</span> 14.900 €</span></td>
       </tr> …</tbody></table>
     <div class="svc-ledger__foot"><p>…</p><a class="link">…</a></div>
   </div></section>
   The whole row is the service's link (the name's ::after covers it).
   ============================================================ */
.svc-ledger {
  --svc-ledger-range: color-mix(in srgb, var(--fg) 45%, transparent);
  --svc-ledger-price: calc(var(--fs-h3) * 1.15);
}
.svc-ledger__table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.svc-ledger__table thead th {
  padding: 0 var(--sp-5) var(--sp-3) 0; text-align: left; vertical-align: bottom;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); font-weight: 400;
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
  border-bottom: 1px solid var(--hairline);
}
.svc-ledger__table thead th:nth-child(1) { width: 32%; }
.svc-ledger__table thead th:nth-child(2) { width: 21%; }
.svc-ledger__table thead th:nth-child(3) { width: 31%; }
.svc-ledger__table thead th:last-child, .svc-ledger__table td:last-child { padding-right: 0; }
.svc-ledger__table thead th.svc-ledger__num { text-align: right; }
/* The week scale over the duration column: each tick at its share of it. */
.svc-ledger__axis { display: grid; gap: var(--sp-2); }
.svc-ledger__ticks { position: relative; display: block; height: 1.3em; letter-spacing: 0; }
.svc-ledger__ticks > span { position: absolute; top: 0; left: calc(var(--w) / var(--svc-ledger-weeks) * 100%); transform: translateX(-50%); white-space: nowrap; }
.svc-ledger__ticks > span:first-child { transform: none; }
.svc-ledger__ticks > span:last-child { transform: translateX(-100%); }
.svc-ledger__table tbody tr { position: relative; border-bottom: 1px solid var(--hairline); transition: background-color .3s; }
.svc-ledger__table tbody th, .svc-ledger__table tbody td { padding: var(--sp-5) var(--sp-5) var(--sp-5) 0; text-align: left; vertical-align: middle; font-weight: 400; }
.svc-ledger__table tbody td { color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.45; }
.svc-ledger__table tbody td:nth-child(2) { color: var(--fg); }
.svc-ledger__name {
  display: block; color: var(--fg); text-decoration: none;
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em;
}
.svc-ledger__name::after { content: ""; position: absolute; inset: 0; }
.svc-ledger__name:focus-visible { outline: 0; }
.svc-ledger__name:focus-visible::after { outline: 2px solid var(--fg); outline-offset: 2px; }
.svc-ledger__p { display: block; margin-top: 4px; max-width: 40ch; font-size: var(--fs-small); line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; }
.svc-ledger__dur { display: grid; gap: var(--sp-2); }
.svc-ledger__track { position: relative; display: block; height: 1px; margin-block: 3px; background: var(--hairline); }
.svc-ledger__range {
  position: absolute; top: -2px; height: 5px; border-radius: 3px; background: var(--svc-ledger-range);
  left: calc(var(--a) / var(--svc-ledger-weeks) * 100%);
  width: calc((var(--b) - var(--a)) / var(--svc-ledger-weeks) * 100%);
  transition: background-color .3s;
}
/* Ongoing: the bar runs off the scale, its end left open. */
.svc-ledger__range--run { border-radius: 3px 0 0 3px; }
.svc-ledger__num { text-align: right; white-space: nowrap; }
.svc-ledger__table tbody td.svc-ledger__num { text-align: right; }
.svc-ledger__price {
  display: block; color: var(--fg);
  font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--svc-ledger-price); line-height: 1.2; letter-spacing: -.01em;
}
.svc-ledger__ab { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; color: var(--fg-dim); }
.svc-ledger__per { display: block; margin-top: 2px; color: var(--fg-dim); }
.svc-ledger__foot { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-6); }
.svc-ledger__foot p { font-size: var(--fs-small); max-width: 64ch; }
.svc-ledger__table tbody tr:focus-within .svc-ledger__range { background: var(--fg); }
@media (hover: hover) {
  .svc-ledger__table tbody tr:hover { background: color-mix(in srgb, var(--fg) 3%, transparent); }
  .svc-ledger__table tbody tr:hover .svc-ledger__range { background: var(--fg); }
}
@media (max-width: 900px) {
  .svc-ledger__table thead th:nth-child(1) { width: 36%; }
  .svc-ledger__table thead th:nth-child(3) { width: 26%; }
  .svc-ledger__table tbody th, .svc-ledger__table tbody td { padding-right: var(--sp-4); }
  .svc-ledger__p { display: none; }
}
/* Phones: each row becomes a small block; column names ride along as labels. */
@media (max-width: 640px) {
  .svc-ledger__table, .svc-ledger__table tbody { display: block; }
  .svc-ledger__table thead { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
  .svc-ledger__table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3) var(--sp-4); padding-block: var(--sp-5); }
  .svc-ledger__table tbody tr:first-child { border-top: 1px solid var(--hairline); }
  .svc-ledger__table tbody th, .svc-ledger__table tbody td { display: block; padding: 0; }
  .svc-ledger__table tbody th { grid-column: 1; }
  .svc-ledger__table tbody td.svc-ledger__num { grid-column: 2; grid-row: 1; }
  .svc-ledger__table tbody td:nth-child(2), .svc-ledger__table tbody td:nth-child(3) { grid-column: 1 / -1; }
  .svc-ledger__table tbody td:nth-child(2)::before, .svc-ledger__table tbody td:nth-child(3)::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--fg-dim);
  }
  .svc-ledger__p { display: block; }
  .svc-ledger__foot { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-ledger__table tbody tr, .svc-ledger__range { transition: none; }
}


/* ============================================================
   SV08 · Expertise matrix you can search
   <section class="svc-matrix"><div class="wrap">
     <div class="svc-head">…</div>
     <div class="svc-matrix__find" hidden>                  (JS unhides)
       <div class="field"><label for="…-q">…</label><input id="…-q" type="search"></div>
       <p class="svc-matrix__try">Try <button data-try="Xentral">Xentral</button> …</p>
       <p class="svc-matrix__count" aria-live="polite"></p>
     </div>
     <div class="svc-matrix__grid">
       <div class="svc-matrix__cell" data-k="erp">
         <h3 class="svc-matrix__t"><span class="svc-matrix__n">01</span><span class="svc-matrix__name">…</span></h3>
         <div class="svc-matrix__body" id="…"><p class="svc-matrix__p">…</p><ul class="svc-matrix__list"><li>…</li> …</ul><a class="link">…</a></div>
       </div> …
     </div></div></section>
   On phones (≤640) JS turns each heading into an accordion button.
   ============================================================ */
.svc-matrix {
  --svc-matrix-miss: .32;   /* what a search doesn't match */
}
.svc-matrix__find {
  display: grid; grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--sp-2) var(--sp-6);
  align-items: end; margin-bottom: var(--sp-8);
}
.svc-matrix__count { grid-column: 1 / -1; }
.svc-matrix__try { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-4); padding-bottom: 13px; font-size: var(--fs-small); max-width: none; }
.svc-matrix__try button {
  appearance: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--fg);
  text-decoration: underline 1px; text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  transition: text-decoration-color .3s, text-decoration-thickness .3s var(--ease-out);
}
@media (hover: hover) { .svc-matrix__try button:hover { text-decoration-thickness: 2px; text-decoration-color: var(--brand); } }
.svc-matrix__count { min-height: 1.6em; font-size: var(--fs-small); color: var(--fg-muted); max-width: none; }
.svc-matrix__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-7); }
.svc-matrix__cell { padding-top: var(--sp-4); border-top: 1px solid var(--hairline); transition: opacity .3s; }
.svc-matrix__t { display: flex; align-items: baseline; gap: var(--sp-3); font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; }
.svc-matrix__n { font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); font-weight: 400; letter-spacing: var(--ls-eyebrow); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.svc-matrix__p { margin-top: var(--sp-2); font-size: var(--fs-small); line-height: 1.5; text-wrap: pretty; }
.svc-matrix__list { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.svc-matrix__list li {
  padding-block: 7px; border-top: 1px solid color-mix(in srgb, var(--fg) 7%, transparent);
  color: var(--fg); line-height: 1.45; transition: opacity .3s;
}
.svc-matrix__cell .link { margin-top: var(--sp-3); font-size: var(--fs-small); }
/* A search: what matches keeps full contrast and takes the one accent
   underline; the rest steps back. */
.svc-matrix[data-q="on"] .svc-matrix__cell:not([data-hit="true"]) { opacity: var(--svc-matrix-miss); }
.svc-matrix[data-q="on"] .svc-matrix__cell[data-hit="true"] li:not([data-hit="true"]) { opacity: .45; }
.svc-matrix[data-q="on"] li[data-hit="true"] { text-decoration: underline 2px var(--brand); text-underline-offset: .3em; }
.svc-matrix__toggle {
  appearance: none; width: 100%; margin: 0; padding: var(--sp-2) 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: baseline; gap: var(--sp-3); text-align: left;
  font: inherit; color: inherit; letter-spacing: inherit;
}
.svc-matrix__chev { width: 20px; height: 20px; margin-left: auto; align-self: center; flex: none; fill: none; stroke: var(--fg-dim); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.svc-matrix__toggle[aria-expanded="true"] .svc-matrix__chev { transform: rotate(180deg); }
@media (max-width: 1100px) {
  .svc-matrix__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) var(--sp-6); }
}
@media (max-width: 900px) {
  .svc-matrix__find { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-7); }
  .svc-matrix__try { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .svc-matrix__grid { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--hairline); }
  .svc-matrix__cell { padding-top: var(--sp-2); }
  .svc-matrix__body { padding-bottom: var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-matrix__cell, .svc-matrix__list li, .svc-matrix__chev, .svc-matrix__try button { transition: none; }
}


/* ---- 2026-09-11 · BDG page view ---- */

/* ============================================================
   SV09 · Six promises, open the one you need
   <section class="svc-open"><div class="wrap">
     <div class="svc-head">…</div>
     <ol class="svc-open__list">
       <li class="svc-open__item" data-open="true">
         <div class="svc-open__head">
           <span class="svc-open__n">01</span>
           <h3 class="svc-open__t"><button class="svc-open__btn" aria-expanded aria-controls>Name</button></h3>
           <p class="svc-open__promise">…</p>
           <span class="svc-open__sign"></span>
         </div>
         <div class="svc-open__panel" id="…" role="region">
           <div class="svc-open__inner"> .photo.parallax · div.svc-open__text ( p · a.link ) </div>
         </div>
       </li> …
     </ol></div></section>
   Name and promise are always visible. JS adds .is-armed; only then do
   closed rows (data-open="false") fold their panel to 0fr. The button's
   ::after covers the whole row head, so the row is the target.
   ============================================================ */
.svc-open {
  --svc-open-cols: var(--sp-6) minmax(0, 4fr) minmax(0, 5fr) 40px;
  --svc-open-t: calc(var(--fs-h2) * .46);    /* service name */
  --svc-open-ease: .55s;
}
.svc-open__list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--hairline); }
.svc-open__item { border-top: 1px solid var(--hairline); }
.svc-open__head {
  position: relative; display: grid; grid-template-columns: var(--svc-open-cols);
  gap: var(--sp-2) var(--sp-5); align-items: baseline; padding-block: var(--sp-5);
}
.svc-open__n {
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.svc-open__t { font-size: var(--svc-open-t); line-height: 1.12; letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance; }
/* block, so the row's baseline is the name's first line, not its last */
.svc-open__btn {
  display: block; appearance: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-align: left;
}
.svc-open__btn::after { content: ""; position: absolute; inset: 0; }
.svc-open__btn:focus-visible { outline: 0; }
.svc-open__btn:focus-visible::after { outline: 2px solid var(--fg); outline-offset: 2px; border-radius: 4px; }
.svc-open__promise { font-size: var(--fs-lead); line-height: 1.5; max-width: 46ch; text-wrap: pretty; }
.svc-open__sign {
  display: none; position: relative; align-self: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 24%, transparent); color: var(--fg);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s;
}
.svc-open.is-armed .svc-open__sign { display: block; }
.svc-open__sign::before, .svc-open__sign::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px;
  background: currentColor; border-radius: 1px; transition: transform var(--svc-open-ease) var(--ease-out);
}
.svc-open__sign::after { transform: rotate(90deg); }
.svc-open__item[data-open="true"] .svc-open__sign::after { transform: rotate(0deg); }
.svc-open__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--svc-open-ease) var(--ease-out); }
.svc-open__inner {
  min-height: 0; overflow: clip;
  display: grid; grid-template-columns: var(--svc-open-cols); column-gap: var(--sp-5); align-items: start;
  transition: opacity .4s var(--ease-out), visibility 0s;
}
.svc-open__inner > * { margin-bottom: var(--sp-6); }
.svc-open__inner > .photo { grid-column: 2; }
.svc-open__text { grid-column: 3; }
.svc-open__text p { text-wrap: pretty; }
.svc-open__text .link { margin-top: var(--sp-4); }
.svc-open.is-armed .svc-open__item[data-open="false"] .svc-open__panel { grid-template-rows: 0fr; }
.svc-open.is-armed .svc-open__item[data-open="false"] .svc-open__inner { opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s var(--svc-open-ease); }
.svc-open__head:has(.svc-open__btn:focus-visible) .svc-open__sign { background: var(--fg); color: var(--bg); border-color: var(--fg); }
@media (hover: hover) {
  .svc-open__head:hover .svc-open__sign { background: var(--fg); color: var(--bg); border-color: var(--fg); }
}
@media (max-width: 900px) {
  .svc-open { --svc-open-cols: var(--sp-5) minmax(0, 1fr) 40px; }
  .svc-open__n { grid-column: 1; grid-row: 1; }
  .svc-open__t { grid-column: 2; grid-row: 1; }
  .svc-open__promise { grid-column: 2; grid-row: 2; }
  .svc-open__sign { grid-column: 3; grid-row: 1; }
  .svc-open__inner > .photo, .svc-open__text { grid-column: 2 / -1; }
  .svc-open__inner > .photo { margin-bottom: var(--sp-4); }
}
@media (max-width: 640px) {
  .svc-open { --svc-open-cols: minmax(0, 1fr) 40px; --svc-open-t: calc(var(--fs-h2) * .7); }
  .svc-open__head { padding-block: var(--sp-4); gap: var(--sp-1) var(--sp-3); }
  .svc-open__n { display: none; }
  .svc-open__t, .svc-open__promise { grid-column: 1; }
  .svc-open__sign { grid-column: 2; }
  .svc-open__promise { font-size: var(--fs-body); }
  .svc-open__inner > .photo, .svc-open__text { grid-column: 1 / -1; }
  .svc-open__inner > * { margin-bottom: var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-open__panel, .svc-open__inner, .svc-open__sign, .svc-open__sign::before, .svc-open__sign::after { transition: none; }
  .svc-open.is-armed .svc-open__item[data-open="false"] .svc-open__inner { transition: none; }
}


/* ============================================================
   SV10 · Advise, build, run: six in three
   <section class="svc-arc"><div class="wrap">
     <div class="svc-head">…</div>
     <ol class="svc-arc__cols">
       <li class="svc-arc__col">
         <div class="svc-arc__stage"> p.svc-arc__idx (01 · 2 Leistungen) · h3.svc-arc__k · p.svc-arc__sub </div>
         .photo.svc-arc__photo          (first and last stage only)
         <ul class="svc-arc__list"><li class="svc-arc__svc"> h4 · p.svc-arc__promise · p.svc-arc__para · a.link </li> …</ul>
       </li> × 3
     </ol></div></section>
   Three columns of two, three and one: one rule across the top, rules
   between the columns. The photos sit where a column is short (the
   last one in people ratio), so the columns end near one line.
   ============================================================ */
.svc-arc {
  --svc-arc-k: calc(var(--fs-h2) * .62);   /* stage name */
}
.svc-arc__cols {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline);
}
.svc-arc__col { padding: var(--sp-5) var(--sp-6) 0; border-left: 1px solid var(--hairline); }
.svc-arc__col:first-child { padding-left: 0; border-left: 0; }
.svc-arc__col:last-child { padding-right: 0; }
.svc-arc__idx {
  display: flex; justify-content: space-between; gap: var(--sp-3); max-width: none;
  font-family: var(--font-label, inherit); font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--fg-dim); font-variant-numeric: tabular-nums;
}
.svc-arc__k { margin-top: var(--sp-5); font-size: var(--svc-arc-k); line-height: 1.05; letter-spacing: var(--ls-head, var(--ls-display)); }
.svc-arc__sub { margin-top: var(--sp-2); text-wrap: balance; }
.svc-arc__photo { margin-top: var(--sp-6); }
.svc-arc__list { list-style: none; margin: var(--sp-6) 0 0; padding: 0; }
.svc-arc__svc + .svc-arc__svc { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.svc-arc__svc h4 {
  margin: 0; font-family: var(--font-head); font-weight: 600; font-stretch: var(--head-stretch, normal);
  font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.01em; color: var(--fg); text-wrap: balance;
}
.svc-arc__promise { margin-top: var(--sp-2); color: var(--fg); text-wrap: pretty; }
.svc-arc__para { margin-top: var(--sp-2); font-size: var(--fs-small); line-height: 1.6; text-wrap: pretty; }
.svc-arc__svc .link { margin-top: var(--sp-3); }
@media (max-width: 1100px) {
  .svc-arc { --svc-arc-k: calc(var(--fs-h2) * .7); }
  .svc-arc__col { padding-inline: var(--sp-5); }
}
@media (max-width: 900px) {
  .svc-arc__cols { grid-template-columns: minmax(0, 1fr); border-top: 0; }
  .svc-arc__col, .svc-arc__col:first-child, .svc-arc__col:last-child {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--sp-6); align-content: start;
    padding: var(--sp-5) 0 var(--sp-7); border-left: 0; border-top: 1px solid var(--hairline);
  }
  .svc-arc__stage, .svc-arc__photo { grid-column: 1; }
  .svc-arc__photo.photo--people { aspect-ratio: var(--ratio-inline, 3 / 2); }
  .svc-arc__list { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
  .svc-arc__col:last-child { padding-bottom: 0; }
}
@media (max-width: 640px) {
  .svc-arc__col, .svc-arc__col:first-child, .svc-arc__col:last-child { grid-template-columns: minmax(0, 1fr); }
  .svc-arc__list { grid-column: 1; grid-row: auto; margin-top: var(--sp-5); }
  .svc-arc__photo { margin-top: var(--sp-5); }
  .svc-arc__k { margin-top: var(--sp-3); }
}


/* ============================================================
   SV11 · Service shelf you page through
   <section class="svc-shelf">
     <div class="wrap svc-shelf__head">
       <div> .eyebrow · h2 </div>
       <div class="svc-shelf__side"> .lead · div.svc-shelf__ctl[hidden] ( p.svc-shelf__count · button × 2 ) </div>
     </div>
     <div class="svc-shelf__track" id="…" role="region" data-lenis-prevent>
       <ol class="svc-shelf__list"><li class="svc-shelf__item"><a class="card card--shelf">
         .card__media > img · div.svc-shelf__body ( p.card__meta · h3.card__title · p.svc-shelf__promise
         · p.svc-shelf__para · span.svc-shelf__go + .arrow ) </a></li> × 6</ol>
     </div>
     <div class="wrap"><div class="svc-shelf__bar"></div></div>
   </section>
   A native scroll row that starts on the gutter and runs off the right
   edge. JS writes --svc-shelf-p (scroll share) and --svc-shelf-v
   (visible share) for the progress line; without JS it is a swipe row.
   ============================================================ */
.svc-shelf {
  --svc-shelf-card: clamp(300px, 27vw, 430px);   /* card width */
  --svc-shelf-p: 0;
  --svc-shelf-v: .6;
}
.svc-shelf__head {
  display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--sp-5) var(--sp-8); align-items: end; margin-bottom: var(--sp-8);
}
.svc-shelf__side { display: grid; gap: var(--sp-5); }
.svc-shelf__side .lead { text-wrap: pretty; }
.svc-shelf__ctl { display: flex; align-items: center; gap: var(--sp-2); }
.svc-shelf__count { margin-right: auto; font-size: var(--fs-small); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.svc-shelf__count b { color: var(--fg); font-weight: 600; }
.svc-shelf__btn {
  appearance: none; margin: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center; width: var(--btn-h); height: var(--btn-h); border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--fg) 35%, transparent); background: none; color: var(--fg);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out), border-color .3s, opacity .3s, scale .12s ease;
}
.svc-shelf__btn:active { scale: .95; }
.svc-shelf__btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.svc-shelf__btn:disabled { opacity: .3; cursor: default; }
.svc-shelf__chev {
  width: 20px; height: 20px; transform: rotate(-90deg);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.svc-shelf__btn--prev .svc-shelf__chev { transform: rotate(90deg); }
@media (hover: hover) {
  .svc-shelf__btn:not(:disabled):hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
}
.svc-shelf__track {
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  scroll-snap-type: x mandatory; padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.svc-shelf__track::-webkit-scrollbar { display: none; }
/* Six shared rows (photo · index · name · promise · paragraph · action):
   item, card and body are subgrids, so a name that wraps in one card
   still leaves every promise, paragraph and action on one line. */
.svc-shelf__list {
  list-style: none; margin: 0; padding: 0; width: max-content;
  display: grid; grid-auto-flow: column; grid-auto-columns: var(--svc-shelf-card);
  grid-template-rows: repeat(6, auto); gap: 0 var(--sp-5);
}
.svc-shelf__item { display: grid; grid-row: span 6; grid-template-rows: subgrid; scroll-snap-align: start; }
.svc-shelf .card--shelf {
  display: grid; grid-row: span 6; grid-template-rows: subgrid;
  background: none; border: 0; border-radius: 0; overflow: visible;
}
.svc-shelf .card--shelf:focus-visible { outline-offset: 4px; }
.svc-shelf .card--shelf .card__media { aspect-ratio: var(--ratio-inline); border: 1px solid var(--hairline); border-radius: var(--img-radius); }
.svc-shelf__body { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
.svc-shelf .card--shelf .card__meta { margin: var(--sp-4) 0 0; font-variant-numeric: tabular-nums; }
.svc-shelf .card--shelf .card__title {
  margin: var(--sp-2) 0 0; padding: 0; font-size: calc(var(--fs-h2) * .44); line-height: 1.12;
  letter-spacing: var(--ls-head, var(--ls-display)); text-wrap: balance;
}
.svc-shelf__promise { margin-top: var(--sp-3); color: var(--fg); text-wrap: pretty; }
.svc-shelf__para { margin-top: var(--sp-3); font-size: var(--fs-small); line-height: 1.6; text-wrap: pretty; }
.svc-shelf__go { align-self: flex-start; margin-top: auto; padding-top: var(--sp-5); display: inline-flex; align-items: center; gap: var(--sp-1); font-weight: 600; color: var(--fg); }
.svc-shelf__bar { position: relative; height: 1px; margin-top: var(--sp-7); background: var(--hairline); }
.svc-shelf__bar::after {
  content: ""; position: absolute; left: 0; top: -1px; height: 3px; border-radius: 2px; background: var(--fg);
  width: calc(var(--svc-shelf-v) * 100%);
  transform: translateX(calc(var(--svc-shelf-p) * (1 / var(--svc-shelf-v) - 1) * 100%));
}
.svc-shelf:has(.svc-shelf__ctl[hidden]) .svc-shelf__bar { display: none; }
@media (max-width: 900px) {
  .svc-shelf { --svc-shelf-card: 56vw; }
  .svc-shelf__head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--sp-7); }
}
@media (max-width: 640px) {
  .svc-shelf { --svc-shelf-card: 82vw; }
  .svc-shelf__head { margin-bottom: var(--sp-6); }
  .svc-shelf__list { gap: var(--sp-4); }
  .svc-shelf__btn { display: none; }
  .svc-shelf__bar { margin-top: var(--sp-6); }
  .svc-shelf .card--shelf .card__title { font-size: calc(var(--fs-h2) * .66); }
}
@media (prefers-reduced-motion: reduce) {
  .svc-shelf__btn { transition: none; }
}