/*
 * About Us page (Phase D3) — Expertise/What We Do grid, the Approach numbered-step list,
 * non-linked History/Foundation/ESG teaser cards, and the extended CTA/Contact channel
 * list. The hero, header, footer, typography, spacing and button styles are reused as-is
 * from base.css, components.css, layout.css and product-pages.css (.page-hero,
 * .category-hero-art, .contact, .contact-detail) — nothing here duplicates those selectors.
 */

.about-who{
max-width:640px
}
.about-who p{
margin-top:18px;
color:var(--color-muted)
}

.about-expertise{
background:#fff
}
.about-expertise>p:not(.eyebrow){
max-width:640px;
margin-top:16px;
color:var(--color-muted)
}
.expertise-grid{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:12px;
margin-top:var(--space-5)
}
.expertise-grid article{
grid-column:span 2;
padding:26px;
border:1px solid var(--color-line)
}
.expertise-grid article:nth-child(4){
grid-column:2 / span 2
}
.expertise-grid article:nth-child(5){
grid-column:4 / span 2
}
.expertise-grid h3{
font-size:18px
}
.expertise-grid p{
margin-top:10px;
color:var(--color-muted);
font-size:13px
}
.about-expertise .actions{
margin-top:var(--space-4)
}

.about-approach{
background:var(--color-primary);
color:#fff
}
.about-approach .eyebrow{
color:#9ed5d3
}
.about-approach>p:not(.eyebrow){
max-width:520px;
margin-top:20px;
color:#c8d9d7
}
.approach-steps{
max-width:640px;
margin-top:var(--space-4);
border-top:1px solid rgba(255,255,255,.2)
}
.approach-step{
padding:20px 0;
border-bottom:1px solid rgba(255,255,255,.2)
}
.approach-step .step-number{
margin-right:20px;
color:#83c6c4;
font:10px var(--font-mono)
}
.approach-step strong{
color:#fff;
font:600 13px var(--font-sans)
}
.approach-step p{
margin-top:8px;
color:#b5c7c5;
font-size:13px
}

.about-teasers{
background:var(--color-mist)
}
.teaser-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px
}
.teaser-card{
padding:26px;
background:#fff
}
.teaser-card h2{
margin-top:14px;
font-size:24px;
letter-spacing:-1px
}
.teaser-card p{
margin-top:12px;
color:var(--color-muted);
font-size:13px
}

.contact-channels{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px 24px;
margin-top:35px;
color:#afc3c0;
font:11px var(--font-mono)
}
.contact-channels a{
color:#afc3c0;
border-bottom:1px solid rgba(255,255,255,.35);
padding-bottom:2px
}
.contact-channels a:hover{
color:#fff
}
.contact-address{
margin-top:18px;
color:#afc3c0;
font:11px var(--font-mono)
}

@media (max-width:780px){
.expertise-grid,.teaser-grid{
grid-template-columns:1fr
}
.expertise-grid article,
.expertise-grid article:nth-child(4),
.expertise-grid article:nth-child(5){
grid-column:auto
}
.about-expertise .actions{
margin-top:var(--space-3)
}
}