/* ============================================================
   INDUS HOLDINGS — About Us Page Styles (about.css)
   Depends on: style.css, header.css, footer.css
   ============================================================ */

/* ── PAGE HERO ── */
.page-hero {
   margin-top: 0px;
  min-height: 460px;
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  padding: 90px 60px 100px;
}
.page-hero-bg         { position: absolute; inset: 0; }
.page-hero-bg-base    {
  position: absolute; inset: 0;
  background: linear-gradient(155deg, #060e1a 0%, #0d2a40 40%, #061a0f 75%, #0b2e14 100%);
}
.page-hero-bg-glow    {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 80% at 5%  50%, rgba(21,101,168,.55) 0%, transparent 58%),
    radial-gradient(ellipse 45% 65% at 92% 45%, rgba(38,194,101,.40) 0%, transparent 58%),
    radial-gradient(ellipse 30% 40% at 50% 100%,rgba(36,133,204,.20) 0%, transparent 60%);
  animation: breathe 8s ease-in-out infinite alternate;
}
.page-hero-bg-grid    {
  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: 60px 60px;
}
.page-hero-sweep {
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.015) 50%, transparent 60%);
  animation: sweep 7s ease-in-out infinite;
}
.hero-bottom-line { position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--grad); }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: 20px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75);
  letter-spacing: 2px; text-transform: uppercase;
  margin-bottom: 24px; animation: fadeUp .7s .1s both;
}
.hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--grad); }

.page-hero-content    { position: relative; z-index: 2; max-width: 680px; }
.page-hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6vw, 70px); font-weight: 700;
  color: #fff; line-height: 1.05; letter-spacing: -1px;
  animation: fadeUp .7s .2s both;
}
.page-hero-content h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #5AAEE0, #6DD9A0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.page-hero-sub {
  margin-top: 18px; font-size: 17px; font-weight: 300;
  color: rgba(255,255,255,.6); line-height: 1.75; max-width: 520px;
  animation: fadeUp .7s .3s both;
}

/* Floating stat cards */
.hero-float-stats {
  position: absolute; right: 60px; top: 50%; transform: translateY(-50%);
  z-index: 2; display: flex; flex-direction: column; gap: 14px;
  animation: fadeIn .8s .4s both;
}
.float-stat {
  background: rgba(255,255,255,.08); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.13); border-radius: 16px;
  padding: 20px 28px; min-width: 200px;
  transition: background .3s;
}
.float-stat:hover { background: rgba(255,255,255,.14); }
.float-stat-num {
  font-family: var(--font-display); font-size: 38px; font-weight: 700; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.float-stat-label { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 6px; }

/* ── SECTIONS SHARED ── */
.section { padding: 100px 60px; }
.inner   { max-width: 1100px; margin: 0 auto; }

/* ── WHO WE ARE ── */
.who { background: #fff; }
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.who-body { margin-top: 24px; font-size: 15px; color: var(--slate); line-height: 1.8; }
.who-body p + p { margin-top: 16px; }

.chairman-quote-card {
  margin-top: 36px; display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 24px; border-radius: 14px;
  background: var(--cloud); position: relative;
}
.chairman-quote-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--grad); border-radius: 3px 0 0 3px;
}
.cq-avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #fff;
  box-shadow: 0 6px 18px rgba(21,101,168,.3);
}
.cq-name  { font-size: 15px; font-weight: 700; color: var(--charcoal); }
.cq-title { font-size: 12px; color: var(--silver); margin-top: 2px; }
.cq-text  { font-size: 13px; font-style: italic; color: var(--slate); margin-top: 8px; line-height: 1.55; }

/* Who — right visual */
.who-visual { position: relative; padding-bottom: 36px; }
.who-main-card {
  border-radius: 24px; background: var(--grad);
  padding: 52px 44px; min-height: 400px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.who-main-card::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(255,255,255,.04) 28px, rgba(255,255,255,.04) 29px);
}
.who-geo1 { position: absolute; top: -40px; right: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); }
.who-geo2 { position: absolute; top:  20px; right:  20px; width:  90px; height:  90px; border-radius: 50%; background: rgba(255,255,255,.05); }
.who-main-card h3 { font-family: var(--font-display); font-size: 36px; font-weight: 700; color: #fff; line-height: 1.15; position: relative; z-index: 1; }
.who-main-card p  { margin-top: 12px; font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.65; position: relative; z-index: 1; }

.who-float-badge {
  position: absolute; bottom: 0; left: -28px;
  background: #fff; border-radius: 18px; padding: 20px 26px;
  box-shadow: 0 20px 50px rgba(0,0,0,.14); z-index: 2;
}
.who-float-num {
  font-family: var(--font-display); font-size: 42px; font-weight: 700; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.who-float-lbl { font-size: 13px; color: var(--silver); margin-top: 4px; }

/* ── VISION & MISSION ── */
.vision-mission { background: var(--cloud); }
.vm-intro { text-align: center; max-width: 560px; margin: 0 auto 52px; }
.vm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.vm-card { border-radius: 22px; padding: 44px 40px; overflow: hidden; position: relative; }
.vm-card.vision  { background: var(--grad); color: #fff; }
.vm-card.mission { background: #fff; border: 1px solid rgba(21,101,168,.1); box-shadow: 0 4px 24px rgba(0,0,0,.05); }
.vm-card::before { content: ''; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255,255,255,.07); }
.vm-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; margin-bottom: 22px;
}
.vm-card.vision  .vm-icon { background: rgba(255,255,255,.18); }
.vm-card.mission .vm-icon { background: var(--grad); box-shadow: 0 6px 20px rgba(21,101,168,.3); }
.vm-card h3 { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1.1; }
.vm-card.vision  h3 { color: #fff; }
.vm-card.mission h3 { color: var(--charcoal); }
.vm-card p { margin-top: 16px; font-size: 15px; line-height: 1.75; }
.vm-card.vision  p { color: rgba(255,255,255,.75); }
.vm-card.mission p { color: var(--slate); }

/* ── CORE VALUES ── */
.values { background: #fff; }
.values-header { text-align: center; max-width: 560px; margin: 0 auto 52px; }
.values-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.val-card {
  border-radius: 20px; padding: 30px 20px;
  background: var(--cloud); border: 1px solid rgba(21,101,168,.07);
  text-align: center;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.val-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(21,101,168,.13);
  border-color: rgba(21,101,168,.22);
}
.val-card:hover .val-icon { transform: scale(1.1) rotate(-3deg); }
.val-icon {
  width: 58px; height: 58px; border-radius: 17px;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; margin: 0 auto 16px;
  box-shadow: 0 8px 20px rgba(21,101,168,.28);
  transition: transform .3s;
}
.val-card h4 { font-size: 14px; font-weight: 700; color: var(--charcoal); line-height: 1.3; }
.val-card p  { margin-top: 10px; font-size: 13px; color: var(--silver); line-height: 1.55; }

/* ── STRATEGY PILLARS ── */
.pillars { background: var(--charcoal); position: relative; overflow: hidden; }
.pillars::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 70% at 0%   60%, rgba(21,101,168,.28) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 100% 40%, rgba(38,194,101,.18) 0%, transparent 55%);
}
.pillars-inner { position: relative; z-index: 1; }
.pillars-header { margin-bottom: 52px; }
.pillars-header .sec-title { color: #fff; }

.pillar-item {
  display: grid; grid-template-columns: 72px 1fr;
  gap: 28px; align-items: start;
  padding: 32px 0; border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .2s;
}
.pillar-item:last-child { border-bottom: none; }
.pillar-num {
  font-family: var(--font-display); font-size: 52px; font-weight: 700;
  line-height: 1; color: rgba(255,255,255,.12);
  transition: background .3s;
  -webkit-background-clip: text; background-clip: text;
}
.pillar-item:hover .pillar-num {
  background: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.pillar-content h3 {
  font-size: 20px; font-weight: 600; color: rgba(255,255,255,.9);
  display: flex; align-items: center; gap: 12px;
}
.p-icon {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.pillar-content p { margin-top: 10px; font-size: 15px; color: rgba(255,255,255,.45); line-height: 1.7; max-width: 600px; }

/* ── CHAIRMAN MESSAGE ── */
.chairman-msg { background: var(--charcoal); padding: 100px 60px; position: relative; overflow: hidden; }
.chairman-msg::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 70% at 0%   50%, rgba(21,101,168,.32) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 100% 50%, rgba(38,194,101,.20) 0%, transparent 55%);
}
.chairman-msg::after {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-55deg, transparent, transparent 40px, rgba(255,255,255,.015) 40px, rgba(255,255,255,.015) 41px);
}
.chairman-msg-grid {
  max-width: 1100px; margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: 340px 1fr; gap: 80px; align-items: start;
}

/* Photo side */
.chairman-photo-wrap { display: flex; flex-direction: column; align-items: center; gap: 0; }
.chairman-photo-frame { position: relative; width: 100%; }
.chairman-photo-frame::before {
  content: ''; position: absolute;
  top: -12px; left: -12px; right: 12px; bottom: 12px;
  border-radius: 24px; background: var(--grad); opacity: .35; z-index: 0;
}
.chairman-photo-frame::after {
  content: ''; position: absolute;
  top: 12px; left: 12px; right: -12px; bottom: -12px;
  border-radius: 24px; border: 1px solid rgba(255,255,255,.1); z-index: 0;
}
.chairman-photo-placeholder {
  width: 100%; aspect-ratio: 3/4; border-radius: 20px;
  position: relative; z-index: 1;
  background: linear-gradient(160deg, #1a2f4a 0%, #0d3420 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  overflow: hidden;
}
.chairman-photo-placeholder::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255,255,255,.03) 20px, rgba(255,255,255,.03) 21px);
}
.chairman-initials {
  width: 100px; height: 100px; border-radius: 50%;
  background: var(--grad); position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 42px; font-weight: 700; color: #fff;
  box-shadow: 0 12px 40px rgba(21,101,168,.5);
  border: 3px solid rgba(255,255,255,.2);
}
/* Real photo version — uncomment and replace placeholder */
/* .chairman-photo-real { width:100%; aspect-ratio:3/4; border-radius:20px; object-fit:cover; object-position:center top; position:relative; z-index:1; } */
.chairman-placeholder-lbl { font-size: 12px; color: rgba(255,255,255,.35); letter-spacing: .5px; position: relative; z-index: 1; text-align: center; }

.chairman-nameplate {
  margin-top: 20px; text-align: center; width: 100%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 18px 20px;
}
.chairman-nameplate h3 { font-size: 20px; font-weight: 700; color: #fff; }
.chairman-nameplate p {
  font-size: 13px; margin-top: 4px; font-weight: 600; letter-spacing: .3px;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Message side */
.chairman-msg-body {}
.chairman-msg-body .sec-title { color: #fff; }
.big-quote {
  font-family: var(--font-display); font-size: 100px; font-weight: 700; line-height: .8;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: -10px; display: block; margin-top: 20px;
}
.chairman-paragraphs { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.chairman-paragraphs p { font-size: 15px; color: rgba(255,255,255,.65); line-height: 1.85; }
.chairman-paragraphs p.highlight {
  font-size: 18px; font-style: italic; font-weight: 300;
  color: rgba(255,255,255,.85); padding-left: 20px; position: relative;
}
.chairman-paragraphs p.highlight::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--grad); border-radius: 3px;
}
.chairman-sig {
  margin-top: 32px; display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; border-radius: 14px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
.chairman-sig-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #fff;
}
.chairman-sig h4 { font-size: 16px; font-weight: 700; color: #fff; }
.chairman-sig p  { font-size: 13px; color: rgba(255,255,255,.45); margin-top: 2px; }

/* ── TEAM SECTION ── */
.team-section { background: #fff; padding: 100px 60px; }
.team-inner   { max-width: 1100px; margin: 0 auto; }
.team-header  { text-align: center; max-width: 560px; margin: 0 auto 60px; }
.team-header p { font-size: 16px; color: var(--silver); margin-top: 14px; line-height: 1.7; }

/* Chairman featured card */
.team-chairman-row { display: flex; justify-content: center; margin-bottom: 44px; }
.chairman-card-big {
  width: 360px; border-radius: 28px; overflow: hidden;
  background: var(--charcoal);
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
  transition: transform .35s, box-shadow .35s;
  position: relative;
}
.chairman-card-big:hover { transform: translateY(-10px); box-shadow: 0 36px 90px rgba(21,101,168,.32); }
.chairman-card-big::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad); z-index: 2;
}
.ccb-photo {
  height: 360px; position: relative; overflow: hidden;
  background: linear-gradient(160deg, #1a2f4a 0%, #0d3420 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ccb-photo::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 22px, rgba(255,255,255,.03) 22px, rgba(255,255,255,.03) 23px);
}
.ccb-photo::after {
  content: ''; position: absolute; bottom: -60px; right: -60px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(38,194,101,.07);
}
.ccb-tag {
  position: absolute; top: 18px; right: 18px; z-index: 1;
  padding: 5px 16px; border-radius: 12px;
  background: var(--grad); font-size: 11px; font-weight: 700;
  color: #fff; letter-spacing: 1.5px; text-transform: uppercase;
}
.ccb-initials {
  width: 120px; height: 120px; border-radius: 50%;
  background: var(--grad); position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 48px; font-weight: 700; color: #fff;
  box-shadow: 0 16px 48px rgba(21,101,168,.55);
  border: 4px solid rgba(255,255,255,.15); margin-bottom: 12px;
}
.ccb-photo-lbl { font-size: 12px; color: rgba(255,255,255,.3); position: relative; z-index: 1; letter-spacing: .5px; }
.ccb-body { padding: 26px 30px 30px; }
.ccb-name  { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: #fff; }
.ccb-role  { display: inline-block; margin-top: 8px; padding: 5px 16px; border-radius: 10px; background: var(--grad); font-size: 12px; font-weight: 600; color: #fff; }
.ccb-bio   { font-size: 13.5px; color: rgba(255,255,255,.5); margin-top: 14px; line-height: 1.65; }

/* Team grid wrap — 3 + 2 */
.team-grid-wrap { display: flex; flex-direction: column; gap: 22px; }
.team-row-top    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.team-row-bottom {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
  max-width: calc(66.666% - 7px); margin: 0 auto; width: 100%;
}

/* Individual member card */
.team-card {
  border-radius: 22px; overflow: hidden;
  background: var(--cloud); border: 1px solid rgba(21,101,168,.08);
  transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s;
}
.team-card:hover { transform: translateY(-10px); box-shadow: 0 28px 70px rgba(21,101,168,.16); }
.team-card:hover .tc-photo-area { background-position: right center; }
.team-card:hover .tc-inner { transform: scale(1.04); }
.team-card:hover .tc-initials { transform: scale(1.06); box-shadow: 0 14px 48px rgba(0,0,0,.28); }

.tc-photo-area {
  height: 280px; overflow: hidden;
  background: var(--grad);
  background-size: 200% 200%; background-position: left center;
  transition: background-position .6s;
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.tc-photo-area::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 22px, rgba(255,255,255,.045) 22px, rgba(255,255,255,.045) 23px);
}
.tc-photo-area::after {
  content: ''; position: absolute; bottom: -40px; right: -40px;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.tc-inner {
  position: relative; z-index: 1;
  transition: transform .4s;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.tc-number {
  position: absolute; top: 14px; left: 16px;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.35);
  letter-spacing: 1.5px; z-index: 2;
}
.tc-initials {
  width: 190px; height: 190px; border-radius: 50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(12px);
  border: 4px solid rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 72px; font-weight: 700; color: #fff;
  box-shadow: 0 12px 48px rgba(0,0,0,.28), 0 0 0 8px rgba(255,255,255,.07);
  transition: transform .3s, box-shadow .3s;
}
/* Swap placeholder with real photo: */
/* .tc-real-photo { width:100%; height:100%; object-fit:cover; object-position:center top; position:absolute; inset:0; } */
.tc-placeholder-txt { font-size: 12px; color: rgba(255,255,255,.45); letter-spacing: .5px; }
.tc-body  { padding: 26px 28px 28px; }
.tc-name  { font-family: var(--font-display); font-size: 21px; font-weight: 700; color: var(--charcoal); line-height: 1.2; }
.tc-role  {
  display: inline-block; margin-top: 8px;
  padding: 5px 14px; border-radius: 8px;
  background: rgba(21,101,168,.08); border: 1px solid rgba(21,101,168,.15);
  font-size: 12px; font-weight: 600;
  background-image: var(--grad);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.tc-divider { height: 1px; background: rgba(21,101,168,.08); margin: 16px 0; }
.tc-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--silver); font-weight: 500;
  text-decoration: none; transition: color .2s;
}
.tc-link:hover { color: var(--blue); }

/* ── JOURNEY TIMELINE ── */
.journey { background: var(--cloud); }
.journey-header { text-align: center; max-width: 560px; margin: 0 auto 64px; }

.timeline { position: relative; max-width: 860px; margin: 0 auto; }
.timeline::before {
  content: ''; position: absolute;
  left: 50%; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, var(--blue), var(--green));
  transform: translateX(-50%); border-radius: 2px;
}

.tl-item {
  display: grid; grid-template-columns: 1fr 56px 1fr;
  gap: 0; align-items: start; margin-bottom: 52px; position: relative;
}
.tl-item:last-child { margin-bottom: 0; }

.tl-content {
  padding: 24px 28px; border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.07);
  border: 1px solid rgba(21,101,168,.07);
  transition: box-shadow .3s, transform .3s;
}
.tl-content:hover { box-shadow: 0 12px 36px rgba(21,101,168,.13); transform: translateY(-3px); }

.tl-right .tl-content { grid-column: 3; grid-row: 1; }
.tl-right .tl-dot     { grid-column: 2; grid-row: 1; }
.tl-right .tl-empty   { grid-column: 1; grid-row: 1; }
.tl-left  .tl-content { grid-column: 1; grid-row: 1; text-align: right; }
.tl-left  .tl-dot     { grid-column: 2; grid-row: 1; }
.tl-left  .tl-empty   { grid-column: 3; grid-row: 1; }

.tl-dot {
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 26px; z-index: 1;
}
.tl-dot-inner {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--grad);
  box-shadow: 0 0 0 5px var(--cloud), 0 0 0 7px rgba(21,101,168,.22);
  flex-shrink: 0;
}
.tl-empty { display: block; }
.tl-year {
  font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  text-transform: uppercase; margin-bottom: 6px; display: block;
}
.tl-content h4 { font-size: 16px; font-weight: 600; color: var(--charcoal); }
.tl-content p  { font-size: 13.5px; color: var(--silver); margin-top: 6px; line-height: 1.65; }

/* ── CSR SECTION ── */
.csr { background: #fff; }
.csr-header { text-align: center; max-width: 560px; margin: 0 auto 52px; }
.csr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.csr-card { border-radius: 22px; overflow: hidden; border: 1px solid rgba(21,101,168,.08); transition: transform .3s, box-shadow .3s; }
.csr-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(21,101,168,.12); }
.csr-card-top {
  height: 150px; background: var(--grad);
  display: flex; align-items: center; justify-content: center; font-size: 50px;
  position: relative; overflow: hidden;
}
.csr-card-top::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-45deg, transparent, transparent 20px, rgba(255,255,255,.05) 20px, rgba(255,255,255,.05) 21px); }
.csr-card-top::after  { content: ''; position: absolute; bottom: -30px; left: -30px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,255,255,.08); }
.csr-card-body { padding: 28px; background: var(--cloud); }
.csr-card-body h4 { font-size: 17px; font-weight: 700; color: var(--charcoal); }
.csr-card-body p  { font-size: 14px; color: var(--silver); margin-top: 10px; line-height: 1.65; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .chairman-msg-grid { grid-template-columns: 280px 1fr; gap: 56px; }
}
@media (max-width: 1024px) {
  .who-grid         { grid-template-columns: 1fr; gap: 48px; }
  .vm-grid          { grid-template-columns: 1fr; }
  .values-grid      { grid-template-columns: repeat(3, 1fr); }
  .chairman-msg-grid{ grid-template-columns: 1fr; gap: 48px; }
  .chairman-photo-wrap { max-width: 320px; margin: 0 auto; }
  .hero-float-stats { display: none; }
  .team-row-top     { grid-template-columns: repeat(3, 1fr); }
  .team-row-bottom  { max-width: 100%; grid-template-columns: repeat(2, 1fr); }
  .csr-grid         { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .section          { padding: 64px 24px; }
  .page-hero        { padding: 70px 24px 80px; min-height: 380px; }
  .values-grid      { grid-template-columns: repeat(2, 1fr); }
  .pillar-item      { grid-template-columns: 52px 1fr; gap: 20px; }
  .pillar-num       { font-size: 40px; }
  .chairman-msg     { padding: 64px 24px; }
  .team-section     { padding: 64px 24px; }
  .chairman-card-big{ width: 100%; max-width: 360px; }
  .team-row-top     { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .team-row-bottom  { grid-template-columns: repeat(2, 1fr); max-width: 100%; gap: 16px; }
  .tc-photo-area    { height: 240px; }
  .tc-initials      { width: 160px; height: 160px; font-size: 60px; }
  .timeline::before { left: 20px; transform: none; }
  .tl-item          { grid-template-columns: 44px 1fr !important; margin-bottom: 28px; }
  .tl-dot,
  .tl-right .tl-dot,
  .tl-left  .tl-dot { grid-column: 1 !important; grid-row: 1 !important; padding-top: 20px; justify-content: center; }
  .tl-content,
  .tl-right .tl-content,
  .tl-left  .tl-content { grid-column: 2 !important; grid-row: 1 !important; text-align: left !important; }
  .tl-empty,
  .tl-right .tl-empty,
  .tl-left  .tl-empty   { display: none !important; }
  .csr-grid         { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .values-grid      { grid-template-columns: 1fr 1fr; }
  .team-row-top     { grid-template-columns: 1fr; }
  .team-row-bottom  { grid-template-columns: 1fr; }
  .tc-photo-area    { height: 280px; }
  .tc-initials      { width: 190px; height: 190px; font-size: 72px; }
  .ccb-photo        { height: 300px; }
  .timeline::before { left: 16px; }
  .tl-item          { grid-template-columns: 36px 1fr !important; gap: 0 10px; }
  .tl-dot-inner     { width: 14px; height: 14px; }
  .tl-content       { padding: 16px 18px; }
  .tl-content h4    { font-size: 14px; }
  .tl-content p     { font-size: 12.5px; }
}