.page-overview {
  background: #fff;
}

.overview-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #dcdcdc;
  background: #fff;
}

.overview-tabs a {
  min-height: calc(82 * var(--design-unit));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #2d2d2d;
  font-size: var(--font-size-title);
  font-weight: 700;
  line-height: 1.2;
}

.overview-tabs .is-active {
  color: #0b4fa8;
}

.overview-tabs .is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(98 * var(--design-unit));
  height: calc(4 * var(--design-unit));
  border-radius: calc(4 * var(--design-unit));
  background: #0b4fa8;
  transform: translateX(-50%);
}

.overview-section {
  padding: calc(34 * var(--design-unit)) 0 calc(40 * var(--design-unit));
}

.overview-heading {
  text-align: center;
}

.overview-heading h2 {
  margin: 0;
  color: #2d2d2d;
  font-size: calc(34 * var(--design-unit));
  font-weight: 700;
}

.overview-heading span {
  display: block;
  width: calc(68 * var(--design-unit));
  height: calc(4 * var(--design-unit));
  margin: calc(18 * var(--design-unit)) auto 0;
  background: #ddb458;
}

.overview-intro__image {
  margin: calc(30 * var(--design-unit)) calc(52 * var(--design-unit)) 0;
}

.overview-intro__image img {
  width: 100%;
  aspect-ratio: 666 / 301;
  object-fit: cover;
}

.overview-intro__body {
  padding: calc(18 * var(--design-unit)) calc(50 * var(--design-unit)) 0;
  color: #323232;
  font-size: calc(24 * var(--design-unit));
  line-height: 1.85;
  text-align: justify;
}

.overview-intro__body p {
  margin: 0;
}

.overview-intro__body p + p {
  margin-top: calc(14 * var(--design-unit));
}

.overview-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: calc(28 * var(--design-unit)) calc(24 * var(--design-unit)) 0;
  padding: 0;
  list-style: none;
  border: 0;
}

.overview-stats li {
  position: relative;
  min-height: calc(72 * var(--design-unit));
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(4 * var(--design-unit));
  padding: calc(12 * var(--design-unit)) calc(8 * var(--design-unit));
  border: 0;
  color: #323232;
  font-size: var(--font-size-meta);
  line-height: 1.2;
  text-align: center;
}

/* 仅项与项之间竖线，无上下/外边框 */
.overview-stats li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: calc(36 * var(--design-unit));
  background: #d8d8d8;
  transform: translateY(-50%);
}

.overview-stats span,
.overview-stats em {
  font-style: normal;
  color: #323232;
}

.overview-stats strong {
  color: #0b4fa8;
  font-size: calc(36 * var(--design-unit));
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
}

.overview-values {
  position: relative;
  overflow: visible;
  padding: 0 0 calc(36 * var(--design-unit));
}

.overview-values__bg {
  display: block;
  width: 100%;
  height: calc(400 * var(--design-unit));
  margin: calc(20 * var(--design-unit)) 0 0;
  object-fit: cover;
  object-position: center 30%;
  filter: saturate(.92);
}

.overview-values__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: calc(10 * var(--design-unit));
  align-items: start;
  padding: 0 calc(24 * var(--design-unit));
  /* 整体上提，让色块叠入建筑图底部 */
  margin-top: calc(-70 * var(--design-unit));
}

.overview-values__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* 设计图1：右列最高叠入图片；左、中顶大致齐平略低 */
.overview-values__col--left {
  padding-top: calc(42 * var(--design-unit));
  row-gap: calc(12 * var(--design-unit));
}

.overview-values__col--mid {
  padding-top: calc(42 * var(--design-unit));
  row-gap: calc(16 * var(--design-unit));
}

.overview-values__col--right {
  padding-top: 0;
  row-gap: calc(12 * var(--design-unit));
}

.value-card {
  box-sizing: border-box;
  width: 100%;
  padding: calc(30 * var(--design-unit)) calc(12 * var(--design-unit));
  border-radius: calc(16 * var(--design-unit));
  color: #fff;
  box-shadow: 0 calc(10 * var(--design-unit)) calc(20 * var(--design-unit)) rgba(10, 60, 133, .14);
}

.value-card h3 {
  margin: 0;
  font-size: calc(20 * var(--design-unit));
  line-height: 1.25;
}

.value-card h3 + p,
.value-card p + h3 {
  margin-top: calc(8 * var(--design-unit));
}

.value-card p,
.value-card li {
  margin: 0;
  font-size: calc(15 * var(--design-unit));
  line-height: 2.05;
}

.value-card ul {
  margin: 0;
  padding-left: calc(16 * var(--design-unit));
}

.value-card strong {
  font-size: 1.15em;
  font-weight: 700;
}

/* 左上：中等高度 */
.value-card--blue {
  min-height: calc(198 * var(--design-unit));
  background: #0b4fa8;
}

/* 左下：偏矮 */
.value-card--sand {
  min-height: calc(190 * var(--design-unit));
  color: #fff;
  background: #d2a66a;
}

/* 中上：偏矮，顶部接近右列 */
.value-card--ice {
  min-height: calc(152 * var(--design-unit));
  color: #1a5fa0;
  background: #eef8ff;
  box-shadow: 0 calc(8 * var(--design-unit)) calc(18 * var(--design-unit)) rgba(10, 60, 133, .1);
}

/* 中下：较高，底边低于右侧主卡片 */
.value-card--deep {
  flex: 1 1 auto;
  min-height: calc(268 * var(--design-unit));
  background: #0b4fa8;
}

.value-card--deep h3 {
  position: relative;
  display: inline-block;
  padding-bottom: calc(6 * var(--design-unit));
}

.value-card--deep h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.2em;
  height: 1px;
  background: rgba(255, 255, 255, .75);
}

.value-card--deep h3 + p {
  margin-top: calc(6 * var(--design-unit));
  opacity: .92;
}

.value-card--deep p + h3 {
  margin-top: calc(14 * var(--design-unit));
}

/* 右侧：最高叠入图片，底边约落在中下卡片中部 */
.value-card--sky {
  min-height: calc(332 * var(--design-unit));
  padding-bottom: calc(16 * var(--design-unit));
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .12) 0 24%, transparent 24%),
    linear-gradient(180deg, #2f88f3, #1b74df);
}

.value-card__title {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--design-unit));
  padding-bottom: calc(6 * var(--design-unit));
  font-size: calc(20 * var(--design-unit));
}

.value-card__title::before {
  content: "";
  flex: 0 0 auto;
  width: calc(22 * var(--design-unit));
  height: calc(22 * var(--design-unit));
  background: center / contain no-repeat;
}

.value-card__title::after {
  content: "";
  position: absolute;
  left: calc(30 * var(--design-unit));
  bottom: 0;
  width: 1.2em;
  height: 1px;
  background: rgba(255, 255, 255, .75);
}

.value-card__title--gem::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Cpath d='M12 2 3 9l9 13 9-13-9-7Z'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");
}

.value-card__title--cap::before {
  margin-top: calc(4 * var(--design-unit));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8'%3E%3Cpath d='m2 9 10-5 10 5-10 5L2 9Z'/%3E%3Cpath d='M6 11.5v4.2c0 1.3 2.7 2.3 6 2.3s6-1 6-2.3v-4.2'/%3E%3Cpath d='M22 9v6'/%3E%3C/svg%3E");
}

.value-card__title--cap {
  margin-top: calc(18 * var(--design-unit));
}

.value-card__subjects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(2 * var(--design-unit)) calc(6 * var(--design-unit));
  margin-top: calc(10 * var(--design-unit));
  padding-left: 0;
  list-style: none;
}

.value-card__subjects li {
  font-size: calc(14 * var(--design-unit));
  line-height: 1.45;
}

.overview-values__decor {
  position: relative;
  height: calc(120 * var(--design-unit));
  margin-top: calc(165 * var(--design-unit));
  margin-left: auto;
  margin-right: calc(-24 * var(--design-unit));
  width: calc(150 * var(--design-unit));
}

.overview-values__decor-item {
  position: absolute;
  border-radius: calc(5 * var(--design-unit));
}

/* 右对齐阶梯：浅蓝 → 深蓝 → 土黄靠右贴边 */
.overview-values__decor-item--ice {
  right: calc(205 * var(--design-unit));
  top: calc(4 * var(--design-unit));
  width: calc(34 * var(--design-unit));
  height: calc(34 * var(--design-unit));
  background: #cfefff;
}

.overview-values__decor-item--blue {
  right: calc(60 * var(--design-unit));
  top: calc(10 * var(--design-unit));
  width: calc(70 * var(--design-unit));
  height: calc(75 * var(--design-unit));
  background: #0b4fa8;
}

.overview-values__decor-item--sand {
  right: 0;
  top: calc(42 * var(--design-unit));
  width: calc(100 * var(--design-unit));
  height: calc(92 * var(--design-unit));
  background: #d2a66a;
}

.overview-tabs a:focus-visible {
  outline: 2px solid #ffb347;
  outline-offset: 2px;
}

@media (max-width: 375px) {
  .overview-values__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: calc(-160 * var(--design-unit));
  }

  .overview-values__col--left,
  .overview-values__col--mid,
  .overview-values__col--right {
    padding-top: 0;
  }

  .overview-values__col--right {
    grid-column: 1 / -1;
  }

  .value-card--sky {
    min-height: calc(280 * var(--design-unit));
  }

  .overview-values__decor {
    margin-right: calc(-24 * var(--design-unit));
  }
}

@media (max-width: 340px) {
  .overview-tabs {
    grid-template-columns: 1fr;
  }

  .overview-values__grid {
    grid-template-columns: 1fr;
    margin-top: calc(-120 * var(--design-unit));
  }
}