/* ===== About page header (bold) ===== */
.page-top{
  padding: 22px 0 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f6fb 100%);
  border-bottom: 1px solid #e6edf7;
}
.page-title{
  margin: 0;
  font-weight: 900;
  color: #0b2647;
  font-size: clamp(1.6rem, 3.6vw, 2.25rem);
  letter-spacing: .2px;
  position: relative;
  padding-left: 18px;
}
.page-title::before{
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 6px; border-radius: 3px;
  background: #134ea7;
}
.page-title::after{
  content: "";
  display: block;
  width: 78px; height: 4px;
  margin: 10px 0 0 18px;
  border-radius: 3px;
  background: #ff6a00;
}

/* ---------- Who we are ---------- */
.about-grid{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: start;
}
.about-copy p{ color:#1f2a44; line-height:1.75; }
.about-copy strong{ color:#0b2647; }

.image-card{
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #eef3fb, #e9edf7);
  min-height: 320px;
  box-shadow: 0 18px 36px rgba(8,18,44,.12);
}
.image-card img{ width:100%; height:100%; object-fit: cover; display:block; }

/* soft glow shadow */
.shadow-glow{
  box-shadow: 0 10px 30px rgba(8,18,44,.14), 0 0 0 1px rgba(231,237,246,1);
  position: relative;
}
.shadow-glow::after{
  content:"";
  position:absolute; inset:-14px -14px auto auto;
  width:180px; height:180px; border-radius:999px;
  background: radial-gradient(closest-side, rgba(255,106,0,.18), transparent 70%);
  filter: blur(8px);
  pointer-events:none;
}

/* advantage box */
.adv-box{
  margin-top: 18px; padding: 16px 18px; border-radius: 10px;
  background: #f1f6ff; border-left: 6px solid #134ea7;
}
.adv-box h4{ margin:.1rem 0 .5rem; color:#0b2647 }
.adv-box ul{ margin:0; padding-left: 18px; }

/* ---------- Section titles ---------- */
.bar-title{ margin: 2px 0 14px; }

/* ---------- timeline ---------- */
.timeline{ position: relative; margin: 22px 0 6px; padding: 12px 0; }
.timeline::before{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:4px; transform: translateX(-50%);
  background: linear-gradient(#d9dfeb, #cfd7e8); border-radius: 3px;
}
.tl-item{ position: relative; margin: 40px 0; }
.tl-item.left  { padding-right: 54%; }
.tl-item.right { padding-left: 54%; }
.tl-card{
  position: relative; border-radius: 10px; padding: 18px 20px; color:#fff;
  background:
    linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.78)),
    url('https://images.unsplash.com/photo-1531306728370-e2ebd9d7bb99?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
  box-shadow: 0 14px 30px rgba(8,18,44,.2);
}
.tl-item.left  .tl-card{ margin-right: 18px; }
.tl-item.right .tl-card{ margin-left:  18px; }
.tl-year{ color: var(--kc-accent, #ff6a00); font-weight: 900; margin-bottom: 8px; }
.tl-text{ line-height: 1.65; }
.tl-item::after{
  content:""; position:absolute; left:50%; width:14px; height:14px; border-radius:50%;
  background: var(--kc-accent, #ff6a00); transform: translate(-50%, 0);
  top: 20px; box-shadow: 0 0 0 6px #fff, 0 6px 18px rgba(8,18,44,.2);
}

/* ---------- foundation banner ---------- */
.foundation{
  text-align: center; padding: 36px 16px 28px; background: #e9edf4; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 26px rgba(8,18,44,.08);
}
.foundation h2{
  margin: 0 0 6px; font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; color: #0b2647;
}
.foundation h2::after{
  content:""; display:block; width:90px; height:6px; margin:10px auto 8px; border-radius: 6px;
  background: var(--kc-accent, #ff6a00);
}
.foundation p{ margin:0; color:#374151 }

/* ---------- mission / vision ---------- */
.mv-grid{
  display:grid; grid-template-columns: .95fr 1.05fr; gap:28px; align-items:center;
}
.mv-grid.rev{ grid-template-columns: 1.05fr .95fr; }
.mv-image{ margin:0; border-radius:16px; overflow:hidden; background:#e9eef6; position:relative; isolation:isolate;
  transition: box-shadow .4s ease, transform .4s ease; box-shadow: 0 14px 28px rgba(8,18,44,.14); }
.mv-image img{ width:100%; height:100%; display:block; object-fit:cover; transform: scale(1);
  transition: transform 1.1s ease, filter .6s ease; }
.mv-image:hover img{ transform: scale(1.06); filter: saturate(1.05) contrast(1.02); }
.mv-image::before{ content:""; position:absolute; inset:0;
  background: radial-gradient(80% 85% at 50% 60%, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%);
  pointer-events:none; mix-blend-mode: multiply; opacity:.65; }
.mv-image::after{ content:""; position:absolute; inset:-20px;
  background: radial-gradient(closest-side, rgba(255,106,0,.22), transparent 70%);
  filter: blur(18px); z-index:-1; transition: opacity .4s ease, transform .4s ease; opacity:.6; }
.mv-image:hover::after{ opacity:.9; transform: scale(1.04); }
.mv-image .shine{ position:absolute; top:0; bottom:0; left:-40%; width:40%; transform: skewX(-20deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  filter: blur(6px); opacity:0; pointer-events:none; }
.mv-image:hover .shine{ animation: sweep 1.1s ease forwards; }
@keyframes sweep{
  0%{ left:-45%; opacity:0 } 20%{ opacity:.45 } 100%{ left:105%; opacity:0 }
}
.mv-copy h3.strike-title{
  font-size: clamp(1.6rem, 3.2vw, 2.2rem); color: var(--kc-accent, #ff6a00);
  margin: 0 0 6px; position: relative;
}
.mv-copy h3.strike-title::after{
  content:""; display:block; width:140px; height:4px; margin-top:6px;
  background:#ef7a2e; border-radius:3px;
}
.mv-copy h4{ margin: 14px 0 8px; color:#0b2647; font-size:1.4rem }
.mv-copy p{ line-height:1.8; color:#1f2a44 }

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .about-grid{ grid-template-columns: 1fr; }
  .tl-item.left, .tl-item.right{ padding:0; }
  .timeline::before{ left:12px; transform:none; }
  .tl-item{ padding-left: 34px; }
  .tl-item::after{ left:12px; transform:none; }
  .tl-item.left .tl-card, .tl-item.right .tl-card{ margin:0; }
  .mv-grid, .mv-grid.rev{ grid-template-columns: 1fr; }
  .shadow-glow::after{ display:none; }
}

/* Reveal on scroll (uses your global main.js trigger) */
.reveal{ opacity:0; transform: translateY(18px) scale(.98); }
.reveal.revealed{ opacity:1; transform: translateY(0) scale(1);
  transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce){
  .mv-image img, .mv-image, .mv-image::after, .reveal.revealed{
    transition: none !important; animation: none !important;
  }
}

/* ===== What Drives Us ===== */
.values-subtitle{
  letter-spacing:.4px; font-weight:700; color:#0b2647; text-transform: uppercase;
  margin: 10px 0 18px;
}
.values-grid{ display:grid; gap:22px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px){ .values-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .values-grid{ grid-template-columns: 1fr; } }

.value-card{
  background: radial-gradient(120% 140% at 0% 0%, #0f2e63 0%, #0a2655 55%, #08224c 100%);
  color:#d7e6ff; border-radius:12px; padding:26px 20px;
  box-shadow: 0 16px 28px rgba(8,18,44,.18); border:1px solid rgba(255,255,255,.06);
  text-align:center;
}
.value-card .v-icon{ color:#7fb1ff; margin-bottom:10px }
.v-title{ margin:.2rem 0 .4rem; font-weight:900; color:#fff; letter-spacing:.6px; }
.v-text{ text-transform:uppercase; font-weight:700; line-height:1.6; font-size:.92rem; }

/* ===== Meet Our Team ===== */
.team-title{ color: var(--kc-accent, #ff6a00); margin:0 0 18px; }
.team-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; }
@media (max-width: 1000px){ .team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .team-grid{ grid-template-columns: 1fr; } }
.team-card{ position:relative; margin:0; border-radius:12px; overflow:hidden;
  background:#e9eef6; box-shadow: 0 14px 24px rgba(8,18,44,.12); }
.team-card img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-card figcaption{
  position:absolute; inset:auto 0 0 0; color:#fff; padding:16px 18px;
  background: linear-gradient(to top, rgba(0,0,0,.65), transparent 70%);
}
.leader-name{ font-weight:900; letter-spacing:.4px; }
.leader-role{ opacity:.95; font-weight:600; margin-top:4px }

/* ===== Our Advantage ===== */
.eyebrow{
  display:flex; align-items:center; gap:12px; color:#163a7a; font-weight:900;
  letter-spacing:2px; text-transform:uppercase; margin-bottom:8px;
}
.eyebrow span{ display:inline-block; width:46px; height:4px; background:#163a7a; border-radius:999px; }
.why-title{ font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 10px; color:#0b2647; }
.why-title span{ color: var(--kc-accent, #ff6a00); }

/* NEW: make the advantage intro full width above the grid */
.adv-intro{ grid-column: 1 / -1; max-width: none; }
.adv-intro .lead{ max-width: none; }

/* Grid of images/cards */
.adv-grid{
  margin-top:18px; display:grid; gap:26px; grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 860px){ .adv-grid{ grid-template-columns: 1fr; } }

.adv-card{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow: 0 16px 36px rgba(8,18,44,.12); border:1px solid #e7edf6;
  transition: transform .25s ease, box-shadow .25s ease;
}
.adv-card:hover{ transform: translateY(-4px); box-shadow: 0 22px 48px rgba(8,18,44,.18); }
.adv-card img{ width:100%; height:340px; object-fit:cover; display:block; }
.adv-caption{ padding:16px 18px }
.adv-caption h4{ margin:.3rem 0 .4rem; color:#0b2647 }
.adv-caption p{ margin:0; color:#475569 }