.experience { background: linear-gradient(180deg, var(--floral), #F7EFE6); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 34px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 24px 28px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat strong { display: block; color: var(--cinnamon); font-family: var(--serif); font-size: 34px; line-height: 1.12; }
.stat span { color: var(--muted); font-size: 13px; }
.experience-details { display: grid; grid-template-columns: 1.12fr .88fr; gap: 24px; align-items: stretch; }
.experience-cards { display: grid; gap: 16px; }
.detail-card { padding: 26px; border: 1px solid rgba(113, 63, 40, .10); background: white; }
.detail-card h3 { font-size: 24px; }
.detail-card p { margin-bottom: 0; color: #52463F; }
.experience-badge { display: grid; min-width: 0; margin: 0; padding: 20px; place-items: center; background: white; }
.experience-badge img { width: min(100%, 410px); height: auto; }
.roles-panel { display: grid; grid-template-columns: .68fr 1.32fr; gap: 48px; margin-top: 22px; padding: 34px 38px; background: var(--bark); color: white; }
.roles-panel h3 { color: white; font-size: 32px; }
.roles-panel .eyebrow { color: #F0C2A7; }
.role-list p { margin-top: 0; }
.role-list p:last-child { margin-bottom: 0; }
.role-list strong { color: #FFD9C4; }
.experience-close { max-width: 950px; margin: 24px 0 0; color: #4F433D; font-size: 18px; }
@media (max-width: 980px) {
  .experience-details { grid-template-columns: 1fr; }
  .experience-cards { grid-template-columns: 1fr 1fr; }
  .experience-badge img { width: min(100%, 360px); }
  .roles-panel { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 760px) {
  .stats-grid {
    grid-template-columns: 1fr;
    margin: 22px 0 28px;
  }

  .stat {
    padding: 17px 16px;
  }

  .stat + .stat {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .stat strong {
    font-size: 30px;
  }

  .experience-details {
    gap: 16px;
  }

  .experience-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .detail-card {
    padding: 20px 18px;
  }

  .experience-badge {
    padding: 18px;
  }

  .experience-badge img {
    width: min(100%, 280px);
  }

  .roles-panel {
    gap: 16px;
    margin-top: 18px;
    padding: 24px 20px;
  }

  .roles-panel h3 {
    font-size: 27px;
  }

  .role-list p {
    margin-bottom: 14px;
  }

  .experience-close {
    margin-top: 22px;
    font-size: 16px;
  }
}