:root {
  --about-blue: #075fc9;
  --about-navy: #082c63;
  --about-ink: #0b2347;
  --about-pale: #f5f9ff;
  --about-line: #dce8f5;
}

.about-page {
  color: var(--about-ink);
  background: #fff;
}

.about-page .site-header {
  background: rgba(249, 252, 255, .93);
}

.about-page .desktop-nav a:first-child::after { display: none; }
.about-page .desktop-nav a.active { color: var(--about-blue); }
.about-page .desktop-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  height: 2px;
  background: var(--about-blue);
}

.about-shell {
  width: 80%;
  margin: 0 auto;
}

.about-page footer .container {
  width: 80%;
  max-width: none;
}

.about-hero {
  position: relative;
  min-height: 430px;
  padding-top: 68px;
  overflow: hidden;
}

.about-hero-image,
.about-hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.about-hero-image {
  object-fit: cover;
  object-position: center;
}

.about-hero-overlay {
  background: linear-gradient(90deg, rgba(250, 253, 255, .98) 0%, rgba(250, 253, 255, .91) 36%, rgba(250, 253, 255, .18) 66%, rgba(250, 253, 255, 0) 100%);
}

.about-hero-copy {
  position: relative;
  z-index: 2;
  padding-top: 24px;
}

.about-kicker {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0 0 15px;
}

.about-kicker strong {
  font-size: 29px;
  letter-spacing: .03em;
}

.about-kicker span {
  color: #75849a;
  font-size: 15px;
}

.about-hero h1 {
  margin: 0 0 20px;
  color: #061f50;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.18;
  letter-spacing: .04em;
}

.about-hero h2 {
  margin: 0 0 7px;
  color: #103e75;
  font-size: 26px;
  font-weight: 500;
}

.about-slogan {
  margin: 0;
  color: #102b54;
  font-size: 21px;
  font-weight: 700;
}

.about-meta {
  display: flex;
  gap: 0;
  margin-top: 28px;
  color: #123466;
  font-size: 15px;
  font-weight: 700;
}

.about-meta span {
  padding: 0 24px;
  border-right: 1px solid rgba(13, 61, 118, .25);
}

.about-meta span:first-child { padding-left: 0; }
.about-meta span:last-child { border-right: 0; }

.about-content {
  padding: 0 0 80px;
  background: linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}

.stats-panel {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 105px;
  margin-top: -36px;
  padding: 20px 10px;
  border: 1px solid rgba(11, 76, 150, .12);
  border-radius: 10px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 12px 36px rgba(22, 74, 132, .09);
  backdrop-filter: blur(14px);
}

.stats-panel article {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-width: 0;
  border-right: 1px solid var(--about-line);
}

.stats-panel article:last-child { border-right: 0; }
.stats-panel img {
  width: 40px;
  height: 40px;
  padding: 7px;
  border-radius: 50%;
  background: #edf5ff;
  filter: invert(28%) sepia(98%) saturate(1511%) hue-rotate(191deg) brightness(91%);
}

.stats-panel strong,
.stats-panel span { display: block; }
.stats-panel strong {
  color: #064a9c;
  font-size: 29px;
  line-height: 1;
}
.stats-panel small { font-size: 14px; }
.stats-panel span { margin-top: 8px; color: #40516a; font-size: 13px; }

.about-columns {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 42px;
  margin-top: 28px;
}

.about-left,
.about-right {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.about-block h2 {
  position: relative;
  margin: 0 0 14px;
  padding-bottom: 8px;
  color: #0a3266;
  font-size: 24px;
}

.about-block h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30px;
  height: 3px;
  background: var(--about-blue);
}

.who-layout {
  display: grid;
  grid-template-columns: 1fr 175px;
  align-items: stretch;
  gap: 20px;
}

.about-prose {
  font-size: 16px;
  line-height: 2;
}

.about-prose p { margin: 0 0 12px; }
.about-prose strong { color: #0861c8; }

.who-layout > img {
  width: 100%;
  height: 100%;
  min-height: 168px;
  border-radius: 7px;
  object-fit: cover;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.capability-grid article {
  padding: 17px 12px;
  text-align: center;
  border: 1px solid var(--about-line);
  border-radius: 8px;
  background: linear-gradient(150deg, #fff, #f1f7ff);
  box-shadow: 0 7px 18px rgba(24, 79, 143, .06);
}

.capability-grid img {
  width: 50px;
  height: 50px;
  margin: 0 auto 10px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  filter: none;
}

.capability-grid h3 {
  margin: 0 0 7px;
  font-size: 17px;
}

.capability-grid p {
  margin: 0;
  color: #43516a;
  font-size: 14px;
  line-height: 1.65;
}

.mission-card,
.culture-stack article,
.credential-card {
  border: 1px solid var(--about-line);
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #f2f7fd);
  box-shadow: 0 7px 18px rgba(24, 79, 143, .05);
}

.mission-card {
  position: relative;
  min-height: 165px;
  overflow: hidden;
  padding: 16px 22px;
}

.mission-copy {
  position: relative;
  z-index: 2;
  width: 72%;
}

.mission-card p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 7px 0;
  font-size: 14px;
}

.mission-card p img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}

.mission-card strong { color: #073c80; }
.mission-bull {
  position: absolute;
  top: 0;
  right: 0;
  width: 52%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  mix-blend-mode: multiply;
}
.culture-stack {
  display: grid;
  gap: 8px;
}

.culture-stack article {
  padding: 14px 18px;
}

.culture-stack h3 {
  margin: 0 0 10px;
  color: #093978;
  font-size: 16px;
}

.culture-stack p,
.culture-stack li {
  color: #273952;
  font-size: 14px;
  line-height: 1.7;
}

.culture-stack p { margin: 5px 0; }
.culture-logo > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 18px;
}

.culture-logo img {
  width: 82px;
  height: 82px;
  object-fit: contain;
}

.culture-logo ul { margin: 0; padding-left: 18px; }
.action-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.action-points p {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 14px;
}

.action-points p + p {
  padding-left: 18px;
  border-left: 1px solid var(--about-line);
}

.action-points img {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
}

.action-points span { display: grid; }
.action-points strong { color: #0a3b77; }
.action-points small {
  margin-top: 3px;
  color: #607086;
  font-size: 13px;
}

.credential-card {
  overflow: hidden;
  padding: 12px;
}

.credential-card > img {
  width: 100%;
  height: 128px;
  border-radius: 6px;
  object-fit: cover;
}

.credential-card > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8px;
}

.credential-card span {
  padding: 0 8px;
  text-align: center;
  color: #23344c;
  font-size: 13px;
  line-height: 1.45;
}

.office-gallery {
  margin-top: 28px;
  overflow: hidden;
  border-radius: 8px;
}

.office-gallery img {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}

@media (max-width: 980px) {
  .about-shell,
  .about-page footer .container { width: calc(100% - 40px); }
  .about-hero { min-height: 470px; }
  .about-hero-image { object-position: 62% center; }
  .about-hero-overlay { background: linear-gradient(90deg, rgba(250, 253, 255, .98), rgba(250, 253, 255, .8) 58%, rgba(250, 253, 255, .15)); }
  .stats-panel { grid-template-columns: repeat(3, 1fr); margin-top: -48px; }
  .stats-panel article { min-height: 76px; }
  .stats-panel article:nth-child(3) { border-right: 0; }
  .about-columns { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .about-shell,
  .about-page footer .container { width: calc(100% - 28px); }
  .about-hero { min-height: 545px; padding-top: 62px; }
  .about-hero-image { object-position: 72% center; opacity: .62; }
  .about-hero-overlay { background: linear-gradient(180deg, rgba(250, 253, 255, .98) 8%, rgba(250, 253, 255, .87) 64%, rgba(250, 253, 255, .42)); }
  .about-hero-copy { padding-top: 30px; }
  .about-kicker strong { font-size: 24px; }
  .about-hero h1 { font-size: 33px; }
  .about-hero h2 { font-size: 20px; line-height: 1.5; }
  .about-slogan { max-width: 320px; font-size: 17px; line-height: 1.6; }
  .about-meta { flex-wrap: wrap; gap: 12px 0; font-size: 12px; }
  .about-meta span { padding: 0 12px; }
  .about-meta span:first-child { padding-left: 0; }
  .stats-panel { grid-template-columns: 1fr 1fr; padding: 12px; }
  .stats-panel article { justify-content: flex-start; padding: 10px; border: 0; }
  .stats-panel article:last-child { grid-column: 1 / -1; justify-content: center; }
  .stats-panel strong { font-size: 22px; }
  .stats-panel img { width: 36px; height: 36px; }
  .about-columns { gap: 30px; }
  .who-layout { grid-template-columns: 1fr; }
  .who-layout > img { height: 230px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-grid article { display: grid; grid-template-columns: 56px 1fr; text-align: left; align-items: center; }
  .capability-grid img { grid-row: 1 / 3; margin: 0; }
  .capability-grid h3, .capability-grid p { margin-left: 10px; }
  .action-points { grid-template-columns: 1fr; }
  .action-points p + p { padding-left: 0; border-left: 0; }
  .mission-copy { width: 100%; }
  .mission-bull { opacity: .16; width: 75%; }
  .credential-card > img { height: 170px; }
  .credential-card span { font-size: 9px; padding: 0 3px; }
  .office-gallery img { aspect-ratio: 1.45 / 1; object-fit: cover; }
}
