/* BAKSORBIT — About Us page (uses theme vars + global classes from style.css) */
.about-main{padding-top:0}
/* 2-panel pinned hero (index uses 300vh for 3 panels → 200vh for 2 here) */
.about-hero-stack{height:200vh}

/* Who we are — two columns */
.about-story{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.about-story-text p{color:var(--muted);font-size:16px;line-height:1.8;margin-bottom:16px;max-width:540px}
.about-story-text .btn{margin-top:10px}

.about-highlights{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.about-hl{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;transition:transform .4s var(--ease,cubic-bezier(.16,1,.3,1)),border-color .4s,box-shadow .4s}
.about-hl:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 22px 50px rgba(0,0,0,.4)}
.about-hl i{font-size:24px;color:var(--primary);display:block;margin-bottom:12px}
.about-hl h3{font-size:18px;letter-spacing:-.4px;margin-bottom:8px}
.about-hl p{color:var(--muted);font-size:14.5px;line-height:1.65}

/* Values list reused full-width */
.about-values{margin-top:8px}

@media (max-width:900px){
    .about-story{grid-template-columns:1fr;gap:32px}
}
@media (max-width:560px){
    .about-highlights{grid-template-columns:1fr}
}