/* ==========================================================================
   Contact CTA ribbon
   ==========================================================================
   The closing ask, shared by the réalisations index and the case detail page.
   Headers state, they do not ask (slop-check, 2026-09-06).

   A full-bleed brand ribbon, not a card. This is the one place the brand blue
   takes the whole width, so it must break out of the page container. Both call
   sites render it outside theirs.

   The buttons are restyled here rather than given new variants: on blue, the
   primary fill would disappear and the blue focus ring with it, so the filled
   action inverts to white and both rings switch to white against a
   brand-coloured offset.
   ========================================================================== */

.contact-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--brand);
}

/* The unicorn mark drawn in line only, off the right end of the ribbon.

   It replaces the glow and angled light streaks that stood here: those were
   blurred fills and the brief is line. Masked so it has dissolved before it
   reaches the copy, and cropped by the section, so what shows is a fragment of
   the mark rather than a logo stamped on the band.

   Desktop only. Below 768px the ribbon is a single column and the lines would
   run straight through the heading, so they sit the layout out entirely. */
.contact-cta__lines {
  pointer-events: none;
  position: absolute;
  inset-block: 0;
  right: 0;
  display: none;
  width: 100%;
  max-width: 48rem;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 55%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 55%);
}

@media (min-width: 768px) { .contact-cta__lines { display: block; } }

.contact-cta__lines .unicorn-outline {
  position: absolute;
  right: -7rem;
  top: 50%;
  height: 258%;
  width: auto;
  transform: translateY(-50%);
  color: color-mix(in oklab, #ffffff 40%, transparent);
}

.contact-cta__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
  padding-block: 4rem;
}

@media (min-width: 768px) { .contact-cta__inner { padding-block: 5rem; } }

.contact-cta__heading {
  max-width: 42rem;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: #ffffff;
  text-wrap: pretty;
}

.contact-cta__body {
  max-width: 36rem;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
  color: var(--brand-subtle);
}

.contact-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Inverted on blue. */
.contact-cta .btn--primary {
  background-color: #ffffff;
  color: var(--brand);
}
.contact-cta .btn--primary:hover { background-color: var(--brand-subtle); }

.contact-cta .btn--outline {
  border-color: color-mix(in oklab, #ffffff 40%, transparent);
  color: #ffffff;
}
.contact-cta .btn--outline:hover { background-color: color-mix(in oklab, #ffffff 10%, transparent); }

.contact-cta .btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}