/* ==========================================================================
   Founder page
   The page is assembled from the homepage's components — the centred hero,
   the card row under it, the bento grid, the FAQ accordion. This file only
   adds the few things a person page needs that the homepage has no use for.
   ========================================================================== */

/* The portrait sits above the name, centred, the way the founder avatars do
   in the homepage hero — just at the size a page about one person deserves. */
.prs-face{width:clamp(112px,13vw,150px);margin:0 auto clamp(18px,2.4vw,26px);
  border-radius:50%;overflow:hidden;background:var(--surface-2);
  box-shadow:0 14px 40px rgba(0,0,0,.14);border:3px solid var(--surface);}
.prs-face img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;display:block;}
html.dark .prs-face{border-color:var(--surface);box-shadow:0 14px 40px rgba(0,0,0,.5);}

.prs-hero .eyebrow{text-align:center;}
.prs-hero .display{max-width:16ch;margin-inline:auto;}

/* The third fact card is plain rather than dark or gold: three loud cards in a
   row and none of them leads. */
.hcard--plain{background:var(--surface);border:1px solid var(--muted);color:var(--ink);}
.hcard--plain .label,.hcard--accent .label{font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;opacity:.66;margin-bottom:10px;}
.hcard--plain .stmt,.hcard--accent .stmt{font-family:var(--font-display);
  font-size:clamp(24px,2.6vw,32px);line-height:1.15;}
.hcard--dark .stmt{font-family:var(--font-display);font-size:clamp(26px,2.8vw,34px);}

/* ------------------------------------------------------------- the intro */
.prs-intro{padding-block:clamp(34px,6vw,80px);}
.prs-intro .section-display{font-family:var(--font-display);
  font-size:clamp(21px,2.6vw,32px);line-height:1.35;letter-spacing:-.01em;
  max-width:34ch;margin:0 0 clamp(24px,3.5vw,42px);}
.prs-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(18px,3vw,44px);}
.prs-cols .body-copy{margin:0;}

.prs-bento,.prs-services-sec{padding-block:clamp(30px,5vw,70px);}
.prs-faq-sec{padding-block:clamp(30px,5vw,70px);}

/* --------------------------------------------------------- service cards */
.prs-svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:clamp(10px,1.4vw,16px);margin-top:clamp(20px,3vw,32px);}
.prs-svc{position:relative;display:block;padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--muted);border-radius:var(--r-card);background:var(--surface);
  text-decoration:none;color:inherit;
  transition:border-color .3s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s var(--ease-out);}
.prs-svc:hover{border-color:var(--ink);transform:translateY(-4px);box-shadow:var(--shadow-2);}
.prs-svc h3{font-family:var(--font-display);font-size:clamp(18px,1.9vw,22px);
  line-height:1.25;margin:0 0 8px;padding-right:30px;}
.prs-svc p{font-size:14px;line-height:1.6;color:var(--text-muted);margin:0;}
.prs-svc__go{position:absolute;top:clamp(20px,2.4vw,28px);right:clamp(20px,2.4vw,28px);
  color:var(--text-muted);transition:color .3s var(--ease-out),transform .3s var(--ease-out);}
.prs-svc:hover .prs-svc__go{color:var(--ink);transform:translateX(3px);}

@media (max-width:690px){
  .prs-hero .display{max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  .prs-svc,.prs-svc__go{transition:none;}
  .prs-svc:hover{transform:none;}
}

/* The quote card is a quote, so it is set in the display face at the size a
   pull quote needs — the bento's default heading size is for labels. */
.prs-tb-quote{justify-content:center;}
.prs-tb-quote h3{font-family:var(--font-display);
  font-size:clamp(19px,2vw,24px)!important;line-height:1.28;margin-bottom:10px;}
.prs-tb-quote p{font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.6;}