/* ---------------------------------------------------------------------------
   About: the section on the home page, and the page itself.

   The company's own account of itself is already written and sitting in
   WEB_PAGES - roughly five and a half thousand characters of it. The About page
   was loading that into a variable and then never printing it, so the page
   carried template copy instead. These styles are mostly about giving that real
   text a shape worth reading.
   --------------------------------------------------------------------------- */

/* ---- the section on the home page ---- */

.about-strip {
    background: var(--secondary-color);
    padding: 96px 0;
}

.about-strip .about-media {
    position: relative;
}

    .about-strip .about-media img {
        width: 100%;
        border-radius: 22px;
        display: block;
    }

    /* A quiet plate of the brand red behind the photograph, offset. Enough to
       stop the image floating, not enough to compete with it. */
    .about-strip .about-media::before {
        content: '';
        position: absolute;
        left: -14px;
        bottom: -14px;
        width: 62%;
        height: 58%;
        border-radius: 22px;
        background: var(--primary-color);
        opacity: .12;
        z-index: 0;
    }

    .about-strip .about-media figure {
        position: relative;
        z-index: 1;
        margin: 0;
    }

.about-eyebrow {
    display: flex;
    align-items: 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: #6f6b66;
    margin-bottom: 14px;
}

    .about-eyebrow .eyebrow-mark {
        width: 8px;
        height: 8px;
        background: var(--primary-color);
    }

.about-strip h2 {
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.03em;
    margin: 0 0 18px;
    text-wrap: balance;
}

    .about-strip h2 span {
        color: var(--primary-color);
    }

.about-strip .about-lead {
    font-size: 16px;
    line-height: 1.8;
    margin: 0 0 26px;
}

/* The five lines of work the company describes itself by. Named, not
   illustrated - a row of stock icons would say less than the words do. */
.about-domains {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

    .about-domains li {
        border: 1px solid rgba(0, 0, 0, .13);
        border-left: 3px solid var(--primary-color);
        border-radius: 4px;
        padding: 7px 14px;
        font-size: 13.5px;
        font-weight: 600;
        background: #fff;
    }

.about-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

    .about-actions .btn-outline {
        display: inline-block;
        border: 1px solid rgba(0, 0, 0, .28);
        border-radius: 40px;
        padding: 13px 30px;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        color: inherit;
        transition: background .18s ease, border-color .18s ease, color .18s ease;
    }

        .about-actions .btn-outline:hover,
        .about-actions .btn-outline:focus-visible {
            background: var(--accent-color);
            border-color: var(--accent-color);
            color: #fff;
        }

/* ---- the About page ---- */

.about-page {
    padding: 90px 0 60px;
}

.about-page .about-figure img {
    width: 100%;
    border-radius: 20px;
    display: block;
}

.about-page .about-headline {
    font-size: clamp(1.9rem, 3.6vw, 2.7rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -.03em;
    margin: 0 0 20px;
    text-wrap: balance;
}

/* The company's own text, from the admin panel. Everything below shapes markup
   somebody else wrote, so it stays forgiving: paragraphs, bold runs and the
   bulleted service lines are all it actually contains. */
.about-body {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-color);
    max-width: 74ch;
}

    .about-body p {
        margin: 0 0 18px;
    }

    /* The core services are written as paragraphs beginning with a bullet
       character rather than as a list. Pulling them out of the measure and
       giving them a rule turns them back into the list they describe. */
    .about-body p:has(> span),
    .about-body p strong,
    .about-body p b {
        color: var(--accent-color);
    }

    .about-body span {
        font-weight: 600;
        color: var(--accent-color);
    }

    .about-body br + br {
        display: none;
    }

.about-note {
    border-left: 3px solid var(--primary-color);
    background: var(--secondary-color);
    border-radius: 0 10px 10px 0;
    padding: 20px 24px;
    margin: 34px 0 0;
    max-width: 74ch;
}

    .about-note h3 {
        font-size: 15px;
        font-weight: 700;
        margin: 0 0 6px;
    }

    .about-note p {
        margin: 0;
        font-size: 14.5px;
        line-height: 1.75;
    }

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

.about-strip a:focus-visible,
.about-page a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

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

@media (prefers-reduced-motion: reduce) {
    .about-actions .btn-outline {
        transition: none;
    }
}

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

@media (max-width: 991px) {
    .about-strip {
        padding: 66px 0;
    }

        .about-strip .about-media {
            margin-bottom: 34px;
        }

    .about-page {
        padding: 60px 0 40px;
    }

        .about-page .about-figure {
            margin-bottom: 30px;
        }
}

@media (max-width: 575px) {
    .about-actions .btn-outline {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* ---------------------------------------------------------------------------
   The counter band.

   Centred, on the dark ground, sitting between the career board and the About
   section. Four numbers counted from the database on every load - the template's
   four were placeholders, and a claim nobody can check is worse than no claim.
   --------------------------------------------------------------------------- */

.site-counter {
    background: #1b1a19;
    padding: 54px 0;
    border-top: 3px solid var(--primary-color);
}

.counter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.counter-cell {
    flex: 1 1 200px;
    max-width: 300px;
    text-align: center;
    padding: 6px 24px;
    /* A hairline between, not around: the four read as one row of figures
       rather than four separate boxes. */
    border-left: 1px solid rgba(255, 255, 255, .13);
}

    .counter-cell:first-child {
        border-left: 0;
    }

.counter-value {
    display: block;
    font-size: clamp(2.2rem, 4.6vw, 3.1rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.035em;
    color: #fff;
    font-variant-numeric: tabular-nums;
    margin-bottom: 8px;
}

.counter-label {
    display: block;
    font-family: "IBM Plex Mono", ui-monospace, Consolas, monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1.55;
    color: rgba(255, 255, 255, .6);
}

@media (max-width: 767px) {
    .site-counter {
        padding: 38px 0;
    }

    .counter-cell {
        flex: 1 1 50%;
        max-width: 50%;
        padding: 16px 12px;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .13);
    }

        /* Two across on a phone, so the top pair carries no rule. */
        .counter-cell:nth-child(1),
        .counter-cell:nth-child(2) {
            border-top: 0;
        }
}