/* Variant A — services as a quiet list on the page colour; the picture follows the cursor */
@media (min-width: 1101px) {
  .svx { padding-block: var(--sec); }
  .svx__sheet { display: block; min-height: 0; padding: 0; background: none; color: #0E0F11; overflow: visible; }
  .svx__head { margin-bottom: clamp(36px, min(4vw, 57.6px), 60px); }
  .svx__head .label__code { background: none; color: #0E0F11; }
  .svx__h { color: #0E0F11; max-width: none; }
  .svx__h .mute { color: #8C929C; }
  .svx__side { display: block; padding: 0; }
  .svx__tabs { border-top: 1px solid rgba(14, 15, 17, .14); }
  .svx__tab { min-height: 0; padding-block: clamp(18px, min(2vw, 28.8px), 30px); grid-template-columns: 90px minmax(0, 1fr) 32px !important; border-bottom: 1px solid rgba(14, 15, 17, .14);
    font-size: clamp(2rem, min(4.2vw, 60.48px), 4rem); letter-spacing: -.045em; color: #0E0F11 !important; transition: color .3s, padding .5s var(--ease); }
  .svx__tab .svx__tn { color: #8C929C !important; font-size: .9rem; }
  .svx__tab .svx__ta { display: block !important; width: 28px; height: 28px; opacity: .35; transform: none; }
  .svx__tab .svx__bar { display: none; }
  .svx__tabs:hover .svx__tab { color: #B4BAC3 !important; }
  .svx__tabs .svx__tab:hover { color: #0E0F11 !important; padding-left: 14px; }
  .svx__tabs .svx__tab:hover .svx__tn { color: var(--signal) !important; }
  .svx__tabs .svx__tab:hover .svx__ta { opacity: 1; color: var(--signal); }
  .svx__det, .svx__acts { display: none !important; }
  .svx__screen { position: absolute; left: 0; top: 0; width: 360px; height: 260px; min-height: 0; margin: 0; clip-path: none; z-index: 5; pointer-events: none;
    opacity: 0; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(.9); transition: opacity .35s var(--ease), transform .12s linear; }
  .svx.is-peek .svx__screen { opacity: 1; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1); }
  .svx__sheet { position: relative; }
}
/* service icons in the list: number · icon · name · arrow */
@media (min-width: 1101px) {
  .svx__tab { grid-template-columns: 90px clamp(52px, min(5vw, 72px), 76px) minmax(0, 1fr) 32px !important; }
  .svx__tab .svx__ti { display: block !important; width: clamp(30px, min(2.8vw, 40.32px), 42px); height: clamp(30px, min(2.8vw, 40.32px), 42px); color: #0E0F11; stroke-width: 1.2; transform: none; transition: color .3s, transform .45s var(--ease); }
  .svx__tabs:hover .svx__tab .svx__ti { color: #B4BAC3; }
  .svx__tabs .svx__tab:hover .svx__ti { color: var(--signal); transform: scale(1.06); }
}
/* at rest every row looks the same; only the hovered row lights up */
@media (min-width: 1101px) {
  .svx__tabs .svx__tab.is-on .svx__ti { color: #0E0F11; transform: none; }
  .svx__tabs .svx__tab.is-on .svx__ta { opacity: .35; color: inherit; }
  .svx__tabs:hover .svx__tab.is-on:not(:hover) .svx__ti { color: #B4BAC3; }
  .svx__tabs .svx__tab:hover .svx__ti { color: var(--signal); transform: scale(1.06); }
  .svx__tabs .svx__tab:hover .svx__ta { opacity: 1; color: var(--signal); }
}

/* phones / tablets: the same list as on desktop (number · icon · name · arrow) instead of the old card carousel */
@media (max-width: 1100px) {
  .svx__cards { display: none !important; }
  .svx__side { display: block; padding: 0; }
  .svx__det, .svx__acts { display: none !important; }
  .svx__tabs { border-top: 1px solid rgba(14, 15, 17, .14); }
  .svx__tab { min-height: 0; padding-block: clamp(16px, 3.6vw, 26px); grid-template-columns: clamp(34px, 7vw, 64px) clamp(36px, 7vw, 56px) minmax(0, 1fr) 24px !important; column-gap: 0;
    border-bottom: 1px solid rgba(14, 15, 17, .14); font-size: clamp(1.45rem, 6.2vw, 2.8rem); letter-spacing: -.04em; line-height: 1.05; color: #0E0F11 !important;
    -webkit-tap-highlight-color: transparent; transition: color .3s, padding .5s var(--ease); }
  .svx__tab .svx__tn { color: #8C929C !important; font-size: .78rem; }
  .svx__tab .svx__ti { display: block; width: clamp(24px, 5.6vw, 34px); height: clamp(24px, 5.6vw, 34px); color: #0E0F11; stroke-width: 1.2; transform: none; }
  .svx__tab .svx__ta { display: block; width: 22px; height: 22px; justify-self: end; opacity: .35; transform: none; color: inherit; }
  .svx__tab .svx__bar { display: none; }
  .svx__tab.is-on .svx__tn { color: #8C929C !important; }
  .svx__tab.is-on .svx__ti { color: #0E0F11; transform: none; }
  .svx__tab.is-on .svx__ta { opacity: .35; transform: none; }
  .svx__tab:active .svx__tn { color: var(--signal) !important; }
  .svx__tab:active .svx__ti, .svx__tab:active .svx__ta { color: var(--signal); opacity: 1; }
}
@media (max-width: 1100px) and (hover: hover) {
  .svx__tabs:hover .svx__tab { color: #B4BAC3 !important; }
  .svx__tabs:hover .svx__tab .svx__ti { color: #B4BAC3; }
  .svx__tabs .svx__tab:hover { color: #0E0F11 !important; padding-left: 10px; }
  .svx__tabs .svx__tab:hover .svx__tn { color: var(--signal) !important; }
  .svx__tabs .svx__tab:hover .svx__ti, .svx__tabs .svx__tab:hover .svx__ta { color: var(--signal); opacity: 1; }
}
/* taller rows: the list fills the block instead of leaving empty space under it */
@media (min-width: 1101px) {
  .svx__tab { padding-block: clamp(30px, min(3.4vw, 48.96px), 50px); }
}

/* type matches the rest of the site: headings 500 with tight tracking, numbers in Archivo like the steps and labels */
.svx__tab .svx__tt { font-family: var(--f); font-weight: 500; letter-spacing: -.05em; line-height: .95; }
.svx__tab .svx__tn { font-family: var(--fd) !important; font-stretch: 125%; font-weight: 600; font-size: .85rem !important; letter-spacing: 0; color: var(--signal) !important; }
.svx__tab .svx__tn::after { content: "."; }

/* even rhythm: number, icon and name sit at the same gaps, the icon is sized to the cap height of the name */
@media (min-width: 1101px) {
  .svx__tab { grid-template-columns: 44px clamp(40px, min(3.6vw, 51.84px), 54px) minmax(0, 1fr) 32px !important; column-gap: clamp(16px, min(1.6vw, 23.04px), 24px) !important; align-items: center;
    padding-block: clamp(26px, min(2.8vw, 40.32px), 42px); }
  .svx__tab .svx__tn { font-size: .85rem !important; }
  .svx__tab .svx__ti { width: .78em !important; height: .78em !important; justify-self: center; }
  .svx__tabs .svx__tab:hover { padding-left: 0; }
  .svx__tabs .svx__tab:hover .svx__tt { transform: translateX(10px); }
  .svx__tab .svx__tt { transition: transform .5s var(--ease); }
}
@media (max-width: 1100px) {
  .svx__tab { grid-template-columns: 30px 1em minmax(0, 1fr) 24px !important; column-gap: 12px !important; }
  .svx__tab .svx__ti { width: .8em !important; height: .8em !important; }
}

/* the head reads like every other block: no label line, the same h2 size, same top offset */
.svx__head > .label { display: none !important; }
.svx__head { margin-top: 0 !important; padding-top: 0 !important; }
.svx .svx__h { font-size: clamp(2.2rem, min(4.6vw, 66.24px), 5rem) !important; line-height: .98; letter-spacing: -.045em; font-weight: 500; }
/* calmer list: names at subhead size, not display size */
@media (min-width: 1101px) {
  .svx__tab { font-size: clamp(1.6rem, min(2.5vw, 36px), 2.4rem) !important; padding-block: clamp(20px, min(2vw, 28.8px), 30px) !important; grid-template-columns: 44px 36px minmax(0, 1fr) 28px !important; }
  .svx__tab .svx__ti { width: 26px !important; height: 26px !important; }
  .svx__tab .svx__ta { width: 22px !important; height: 22px !important; }
}
@media (max-width: 1100px) { .svx__tab { font-size: clamp(1.3rem, 5.4vw, 2rem) !important; } }
/* mobile: taller rows, no empty tail */
@media (max-width: 700px) {
  .svx .svx__tab { padding-block: clamp(28px, 4.2svh, 40px) !important; }
}
/* hover a service: its tags slide in from the right, one after another */
.svx__tab { position: relative; }
.svx__tg { display: none; }
@media (min-width: 1101px) and (hover: hover) {
  .svx__tg { position: absolute; right: 64px; top: 50%; display: flex; gap: 6px; transform: translateY(-50%); pointer-events: none; }
  .svx__tg i { padding: 8px 12px; border: 1px solid rgba(14, 15, 17, .16); background: #E3E7ED; font-style: normal; font-family: var(--f); font-size: .86rem; font-weight: 500; letter-spacing: 0; line-height: 1; color: #0E0F11; white-space: nowrap;
    opacity: 0; transform: translateX(28px); transition: opacity .3s, transform .5s var(--ease); transition-delay: calc((3 - var(--i)) * 30ms); }
  .svx__tab:hover .svx__tg i, .svx__tab:focus-visible .svx__tg i { opacity: 1; transform: none; transition-delay: calc(var(--i) * 60ms); }
  .svx__tab:hover .svx__tg i:first-child { border-color: var(--signal); color: var(--signal); }
}
/* no floating picture over the list: the tags carry the hover */
.svx .svx__screen, .svx.is-peek .svx__screen { display: none !important; }

/* dot icons in the list (js/svxic.js): the same dot matter as the hero hands and the process figures, larger than the old line icons.
   Row padding gives back what the taller icon adds, so the block keeps its height. */
.svx__ti--dot .a { fill: var(--signal); }
.svx__tabs:hover .svx__tab:not(:hover) .svx__ti--dot .a { fill: currentColor; }
@media (min-width: 1101px) {
  .svx__tab { grid-template-columns: 44px 58px minmax(0, 1fr) 28px !important; padding-block: calc(clamp(20px, min(2vw, 28.8px), 30px) - 5px) !important; }
  .svx__tab .svx__ti--dot { width: 45px !important; height: 45px !important; justify-self: start; }
}
@media (max-width: 1100px) {
  .svx__tab { grid-template-columns: 30px 38px minmax(0, 1fr) 24px !important; }
  .svx__tab .svx__ti--dot { width: 30px !important; height: 30px !important; justify-self: start; }
}
@media (max-width: 700px) { .svx .svx__tab { padding-block: calc(clamp(28px, 4.2svh, 40px) - 4px) !important; } }