/* services_lead_form.css — lead-form band (eyebrow + heading + body on a light
   card, plus an embedded lead-gen form). Values from the spec ## Computed
   Styles: 1440 = base rules; 768 → @media(max-width:991px); 375 →
   @media(max-width:479px). Run breakpoint boundary set {479,767,991,1919}.

   Scope: every rule is scoped under [data-component="services_lead_form"]
   because the source root class (section_services → c-services__cta-wrap-2) is
   SHARED with the sibling `services` component (both were split from
   section.section_services). The data-attribute is unique to this component, so
   scoping here keeps the band's own values from colliding with the sibling on a
   composed page (rule 9).

   Typography via var(--font-*) (framework-11 E1 lock; the source family already
   matches the frozen tokens). The heading/body sit below the capture's depth-5
   DOM cap: their type ramp is measured from the 1440 source crop (report.md).
   The embedded-form field/button appearance is presentational preview chrome —
   the authoritative form is the Phase-F coordinated webform. */

/* border-box for every box — the Webflow source uses a global border-box reset,
   so padding sits INSIDE the declared widths. */
[data-component="services_lead_form"],
[data-component="services_lead_form"] * {
  box-sizing: border-box;
}

/* ---------------- Section root (source: .section_services) ---------------- */
[data-component="services_lead_form"] {
  display: block;
  color: var(--color-text-body);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  /* SDC-preview UA body-margin neutraliser (Drupal zeroes the body margin on
     composed pages — the .region-content reset below restores it there). On a
     width:auto block the negative margin resolves to a viewport-wide box at
     x=0, so it adds no horizontal scroll. */
  margin: -8px;
}
.region-content [data-component="services_lead_form"] {
  margin: 0;
  width: 100%;
}

/* -------- padding-global + padding-section-small (source:
   .padding-global.padding-section-small). The combined div owns both the
   horizontal gutter and the vertical section padding. -------------------- */
[data-component="services_lead_form"] .c-about_info__heading-wrap-6 {
  display: block;
  padding: var(--space-64) var(--space-40);
}

/* ---------------- container-large (source: .container-large) -----------------
   Centred with the shared margin-inline primitive; the side gutter comes from
   the padding-global wrapper above, so the container needs only the cap. */
[data-component="services_lead_form"] .c-about_info__heading-wrap {
  display: block;
  width: 100%;
  max-width: 1280px; /* source container-large cap; no --container-max token this run */
  margin-inline: auto;
}

/* ------------- div-block-78 — the light card surface + 2-col grid ------------
   Spec: display grid, gap 16px, 2 equal tracks at 1440 (591px 591px), padding
   40px, bg rgb(247,244,244), 1px border rgb(221,234,241), 10px radius. The
   equal 591/591 tracks are reproduced as minmax(0,1fr) pairs (rule 18) so a
   Drupal-seeded child can't inflate a bare track. */
[data-component="services_lead_form"] .c-services_lead_form__group-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-40);
  background-color: var(--color-bg-alt3);   /* rgb(247,244,244) */
  border: 1px solid rgb(221, 234, 241);     /* light-blue hairline; no token for this value */
  border-radius: 10px;                       /* no --radius-10 token this run */
}
[data-component="services_lead_form"] .c-services_lead_form__group-3 > * {
  min-width: 0;
}

/* ---------------- div-block-79 — left column (eyebrow + heading/body) -------- */
[data-component="services_lead_form"] .c-services_lead_form__group-4 {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* text-block-16 (dropped) — the "FREE GUIDE" eyebrow. Captured font-size 12px,
   color rgb(237,28,36); margin 5px 0 0. */
[data-component="services_lead_form"] .c-services_lead_form__eyebrow {
  margin: 5px 0 0;          /* no token for 5px */
  font-size: 12px;          /* no token for 12px */
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.4px;
  color: var(--color-bg-accent); /* rgb(237,28,36) — exact token value match */
}

/* div-block-134 — heading + body group (children below the depth cap). */
[data-component="services_lead_form"] .c-services_lead_form__group-2 {
  display: block;
  padding: 0 var(--space-20) 0 0;
}
/* Heading — measured from the 1440 source crop: font-size 25px (text width 482
   for the single 1440 line), weight 600, colour rgb(51,51,51) (sampled — the
   source heading is the same tone as the body, not near-black), line-height 32. */
[data-component="services_lead_form"] .c-services_lead_form__heading {
  margin: 0 0 14px;
  font-family: var(--font-family-display);
  font-size: 25px;
  font-weight: 600;
  line-height: 32px;
  color: var(--color-text-primary); /* rgb(51,51,51) — sampled from the source crop */
}
/* Body — base 16px/24px, source body colour. */
[data-component="services_lead_form"] .c-services_lead_form__body {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-body);
}

/* ------------- div-block-133 — right column form-mount (flex-centred) --------
   Spec: display flex, column, justify-content center, align-items center,
   margin 20px 0 0 60px at 1440 (60px left offset inside the form track). */
[data-component="services_lead_form"] .c-services_lead_form__group {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: var(--space-20) 0 0 60px; /* no token for the 60px form offset */
}
[data-component="services_lead_form"] .c-services_lead_form__hubspot-form {
  display: block;
  width: 100%;
}

/* ------------- embedded form — presentational preview chrome ----------------
   Column of a 2-up input row + a left-aligned submit button, matching the
   source screenshot. Not part of the content model (report.md). */
[data-component="services_lead_form"] .c-services_lead_form__form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: 100%;
}
[data-component="services_lead_form"] .c-services_lead_form__form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  width: 100%;
}
[data-component="services_lead_form"] .c-services_lead_form__form-row > * {
  min-width: 0;
}
/* Input control appearance (scoped over the composed atom_form_element). */
[data-component="services_lead_form"] .c-atom-form-element__control {
  padding: 14px 16px;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-text-body);
  background-color: var(--color-bg-page);  /* white */
  border: 1px solid rgb(221, 221, 221);    /* light-grey input hairline; no token */
  border-radius: var(--radius-8);
}
[data-component="services_lead_form"] .c-atom-form-element__control::placeholder {
  color: var(--color-text-muted);
}
/* Submit — black rounded rectangle (atom_button owns the interactive effect;
   only the box appearance is set here). */
[data-component="services_lead_form"] .c-atom-button {
  padding: 11px 28px;                        /* source button height ~43px */
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text-inverse);
  background-color: var(--color-text-black); /* rgb(0,0,0) */
  border-radius: var(--radius-8);
}

/* ======================= Tablet: 768 band (@max-width:991px) =================
   Card grid becomes asymmetric: narrow text column (202px), wide form column;
   the form's left offset drops to 0. */
@media (max-width: 991px) {
  [data-component="services_lead_form"] .c-services_lead_form__group-3 {
    grid-template-columns: 202px minmax(0, 1fr);
  }
  [data-component="services_lead_form"] .c-services_lead_form__group {
    margin: var(--space-20) 0 0;
  }
}

/* ======================= Mobile: 375 band (@max-width:479px) =================
   Card padding becomes asymmetric (40 40 40 20); grid collapses to one track,
   so eyebrow/heading/body and the form stack. Form inputs stack full-width and
   the submit spans the column. */
@media (max-width: 479px) {
  [data-component="services_lead_form"] .c-about_info__heading-wrap-6 {
    padding: 32px var(--space-16); /* no token for 32px */
  }
  [data-component="services_lead_form"] .c-services_lead_form__group-3 {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--space-40) var(--space-40) var(--space-40) var(--space-20);
  }
  [data-component="services_lead_form"] .c-services_lead_form__heading {
    line-height: 28px;
    margin-bottom: 8px; /* tighten heading→body gap so body + form register on source */
  }
  /* At mobile the source's eyebrow/heading/body sit in a text sub-column
     narrower than the full stacked card track — measured from the 375 crop:
     the heading wraps "Why most AI pilots" / "never reach" / "production"
     (3 lines) and the body wraps to 7 lines, both wrapping at ~215px, while the
     form/button below span the full ~280px column. The narrowing lives below
     the capture depth cap (report.md), so cap the text group here; this also
     lands the stacked form on the source form position. */
  [data-component="services_lead_form"] .c-services_lead_form__group-2 {
    max-width: 238px; /* border-box incl. the 20px right padding → ~218px text width */
  }
  [data-component="services_lead_form"] .c-services_lead_form__form-row {
    grid-template-columns: minmax(0, 1fr);
  }
  [data-component="services_lead_form"] .c-services_lead_form__submit {
    width: 100%;
  }
  [data-component="services_lead_form"] .c-services_lead_form__submit .c-atom-button {
    display: block;
    width: 100%;
    text-align: center;
  }
}

/* F13-6 style-parity patches — iteration 2 (generated; safe to regenerate) */
@media (min-width: 992px) {
  [data-component="services_lead_form"] > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
    font-weight: var(--font-weight-a);
    letter-spacing: var(--letter-spacing-h2);
  }
}
@media (min-width: 480px) and (max-width: 991px) {
  [data-component="services_lead_form"] > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
    font-weight: var(--font-weight-a);
    letter-spacing: var(--letter-spacing-h2);
  }
}
@media (max-width: 479px) {
  [data-component="services_lead_form"] .c-services_lead_form__group-2 {
    max-width: none;
  }
  [data-component="services_lead_form"] > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) {
    font-weight: var(--font-weight-a);
    letter-spacing: var(--letter-spacing-h2);
  }
}
/* end F13-6 patches */

/* F14-VP page-scoped layout patches — iteration 2 (generated; safe to regenerate) */
@media (min-width: 992px) {
  .page--ai_solutions_post [data-component="services_lead_form"] {
    height: 371px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-about_info__heading-wrap {
    height: 243px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-about_info__heading-wrap-5.c-about_info__heading-wrap-6 {
    height: 371px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__group {
    height: 141px;
    min-width: auto;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__group-2 {
    height: 122px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__group-3 {
    height: 243px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__group-4 {
    height: 161px;
    min-width: auto;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__hubspot-form {
    height: 129px;
  }
}
@media (min-width: 480px) and (max-width: 991px) {
  .page--ai_solutions_post [data-component="services_lead_form"] {
    height: 629px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-about_info__heading-wrap {
    height: 501px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-about_info__heading-wrap-5.c-about_info__heading-wrap-6 {
    height: 629px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__group {
    height: 399px;
    min-width: auto;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__group-2 {
    height: 380px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__group-3 {
    height: 501px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__group-4 {
    height: 419px;
    min-width: auto;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__hubspot-form {
    height: 129px;
  }
}
@media (max-width: 479px) {
  .page--ai_solutions_post [data-component="services_lead_form"] {
    height: 695px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-about_info__heading-wrap {
    height: 631px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-about_info__heading-wrap-5.c-about_info__heading-wrap-6 {
    height: 695px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__group {
    height: 196px;
    min-width: auto;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__group-2 {
    height: 278px;
    width: 281px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__group-3 {
    height: 631px;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__group-4 {
    height: 317px;
    min-width: auto;
  }
  .page--ai_solutions_post [data-component="services_lead_form"] .c-services_lead_form__hubspot-form {
    height: 196px;
  }
}
/* end F14-VP patches */