.services-section {
    position: relative;
    padding: 70px 0 46px;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 18%, rgba(114, 230, 208, .075), transparent 28rem),
        radial-gradient(circle at 92% 80%, rgba(123, 92, 255, .07), transparent 30rem),
        #fafbfb;
}
.services-container { position: relative; z-index: 1; width: min(1350px, calc(100% - 80px)); margin: 0 auto; }
.services-header { display: grid; grid-template-columns: minmax(0, .85fr) minmax(340px, .65fr); column-gap: clamp(60px, 10vw, 150px); align-items: end; margin-bottom: 48px; }
.services-eyebrow { grid-column: 1 / -1; margin-bottom: 13px; color: #755cff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
.services-header h2 { align-self: start; color: #121722; font-family: "Manrope", sans-serif; font-size: clamp(2rem, 3vw, 3rem); font-weight: 500; line-height: 1.15; letter-spacing: -.045em; }
.services-intro { color: #5a606d; font-size: 1rem; line-height: 1.75; }

/* Open compositions: text always comes first in the reading order. */
.services-editorial {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(36px, 5vw, 72px);
    row-gap: 12px;
    width: 100%;
}
.service-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    gap: 10px;
    min-width: 0;
    padding: 26px 0 18px;
    border-top: 1px solid rgba(65, 78, 87, .14);
    text-align: left;
}
.service-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, .32fr); column-gap: 16px; min-width: 0; max-width: 100%; }
.service-copy > .service-meta { grid-column: 1; grid-row: 1; align-self: center; }
.service-copy > p { grid-column: 1 / -1; }
.service-copy > h4 { grid-column: 1 / -1; grid-row: 2; }
.service-copy :is(h3, h4, p) { text-align: left; }
.service-meta { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; }
.service-index { color: #a7bdb7; font-family: "Manrope", sans-serif; font-size: clamp(2.38rem, 3.4vw, 3.4rem); font-weight: 400; line-height: 1; letter-spacing: -.06em; }
.service-row:nth-child(even) .service-index { color: #b5a7d7; }
.service-copy h3 { color: #7054ce; font-size: .72rem; font-weight: 700; line-height: 1.5; letter-spacing: .12em; text-transform: uppercase; }
.service-copy h4 { max-width: 100%; margin-bottom: 24px; color: #121722; font-family: "Manrope", sans-serif; font-size: clamp(1.62rem, 2.52vw, 2.385rem); font-weight: 500; line-height: 1.2; letter-spacing: -.045em; text-wrap: balance; }
.service-copy > p { max-width: 100%; color: #5a606d; font-size: .98rem; line-height: 1.85; }
.service-copy > p + p { margin-top: 12px; }
.service-copy > p > small { font-weight: 700; }
.service-art { grid-column: 2; grid-row: 1; align-self: center; width: 100%; max-width: 200px; justify-self: end; margin-bottom: 20px; }
.service-art svg { display: block; width: 100%; height: auto; overflow: visible; stroke-linecap: round; stroke-linejoin: round; }
.service-art .art-guide { stroke: #789b92; stroke-width: .65; opacity: .24; }
.service-art .art-muted { stroke: #9693ae; stroke-width: 1; opacity: .5; }
.service-art .art-plane { fill: #fafbfb; fill-opacity: .8; stroke: #91c9bc; stroke-width: 1; }
.service-art .art-line { stroke: #323947; stroke-width: 1.4; }
.service-art .art-accent { stroke: #8063cf; stroke-width: 2; }
.service-art .art-mint { fill: #72e6d0; fill-opacity: .16; }
.service-art .art-ring { stroke: #72bfae; stroke-width: 1; }
.service-art .art-node { fill: #fafbfb; stroke: #8063cf; stroke-width: 1.8; }
@media (prefers-reduced-motion: no-preference) {
    .service-row { --service-enter-x: -64px; }
    .service-row:nth-child(even) { --service-enter-x: 64px; }
    .service-row.service-reveal-ready:not(.service-entered) .service-copy > * { opacity: 0; }
    /* Animate siblings so the illustration does not inherit a second translation. */
    .service-row.service-entered .service-copy > * { animation: service-editorial-enter .9s cubic-bezier(.25, .1, .25, 1) both; }
    .service-row.service-entered .service-copy > .service-art { animation-delay: .08s; }
    @keyframes service-editorial-enter {
        from { opacity: 0; transform: translateX(var(--service-enter-x)); }
        to { opacity: 1; transform: translateX(0); }
    }

    /* One brief assembly sequence per illustration; no continuous scroll work. */
    .service-entered .service-art-01 .art-mint { animation: service-layer-settle .8s ease-out .25s backwards; }
    .service-entered .service-art-01 .art-ring { animation: service-layer-settle .8s ease-out .36s backwards; }
    .service-entered .service-art-01 .art-accent { animation: service-layer-settle .8s ease-out .48s backwards; }
    .service-entered .service-art-02 .art-line { animation: service-build .7s ease-out .25s backwards; }
    .service-entered .service-art-02 .art-accent { animation: service-activate .65s ease-out .48s backwards; }
    .service-entered .service-art-02 .art-node { animation: service-activate .6s ease-out .65s backwards; }

    /* Existing node, information lines, lens and chart activate in sequence. */
    .service-entered .service-art-03 .art-node { animation: service-activate .55s ease-out .2s backwards; }
    .service-entered .service-art-03 .art-line { animation: service-connect .7s ease-out .4s backwards; }
    .service-entered .service-art-03 circle.art-accent { animation: service-activate .7s ease-out .65s backwards; }
    .service-entered .service-art-03 path.art-accent { animation: service-connect .7s ease-out .8s backwards; }
    .service-entered .service-art-03 .art-line:nth-last-child(3) { animation-delay: .95s; }
    .service-entered .service-art-03 .art-line:nth-last-child(2) { animation-delay: 1.05s; }

    .service-entered .service-art-04 .art-accent,
    .service-entered .service-art-04 .art-node { animation: service-growth .8s ease-out .3s backwards; }
    .service-entered .service-art-04 .art-node:nth-last-child(3) { animation-delay: .45s; }
    .service-entered .service-art-04 .art-node:nth-last-child(2) { animation-delay: .6s; }
    .service-entered .service-art-04 .art-ring { animation: service-growth .8s ease-out .75s backwards; }

    @keyframes service-layer-settle { from { opacity: .35; transform: translate(4px, 5px); } to { opacity: 1; transform: translate(0, 0); } }
    @keyframes service-build { from { opacity: .3; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes service-activate { from { opacity: .15; } to { opacity: 1; } }
    @keyframes service-connect { from { opacity: .2; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes service-growth { from { opacity: .25; transform: translate(-2px, 5px); } to { opacity: 1; transform: translate(0, 0); } }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .service-art :is(.art-accent, .art-mint, .art-ring, .art-node) { transition: translate .45s cubic-bezier(.22, 1, .36, 1); }
    .service-row:hover .service-art-01 .art-mint { translate: 3px -2px; }
    .service-row:hover .service-art-01 .art-accent { translate: -2px -2px; }
    .service-row:hover .service-art-02 .art-accent { translate: 0 -3px; }
    .service-row:hover .service-art-02 .art-node { translate: 0 -1px; }
    .service-row:hover .service-art-03 .art-accent { translate: 2px -2px; }
    .service-row:hover .service-art-03 .art-node { translate: 2px 0; }
    .service-art-03 .art-line { transition: translate .5s ease; }
    .service-row:hover .service-art-03 .art-line { translate: 2px 0; }
    .service-row:hover .service-art-03 .art-line:nth-last-child(3) { translate: 2px -2px; transition-delay: .08s; }
    .service-row:hover .service-art-03 .art-line:nth-last-child(2) { translate: 2px -2px; transition-delay: .16s; }
    .service-row:hover .service-art-04 .art-node,
    .service-row:hover .service-art-04 .art-ring { translate: 2px -3px; }
}
@media (min-width: 901px) {
    /* Offset the right column without changing the left column's grid tracks. */
    .services-editorial { padding-bottom: 85px; }
    .service-row:nth-child(even) { margin-top: 32px; position: relative; top: 85px; }
}
@media (max-width: 900px) {
    .services-section { padding: 54px 0 30px; }
    .services-container { width: calc(100% - 44px); }
    .services-header { grid-template-columns: 1fr; gap: 22px; margin-bottom: 36px; }
    .services-editorial { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .service-row { grid-template-columns: minmax(0, 1fr); padding: 23px 0; }
    .service-meta { gap: 18px; margin-bottom: 18px; }
}
@media (max-width: 680px) {
    .services-section { padding: 44px 0 18px; }
    .services-section .services-container { width: calc(100% - 40px); }
    .services-header { margin-bottom: 28px; }
    .service-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 21px 0; }
    .service-copy { max-width: 100%; }
    .service-meta { gap: 20px; }
    .service-copy h4 { font-size: clamp(1.62rem, 6.3vw, 2.025rem); margin-bottom: 18px; }
    .service-copy > p { font-size: .94rem; line-height: 1.8; }
    .service-art { max-width: 160px; }
}
@media (prefers-reduced-motion: reduce) {
    .service-row .service-copy, .service-row .service-copy > * { animation: none; transform: none; opacity: 1; }
}