/* ADD+ corporate v3 — section frame, about/overview table, business cards, heritage */

.sec { padding: clamp(68px, 11vh, 128px) 0; }
.sec-alt { background: var(--alt); }
.sec h2 { max-width: 18em; }
.sec h2 + .para { margin-top: 22px; }

/* ---- about: intro + overview table ---- */
.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.overview {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  font-size: 14.5px;
}
.overview th, .overview td { padding: 15px 20px; text-align: left; vertical-align: top; }
.overview tr + tr th, .overview tr + tr td { border-top: 1px solid var(--line); }
.overview th {
  width: 128px;
  font-size: 13px;
  font-weight: 700;
  color: var(--faint);
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: color-mix(in srgb, var(--alt) 55%, var(--bg));
}
.overview td { color: var(--sub); font-weight: 600; }
.overview .en { font-size: 12.5px; color: var(--faint); font-weight: 500; }

/* ---- business cards ---- */
.biz-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 26px);
  margin-top: clamp(36px, 6vh, 56px);
}
.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(20,22,26,0.06), 0 20px 44px rgba(20,22,26,0.11); }
.card figure { border-bottom: 1px solid var(--line); }
.card figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.card-body i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--red);
}
.card-body h3 { margin-top: 8px; font-size: clamp(18px, 2vw, 20.5px); }
.card-body p { margin-top: 8px; font-size: 14.5px; flex: 1; }

.textlink {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  width: fit-content;
}
.textlink::after { content: " →"; color: var(--red); transition: margin-left 0.2s var(--ease); }
.textlink:hover::after { margin-left: 4px; }

/* app mock inside card */
.card-mock { padding: 20px 24px; border-bottom: 1px solid var(--line); background: var(--alt); }
.mock-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--ink); padding-bottom: 10px; }
.mock-head span { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.mock-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8.5px 0;
  border-top: 1px solid var(--line);
}
.mock-row span { font-size: 13px; }
.mock-row em {
  font-style: normal;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mock-row .up { color: var(--red); }

/* ---- heritage: HiiT CHECK ---- */
.heritage-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: center;
  margin: clamp(36px, 6vh, 56px) 0 8px;
}
.heritage-photo {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  background: #fff;
}
.heritage-facts { list-style: none; }
.heritage-facts li { padding: 16px 0 16px 20px; border-top: 1px solid var(--line); position: relative; }
.heritage-facts li:first-child { border-top: none; }
.heritage-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}
.heritage-facts b { display: block; font-size: 16px; }
.heritage-facts span { display: block; margin-top: 3px; font-size: 13.5px; }

@media (max-width: 900px) {
  .about-grid, .heritage-grid { grid-template-columns: 1fr; }
  .biz-cards { grid-template-columns: 1fr; }
  .overview th { width: 104px; }
}