.about-page{display:block}

.about-hero{position:relative;min-height:70vh;display:flex;align-items:center}
.about-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-hero__overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(13,13,15,0.85),rgba(13,13,15,0.3))}
.about-hero__content{position:relative}
.about-hero__text{max-width:520px;display:flex;flex-direction:column;gap:var(--space-3)}

.about-mission__inner{max-width:700px;margin-inline:auto;text-align:center}

.about-diff__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-4)}
.about-card{display:flex;flex-direction:column;gap:var(--space-2);min-width:0;transition:border var(--transition-fast)}
.about-card h3{overflow-wrap:anywhere}
.about-card:hover{border-color:var(--color-accent)}

.about-expertise__grid{display:grid;grid-template-columns:55% 45%;gap:var(--space-5);align-items:center}
.about-expertise__text{min-width:0}
.about-expertise__media img{width:100%}

.about-process__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-4)}
.about-step{display:flex;flex-direction:column;gap:var(--space-2);text-align:center}

.about-experience__grid{display:grid;grid-template-columns:60% 40%;gap:var(--space-5);align-items:center}
.about-experience__text{min-width:0}

.about-audience__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);margin-top:var(--space-4)}

.about-visual{position:relative;padding:var(--space-6) 0;text-align:center}
.about-visual__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-visual__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(13,13,15,0.4),rgba(13,13,15,0.9))}
.about-visual__content{position:relative;max-width:600px;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-3)}

.about-cta__inner{max-width:500px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--space-3)}

@media (max-width:1200px){
.about-diff__grid .about-card h3,
.about-audience__grid .about-card h3,
.about-process__grid .about-step h3{font-size:clamp(1.05rem,1.6vw,1.35rem)}
}

@media (max-width:1024px){
.about-diff__grid{grid-template-columns:1fr 1fr}
.about-process__grid{grid-template-columns:1fr 1fr}
.about-expertise__grid{grid-template-columns:1fr}
.about-experience__grid{grid-template-columns:1fr}
.about-audience__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
.about-hero{min-height:60vh}
.about-hero__text{max-width:90%;margin-inline:auto;text-align:center}
.about-diff__grid,
.about-process__grid,
.about-audience__grid{grid-template-columns:1fr}
}