/* ── About page ────────────────────────────────────────────────────────── */
.ab-hero { padding: 84px 0 36px; }
.ab-hero-inner { max-width: 720px; }
.ab-hero h1 {
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 650;
  letter-spacing: -.038em;
  line-height: 1.04;
  color: var(--ink-900);
  margin: 14px 0 18px;
  text-wrap: balance;
}
.ab-lead { font-size: 18px; line-height: 1.6; color: var(--ink-600); max-width: 620px; margin: 0; }

/* ── Story ─────────────────────────────────────────────────────────────── */
.ab-story { padding: 44px 0; }
.ab-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 940px; }
.ab-story-col h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 640;
  letter-spacing: -.02em;
  color: var(--ink-900);
  margin: 0 0 12px;
}
.ab-story-col p { font-size: 15.5px; line-height: 1.68; color: var(--ink-600); margin: 0 0 14px; }
.ab-story-col p:last-child { margin-bottom: 0; }

/* ── Values ────────────────────────────────────────────────────────────── */
.ab-values { padding: 36px 0 56px; }
.ab-value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ab-value {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--rad-xl);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}
.ab-value-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--blue-50); color: var(--blue-700);
  border: 1px solid var(--blue-100);
  margin-bottom: 14px;
}
.ab-value h3 { font-size: 16px; font-weight: 650; color: var(--ink-900); margin: 0 0 6px; }
.ab-value p { font-size: 14px; line-height: 1.6; color: var(--ink-600); margin: 0; }

/* ── Company details (imprint / colofon) ───────────────────────────────── */
.ab-details { padding: 8px 0 88px; }
.ab-details-card {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--rad-xl);
  padding: 32px;
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.9);
}
.ab-details-head h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 640;
  letter-spacing: -.02em;
  color: var(--ink-900);
  margin: 0 0 4px;
}
.ab-details-head p { font-size: 14px; color: var(--ink-500); margin: 0 0 22px; }

.ab-details-list { margin: 0; padding: 0; display: grid; gap: 0; }
.ab-detail {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.ab-detail dt { font-size: 13px; font-weight: 600; color: var(--ink-500); margin: 0; }
.ab-detail dd { font-size: 14.5px; color: var(--ink-900); margin: 0; line-height: 1.55; }
.ab-detail dd a { color: var(--blue-700); font-weight: 600; }
.ab-detail dd a:hover { color: var(--blue-600); }
.ab-detail-note { display: inline-block; margin-top: 4px; font-size: 12.5px; color: var(--ink-500); }

.ab-details-cta { margin-top: 26px; }

@media (max-width: 820px) {
  .ab-hero h1 { font-size: 36px; }
  .ab-story-grid { grid-template-columns: 1fr; gap: 30px; }
  .ab-value-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ab-detail { grid-template-columns: 1fr; gap: 3px; }
  .ab-details-card { padding: 24px 20px; }
}