/* ============================================================
   About Us - page-level CSS (T9)
   Figma: desktop 1407:87798, mobile 1407:88249. No tablet frame: 768-1024
   follows the mobile frame.

   The team preview and the awards band are built here (no other template
   uses them); everything else is a shared class that carries its own look.
   Every neighbour differs in background, so each section pads
   --space-section-alt (80 / 48), per the survey; the full-bleed classes pad
   themselves.
   ============================================================ */

/* ── Vertical rhythm ──────────────────────────────────────── */
.about__section--story,
.about__section--team,
.about__section--awards,
.about__section--why,
.about__section--values,
.about__section--insights {
    padding-top: var(--space-section-alt);
    padding-bottom: var(--space-section-alt);
}
/* The persona cards and the "Trusted by" strip share one Primary Accent band: the gallery
   class reserves the photos' pop-out room, so the frame's 80 above comes to 59 (as Home) */
.about__section--personas { padding-top: 59px; padding-bottom: 0; }
.about__section--logos {
    background: var(--color-surface-tint);
    padding-top: 0;
    padding-bottom: var(--space-section-alt);
}
@media (max-width: 1024px) {
    .about__section--personas { padding-top: var(--space-section-alt); }
}

/* ── Meet the team (1407:87856, mobile 1407:88308) ────────── */
.about__section--team {
    background: var(--color-surface-tint);   /* "Primary Accent" */
    padding-left: max(var(--space-gutter), calc((100% - var(--layout-content-max-w)) / 2));
    padding-right: 0;                         /* the row bleeds off the right edge */
    overflow: hidden;
}
.about-team__inner {
    display: grid;
    grid-template-columns: minmax(0, 530px) minmax(0, 1fr);
    column-gap: 29px;
    align-items: center;
}
.about-team__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

@media (max-width: 767px) {
   .about-team__copy {
    padding-right: var(--space-gutter);
   }
}
.about-team__eyebrow { margin: 0; }
.about-team__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-secondary);
    text-transform: capitalize;
}
.about-team__body {
    margin: 0 0 16px;   /* 8 gap + 16 = the frame's 24 to the button */
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    color: var(--color-secondary);
}

.about-team__track { min-width: 0; }
.about-team__swiper {
    overflow: hidden;
    /* room above the cards for the cut-outs that break out of them */
    padding-top: 48px;
    margin-top: -48px;
}
.about-team__swiper:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}
.about-team__list { margin: 0; padding: 0; list-style: none; align-items: stretch; }   /* every card as tall as the tallest: a longer role runs the whole row down */
.about-team__slide { display: flex; width: 209px; height: auto; }   /* the card fills the slide, its panel takes the spare height */
.about-team__slide .team-card { width: 209px; }
/* The PNG exports differ by a few px in height (the pop-out of the hair), so each is bottom-aligned in a media box
   as tall as the tallest: the coloured boxes and the captions then start level across the row */
.about-team__slide .team-card--png .team-card__media {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 180px;
}

/* The progress bar: 159 x 3, the track a pale teal, the fill Secondary (desktop only) */
.about-team__progress,
.about-team__progress.swiper-pagination-progressbar {   /* beat Swiper's full-width absolute bar */
    position: relative;
    left: auto;
    top: auto;
    width: 159px;
    height: 3px;
    margin-top: 40px;
    border-radius: 99px;
    background: var(--color-teal-200);   /* the frame's #9cc5c7, nearest declared tone (flagged) */
    overflow: hidden;
}
.about-team__progress .swiper-pagination-progressbar-fill {
    background: var(--color-secondary);
    border-radius: 99px;
}

/* The bar is filled by hand (about-us.js, the loop repeats the cards): ease it along with the slide */
.about-team__progress .swiper-pagination-progressbar-fill { transition: transform 600ms ease; }
@media (prefers-reduced-motion: reduce) {
    .about-team__progress .swiper-pagination-progressbar-fill { transition: none; }
}

/* Prev / next arrows: desktop only, in a row above the cards, at the right of the content (Alex, 23 Oct).
   The row bleeds off the viewport's right edge, so the arrows are pulled in to where the content ends. */
.about-team__controls { display: none; }
@media (min-width: 1025px) {
    .about-team__controls {
        display: flex;
        justify-content: flex-end;
        gap: 24px;
        margin-right: max(var(--space-gutter), calc((100vw - var(--layout-content-max-w)) / 2));
        margin-bottom: 8px;
    }
    .about-team__swiper { margin-top: 0; }   /* the arrows sit above the room for the cut-outs, not over it */
}
.about-team__prev,
.about-team__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text);
    cursor: pointer;
}
.about-team__prev svg,
.about-team__next svg { width: 20px; height: 20px; }
.about-team__prev svg { transform: rotate(180deg); }
.about-team__prev:hover,
.about-team__next:hover { color: var(--color-primary); }
.about-team__prev:focus-visible,
.about-team__next:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* ── Awards and recognition (1407:87920, mobile 1407:88365) ─ */
.about__section--awards {
    background: var(--gradient-dark-reverse);   /* "gradient 1" */
    color: var(--color-text-inverse);
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
}
.about-awards__inner {
    display: grid;
    grid-template-columns:
        [page-start] minmax(var(--space-gutter), 1fr)
        [copy-start] minmax(0, calc(var(--layout-content-max-w) * 0.5208))
        [gap] minmax(0, calc(var(--layout-content-max-w) * 0.0640))
        [cards-start] minmax(0, calc(var(--layout-content-max-w) * 0.4153))
        [content-end] minmax(var(--space-gutter), 1fr) [page-end];
    column-gap: 0;
    row-gap: 40px;
    align-items: start;
}
.about-awards__copy {
    grid-column: copy-start / gap;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.about-awards__eyebrow { margin: 0; color: var(--color-accent); }   /* Tertiary */
.about-awards__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    color: var(--color-text-inverse);
    text-transform: capitalize;
}
.about-awards__body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-body);
    line-height: var(--leading-body);
}
.about-awards__media {
    grid-column: page-start / gap;   /* the photo bleeds off the left edge */
    grid-row: 2;
}
.about-awards__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 745 / 455;
    object-fit: cover;
    border-radius: 0 12px 12px 0;
}
.about-awards__list {
    grid-column: cards-start / content-end;
    grid-row: 1 / 3;
    align-self: center;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.about-awards__card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: 12px;
    background: var(--color-card-navy);
}
.about-awards__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 128px;
    width: 128px;
    height: 86px;
}
.about-awards__logo img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
.about-awards__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.about-awards__award {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-body-small);
    line-height: var(--leading-body-small);
}
.about-awards__result {
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
}

/* ── Tablet and mobile ────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Team: the copy first, then a centred track; the active card full size, its
       neighbours smaller and faded, peeking in. No progress bar. */
    .about__section--team { padding-left: var(--space-gutter); }
    .about-team__inner { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
    .about-team__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .about-team__body {
        font-size: var(--text-mobile-body-small);
        line-height: 1.4;
    }
    /* Edge to edge: back over the section's left padding. The section has no right padding (the desktop row bleeds off
       that side), so no right margin: a negative one pushed the track a gutter past the screen and the centred card
       half a gutter right of centre. */
    .about-team__track { margin-left: calc(var(--space-gutter) * -1); }
    .about-team__progress { display: none; }
    .about-team__slide .team-card {
        transform: scale(0.866);
        transform-origin: center bottom;
        opacity: 0.4;
        transition: transform 300ms ease, opacity 300ms ease;
    }
    .about-team__slide.swiper-slide-active .team-card { transform: none; opacity: 1; }
    /* The mobile frame centres the caption: role Mobile/Body, name Mobile/H3 (the neighbours scale down with the card) */
    .about-team__slide .team-card__panel { text-align: center; }
    .about-team__slide .team-card__role {
        font-size: var(--text-mobile-body);
        line-height: var(--leading-mobile-body);
    }
    .about-team__slide .team-card__name {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }

    /* Awards: the photo first, then the copy, then the cards stacked and centred */
    .about-awards__inner {
        grid-template-columns:
            [page-start] var(--space-gutter)
            [copy-start] minmax(0, 1fr)
            [content-end] var(--space-gutter) [page-end];
        row-gap: 20px;
    }
    .about-awards__media { grid-column: page-start / content-end; grid-row: 1;  }
    .about-awards__image { aspect-ratio: 16 / 9; border-radius: 0 16px 16px 0; }
    .about-awards__copy { grid-column: copy-start / content-end; grid-row: 2; }
    .about-awards__list { grid-column: copy-start / content-end; grid-row: 3; align-self: start; }
    .about-awards__heading {
        font-size: var(--text-mobile-h2);
        line-height: var(--leading-mobile-h2);
    }
    .about-awards__body {
        font-size: var(--text-mobile-body-small);
        line-height: 1.4;
    }
    .about-awards__card {
        flex-direction: column;
        justify-content: center;
        gap: 12px;
        padding: 20px;
        text-align: center;
    }
    .about-awards__logo { flex-basis: auto; width: 144px; height: 56px; }
    .about-awards__text { align-items: center; }
    .about-awards__result {
        font-size: var(--text-mobile-h3);
        line-height: var(--leading-mobile-h3);
    }
}

/* ── Wide screens: over 1800px the awards photo stops bleeding to the page
   edge (the page-start column grows with the screen) and sits in the copy
   column at 4/3, rounded all round: the same snap as the why-choose photo ── */
@media (min-width: 1801px) {
    .about-awards__media { grid-column: copy-start / gap; }
    .about-awards__image {
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-team__slide .team-card { transition: none; }
}