/* =========================================================================
   Our few process.

   Built to the reference: four cards across, each carrying its step as a
   large faded number, on a light ground.

   Was four rows alternating left and right down 873 pixels — a zigzag that
   made a four-step process look like a long journey and, at that width, put
   a step's number a thousand pixels from the step beside it. The reference
   sets them side by side, which is what four steps are.

   Nothing here moves markup. The four rows are laid across by the grid
   below; the "Step" caption, the number, the heading and the text are the
   same elements in the same order.
   ========================================================================= */

.process-all {
    background: #f4f6fa;
    padding: 74px 0 80px;
}

/* -------------------------------------------------------------------------
   The heading.
   ------------------------------------------------------------------------- */

.process-all .title h2 {
    font-size: 40px;
    font-weight: 800;
    color: var(--elite-navy, #02135b);
    letter-spacing: -.01em;
    margin-bottom: 14px;
}

.process-all .title .site-color {
    color: var(--elite-red, #e80719);
}

.process-all .heading-divider {
    display: block;
    width: 54px;
    height: 3px;
    border-radius: 3px;
    background: var(--elite-red, #e80719);
    border: 0;
}

/* -------------------------------------------------------------------------
   Four across.

   The four .row wrappers become the track, and each becomes one column of
   it. The col-md-2 spacers that made the zigzag have nothing left to do.
   ------------------------------------------------------------------------- */

/* :not(.title) matters. The heading is a div under the same parent, so a
   bare > div made a four-column grid of it too and put the title in one
   column and its divider in the next. */
.work-process > div:not(.title) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
    align-items: stretch;
}

.work-process > div:not(.title) > .row {
    display: block;
    margin: 0;
}

.work-process > div:not(.title) > .row > .col-md-2 {
    display: none;
}

.work-process > div:not(.title) > .row > .col-md-10 {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    margin-bottom: 0 !important;
    padding: 0;
    height: 100%;
}

/* -------------------------------------------------------------------------
   The card.
   ------------------------------------------------------------------------- */

.process-all .process-box {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: auto;
    margin: 0;
    /* Room at the foot for the number, which the text would otherwise run
       straight through. */
    padding: 30px 28px 62px;
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 14px;
    box-shadow: none;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.process-all .process-box:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 26px 50px -28px rgba(2, 19, 91, .45);
}

/* A red rule that draws itself across the top on hover, so the card the
   cursor is on is obvious without colouring the whole set. */
.process-all .process-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--elite-red, #e80719);
    transition: width .35s ease;
}

.process-all .process-box:hover::before {
    width: 100%;
}

.process-all .process-box > .row {
    display: block;
    margin: 0;
}

.process-all .process-box > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
    padding: 0;
}

/* The number is placed against the card, so nothing between may be
   positioned: a relative column half the card's height had it measuring
   "bottom" from its own foot and pinning to the top of the card. */
.process-all .process-box > .row,
.process-all .process-box > .row > [class*="col-"] {
    position: static;
}

/* -------------------------------------------------------------------------
   The step number.

   The reference sets it large and faint behind the words, which is what a
   step number is: a position, not a headline. Ours was a navy flag with a
   notch cut out of it, wider than the text it labelled.
   ------------------------------------------------------------------------- */

.process-all .process-step {
    position: absolute;
    bottom: 14px;
    right: 22px;
    /* top and height both have to go. The original sets height: 100% and
       top: -26px, and on an absolutely positioned box with a height, top
       beats bottom — which is why the number sat above the card. */
    top: auto;
    height: auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    text-align: right;
    line-height: 1;
}

/* The notches, drawn as bordered triangles either side of the old flag. */
.process-all .process-step::before,
.process-all .process-step::after {
    display: none;
}

.process-all .process-box .process-step p {
    margin: 0 0 -6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #b9c0d4;
}

.process-all .process-box .process-step h2 {
    margin: 0;
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
    color: #eceff7;
    transition: color .3s ease;
}

.process-all .process-box:hover .process-step h2 {
    color: #fbe3e5;
}

/* -------------------------------------------------------------------------
   The words.
   ------------------------------------------------------------------------- */

.process-all .process-box h5 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--elite-navy, #02135b);
    letter-spacing: .01em;
}

.process-all .process-box p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: #5b6478;
}

/* -------------------------------------------------------------------------
   Narrower screens: two across, then one.
   ------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .work-process > div:not(.title) {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .work-process > div:not(.title) {
        grid-template-columns: 1fr;
    }

    .process-all {
        padding: 54px 0 58px;
    }

    .process-all .title h2 {
        font-size: 30px;
    }
}