/* ==========================================================================
   About page - first section
   Same layout as the Stratific Group "About Us" section (reference site):
   photo left, label + title + paragraphs right, two equal Bootstrap columns,
   vertically centred. Sizes match the reference; colours are FG Safety's.
   Vertical padding comes from the theme's .section-spacing.
   ========================================================================== */

.about-intro-ref-thumb img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 4;
    object-fit: cover;
}

/* "ABOUT US" with a small square bullet in front */
.about-intro-ref-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: var(--fg-navy);
}

.about-intro-ref-label::before {
    content: "";
    width: 6px;
    height: 6px;
    background-color: var(--fg-amber);
}

.about-intro-ref-title {
    margin-bottom: 20px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.23;
    color: var(--fg-navy);
}

@media only screen and (max-width: 767px) {
    .about-intro-ref-title {
        font-size: 28px;
    }
}

.about-intro-ref-content p {
    font-size: 16px;
    line-height: 1.7;
    color: #4c4c4c;
}

.about-intro-ref-content p + p {
    margin-top: 16px;
}

/* ==========================================================================
   About page - strategy-area (theme section) holding the About Us content.
   The theme's "Information" list slot is replaced by the second paragraph,
   which needs normal body-text sizing (the list slot is only 248px wide).
   ========================================================================== */
.strategy-content-wrapper .content .story-text {
    font-size: 16px;
    line-height: 1.75;
    color: var(--secondary);
}

/* the theme drops the gap when the columns stack on phones - keep the photo off the text */
@media only screen and (max-width: 767px) {
    .strategy-content-wrapper .thumb {
        margin-top: 30px;
    }
}