/* ============================================
   PIXELEVENTS — About Page Styles
   ============================================ */

/* STORY */
.story-section { padding: 6rem 4rem; background: var(--pearl); }
.story-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; align-items: start; max-width: 1100px; margin: 0 auto; }
.story-img-box { width: 100%; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; }
.img-placeholder { font-family: var(--serif); font-style: italic; color: rgba(46,26,58,0.3); font-size: 0.9rem; }
.story-img-caption { padding: 1rem; background: var(--plum-ghost); font-size: 0.68rem; letter-spacing: 0.15em; color: var(--plum-soft); font-weight: 300; text-align: center; }
.story-text h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); margin-bottom: 1.5rem; }
.story-text p { font-size: 0.92rem; color: var(--plum-dark); line-height: 1.95; font-weight: 300; margin-bottom: 1.2rem; }
.story-text p em { color: var(--plum-mid); font-style: italic; }

/* VALUES */
.values-section { padding: 5rem 4rem 6rem; background: var(--plum-ghost); }
.values-inner { max-width: 1100px; margin: 0 auto; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.value-card { background: var(--pearl); padding: 2.5rem 1.8rem; border-top: 2px solid transparent; transition: border-color 0.35s; }
.value-card:hover { border-top-color: var(--plum-mid); }
.value-pixel { margin-bottom: 1.2rem; }
.value-card h3 { font-size: 1.2rem; color: var(--plum-deep); margin-bottom: 0.8rem; }
.value-card p { font-size: 0.9rem; color: var(--plum-dark); line-height: 1.85; font-weight: 300; }

/* TEAM */
.team-section { padding: 5rem 4rem 6rem; background: var(--plum-dark); }
.team-inner { max-width: 1100px; margin: 0 auto; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.team-card { background: var(--plum-deep); overflow: hidden; }
.team-photo { width: 100%; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; }
.team-photo span { font-family: var(--serif); font-style: italic; color: rgba(237,224,245,0.3); font-size: 0.85rem; }
.team-info { padding: 1.8rem; }
.team-info h3 { font-size: 1.4rem; color: var(--text-dark); margin-bottom: 0.3rem; }
.team-role { font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--plum-light); font-weight: 300; display: block; margin-bottom: 0.9rem; }
.team-info p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.8; font-weight: 300; }

/* STATS */
.stats-band { display: flex; align-items: center; justify-content: center; background: var(--plum-mid); padding: 3.5rem 4rem; gap: 0; flex-wrap: wrap; }
.stat-block { text-align: center; padding: 1rem 3rem; flex: 1; min-width: 140px; }
.stat-big { font-family: var(--serif); font-size: 3.5rem; font-weight: 300; color: var(--pearl); display: block; line-height: 1; }
.stat-lbl { font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--plum-light); font-weight: 300; margin-top: 0.4rem; display: block; }
.stat-sep { width: 1px; height: 60px; background: rgba(212,160,232,0.25); flex-shrink: 0; }

/* PRESS */
.press-section { padding: 4rem 4rem; background: var(--pearl); }
.press-logos { display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; margin-top: 2rem; }
.press-logo { font-family: var(--serif); font-size: 1rem; font-style: italic; color: var(--plum-light); font-weight: 300; letter-spacing: 0.05em; }

/* ABOUT CTA */
.about-cta { padding: 5rem 4rem; background: var(--plum-deep); text-align: center; }
.about-cta h2 { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 300; color: var(--text-dark); margin-bottom: 1rem; line-height: 1.2; }
.about-cta h2 em { font-style: italic; color: var(--plum-light); }
.about-cta p { font-size: 0.92rem; color: var(--text-muted); font-weight: 300; }

/* RESPONSIVE */
@media (max-width: 1024px) {
  .story-section { padding: 5rem 2.5rem; }
  .story-grid { grid-template-columns: 1fr; gap: 3rem; }
  .story-img-box { aspect-ratio: 16/9; max-height: 400px; }
  .values-section { padding: 4rem 2.5rem; }
  .values-grid { grid-template-columns: 1fr 1fr; gap: 2px; }
  .team-section { padding: 4rem 2.5rem; }
  .stats-band { padding: 3rem 2rem; }
  .press-section { padding: 3rem 2.5rem; }
  .about-cta { padding: 4rem 2.5rem; }
}
@media (max-width: 768px) {
  .story-section { padding: 3.5rem 1.5rem; }
  .values-section { padding: 3.5rem 1.5rem; }
  .values-grid { grid-template-columns: 1fr; }
  .team-section { padding: 3.5rem 1.5rem; }
  .team-grid { grid-template-columns: 1fr; }
  .stats-band { padding: 2.5rem 1.5rem; gap: 1rem; }
  .stat-sep { display: none; }
  .stat-block { min-width: 120px; }
  .press-logos { gap: 1.5rem; }
  .about-cta { padding: 3.5rem 1.5rem; }
}

@media (max-width: 480px) {
  .story-section { padding: 3rem 1.2rem; }
  .values-section { padding: 3rem 1.2rem; }
  .team-section { padding: 3rem 1.2rem; }
  .stats-band { padding: 2rem 1.2rem; }
  .stat-block { padding: 0.8rem 1.5rem; }
  .stat-big { font-size: 2.8rem; }
  .press-section { padding: 2.5rem 1.2rem; }
  .about-cta { padding: 3rem 1.2rem; }
}