.about-page { overflow-x:hidden; background: #fff; color: #101629; }
.about-page em { color: #ed1022; font-style: normal; }
.about-page h1, .about-page h2, .about-page h3 { letter-spacing: 0; }
.about-page img { object-fit: contain; }
.about-hero { overflow: hidden; background: linear-gradient(90deg, #fff 0 48%, #f7f8fb 48%); }
.about-hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; min-height: 530px; align-items: center; }
.about-hero-copy { padding: 56px 44px 44px 0; }
.about-hero-copy h1 { max-width: 560px; margin: 12px 0 20px; font-size: 52px; line-height: 1.08; }
.about-hero-copy > p:not(.eyebrow) { max-width: 570px; color: #4e586e; font-size: 17px; }
.about-hero-copy .btn { margin-top: 16px; }
.about-hero-media { position: relative; height: 100%; min-height: 530px; margin: 0; overflow: hidden; border-bottom-left-radius: 140px; }
.about-hero-media > img { width: 100%; height: 100%; object-fit: cover; }
.about-hero-media figcaption { position: absolute; right: 38px; bottom: 36px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 8px; color: #fff; background: rgba(11, 17, 27, .74); font-weight: 700; line-height: 1.3; }
.about-hero-media figcaption span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; color: #ed1022; background: #fff; }
.about-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.about-hero-stats span { display: grid; grid-template-columns: 30px 1fr; align-items: center; column-gap: 8px; }
.about-hero-stats img { width: 28px; height: 28px; grid-row: span 2; filter: invert(16%) sepia(98%) saturate(4282%) hue-rotate(345deg) brightness(98%); }
.about-hero-stats b { font-size: 25px; line-height: 1; }
.about-hero-stats small { color: #596276; font-size: 10px; }
.about-band { padding: 62px 0; background: #fafbfe; }
.about-story { display: grid; grid-template-columns: .72fr 1.28fr; gap: 54px; align-items: center; }
.about-story h2 { margin: 8px 0 18px; font-size: 38px; line-height: 1.15; }
.about-story p { color: #4f5a70; }
.about-story-media { position: relative; height: 350px; margin: 0; overflow: hidden; border-radius: 8px; }
.about-story-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.about-story-media strong { position: absolute; top: 26px; right: 26px; width: 136px; height: 118px; display: grid; place-items: center; align-content: center; border-radius: 8px; color: #fff; background: linear-gradient(145deg, #ff2737, #bf0014); font-size: 38px; box-shadow: 0 18px 38px rgba(237,16,34,.25); }
.about-story-media small { display: block; font-size: 12px; }
.about-why, .vision-mission, .about-glance, .about-journey, .about-industries, .about-founder, .about-clients, .about-cta { margin-top: 28px; }
.about-why { padding: 32px 0; text-align: center; }
.about-why > h2, .about-glance > h2, .about-journey > h2, .about-industries > h2, .about-clients > h2 { margin: 0 0 22px; text-transform: uppercase; font-size: 24px; }
.about-card-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.about-card-grid article { min-height: 210px; padding: 22px 15px; border: 1px solid #e6e9f0; border-radius: 8px; background: #fff; box-shadow: 0 12px 26px rgba(16,22,41,.05); }
.about-card-grid span, .journey-grid span { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 14px; border-radius: 50%; background: #fff0f2; }
.about-card-grid img, .journey-grid img { width: 28px; height: 28px; filter: invert(16%) sepia(96%) saturate(4300%) hue-rotate(345deg); }
.about-card-grid h3 { font-size: 15px; }
.about-card-grid p { color: #5a6478; font-size: 12px; line-height: 1.6; }
.vision-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vision-mission article { min-height: 240px; padding: 32px; border: 1px solid #e7eaf1; border-radius: 8px; box-shadow: 0 12px 28px rgba(16,22,41,.06); }
.vision-mission article > div { display: flex; align-items: center; gap: 14px; }
.vision-mission img { width: 34px; height: 34px; filter: invert(16%) sepia(96%) saturate(4300%) hue-rotate(345deg); }
.vision-panel { color: #fff; background: linear-gradient(115deg, rgba(6,9,14,.94), rgba(25,4,8,.84)), url("../../images/staff/staff-hero.jpg") center/cover; }
.vision-mission p { font-size: 15px; }
.mission-panel { background: linear-gradient(135deg,#fff,#fff5f6); }
.about-glance, .about-journey, .about-industries, .about-clients { padding: 26px 24px; border: 1px solid #e8ebf2; border-radius: 8px; box-shadow: 0 10px 26px rgba(16,22,41,.05); }
.about-glance > div { display: grid; grid-template-columns: repeat(6,1fr); }
.about-glance span { display: grid; grid-template-columns: 30px 1fr; gap: 4px 10px; padding: 8px 22px; border-right: 1px solid #e5e8ef; }
.about-glance span:last-child { border: 0; }
.about-glance img { width: 27px; height: 27px; grid-row: span 2; filter: invert(16%) sepia(96%) saturate(4300%) hue-rotate(345deg); }
.about-glance b { font-size: 25px; line-height: 1; }
.about-glance small { font-size: 11px; color: #566176; }
.journey-grid { display: grid; grid-template-columns: repeat(6,1fr); position: relative; }
.journey-grid::before { content:""; position:absolute; left:8%; right:8%; top:27px; border-top:1px dashed #cdd2dd; }
.journey-grid article { position: relative; padding: 0 18px; text-align: center; }
.journey-grid span { position: relative; z-index: 1; background:#fff; border:1px solid #eef0f4; }
.journey-grid b { color:#ed1022; }
.journey-grid p { font-size:11px; color:#596276; line-height:1.5; }
.about-industries > div { display:grid; grid-template-columns:repeat(8,1fr); gap:10px; }
.about-industries span { min-height:84px; display:grid; place-items:center; align-content:center; gap:8px; border:1px solid #e7eaf1; border-radius:7px; font-size:12px; font-weight:700; }
.about-industries img { width:27px; height:27px; filter: invert(16%) sepia(96%) saturate(4300%) hue-rotate(345deg); }
.about-founder { min-height:250px; display:grid; grid-template-columns:280px 1fr .72fr; overflow:hidden; border-radius:8px; color:#fff; background:linear-gradient(110deg,#080b10,#170406); }
.about-founder figure { margin:0; overflow:hidden; }
.about-founder figure img { width:100%; height:100%; object-fit:cover; object-position:25% center; }
.about-founder > div { padding:32px; }
.about-founder blockquote { margin:12px 0 20px; font-size:20px; line-height:1.5; }
.about-founder strong { color:#ed1022; }
.about-founder strong small { display:block; color:#fff; font-weight:400; }
.about-founder ul { display:grid; align-content:center; gap:24px; margin:0; padding:32px; list-style:none; border-left:1px solid rgba(255,255,255,.12); }
.about-founder li { padding-left:18px; position:relative; }
.about-founder li::before { content:""; position:absolute; left:0; top:8px; width:7px; height:7px; border-radius:50%; background:#ed1022; }
.about-clients > div { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.about-clients span { min-height:70px; display:grid; place-items:center; padding:10px; border:1px solid #e7eaf1; border-radius:7px; }
.about-clients img { max-height:38px; }
.about-cta { margin-bottom:30px; padding:30px 34px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:32px; color:#fff; border-radius:8px; background:linear-gradient(110deg,#090b10,#1b0508); }
.about-cta h2 { margin:0; }
.about-cta p { color:#d9dde7; }
.about-cta > div:last-child { display:flex; gap:14px; justify-content:flex-end; }
.about-cta .btn-light { color:#ed1022; }
@media (max-width: 1000px) {
  .about-hero-grid, .about-story, .vision-mission, .about-founder, .about-cta { grid-template-columns:1fr; }
  .about-hero-media { min-height:400px; border-radius:0 0 80px 0; }
  .about-card-grid, .about-glance > div, .journey-grid { grid-template-columns:repeat(3,1fr); }
  .about-industries > div { grid-template-columns:repeat(4,1fr); }
  .about-founder { grid-template-columns:230px 1fr; }
  .about-founder ul { grid-column:1/-1; border-left:0; border-top:1px solid rgba(255,255,255,.12); }
}
@media (max-width: 640px) {
  .about-hero-copy { padding:38px 0; }
  .about-hero-copy h1 { font-size:39px; }
  .about-hero-copy h1 em { display:block; }
  .about-hero-stats, .about-card-grid, .about-glance > div, .journey-grid, .about-industries > div, .about-clients > div { grid-template-columns:repeat(2,1fr); }
  .about-story-media { height:280px; }
  .about-founder { grid-template-columns:1fr; }
  .about-founder figure { height:240px; }
  .about-cta > div:last-child { flex-direction:column; }
}
