/* ══════════════════════════════════════════
   PAGE-ABOUT — styles specific to about.html
══════════════════════════════════════════ */

/* ── Page banner (replaces full-screen hero) ── */
.page-banner {
  background: var(--navy-dk);
  padding: 9rem 5% 5rem;
  position: relative;
  overflow: hidden;
}
.page-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='78'%3E%3Cpath d='M45 2 L83 23 L83 65 L45 86 L7 65 L7 23 Z' fill='none' stroke='rgba(42,181,160,0.07)' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 90px 78px;
  pointer-events: none;
}
.page-banner-inner {
  max-width: 1220px; margin: 0 auto; position: relative; z-index: 1;
}
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(255,255,255,.3);
  margin-bottom: 1.4rem;
}
.breadcrumb a       { color: rgba(255,255,255,.3); transition: color .2s; }
.breadcrumb a:hover { color: var(--teal-lt); }
.breadcrumb span    { color: var(--teal-lt); }
.breadcrumb-sep     { font-size: .5rem; }

.page-banner h1 {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 700; line-height: .95; letter-spacing: 1px; text-transform: uppercase;
  color: #fff; margin-bottom: 1.2rem;
}
.page-banner h1 span {
  background: linear-gradient(135deg, var(--teal-lt), var(--teal));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-banner p {
  font-size: 1rem; color: rgba(255,255,255,.5); max-width: 540px; line-height: 1.75;
}
.banner-decor {
  position: absolute; right: 5%; top: 50%; transform: translateY(-50%);
  opacity: .06; pointer-events: none;
}

/* ── Story section ── */
#about-story {
  background: var(--bg-lt); padding: 7rem 5%;
  position: relative; overflow: hidden;
}
.story-inner {
  max-width: 1220px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center;
}
.story-text .sec-title { color: var(--navy); margin-bottom: 1.4rem; }
.story-text p          { color: var(--muted); line-height: 1.82; font-size: .91rem; margin-bottom: 1.2rem; }
.story-stats {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; margin-top: 2.2rem;
}
.story-stat { text-align: center; background: #fff; border: 1px solid var(--border); border-radius: 3px; padding: 1.3rem 1rem; }
.story-stat .val { font-family: 'Rajdhani', sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--teal); line-height: 1; }
.story-stat .lbl { font-size: .62rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

.story-visual { position: relative; }
.story-visual-frame { position: relative; border-radius: 3px; }
.story-visual-frame::after {
  content: ''; position: absolute; bottom: -12px; right: -12px;
  width: 100%; height: 100%; border: 2px solid var(--teal); border-radius: 3px; z-index: 0; pointer-events: none;
}
.story-img-box {
  position: relative; z-index: 1; border-radius: 3px; overflow: hidden; aspect-ratio: 4/3;
  background: linear-gradient(160deg, #07111E 0%, #0C1F35 40%, #092D45 70%, #0A1F32 100%);
}
.story-img-box svg { display: block; }

/* ── Mission & Vision ── */
#mv-section {
  background: var(--navy); padding: 7rem 5%; position: relative; overflow: hidden;
}
.mv-inner {
  max-width: 1220px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
}
.mv-card {
  border: 1px solid rgba(42,181,160,.15); border-radius: 4px; padding: 2.8rem;
  background: rgba(255,255,255,.03); position: relative; overflow: hidden;
}
.mv-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.mv-card.mission::before { background: linear-gradient(90deg, var(--orange), var(--red)); }
.mv-card.vision::before  { background: linear-gradient(90deg, var(--teal), var(--teal-lt)); }
.mv-icon {
  width: 52px; height: 52px; border-radius: 3px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 1.5rem;
}
.mv-icon.fire { background: rgba(247,148,29,.12); }
.mv-icon.teal { background: rgba(42,181,160,.12); }
.mv-card h3 {
  font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 700;
  color: #fff; letter-spacing: 2px; text-transform: uppercase; margin-bottom: .9rem;
}
.mv-card p { font-size: .88rem; color: rgba(255,255,255,.45); line-height: 1.8; }
.mv-bg-hex { position: absolute; right: -60px; bottom: -60px; opacity: .03; pointer-events: none; }

/* ── Core Values ── */
#values-section {
  background: #fff; padding: 7rem 5%;
}
.values-inner { max-width: 1220px; margin: 0 auto; }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3rem; }
.value-card {
  border: 1px solid var(--border); border-radius: 4px; padding: 2rem 1.6rem;
  text-align: center; transition: var(--t);
}
.value-card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: rgba(42,181,160,.25); }
.value-icon-wrap {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.value-card h4 {
  font-family: 'Rajdhani', sans-serif; font-size: 1.05rem; font-weight: 700;
  color: var(--navy); letter-spacing: 1px; text-transform: uppercase; margin-bottom: .5rem;
}
.value-card p { font-size: .8rem; color: var(--muted); line-height: 1.65; }

/* ── Timeline ── */
#timeline-section {
  background: var(--navy-dk); padding: 7rem 5%;
}
.timeline-inner { max-width: 1000px; margin: 0 auto; }
.timeline       { position: relative; margin-top: 3.5rem; padding-left: 2rem; }
.timeline::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: linear-gradient(to bottom, var(--teal) 0%, rgba(42,181,160,.1) 100%);
}
.tl-item { position: relative; padding: 0 0 3rem 2.5rem; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute; left: -2rem; top: 3px; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--teal);
  background: var(--navy-dk);
}
.tl-dot.active { background: var(--teal); box-shadow: 0 0 0 4px rgba(42,181,160,.15); }
.tl-year {
  font-family: 'Rajdhani', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; color: var(--orange); margin-bottom: .4rem;
}
.tl-item h4 {
  font-family: 'Rajdhani', sans-serif; font-size: 1.15rem; font-weight: 700;
  color: #fff; margin-bottom: .45rem; letter-spacing: .5px;
}
.tl-item p { font-size: .84rem; color: rgba(255,255,255,.38); line-height: 1.65; max-width: 560px; }

/* ── Certifications ── */
#certs-section {
  background: var(--bg-lt); padding: 7rem 5%;
}
.certs-inner { max-width: 1220px; margin: 0 auto; }
.certs-grid  { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 3rem; }
.cert-card {
  background: #fff; border: 1px solid var(--border); border-radius: 4px;
  padding: 2rem 1.5rem; text-align: center; transition: var(--t);
}
.cert-card:hover { box-shadow: var(--sh-md); border-color: rgba(42,181,160,.25); }
.cert-badge {
  width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(42,181,160,.12), rgba(42,181,160,.05));
  border: 2px solid rgba(42,181,160,.2);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
  font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; color: var(--teal);
  letter-spacing: 1px;
}
.cert-card h4 { font-family: 'Rajdhani', sans-serif; font-size: .95rem; font-weight: 700; color: var(--navy); margin-bottom: .4rem; }
.cert-card p  { font-size: .77rem; color: var(--muted); line-height: 1.55; }

/* ── CTA strip ── */
.about-cta-strip {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-md) 100%);
  padding: 5rem 5%; text-align: center; position: relative; overflow: hidden;
}
.about-cta-strip::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(42,181,160,.08) 0%, transparent 70%);
  pointer-events: none;
}
.about-cta-strip h2 {
  font-family: 'Rajdhani', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 700; color: #fff; letter-spacing: .5px; margin-bottom: .8rem; position: relative;
}
.about-cta-strip p  { font-size: .9rem; color: rgba(255,255,255,.45); margin-bottom: 2rem; position: relative; }
.about-cta-strip .cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; }

/* ── Nav active state (about page) ── */
.nav-active { color: var(--teal) !important; }

/* ══════════════════════════════════════════
   RESPONSIVE overrides for about page
══════════════════════════════════════════ */
@media (max-width: 1100px) {
  .story-inner { grid-template-columns: 1fr; }
  .mv-inner    { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: repeat(2,1fr); }
  .certs-grid  { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 680px) {
  .values-grid { grid-template-columns: 1fr 1fr; }
  .certs-grid  { grid-template-columns: 1fr 1fr; }
  .story-stats { grid-template-columns: 1fr; }
  .banner-decor { display: none; }
}