/*----------------------------------------*/
/*  HOME — QUALITY                         */
/*  Figma: Frame 544 473-11205             */
/*  A white card on the light page ground: */
/*  headline left, copy and CTA right.     */
/*----------------------------------------*/

.about-sec {
    position: relative;
    padding: clamp(90px, 8.3vw, 160px) 0 0;
    background-color: var(--rd-surface);
}

.about-sec,
.about-sec * {
    font-family: var(--rd-ff);
}

/* The lamp (ACF home_quality_img) — Figma layer 470-2840 sits past the right
   edge of the card with its middle on the card's top edge (top −218px on a
   461px frame). The upload is a 500×500 square with the lamp centred, so the
   box is pinned by its centre: card top (= section padding) + 12px − half.
   Capped at 360px so it clears the paragraph, and only shown where there is
   room beside the copy. */
.about-sec {
    --quality-lamp: clamp(240px, 18.75vw, 360px);
}

.about-sec .thumbnail-image {
    position: absolute;
    z-index: 2;
    top: calc(clamp(90px, 8.3vw, 160px) + 12px - var(--quality-lamp) / 2);
    right: 0;
    width: var(--quality-lamp);
    pointer-events: none;
}

.about-sec .thumbnail-image img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 1699px) {
    .about-sec .thumbnail-image {
        display: none;
    }
}


/*--------------------*/
/* - CARD             */
/*--------------------*/
/* 1546px card at 1920 plus the page gutter on either side */
.about-sec .container {
    --bs-gutter-x: 0;
    max-width: calc(1546px + var(--rd-gutter) * 2);
    width: 100%;
    padding: 0 var(--rd-gutter);
}

.about-sec .row {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 60px;
    margin: 0;
    padding: 80px clamp(40px, 6.25vw, 120px);
    border-radius: var(--rd-radius);
    background-color: var(--rd-white);
}

.about-sec .row > [class*="col-"] {
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
}

.about-sec .row > [class*="col-"]:first-child {
    flex: 0 1 489px;
    max-width: 489px;
    /* the markup centres this column on tablets; the design pins it left */
    justify-content: flex-start;
}

.about-sec .row > [class*="col-"]:last-child {
    flex: 1 1 739px;
    max-width: 739px;
}


/*--------------------*/
/* - HEADLINE         */
/*--------------------*/
.about-sec .block-title {
    max-width: none;
    margin: 0;
}

.about-sec .block-title .title {
    margin: 0;
    font-size: clamp(36px, 2.7vw, 52px);
    line-height: 1;
    font-weight: 300;
    color: var(--rd-txt-on-light);
    text-transform: none;
}

/* first line solid, the two that follow light */
.about-sec .block-title .title b,
.about-sec .block-title .title strong {
    font-weight: 600;
}


/*--------------------*/
/* - COPY             */
/*--------------------*/
.about-sec .text {
    max-width: 678px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--rd-txt-on-light-muted);
}

.about-sec .text p {
    margin: 0;
}

/* the 40px below the copy is set on the button instead */
.about-sec .empty-space {
    display: none;
}


/*--------------------*/
/* - CTA              */
/*--------------------*/
.about-sec .btn {
    gap: 16px;
    height: 54px;
    margin-top: 40px;
    padding: 0 20px;
    border: 1px solid var(--rd-accent);
    border-radius: var(--rd-radius);
    background-color: var(--rd-accent);
    font-size: 18px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--rd-txt-on-light);
    text-transform: none;
}

.about-sec .btn::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background: url("../../img/redesign/icons/arrow-cta-dark.svg") no-repeat center / contain;
}

@media (min-width: 1200px) {
    .about-sec .btn:hover {
        border-color: var(--rd-txt-on-light);
        background-color: var(--rd-txt-on-light);
        color: var(--rd-accent);
    }

    .about-sec .btn:hover::after {
        background-image: url("../../img/redesign/icons/arrow-cta-accent.svg");
    }
}


/*--------------------*/
/* - TABLET (<1200px) */
/*--------------------*/
@media (max-width: 1199px) {
    .about-sec {
        padding: 80px 0 0;
    }

    .about-sec .row {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
        padding: 60px 40px;
    }

    .about-sec .row > [class*="col-"]:first-child,
    .about-sec .row > [class*="col-"]:last-child {
        flex: 0 0 auto;
        max-width: none;
    }

    .about-sec .text {
        max-width: none;
    }
}


/*--------------------*/
/* - PHONE (<768px)   */
/*--------------------*/
@media (max-width: 767px) {
    .about-sec {
        padding: 60px 0 0;
    }

    .about-sec .row {
        gap: 24px;
        padding: 40px 20px;
    }

    .about-sec .btn {
        margin-top: 32px;
    }
}