/* About color system: restrained blue, teal, amber and coral accents. */
.about-page {
  --about-blue: #1677e8;
  --about-teal: #148f84;
  --about-amber: #c98722;
  --about-coral: #d86155;
  --about-ink: #19344e;
}

/* Keep the hero artwork unchanged; enrich the following editorial section. */
.about-v11-intro-aside {
  border-color: #aad7d0;
  background: #eef8f6;
}

.about-v11-intro-aside::before { background: var(--about-teal); }
.about-v11-intro-aside > span { color: var(--about-teal); }
.about-v11-intro-aside > span em { color: #638c86; }
.about-v11-intro-aside b { color: #176e68; }
.about-v11-intro h2 em { color: var(--about-teal); }
.about-v11-intro-body { border-color: #cfe2df; }
.about-v11-intro-track { color: var(--about-blue); }
.about-v11-intro-track span:nth-of-type(2) { color: var(--about-teal); }
.about-v11-intro-track span:nth-of-type(3) { color: var(--about-amber); }
.about-v11-intro-track i:first-of-type { background: #6db9b0; }
.about-v11-intro-track i:last-of-type { background: #dfb261; }

/* Give each year its own identity while preserving one continuous timeline. */
.about-v12-history-heading span { color: var(--about-teal); }
.about-v14-timeline-rail { background: linear-gradient(90deg, var(--about-blue) 0 29%, var(--about-teal) 45% 62%, var(--about-amber) 82% 100%); }

.about-v14-timeline article:nth-of-type(1) {
  --milestone: var(--about-blue);
  --milestone-soft: #edf5ff;
  --milestone-year: #bddaf5;
  --milestone-shadow: rgb(22 119 232 / 16%);
}

.about-v14-timeline article:nth-of-type(2) {
  --milestone: var(--about-teal);
  --milestone-soft: #eaf7f4;
  --milestone-year: #b7ddd7;
  --milestone-shadow: rgb(20 143 132 / 16%);
}

.about-v14-timeline article:nth-of-type(3) {
  --milestone: var(--about-amber);
  --milestone-soft: #fff6e7;
  --milestone-year: #ecd7ad;
  --milestone-shadow: rgb(201 135 34 / 16%);
}

.about-v14-timeline article .about-v14-year strong { color: var(--milestone-year); }
.about-v14-timeline article .about-v14-year span { color: var(--milestone); }
.about-v14-timeline article .about-v14-node,
.about-v14-timeline article:first-of-type .about-v14-node {
  background: var(--milestone);
  box-shadow: 0 0 0 2px var(--milestone), 0 0 0 7px var(--milestone-shadow);
}

.about-v14-timeline article .about-v14-copy > div span { color: var(--milestone); }
.about-v14-timeline article .about-v14-copy > div span + span::before { background: var(--milestone); }
.about-v14-timeline article:hover { background: var(--milestone-soft); box-shadow: 0 18px 38px var(--milestone-shadow); }
.about-v14-timeline article:hover .about-v14-year strong,
.about-v14-timeline article:hover .about-v14-copy h3 { color: var(--milestone); }
.about-v14-timeline article:hover .about-v14-node {
  background: var(--milestone);
  box-shadow: 0 0 0 2px var(--milestone), 0 0 0 11px var(--milestone-shadow);
}

/* Move the business band toward neutral gray and use color on interaction. */
.about-v4-business { background: #f5f7fa; }
.about-v4-business-head > span { color: var(--about-amber); }
.about-v10-business-list { border-color: #d4dde5; }
.about-v10-business-list > a { --row-accent: var(--about-blue); --row-tint: #edf5ff; --row-shadow: rgb(22 119 232 / 13%); }
.about-v10-business-list > a:nth-child(2) { --row-accent: var(--about-teal); --row-tint: #eaf7f4; --row-shadow: rgb(20 143 132 / 13%); }
.about-v10-business-list > a:nth-child(3) { --row-accent: var(--about-amber); --row-tint: #fff6e7; --row-shadow: rgb(201 135 34 / 13%); }
.about-v10-business-list > a:nth-child(4) { --row-accent: var(--about-coral); --row-tint: #fff0ee; --row-shadow: rgb(216 97 85 / 13%); }
.about-v10-business-list > a:nth-child(5) { --row-accent: #287c9c; --row-tint: #eaf6f9; --row-shadow: rgb(40 124 156 / 13%); }

.about-v10-business-list > a { border-color: #d4dde5; }
.about-v10-business-list > a::before { background: var(--row-tint); }
.about-v10-business-list > a i { color: var(--row-accent); }
.about-v10-business-list > a:hover,
.about-v10-business-list > a.about-v10-business-secondary:hover { color: var(--row-accent); box-shadow: inset 4px 0 var(--row-accent), 0 13px 28px var(--row-shadow); }
.about-v10-business-list > a:hover strong,
.about-v10-business-list > a:hover i { color: var(--row-accent); }
.about-v10-business-list > a:hover span { color: #48677f; }

/* Close the page with a richer teal-blue band and a warm secondary accent. */
.about-v4-cta { background: #15546b; }
.about-v4-cta h2 em { color: #f2c66f; }
.about-v4-cta a { color: #15546b; }

@media (max-width: 620px) {
  .about-v14-timeline article { background: var(--milestone-soft); }
  .about-v10-business-list > a:hover { box-shadow: inset 3px 0 var(--row-accent), 0 10px 22px var(--row-shadow); }
}
