/* Contact: the same grid and type scale as /talk-to-us/ (talk.css).
   Phones and tablets: intro, the form card, then "What happens next" and other ways to reach us (the markup order,
   so focus order matches). Desktop: intro, steps and rows left; the shared enquiry form card (assets/css/enquiry-form.css)
   right at 460 to 520px, its top edge level with the top of the h1. The block under the intro is sticky, so it stays
   beside the form when "Add details" opens. The rows are the shared .link-row; hero rhythm comes from site.css. */
.contact { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding-block: var(--hero-pt) var(--section-y); }
.contact .hero-glow { opacity: .7; }

.contact-grid {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 40px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "intro" "form" "side";
  align-items: start;
}
.contact-intro { grid-area: intro; }
.contact-card { grid-area: form; }
.contact-side { grid-area: side; }
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1fr) clamp(460px, 40vw, 520px);
    grid-template-areas: "intro form" "side 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 */
  .contact-card { margin-top: calc(var(--fs-eyebrow) * 1.3 + 14px); }
  /* Row 2 runs to the bottom of the card, so the steps and rows can stick just under the header */
  .contact-side { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* A block eyebrow, so the h1's top is exactly the eyebrow line plus 14px (the card lines up with it on desktop) */
.contact-intro > .eyebrow { display: flex; width: fit-content; }
.contact-intro h1 { max-width: 16ch; }
.contact-intro .lead { max-width: 54ch; }

.contact-sub { font-size: var(--fs-h4); line-height: 1.3; letter-spacing: -.01em; margin: 0 0 14px; }
@media (min-width: 1024px) { .contact-side > .contact-sub:first-child { margin-top: 24px; } }
.contact-steps + .contact-sub { margin-top: 32px; }

/* What happens next: three short numbered steps with the shared small .step-num */
.contact-steps { display: grid; gap: 16px; max-width: 56ch; }
.contact-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start; }
/* 2px down, so the first 24px text line is centred on the 28px number */
.contact-steps p { padding-top: 2px; color: var(--ink-2); line-height: 1.5; }
.contact-steps strong { color: var(--ink); font-weight: 500; }
/* Phones and tablets: a little tighter, so the page stays inside its 2,200px phone budget */
@media (max-width: 1023px) { .contact-steps { gap: 12px; } .contact-steps + .contact-sub { margin-top: 24px; } }

.contact-ways { max-width: 560px; }