/* ==========================================================================
   Contact — two columns on the comp's 1053 measure.

   There is no Figma frame for this page, so nothing here is traced. It is
   assembled from the homepage's own tokens: the hero's pattern and type ramp on
   the left, a bordered panel on the right in the same hairline the cards and
   the comparison grid use. The one thing it does not inherit is a fixed canvas —
   the form's height is HubSpot's to decide, so the page is laid out in flow.
   ========================================================================== */

.gw-contact {
  position: relative;
  padding-block: 96px 120px;
  background: var(--gw-white);
  overflow: clip;
}

/* the hero's pattern, cropped to the top of the page and faded out under the
   columns so the form never sits on a busy ground */
.gw-contact__bg {
  position: absolute;
  inset: -72px 0 auto;
  height: 620px;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 100%);
}
.gw-contact__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0.7;
  filter: invert(1) brightness(2.2) invert(1);   /* same lift as the hero */
}

.gw-contact__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* ---- left: the pitch ----------------------------------------------------- */
.gw-contact__eyebrow {
  font-family: var(--gw-font-display);
  font-weight: 400;
  font-size: var(--gw-t-eyebrow);
  line-height: var(--gw-lh-eyebrow);
}

.gw-contact__title {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 400;
}
.gw-contact__title-a,
.gw-contact__title-b {
  display: block;
  font-family: var(--gw-font-display);
  font-weight: 400;
}
.gw-contact__title-a {
  font-size: 40px;
  line-height: 44px;
  color: var(--gw-ink);
}
.gw-contact__title-b {
  font-size: 48px;
  line-height: 52px;
  /* the gradient is clipped to the text box, so the descenders need the room */
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

.gw-contact__lede {
  margin-top: 24px;
  max-width: 34em;
  font-size: 18px;
  line-height: 28px;
  color: var(--gw-ink);
}

/* numbered because it is a sequence — this is what actually happens, in order */
.gw-contact__next {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  list-style: none;
}
.gw-contact__step {
  display: flex;
  gap: 20px;
  align-items: baseline;
}
.gw-contact__step-n {
  flex: none;
  width: 2.4ch;
  font-family: var(--gw-font-display);
  font-size: 20px;
  line-height: 26px;
  color: var(--gw-violet);
  font-variant-numeric: tabular-nums;
}
.gw-contact__step-text { display: block; }
.gw-contact__step-title {
  display: block;
  font-family: var(--gw-font-head);
  font-weight: 700;
  font-size: var(--gw-t-card-sm);
  line-height: var(--gw-lh-card-sm);
  color: var(--gw-black);
}
.gw-contact__step-body {
  display: block;
  margin-top: 6px;
  font-size: var(--gw-t-body);
  line-height: var(--gw-lh-body);
  color: var(--gw-gray-700);
}

/* ---- right: the form panel ----------------------------------------------- */
.gw-contact__form {
  padding: 40px;
  background: var(--gw-white);
  border: 1px solid var(--gw-line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 40px rgb(17 24 39 / 0.06);
}

/* HubSpot's current embed renders the form in a CROSS-ORIGIN IFRAME, not as
   markup in this page — measured: one <iframe> at 413x788, zero inputs in our
   DOM. Nothing inside it can be styled from here, so there are no field or
   button rules below on purpose. The form's typeface, colours and button live
   in HubSpot's own form editor; set them there to match this page.

   What is ours is the frame around it. The height is HubSpot's to set (its
   script measures the form and posts the height back), so this only reserves a
   plausible amount of room to keep the panel from collapsing to nothing and
   then jumping when the form lands. */
.hs-form-frame {
  min-height: 480px;
}
.hs-form-frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

.gw-contact__noscript {
  margin-top: 20px;
  font-size: var(--gw-t-body);
  line-height: var(--gw-lh-body);
  color: var(--gw-gray-700);
}

/* ---- anything the editor adds to the page body --------------------------- */
.gw-contact__body {
  position: relative;
  z-index: 1;
  margin-top: 72px;
  font-size: var(--gw-t-body);
  line-height: var(--gw-lh-body);
  color: var(--gw-ink);
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 60rem) {
  .gw-contact { padding-block: 64px 88px; }
  /* the form is what the page is for, so it comes first once they stack */
  .gw-contact__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .gw-contact__form { order: -1; }
  .gw-contact__title-a { font-size: 32px; line-height: 36px; }
  .gw-contact__title-b { font-size: 38px; line-height: 42px; }
}

@media (max-width: 40rem) {
  .gw-contact { padding-block: 48px 64px; }
  .gw-contact__form { padding: 24px; }
  .gw-contact__title-a { font-size: 26px; line-height: 30px; }
  .gw-contact__title-b { font-size: 30px; line-height: 34px; }
  .gw-contact__lede { font-size: 16px; line-height: 25px; }
  .gw-contact__next { margin-top: 36px; gap: 24px; }
}