/* ==========================================================================
   Services page components (sv-*).
   Every rule here is opt-in: it only applies to markup that uses an sv- class in
   a page's Raw Html block. Page structure comes from cs-* and pl-*.
   ========================================================================== */

/* ---------- Systems stack in the hero ---------- */

.sv-stack {
    margin: 0;
    color: #fff;
}

.sv-stack-label {
    display: block;
    margin-bottom: .6rem;
    color: #d6d5d5;
    font-family: "Archivo";
    font-weight: 700;
    font-variation-settings: 'wdth' 125, 'wght' 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .68rem;
    line-height: 1.3;
}

.sv-systems {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
}

a.sv-system {
    display: flex;
    flex: 0 0 calc((100% - 1rem) / 3);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 0;
    height: 64px;
    padding: .25rem;
    background: #fff;
    border: 0;
    color: var(--hp-dark);
    font-family: "Archivo";
    font-weight: 800;
    font-size: .9rem;
    line-height: 1.15;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}

a.sv-system:hover,
a.sv-system:focus-visible {
    color: var(--hp-dark);
    transform: translateY(-3px);
    box-shadow: 0 0 0 2px var(--hp-orange), 0 10px 22px rgba(0, 0, 0, .5);
}

.sv-stack .pl-link {
    margin: .25rem 0;
}

a.sv-overlay {
    display: block;
    padding: 1rem 1.25rem;
    background: var(--hp-orange);
    border: 0;
    color: #fff;
    text-align: center;
    line-height: 1.3;
}

a.sv-overlay:hover {
    color: #fff;
    background: var(--hp-orange-dark);
}

.sv-overlay strong {
    display: block;
    font-family: "Archivo";
    font-weight: 800;
    font-size: 1.1rem;
}

.sv-retainer {
    margin-top: .5rem;
    padding: .9rem 1rem;
    border: 2px solid #6d6768;
    font-family: "Archivo";
    font-weight: 800;
    font-size: 1rem;
    line-height: 1.25;
    text-align: center;
}

/* Draws in from the top when the page loads. */
.sv-stack > * {
    animation: pl-draw-in .6s ease both;
}

.sv-stack > :nth-child(3) { animation-delay: .2s; }
.sv-stack > :nth-child(4) { animation-delay: .4s; }
.sv-stack > :nth-child(5) { animation-delay: .6s; }

/* ---------- Retainer steps ---------- */

.sv-split {
    display: grid;
    gap: 2.5rem;
}

.sv-split .cs-steps {
    margin: 0;
}

.sv-steps-note {
    margin: 1rem 0 0;
    font-size: 1.15rem;
    line-height: 1.55;
}

.sv-steps-note + .cs-quote {
    margin-bottom: 0;
}

.pl-section .cs-quote {
    color: var(--hp-dark);
}

/* The attribution style is made for dark bands, so it needs darker text here. */
.pl-section .cs-attribution {
    color: #5d5859;
}

.pl-section .cs-attribution strong {
    color: var(--hp-dark);
}

.pl-section .cs-steps p {
    margin: 0;
    line-height: 1.5;
}

/* ---------- Program groups ---------- */

.sv-group + .sv-group {
    margin-top: 3.5rem;
}

.sv-group > h3 {
    margin-bottom: 1.25rem;
    padding-bottom: .6rem;
    border-bottom: 2px solid var(--hp-dark);
}

.sv-program .sv-problem {
    font-weight: 700;
}

.sv-programs {
    display: grid;
    gap: 1.25rem;
}

.sv-program.pl-card {
    padding: 1.5rem;
    border-top-width: 4px;
}

/* Every program card stays the same width, even when one is alone on its row. */
.sv-programs .pl-card:last-child:nth-child(odd) {
    grid-column: auto;
}

/* ---------- Service stub pages ---------- */

.cs-page .sv-stub-hero h1 {
    font-size: clamp(1.4rem, 6.6vw, 3.2rem);
}

.sv-back {
    display: inline-block;
    margin-bottom: 1rem;
    border: 0;
    color: #e9e9ea;
    font-size: .95rem;
}

.sv-back:hover {
    color: #fff;
    text-decoration: underline;
}

.sv-stub-body .cs-features li {
    font-size: 1rem;
}

/* ---------- Larger screens ---------- */

@media (min-width: 768px) {
    .sv-programs {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sv-split {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }

    .sv-programs {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    a.sv-system {
        flex: 1 1 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sv-stack > * {
        animation: none;
    }

    a.sv-system {
        transition: none;
    }
}