/* HERO */
.about-hero {
  background: var(--blue);
  position: relative; overflow: hidden;
  padding: 88px 28px; display: flex; align-items: center;
}
.about-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0.05;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 44px, rgba(255,255,255,1) 44px, rgba(255,255,255,1) 45px),
    repeating-linear-gradient(90deg, transparent, transparent 44px, rgba(255,255,255,1) 44px, rgba(255,255,255,1) 45px);
}
.about-hero-blob { position: absolute; right: -60px; top: -80px; width: 440px; height: 440px; border-radius: 50%; background: rgba(255,255,255,0.08); z-index: 0; }
.about-hero-inner { max-width: 1200px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.about-hero-left h1 { font-family: var(--font-head); font-size: clamp(32px, 4vw, 50px); font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 20px; }
.about-hero-left p { font-size: 17px; color: rgba(255,255,255,0.82); line-height: 1.7; margin-bottom: 16px; }
.about-hero-left .tagline { font-size: 15px; font-weight: 600; font-style: italic; color: rgba(255,255,255,0.5); }
.about-hero-right { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.about-hero-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
.about-hero-map {
  grid-column: 1 / -1;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
}
.hero-stat {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-top: 3px solid var(--blue); border-radius: 10px; padding: 24px 20px; text-align: center;
}
.hero-stat-n { font-family: var(--font-head); font-size: 38px; font-weight: 800; color: #e8ecf0; line-height: 1; margin-bottom: 6px; }
.hero-stat-l { font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500; }

/* SECTIONS */
section { padding: 80px 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.section-h { font-family: var(--font-head); font-size: clamp(26px, 3.5vw, 40px); font-weight: 800; color: var(--text); line-height: 1.12; margin-bottom: 16px; }
.section-p { font-size: 17px; color: var(--text-mid); line-height: 1.7; }

/* WHO WE ARE */
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.who-img {
  border-radius: 12px; overflow: hidden; position: relative;
  background: var(--navy); aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
}
.who-img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #1a3448, #237FC3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 32px;
}
.who-img-placeholder p { font-size: 14px; color: rgba(255,255,255,0.6); text-align: center; font-style: italic; }
.team-placeholder {
  width: 80px; height: 80px; background: rgba(255,255,255,0.15);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.who-text { display: flex; flex-direction: column; gap: 20px; }
.who-text p { font-size: 16px; color: var(--text-mid); line-height: 1.75; }
.who-text p strong { color: var(--text); font-weight: 700; }

/* VALUES */
.values-bg { background: var(--white); }
.values-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
.value-card {
  border-radius: 10px; padding: 32px 28px;
}
.value-card.dark { background: var(--navy); border: 1px solid rgba(255,255,255,0.1); }
.value-card.light { background: var(--blue-light); border: 1px solid var(--border); }
.value-card.dark .value-title { color: #fff; }
.value-card.dark .value-desc { color: rgba(255,255,255,0.7); }
.value-card.dark .value-icon { background: rgba(255,255,255,0.1); }
.value-card.light .value-title { color: var(--text); }
.value-card.light .value-desc { color: var(--text-mid); }
.value-icon {
  width: 48px; height: 48px; background: var(--blue-light);
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.value-icon svg { color: var(--blue); }
.value-title { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 10px; text-align:left;}
.value-desc { font-size: 14.5px; color: var(--text-mid); line-height: 1.65; }

/* TEAM */
.team-intro { max-width: 640px; margin-bottom: 52px; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.team-card {
  background: var(--off-white); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; text-align: center;
  transition: transform .25s, box-shadow .25s;
}
.team-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(35,127,195,0.1); }
.team-avatar {
  height: 180px; background: linear-gradient(135deg, #1a3448, #237FC3);
  display: flex; align-items: center; justify-content: center;
}
.team-avatar svg { opacity: 0.5; }
.team-body { padding: 20px 16px; }
.team-name { font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.team-role { font-size: 13px; color: var(--blue); font-weight: 600; margin-bottom: 8px; }
.team-bio { font-size: 13px; color: var(--text-mid); line-height: 1.55; }

/* WHY KSES */
.why-bg { background: var(--white); border-top: 1px solid var(--border); }
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; }
.why-item { display: flex; gap: 18px; align-items: flex-start; }
.why-num {
  flex-shrink: 0; width: 44px; height: 44px; background: var(--blue);
  color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 16px; font-weight: 800; margin-top: 2px;
}
.why-content h4 { font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 6px; }
.why-content p { font-size: 14px; color: var(--text-mid); line-height: 1.6; }

/* CTA STRIP */
.cta-strip {
  background: var(--blue); padding: 72px 28px;
  text-align: center; position: relative; overflow: hidden;
}
.cta-strip::before {
  content:''; position:absolute; inset:0; opacity:0.05;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 44px, rgba(255,255,255,1) 44px, rgba(255,255,255,1) 45px),
    repeating-linear-gradient(90deg, transparent, transparent 44px, rgba(255,255,255,1) 44px, rgba(255,255,255,1) 45px);
}
.cta-inner { max-width: 680px; margin: 0 auto; position: relative; z-index: 1; }
.cta-inner h2 { font-family: var(--font-head); font-size: clamp(26px, 4vw, 40px); font-weight: 800; color: #fff; margin-bottom: 14px; line-height: 1.15; }
.cta-inner p { font-size: 17px; color: rgba(255,255,255,0.82); line-height: 1.65; margin-bottom: 32px; }
.btn-white {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--blue); font-size: 16px; font-weight: 800;
  padding: 18px 36px; border-radius: 5px; text-decoration: none;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18); transition: transform .15s, box-shadow .15s;
}
.btn-white:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.22); }

@media(max-width:960px){
  .about-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .who-grid { grid-template-columns: 1fr; gap: 40px; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:620px){
  .nav-links { display: none; }
  .about-hero { padding: 60px 20px; }
  .about-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .about-hero-left h1 { font-size: clamp(26px, 7vw, 36px); }
  .about-hero-left p { font-size: 15px; }
  .about-hero-right { width: 100%; min-width: 0; grid-template-columns: 1fr; gap: 10px; }
  .about-hero-map { grid-column: 1; height: 160px; }
  .hero-stat { display: flex; align-items: center; gap: 14px; text-align: left; padding: 12px 18px; }
  .hero-stat-n { font-size: 28px; margin-bottom: 0; }
  .values-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}