

section.about {
  background: var(--white);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 4rem;
  align-items: start;
}


/* --------------------------------------------
   PHOTO
   -------------------------------------------- */
section.about > .about-image {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3/4;
  background: var(--cream);

  position: sticky;
  top: 7rem;
}

section.about .about-doctor-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

section.about .about-image-frame {
  position: absolute;
  top: -1rem; left: -1rem; right: 1rem; bottom: 1rem;
  border: 1px solid var(--gold-light);
  pointer-events: none;
  z-index: 2;
}


/* --------------------------------------------
   TEXT
   -------------------------------------------- */
section.about > .about-text { padding-right: 1rem; }

.about-role {
  margin-top: 0.9rem;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

.about-bio {
  margin-top: 1.1rem;
  font-size: 0.94rem;
  line-height: 1.8;
  color: #2f3d3a;
  max-width: 620px;
}
.about-bio:empty { display: none; }


/* --------------------------------------------
   CREDENTIALS
   -------------------------------------------- */
.about-creds {
  margin-top: 1.8rem;
  padding-bottom: 0.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 620px;
}

.cred-item {
  border-top: 1px solid var(--gold-light);
  padding-top: 0.85rem;
}

.cred-val {
  font-family: 'Playfair Display', serif;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--rust);
  font-weight: 700;
  margin: 0;
}

.cred-label {
  font-size: 0.67rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4a5754;
  margin-top: 0.35rem;
  line-height: 1.4;
}


@media (max-width: 1200px) {
  section.about { gap: 3rem; grid-template-columns: 0.9fr 1.1fr; }
  section.about > .about-text { padding-right: 0; }
}


@media (max-width: 900px) {
  section.about {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2.5rem;
    grid-template-columns: none;
  }

  section.about > .about-image {
    order: 1;
    position: relative;
    top: auto;
    flex: none;
    max-width: 340px;
    margin: 0 auto;
    aspect-ratio: 4/5;
  }
  section.about .about-image-frame {
    top: -0.7rem; left: -0.7rem; right: 0.7rem; bottom: 0.7rem;
  }

  section.about > .about-text {
    order: 2;
    width: 100%;
    padding-right: 0;
  }

  .about-bio { max-width: none; }
  .about-creds { max-width: none; gap: 1rem; }
  .cred-val { font-size: 0.95rem; }
  .cred-label { font-size: 0.62rem; letter-spacing: 0.06em; }
}


@media (max-width: 480px) {
  section.about > .about-image { max-width: 100%; aspect-ratio: 1/1; }
  .about-creds { grid-template-columns: 1fr; gap: 0; }
  .cred-item { padding: 0.85rem 0; }
}