/* ---------------------------------------------------------------------------
   What we do.

   This replaced a "projects" section whose four cards were the same card four
   times - the same caption and the same headline over four stock photographs,
   all of it about cybersecurity, none of it about this company.

   Six cards now, one per line of business, each in its own colour. No
   photographs: there are no project photographs to show, and a stock image
   standing in for one is how the old section went wrong.
   --------------------------------------------------------------------------- */

.what-we-do {
    --line: #e7e5e1;
    --muted: #6f6b66;
    --ink: #1b1a19;
    padding: 90px 0;
    background: #f6f5f3;
}

/* ---- heading ---- */

/* The eyebrow centres itself; without this the h2 under it sat hard left and
   the two read as belonging to different sections. */
.what-we-do .section-title {
    text-align: center;
    margin-bottom: 34px;
}


.what-we-do .wwd-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 14px;
}

    .what-we-do .wwd-eyebrow .eyebrow-mark {
        width: 8px;
        height: 8px;
        background: var(--primary-color, #eb1c24);
    }

/* ---- the six ---- */

.what-we-do .wwd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 6px;
}

.what-we-do .wwd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 28px 26px 24px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

    .what-we-do .wwd-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--accent, #eb1c24);
        transition: height .2s ease;
    }

    .what-we-do .wwd-card:hover,
    .what-we-do .wwd-card:focus-visible {
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(20, 19, 18, .10);
        border-color: color-mix(in srgb, var(--accent, #eb1c24) 45%, var(--line));
    }

        .what-we-do .wwd-card:hover::before,
        .what-we-do .wwd-card:focus-visible::before {
            height: 6px;
        }

.what-we-do .wwd-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-bottom: 18px;
    border-radius: 13px;
    font-size: 19px;
    /* Tinted, not solid. Six saturated blocks in one grid fight each other. */
    background: color-mix(in srgb, var(--accent, #eb1c24) 12%, transparent);
    color: var(--accent, #eb1c24);
    border: 1px solid color-mix(in srgb, var(--accent, #eb1c24) 22%, transparent);
}

.what-we-do .wwd-card h3 {
    margin: 0 0 10px;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--ink);
}

.what-we-do .wwd-card p {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--muted);
}

.what-we-do .wwd-go {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent, #eb1c24);
}

    .what-we-do .wwd-go i {
        font-size: 11px;
        transition: transform .2s ease;
    }

    .what-we-do .wwd-card:hover .wwd-go i {
        transform: translateX(3px);
    }

/* ---- counted, not typed ---- */

.what-we-do .wwd-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px 30px;
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
    text-align: center;
}

    .what-we-do .wwd-facts b {
        display: block;
        font-size: clamp(1.8rem, 4vw, 2.4rem);
        font-weight: 800;
        letter-spacing: -.02em;
        line-height: 1.1;
        color: var(--primary-color, #eb1c24);
    }

    .what-we-do .wwd-facts span {
        display: block;
        margin-top: 4px;
        font-size: 13px;
        color: var(--muted);
    }

/* ---- browsers with no color-mix ---- */

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .what-we-do .wwd-mark {
        background: #f2f1ef;
        border-color: #e7e5e1;
    }

    .what-we-do .wwd-card:hover {
        border-color: #cfccc7;
    }
}

/* ---- keyboard ---- */

.what-we-do .wwd-card:focus-visible {
    outline: 2px solid var(--accent, #eb1c24);
    outline-offset: 3px;
}

/* ---- motion ---- */

@media (prefers-reduced-motion: reduce) {
    .what-we-do .wwd-card,
    .what-we-do .wwd-card::before,
    .what-we-do .wwd-go i {
        transition: none;
    }

        .what-we-do .wwd-card:hover {
            transform: none;
        }
}

/* ---- narrow screens ---- */

@media (max-width: 575px) {
    .what-we-do {
        padding: 60px 0;
    }

    .what-we-do .wwd-grid {
        grid-template-columns: 1fr;
    }

    .what-we-do .wwd-card {
        padding: 24px 20px 20px;
    }
}