/* ==========================================================================
   11 / Final call to action + enquiry form
   White, a brand tricolour rule across the top. Big statement and contact
   details on the left, the enquiry form (shared .form styles) on the right.
   ========================================================================== */

.cta {
  position: relative;
  background: var(--color-white);
}

/* Blue, orange, red: the logo colours as one full width rule, drawn in on reveal */
.cta__rule {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 6px;
}

.cta__rule span {
  transform-origin: left;
  transition: transform 900ms var(--ease-out);
}

.cta__rule span:nth-child(1) { background: var(--color-brand-blue); }
.cta__rule span:nth-child(2) { background: var(--color-brand-orange); transition-delay: 150ms; }
.cta__rule span:nth-child(3) { background: var(--color-brand-red); transition-delay: 300ms; }

.js .cta:not(.is-inview) .cta__rule span {
  transform: scaleX(0);
}

.cta__inner {
  align-items: start;
  row-gap: var(--space-10);
  padding-block: var(--section-major);
}

/* ---- Intro ---- */
.cta__intro {
  grid-column: 1 / span 5;
  position: sticky;
  top: calc(var(--header-height) + var(--space-8));
}

.cta__eyebrow {
  color: var(--color-gray-500);
}

.cta__title {
  max-width: 14ch;
  margin-top: var(--space-5);
}

.cta__title .mark {
  background-image: linear-gradient(var(--color-brand-orange), var(--color-brand-orange));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.2em;
  transition: background-size 1000ms var(--ease-out) 400ms;
}

.js .cta:not(.is-inview) .cta__title .mark {
  background-size: 0% 0.2em;
}

.cta__text {
  max-width: 36ch;
  margin-top: var(--space-6);
  color: var(--color-gray-700);
}

.cta__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.cta__contact {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  border-bottom: 2px solid var(--color-gray-300);
  transition: border-color var(--duration-fast) ease;
}

.cta__contact:hover {
  border-bottom-color: var(--color-brand-blue);
}

/* ---- Form column ---- */
.cta__form {
  grid-column: 7 / span 6;
}

/* Content fades up after the rule */
.js .cta__inner > * {
  transition:
    opacity 700ms var(--ease-out) 300ms,
    transform 700ms var(--ease-out) 300ms;
}

.js .cta__form {
  transition-delay: 450ms;
}

.js .cta:not(.is-inview) .cta__inner > * {
  opacity: 0;
  transform: translateY(16px);
}

@media (max-width: 1024px) {
  .cta__intro,
  .cta__form {
    grid-column: 1 / -1;
  }

  .cta__intro {
    position: static;
  }
}