/* A personal introduction; project styling and live voice behavior stay separate. */
.home-intro--personal {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(40px, 5vw, 76px);
  padding: 72px 0 68px;
}
.hero-portrait {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid #d0dfe6;
  box-shadow: 0 0 0 10px #f1f6f8;
}
.hero-introduction { min-width: 0; }
.home-intro--personal h1 {
  font-size: clamp(58px, 6.4vw, 88px);
  line-height: 1.02;
  letter-spacing: -.065em;
  text-align: left;
}
.home-intro--personal .hero-school {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
  max-width: none;
}
.hero-bio {
  max-width: 690px;
  margin: 24px 0 0;
  color: #3d4548;
  font-size: clamp(18px, 1.65vw, 21px);
  line-height: 1.65;
  letter-spacing: -.014em;
  text-wrap: pretty;
}
.home-intro--personal .hero-agent {
  align-items: flex-start;
  margin-top: 26px;
}
.home-intro--personal .hero-agent-call {
  width: auto;
  flex-direction: row;
  gap: 16px;
  padding-right: 60px;
}
.home-intro--personal .hero-agent-circle { width: 76px; height: 76px; flex: none; }
.home-intro--personal .hero-agent-circle > svg { width: 38px; height: 38px; }
.home-intro--personal .hero-agent-label { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.home-intro--personal .hero-agent-arrow { top: 9px; right: 0; width: 46px; height: 60px; transform: rotate(-18deg); }
.home-intro--personal .hero-agent > p { margin-top: 10px; text-align: left; font-size: 11px; }
.home-intro--personal .hero-agent-controls { justify-content: flex-start; flex-wrap: wrap; }

@media (max-width: 960px) {
  .home-intro--personal { grid-template-columns: 210px minmax(0, 1fr); column-gap: 42px; padding: 60px 0; }
  .home-intro--personal h1 { font-size: 62px; }
  .hero-bio { font-size: 18px; }
}
@media (max-width: 820px) {
  .home-page .site-header { gap: 8px; }
  .home-page .site-name { font-size: 16px; }
  .home-page .header-links { gap: 0; }
  .home-page .header-links .quiet-link { display: inline-flex; min-height: 44px; padding: 0 5px; font-size: 11px; }
}
@media (max-width: 760px) {
  .home-intro--personal { grid-template-columns: 1fr; justify-items: center; gap: 30px; padding: 44px 0 48px; }
  .hero-portrait { width: 158px; box-shadow: 0 0 0 7px #f1f6f8; }
  .hero-introduction { width: 100%; max-width: 550px; text-align: center; }
  .home-intro--personal h1 { font-size: clamp(44px, 9vw, 62px); text-align: center; }
  .home-intro--personal .hero-school { max-width: 340px; margin: 14px auto 0; text-align: center; font-size: 13px; text-wrap: balance; }
  .hero-bio { margin-top: 21px; font-size: 17px; line-height: 1.65; text-wrap: pretty; }
  .home-intro--personal .hero-agent { align-items: center; margin-top: 24px; }
  .home-intro--personal .hero-agent-call { padding-right: 0; }
  .home-intro--personal .hero-agent-circle { width: 64px; height: 64px; }
  .home-intro--personal .hero-agent-circle > svg { width: 32px; height: 32px; }
  .home-intro--personal .hero-agent-label { font-size: 22px; }
  .home-intro--personal .hero-agent-arrow { right: -43px; width: 37px; height: 48px; }
  .home-intro--personal .hero-agent > p { text-align: center; max-width: 320px; }
  .home-intro--personal .hero-agent-controls { justify-content: center; }
}
@media (max-width: 380px) {
  .home-intro--personal { padding-top: 36px; }
  .hero-portrait { width: 140px; }
  .home-intro--personal h1 { font-size: 42px; }
  .hero-bio { font-size: 16px; }
  .home-intro--personal .hero-agent-arrow { display: none; }
}