/* About page — light hero (about_bg.jpg fades to white on the left), AMR quality visual. */
.page-about .about-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: clamp(420px, 40vw, 600px);
    padding-block: clamp(2.5rem, 6vw, 5rem);
    background: var(--brand-bg);
    border-bottom: 1px solid var(--brand-border);
}
.page-about .about-hero-bg { position: absolute; inset: 0; z-index: -2; }
.page-about .about-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.page-about .about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(var(--brand-bg-rgb), .96) 0%, rgba(var(--brand-bg-rgb), .85) 45%, rgba(var(--brand-bg-rgb), 0) 66%);
}
.page-about .about-hero h1 { font-size: clamp(2.5rem, 4.4vw, 4rem); line-height: .95; color: var(--brand-text); margin-bottom: 1rem; }
.page-about .about-hero .lead { color: var(--brand-text-body); max-width: 46ch; margin-bottom: 1.75rem; }
.page-about .about-hero .breadcrumb { --bs-breadcrumb-item-active-color: var(--brand-text); margin-bottom: 1rem; }
.page-about .about-hero .breadcrumb a { color: var(--brand-text-secondary); }
.page-about .about-hero .breadcrumb a:hover { color: var(--brand-primary); }
@media (max-width: 991.98px) {
    .page-about .about-hero-bg img { object-position: 80% center; }
    .page-about .about-hero::before { background: rgba(var(--brand-bg-rgb), .88); }
}

.page-about .amr-visual { position: relative; max-width: 440px; margin-inline: auto; padding: 2rem; background: var(--brand-bg-alt); border-radius: var(--radius-sm); text-align: center; }
/* --brand-bg-alt on --brand-bg reads as two clearly separated tones in light
   mode (~1.05:1 is irrelevant there since it's a near-white-on-white lift, not
   the load-bearing edge). In dark mode the two darks (#26282C on #1C1D20)
   measure ~1.14:1 against each other — well under the 3:1 a UI component
   boundary needs (1.4.11) — so the panel loses its edge on a dark page.
   --brand-border-strong (#8A9099, a fixed non-flipping token) clears 3:1
   against both this panel (4.59:1) and the page behind it (5.24:1). */
[data-bs-theme=dark] .page-about .amr-visual { border: 1px solid var(--brand-border-strong); }
.page-about .amr-visual .amr-layers { width: 100%; max-width: 340px; }
.page-about .amr-visual .amr-seal { position: absolute; right: -1rem; bottom: -1.5rem; width: 140px; filter: drop-shadow(0 8px 18px rgba(var(--brand-ink-rgb), .25)); }
.page-about .amr-points { display: grid; gap: 1.5rem; }
.page-about .amr-points li { display: flex; gap: 1rem; align-items: flex-start; }
.page-about .amr-points .icon-badge { flex: none; margin-bottom: 0; }
.page-about .feature-card .feature-num { font-size: 1.5rem; color: var(--brand-text-secondary); }
.page-about .about-story-media img { width: 100%; }
@media (max-width: 575.98px) {
    .page-about .about-hero h1 { font-size: var(--text-4xl); }
    .page-about .amr-visual .amr-seal { width: 104px; right: .25rem; }
}