/* About Page */
.about-story { background: var(--black); }
.about-story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.about-story__content h2 { margin-bottom: 20px; }
.about-story__content p { margin-bottom: 16px; font-size: 1rem; }

.about-mission { background: var(--surface-1); }
.about-mission__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.about-mission__card { padding: 40px; background: var(--surface-2); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--border-radius-md); position: relative; overflow: hidden; }
.about-mission__card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--red-gradient); }
.about-mission__card h3 { margin-bottom: 16px; color: var(--red); }
.about-mission__card p { font-size: 0.95rem; }

.about-values { background: var(--black); }
.about-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.about-value-card { text-align: center; padding: 32px 20px; background: var(--surface-2); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--border-radius-md); transition: all var(--transition-base); }
.about-value-card:hover { border-color: rgba(227,0,11,0.3); transform: translateY(-4px); }
.about-value-card__icon { font-size: 2.5rem; margin-bottom: 16px; }
.about-value-card h4 { margin-bottom: 8px; font-size: 1rem; }
.about-value-card p { font-size: 0.85rem; color: var(--gray-400); }

.about-culture { background: var(--surface-1); }
.about-culture__content { max-width: 800px; margin: 0 auto; text-align: center; }
.about-culture__content p { font-size: 1.1rem; margin-bottom: 20px; }
.about-culture__quote { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--white); text-transform: uppercase; padding: 32px; border-left: 4px solid var(--red); text-align: left; margin: 40px 0; background: var(--surface-2); border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0; }

@media (max-width: 768px) {
  .about-story__grid, .about-mission__grid { grid-template-columns: 1fr; }
  .about-values__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .about-values__grid { grid-template-columns: 1fr; }
}