/* ============================================================
   CSI — ABOUT page styles (depends on core.css)
   ============================================================ */
.ab-intro{background:var(--white)}
.ab-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}
.ab-visual{position:relative}
.ab-visual .frame{position:relative;overflow:hidden;aspect-ratio:4/5;border:1px solid #cddde0}
.ab-visual .frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.ab-visual:hover .frame img{transform:scale(1.05)}
.ab-visual .dots{position:absolute;bottom:-16px;right:-16px;width:120px;height:120px;z-index:-1;background-image:radial-gradient(var(--teal) 1.4px,transparent 1.4px);background-size:14px 14px;opacity:.4}
.ab-badge{position:absolute;left:-18px;top:34px;background:var(--teal-deep);color:#fff;padding:20px 24px;border-left:3px solid var(--cyan);box-shadow:0 24px 50px rgba(6,20,26,.35)}
.ab-badge b{display:block;font-size:42px;font-weight:900;line-height:1;color:var(--cyan)}
.ab-badge span{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ab-tag{font-size:17px;font-weight:700;color:var(--teal-dark);line-height:1.5;margin:16px 0 16px;border-left:3px solid var(--teal);padding-left:16px}
.ab-body{font-size:14px;line-height:1.95;color:var(--muted);margin-bottom:16px}
.ab-checks{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 28px}
.ab-check{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:var(--teal-dark)}
.ab-check i{color:var(--teal)}

/* Pillars */
.ab-pillars{background:var(--light)}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{position:relative;background:var(--white);border:1px solid #e3edee;padding:44px 32px 36px;overflow:hidden;transition:.45s}
.pillar::before{content:"";position:absolute;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--teal),var(--cyan));transition:width .5s}
.pillar:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(6,20,26,.12)}
.pillar:hover::before{width:100%}
.pillar-num{position:absolute;top:20px;right:26px;font-size:46px;font-weight:900;color:#eef4f5;line-height:1}
.pillar-icon{width:60px;height:60px;display:grid;place-items:center;background:rgba(4,106,120,.1);color:var(--teal);font-size:24px;margin-bottom:22px;transition:.45s}
.pillar:hover .pillar-icon{background:var(--teal);color:#fff}
.pillar h3{font-size:18px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--teal-dark);margin-bottom:12px}
.pillar p{font-size:13px;line-height:1.85;color:var(--muted)}

/* Mission / Vision */
.ab-mv{background:var(--white)}
.mv-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.mv-card{position:relative;padding:44px 38px;background:linear-gradient(160deg,var(--teal-deep),#0a2831);color:#fff;overflow:hidden}
.mv-card:nth-child(2){background:linear-gradient(160deg,var(--teal),#035663)}
.mv-icon{width:64px;height:64px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:var(--cyan);font-size:26px;margin-bottom:22px}
.mv-card:nth-child(2) .mv-icon{color:#fff}
.mv-card h3{font-size:22px;font-weight:800;text-transform:uppercase;margin-bottom:14px}
.mv-card p{font-size:14px;line-height:1.9;color:rgba(255,255,255,.8)}

/* Stats band */
.ab-stats{background:var(--teal-deep);position:relative;overflow:hidden}
.ab-stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.ab-stat{padding:60px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.07)}
.ab-stat:last-child{border-right:0}
.ab-stat .n{font-size:clamp(44px,5.5vw,68px);font-weight:900;color:#fff;line-height:1;letter-spacing:-2px}
.ab-stat .n sup{color:var(--cyan);font-size:.4em;vertical-align:super}
.ab-stat .n .count{color:inherit!important;font:inherit!important}
.ab-stat .l{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:14px}

/* FAQ */
.ab-faq{background:var(--light)}
.faq-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start}
.faq-side .fq-stats{display:grid;gap:14px;margin-top:26px}
.fq-stat{display:flex;align-items:center;gap:16px;background:var(--white);border:1px solid #e3edee;padding:18px 20px}
.fq-stat .ic{width:46px;height:46px;display:grid;place-items:center;background:rgba(4,106,120,.1);color:var(--teal);font-size:18px;flex-shrink:0}
.fq-stat b{display:block;font-size:16px;font-weight:900;color:var(--teal-dark)}
.fq-stat span{font-size:11px;color:var(--muted);letter-spacing:.5px}
.faq-list{display:grid;gap:12px}
.faq-item{background:var(--white);border:1px solid #e3edee;overflow:hidden;transition:border-color .3s}
.faq-item.open{border-color:var(--teal)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;cursor:pointer;font-size:14px;font-weight:700;color:var(--teal-dark);list-style:none}
.faq-q .ic{width:28px;height:28px;min-width:28px;display:grid;place-items:center;background:rgba(4,106,120,.1);color:var(--teal);transition:.35s;font-size:12px}
.faq-item.open .faq-q .ic{background:var(--teal);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-a p{padding:0 24px 22px;font-size:13.5px;line-height:1.9;color:var(--muted)}

@media(max-width:1024px){
  .ab-grid,.faq-grid{grid-template-columns:1fr;gap:48px}
  .pillars-grid{grid-template-columns:1fr}
  .mv-grid{grid-template-columns:1fr}
  .ab-stats-grid{grid-template-columns:repeat(2,1fr)}
  .ab-stat:nth-child(2){border-right:0}
}
@media(max-width:560px){
  .ab-checks{grid-template-columns:1fr}
  .ab-stats-grid{grid-template-columns:1fr 1fr}
  .ab-badge{left:0}
}