/* ============================================
   YEV - about page styles (externalized v6.01)
   ============================================ */

.about-portrait {
            position: relative;
            max-width: 320px;
            width: 100%;
            margin: 0 auto 40px;
        }
        .about-portrait::before {
            content: '';
            position: absolute;
            inset: 14px -14px -14px 14px;
            background: linear-gradient(135deg, var(--yev-gold) 0%, var(--yev-gold-deep) 100%);
            border-radius: 22px;
            z-index: 0;
        }
        .about-portrait img {
            width: 100%;
            border-radius: 22px;
            position: relative;
            z-index: 1;
            display: block;
            box-shadow: 0 16px 40px rgba(33,37,107,0.18);
        }
        .credentials-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
            margin-top: 30px;
        }
        /* v6.15 flip: credentials-grid base is now 1fr (mobile); the multi-
           column desktop grid is restored at min-width:821 near the end of
           this file, alongside the rest of the desktop credential layout. */
        .credential {
            background: white;
            padding: 22px 20px;
            border-radius: 14px;
            border: 1px solid rgba(33,37,107,0.08);
            text-align: center;
            width: 100%;
        }
        .credential strong {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 8px;
            color: var(--indigo);
            font-size: 0.9375rem;
            margin-bottom: 4px;
        }
        .credential strong .yev-ico-inline { color: var(--yev-royal); flex-shrink: 0; margin-top: 1px; }
        .credential span { font-size: 0.8125rem; color: #666; }
        .about-stats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin: 28px 0 32px;
        }
        .about-stat {
            background: var(--yev-navy);
            border-radius: 12px;
            padding: 16px 10px;
            color: #fff;
            background: linear-gradient(135deg, var(--indigo) 0%, #2a3080 100%);
            color: white;
            padding: 20px 16px;
            border-radius: 14px;
            text-align: center;
        }
        .about-stat strong {
            display: block;
            font-size: 1.75rem;
            font-weight: 800;
            color: var(--yev-gold);
            line-height: 1;
            margin-bottom: 6px;
        }
        .about-stat span { font-size: 0.75rem; opacity: 0.85; line-height: 1.3; }
        /* v6.15 flip: about-stats base is now 2-col (mobile); 4-col desktop is
           restored at min-width:601 below. */

/* v6.04.1: About hero title on one line (desktop), natural wrap on mobile */
@media (min-width: 1025px) {
    .ab-hero-title { white-space: nowrap; }
}

/* v6.15 flip: mobile-first base. Story and credential headings are centered
   on mobile (the base); credential grid is single-column and full-width.
   Desktop layout is restored in the min-width blocks below. */
.ab-story-title, .ab-story-text { text-align: center; }
.ab-cred-title { text-align: center; }
.credentials-grid { justify-items: stretch; }

/* Desktop: about-stats returns to 4 columns. */
@media (min-width: 601px) {
    .about-stats { grid-template-columns: repeat(4, 1fr); }
}

/* Desktop: story/credential headings left-align; credential grid becomes a
   3-column left-aligned layout. (Boundary preserved at 821 = old 820+1.) */
@media (min-width: 821px) {
    .ab-story-title, .ab-story-text { text-align: left; }
    .ab-cred-title { text-align: left; }
    .credentials-grid { grid-template-columns: repeat(3, 1fr); justify-items: initial; }
    .credential { text-align: left; width: auto; }
    .credential strong { justify-content: flex-start; }
}

/* v6.16: landscape variant for the About studio full shot */
.about-portrait--wide { max-width: 480px; }