/* ============ about.html ============ */
.about-lead-grid { display: grid; gap: clamp(1.5rem,4vw,3rem); align-items: center; }
@media (min-width: 900px){ .about-lead-grid { grid-template-columns: 1.1fr 0.9fr; } }

.value-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width:600px){ .value-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1000px){ .value-grid { grid-template-columns: repeat(3,1fr); } }
.value-card {
  padding: clamp(1.3rem,2.6vw,1.7rem);
  background: var(--grad-panel); backdrop-filter: blur(10px);
  border: 1px solid rgba(201,162,39,0.2); border-radius: var(--radius-lg);
  transition: transform var(--dur-mid) var(--ease-lux), border-color var(--dur-mid);
}
.value-card:hover { transform: translateY(-6px); border-color: rgba(201,162,39,0.5); }
.value-card__icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: var(--space-md); color: var(--color-gold-light); background: rgba(201,162,39,0.1); clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.value-card__icon svg { width: 24px; height: 24px; }
.value-card__title { font-size: 1.1rem; margin-bottom: 0.4rem; }
.value-card__text { font-size: 0.92rem; color: var(--color-text-muted); }

/* timeline */
.timeline { position: relative; display: grid; gap: 1.4rem; padding-left: 1.6rem; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg,var(--color-gold-primary),var(--color-gold-bronze),transparent); }
.tl-item { position: relative; }
.tl-item::before { content: ""; position: absolute; left: -1.6rem; top: 4px; width: 12px; height: 12px; background: var(--grad-gold-diag); clip-path: polygon(50% 0,100% 35%,82% 100%,18% 100%,0 35%); }
.tl-item__title { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; margin-bottom: 0.25rem; }
.tl-item__text { font-size: 0.92rem; color: var(--color-text-muted); }

/* highlight strip */
.hl-strip { display: grid; gap: 1rem; grid-template-columns: repeat(2,1fr); }
@media (min-width:800px){ .hl-strip { grid-template-columns: repeat(4,1fr); } }