/* ============================================================
   VTI Service Pillar — module base.
   Builds on vti-home's stylesheet (loaded as a dependency): every section root
   carries `vti-home` for its tokens (--vh-*), theme resets and shared atoms
   (__wrap, __head, __title, __eyebrow, __lead, __btn, __linkbtn).
   Only what vti-home lacks lives here.
   ============================================================ */

.vsp {
    padding-block: var(--vh-pad);
}

/* Section titles use the Figma H2 style (text/primary) on every viewport;
   vti-home darkens them to #18181b on mobile. */
.vti-home .vti-home__title {
    color: var(--vh-ink);
}

/* Industries (Figma mobile): the head is centred, the tab heading is 20px. */
@media (max-width: 699px) {
    .vti-home-industries .vti-home__head--left,
    .vti-home-industries .vti-home__head--left > :is(.vti-home__head-title, .vti-home__head-aside) {
        align-items: center;
        text-align: center;
    }

    .vti-home-industries .vti-home__head--left .vti-home__eyebrow {
        align-self: center;
    }

    .vti-home-industries .vti-home-industries__heading {
        font-size: 20px;
        line-height: 28px;
    }
}

/* ---------- reused vti-home sections (via their `class` option) ---------- */

/* Strategic partnerships: sits right under the industry section, no top gap
   and no glow blob (preview `.section--pt0`). */
.vti-home-customers.vsp-partners {
    padding-top: 0;
}

.vsp-partners .vti-home-customers__glow {
    display: none;
}

/* Case studies: on the homepage the section above supplies the gap; here the
   tech stack's tinted background ends first, so the preview adds a top pad. */
.vti-home-cases.vsp-cases {
    padding-top: var(--vh-pad);
}

/* Testimonials continue the about section above: one background, 64px gap.
   The preview is one section, so the about glow runs on behind the cards:
   both sections draw the same SVG anchored to the seam between them. */
.vsp-about,
.vsp-testimonials {
    --vsp-about-glow-x: -198px;
    --vsp-about-glow-y: -713px; /* glow top, measured from the seam */
    /* How far the about gradient has got at its bottom-left corner, so the
       testimonials gradient starts from that colour instead of restarting. */
    --vsp-about-bg-end: 36%;
}

/* ponytail: measured at the usual section heights per breakpoint; a much
   taller about head only shifts the seam colour slightly. */
@media (max-width: 1099px) {
    .vsp-testimonials { --vsp-about-bg-end: 55%; }
}

@media (max-width: 699px) {
    .vsp-testimonials { --vsp-about-bg-end: 78%; }
}

.vti-home-clients.vsp-testimonials {
    padding-top: 0;
    padding-bottom: var(--vh-pad);
    background:
        url("../images/about-effect.svg") var(--vsp-about-glow-x) var(--vsp-about-glow-y) / 2337px 1735px no-repeat,
        linear-gradient(128.86deg, color-mix(in srgb, #f1f7ff var(--vsp-about-bg-end), #fcfdff) 0%, #f1f7ff 67.791%);
}

.vsp-testimonials .vti-home-clients__ellipse {
    display: none;
}
/* Section: hero */
.vsp-hero {
    position: relative;
    height: 700px;
    overflow: hidden;
    /* Flatsome's header overlays the page, so the copy starts below it.
       Bottom padding is 0 to override the shared .vsp block padding. */
    padding: 200px 0 0;
}

.vsp-hero__bg {
    position: absolute;
    left: 80px;
    top: -46px;
    width: 1840px;
    height: 836px;
    /* Theme resets cap images at 100% width; the preview art is wider than the viewport. */
    max-width: none;
    object-fit: cover;
}

/* Fades the artwork into the page colour behind the copy; a pseudo-element
   because it carries no content. */
.vsp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, #f3f8fe 0%, #f3f8fe 19.121%, rgba(243, 248, 254, .4) 29.284%, rgba(243, 248, 254, 0) 57.214%);
}

.vsp-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
}

.vsp-hero__text {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vsp-hero__title {
    margin: 0;
    font-size: 60px;
    line-height: 80px;
    font-weight: 500;
    color: var(--vh-ink);
}

.vsp-hero__lead {
    margin: 0;
}

/* Picked button colour comes from the inline `--vsp-hero-btn-bg` on the section;
   hover darkens it the same way as the homepage hero button. */
.vsp-hero__btn.vti-home__btn--primary {
    --vsp-hero-btn-bg-hover: color-mix(in srgb, var(--vsp-hero-btn-bg) 85%, #000);
    background: var(--vsp-hero-btn-bg, var(--vh-blue));
}

.vsp-hero__btn.vti-home__btn--primary:hover,
.vsp-hero__btn.vti-home__btn--primary:focus-visible {
    background: var(--vsp-hero-btn-bg-hover, var(--vh-blue-hover));
}

/* tablet: same 700px stage and copy offset as desktop; the art just covers it. */
@media (max-width: 1099px) {
    .vsp-hero {
        height: auto;
        min-height: 700px;
        padding: 200px 0 80px;
    }

    .vsp-hero__bg {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .vsp-hero__title {
        font-size: 44px;
        line-height: 56px;
    }

    /* Forced breaks make ragged lines once the text wraps naturally. */
    .vsp-hero__title br,
    .vsp-hero__lead br {
        display: none;
    }
}

/* mobile (Figma 2152:12163): 528px hero, the mobile crop centred at its design width. */
@media (max-width: 699px) {
    .vsp-hero {
        min-height: 528px;
        padding: 120px 0 60px;
    }

    .vsp-hero__bg {
        left: 50%;
        width: 1162px;
        height: 528px;
        transform: translateX(-50%);
    }

    .vsp-hero__title {
        font-size: 30px;
        line-height: 36px;
        letter-spacing: -.25px;
    }

    .vsp-hero__lead {
        color: rgba(0, 0, 0, .7);
    }
}
/* Section: services */
.vsp-services__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.vsp-services__body {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.vsp-services__nav {
    position: sticky;
    top: var(--vsp-header-h, 0px);
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    padding-top: 40px;
}

.vsp-services__nav-link {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #667085;
    white-space: nowrap;
    text-decoration: none;
    transition: color .2s ease-out;
}

.vsp-services__nav-link[aria-current="true"] {
    font-weight: 600;
    color: var(--vh-blue);
}

@media (hover: hover) {
    .vsp-services__nav-link:hover {
        color: var(--vh-blue);
    }
}

.vsp-services__nav-link:focus-visible {
    outline: 2px solid var(--vh-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

.vsp-services__groups {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.vsp-services__group {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 40px;
    border-radius: 12px;
    background: linear-gradient(129.8deg, #fcfdff 0%, #f1f7ff 67.791%);
    scroll-margin-top: calc(var(--vsp-header-h, 0px) + 24px);
}

.vsp-services__group:first-child {
    padding-block: 56px;
    background: linear-gradient(128.69deg, #fcfdff 0%, #f1f7ff 67.791%);
}

.vsp-services__group-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vsp-services__group-title {
    margin: 0;
    font-size: 30px;
    line-height: 36px;
    font-weight: 500;
    letter-spacing: -.25px;
    color: var(--vh-ink);
}

.vsp-services__group-desc {
    margin: 0;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0;
    color: var(--vh-muted);
}

/* The grid paints the translucent card background so an empty trailing cell
   (odd card count) still looks like the preview's blank card. */
.vsp-services__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, .75);
}

.vsp-services__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    min-height: 296px;
    padding: 24px 40px 40px;
    background: transparent;
}

.vsp-services__card:nth-child(even) {
    border-left: 1px solid #d8e9ff;
}

.vsp-services__card:nth-child(n+3) {
    border-top: 1px solid #d8e9ff;
}

/* Odd count: the empty cell has no element, so its dividers are drawn from
   the last card (the grid's overflow clips the overhang). */
.vsp-services__card:last-child:nth-child(odd) {
    border-right: 1px solid #d8e9ff;
}

.vsp-services__card:last-child:nth-child(odd):nth-child(n+3)::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 100%;
    width: 100%;
    border-top: 1px solid #d8e9ff;
}

.vsp-services__media {
    display: block;
    width: 120px;
    height: 120px;
    margin-bottom: 12px;
}

.vsp-services__img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
}

/* A card with a link is an <a>: keep the card look, the title turns link blue. */
.vsp-services__card[href] {
    color: inherit;
    text-decoration: none;
}

.vsp-services__card[href]:focus-visible {
    outline: 2px solid var(--vh-blue);
    outline-offset: -2px;
}

.vsp-services__card[href]:hover .vsp-services__card-title,
.vsp-services__card[href]:focus-visible .vsp-services__card-title {
    color: var(--vh-blue);
}

.vsp-services__card-title {
    margin: 0;
    transition: color .2s;
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--vh-ink);
}

.vsp-services__card-desc {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: var(--vh-muted);
}

@media (min-width: 700px) and (max-width: 1099px) {
    .vsp-services__body {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .vsp-services__nav {
        z-index: 5;
        flex: none;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        padding: 12px 0;
        overflow-x: auto;
        scrollbar-width: none;
        background: #fff;
    }

    .vsp-services__nav::-webkit-scrollbar {
        display: none;
    }

    .vsp-services__nav-link {
        flex-shrink: 0;
    }

    .vsp-services__group {
        scroll-margin-top: calc(var(--vsp-header-h, 0px) + 60px);
    }
}

@media (max-width: 699px) {
    .vsp-services__inner {
        gap: 40px;
    }

    .vsp-services .vti-home__lead {
        margin-top: 4px;
    }

    /* Figma mobile has no menu: each group is introduced by its menu label instead. */
    .vsp-services__nav {
        display: none;
    }

    .vsp-services__groups {
        gap: 40px;
    }

    /* Top margin = the label (24px) + its 20px gap to the box. */
    .vsp-services__group,
    .vsp-services__group:first-child {
        position: relative;
        gap: 20px;
        margin-top: 44px;
        padding: 20px;
        background: linear-gradient(153deg, #fcfdff 0%, #f1f7ff 100%);
    }

    .vsp-services__group::before {
        content: attr(data-nav-label);
        /* The group heading already names the group for screen readers. */
        content: attr(data-nav-label) / "";
        position: absolute;
        bottom: 100%;
        left: 4px;
        margin-bottom: 20px;
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;
        color: var(--vh-blue);
    }

    .vsp-services__group-title {
        font-size: 18px;
        line-height: 28px;
        font-weight: 600;
        letter-spacing: 0;
    }

    .vsp-services__group-desc {
        font-size: 14px;
        line-height: 20px;
    }

    .vsp-services__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .vsp-services__card,
    .vsp-services__card:nth-child(even),
    .vsp-services__card:last-child:nth-child(odd) {
        min-height: 0;
        padding: 24px 20px 20px;
        border-left: 0;
        border-right: 0;
    }

    .vsp-services__card:nth-child(n+2) {
        border-top: 1px solid #d8e9ff;
    }

    .vsp-services__card:last-child:nth-child(odd):nth-child(n+3)::after {
        content: none;
    }

    .vsp-services__card-title {
        font-size: 18px;
        line-height: 28px;
    }

    .vsp-services__card-desc {
        font-size: 14px;
        line-height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vsp-services__nav-link,
    .vsp-services__card-title {
        transition: none;
    }
}
/* Section: tech */
/* Doubled class beats the shared section padding/background regardless of file
   order: neighbouring sections supply the vertical gap. */
.vti-home.vsp-tech {
    padding-block: 0;
    background: none;
}

.vsp-tech .vsp-tech__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* Groups are display:contents so each tab and row becomes a direct grid item
   of __body; auto-placement then pairs tab i with row i. */
.vsp-tech .vsp-tech__group {
    display: contents;
}

/* The two outlined boxes are pseudo-elements spanning the grid. They are
   absolutely positioned: an abspos grid child still uses its grid area as the
   containing block but takes no cell, so auto-placement of the tabs/rows is not
   pushed below them. Negative insets reach into the 9px padding so the tabs sit
   8px inside the border. */
.vsp-tech .vsp-tech__body {
    position: relative;
    display: grid;
    grid-template-columns: 253px minmax(0, 1fr);
    grid-template-rows: repeat(var(--vsp-tech-n, 6), auto);
    column-gap: 42px;
    row-gap: 16px;
    padding: 9px;
}

.vsp-tech .vsp-tech__body::before,
.vsp-tech .vsp-tech__body::after {
    content: "";
    position: absolute;
    grid-row: 1 / -1;
    inset: -9px;
    border: 1px solid #f2f4f7;
    border-radius: 8px;
    pointer-events: none;
}

.vsp-tech .vsp-tech__body::before {
    grid-column: 1;
    border-right: 0;
}

.vsp-tech .vsp-tech__body::after {
    grid-column: 2;
}

/* Tab is a <button>: undo Flatsome's button styling. */
.vsp-tech .vsp-tech__tab {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
    min-height: 0;
    margin: 0;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: #f9fafb;
    box-shadow: none;
    font: inherit;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: normal;
    text-transform: none;
    color: #475467;
    white-space: nowrap;
    /* Selected on hover, so no click affordance. */
    cursor: default;
    transition: background-color .2s linear, color .2s linear;
}

.vsp-tech .vsp-tech__tab-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.vsp-tech .vsp-tech__group.is-current > .vsp-tech__tab {
    background: #e1ebff;
    color: var(--vh-blue);
}

.vsp-tech .vsp-tech__group.is-current .vsp-tech__tab-label::after {
    content: "";
    width: 35px;
    height: 4px;
    border-radius: 20px;
    background: var(--vh-blue);
}

.vsp-tech .vsp-tech__tab:focus-visible {
    outline: 2px solid var(--vh-blue);
    outline-offset: 2px;
}

.vsp-tech .vsp-tech__row {
    grid-column: 2;
    display: flex;
    align-items: center;
    min-width: 0;
    height: 78px;
    padding: 0 24px;
    border-radius: 12px;
    background: #f9fafb;
    overflow: hidden;
}

.vsp-tech .vsp-tech__group.is-current > .vsp-tech__row {
    background: #e1ebff;
}

.vsp-tech .vsp-tech__track {
    display: flex;
    gap: 24px;
}

.vsp-tech .vsp-tech__card {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 60px;
    border-radius: 8px;
    background: #fff;
}

.vsp-tech .vsp-tech__logo {
    display: block;
    max-width: 140px;
    max-height: 56px;
    object-fit: contain;
}

/* Uploaded logos fill the max box and object-fit keeps their ratio: WordPress
   prints width="1" height="1" for an SVG (no stored size), and its
   sizes="auto" on lazy images makes the browser ignore the file's own size.
   80×42 is the demo ERP logos' box, so a tightly cropped upload shows at the
   same size as the demo logo it replaces. */
.vsp-tech .vsp-tech__logo--upload {
    width: 80px;
    height: 42px;
}

/* The track holds two identical sets; shifting by one set (card 160 + gap 24
   = 184px per logo) restarts the loop invisibly. */
.vsp-tech .vsp-tech__row--marquee .vsp-tech__track {
    animation: vsp-tech-marquee calc(var(--vsp-tech-logos) * var(--vsp-tech-speed, 2s)) linear infinite;
}

@keyframes vsp-tech-marquee {
    to { transform: translateX(calc(var(--vsp-tech-logos) * -184px)); }
}

@media (hover: hover) {
    /* Marquee waits for hover on its tab or row (the group holds both); touch
       screens (no hover) keep it running so the logos past the row's edge can
       still be seen. */
    .vsp-tech .vsp-tech__row--marquee .vsp-tech__track {
        animation-play-state: paused;
    }

    .vsp-tech .vsp-tech__group:hover > .vsp-tech__row--marquee .vsp-tech__track {
        animation-play-state: running;
    }
}

/* Tablet: tabs become one strip on top, rows stack below. */
@media (min-width: 700px) and (max-width: 1099px) {
    .vsp-tech .vsp-tech__body {
        grid-template-columns: repeat(var(--vsp-tech-n, 6), minmax(0, max-content)) 1fr;
        grid-template-rows: auto repeat(var(--vsp-tech-n, 6), auto);
        column-gap: 8px;
    }

    .vsp-tech .vsp-tech__body::before {
        grid-column: 1 / -1;
        grid-row: 1;
        inset: -9px -9px 17px;
        border-right: 1px solid #f2f4f7;
    }

    .vsp-tech .vsp-tech__body::after {
        grid-column: 1 / -1;
        grid-row: 2 / -1;
    }

    .vsp-tech .vsp-tech__tab {
        grid-column: auto;
        grid-row: 1;
        height: 56px;
        margin-bottom: 26px;
        padding: 10px 16px;
        font-size: 16px;
        line-height: 24px;
    }

    .vsp-tech .vsp-tech__tab-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vsp-tech .vsp-tech__row {
        grid-column: 1 / -1;
    }
}

/* Mobile: 3x2 tab grid, only the current row shown as a 2-column logo grid. */
@media (max-width: 699px) {
    .vsp-tech .vsp-tech__inner {
        gap: 40px;
    }

    .vsp-tech .vsp-tech__body {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(var(--vsp-tech-tab-rows, 2), auto) auto;
        gap: 8px;
        padding: 5px;
    }

    .vsp-tech .vsp-tech__body::before {
        grid-column: 1 / -1;
        grid-row: 1 / span var(--vsp-tech-tab-rows, 2);
        inset: -5px;
        border-right: 1px solid #f2f4f7;
    }

    .vsp-tech .vsp-tech__body::after {
        grid-column: 1 / -1;
        grid-row: -2 / -1;
        inset: 21px -5px -5px;
    }

    .vsp-tech .vsp-tech__tab {
        grid-column: auto;
        order: 1;
        height: 46px;
        margin-bottom: 0;
        font-size: 16px;
        line-height: 24px;
    }

    /* Ellipsis needs a block label; the current tab keeps the flex column
       so the underline sits below the text. */
    .vsp-tech .vsp-tech__tab-label {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .vsp-tech .vsp-tech__group.is-current .vsp-tech__tab-label {
        display: flex;
    }

    .vsp-tech .vsp-tech__group.is-current .vsp-tech__tab-label::after {
        height: 2px;
        flex-shrink: 0;
    }

    .vsp-tech .vsp-tech__row {
        grid-column: 1 / -1;
        order: 2;
        display: none;
    }

    .vsp-tech .vsp-tech__group.is-current > .vsp-tech__row {
        display: block;
        height: auto;
        margin-top: 30px;
        padding: 16px 24px;
        border-radius: 8px;
    }

    .vsp-tech .vsp-tech__track {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 17px 12px;
        /* 3 rows (6 logos) at most: card 60px at zoom .75 + 2 row gaps; more scroll. */
        max-height: calc(3 * 60px * .75 + 2 * 17px);
        overflow-y: auto;
        animation: none;
    }

    .vsp-tech .vsp-tech__row--marquee .vsp-tech__track {
        animation: none;
    }

    /* Cards stretch to fill the two columns on wider phones. */
    .vsp-tech .vsp-tech__card {
        width: auto;
        zoom: .75;
    }

    /* The grid shows every real logo; the marquee copy is never shown. */
    .vsp-tech .vsp-tech__card--dup {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vsp-tech .vsp-tech__row--marquee .vsp-tech__track {
        animation: none;
    }

    .vsp-tech .vsp-tech__tab {
        transition: none;
    }
}
/* Section: about */
.vsp-about {
  position: relative;
  overflow: hidden;
  background: linear-gradient(128.86deg, #fcfdff 0%, #f1f7ff 67.791%);
  padding-bottom: 64px; /* testimonials follow on the same background */
}
.vsp-about .vsp-about__effect {
  position: absolute;
  left: var(--vsp-about-glow-x);
  /* Anchored to the bottom so it lines up with the testimonials copy below. */
  bottom: calc(-1735px - var(--vsp-about-glow-y));
  width: 2337px;
  max-width: none;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
.vsp-about .vsp-about__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.vsp-about .vsp-about__stats {
  --vh-marquee-bg: #f1f7ff;
}
/* Design fades only the right edge, wider than the shared atom's 81px. */
.vsp-about .vsp-about__stats::before { display: none; }
.vsp-about .vsp-about__stats::after { width: 281px; }
.vsp-about .vsp-about__set { display: flex; }
/* Spacing as padding, not gap: both sets must be equally wide for the
   -50% loop to land exactly on the copy. */
.vsp-about .vsp-about__stat {
  flex: none;
  width: 280px;
  padding-right: 64px;
  box-sizing: content-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.vsp-about .vsp-about__num {
  display: flex;
  gap: 8px;
  margin: 0;
  font-weight: 500;
  font-size: 60px;
  line-height: 80px;
  white-space: nowrap;
  color: var(--vh-ink);
}
.vsp-about .vsp-about__suffix { font-style: normal; }
.vsp-about .vsp-about__label {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--vh-muted);
}

@media (hover: hover) {
  .vsp-about .vsp-about__stats:hover .vti-home__marquee-track { animation-play-state: paused; }
}

/* Mobile (Figma 2152:12163): static 2-column grid, no marquee. */
@media (max-width: 699px) {
  .vsp-about { padding-block: 40px; }
  .vsp-about .vsp-about__inner { gap: 40px; }
  .vsp-about .vsp-about__stats::after,
  .vsp-about .vsp-about__set[aria-hidden] { display: none; }
  .vsp-about .vti-home__marquee-track { display: block; width: auto; animation: none; }
  .vsp-about .vsp-about__set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .vsp-about .vsp-about__stat { width: auto; padding-right: 0; gap: 0; }
  .vsp-about .vsp-about__num { gap: 0; font-size: 28px; line-height: 28px; color: #0f172a; }
  .vsp-about .vsp-about__label { padding-top: 6px; font-size: 12px; line-height: 16px; color: rgba(34, 34, 34, .7); }
  .vsp-about .vsp-about__label br { display: none; }
}
/* Section: ways */
.vsp-ways__inner {
    display: flex;
    flex-direction: column;
    gap: 64px;
}

/* Preview `.sec-head--center-y`: title and button share the vertical centre.
   Below 1100px vti-home stacks the head, so this only applies to the row layout. */
@media (min-width: 1100px) {
    .vsp-ways__inner > .vti-home__head {
        align-items: center;
    }
}

/* Pinned layout: the frame is a scroll runway (708px + one slice per extra
   step) and the body sticks inside it, so the page holds still while
   scrolling walks through the steps (JS maps the scroll to the active step). */
.vsp-ways .vsp-ways__frame {
    --vsp-ways-slice: 60vh;
    height: calc(708px + (var(--vsp-ways-n, 4) - 1) * var(--vsp-ways-slice));
}

/* Two columns: image (fills the rest) | steps (586) with a 146 gap = 732px
   reserved on the right. Centred in the viewport, never under the stuck header. */
.vsp-ways .vsp-ways__body {
    position: sticky;
    top: max(calc(var(--vsp-header-h, 0px) + 24px), calc(50vh - 354px));
    display: grid;
    grid-template-columns: minmax(0, 1fr) 586px;
    column-gap: 146px;
    row-gap: 140px;
    align-content: start;
    height: 708px;
    padding: 100px 0 200px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Each way prints image + step inside a group; contents lets both become
   children of the grid while the group remains the JS state hook. */
.vsp-ways .vsp-ways__group {
    display: contents;
}

/* Stacked in the first column; only the active group's image is visible.
   Absolute so the images never take a grid cell of their own. */
.vsp-ways .vsp-ways__img {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% - 732px);
    max-width: none;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    opacity: 0;
    transition: opacity .3s ease-out;
}

.vsp-ways .vsp-ways__group.is-active > .vsp-ways__img,
.vsp-ways .vsp-ways__body:not(:has(.is-active)) > .vsp-ways__group:first-of-type > .vsp-ways__img {
    opacity: 1;
}

/* JS writes --vsp-ways-y (px) on the body: the offset that brings the active
   step to the first step's position, so the whole list slides as one. */
.vsp-ways .vsp-ways__step {
    position: relative;
    grid-column: 2;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    opacity: .5;
    transform: translateY(var(--vsp-ways-y, 0px));
    transition: opacity .3s ease-out, transform .3s ease-out;
}

/* UX Builder renders each child on its own, so neither PHP's open-first pass
   nor the JS reaches it reliably: with no active step, the first one shows. */
.vsp-ways .vsp-ways__group.is-active > .vsp-ways__step,
.vsp-ways .vsp-ways__body:not(:has(.is-active)) > .vsp-ways__group:first-of-type > .vsp-ways__step {
    opacity: 1;
}

/* Connector to the next step: 2px line from below this icon to 20px above the
   next one (step height + row gap), so it follows any text length. */
.vsp-ways .vsp-ways__step::after {
    content: "";
    position: absolute;
    left: 27px;
    top: 76px;
    width: 2px;
    height: calc(100% + 140px - 96px);
    background: #dee8ff;
    pointer-events: none;
}

.vsp-ways .vsp-ways__group:last-of-type > .vsp-ways__step::after {
    display: none;
}

.vsp-ways .vsp-ways__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--vh-soft);
    box-shadow: inset 0 0 0 1px #f2f4f7;
}

.vsp-ways .vsp-ways__icon-img {
    display: block;
    width: 20px;
    height: 20px;
}

.vsp-ways .vsp-ways__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.vsp-ways .vsp-ways__title {
    margin: 0;
    font-size: 24px;
    font-weight: 500;
    line-height: 32px;
    color: var(--vh-ink);
}

/* Reset Flatsome's global button/link styling (uppercase, margins, min-height,
   background, underline) that would otherwise leak into the step title. */
.vsp-ways .vsp-ways__step-btn {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: none;
    box-shadow: none;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    color: inherit;
}

.vsp-ways .vsp-ways__step-title {
    transition: color .2s;
}

/* Only a linked title (<a>) reacts; without a link it is a plain <span>. */
.vsp-ways a.vsp-ways__step-btn:hover .vsp-ways__step-title,
.vsp-ways a.vsp-ways__step-btn:focus-visible .vsp-ways__step-title {
    color: var(--vh-blue);
}

.vsp-ways .vsp-ways__step-btn:focus-visible {
    outline: 2px solid var(--vh-blue);
    outline-offset: 4px;
}

.vsp-ways .vsp-ways__arrow {
    flex: none;
    width: 24px;
    height: 24px;
}

.vsp-ways .vsp-ways__text {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: var(--vh-muted);
}

/* Soft fade hiding the steps cut off at the bottom of the fixed-height body. */
.vsp-ways .vsp-ways__body::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 732px;
    height: 105px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

/* Tablet + mobile: not pinned; every way shows its own image above its step,
   all visible (nothing to slide or fade), so none is dimmed. */
@media (max-width: 1099px) {
    .vsp-ways .vsp-ways__frame {
        height: auto;
    }

    .vsp-ways .vsp-ways__body {
        position: static;
        display: block;
        height: auto;
        padding: 0;
        overflow: visible;
    }

    .vsp-ways .vsp-ways__body::after {
        display: none;
    }

    .vsp-ways .vsp-ways__img {
        position: static;
        display: block;
        width: 100%;
        height: 400px;
        margin-bottom: 16px;
        opacity: 1;
    }

    .vsp-ways .vsp-ways__step {
        margin-bottom: 32px;
        transform: none;
        opacity: 1;
    }

    .vsp-ways .vsp-ways__group:last-of-type > .vsp-ways__step {
        margin-bottom: 0;
    }

    .vsp-ways .vsp-ways__step::after {
        top: 61px;
        bottom: 0;
        height: auto;
    }
}

/* Mobile (Figma 2152:12163): square images. */
@media (max-width: 699px) {
    .vsp-ways .vsp-ways__img {
        height: auto;
        aspect-ratio: 1;
        border-radius: 12px;
    }

    .vsp-ways .vsp-ways__title {
        font-size: 18px;
        line-height: 28px;
    }

    .vsp-ways .vsp-ways__step-btn {
        gap: 0;
    }

    .vsp-ways .vsp-ways__text {
        font-size: 14px;
        line-height: 20px;
    }
}

/* Keep the step change instant; the active state itself is still shown by
   opacity, which is not motion. */
@media (prefers-reduced-motion: reduce) {
    .vsp-ways .vsp-ways__img,
    .vsp-ways .vsp-ways__step,
    .vsp-ways .vsp-ways__step-title {
        transition: none;
    }
}