/* ==========================================================================
   about-us.css — About Us page (companion to style2.css)
   ========================================================================== */

/* ---- Shared nav active state ------------------------------------------- */
.nav__list a.is-current{color:#fff}
.nav__list a.is-current::after{width:100%}

/* ---- Page banner ------------------------------------------------------- */
.page-banner{
  position:relative;
  padding:120px 0 56px;
  background:#0d2b2b url("/wp-content/uploads/admin/2023/03/vision-hero.webp") center/cover no-repeat;
  color:#fff;isolation:isolate;
}
.page-banner::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(7,28,28,.55) 0%,rgba(7,28,28,.78) 100%);
}
.page-banner__title{
  color:#fff;font-size:clamp(28px,4vw,42px);
  font-weight:800;letter-spacing:-.02em;margin:0 0 10px;
}
.breadcrumb{display:flex;gap:8px;align-items:center;font-size:14px;color:rgba(255,255,255,.8)}
.breadcrumb a{color:rgba(255,255,255,.8)}
.breadcrumb a:hover{color:#fff}
.breadcrumb span{opacity:.6}

/* ---- Intro ------------------------------------------------------------- */
.about-intro{max-width:860px;margin:0 auto;text-align:center}
.about-intro .eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--teal);margin-bottom:14px;
}
.about-intro h2{
  font-size:clamp(24px,3vw,34px);font-weight:800;letter-spacing:-.02em;
  margin:0 0 22px;color:var(--ink);
}
.about-intro p{
  font-size:16.5px;line-height:1.8;color:var(--muted);margin:0 0 18px;
}
.about-intro p:last-child{margin-bottom:0}

/* ---- Stats strip ------------------------------------------------------- */
.about-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:760px;margin:48px auto 0;
}
.about-stat{text-align:center;padding:26px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.about-stat__num{font-size:34px;font-weight:800;color:var(--teal);line-height:1}
.about-stat__label{margin-top:8px;font-size:14px;color:var(--muted)}

/* ---- Services ---------------------------------------------------------- */
.services{background:var(--soft, #f5f7f8)}
.services__media{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:44px;
}
.services__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);display:block;
  box-shadow:0 14px 40px rgba(6,45,58,.12);
}
.services__lead{
  max-width:680px;margin:0 auto 30px;text-align:center;
  font-size:16px;color:var(--muted);
}
.services__list{
  max-width:880px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;list-style:none;padding:0;
}
.services__list li{
  position:relative;padding:12px 14px 12px 42px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  font-size:15px;color:var(--ink);line-height:1.45;
}
.services__list li::before{
  content:"";position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;border-radius:50%;
  background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.5l2.5 2.5L10 3'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---- CTA --------------------------------------------------------------- */
.about-cta{
  text-align:center;background:var(--teal-dark, #06303a);color:#fff;
  border-radius:var(--radius);padding:54px 24px;
}
.about-cta h2{color:#fff;font-size:clamp(22px,3vw,30px);font-weight:800;margin:0 0 12px}
.about-cta p{color:rgba(255,255,255,.82);max-width:560px;margin:0 auto 24px;font-size:16px}
.about-cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width:820px){
  .services__media{grid-template-columns:1fr 1fr}
  .services__media img:first-child{grid-column:1 / -1}
  .about-stats{gap:16px}
  .about-stat{padding:20px 10px}
  .about-stat__num{font-size:28px}
}
@media (max-width:600px){
  .services__media{grid-template-columns:1fr}
  .services__media img:first-child{grid-column:auto}
  .services__list{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr}
}