/* About Us (/about-us).
   Self-contained, the same arrangement guides.css follows: site.css supplies
   the tokens, the wrap and the section rhythm, and nothing of home.css is
   needed here, so home.css is not loaded on this page.

   Legacy's version of this page leaned on two fixed-attachment photo banners
   and a pair of Unsplash split images. Neither is reproduced: the bands below
   are colour and type, which cost no request and cannot 404. */

/* --- page band ---
   Same shape as the guide directory's band so the two static pages open the
   same way: mark, script kicker, heading, lead — then the figures. */

.gqv2 .gq-ab-band {
    background: var(--gq-sand);
    border-bottom: 1px solid var(--gq-line);
    padding: 46px 0;
}

.gqv2 .gq-ab-band-lead {
    display: flex;
    align-items: center;
    gap: 20px;
}

.gqv2 .gq-ab-band-mark {
    width: 74px;
    height: 74px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 34px;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, var(--gq-navy), var(--gq-blue-dark));
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45),
                0 18px 34px -12px rgba(18, 59, 99, .5),
                inset 0 2px 0 rgba(255, 255, 255, .22);
}

.gqv2 .gq-ab-band-lead .gqv2-script {
    font-size: 26px;
    line-height: 1;
}

.gqv2 .gq-ab-band-lead h1 {
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin: 6px 0 8px;
}

.gqv2 .gq-ab-band-lead p {
    color: var(--gq-slate);
    font-size: 16px;
    line-height: 1.6;
    max-width: 720px;
}

/* --- the three figures ---
   A row on a desktop, a wrapping row on a phone. They are counted rather than
   written, so the widths are set by content and not by a fixed column. */

.gqv2 .gq-ab-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
}

.gqv2 .gq-ab-figures li {
    display: flex;
    align-items: baseline;
    gap: 9px;
    padding: 12px 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--gq-line);
}

.gqv2 .gq-ab-figures i {
    color: var(--gq-blue);
    font-size: 14px;
    align-self: center;
}

.gqv2 .gq-ab-figures b {
    font-family: var(--gq-head-font);
    font-size: 22px;
    font-weight: 700;
    color: var(--gq-navy);
    line-height: 1;
}

.gqv2 .gq-ab-figures span {
    font-size: 13.5px;
    color: var(--gq-slate);
}

/* --- shared section furniture --- */

.gqv2 .gq-ab-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gq-blue);
    margin-bottom: 10px;
}

.gqv2 .gq-ab-kicker.light {
    color: var(--gq-sky);
}

.gqv2 .gq-ab-head {
    max-width: 720px;
    margin: 0 auto 40px;
    text-align: center;
}

.gqv2 .gq-ab-head p {
    color: var(--gq-mist);
    font-size: 16px;
    line-height: 1.65;
}

/* --- split sections ---
   Text on one side, a supporting panel on the other. `.reverse` puts the panel
   first on a desktop and changes nothing on a phone, where both stack in
   source order and the text should always lead. */

.gqv2 .gq-ab-split {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 56px;
    align-items: center;
}

.gqv2 .gq-ab-split.reverse .gq-ab-split-text {
    order: 2;
}

.gqv2 .gq-ab-split-text p {
    color: var(--gq-mist);
    font-size: 15.5px;
    line-height: 1.75;
    margin: 0 0 14px;
}

.gqv2 .gq-ab-split-text .gq-ab-lead {
    font-size: 17px;
    color: var(--gq-slate);
}

/* --- the mission principles --- */

.gqv2 .gq-ab-principles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.gqv2 .gq-ab-principles li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 22px 24px;
    border-radius: var(--gq-radius);
    background: #fff;
    border: 1px solid var(--gq-line);
    box-shadow: var(--gq-shadow-sm);
}

.gqv2 .gq-ab-principles i {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 16px;
    color: var(--gq-blue);
    background: var(--gq-blue-tint);
}

.gqv2 .gq-ab-principles b {
    display: block;
    font-family: var(--gq-head-font);
    font-size: 16px;
    color: var(--gq-navy);
    margin-bottom: 4px;
}

.gqv2 .gq-ab-principles span {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--gq-mist);
}

/* --- the navy banner ---
   Legacy's full-width photo band. The gradient reads as deliberate at any
   width, which a cropped photograph does not. */

.gqv2 .gq-ab-banner {
    background: linear-gradient(135deg, var(--gq-navy), var(--gq-blue-dark));
    color: #fff;
    padding: 76px 0;
    text-align: center;
}

.gqv2 .gq-ab-banner h2 {
    color: #fff;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    margin: 0 0 16px;
}

.gqv2 .gq-ab-banner p {
    max-width: 860px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .88);
}

/* --- how it works --- */

.gqv2 .gq-ab-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

.gqv2 .gq-ab-steps li {
    position: relative;
    padding: 30px 26px 28px;
    border-radius: var(--gq-radius);
    background: #fff;
    border: 1px solid var(--gq-line);
    box-shadow: var(--gq-shadow-sm);
}

/* The number sits behind the card's own content as a watermark, so the step
   order is readable at a glance without competing with the heading. */
.gqv2 .gq-ab-step-n {
    position: absolute;
    top: 14px;
    right: 18px;
    font-family: var(--gq-head-font);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--gq-navy);
    opacity: .08;
}

.gqv2 .gq-ab-steps i {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 17px;
    color: #fff;
    background: linear-gradient(135deg, var(--gq-blue), var(--gq-blue-dark));
    margin-bottom: 16px;
}

.gqv2 .gq-ab-steps b {
    display: block;
    font-family: var(--gq-head-font);
    font-size: 18px;
    color: var(--gq-navy);
    margin-bottom: 8px;
}

.gqv2 .gq-ab-steps p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gq-mist);
}

/* --- ways to search --- */

.gqv2 .gq-ab-ways {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 24px;
}

.gqv2 .gq-ab-way {
    display: block;
    padding: 18px 20px;
    border-radius: var(--gq-radius);
    border: 1px solid var(--gq-line);
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.gqv2 .gq-ab-way:hover {
    transform: translateY(-2px);
    border-color: var(--gq-blue);
    box-shadow: var(--gq-shadow-sm);
}

.gqv2 .gq-ab-way i {
    color: var(--gq-blue);
    font-size: 15px;
}

.gqv2 .gq-ab-way b {
    display: block;
    font-family: var(--gq-head-font);
    font-size: 15.5px;
    color: var(--gq-navy);
    margin: 10px 0 5px;
}

.gqv2 .gq-ab-way span {
    display: block;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gq-mist);
}

/* --- the four listing types ---
   --tc is the type's own colour, straight from App\Reference\ListingTypes, so
   these read as the same four things the homepage cards are. */

.gqv2 .gq-ab-types {
    padding: 28px;
    border-radius: var(--gq-radius);
    background: var(--gq-cloud);
    border: 1px solid var(--gq-line);
}

.gqv2 .gq-ab-types-head {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--gq-slate);
    margin-bottom: 16px;
}

.gqv2 .gq-ab-type {
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid transparent;
    transition: transform .18s ease, border-color .18s ease;
}

.gqv2 .gq-ab-type + .gq-ab-type {
    margin-top: 10px;
}

.gqv2 .gq-ab-type:hover {
    transform: translateX(3px);
    border-color: var(--tc, var(--gq-blue));
}

.gqv2 .gq-ab-type i {
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    font-size: 16px;
    color: #fff;
    background: var(--tc, var(--gq-blue));
}

.gqv2 .gq-ab-type b {
    font-family: var(--gq-head-font);
    font-size: 15.5px;
    color: var(--gq-navy);
}

.gqv2 .gq-ab-type span {
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--gq-mist);
}

/* --- trust grid --- */

.gqv2 .gq-ab-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.gqv2 .gq-ab-trust-item {
    text-align: center;
    padding: 34px 24px;
    border-radius: var(--gq-radius);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(255, 255, 255, .9);
}

.gqv2 .gq-ab-trust-item i {
    font-size: 30px;
    color: var(--gq-blue);
    margin-bottom: 18px;
}

.gqv2 .gq-ab-trust-item b {
    display: block;
    font-family: var(--gq-head-font);
    font-size: 17px;
    color: var(--gq-navy);
    margin-bottom: 9px;
}

.gqv2 .gq-ab-trust-item p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--gq-slate);
}

/* ==================== RESPONSIVE ==================== */

@media (max-width: 1080px) {
    .gqv2 .gq-ab-steps,
    .gqv2 .gq-ab-trust {
        grid-template-columns: 1fr 1fr;
    }

    .gqv2 .gq-ab-split {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    /* Both stack in source order, so the text leads either way. */
    .gqv2 .gq-ab-split.reverse .gq-ab-split-text {
        order: 0;
    }
}

@media (max-width: 720px) {
    .gqv2 .gq-ab-band {
        padding: 34px 0;
    }

    .gqv2 .gq-ab-band-lead {
        gap: 16px;
    }

    .gqv2 .gq-ab-band-mark {
        width: 56px;
        height: 56px;
        border-radius: 26px;
        font-size: 22px;
    }

    .gqv2 .gq-ab-figures li {
        padding: 10px 16px;
    }

    .gqv2 .gq-ab-steps,
    .gqv2 .gq-ab-trust,
    .gqv2 .gq-ab-ways {
        grid-template-columns: 1fr;
    }

    .gqv2 .gq-ab-banner {
        padding: 54px 0;
    }
}