/* About page — theme-friendly (dark header vibe) */
.about { background:#fff; color:#111; }
.about-container { width:min(1180px, calc(100% - 32px)); margin:0 auto; }

.about-hero { position:relative; min-height: 520px; display:flex; align-items:center; }
.about-hero__bg { position:absolute; inset:0; background-size:cover; background-position:center; transform: scale(1.02); }
.about-hero__overlay { position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.35)); }
.about-hero__content { position:relative; max-width: 680px; padding: 72px 0; color:#fff; }
.about-kicker { letter-spacing:.12em; font-size:12px; opacity:.9; margin:0 0 10px; }
.about-h1 { font-size: clamp(28px, 3.2vw, 46px); line-height:1.08; margin:0 0 14px; }
.about-lead { font-size: 16px; line-height:1.6; opacity:.95; margin:0 0 22px; max-width: 60ch; }

.about-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top: 8px; }
.about-cta--center { justify-content:center; margin-top: 18px; }

.about-btn { display:inline-flex; align-items:center; justify-content:center; height:44px; padding:0 16px; border-radius: 12px; text-decoration:none; font-weight:600; }
.about-btn--primary { background:#111; color:#fff; border:1px solid #111; }
.about-btn--primary:hover { filter: brightness(1.06); }
.about-btn--ghost { background: transparent; color:#fff; border:1px solid rgba(255,255,255,.35); }
.about-btn--ghost:hover { border-color: rgba(255,255,255,.6); }

.about-badges { display:flex; gap:10px; flex-wrap:wrap; margin-top: 18px; }
.about-badge { font-size:12px; padding:6px 10px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }

.about-strip { background:#0f0f0f; color:#fff; padding: 26px 0; }
.about-grid-4 { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.about-stat { border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 16px; background: rgba(255,255,255,.04); }
.about-stat__num { font-size: 26px; font-weight: 800; }
.about-stat__txt { font-size: 13px; opacity:.9; margin-top: 6px; line-height:1.35; }

.about-section { padding: 56px 0; }
.about-section--muted { background:#f5f6f7; }
.about-two { display:grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items:start; }
.about-h2 { font-size: 26px; margin: 0 0 12px; }
.about-h3 { font-size: 16px; margin: 0 0 8px; }
.about-p { font-size: 15px; line-height: 1.7; margin: 0 0 12px; color:#222; }

.about-cards { display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; }
.about-card { border:1px solid #e7e7e7; border-radius: 16px; padding: 14px; background:#fff; box-shadow: 0 8px 20px rgba(0,0,0,.04); }

.about-media { position:sticky; top: 18px; }
.about-img { width:100%; height:auto; display:block; border-radius: 18px; box-shadow: 0 14px 28px rgba(0,0,0,.14); }
.about-media__note { font-size: 12px; color:#555; margin-top: 10px; }

.about-steps { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.about-step { background:#fff; border:1px solid #e7e7e7; border-radius: 16px; padding: 14px; }
.about-step__n { font-weight: 800; opacity:.5; }
.about-step__t { font-weight: 700; margin-top: 6px; }
.about-step__p { margin-top: 6px; font-size: 13px; line-height:1.55; color:#333; }

.about-split { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:center; margin-top: 18px; }
.about-split__text { background:#fff; border:1px solid #e7e7e7; border-radius: 16px; padding: 16px; }

.about-gallery { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.about-gallery__item { display:block; border-radius: 16px; overflow:hidden; border:1px solid #e7e7e7; background:#fff; }
.about-gallery__item img { width:100%; height: 180px; object-fit: cover; display:block; transition: transform .18s ease; }
.about-gallery__item:hover img { transform: scale(1.03); }

@media (max-width: 980px) {
  .about-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .about-two { grid-template-columns: 1fr; }
  .about-media { position:relative; top:auto; }
  .about-cards { grid-template-columns: 1fr; }
  .about-steps { grid-template-columns: repeat(2, 1fr); }
  .about-split { grid-template-columns: 1fr; }
  .about-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .about-hero { min-height: 520px; }
  .about-gallery__item img { height: 150px; }
}