/* About Us / Our Concierge (PAGE-PUB-011, TASK-039)
   A01 trust/editorial archetype. Portrait slots are optional: every section
   reads well with or without its image. Tokens only. */

.ab-kicker { margin: 0 0 var(--space-3); font-size: var(--type-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-accent-ochre-deep); }
.ab-hero { padding: var(--space-16) 0 var(--space-12); background: var(--color-bg-paper); }
.ab-hero h1 { font-family: var(--font-editorial); font-weight: 400; font-size: var(--type-display-hero); line-height: 1.04; color: var(--color-brand-navy); margin: 0 0 var(--space-5); max-width: 15ch; }
.ab-hero:not(.has-media) h1 { max-width: 18ch; }
.ab-lead { max-width: var(--container-text); margin: 0 0 var(--space-8); font-size: var(--type-body-large); line-height: 1.6; color: var(--color-text-primary); }
.ab-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.ab-hero.has-media .ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-12); align-items: center; }
.ab-portrait { margin: 0; }
.ab-portrait img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: var(--radius-3xl); }
.ab-portrait figcaption { margin-top: var(--space-3); font-size: var(--type-caption); color: var(--color-text-secondary); }

.ab-sec { padding: var(--space-16) 0; background: var(--color-surface-clean); }
.ab-sec h2, .ab-final h2 { font-family: var(--font-editorial); font-weight: 400; font-size: var(--type-display-section); line-height: 1.1; color: var(--color-brand-navy); margin: 0 0 var(--space-5); }
.ab-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-12); align-items: start; }
.ab-copy p, .ab-intro { margin: 0 0 var(--space-4); line-height: 1.7; color: var(--color-text-primary); }
.ab-intro { max-width: var(--container-text); font-size: var(--type-body-large); }
.ab-proof { margin: 0; font-size: var(--type-body-large); color: var(--color-text-secondary); }
.ab-proof strong { display: block; font-family: var(--font-editorial); font-weight: 400; font-size: 3.4rem; line-height: 1; color: var(--color-accent-ochre-deep); margin-bottom: var(--space-2); }

.ab-sand { background: var(--color-bg-sand); }
.ab-principles { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.ab-principles li { padding-top: var(--space-5); border-top: 2px solid var(--color-brand-navy); }
.ab-principles h3 { font-family: var(--font-editorial); font-weight: 400; font-size: var(--type-heading-editorial); line-height: 1.2; color: var(--color-brand-navy); margin: 0 0 var(--space-3); }
.ab-principles p { margin: 0; line-height: 1.65; color: var(--color-text-primary); }

.ab-navy { background: var(--color-brand-navy-deep); color: var(--color-text-inverse); }
.ab-navy h2 { color: var(--color-text-inverse); }
.ab-navy .ab-kicker { color: var(--color-accent-ochre-light); }
.ab-navy .ab-intro { color: rgba(255, 255, 255, 0.86); }
.ab-navy .ab-split:not(.has-media) { grid-template-columns: minmax(0, 1fr); max-width: 860px; margin-left: 0; }
.ab-roles { margin: var(--space-6) 0 var(--space-8); display: grid; gap: var(--space-4); }
.ab-roles > div { padding-top: var(--space-4); border-top: 1px solid rgba(255, 255, 255, 0.2); }
.ab-roles dt { font-weight: 600; margin-bottom: var(--space-1); }
.ab-roles dd { margin: 0; color: rgba(255, 255, 255, 0.78); line-height: 1.6; }

.ab-nots { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.ab-nots li { position: relative; padding-left: var(--space-6); color: var(--color-text-primary); }
.ab-nots li::before { content: ""; position: absolute; left: 0; top: .7em; width: 12px; height: 2px; background: var(--color-accent-ochre); }

.ab-final { padding: var(--space-16) 0; background: var(--color-bg-sand); }
.ab-final-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-8); }
.ab-final p { margin: 0; max-width: 560px; font-size: var(--type-body-large); color: var(--color-text-secondary); }

@media (max-width: 900px) {
    .ab-hero.has-media .ab-hero-grid, .ab-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .ab-principles { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .ab-hero { padding: var(--space-12) 0 var(--space-10); }
    .ab-sec, .ab-final { padding: var(--space-12) 0; }
    .ab-portrait img { max-height: 520px; }
}
@media (max-width: 620px) {
    .ab-actions .btn { width: 100%; justify-content: center; }
    .ab-proof strong { font-size: 2.6rem; }
}