/* Talk to us: book a demo or talk to sales. The form card is the shared enquiry form (assets/css/enquiry-form.css);
   the two rows under "What we'll cover" are the shared .link-row (site.css). Hero rhythm comes from site.css. */
.talk { position: relative; overflow: hidden; overflow: clip; padding-block: var(--hero-pt) var(--section-y); }
.talk .hero-glow { opacity: .7; }
/* Phones and tablets: intro, then the form, then the details (the same order as the markup, so focus order matches).
   Desktop: intro and details left, the form card right at 460 to 520px, its top edge level with the top of the h1. */
.talk-grid {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 40px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "form" "details";
  align-items: start;
}
.talk-intro { grid-area: intro; }
.talk-card { grid-area: form; }
.talk-details { grid-area: details; }
@media (min-width: 1024px) {
  .talk-grid {
    grid-template-columns: minmax(0, 1fr) clamp(460px, 40vw, 520px);
    grid-template-areas: "intro form" "details form";
    grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 7vw, 112px);
    row-gap: 8px;
  }
  /* eyebrow line (12.5px x 1.3) + the shared 14px eyebrow-to-h1 gap */
  .talk-card { margin-top: calc(var(--fs-eyebrow) * 1.3 + 14px); }
}

/* A block eyebrow, so the h1's top is exactly the eyebrow line plus 14px (the card lines up with it on desktop) */
.talk-intro > .eyebrow { display: flex; width: fit-content; }
.talk-intro h1 { max-width: 16ch; }
.talk-intro .lead { max-width: 54ch; }
.talk-sub { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -.01em; margin: 0 0 14px; }
@media (min-width: 1024px) { .talk-sub { margin-top: 24px; } }
.talk-details .check-list { max-width: 56ch; }
.talk-alt { margin-top: 28px; max-width: 560px; }