/* ==========================================================================
   The client testimonials, one section for the whole site.  [bhp_testimonials]

   The attribution is LEFT aligned against the headshot, which is what the client asked for: it was
   centred on some pages and left on others, and centred attribution under a left-set quote reads as
   a mistake rather than a choice.

   The cards are equal height with the attribution pinned to the bottom edge, so three quotes of very
   different lengths still line their names up.
   ========================================================================== */

.bhpt{--bhpt-ink:#171D3A;--bhpt-body:#374763;--bhpt-line:#E5E1D6;--bhpt-card:#FBF8F1;--bhpt-gold:#FFB000}
.bhpt-dark{--bhpt-ink:#FFF;--bhpt-body:rgba(247,242,231,.78);--bhpt-line:rgba(247,242,231,.14);--bhpt-card:rgba(247,242,231,.05)}

.bhpt{display:block}
.bhpt-rule{display:block;width:44px;height:3px;background:var(--bhpt-gold);margin:0 0 20px}
.bhpt-h2{font-family:'Fraunces',Georgia,serif;font-weight:600;color:var(--bhpt-ink);
  font-size:clamp(31px,3.6vw,48px);line-height:1.1;letter-spacing:-.018em;margin:0 0 30px}

.bhpt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}

.bhpt-card{display:flex;flex-direction:column;margin:0;padding:30px 28px;border-radius:14px;
  background:var(--bhpt-card);border:1px solid var(--bhpt-line)}
.bhpt-mark{display:block;font-family:'Fraunces',Georgia,serif;font-size:44px;line-height:.6;
  color:var(--bhpt-gold);opacity:.55;margin-bottom:14px}
.bhpt-quote{margin:0 0 22px;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:20px;line-height:1.42;letter-spacing:-.01em;color:var(--bhpt-ink)}

/* pinned to the bottom, so the names line up across cards of different lengths */
.bhpt-by{margin-top:auto;padding-top:18px;border-top:1px solid var(--bhpt-line);
  display:flex;align-items:center;gap:14px;text-align:left}
/* `.elementor img{border-radius:0}` is two selectors deep, so the headshot says it from inside .bhpt */
.bhpt .bhpt-face{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:1px solid var(--bhpt-line);background:var(--bhpt-card)}
.bhpt-who{display:flex;flex-direction:column;gap:3px;min-width:0}
/* the attribution is upright: the quote above it is the italic, and an italic name reads as part of
   the quote rather than as the person saying it. Stated, because it is inherited otherwise. */
.bhpt-who b{font-family:'Geist',-apple-system,sans-serif;font-weight:600;font-size:15px;
  line-height:1.3;color:var(--bhpt-ink);font-style:normal}
.bhpt-who small{font-family:'Geist',-apple-system,sans-serif;font-size:13.5px;line-height:1.4;
  color:var(--bhpt-body);font-style:normal}

@media (max-width:1024px){
  .bhpt-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .bhpt-card:only-child,.bhpt-card:nth-child(3):last-child{grid-column:span 2}
}
@media (max-width:767px){
  .bhpt-h2{font-size:26px;line-height:1.16;margin-bottom:22px}
  .bhpt-grid{grid-template-columns:1fr;gap:16px}
  .bhpt-card{padding:24px 22px}
  .bhpt-card:nth-child(3):last-child{grid-column:auto}
  .bhpt-quote{font-size:17.5px;line-height:1.5}
  .bhpt-face{width:48px;height:48px}
}