/* ---------- shared header/footer residuals ----------
   These are shared-partial calibration gaps, not page content. Measured against
   this page's reference shot and corrected locally (scoped, desktop only) rather
   than editing site.css, which two dozen parallel builds share. Each one is
   listed in the handover so the shared fix can be made once. */
@media (min-width: 768px) {
  /* The live Duda header casts a soft drop shadow over the first ~16px of the
     page; the shared header has none. Fitted to the live falloff at y119-135. */
  .page-speaking-testimonials .site-header { box-shadow: 0 0 14px rgba(0, 0, 0, .33); }

  /* Live phone number sits at x1045; the shared top bar renders it 2px left. */
  .page-speaking-testimonials .topbar__num { position: relative; left: 2px; }

  /* Live nav ends at x1185; the shared nav overshoots by 1px. */
  .page-speaking-testimonials .nav { padding-right: 16px; }

  /* Duda's dropdown caret is font-relative, so it is 1px wider in the 16px
     footer nav than in the 14px header nav. The shared 19px caret makes the
     footer nav 2px narrow, which shifts the whole centred row. */
  .page-speaking-testimonials .footer-nav .nav__caret { margin-left: 12px; }

  /* Vertical calibration: the live footer title sits 1px lower and everything
     from the nav row down sits 1px higher than the shared partial renders it. */
  .page-speaking-testimonials .footer-title { position: relative; top: 1px; }
  .page-speaking-testimonials .footer-nav-wrap,
  .page-speaking-testimonials .footer-cta-wrap,
  .page-speaking-testimonials .footer-rule,
  .page-speaking-testimonials .footer-legal { position: relative; top: -1px; }

  /* Live footer is 608px tall, the shared one 610px. */
  .page-speaking-testimonials .footer-legal { padding-bottom: 134px; }
}

/* ---------- hero ---------- */
.page-speaking-testimonials .st-hero { padding: 68px 40px 58px; }

.page-speaking-testimonials .st-title {
  font-family: var(--font-display);
  font-size: 70px;
  font-weight: 700;
  line-height: normal;
  color: #000;
  text-align: center;
}

/* ---------- testimonial bands ---------- */
.page-speaking-testimonials .st-band { padding: 20px 40px 120px; }

.page-speaking-testimonials .st-card {
  /* flow-root so the quote mark's negative top margin lifts the mark alone
     instead of collapsing out through the card's zero top padding. */
  display: flow-root;
  margin: 0;
  background: var(--gold);
  padding: 0 50px 30px;
}

.page-speaking-testimonials .st-mark {
  display: block;
  width: 111px;
  height: 94px;
  margin-top: -51px;
  fill: #000;
}

.page-speaking-testimonials .st-body { margin: 32px 0 0; }

.page-speaking-testimonials .st-body p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000;
  margin: 0;
}
.page-speaking-testimonials .st-body p + p { margin-top: 24px; }

.page-speaking-testimonials .st-name {
  margin: 34.1px 0 57.9px;
  padding-left: 20px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 40px;
  color: #000;
}

/* ============================================================================
   MOBILE — same content, stacked. Live geometry (390px):
     card inset 15px, inner padding 24px, mark 102x102 hanging 55px proud,
     body 14px/21px, attribution 14px/28px centred.
   The live page renders the first two cards' copy at 11px; we hold every card
   at 14px so nothing drops under the 12px legibility floor.
   ========================================================================== */
@media (max-width: 767px) {
  /* The 30px headline is ~380px wide and must stay on one line, as it does
     live; the shared 20px section padding would wrap it. */
  .page-speaking-testimonials .st-hero { padding: 35px 0 45px; }
  .page-speaking-testimonials .st-title { font-size: 30px; }

  .page-speaking-testimonials .st-band { padding: 70px 15px 40px; }
  .page-speaking-testimonials .st-card { padding: 0 24px 24px; }

  .page-speaking-testimonials .st-mark {
    width: 102px;
    height: 102px;
    margin-top: -55px;
    margin-left: 15px;
  }

  .page-speaking-testimonials .st-body { margin-top: 14px; }
  .page-speaking-testimonials .st-body p { font-size: 14px; line-height: 21px; }
  .page-speaking-testimonials .st-body p + p { margin-top: 21px; }

  .page-speaking-testimonials .st-name {
    margin: 24px 0 24px;
    padding-left: 0;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
  }
}