.teacher-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 0 clamp(72px, 8vw, 112px);
  background:
    radial-gradient(circle at 20% 30%, rgba(36,87,166,.32), transparent 32%),
    linear-gradient(135deg, var(--pf-ink), #0d2b4d);
  color: #fff;
}
.teacher-hero::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -220px;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  pointer-events: none;
}
.teacher-hero__grid { display: grid; grid-template-columns: minmax(280px, .72fr) 1.28fr; gap: clamp(48px, 8vw, 100px); align-items: center; }
.teacher-portrait { position: relative; min-height: 520px; margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: var(--pf-blue-dark); box-shadow: 0 32px 80px -32px rgba(0,0,0,.7); }
.teacher-portrait img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.teacher-portrait > span { display: grid; min-height: 520px; place-items: center; color: rgba(255,255,255,.88); font-size: 11rem; font-weight: 700; }
.teacher-portrait figcaption { position: absolute; right: 14px; bottom: 14px; display: flex; padding: 9px 13px; align-items: center; gap: 7px; border-radius: 999px; background: rgba(13,118,73,.92); color: #fff; font-size: .72rem; font-weight: 700; backdrop-filter: blur(10px); }
.teacher-kicker { color: #79deb3; font-size: .76rem; font-weight: 750; letter-spacing: .11em; }
.teacher-hero h1 { max-width: 760px; margin: 18px 0 10px; color: #fff; font-size: clamp(3rem, 6vw, 5.6rem); letter-spacing: -.055em; line-height: .98; }
.teacher-role { display: flex; gap: 10px; color: #b9cde0; font-size: 1rem; }
.teacher-role span { color: var(--pf-green); }
.teacher-intro { max-width: 680px; margin-top: 28px; color: #d6e2ee; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.7; }
.teacher-hero__actions { display: flex; margin-top: 32px; gap: 12px; flex-wrap: wrap; }
.teacher-main { background: var(--pf-white); }
.teacher-main__grid { display: grid; padding-block: clamp(72px, 9vw, 120px); grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(50px, 8vw, 100px); align-items: start; }
.teacher-story h2 { max-width: 700px; margin-top: 14px; font-size: clamp(2.2rem, 4vw, 3.5rem); }
.teacher-story .prose { max-width: 760px; font-size: 1.05rem; line-height: 1.8; }
.teacher-credentials { padding: 30px; border: 1px solid var(--pf-line); border-top: 4px solid var(--pf-green); border-radius: 18px; background: var(--pf-paper); box-shadow: var(--shadow-small); }
.teacher-credentials ul { display: grid; margin: 22px 0 0; padding: 0; gap: 14px; list-style: none; }
.teacher-credentials li { display: flex; align-items: flex-start; gap: 10px; color: var(--pf-ink-2); font-size: .88rem; }
.teacher-credentials li .icon { width: 19px; height: 19px; flex: none; color: var(--pf-green-dark); }
.teacher-courses { padding-block: clamp(72px, 8vw, 108px); border-top: 1px solid var(--pf-line); background: var(--pf-paper); }
.teacher-courses .course-grid { margin-top: 36px; }

@media (max-width: 900px) {
  .teacher-hero__grid, .teacher-main__grid { grid-template-columns: 1fr; }
  .teacher-portrait { max-width: 580px; min-height: 420px; }
  .teacher-portrait img, .teacher-portrait > span { min-height: 420px; }
}
@media (max-width: 620px) {
  .teacher-hero { padding-top: 22px; }
  .teacher-portrait { min-height: 390px; border-radius: 18px; }
  .teacher-portrait img, .teacher-portrait > span { min-height: 390px; }
  .teacher-main__grid { gap: 38px; }
  .teacher-credentials { padding: 24px; }
}