/* ==========================================================================
   About page (design/reference/05-about.png). Tokens only (--ab-*).
   Shared pieces (.ab-section, .ab-card, .ab-features, .ab-stats,
   .ab-media-quote, .ab-testimonial) come from components.css.
   ========================================================================== */

/* ---------- Our story ---------- */
.about-story__copy p { font: var(--ab-body); color: var(--ab-text-soft); margin: 0 0 1rem; max-width: 60ch; }
.about-story__copy strong { color: var(--ab-dark); font-weight: 600; }
.about-story__copy + .ab-btn { margin-top: .75rem; }

.about-story__media { position: relative; }
.about-story__media > img { aspect-ratio: 16 / 11; box-shadow: var(--ab-shadow-lg); }
.about-story__tag {
    position: absolute; top: 20px; left: 20px; z-index: 1;
    display: flex; align-items: center; gap: .65rem; margin: 0;
    padding: 8px 16px 8px 8px; max-width: calc(100% - 40px);
    background: var(--ab-white); border-radius: var(--ab-radius-pill); box-shadow: var(--ab-shadow);
}
.about-story__tag strong { display: block; font: 700 .875rem/1.25 var(--ab-font); color: var(--ab-dark); }
.about-story__tag small { display: block; font: var(--ab-caption); color: var(--ab-text-muted); }
.about-story__quote-mark { display: block; font-size: 2.25rem; line-height: 1; color: var(--ab-primary); margin-bottom: .25rem; }

/* ---------- Why choose us ---------- */
.about-why__features .ab-feature { padding-block: 12px; }
.about-why__features .ab-feature__text { max-width: 26ch; }

/* ---------- Mission strip ---------- */
.about-mission__card {
    display: grid; gap: 20px 40px; align-items: center;
    padding: clamp(28px, 2rem + 2vw, 48px);
    background: linear-gradient(135deg, var(--ab-primary-50) 0%, var(--ab-white) 70%);
    border: 1px solid var(--ab-primary-100); border-radius: var(--ab-radius-lg);
}
.about-mission__head .ab-title { margin-bottom: 0; }
.about-mission__text { margin: 0; font: var(--ab-body); font-size: 1.0625rem; color: var(--ab-text-soft); }
@media (min-width: 992px) {
    .about-mission__card { grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* ---------- Services ---------- */
.about-services__head { position: sticky; top: calc(var(--ab-header-h) + 24px); }
.about-services__head .ab-btn-row { margin-top: .5rem; }
.about-services__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about-services__grid > li { display: flex; }
.about-services__card { width: 100%; }
.about-services__card .ab-card__body { padding: 16px; }
.about-services__card .ab-card__title { font-size: 1rem; }
.about-services__card .ab-icon-badge--overlap { margin-top: calc(var(--_s) / -2 - 16px); }
.about-services__more { margin-top: auto; padding-top: .5rem; font-size: .8125rem; }
.about-services__card picture { display: contents; }
@media (min-width: 768px) {
    .about-services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
    .about-services__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .about-services__head { position: static; }
}
@media (max-width: 420px) {
    .about-services__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Team preview ---------- */
.about-team__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.about-team__grid > li { display: flex; }
.about-team__card { width: 100%; }
.about-team__photo {
    aspect-ratio: 5 / 6; overflow: hidden;
    background: linear-gradient(160deg, var(--ab-primary-100), var(--ab-primary-50));
    display: grid; place-items: center;
}
.about-team__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.about-team__initials {
    display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
    background: var(--ab-white); color: var(--ab-primary);
    font: 700 2rem/1 var(--ab-font); letter-spacing: .02em; box-shadow: var(--ab-shadow);
}
.about-team__card .ab-card__body { padding: 16px 18px 18px; gap: .2rem; }
.about-team__card .ab-card__title { font-size: 1rem; }
.about-team__card .ab-card__meta { color: var(--ab-primary); font-weight: 600; }
.about-team__card .about-team__dept { margin: .15rem 0 0; font: var(--ab-caption); color: var(--ab-text-muted); }
@media (min-width: 768px) {
    .about-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .about-team__grid[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
    .about-team__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Numbers band ---------- */
.about-stats .ab-lead { margin-bottom: 0; }

/* ---------- Client feedback ---------- */
.about-feedback__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr);
}
.about-feedback__grid > li { display: flex; }
.about-feedback__grid .ab-testimonial { width: 100%; padding: 24px; }
.about-feedback__grid .ab-testimonial__quote { font-size: .9375rem; }
.about-feedback__mark { font-size: 2rem; line-height: 1; color: var(--ab-primary-light); }
.about-feedback__grid .ab-avatar i { font-size: 1.1rem; }
@media (min-width: 768px) {
    .about-feedback__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}