/* Intellect Juris — Our people page
   Section layout follows the supplied Our People mock; type, colour, buttons and radii come from site.css.
   The closing CTA reuses .ab-cta from about.css. */

/* ---------- hero banner ---------- */
.pp-hero { padding: 100px 0 80px; }
.pp-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: 440px; border-radius: var(--radius); background: var(--sand); }
.pp-banner__photo { position: absolute; inset: 0 0 0 auto; z-index: -1; width: 72%; }
.pp-banner__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 95%; }
.pp-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, var(--sand) 0%, var(--sand) 28%, rgba(232, 225, 214, .6) 42%, rgba(232, 225, 214, 0) 62%); }
.pp-banner__copy { max-width: 480px; padding: 56px; }
.pp-crumbs { display: flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--taupe); }
.pp-crumbs::before { content: ""; width: 24px; height: 1px; background: var(--copper); }
.pp-crumbs a { text-decoration: none; }
.pp-crumbs a:hover { color: var(--bronze); text-decoration: underline; text-underline-offset: 3px; }
.pp-crumbs [aria-hidden] { opacity: .6; }
.pp-banner .page-pill { margin: 18px 0 0; }
.pp-banner .hero__title { margin: 18px 0 18px; }
.pp-banner p:not(.pp-crumbs) { max-width: 36ch; color: var(--taupe); }

/* ---------- leadership ---------- */
.pp-leaders { padding-bottom: var(--section); }
.pp-leaders-head { margin-bottom: 48px; text-align: center; }
.pp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-card { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius); background: var(--sand); cursor: pointer; }
.pp-card > img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; transition: transform .8s var(--ease); }
.pp-card:hover > img { transform: scale(1.03); }
.pp-card::after { content: ""; position: absolute; inset: auto 0 0; height: 48%; background: linear-gradient(0deg, rgba(28, 31, 33, .88), rgba(28, 31, 33, 0)); pointer-events: none; }
.pp-card__info { position: absolute; inset: auto 0 0; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 24px; color: #fff; }
.pp-card__info h3 { font: 500 1.5rem/1.2 var(--font-display); letter-spacing: -0.01em; }
.pp-card__info p { margin-top: 4px; font-size: .9375rem; color: var(--on-dark); }
.pp-plus { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--page); color: var(--espresso); transition: transform .4s var(--ease), background-color .3s var(--ease); }
.pp-plus svg { width: 16px; height: 16px; }
.pp-card:hover .pp-plus { background: var(--copper); color: #fff; transform: rotate(90deg); }

/* ---------- profile pop-up ---------- */
.pp-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; overflow-y: auto; visibility: hidden; background: rgba(41, 45, 48, 0); transition: background-color .35s var(--ease), backdrop-filter .35s var(--ease), visibility 0s linear .4s; }
.pp-modal.is-open { visibility: visible; background: rgba(41, 45, 48, .6); backdrop-filter: blur(6px); transition-delay: 0s; }
.pp-panel { position: relative; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: stretch; gap: 40px; width: 100%; max-width: 1000px; margin: auto; padding: 24px; border-radius: var(--radius); background: var(--page); box-shadow: 0 30px 80px -20px rgba(41, 45, 48, .5); opacity: 0; transform: translateY(28px) scale(.94); transform-origin: var(--ox, 50%) var(--oy, 50%); transition: opacity .3s var(--ease), transform .5s var(--ease); }
.pp-modal.is-open .pp-panel { opacity: 1; transform: none; }
.pp-m-photo { position: relative; min-height: 460px; overflow: hidden; border-radius: var(--radius); background: var(--sand); }
.pp-m-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
.pp-m-role { position: absolute; left: 16px; top: 16px; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: var(--radius); background: var(--page); font-size: .875rem; font-weight: 500; box-shadow: 0 6px 18px -8px rgba(41, 45, 48, .35); }
.pp-m-body { display: flex; flex-direction: column; justify-content: center; padding: 16px 24px 8px 0; }
.pp-m-body > * { opacity: 0; transform: translateY(12px); transition: opacity .45s var(--ease), transform .6s var(--ease); }
.pp-modal.is-open .pp-m-body > * { opacity: 1; transform: none; }
.pp-modal.is-open .pp-m-body > :nth-child(2) { transition-delay: .05s; }
.pp-modal.is-open .pp-m-body > :nth-child(3) { transition-delay: .1s; }
.pp-modal.is-open .pp-m-body > :nth-child(4) { transition-delay: .15s; }
.pp-modal.is-open .pp-m-body > :nth-child(5) { transition-delay: .2s; }
.pp-modal.is-open .pp-m-body > :nth-child(6) { transition-delay: .25s; }
.pp-m-body h2 { font: 400 2rem/1.15 var(--font-display); letter-spacing: -0.02em; }
.pp-m-sub { margin-top: 8px; font-size: .9375rem; color: var(--bronze); }
.pp-m-intro { margin-top: 16px; color: var(--taupe); }
.pp-m-social { display: flex; gap: 8px; margin-top: 20px; }
.pp-m-social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--stone); border-radius: 50%; color: var(--espresso); transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.pp-m-social a:hover { border-color: var(--espresso); background: var(--espresso); color: #fff; }
.pp-m-social a[hidden] { display: none; }
.pp-m-social .pp-m-mail { display: inline-flex; gap: 10px; width: auto; padding: 0 18px 0 14px; border-radius: 999px; font-size: .9375rem; text-decoration: none; }
.pp-m-social svg { width: 16px; height: 16px; }
.pp-m-rule { width: 100%; margin: 28px 0 24px; border: 0; border-top: 1px solid var(--stone); }
.pp-m-body h3 { font: 500 1.25rem/1.25 var(--font-display); }
.pp-m-edu { margin-top: 10px; font-size: .9375rem; color: var(--taupe); }
.pp-m-list { display: grid; gap: 12px; margin-top: 18px; }
.pp-m-list li { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 12px; font-size: .9375rem; line-height: 1.55; }
.pp-m-list li::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--espresso) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c58b57' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; }
.pp-m-close { position: absolute; top: 14px; right: 14px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--page); transition: background-color .3s var(--ease), color .3s var(--ease), transform .4s var(--ease); }
.pp-m-close:hover { background: var(--espresso); color: #fff; transform: rotate(90deg); }
.pp-m-close svg { width: 16px; height: 16px; }
body.pp-modal-open { overflow: hidden; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
  .pp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .pp-modal { padding: 12px; }
  .pp-panel { grid-template-columns: 1fr; gap: 20px; padding: 16px; }
  .pp-m-photo { min-height: 0; aspect-ratio: 4 / 4.2; }
  .pp-m-body { padding: 0 6px 8px; }
  .pp-m-body h2 { font-size: 1.625rem; }
  .pp-m-close { background: var(--page); }
}
@media (max-width: 767px) {
  .pp-hero { padding: 84px 0 56px; }
  .pp-banner { flex-direction: column; align-items: stretch; min-height: 0; }
  .pp-banner__photo { position: relative; inset: auto; width: 100%; height: 230px; }
  .pp-banner::after { background: linear-gradient(0deg, var(--sand) 0%, var(--sand) 36%, rgba(232, 225, 214, 0) 52%); }
  .pp-banner__copy { max-width: none; padding: 20px 24px 32px; }
  .pp-leaders-head { margin-bottom: 32px; }
}
@media (max-width: 560px) {
  .pp-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-modal, .pp-panel, .pp-m-body > *, .pp-m-close { transition-duration: .01s !important; transition-delay: 0s !important; }
  .pp-panel { transform: none; }
}