/*
  process-v2 — Shine Guarantee section.
  Desktop: Figma 389:80 · Mobile: Figma 175:4560
*/

.process-v2 {
  position: relative;
  isolation: isolate;
  /* Clip sparkle bleed at the sides; keep vertical visible if needed */
  overflow-x: clip;
  overflow-y: visible;
  border-block-end: 1px solid var(--color-border-subtle);
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ---------- Decorative sparkle watermark ---------- */

.process-v2__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.5;
  pointer-events: none;
}

.process-v2__bg-img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

/* ---------- Inner content band ---------- */

.process-v2__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* Mobile: 24px between title and body (Figma heading gap) */
  gap: var(--process-v2-intro-gap-mobile); /* 24px */
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--header-frame-max);
  margin-inline: auto;
  /* Mobile: Figma 56px vertical / 16px sides */
  padding-block: var(--process-v2-pad-y-mobile);
  padding-inline: var(--space-md);
}

/* ---------- Title ---------- */

.process-v2__intro {
  inline-size: 100%;
  text-align: center;
}

.process-v2__title {
  margin: 0;
  inline-size: 100%;
  font-family: var(--font-heading);
  font-weight: var(--fw-black);
  font-size: var(--fs-process-v2-title-mobile); /* 24px */
  line-height: var(--lh-process-v2-title-mobile); /* 29px */
  letter-spacing: var(--ls-process-v2);
  text-transform: uppercase;
  color: var(--color-text); /* #191919 on mobile */
}

/* Desktop / mobile title variants (line breaks differ in Figma) */
.process-v2__title-desktop {
  display: none;
}

.process-v2__title-mobile {
  display: inline;
}

/* ---------- Content: media + copy ---------- */

.process-v2__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Mobile: 32px between text stack and CTA (media is hidden) */
  gap: var(--process-v2-stack-gap); /* 32px */
  inline-size: 100%;
}

/* Team photo is desktop-only in Figma mobile frame */
.process-v2__media {
  display: none;
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-service-card);
}

.process-v2__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.process-v2__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--process-v2-stack-gap); /* 32px between text-block and CTA */
  inline-size: 100%;
  text-align: center;
}

.process-v2__text-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--process-v2-intro-gap-mobile); /* 24px */
  inline-size: 100%;
}

.process-v2__body {
  margin: 0;
  inline-size: 100%;
  font-family: var(--font-body-alt); /* Inter — Figma P2 */
  font-weight: var(--fw-regular);
  font-size: var(--fs-process-v2-body-mobile); /* 16px */
  line-height: var(--lh-process-v2-body); /* 30px */
  letter-spacing: var(--ls-process-v2);
  color: var(--color-text);
}

/* Red emphasis line — Prompt ExtraBold */
.process-v2__highlight {
  margin: 0;
  inline-size: 100%;
  font-family: var(--font-heading);
  font-weight: var(--fw-extrabold); /* 800 */
  font-size: var(--fs-process-v2-highlight-mobile); /* 20px */
  line-height: normal;
  letter-spacing: var(--ls-process-v2);
  color: var(--color-primary);
}

/* ---------- CTA (red pill) ---------- */

.process-v2__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm); /* 10px */
  box-sizing: border-box;
  padding: 1.25rem 2.5rem; /* 20px 40px — Figma Btn-get-started */
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: var(--fs-cta); /* 18px */
  line-height: var(--lh-nav); /* 23px */
  letter-spacing: var(--ls-cta);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-base);
}

.process-v2__cta:hover {
  background-color: var(--color-primary-hover);
}

.process-v2__cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Mobile shows short label; desktop shows full guarantee CTA */
.process-v2__cta-label-desktop {
  display: none;
}

.process-v2__cta-label-mobile {
  display: inline;
}

.process-v2__cta-icon {
  flex-shrink: 0;
  display: block;
  inline-size: 14px;
  block-size: 14px;
}

/* ---------- Desktop / large screens ---------- */
/* --bp-lg: 1024px */

@media (min-width: 1024px) {
  .process-v2__inner {
    /* 32px between title and content row */
    gap: var(--process-v2-stack-gap);
    max-inline-size: calc(var(--process-v2-content-max) + (var(--header-pad-x) * 2));
    padding-block: var(--process-v2-pad-y); /* 120px */
    /* Align with nav side gutters (220px @ 1920) */
    padding-inline: var(--header-pad-x);
  }

  .process-v2__title {
    font-size: var(--fs-process-v2-title); /* 54px */
    line-height: var(--lh-process-v2-title); /* 54px */
    letter-spacing: 0;
    color: var(--color-text-heading); /* #212529 */
  }

  .process-v2__title-desktop {
    display: inline;
  }

  .process-v2__title-mobile {
    display: none;
  }

  .process-v2__content {
    flex-direction: row;
    align-items: center;
    gap: var(--process-v2-row-gap); /* 60px */
  }

  .process-v2__media {
    display: block;
    flex: 0 0 auto;
    /* Scale down on mid-desktop so the row still fits */
    inline-size: min(var(--process-v2-media-w), 48%);
    max-inline-size: var(--process-v2-media-w); /* 748px */
    aspect-ratio: 748 / 547;
  }

  .process-v2__image {
    position: absolute;
    inset: 0;
  }

  .process-v2__copy {
    flex: 1 1 0;
    min-inline-size: 0;
    /* Desktop: 36px between text-block and CTA */
    gap: var(--process-v2-copy-gap);
    align-items: flex-start;
    text-align: start;
    max-inline-size: var(--process-v2-copy-max); /* 676px */
  }

  .process-v2__text-block {
    align-items: flex-start;
  }

  .process-v2__body {
    font-size: var(--fs-process-v2-body); /* 18px */
  }

  .process-v2__highlight {
    font-size: var(--fs-process-v2-highlight); /* 40px */
    line-height: var(--lh-process-v2-highlight); /* 42px */
  }

  .process-v2__cta-label-desktop {
    display: inline;
  }

  .process-v2__cta-label-mobile {
    display: none;
  }
}

/* Wide frames — lock media to Figma 748px once the content band has room */
@media (min-width: 1536px) {
  .process-v2__media {
    max-inline-size: var(--process-v2-media-w);
  }
}