/* =========================================================
   About page only — staggered photos, then intro with rotating badge, then education.
   ========================================================= */

/* ---------- Intro ---------- */
/* Photos lead at the top on every screen size, text below */
.about-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.about-intro__actions { align-items: center; margin-top: 8px; }

/* Circular "UX DESIGN ✦ GROWTH STRATEGY ✦" badge, slowly turning */
.badge {
  width: 112px;
  height: 112px;
  overflow: visible;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  fill: var(--black);
  transform-origin: 50% 50%;
  animation: badge-spin 24s linear infinite;
}
@keyframes badge-spin { to { transform: rotate(360deg); } }

/* Three photos in a row, each stepping a little lower, above the text */
.about-photos { order: -1; display: flex; align-items: flex-start; gap: 16px; max-width: 960px; }
.about-photos img {
  width: calc((100% - 32px) / 3);
  aspect-ratio: 1;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-lg);
}
.about-photos img:nth-child(2) { margin-top: 40px; }
.about-photos img:nth-child(3) { margin-top: 80px; }

/* Type matches Home and Services: big page title, section headings like the home statements */
.about-intro h1 { font-size: 64px; line-height: 1.1; }
.education > h2 { font-size: 36px; line-height: 48px; font-weight: 400; letter-spacing: -1.2px; }

/* ---------- Education ---------- */
.education__list { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 72px; margin-top: 32px; }
.education__item { display: flex; gap: 32px; align-items: flex-start; }
.education__icon { width: 48px; height: 48px; flex-shrink: 0; fill: currentColor; margin-top: 4px; }
.education__item h5 + p { margin-top: 4px; }
.education__item .caption { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .badge { animation: none; }
}

/* Tablet */
@media (max-width: 1199px) {
  .about-intro h1 { font-size: var(--h1-size); line-height: var(--h1-line); }
  .about-intro { gap: 48px; }
  .education__list { gap: 32px 40px; }
}

/* Phone */
@media (max-width: 809px) {
  .education > h2 { font-size: 28px; line-height: 36px; }
  .badge { width: 96px; height: 96px; }
  .about-photos { gap: 8px; }
  .about-photos img { width: calc((100% - 16px) / 3); border-radius: var(--radius-md); }
  .about-photos img:nth-child(2) { margin-top: 24px; }
  .about-photos img:nth-child(3) { margin-top: 48px; }
  .education__list { grid-template-columns: 1fr; }
  .education__item { gap: 16px; }
  .education__icon { width: 40px; height: 40px; }
}