/* Scoped to the homepage About media; existing section columns and AOS stay intact. */
#about .whm-about-media { width: 100%; aspect-ratio: 1.47; }
#about .whm-about-media > img,
#about .whm-about-media > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--about-position, center); }
#about .whm-about-media > video { position: absolute; inset: 0; opacity: 0; transition: opacity .3s, transform .6s; border-radius: inherit; }
#about .whm-about-media > video.is-playing { opacity: 1; }
#about .whm-about-media:hover > video { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { #about .whm-about-media > video { transition: none; } }

/* Secondary summaries, contained within the existing content column. */
#about .stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#about .stat-item { min-width: 0; padding: 16px 0; }
#about .stat-item h3 { font-size: 24px; font-weight: 400; line-height: 1.25; }
#about .stat-item p { font-size: 15px; line-height: 1.5; }

/* Enlarge outward without moving the copy or consuming its gutter.
   Cap the extension at the available viewport margin on narrower desktops. */
@media (min-width: 1200px) {
    #about { --about-container-width: 1140px; }
    #about .whm-about-media {
        --about-extension: min(10%, max(0px, (100vw - var(--about-container-width)) / 2 - 24px));
        width: calc(100% + var(--about-extension));
        margin-left: calc(-1 * var(--about-extension));
    }
}
@media (min-width: 1400px) { #about { --about-container-width: 1320px; } }
@media (max-width: 991.98px) {
    #about .whm-about-media { margin-bottom: 32px; }
    #about .stats-row { max-width: 560px; }
}
@media (max-width: 575.98px) {
    #about .stats-row { gap: 10px; }
    #about .stat-item h3 { font-size: clamp(17px, 4.6vw, 20px); }
    #about .stat-item p { font-size: 14px; }
}
@media (max-width: 359.98px) {
    #about .stats-row { grid-template-columns: 1fr; gap: 0; }
}