/* Services page composition. Shared primitives stay in components/tokens. */

/* Darker family orange meets normal-text contrast without changing shared identity. */
.vs-services-summary__card.vs-service-card--consulting a {
    color: #b35b25;
}

.vs-services-hero,
.vs-services-summary,
.vs-service-detail,
.vs-services-cta {
    color: var(--vs-color-text);
    font-family: var(--vs-font-body);
    padding-inline: clamp(1.25rem, 3vw, 2rem);
}

.vs-services-hero {
    background: var(--vs-color-background);
    padding-block-end: var(--vs-space-7);
    padding-block-start: var(--vs-space-5);
}

.vs-services-summary {
    background: var(--vs-color-surface-soft);
    padding-block-end: calc(var(--vs-space-8) + var(--vs-space-1));
    padding-block-start: clamp(2.5rem, 4vw, 3.5rem);
    scroll-margin-top: 7rem;
}

/* Remove stacked Kadence row bottom padding that inflated the post-card gap. */
.entry-content .vs-services-summary > .kt-row-column-wrap,
.vs-services-summary > .kt-row-column-wrap,
.entry-content .vs-services-summary__grid > .kt-row-column-wrap,
.vs-services-summary__grid > .kt-row-column-wrap {
    padding-block-end: 0;
}

.vs-service-detail {
    padding-block: var(--vs-space-7);
    scroll-margin-top: 7rem;
}

.vs-services-cta {
    padding-block: clamp(3rem, 4.5vw, 4.25rem);
}

.vs-services-hero > .kt-row-column-wrap,
.vs-services-summary > .kt-row-column-wrap,
.vs-service-detail > .kt-row-column-wrap,
.vs-services-cta > .kt-row-column-wrap {
    gap: var(--vs-space-6);
    margin-inline: auto;
    max-width: var(--vs-container-wide);
}

.vs-services-hero > .kt-row-column-wrap {
    align-items: center;
}

.vs-service-detail > .kt-row-column-wrap {
    align-items: stretch;
    gap: var(--vs-space-5);
}

/* ---------- Hero ---------- */

.vs-services-hero__content .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    gap: var(--vs-space-4);
}

.vs-services-hero__content .kt-inside-inner-col > * {
    margin-block: 0;
}

.vs-services-hero h1 {
    font-size: var(--vs-font-size-4xl);
    line-height: var(--vs-line-height-tight);
    max-width: 18ch;
}

.vs-services-hero__content > .kt-inside-inner-col > p:not(.vs-eyebrow) {
    color: var(--vs-color-text-muted);
    font-size: var(--vs-font-size-base);
    line-height: var(--vs-line-height-body);
    max-width: 42rem;
}

.vs-eyebrow {
    color: var(--vs-color-primary);
    font-size: var(--vs-font-size-xs);
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.vs-services-hero__visual .kt-inside-inner-col {
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    justify-content: center;
    overflow: visible;
    padding: 0;
}

.vs-services-hero__visual .wp-block-kadence-image {
    margin: 0;
    width: 100%;
}

.vs-services-hero__visual img {
    border-radius: var(--vs-radius-lg);
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.vs-service-detail__visual .wp-block-kadence-image {
    margin: 0;
    width: 100%;
}

.vs-service-detail__visual img {
    border-radius: calc(var(--vs-radius-lg) - 2px);
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

@media (min-width: 1025px) {
    .entry-content .vs-services-hero > .kt-row-column-wrap {
        gap: clamp(1rem, 1.5vw, 1.75rem);
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .vs-services-hero__visual {
        overflow: visible;
    }
}

.vs-services-hero .kb-buttons-wrap,
.vs-services-cta .kb-buttons-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vs-space-4);
    margin-block-start: var(--vs-space-2);
}

.entry-content .vs-services-hero .kb-button,
.entry-content .vs-services-cta .kb-button {
    text-decoration: none;
}

/* ---------- Core Services summary ---------- */

/*
 * Intro column currently nests the 4-card grid in Gutenberg.
 * Constrain only the intro text stack so the grid can use full content width.
 */
.vs-services-summary__intro {
    margin-block-end: 0;
    max-width: none;
}

.vs-services-summary__intro > .kt-inside-inner-col > :not(.vs-services-summary__grid) {
    max-width: 46rem;
}

.vs-services-summary__intro > .kt-inside-inner-col > .vs-eyebrow {
    margin-block-end: 0;
}

.vs-services-summary__intro > .kt-inside-inner-col > h2 {
    margin-block: 0;
}

.vs-services-summary__intro > .kt-inside-inner-col > h2 + p {
    color: var(--vs-color-text-muted);
    margin-block: var(--vs-space-2) var(--vs-space-3);
}

.vs-services-summary__grid {
    margin-block-start: 0;
    width: 100%;
}

.entry-content .vs-services-summary__grid > .kt-row-column-wrap,
.entry-content .vs-service-capabilities > .kt-row-column-wrap,
.vs-services-summary__grid > .kt-row-column-wrap,
.vs-service-capabilities > .kt-row-column-wrap {
    display: grid;
    gap: var(--vs-space-5);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
}

/* Override Kadence inline/equal column tracks that collapse the nested summary grid. */
.entry-content .vs-services-summary__intro .vs-services-summary__grid > .kt-row-column-wrap,
.vs-services-summary__intro .vs-services-summary__grid > .kt-row-column-wrap {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
    width: 100%;
}

/* Card design is shared in components.css; sizing remains page-owned. */
.vs-services-summary__card.vs-service-card {
    gap: var(--vs-space-3);
    min-height: 100%;
    padding: clamp(1.25rem, 2vw, 1.5rem);
}

/* ---------- Service family detail sections ---------- */

#business-websites.vs-service-detail {
    --vs-service-family-accent: var(--vs-service-websites-accent);
    --vs-service-family-surface: var(--vs-service-websites-surface);
    background: var(--vs-service-family-surface);
}

#woocommerce-solutions.vs-service-detail {
    --vs-service-family-accent: var(--vs-service-commerce-accent);
    --vs-service-family-surface: var(--vs-service-commerce-surface);
    background: var(--vs-service-family-surface);
}

#business-applications.vs-service-detail {
    --vs-service-family-accent: var(--vs-service-apps-accent);
    --vs-service-family-surface: var(--vs-service-apps-surface);
    background: var(--vs-service-family-surface);
}

#support-consulting.vs-service-detail {
    --vs-service-family-accent: var(--vs-service-consulting-accent);
    --vs-service-family-surface: var(--vs-service-consulting-surface);
    background: var(--vs-service-family-surface);
}

.vs-service-detail .vs-eyebrow {
    color: var(--vs-service-family-accent);
}

.vs-service-detail h2 {
    font-size: var(--vs-font-size-3xl);
    line-height: var(--vs-line-height-heading);
    max-width: 28ch;
    text-wrap: balance;
}

.vs-service-detail__content .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    gap: var(--vs-space-3);
}

.vs-service-detail__content .kt-inside-inner-col > * {
    margin-block: 0;
}

.vs-service-detail__content > .kt-inside-inner-col > p:not(.vs-eyebrow, .vs-service-consult__copy, .vs-service-stack),
.vs-service-detail > .kt-row-column-wrap > .wp-block-kadence-column:not(.vs-service-closing) > .kt-inside-inner-col > p:not(.vs-eyebrow, .vs-service-consult__copy, .vs-service-stack) {
    color: var(--vs-color-text-muted);
    max-width: var(--vs-measure-readable);
}

/* Nested upper row (illustration + intro) inside each family section. */
.vs-service-detail .kt-row-layout-left-golden > .kt-row-column-wrap,
.vs-service-detail .kt-row-layout-equal > .kt-row-column-wrap {
    align-items: center;
    gap: clamp(1.5rem, 3vw, 2.5rem);
}

.vs-service-detail__visual .kt-inside-inner-col {
    align-items: center;
    background: rgb(255 255 255 / 0.72);
    border: 1px solid color-mix(in srgb, var(--vs-service-family-accent) 18%, transparent);
    border-radius: var(--vs-radius-lg);
    box-shadow: var(--vs-shadow-subtle);
    display: flex;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    padding: clamp(0.75rem, 1.5vw, 1.25rem);
}

.vs-service-detail__visual img {
    aspect-ratio: 3 / 2;
    object-fit: contain;
    object-position: center;
}

/* Keep illustration visually present without dominating the intro copy. */
.vs-service-detail__visual {
    align-self: start;
    max-width: 36rem;
    width: 100%;
}

.vs-service-capabilities {
    margin-block-start: var(--vs-space-2);
    width: 100%;
}

.vs-service-detail > .kt-row-column-wrap > .wp-block-kadence-column:has(.vs-service-capabilities),
.vs-service-detail > .kt-row-column-wrap > .wp-block-kadence-column:has(.vs-service-consult) {
    max-width: none;
    width: 100%;
}

.vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column,
.vs-service-capability {
    background: rgb(255 255 255 / 0.55);
    border: 1px solid color-mix(in srgb, var(--vs-service-family-accent) 14%, transparent);
    border-radius: var(--vs-radius-md);
    border-top: 3px solid color-mix(in srgb, var(--vs-service-family-accent) 72%, transparent);
    padding: var(--vs-space-4);
    transition:
        border-color var(--vs-motion-normal) var(--vs-motion-ease),
        box-shadow var(--vs-motion-normal) var(--vs-motion-ease),
        transform var(--vs-motion-normal) var(--vs-motion-ease);
}

.vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column .kt-inside-inner-col,
.vs-service-capability .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    gap: var(--vs-space-2);
}

.vs-service-capabilities :where(h3),
.vs-service-capability :where(h3, p) {
    margin-block: 0;
}

.vs-service-capabilities h3,
.vs-service-capability h3 {
    font-size: var(--vs-font-size-base);
    font-weight: 700;
    line-height: var(--vs-line-height-heading);
    text-wrap: balance;
}

.vs-service-capability__copy,
.vs-service-capabilities :where(p:not(.vs-service-stack)),
.vs-service-capability p {
    color: var(--vs-color-text-muted);
    font-size: var(--vs-font-size-sm);
    line-height: var(--vs-line-height-small);
}

.vs-service-consult,
.vs-service-consult__copy {
    background: rgb(255 255 255 / 0.7);
    border-inline: 1px solid color-mix(in srgb, var(--vs-service-family-accent) 18%, transparent);
    margin-block: 0;
    max-width: none;
    padding-inline: var(--vs-space-5);
    width: 100%;
}

.vs-service-consult {
    border-block-start: 1px solid color-mix(in srgb, var(--vs-service-family-accent) 18%, transparent);
    border-radius: var(--vs-radius-md) var(--vs-radius-md) 0 0;
    font-size: var(--vs-font-size-base);
    margin-block-start: var(--vs-space-4);
    padding-block: var(--vs-space-4) var(--vs-space-2);
}

.vs-service-consult__copy {
    border-block-end: 1px solid color-mix(in srgb, var(--vs-service-family-accent) 18%, transparent);
    border-radius: 0 0 var(--vs-radius-md) var(--vs-radius-md);
    color: var(--vs-color-text-muted);
    padding-block: 0 var(--vs-space-4);
}

.entry-content .vs-service-detail .vs-service-consult__copy {
    max-width: none;
}

/* ---------- Business Websites — compact composition only ---------- */

#business-websites.vs-service-detail {
    padding-block: var(--vs-space-7);
}

.entry-content #business-websites.vs-service-detail > .kt-row-column-wrap,
#business-websites.vs-service-detail > .kt-row-column-wrap,
.entry-content #business-websites .kt-row-column-wrap.kt-row-layout-left-golden,
#business-websites .kt-row-column-wrap.kt-row-layout-left-golden,
.entry-content #business-websites .vs-service-capabilities > .kt-row-column-wrap,
#business-websites .vs-service-capabilities > .kt-row-column-wrap {
    padding-block: 0;
}

#business-websites.vs-service-detail > .kt-row-column-wrap {
    gap: var(--vs-space-5);
}

.entry-content #business-websites .kt-row-column-wrap.kt-row-layout-left-golden,
#business-websites .kt-row-column-wrap.kt-row-layout-left-golden {
    align-items: center;
    gap: var(--vs-space-5);
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
}

#business-websites .kt-row-column-wrap.kt-row-layout-left-golden > .wp-block-kadence-column:not(.vs-service-detail__visual):not(.vs-service-detail__content) {
    display: none;
}

#business-websites .vs-service-detail__visual {
    max-width: none;
}

#business-websites .vs-service-detail__visual .kt-inside-inner-col {
    align-items: center;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: flex;
    justify-content: center;
    overflow: visible;
    padding: 0;
}

#business-websites .vs-service-detail__visual img {
    aspect-ratio: 3 / 2;
    border-radius: var(--vs-radius-lg);
    box-shadow: none;
    object-fit: contain;
    object-position: center;
}

#business-websites.vs-service-detail h2 {
    line-height: 1.18;
    max-width: 24ch;
}

#business-websites .vs-service-detail__content .kt-inside-inner-col {
    gap: var(--vs-space-3);
}

#business-websites .vs-service-detail__content > .kt-inside-inner-col > p:not(.vs-eyebrow) {
    line-height: 1.55;
    max-width: 40rem;
}

#business-websites .vs-service-capabilities {
    margin-block-start: 0;
}

#business-websites.vs-service-detail > .kt-row-column-wrap > .wp-block-kadence-column:has(.vs-service-capabilities) > .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    gap: var(--vs-space-5);
}

.entry-content #business-websites .vs-service-capabilities > .kt-row-column-wrap,
#business-websites .vs-service-capabilities > .kt-row-column-wrap {
    gap: var(--vs-space-4);
}

#business-websites .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column {
    background: rgb(255 255 255 / 0.94);
    border: 1px solid color-mix(in srgb, var(--vs-service-family-accent) 18%, var(--vs-color-border));
    border-radius: var(--vs-radius-lg);
    box-shadow:
        0 1px 2px rgb(6 22 43 / 0.04),
        0 8px 22px rgb(6 22 43 / 0.045);
    display: flex;
    height: 100%;
    min-height: 100%;
    padding: var(--vs-space-3) var(--vs-space-4);
}

#business-websites .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
    align-items: center;
    flex: 1;
    gap: 0.45rem;
    height: 100%;
    justify-content: flex-start;
    text-align: center;
}

#business-websites .vs-service-capabilities h3 {
    /* Flex gap owns this spacing; suppress Kadence heading margin. */
    margin-block: 0;
    color: var(--vs-color-text);
    font-size: var(--vs-font-size-base);
    font-weight: 750;
    letter-spacing: -0.015em;
    line-height: 1.25;
    max-width: 18ch;
    text-align: center;
    text-wrap: balance;
}

#business-websites .vs-service-capabilities .vs-service-capability__copy {
    color: var(--vs-color-text-muted);
    font-size: var(--vs-font-size-sm);
    font-weight: 400;
    line-height: 1.45;
    max-width: 28ch;
    text-align: center;
}

/* Closing copy remains an ordinary editable Paragraph block. */
#business-websites .vs-service-closing > .kt-inside-inner-col {
    align-items: center;
    display: flex;
    justify-content: center;
}

#business-websites .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column:focus-within {
    border-color: var(--vs-service-family-accent);
    outline: var(--vs-focus-ring);
    outline-offset: var(--vs-focus-ring-offset);
}

#business-websites .wp-block-kadence-column:has(> .kt-inside-inner-col > .vs-service-consult) > .kt-inside-inner-col {
    display: grid;
    gap: 0;
    justify-items: stretch;
}

#business-websites .wp-block-kadence-column:has(> .kt-inside-inner-col > .vs-service-consult) > .kt-inside-inner-col > p:not(.vs-service-consult__copy) {
    border: 0;
    color: var(--vs-color-text-muted);
    font-size: var(--vs-font-size-sm);
    justify-self: center;
    line-height: var(--vs-line-height-small);
    margin-block: 0 var(--vs-space-4);
    max-width: 46rem;
    padding: 0;
    text-align: center;
    text-wrap: pretty;
}

#business-websites .vs-service-consult,
#business-websites .vs-service-consult__copy {
    background: color-mix(in srgb, var(--vs-service-family-accent) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--vs-service-family-accent) 16%, var(--vs-color-border));
    box-shadow: none;
    margin: 0;
    max-width: none;
    padding-inline: 1.2rem;
    width: auto;
}

#business-websites .vs-service-consult {
    border-bottom-width: 0;
    border-radius: var(--vs-radius-lg) var(--vs-radius-lg) 0 0;
    color: var(--vs-color-text);
    font-size: var(--vs-font-size-base);
    font-weight: 750;
    letter-spacing: -0.015em;
    line-height: 1.3;
    margin-block-start: 0;
    padding-block: 0.85rem 0.25rem;
    text-wrap: balance;
}

#business-websites .vs-service-consult__copy {
    border-radius: 0 0 var(--vs-radius-lg) var(--vs-radius-lg);
    border-top-width: 0;
    color: var(--vs-color-text-muted);
    display: flex;
    font-size: var(--vs-font-size-sm);
    line-height: 1.45;
    padding-block: 0.2rem 0.85rem;
}

.vs-service-stack {
    color: var(--vs-service-family-accent);
    font-size: var(--vs-font-size-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* ---------- Final CTA ---------- */

.vs-services-cta {
    color: var(--vs-color-text);
    padding-block: var(--vs-space-6);
    /* Paint the band through the page gutters without changing block width. */
    box-shadow: 0 0 0 100vmax var(--vs-cta-band-surface);
    clip-path: inset(0 -100vmax);
}

.entry-content .vs-services-cta > .kt-row-column-wrap {
    align-items: center;
    padding-block: 0;
}

.vs-services-cta__content > .kt-inside-inner-col {
    display: flex;
    flex-direction: column;
    gap: var(--vs-space-4);
}

.vs-services-cta__content > .kt-inside-inner-col > * {
    margin-block: 0;
}

.vs-services-cta :where(h2) {
    color: var(--vs-color-text);
    font-size: var(--vs-font-size-3xl);
    max-width: none;
    text-wrap: balance;
}

.vs-services-cta .vs-eyebrow {
    color: var(--vs-color-primary);
}

.vs-services-cta__content > .kt-inside-inner-col > p:not(.vs-eyebrow) {
    color: var(--vs-color-text);
    max-width: var(--vs-measure-readable);
}

.vs-services-cta .kb-buttons-wrap {
    margin-block-start: 0;
}

.vs-services-cta__action .kt-inside-inner-col {
    align-items: center;
    display: flex;
    justify-content: flex-end;
}

/* Remove only the closing gap on the page that owns this CTA. */
.content-area:has(.vs-services-cta) {
    margin-block-end: 0;
}

@media (min-width: 1025px) {
    .entry-content .vs-services-cta > .kt-row-column-wrap {
        gap: var(--vs-space-7);
        grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr);
    }
}

/* ---------- Interaction ---------- */

.vs-services-hero :where(a, button):focus-visible,
.vs-services-summary :where(a, button):focus-visible,
.vs-service-detail :where(a, button):focus-visible,
.vs-services-cta :where(a, button):focus-visible {
    outline: var(--vs-focus-ring);
    outline-offset: var(--vs-focus-ring-offset);
}

@media (hover: hover) {
    .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column:hover,
    .vs-service-capability:hover {
        border-color: color-mix(in srgb, var(--vs-service-family-accent) 36%, transparent);
        box-shadow: var(--vs-shadow-subtle);
        transform: translateY(-1px);
    }

    #business-websites .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column:hover {
        border-color: color-mix(in srgb, var(--vs-service-family-accent) 32%, var(--vs-color-border));
        box-shadow:
            0 1px 2px rgb(6 22 43 / 0.05),
            0 10px 24px rgb(6 22 43 / 0.06);
        transform: translateY(-1px);
    }

    .vs-services-hero .kb-button:hover,
    .vs-services-cta .kb-button:hover {
        box-shadow: var(--vs-shadow-subtle);
        transform: translateY(-1px);
    }
}

@media (min-width: 900px) {
    #business-websites .wp-block-kadence-column:has(> .kt-inside-inner-col > .vs-service-consult) > .kt-inside-inner-col {
        align-items: stretch;
        grid-template-columns: minmax(14rem, 0.85fr) minmax(0, 1.3fr);
    }

    #business-websites .wp-block-kadence-column:has(> .kt-inside-inner-col > .vs-service-consult) > .kt-inside-inner-col > p:not(.vs-service-consult__copy) {
        grid-column: 1 / -1;
    }

    #business-websites .vs-service-consult {
        align-items: center;
        border-bottom-width: 1px;
        border-radius: var(--vs-radius-lg) 0 0 var(--vs-radius-lg);
        border-right-width: 0;
        display: flex;
        padding-block: var(--vs-space-3);
    }

    #business-websites .vs-service-consult__copy {
        align-items: center;
        border-left-width: 0;
        border-radius: 0 var(--vs-radius-lg) var(--vs-radius-lg) 0;
        border-top-width: 1px;
        padding-block: var(--vs-space-3);
        position: relative;
    }

    /* A short, low-contrast separator keeps the strip from reading as a table. */
    #business-websites .vs-service-consult__copy::before {
        background: color-mix(in srgb, var(--vs-service-family-accent) 16%, transparent);
        content: "";
        height: var(--vs-space-6);
        left: 0;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
    }
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
    .entry-content .vs-services-hero > .kt-row-column-wrap,
    .vs-services-hero > .kt-row-column-wrap,
    .vs-service-detail > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .entry-content .vs-services-summary__grid > .kt-row-column-wrap,
    .entry-content .vs-services-summary__intro .vs-services-summary__grid > .kt-row-column-wrap,
    .entry-content .vs-service-capabilities > .kt-row-column-wrap,
    .vs-services-summary__grid > .kt-row-column-wrap,
    .vs-services-summary__intro .vs-services-summary__grid > .kt-row-column-wrap,
    .vs-service-capabilities > .kt-row-column-wrap {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vs-service-detail__visual {
        max-width: 28rem;
    }

    .vs-services-hero h1,
    .vs-service-detail h2 {
        max-width: none;
    }

    .entry-content #business-websites .kt-row-column-wrap.kt-row-layout-left-golden,
    #business-websites .kt-row-column-wrap.kt-row-layout-left-golden {
        grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    }

    #business-websites.vs-service-detail h2 {
        max-width: 20ch;
    }

    #business-websites .vs-service-detail__visual {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .vs-services-hero {
        padding-block-end: var(--vs-space-6);
        padding-block-start: var(--vs-space-4);
    }

    .vs-service-detail {
        padding-block: var(--vs-space-6);
    }

    #business-websites.vs-service-detail {
        padding-block: var(--vs-space-6);
    }

    .vs-services-summary {
        padding-block-end: var(--vs-space-5);
        padding-block-start: var(--vs-space-6);
    }

    .vs-services-cta {
        padding-block: var(--vs-space-6);
    }

    .vs-services-hero > .kt-row-column-wrap,
    .vs-service-detail > .kt-row-column-wrap {
        gap: var(--vs-space-5);
    }

    .entry-content .vs-services-summary__grid > .kt-row-column-wrap,
    .entry-content .vs-services-summary__intro .vs-services-summary__grid > .kt-row-column-wrap,
    .entry-content .vs-service-capabilities > .kt-row-column-wrap,
    .vs-services-summary__grid > .kt-row-column-wrap,
    .vs-services-summary__intro .vs-services-summary__grid > .kt-row-column-wrap,
    .vs-service-capabilities > .kt-row-column-wrap {
        gap: var(--vs-space-4);
        grid-template-columns: minmax(0, 1fr);
    }

    .vs-service-detail__visual {
        max-width: none;
    }

    .entry-content #business-websites .kt-row-column-wrap.kt-row-layout-left-golden,
    #business-websites .kt-row-column-wrap.kt-row-layout-left-golden {
        gap: var(--vs-space-4);
        grid-template-columns: minmax(0, 1fr);
    }

    #business-websites.vs-service-detail h2 {
        max-width: none;
    }

    #business-websites .vs-service-detail__visual {
        max-width: 24rem;
    }

    #business-websites .wp-block-kadence-column:has(> .kt-inside-inner-col > .vs-service-consult) > .kt-inside-inner-col {
        gap: 0;
        grid-template-columns: minmax(0, 1fr);
    }

    #business-websites .vs-service-consult,
    #business-websites .vs-service-consult__copy {
        padding-inline: 1rem;
        text-align: center;
    }

    #business-websites .vs-service-consult {
        border-bottom-width: 0;
        border-radius: var(--vs-radius-lg) var(--vs-radius-lg) 0 0;
        border-right-width: 1px;
        justify-content: center;
        padding-block: 0.8rem 0.2rem;
    }

    #business-websites .vs-service-consult__copy {
        border-left-width: 1px;
        border-radius: 0 0 var(--vs-radius-lg) var(--vs-radius-lg);
        border-top-width: 0;
        justify-content: center;
        padding-block: 0.2rem 0.8rem;
    }

    .vs-services-cta > .kt-row-column-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .vs-services-cta__action .kt-inside-inner-col {
        align-items: flex-start;
        justify-content: flex-start;
    }

    .vs-services-hero .kb-buttons-wrap,
    .vs-services-cta .kb-buttons-wrap {
        align-items: stretch;
        flex-direction: column;
    }

    .vs-services-cta :where(h2) {
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Match shared button specificity so the page's motion opt-out takes effect. */
    .entry-content :is(.vs-services-hero, .vs-services-cta) .kb-button {
        transition: none;
    }

    .entry-content :is(.vs-services-hero, .vs-services-cta) .kb-button:hover {
        transform: none;
    }

    #business-websites .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column,
    #business-websites .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column:hover {
        transform: none;
        transition: none;
    }

    .vs-services-hero *,
    .vs-services-summary *,
    .vs-service-detail *,
    .vs-services-cta * {
        scroll-behavior: auto;
        transition-duration: 0.01ms;
    }

    .vs-services-summary__card a:hover,
    .vs-services-summary__card.vs-service-card--family:has(a:hover),
    .vs-services-summary__card.vs-service-card--family:focus-within,
    .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column:hover,
    .vs-service-capability:hover,
    .vs-services-hero .kb-button:hover,
    .vs-services-cta .kb-button:hover {
        transform: none;
    }
}

/* Detailed family presentation also applies to stacked native blocks. */
:is(#woocommerce-solutions, #business-applications, #support-consulting).vs-service-detail {
    padding-block: var(--vs-space-7);
}

.entry-content :is(#woocommerce-solutions, #business-applications, #support-consulting) > .kt-row-column-wrap,
.entry-content :is(#woocommerce-solutions, #business-applications, #support-consulting) .kt-row-column-wrap:is(.kt-row-layout-left-golden, .kt-row-layout-right-golden),
.entry-content :is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-capabilities > .kt-row-column-wrap {
    padding-block: 0;
    gap: var(--vs-space-5);
}

.entry-content :is(#woocommerce-solutions, #business-applications, #support-consulting) .kt-row-column-wrap.kt-row-layout-left-golden {
    align-items: center;
    gap: var(--vs-space-5);
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
}

.entry-content :is(#woocommerce-solutions, #business-applications, #support-consulting) .kt-row-column-wrap.kt-row-layout-right-golden {
    align-items: center;
    gap: var(--vs-space-5);
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .kt-row-column-wrap:is(.kt-row-layout-left-golden, .kt-row-layout-right-golden) > .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-kadence-image) {
    max-width: none;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .kt-row-column-wrap:is(.kt-row-layout-left-golden, .kt-row-layout-right-golden) > .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-kadence-image) > .kt-inside-inner-col {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .wp-block-kadence-image img {
    aspect-ratio: auto 3 / 2;
    height: auto;
    width: 100%;
    border-radius: var(--vs-radius-lg);
    box-shadow: none;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .kt-row-column-wrap:is(.kt-row-layout-left-golden, .kt-row-layout-right-golden) > .wp-block-kadence-column > .kt-inside-inner-col {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: var(--vs-space-3);
    text-align: left;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .kt-row-column-wrap:is(.kt-row-layout-left-golden, .kt-row-layout-right-golden) :is(h2, p) {
    margin-block: 0;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-detail__visual .kt-inside-inner-col {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* Also tolerate a visual hook on the outer Gutenberg row container. */
:is(#woocommerce-solutions, #business-applications, #support-consulting) > .kt-row-column-wrap > .vs-service-detail__visual {
    max-width: none;
    width: 100%;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) > .kt-row-column-wrap > .vs-service-detail__visual > .kt-inside-inner-col {
    background: transparent;
    border: 0;
    box-shadow: none;
    display: block;
    padding: 0;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) h2 {
    line-height: 1.18;
    max-width: 26ch;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .kt-row-column-wrap:is(.kt-row-layout-left-golden, .kt-row-layout-right-golden) p:not(.vs-eyebrow, .vs-service-stack) {
    color: var(--vs-color-text-muted);
    line-height: 1.55;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-capabilities {
    margin-block-start: 0;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column {
    background: rgb(255 255 255 / 0.94);
    border: 1px solid color-mix(in srgb, var(--vs-service-family-accent) 18%, var(--vs-color-border));
    border-radius: var(--vs-radius-lg);
    box-shadow: 0 1px 2px rgb(6 22 43 / 0.04), 0 8px 22px rgb(6 22 43 / 0.045);
    display: flex;
    height: 100%;
    padding: var(--vs-space-3) var(--vs-space-4);
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column > .kt-inside-inner-col {
    align-items: center;
    flex: 1;
    gap: 0.45rem;
    text-align: center;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-capabilities h3 {
    color: var(--vs-color-text);
    font-weight: 750;
    letter-spacing: -0.015em;
    line-height: 1.25;
    margin-block: 0;
    max-width: 23ch;
    text-align: center;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-capabilities p {
    line-height: 1.45;
    max-width: 28ch;
    text-align: center;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .wp-block-kadence-column:has(> .kt-inside-inner-col > .vs-service-consult) > .kt-inside-inner-col {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--vs-space-2);
}

.entry-content :is(#woocommerce-solutions, #business-applications, #support-consulting) :is(.vs-service-consult, .vs-service-consult__copy) {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    max-width: 70ch;
    padding: 0;
    text-align: center;
    text-wrap: pretty;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-consult {
    color: var(--vs-color-text);
    font-size: var(--vs-font-size-base);
    font-weight: 600;
    line-height: 1.4;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-consult__copy {
    font-size: var(--vs-font-size-sm);
    line-height: 1.45;
}

:is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column:focus-within {
    border-color: var(--vs-service-family-accent);
    outline: var(--vs-focus-ring);
    outline-offset: var(--vs-focus-ring-offset);
}

@media (min-width: 1025px) and (hover: hover) {
    :is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column:hover {
        border-color: color-mix(in srgb, var(--vs-service-family-accent) 32%, var(--vs-color-border));
        box-shadow: 0 1px 2px rgb(6 22 43 / 0.05), 0 10px 24px rgb(6 22 43 / 0.06);
        transform: translateY(-1px);
    }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    :is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column,
    :is(#woocommerce-solutions, #business-applications, #support-consulting) .vs-service-capabilities > .kt-row-column-wrap > .wp-block-kadence-column:hover {
        transform: none;
        transition: none;
    }
}

/* Final section rhythm; card design and native content remain unchanged. */
.entry-content :is(#business-websites, #woocommerce-solutions, #business-applications, #support-consulting) .kt-row-column-wrap:is(.kt-row-layout-left-golden, .kt-row-layout-right-golden) h2 {
    margin-block-end: var(--vs-space-1);
}

@media (max-width: 1024px) {
    .entry-content :is(#woocommerce-solutions, #business-applications, #support-consulting) .kt-row-column-wrap:is(.kt-row-layout-left-golden, .kt-row-layout-right-golden) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .entry-content :is(#business-websites, #woocommerce-solutions, #business-applications, #support-consulting) .kt-row-column-wrap:is(.kt-row-layout-left-golden, .kt-row-layout-right-golden) {
        grid-template-columns: minmax(0, 1fr);
    }

    .entry-content :is(#business-websites, #woocommerce-solutions, #business-applications, #support-consulting) .kt-row-column-wrap:is(.kt-row-layout-left-golden, .kt-row-layout-right-golden) > .wp-block-kadence-column:has(> .kt-inside-inner-col > .wp-block-kadence-image) {
        justify-self: center;
        max-width: 28rem;
    }

    :is(#business-websites, #woocommerce-solutions, #business-applications, #support-consulting).vs-service-detail {
        padding-block: var(--vs-space-6);
    }

    .vs-service-detail h2,
    #business-websites.vs-service-detail h2,
    :is(#woocommerce-solutions, #business-applications, #support-consulting) h2 {
        max-width: none;
    }
}

/* Editable closing statements share a restrained, family-tinted highlight panel. */
.entry-content .vs-service-detail .vs-service-closing > .kt-inside-inner-col {
    background: color-mix(in srgb, var(--vs-service-family-accent) 4%, var(--vs-service-family-surface));
    border: var(--vs-border-width) solid color-mix(in srgb, var(--vs-service-family-accent) 22%, var(--vs-color-border));
    border-left: var(--vs-space-1) solid var(--vs-service-family-accent);
    border-radius: var(--vs-radius-lg);
    box-shadow: none;
    padding: var(--vs-space-4) var(--vs-space-5);
    width: 100%;
}

.entry-content .vs-service-detail .vs-service-closing > .kt-inside-inner-col > p {
    color: var(--vs-color-text);
    font-size: var(--vs-font-size-lg);
    font-weight: 500;
    line-height: 1.5;
    margin: 0;
    max-width: none;
    text-align: center;
    text-wrap: pretty;
    width: 100%;
}

/* Native intro rows align image and eyebrow tops, including alternating layouts. */
.entry-content .vs-service-detail .kt-row-column-wrap:is(.kt-row-layout-left-golden, .kt-row-layout-right-golden) > .wp-block-kadence-column {
    align-self: start;
}