/* ═══════════════════════════════════════════════════
   ABOUT.CSS — Transcon Impex Pvt Ltd
   MNC Engineering Grade · About Us Page
   ═══════════════════════════════════════════════════ */

/* ── Inner nav fix ── */
#mainNav { background: var(--charcoal-dk) !important; }

/* ═══ 1. HERO ═══════════════════════════════════════ */
.abt-hero {
  position: relative;
  min-height: 460px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--charcoal-dk);
}
.abt-hero-bg { position: absolute; inset: 0; z-index: 0; }
.abt-hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  opacity: .17;
}
.abt-hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(6,108,95,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,108,95,.06) 1px, transparent 1px);
  background-size: 52px 52px;
}
.abt-hero-ov {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(112deg, rgba(2,28,22,.97) 0%, rgba(4,50,42,.9) 55%, rgba(8,70,58,.72) 100%);
}
.abt-hero-ghost {
  position: absolute; right: -10px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--fd);
  font-size: clamp(6rem, 13vw, 12rem);
  font-weight: 700; letter-spacing: .1em;
  color: rgba(255,255,255,.03);
  white-space: nowrap; user-select: none;
  pointer-events: none; z-index: 3; line-height: 1;
}
.abt-hero-bar {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px; z-index: 10;
  background: linear-gradient(90deg, var(--teal) 0%, var(--yellow) 55%, transparent 100%);
}
.abt-hero > .container {
  position: relative; z-index: 5;
  padding-top: 160px; padding-bottom: 4rem;
}
.abt-bc {
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: 1.1rem;
  font-family: var(--fh); font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.abt-bc a { color: rgba(255,255,255,.32); transition: color .2s; }
.abt-bc a:hover { color: var(--yellow); }
.abt-bc .sep { color: rgba(255,255,255,.14); }
.abt-bc .cur { color: rgba(255,255,255,.55); }
.abt-ey {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--fh); font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 1rem;
}
.abt-ey::before { content: ''; width: 36px; height: 2px; background: var(--yellow); flex-shrink: 0; }
.abt-hero-title {
  font-family: var(--fd);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 600; color: #fff;
  line-height: 1.08; margin-bottom: .8rem;
}
.abt-hero-title em { font-style: normal; color: var(--teal-lt); }
.abt-hero-sub {
  font-size: .91rem; color: rgba(255,255,255,.48);
  max-width: 520px; line-height: 1.8; margin: 0;
}

/* ═══ 2. PROFILE SPLIT ═══════════════════════════════ */
.profile-split {
  display: grid;
  grid-template-columns: 290px 1fr;
}
@media (max-width: 767px) { .profile-split { grid-template-columns: 1fr; } }

.ps-left {
  background: var(--charcoal-dk);
  padding: 4rem 2.2rem;
  display: flex; flex-direction: column; gap: 0;
}
.ps-stat {
  padding: 2.2rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.ps-stat:first-child { padding-top: 0; }
.ps-stat:last-child { border: none; }
.ps-stat-num {
  font-family: var(--fd); font-size: 3.4rem;
  font-weight: 700; color: var(--teal-lt); line-height: 1;
  margin-bottom: .35rem;
}
.ps-stat-num sup { font-size: 1.5rem; color: var(--yellow); vertical-align: super; }
.ps-stat-label {
  font-family: var(--fh); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}
.ps-right {
  padding: 4rem 3.5rem;
  background: var(--white);
}
@media (max-width: 991px) { .ps-right { padding: 2.5rem 2rem; } }

.sec-ey {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--fh); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .8rem;
}
.sec-ey::before { content: ''; width: 26px; height: 2px; background: var(--teal); }
.sec-h2 {
  font-family: var(--fd); font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 600; color: var(--charcoal-dk); line-height: 1.15;
}
.ps-right .sec-h2 { margin-bottom: 1.4rem; }
.ps-right .sec-h2 span { color: var(--teal); }
.ps-right p {
  font-size: .9rem; color: var(--charcoal-lt);
  line-height: 1.85; margin-bottom: 1rem;
}
.ps-cert-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2rem; }
.ps-cert {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--teal-pale); border: 1px solid rgba(6,108,95,.22);
  border-radius: 4px; padding: .38rem .85rem;
  font-family: var(--fh); font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; color: var(--teal);
}
.ps-cert i { font-size: .8rem; }

/* ═══ 3. COMMITMENTS GRID ════════════════════════════ */
.sec-commit {
  padding: 5.5rem 0;
  background: var(--bg);
}
.commit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  background: var(--border);
  gap: 1px;
}
@media (max-width: 575px) { .commit-grid { grid-template-columns: 1fr; } }

.cg-cell {
  position: relative;
  padding: 3rem 2.4rem;
  background: var(--white);
  overflow: hidden;
  transition: var(--tr);
  border-left: 4px solid transparent;
}
.cg-cell:hover {
  border-left-color: var(--teal);
  padding-left: calc(2.4rem - 3px);
}
.cg-ghost {
  position: absolute; right: -10px; bottom: -16px;
  font-family: var(--fd); font-size: 7rem; font-weight: 700;
  color: rgba(6,108,95,.05);
  line-height: 1; user-select: none; pointer-events: none;
  transition: var(--tr);
}
.cg-cell:hover .cg-ghost { color: rgba(6,108,95,.1); }
.cg-num {
  font-family: var(--fd); font-size: .68rem; font-weight: 600;
  letter-spacing: .16em; color: var(--teal);
  margin-bottom: .6rem; display: block;
}
.cg-icon {
  width: 50px; height: 50px;
  background: var(--teal);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
  margin-bottom: 1.2rem;
  transition: var(--tr);
}
.cg-cell:hover .cg-icon { background: var(--teal-dk); }
.cg-cell h4 {
  font-family: var(--fh); font-weight: 700; font-size: .95rem;
  color: var(--charcoal-dk); margin-bottom: .6rem;
}
.cg-cell p {
  font-size: .85rem; color: var(--charcoal-lt);
  line-height: 1.8; margin: 0;
}

/* ═══ 4. HORIZONTAL TIMELINE ═════════════════════════ */
.sec-timeline {
  padding: 5.5rem 0;
  background: var(--charcoal-dk);
  position: relative; overflow: hidden;
}
.sec-timeline::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(6,108,95,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,108,95,.04) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}
.tl-hdr { margin-bottom: 4rem; }
.tl-hdr .sec-ey { color: var(--yellow); }
.tl-hdr .sec-ey::before { background: var(--yellow); }
.tl-hdr .sec-h2 { color: #fff; }
.htl-scroll {
  overflow-x: auto;
  padding-bottom: 1rem;
  scrollbar-width: thin;
  scrollbar-color: var(--teal) rgba(255,255,255,.06);
}
.htl-track {
  display: flex;
  min-width: max-content;
  position: relative;
}
.htl-track::before {
  content: '';
  position: absolute;
  top: 9px; left: 0; right: 0;
  height: 2px;
  background: rgba(6,108,95,.3);
  z-index: 0;
}
.htl-item {
  min-width: 220px;
  padding-top: 3.5rem;
  padding-right: 2.5rem;
  position: relative; flex-shrink: 0;
}
.htl-dot {
  position: absolute; top: 0; left: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--teal);
  border: 3px solid var(--charcoal-dk);
  box-shadow: 0 0 0 2px var(--teal);
  z-index: 1;
}
.htl-item.active .htl-dot {
  background: var(--yellow);
  box-shadow: 0 0 0 2px var(--yellow);
}
.htl-yr {
  font-family: var(--fd); font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-lt); margin-bottom: .5rem;
}
.htl-item.active .htl-yr { color: var(--yellow); }
.htl-item h5 {
  font-family: var(--fh); font-weight: 700; font-size: .88rem;
  color: #fff; margin-bottom: .4rem;
}
.htl-item p {
  font-size: .81rem; color: rgba(255,255,255,.38);
  line-height: 1.72; margin: 0;
}

/* ═══ 5. LEADERSHIP ══════════════════════════════════ */
.sec-leaders { padding: 5.5rem 0; background: var(--white); }
.ldr-card {
  border: 1px solid var(--border);
  border-radius: var(--rl);
  overflow: hidden;
  height: 100%;
  transition: var(--tr);
}
.ldr-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-m);
  transform: translateY(-5px);
}
.ldr-head {
  background: var(--charcoal-dk);
  padding: 1.7rem 2rem;
  display: flex; align-items: center; gap: 1.1rem;
}
.ldr-av {
  width: 58px; height: 58px; min-width: 58px;
  border-radius: 50%;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fd); font-weight: 600; font-size: 1.3rem;
  border: 2px solid rgba(6,108,95,.5);
}
.ldr-head small {
  display: block; font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; font-family: var(--fh); font-weight: 700;
  color: var(--teal-lt); margin-bottom: .28rem;
}
.ldr-head strong {
  display: block; font-family: var(--fh); font-weight: 700;
  font-size: .95rem; color: #fff;
}
.ldr-body { padding: 1.8rem 2rem; }
.ldr-qual {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--fh); font-size: .68rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal); background: var(--teal-pale);
  border-radius: 4px; padding: .28rem .7rem;
  margin-bottom: 1.1rem;
}
.ldr-body p {
  font-size: .85rem; color: var(--charcoal-lt);
  line-height: 1.8; margin-bottom: 1rem;
}
.ldr-contacts a {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--fh); font-size: .78rem; font-weight: 600;
  color: var(--teal); margin-right: .75rem; margin-bottom: .3rem;
  transition: color .2s;
}
.ldr-contacts a:hover { color: var(--teal-dk); }

/* ═══ 6. ROTEX PARTNER ═══════════════════════════════ */
.sec-rotex {
  padding: 5.5rem 0;
  background: var(--charcoal-dk);
  position: relative; overflow: hidden;
}
.sec-rotex::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(6,108,95,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,108,95,.05) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none;
}
.rtx-ghost {
  position: absolute; top: 50%; right: -30px;
  transform: translateY(-50%);
  font-family: var(--fd); font-size: clamp(5rem, 10vw, 10rem);
  font-weight: 700; letter-spacing: .1em;
  color: rgba(255,255,255,.025);
  user-select: none; pointer-events: none; white-space: nowrap;
}
.rtx-ey {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--fh); font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: .8rem;
}
.rtx-ey::before { content: ''; width: 26px; height: 2px; background: var(--yellow); }
.sec-rotex h2 {
  font-family: var(--fd); font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 600; color: #fff; line-height: 1.15; margin-bottom: 1.2rem;
}
.sec-rotex p {
  font-size: .9rem; color: rgba(255,255,255,.48);
  line-height: 1.82; margin-bottom: .75rem;
}
.rtx-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.rtx-list li {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: .86rem; color: rgba(255,255,255,.58);
  padding: .6rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  line-height: 1.6;
}
.rtx-list li:last-child { border: none; }
.rtx-list li i { color: var(--teal-lt); font-size: .8rem; margin-top: 3px; flex-shrink: 0; }
.rtx-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.rtx-tag {
  background: rgba(6,108,95,.18); border: 1px solid rgba(6,108,95,.35);
  color: rgba(255,255,255,.62); font-family: var(--fh); font-weight: 600;
  font-size: .67rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .72rem; border-radius: 3px; transition: var(--tr);
}
.rtx-tag:hover { background: rgba(6,108,95,.4); color: #fff; }
.btn-outline-yellow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--fh); font-weight: 700; font-size: .78rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--yellow); border: 2px solid var(--yellow);
  padding: .72rem 1.6rem; border-radius: var(--r);
  transition: var(--tr); margin-top: 1.5rem;
}
.btn-outline-yellow:hover { background: var(--yellow); color: var(--charcoal-dk); }
/* ═══════════════════════════════════════════════════
   ABOUT COMPANY — REDESIGNED
   ═══════════════════════════════════════════════════ */

.about-profile {
  position: relative;
  background: #fff;
}


/* ─────────────────────────────────────────────
   COMPANY INTRODUCTION
   ───────────────────────────────────────────── */

.about-company {
  position: relative;
  padding: 5.5rem 0 4.8rem;
  background: #fff;
  overflow: hidden;
}

/* subtle industrial background detail */
.about-company::after {
  content: "TRANSCON";
  position: absolute;
  right: -30px;
  bottom: -55px;

  font-family: var(--fd);
  font-size: clamp(7rem, 15vw, 13rem);
  font-weight: 700;
  letter-spacing: .08em;

  color: rgba(6,108,95,.025);

  line-height: 1;
  pointer-events: none;
  user-select: none;
}


.about-company-inner {
  position: relative;
  z-index: 2;
  max-width: 1050px;
}


/* heading */

.about-company-title {
  font-family: var(--fd);
  font-size: clamp(2rem, 3.5vw, 3.1rem);
  font-weight: 600;

  color: var(--charcoal-dk);

  line-height: 1.12;
  margin: 0 0 1.7rem;
}

.about-company-title span {
  color: var(--teal);
}


/* body copy */

.about-company-copy {
  max-width: 980px;
}

.about-company-copy p {
  font-size: .94rem;
  line-height: 1.9;

  color: var(--charcoal-lt);

  margin: 0 0 1rem;
}

.about-company-copy strong {
  color: var(--charcoal-dk);
  font-weight: 600;
}


/* ─────────────────────────────────────────────
   THREE KEY STRENGTHS
   ───────────────────────────────────────────── */

.about-strengths {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 0;

  margin-top: 2.5rem;

  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}


.about-strength {
  display: flex;
  align-items: center;

  gap: .8rem;

  padding: 1rem 2rem 1rem 0;
  margin-right: 2rem;

  font-family: var(--fh);
  font-size: .76rem;
  font-weight: 700;

  letter-spacing: .06em;
  text-transform: uppercase;

  color: var(--charcoal-dk);
}


.about-strength:not(:last-child) {
  border-right: 1px solid var(--border);
}


.strength-icon {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--teal);
  color: #fff;

  border-radius: 4px;

  font-size: .82rem;
}


/* ═══════════════════════════════════════════════════
   TRANSCON AT A GLANCE
   ═══════════════════════════════════════════════════ */

.transcon-glance {
  position: relative;

  padding: 3.4rem 0;

  background: var(--charcoal-dk);

  border-top: 4px solid var(--teal);

  overflow: hidden;
}


/* subtle engineering grid */

.transcon-glance::before {
  content: "";

  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);

  background-size: 52px 52px;

  pointer-events: none;
}


.transcon-glance .container {
  position: relative;
  z-index: 2;
}


/* header */

.glance-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 2rem;

  padding-bottom: 1.7rem;
  margin-bottom: 0;

  border-bottom: 1px solid rgba(255,255,255,.1);
}


.glance-eyebrow {
  display: block;

  font-family: var(--fh);
  font-size: .63rem;
  font-weight: 700;

  letter-spacing: .17em;
  text-transform: uppercase;

  color: var(--yellow);

  margin-bottom: .45rem;
}


.glance-heading h3 {
  font-family: var(--fd);

  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 600;

  color: #fff;

  margin: 0;
}


.glance-heading p {
  max-width: 390px;

  font-size: .85rem;
  line-height: 1.7;

  color: rgba(255,255,255,.46);

  margin: 0 0 .2rem;
}


/* ─────────────────────────────────────────────
   STATS
   ───────────────────────────────────────────── */

.glance-grid {
  display: grid;

  grid-template-columns:
    .8fr
    .9fr
    1.15fr
    .9fr
    1.8fr;

  align-items: stretch;
}


.glance-stat {
  position: relative;

  min-height: 145px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 1.7rem 1.5rem 1.7rem 0;

  border-right: 1px solid rgba(255,255,255,.09);
}


.glance-stat:not(:first-child) {
  padding-left: 1.5rem;
}


.glance-number {
  font-family: var(--fd);

  font-size: 2.8rem;
  font-weight: 700;

  line-height: 1;

  color: var(--teal-lt);

  margin-bottom: .55rem;
}


.glance-number span {
  font-size: 1.3rem;

  color: var(--yellow);

  vertical-align: top;

  margin-left: 2px;
}


.glance-label {
  font-family: var(--fh);

  font-size: .68rem;
  font-weight: 700;

  letter-spacing: .1em;
  text-transform: uppercase;

  color: rgba(255,255,255,.72);
}


.glance-small {
  font-size: .67rem;

  color: rgba(255,255,255,.32);

  margin-top: .3rem;
}


/* ─────────────────────────────────────────────
   PARTNER MESSAGE
   ───────────────────────────────────────────── */

.glance-partner {
  min-height: 145px;

  display: flex;
  align-items: center;

  gap: 1rem;

  padding: 1.7rem 0 1.7rem 2rem;
}


.partner-icon {
  width: 48px;
  height: 48px;

  flex: 0 0 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(251,224,11,.5);

  color: var(--yellow);

  border-radius: 50%;

  font-size: 1rem;
}


.glance-partner strong {
  display: block;

  font-family: var(--fh);

  font-size: .83rem;
  font-weight: 700;

  color: #fff;

  margin-bottom: .35rem;
}


.glance-partner span {
  display: block;

  font-size: .72rem;
  line-height: 1.6;

  color: rgba(255,255,255,.38);
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 991px) {

  .about-company {
    padding: 4rem 0;
  }

  .glance-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: .7rem;
  }

  .glance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .glance-stat {
    border-bottom: 1px solid rgba(255,255,255,.09);
  }

  .glance-stat:nth-child(2n) {
    border-right: none;
  }

  .glance-partner {
    grid-column: 1 / -1;

    border-top: 1px solid rgba(255,255,255,.09);

    padding-left: 0;
  }

}


@media (max-width: 767px) {

  .about-company {
    padding: 3.5rem 0;
  }

  .about-company-title {
    font-size: 2rem;
  }

  .about-strengths {
    display: block;
  }

  .about-strength {
    margin: 0;
    padding: .85rem 0;

    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }

  .about-strength:last-child {
    border-bottom: none;
  }

}


@media (max-width: 575px) {

  .transcon-glance {
    padding: 2.8rem 0;
  }

  .glance-grid {
    grid-template-columns: 1fr 1fr;
  }

  .glance-stat {
    min-height: 125px;
    padding: 1.4rem 1rem 1.4rem 0;
  }

  .glance-stat:not(:first-child) {
    padding-left: 1rem;
  }

  .glance-number {
    font-size: 2.25rem;
  }

  .glance-label {
    font-size: .61rem;
  }

  .glance-partner {
    grid-column: 1 / -1;
    min-height: auto;
    padding: 1.6rem 0 0;
  }

}