/* ============================================
   ABOUT US — page-specific styles
   ============================================ */

/* ===== PAGE BANNER ===== */
.page-banner{
  position:relative;min-height:380px;
  display:flex;align-items:center;
  overflow:hidden;color:#fff;
}
.page-banner-bg{
  position:absolute;inset:0;
  background:url('images/hero-banner.jpg') center/cover no-repeat;
  filter:brightness(.45);
}
.page-banner-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg, rgba(14,18,23,.85) 0%, rgba(14,18,23,.55) 100%);
}
.page-banner-inner{
  position:relative;padding:80px 40px;width:100%;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
}
.breadcrumb{
  font-size:13px;color:rgba(255,255,255,.65);
  letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:18px;display:flex;gap:10px;align-items:center;
  justify-content:center;
}
.breadcrumb a{color:var(--primary)}
.breadcrumb a:hover{color:#fff}
.breadcrumb .current{color:#fff;font-weight:600}
.page-banner-title{
  font-size:clamp(40px, 5vw, 64px);
  font-weight:800;letter-spacing:-1px;
  margin:0;line-height:1.1;
}

/* ===== INTRO + FEATURES ===== */
.about-intro{padding:110px 0;background:var(--bg)}
.about-intro-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;
}

.about-intro-text .services-eyebrow{display:inline-block;margin-bottom:18px}
.about-intro-title{
  font-size:clamp(28px, 3vw, 38px);
  font-weight:800;letter-spacing:-.6px;line-height:1.2;
  margin:0 0 24px;color:var(--ink);
}
.about-intro-lead{
  font-size:16px;line-height:1.8;color:var(--ink-soft);
  margin:0 0 18px;font-weight:500;
}
.about-intro-text-p{
  font-size:14.5px;line-height:1.85;color:var(--muted);
  margin:0 0 32px;
}

.about-feats{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:36px;
}
.about-feat{
  display:flex;align-items:flex-start;gap:22px;
}
.feat-ico{
  flex-shrink:0;
  width:60px;height:60px;
  background:var(--primary);
  display:grid;place-items:center;
  position:relative;
  transition:.3s;
}
.feat-ico::after{
  content:"";position:absolute;inset:0;
  background:var(--primary);
  transform:translate(8px, 8px);
  z-index:-1;opacity:.25;
  transition:.3s;
}
.about-feat:hover .feat-ico::after{transform:translate(12px, 12px);opacity:.35}
.feat-ico svg{width:26px;height:26px;fill:var(--ink)}

.about-feat h3{
  font-family:var(--sans);
  font-size:20px;font-weight:800;letter-spacing:-.2px;
  margin:0 0 8px;color:var(--ink);
}
.about-feat p{
  font-size:14px;line-height:1.75;color:var(--muted);
  margin:0;max-width:420px;
}

/* ===== STATS BANNER (parallax) ===== */
.stats-banner{
  position:relative;
  padding:80px 0;
  color:#fff;
  overflow:hidden;
}
.stats-banner-bg{
  position:absolute;inset:0;z-index:0;
  background:url('images/hero-banner.jpg') center/cover fixed no-repeat;
}
.stats-banner-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg, rgba(14,18,23,.88) 0%, rgba(14,18,23,.78) 100%);
}
.stats-banner-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
  align-items:center;
}
.sb-item{
  display:flex;align-items:flex-start;gap:18px;
}
.sb-ico{
  flex-shrink:0;
  width:54px;height:54px;border-radius:50%;
  background:var(--primary);color:var(--ink);
  display:grid;place-items:center;
}
.sb-ico svg{width:22px;height:22px;fill:var(--ink)}
.sb-item > div{display:flex;flex-direction:column;gap:6px;min-width:0}
.sb-item strong{
  font-family:var(--sans);
  font-size:34px;font-weight:800;line-height:1;
  color:#fff;letter-spacing:-.5px;
}
.sb-item sup{font-size:18px;color:var(--primary);font-weight:700;vertical-align:super}
.sb-item span{
  font-size:13px;line-height:1.55;color:rgba(255,255,255,.7);
  font-weight:400;
}

/* ===== DEPARTMENTS ===== */
.depts{padding:120px 0;background:var(--bg)}
.depts .services-head{margin-bottom:60px}

.dept-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
.dept-card{
  position:relative;display:block;
  aspect-ratio:9/14;
  background-size:cover;background-position:center;
  overflow:hidden;color:#fff;
  transition:.45s;
}
.dept-card::after{
  content:"";position:absolute;inset:0;
  border:3px solid transparent;transition:.4s;
  z-index:3;pointer-events:none;
}
.dept-card:hover::after{border-color:var(--primary)}

.dept-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,
    rgba(14,18,23,.92) 0%,
    rgba(14,18,23,.7) 35%,
    rgba(14,18,23,.25) 70%,
    rgba(14,18,23,.05) 100%);
  transition:.45s;
}
.dept-card:hover .dept-overlay{
  background:linear-gradient(to top,
    rgba(14,18,23,.95) 0%,
    rgba(14,18,23,.85) 50%,
    rgba(14,18,23,.45) 100%);
}

.dept-body{
  position:absolute;left:0;bottom:0;z-index:2;
  width:100%;
  padding:28px 24px;
  display:flex;flex-direction:column;
}
.dept-body::before{
  content:"";display:block;
  width:34px;height:3px;background:var(--primary);
  margin-bottom:18px;
  transition:width .4s;
}
.dept-card:hover .dept-body::before{width:60px}

.dept-body h3{
  font-family:var(--sans);
  font-size:20px;font-weight:800;letter-spacing:-.3px;
  line-height:1.25;color:#fff;
  margin:0 0 14px;
}
.dept-body p{
  font-size:13px;line-height:1.7;
  color:rgba(255,255,255,.78);
  margin:0;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .5s ease, opacity .35s ease, margin .4s;
}
.dept-card:hover .dept-body p{
  max-height:280px;opacity:1;margin-top:0;
}

/* ===== CLIENTS ===== */
.about-clients{padding:100px 0 120px;background:var(--bg-alt)}
.clients-row{
  display:grid;grid-template-columns:repeat(5,1fr);gap:40px;
  align-items:center;
}
.client-logo{
  display:flex;align-items:center;justify-content:center;
  height:90px;padding:18px;
  background:#fff;border:1px solid var(--line);
  transition:.3s;
}
.client-logo:hover{
  border-color:var(--primary);
  transform:translateY(-4px);
}
.client-logo img{
  max-width:100%;max-height:60px;
  filter:grayscale(100%);opacity:.65;
  transition:.3s;
}
.client-logo:hover img{filter:none;opacity:1}

/* ===== Responsive ===== */
@media (max-width:1024px){
  .about-intro-grid{grid-template-columns:1fr;gap:60px}
  .stats-banner-inner{grid-template-columns:repeat(2,1fr);gap:50px 30px}
  .dept-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .dept-card{aspect-ratio:9/13}
  .clients-row{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:768px){
  .page-banner{min-height:300px}
  .page-banner-inner{padding:60px 24px}
  .about-intro, .depts, .about-clients{padding:80px 0}
  .stats-banner{padding:60px 0}
  .about-intro-grid{gap:50px}
  .about-feats{gap:28px}
  .feat-ico{width:54px;height:54px}
  .feat-ico svg{width:22px;height:22px}
  .sb-item strong{font-size:28px}
  .sb-ico{width:48px;height:48px}
  .dept-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .dept-card{aspect-ratio:9/12}
  .dept-body{padding:22px 18px}
  .dept-body h3{font-size:17px}
  /* on touch screens, always reveal text since no hover */
  .dept-body p{max-height:280px;opacity:1}
  .clients-row{grid-template-columns:repeat(2,1fr);gap:24px}
}

@media (max-width:540px){
  .stats-banner-inner{grid-template-columns:1fr;gap:32px}
  .about-feat{flex-direction:column;gap:14px}
  .dept-grid{grid-template-columns:1fr;gap:14px}
  .dept-card{aspect-ratio:16/10}
  .clients-row{grid-template-columns:1fr 1fr;gap:18px}
}