/* Demand-led Remote Headshots content. Reuses the established Match materials,
   type and spacing; source portraits, galleries, packages and reviews keep
   their existing geometry and controllers. */
html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-figure {
  margin: var(--match-block-space) auto;
  max-width: 900px;
  min-width: 0;
}

html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-image-link {
  display: block;
  max-width: 100%;
  border: 1px solid var(--match-card-line-strong);
  border-radius: var(--match-card-radius);
  overflow: hidden;
  background: var(--match-card-bg);
}

html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-image-link img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-figure figcaption {
  max-width: 76ch;
  margin: 12px auto 0;
  color: var(--match-muted);
  font-family: var(--match-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
}

html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-figure figcaption a {
  color: var(--match-text);
  text-decoration: underline;
  text-underline-offset: .2em;
}

html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-case {
  max-width: 76ch;
  margin: var(--match-block-space) auto 0;
  padding-top: var(--match-heading-space);
  border-top: 1px solid var(--match-card-line);
  text-align: center;
}

html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-case :is(h3:where(:not([data-match-heading-style^="lighthouse-"])),:where(*[data-match-heading-style="lighthouse-h3"])) {
  margin: 0 0 16px;
  color: var(--match-text);
  font-family: var(--match-font-display);
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
}

html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-case p:where(:not([data-match-heading-style^="lighthouse-"])),
html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-context {
  margin: 0 auto 16px;
  max-width: 76ch;
  color: var(--match-muted);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}

html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-context {
  margin-top: 16px;
  margin-bottom: 0;
  text-align: center;
}

html[data-match-design="v1"] #mp-remote-hero .mp-workflow-hero-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--match-block-space);
  gap: 12px;
  flex-wrap: wrap;
}

html[data-match-design="v1"] #siteWrapper main #mp-remote-hero .mp-workflow-hero-actions a {
  margin: 0 !important;
}

/* Keep the live form directly below its introduction when the adjacent copy
   is taller. The existing controller measures this slot without DOM changes. */
html[data-match-design="v1"] #mp-remote-hero[data-match-form-anchor="ready"] .mp-form-space {
  flex: 0 0 auto !important;
  height: var(--match-form-reserved-height) !important;
}

html[data-match-design="v1"] .mp-remote-workflow :is(#company-workflow, #company-portal, #employee-workflow) {
  scroll-margin-top: 120px;
}

@media (max-width: 767px) {
  html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-figure {
    margin-block: 24px;
  }

  html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-image-link {
    border-radius: 14px;
  }

  html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-figure figcaption {
    font-size: 13px;
    text-align: left;
  }

  html[data-match-design="v1"] .mp-remote-workflow .mp-workflow-case {
    margin-top: 24px;
    padding-top: 20px;
  }
}