/* ================================================================
   SECTIONS — Quiz, About Hero
   ================================================================ */

/* ── STYLE QUIZ ── */
.quiz-section {
  background: var(--white); color: var(--black);
  padding: 80px var(--page-gutter); text-align: center;
}
.quiz-eyebrow {
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mid-gray); margin-bottom: 16px;
}
.quiz-h {
  font-family: var(--ff-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.02em; line-height: 0.95; margin-bottom: 20px;
}
.quiz-h em { font-style: italic; font-weight: 400; }
.quiz-sub {
  font-size: 15px; color: var(--mid-gray);
  max-width: 480px; margin: 0 auto 40px; line-height: 1.7;
}
.quiz-card-row {
  display: flex; gap: 16px; justify-content: center;
  flex-wrap: wrap; margin-bottom: 40px;
}
.quiz-card {
  width: 160px;
  background: var(--off-white); border: 2px solid transparent;
  padding: 24px 16px; text-align: center; cursor: none; transition: all var(--speed-fast);
}
.quiz-card:hover,
.quiz-card.selected { border-color: var(--black); background: var(--black); color: var(--white); }
.quiz-card-icon { font-size: 32px; margin-bottom: 10px; }
.quiz-card-label {
  font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
}

/* ── ABOUT HERO ── */
.about-hero {
  background: var(--off-black); padding: 80px var(--page-gutter);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
  border-bottom: var(--border);
}
.about-h {
  font-family: var(--ff-display);
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 900; text-transform: uppercase;
  line-height: 0.95; letter-spacing: -0.02em;
}
.about-h em { font-style: italic; font-weight: 400; }
.about-p { font-size: 15px; color: var(--gray); line-height: 1.8; }