/* Infochief Academy | About page premium refinement | 2026-10-27
   Only the body of Infochief_Info_About.htm is targeted.
   Header, mega menus, footer, images, JS and site-wide CSS stay intact. */

.about-page #main-content {
  --about-ink: #133b67;
  --about-muted: #4f647d;
  --about-line: #dce8f4;
  --about-soft: #f5f9fe;
}
.about-page #main-content .section { padding-block: clamp(52px, 5.2vw, 76px); }
.about-page #main-content .section-kicker {
  padding: 0; margin: 0 0 13px; display: block;
  color: #2f6da9; font-size: 12px; letter-spacing: .14em;
  font-weight: 850; line-height: 1.4;
}
.about-page #main-content h2 {
  color: var(--about-ink);
  font-size: clamp(27px, 2.5vw, 39px);
  letter-spacing: -.032em; line-height: 1.18;
}
.about-page #main-content .section-head { align-items: end; margin-bottom: 28px; gap: 20px; }
.about-page #main-content .section-head h2 { margin: 0; }
.about-page #main-content .text-link {
  font-size: 13px; font-weight: 800; display:inline-flex; gap: 5px;
  color:#075176; padding-bottom: 6px; white-space: nowrap;
}
.about-page #main-content .text-link:hover {color:#1d70ad}

/* Overview: readable copy and a balanced photo/copy composition. */
.about-page #main-content .about-intro { padding-top: clamp(46px, 4.8vw, 68px); }
.about-page #main-content .about-split {
  display:grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr);
  gap: clamp(28px,4.6vw,68px); align-items:center;
}
.about-page #main-content .about-photo-card {
  border-radius:20px; border:1px solid var(--about-line);
  overflow:hidden; box-shadow:0 20px 50px rgba(23,65,108,.09);
}
.about-page #main-content .about-photo-card img {
  width:100%; height:clamp(370px,35vw,490px); aspect-ratio:auto;
  object-fit:cover; object-position:center 54%;
}
.about-page #main-content .about-photo-card figcaption {
  color:#61758b; font-size:12px; line-height:1.45; padding:13px 18px;
}
.about-page #main-content .about-copy h2 { margin:0 0 20px; max-width:690px; }
.about-page #main-content .about-copy > p:not(.section-kicker) {
  color:var(--about-muted); line-height:1.78; font-size:15px; margin:0 0 15px;
}
.about-page #main-content .about-focus-tags {
  display:flex; flex-wrap:wrap; gap:9px; margin:22px 0 3px;
}
.about-page #main-content .about-focus-tags span {
  display:inline-flex; align-items:center; min-height:32px; padding:5px 11px;
  border:1px solid #d9e7f5; border-radius:999px;
  background:#f4f9ff; color:#20537d; font-weight:700; font-size:11.5px;
}
.about-page #main-content .about-quick-links {
  display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:22px;
}
.about-page #main-content .about-quick-links a {
  color:#0c5278; font-size:13px; line-height:1.4; font-weight:800;
  text-underline-offset:4px;
}
.about-page #main-content .about-quick-links a:hover,
.about-page #main-content .about-quick-links a:focus-visible {text-decoration:underline}

/* Differentiators: narrative focus and consistent call-to-action dimensions. */
.about-page #main-content .about-differentiators {
  background:linear-gradient(180deg,#f6faff,#f9fcff);
  border-block:1px solid #edf3fa;
}
.about-page #main-content .about-why-layout {
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:center; gap:clamp(28px,5vw,74px);
}
.about-page #main-content .about-why-copy h2 { margin:0 0 26px; }
.about-page #main-content .about-check-list {
  display:grid; gap:17px; margin:0 0 28px; padding:0;
}
.about-page #main-content .about-check-list li {padding-left:40px;}
.about-page #main-content .about-check-list li::before {
  width:26px;height:26px;top:2px;background:#e5f1fb;
  font-size:14px; color:#126195; border:1px solid #d1e3f4;
}
.about-page #main-content .about-check-list strong {
  font-size:15px; line-height:1.48; color:#153b62; font-weight:800;
}
.about-page #main-content .about-check-list span {
  display:block; color:var(--about-muted); font-size:13px;
  line-height:1.58; margin-top:3px;
}
.about-page #main-content .about-why-copy > a.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  padding:13px 19px; min-height:46px;
  font-size:13px; line-height:1.2; font-weight:800;
  white-space:normal; text-align:center; border-radius:9px;
}
.about-page #main-content .about-why-copy > a.btn span {font-size:16px;line-height:1;}
.about-page #main-content .about-side-photo {
  min-height:0; margin:0; overflow:hidden; border-radius:20px;
  box-shadow:0 20px 48px rgba(19,56,95,.13);
}
.about-page #main-content .about-side-photo img {
  width:100%; height:clamp(390px,36vw,540px); min-height:0;
  object-fit:cover; object-position:center center;
}

/* Timeline: distinct, ordered stages with readable typography. */
.about-page #main-content .about-journey-intro {
  max-width:820px; margin:0 0 32px;
  color:var(--about-muted); font-size:15px; line-height:1.65;
}
.about-page #main-content .about-timeline {
  list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:13px; margin:0; padding:0;
}
.about-page #main-content .about-timeline::before {display:none;}
.about-page #main-content .about-timeline li {
  background:#fff; border:1px solid var(--about-line);
  border-top:3px solid #5a93cb; border-radius:12px;
  padding:23px 17px 20px; text-align:left; min-height:205px;
  box-shadow:0 8px 28px rgba(32,76,120,.055);
}
.about-page #main-content .about-timeline li::before {display:none;}
.about-page #main-content .about-timeline li span {
  display:block; min-height:0; margin-bottom:12px; color:#2c6ba5;
  font-size:12px; letter-spacing:.045em; font-weight:800;
}
.about-page #main-content .about-timeline li strong {
  display:block; color:#173b64; line-height:1.3; font-size:15px; font-weight:800;
}
.about-page #main-content .about-timeline li small {
  display:block; color:var(--about-muted); font-size:12px;
  line-height:1.65; margin-top:10px;
}

/* Activity gallery: a coherent photographic collection. */
.about-page #main-content .about-activities {
  background:linear-gradient(180deg,#f7faff,#ffffff);
}
.about-page #main-content .about-gallery-intro {
  margin:-7px 0 22px; color:var(--about-muted);
  line-height:1.65; font-size:14px; max-width:900px;
}
.about-page #main-content .about-gallery {
  display:grid; grid-template-columns:1.35fr repeat(3,minmax(0,1fr)); gap:14px;
}
.about-page #main-content .about-gallery figure {
  min-height:280px; margin:0; overflow:hidden;
  border-radius:16px; background:#d9e5f0;
  box-shadow:0 10px 24px rgba(19,57,98,.09);
}
.about-page #main-content .about-gallery figure img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease;
}
.about-page #main-content .about-gallery figure:hover img { transform:scale(1.025); }
.about-page #main-content .about-gallery figcaption {
  font-size:13px; line-height:1.4; font-weight:800;
  left:17px; right:14px; bottom:15px;
}

@media (max-width: 1100px) {
  .about-page #main-content .about-split,
  .about-page #main-content .about-why-layout {gap:26px;}
  .about-page #main-content .about-timeline {grid-template-columns:repeat(3,minmax(0,1fr));}
  .about-page #main-content .about-timeline li {min-height:185px;}
  .about-page #main-content .about-gallery {grid-template-columns:repeat(2,minmax(0,1fr));}
  .about-page #main-content .about-gallery figure {min-height:240px;}
}
@media (max-width: 850px) {
  .about-page #main-content .section {padding-block:48px;}
  .about-page #main-content .about-split,
  .about-page #main-content .about-why-layout {grid-template-columns:1fr;gap:25px;}
  .about-page #main-content .about-why-copy {order:1;}
  .about-page #main-content .about-side-photo {order:2;}
  .about-page #main-content .about-photo-card img {height:clamp(330px,56vw,450px);}
  .about-page #main-content .about-side-photo img {height:clamp(350px,54vw,450px);}
  .about-page #main-content .about-timeline {grid-template-columns:repeat(2,minmax(0,1fr));}
  .about-page #main-content .section-head {align-items:start;}
}
@media (max-width: 540px) {
  .about-page #main-content .section {padding-block:38px;}
  .about-page #main-content h2 {font-size:27px;}
  .about-page #main-content .about-photo-card img {height:330px;}
  .about-page #main-content .about-photo-card figcaption {font-size:11px;}
  .about-page #main-content .about-copy > p:not(.section-kicker) {font-size:14px;line-height:1.7;}
  .about-page #main-content .about-split,
  .about-page #main-content .about-why-layout {gap:23px;}
  .about-page #main-content .about-check-list {gap:14px;}
  .about-page #main-content .about-check-list span {font-size:12.5px;}
  .about-page #main-content .about-side-photo img {height:310px;}
  .about-page #main-content .about-timeline {grid-template-columns:1fr;gap:10px;}
  .about-page #main-content .about-timeline li {min-height:0;padding:18px;}
  .about-page #main-content .about-journey-intro {font-size:13.5px;margin-bottom:20px;}
  .about-page #main-content .about-gallery {grid-template-columns:1fr;gap:13px;}
  .about-page #main-content .about-gallery figure {min-height:245px;}
  .about-page #main-content .about-gallery-intro {font-size:13px;}
  .about-page #main-content .section-head {display:flex;align-items:start;flex-direction:column;gap:11px;}
  .about-page #main-content .section-head .text-link {display:inline-flex;white-space:normal;}
}
@media (prefers-reduced-motion: reduce) {
  .about-page #main-content .about-gallery figure img {transition:none}
}