/* ==========================================================
   ABOUT PAGE — EXACT PHOTO LAYOUT
   Direct replacement for all previous About page CSS.
   ========================================================== */

body .about-page-banner {
    width: 100%;
    padding: 34px 0 35px;
    background: #0b50c8;
    color: #ffffff;
}

body .about-page-banner-inner {
    display: block;
}

body .about-page-banner h1 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.2;
}

body .about-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    color: #ffffff;
    font-size: 14px;
}

body .about-breadcrumb a {
    color: #ffffff;
    text-decoration: none;
}

/* Centred text section */
body .about-text-row {
    width: 100%;
    padding: 82px 0 78px;
    background: #ffffff;
}

body .about-text-inner {
    max-width: 920px;
    margin-inline: auto;
    text-align: center;
}

body .about-text-inner h2 {
    margin: 0 0 26px;
    color: #004c8e;
    font-size: 34px;
    font-weight: 500;
    line-height: 1.25;
    text-transform: uppercase;
}

body .about-main-copy {
    color: #30363b;
    font-size: 18px;
    line-height: 1.8;
}

body .about-main-copy p {
    margin: 0 0 20px;
}

/* Images section */
body .about-images-row {
    width: 100%;
    padding: 72px 0 88px;
    background: #f7f7f7;
}

body .about-images-inner {
    max-width: 920px;
    margin-inline: auto;
}

/* Three equal images in one row */
body .about-small-images {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    margin: 0 0 58px;
}

body .about-small-image {
    margin: 0;
    overflow: hidden;
    background: #ffffff;
}

body .about-small-image img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* One large image below */
body .about-large-image {
    width: 100%;
    overflow: hidden;
    background: #ffffff;
}

body .about-large-image img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 620px;
    object-fit: cover;
}

body .about-image-empty,
body .about-large-empty {
    display: grid;
    place-items: center;
    background: #e4eaee;
    color: #596672;
    text-align: center;
}

body .about-image-empty {
    min-height: 220px;
}

body .about-large-empty {
    min-height: 500px;
}

/* Tablet */
@media (max-width: 900px) {
    body .about-text-inner,
    body .about-images-inner {
        max-width: 760px;
    }

    body .about-text-row {
        padding-block: 68px;
    }

    body .about-images-row {
        padding-block: 62px 72px;
    }
}

/* Mobile */
@media (max-width: 680px) {
    body .about-page-banner {
        padding-block: 28px;
    }

    body .about-page-banner h1 {
        font-size: 28px;
    }

    body .about-text-row {
        padding-block: 54px;
    }

    body .about-text-inner h2 {
        font-size: 28px;
    }

    body .about-main-copy {
        font-size: 17px;
    }

    body .about-small-images {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 36px;
    }

    body .about-small-image img {
        aspect-ratio: 16 / 10;
    }

    body .about-images-row {
        padding-block: 52px 62px;
    }
}