/* ==========================================================================
   OSSA — team list and agent profile pages
   ========================================================================== */

.agents-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 50px var(--grid-gap);
}
.agent-tile { display: flex; flex-direction: column; }
.agent-tile .at-photo {
  aspect-ratio: 0.82;
  overflow: hidden;
  background: var(--c-beige-15);
}
.agent-tile .at-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 0.6s cubic-bezier(0.44, 0, 0.56, 1);
}
.agent-tile:hover .at-photo img { transform: scale(1.05); }
.agent-tile .at-role { margin-top: 14px; color: var(--c-text-70); }
.agent-tile .at-name { margin-top: 4px; color: var(--c-dark); }
.agent-tile .at-links { margin-top: 8px; display: flex; gap: 8px; color: var(--c-text-70); }
.agent-tile .at-links a:hover { color: var(--c-orange); }

@media (max-width: 1199px) and (min-width: 810px) { .agents-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 809px) { .agents-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; } }

/* ---------- Agent profile ---------- */
.agent-profile { padding: 120px var(--gutter) 60px; }
.ap-top { display: flex; gap: 60px; align-items: flex-end; margin-bottom: 40px; }
.ap-photo { flex: none; width: 380px; max-width: 42vw; aspect-ratio: 0.82; overflow: hidden; background: var(--c-beige-15); }
.ap-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ap-info { display: flex; flex-direction: column; gap: 8px; padding-bottom: 8px; }
.ap-info h1 { text-transform: capitalize; color: var(--c-dark); }
.ap-role { color: var(--c-text-70); text-transform: uppercase; }
.ap-license { color: var(--c-text-70); }
.ap-contact { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.ap-contact a { color: var(--c-text); }
.ap-contact a:hover { color: var(--c-orange); }
.ap-tabs { display: flex; gap: 26px; margin-top: 22px; border-bottom: 1px solid var(--c-border); padding-bottom: 0; }
.ap-tabs a {
  padding: 10px 0 12px;
  color: var(--c-text-70);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.ap-tabs a:hover { color: var(--c-dark); }
.ap-tabs a.active { color: var(--c-dark); border-color: var(--c-dark); }

.ap-bio { max-width: 860px; display: flex; flex-direction: column; gap: 12px; }
.ap-bio h5 { margin-top: 22px; color: var(--c-dark); }

.ap-grid { margin-top: 10px; }
.ap-certs, .ap-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.ap-certs img { width: 100%; height: auto; border: 1px solid var(--c-border); }
.testimonial {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.testimonial .tq { font-family: var(--f-copy); font-size: 15px; line-height: 1.5; color: var(--c-text); }
.testimonial .ta { font-family: var(--f-ui); font-size: 12px; color: var(--c-text-70); }

@media (max-width: 1199px) {
  .agent-profile { padding-top: 100px; }
  .ap-top { flex-direction: column; align-items: flex-start; gap: 26px; }
  .ap-certs, .ap-testimonials { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 809px) {
  .ap-photo { width: 100%; max-width: none; }
  .ap-certs, .ap-testimonials { grid-template-columns: 1fr; }
}