/* Section: capability matrix. */

.services-capabilities__header,
.services-capabilities__table {
    grid-column: 1 / -1;
}

.services-packages {
    position: relative;
    overflow: hidden;
    padding: 6.875rem 0 7.5rem;
    background: var(--color-white);
    --services-packages-wave-h: url("data:image/svg+xml,%3Csvg width='160' height='6' viewBox='0 0 160 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3C8 3 8 2 16 2C24 2 24 4 32 4C40 4 40 2 48 2C56 2 56 4 64 4C72 4 72 2 80 2C88 2 88 4 96 4C104 4 104 2 112 2C120 2 120 4 128 4C136 4 136 2 144 2C152 2 152 3 160 3' fill='none' stroke='%23EAEAF7' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
    --services-packages-wave-v: url("data:image/svg+xml,%3Csvg width='6' height='160' viewBox='0 0 6 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 0C3 8 2 8 2 16C2 24 4 24 4 32C4 40 2 40 2 48C2 56 4 56 4 64C4 72 2 72 2 80C2 88 4 88 4 96C4 104 2 104 2 112C2 120 4 120 4 128C4 136 2 136 2 144C2 152 3 152 3 160' fill='none' stroke='%23EAEAF7' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.services-capabilities__header {
    width: min(100%, 1010px);
    margin: 0 auto 5.375rem;
    text-align: center;
    grid-column: 2 / 12;
}

.services-capabilities__title {
    margin: 0;
    color: var(--color-dark-purple) !important;
    font-family: var(--font-display);
    font-size: clamp(3.5rem, 5.3vw, var(--text-display));
    font-weight: var(--fw-bold);
    line-height: var(--lh-display);

}

.services-capabilities__title em,
.services-capabilities__title span {
    display: block;
}

.services-capabilities__title em {
    font-style: italic;
}

.services-capabilities__title span {
    font-size: var(--text-h2);
}

.services-capabilities__table {
    position: relative;
    z-index: 1;
}

.services-packages > .container.grid > .services-capabilities__header {
    grid-column: 2 / 12;
}

.services-packages > .container.grid > .services-capabilities__table {
    grid-column: 1 / -1;
    min-width: 0;
}

.services-capabilities__mobile {
    display: none;
}

.services-capabilities__table-head,
.services-capabilities__table-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
}

.services-capabilities__column-title,
.services-capabilities-group {
    grid-column: span 4;
    min-width: 0;
}

.services-capabilities__table-row {
    min-height: 180px;
}

.services-capabilities__table-head::after,
.services-capabilities__table-row + .services-capabilities__table-row::before {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    z-index: 2;
    height: 6px;
    pointer-events: none;
    background-image: var(--services-packages-wave-h);
    background-repeat: repeat-x;
    background-size: 160px 6px;
}

.services-capabilities__table-head::after {
    bottom: -3px;
}

.services-capabilities__table-row + .services-capabilities__table-row::before {
    top: -3px;
}

.services-capabilities__column-title {
    position: relative;
    display: flex;
    justify-content: left;
    margin: 0;
    padding: 1.75rem 4rem 1.5rem;
    color: var(--color-dark-purple) !important;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--fw-bold);
    line-height: 1.1875;
}

.services-capabilities__column-title:not(:first-child)::before,
.services-capabilities-group:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -3px;
    z-index: 2;
    width: 6px;
    pointer-events: none;
    background-image: var(--services-packages-wave-v);
    background-repeat: repeat-y;
    background-size: 6px 160px;
}

.services-capabilities-group {
    position: relative;
    padding: 1.75rem 4rem 1.5rem;
}

.services-capabilities-group--empty {
    min-height: inherit;
}

.services-capabilities-group--empty + .services-capabilities-group--empty::before {
    display: none;
}

.services-capabilities-group__title {
    margin: 0 0 0.625rem;
    color: var(--color-dark-purple) !important;
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: var(--fw-bold);
    line-height: 1.4444;
}

.services-capabilities-group__list {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.services-capabilities-group__list li {
    color: var(--color-dark-purple);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;
}

.services-packages__spark {
    /* 16.25rem at the 1352px container and wider, easing down to 11.75rem on
       narrow laptops. The bottom offset rides the same size so the slice of the
       mark showing above the section edge is identical at every width. */
    --spark-size: clamp(11.75rem, 19.25vw, 16.25rem);

    position: absolute;
    left: 50%;
    bottom: calc(var(--spark-size) * -0.508);
    z-index: 0;
    width: var(--spark-size);
    height: var(--spark-size);
    background: url("../../../../../uploads/meowgical/images/shared/spark.svg") center / contain no-repeat;
    transform: translateX(-50%);
}

/* ── Spark flight ─────────────────────────────────────────────────────────
   The travelling copy of the star, parked on <body> by main.js: this section
   and the interlude both clip their overflow and every section wrapper on the
   page is its own stacking context, so the seam can only be crossed from
   outside both of them. Artwork, box, clip and transform all come from the
   script, which measures the two real sparks it flies between; they keep
   their layout boxes, hence visibility rather than display. */
.spark-flight {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 90;
    background: center / contain no-repeat;
    transform-origin: 50% 50%;
    pointer-events: none;
    will-change: transform, clip-path;
}

.services-packages__spark.is-spark-flight {
    visibility: hidden;
}

@media (max-width: 1180px) {
    .services-capabilities-group {
        padding-right: 2rem;
        padding-left: 2rem;

    }
}

@media (max-width: 1024px) {
    .services-capabilities__column-title,
    .services-capabilities-group {
        grid-column: span 2;

    }
}

@media (max-width: 900px) {
    .services-packages > .container.grid > .services-capabilities__header {
        grid-column: 1 / -1;
        margin-bottom: 3.5rem;

    }

    .services-packages > .container.grid > .services-capabilities__table {
        display: none;

    }

    .services-packages > .container.grid > .services-capabilities__mobile {
        display: block;
        grid-column: 1 / -1;
        justify-self: stretch;
        width: 100%;
        min-width: 0;

    }

    .services-packages__spark {
        display: none;

    }

    .services-capabilities-mobile-item {
        position: relative;
        border-bottom: 1px solid var(--color-secondary);

    }

    .services-capabilities-mobile-item__trigger {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 3.75rem;
        padding: 1rem 0;
        border: 0;
        background: transparent;
        color: var(--color-dark-purple);
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: var(--fw-bold);
        line-height: 1.2;
        text-align: left;
        cursor: pointer;

    }

    .services-capabilities-mobile-item.is-open .services-capabilities-mobile-item__trigger {
        border-bottom: 1px solid var(--color-secondary);

    }

    .services-capabilities-mobile-item__trigger span:first-child {
        flex: 1 1 auto;
        min-width: 0;

    }

    .services-capabilities-mobile-item__icon {
        position: relative;
        flex: 0 0 auto;
        margin-left: 1.5rem;
        width: 1rem;
        height: 1rem;

    }

    .services-capabilities-mobile-item__icon::before,
    .services-capabilities-mobile-item__icon::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 0.625rem;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        /* Matches the panel's height animation in main.js. */
        transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);

    }

    .services-capabilities-mobile-item__icon::before {
        left: 0;
        transform: translateY(-50%) rotate(45deg);

    }

    .services-capabilities-mobile-item__icon::after {
        right: 0;
        transform: translateY(-50%) rotate(-45deg);

    }

    .services-capabilities-mobile-item.is-open .services-capabilities-mobile-item__icon::before {
        transform: translateY(-50%) rotate(-45deg);

    }

    .services-capabilities-mobile-item.is-open .services-capabilities-mobile-item__icon::after {
        transform: translateY(-50%) rotate(45deg);

    }

    .services-capabilities-mobile-item__panel {
        display: none;

    }

    .services-capabilities-mobile-item.is-open .services-capabilities-mobile-item__panel {
        display: block;
        padding-bottom: 0.125rem;

    }

    .services-capabilities-mobile-item__panel .services-capabilities-group {
        border-bottom: 1px solid var(--color-secondary);
        padding: 1.25rem 0;

    }

    .services-capabilities-mobile-item__panel .services-capabilities-group:last-child {
        border-bottom: 0;

    }

    .services-capabilities__table-head,
    .services-capabilities__table-row {
        grid-template-columns: 1fr;

    }

    .services-capabilities__column-title,
    .services-capabilities-group {
        grid-column: 1 / -1;

    }

    .services-capabilities__column-title {
        justify-content: flex-start;
        height: auto;
        padding: 1.25rem 0;
        border-left: 0;

    }

    .services-capabilities-group {
        min-height: 0;
        padding: 1.5rem 0;
        border-left: 0;

    }

    .services-capabilities__column-title:not(:first-child)::before {
        display: none;

    }

    .services-capabilities-group::before,
    .services-capabilities-group:not(:first-child)::before {
        content: "";
        position: absolute;
        top: -3px;
        right: 0;
        bottom: auto;
        left: 0;
        z-index: 2;
        width: auto;
        height: 6px;
        pointer-events: none;
        background-image: var(--services-packages-wave-h);
        background-repeat: repeat-x;
        background-size: 160px 6px;

    }

    .services-capabilities-mobile-item__panel .services-capabilities-group::before,
    .services-capabilities-mobile-item__panel .services-capabilities-group:not(:first-child)::before {
        content: none;
        display: none;

    }

    .services-capabilities-group--empty {
        display: none;

    }
}

/* Reduced motion: the group icons flip at once; main.js opens the panels
   without the height animation for the same visitors. */
@media (prefers-reduced-motion: reduce) {
    .services-capabilities-mobile-item__icon::before,
    .services-capabilities-mobile-item__icon::after {
        transition: none;
    }
}

@media (max-width: 640px) {
    .services-packages {
        padding: 4rem 0;

    }

    .services-capabilities__header {
        margin-bottom: 2.5rem;
        text-align: left;

    }

    .services-capabilities__title {
        display: grid;
        gap: 0.5rem;
        font-size: 1rem;
        line-height: 1.2;

    }

    .services-capabilities__title em {
        font-size: 1.125rem;
        font-style: normal;
        line-height: 1.35;

    }

    .services-capabilities__title span {
        font-size: clamp(1.875rem, 8.75vw, 2.25rem);
        font-style: italic;
        line-height: 1.15;

    }

    .services-capabilities__column-title {
        font-size: 1.75rem;

    }

    .services-packages__spark {
        --spark-size: 11.75rem;

        bottom: -5.375rem;

    }
}

.section-capability-matrix {
    overflow: hidden;
}

/* ================================================================
   VIEWPORT FIT
   ================================================================ */
/* Above the accordion breakpoint the matrix is exactly one viewport tall, so
   every vertical cost is budgeted against svh: pad, header, column heads and
   the three rows each give ground as the viewport shortens. The rem floors stop
   it collapsing on short laptops; the rem ceilings keep the tall-screen look. */
@media (min-width: 901px) {
    .section-capability-matrix {
        /* The nav pill is sticky and floats over every section, so the top pad
           has to clear it before any of the budget below gets spent. The pill is
           a fixed 94px whatever the viewport does, so this floors above that
           rather than scaling all the way down with the rest of the budget. */
        --cap-nav: clamp(6rem, 13svh, 6.875rem);
        --cap-pad-bottom: clamp(1rem, 3.4svh, 7.5rem);
        --cap-cell-pad-top: clamp(0.6875rem, 1.7svh, 1.75rem);
        --cap-cell-pad-bottom: clamp(0.5625rem, 1.5svh, 1.5rem);

        display: flex;
        align-items: center;
        min-height: 100vh;
        min-height: 100svh;
        padding: var(--cap-nav) 0 var(--cap-pad-bottom);
    }

    .section-capability-matrix > .container.grid {
        align-content: center;
        width: 100%;
        min-height: 0;
    }

    .section-capability-matrix .services-capabilities__header {
        margin-bottom: clamp(0.75rem, 2.6svh, 5.375rem);
    }

    .section-capability-matrix .services-capabilities__title {
        font-size: clamp(2rem, min(5.3vw, 5.7svh), var(--text-display));
        line-height: 1.1;
        gap: var(--space-xs);
        display: flex;
        flex-direction: column;
    }

    .section-capability-matrix .services-capabilities__title span {
        font-size: clamp(1.5rem, min(3.7vw, 4svh), var(--text-h2));
    }

    .section-capability-matrix .services-capabilities__column-title {
        padding-top: clamp(0.6875rem, 1.8svh, 1.75rem);
        padding-bottom: clamp(0.5625rem, 1.5svh, 1.5rem);
        font-size: clamp(1.125rem, min(2.1vw, 2.85svh), 2rem);
    }

    .section-capability-matrix .services-capabilities__table-row {
        min-height: clamp(4rem, 14svh, 180px);
    }

    .section-capability-matrix .services-capabilities-group {
        padding-top: var(--cap-cell-pad-top);
        padding-bottom: var(--cap-cell-pad-bottom);
    }

    .section-capability-matrix .services-capabilities-group__title {
        margin-bottom: clamp(0.1875rem, 0.75svh, 0.625rem);
        font-size: clamp(0.9375rem, 1.85svh, 1.125rem);
    }

    .section-capability-matrix .services-capabilities-group__list {
        gap: clamp(0.0625rem, 0.45svh, 0.375rem);
    }

    .section-capability-matrix .services-capabilities-group__list li {
        font-size: clamp(0.8125rem, min(1.05vw, 1.75svh), 1rem);
        line-height: 1.4;
    }
}