/* ==========================================================================
   CTA — port of .section_cta on dsgnmate.webflow.io
   --------------------------------------------------------------------------
   Two rows of oversized wordmark drift past each other as you scroll, with a
   navy card floating centred on top.

   Scroll behaviour (IX3 timeline t-e7fa5a39, scrub 0.8, linear) —
   see js/cta-scroll.js:
     [data-scroll-text="top"]     x  0% -> -12%
     [data-scroll-text="bottom"]  x  0% -> +12%

   One deliberate departure from the reference: the heading colour — see the
   note at .cta-heading. Buttons use the shared component in css/buttons.css
   so the CTA matches the hero.
   ========================================================================== */

.section-cta {
  position: relative;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: auto;
  padding: 0;
}

.section-cta .padding-section-medium {
  padding-top: 6rem;
}

.section-cta .padding-global {
  padding-left: 1rem;
  padding-right: 1rem;
}

.section-cta .container-large {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0;
}

/* --------------------------------------------------------------------------
   Drifting wordmark rows
   The reference uses a flat SVG of its wordmark at 24% opacity. Live text is
   used here instead so the copy stays editable — same colour and opacity.
   -------------------------------------------------------------------------- */
.cta-loop {
  position: relative;
  inset: 0 0 auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 50%;
  overflow: clip;
}

.cta-loop.is-bottom {
  inset: auto 0 0;
  justify-content: flex-end;
}

/* Font size lives on the row so the gap between wordmarks can be expressed in
   em and scale with the type. */
.cta-loop-row {
  display: flex;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  gap: .28em;
  /* Fixed across breakpoints, as on the reference: the wordmark is a texture,
     cropped by the viewport rather than scaled down. Add a font-size step in
     the media queries below if you would rather it shrink on small screens. */
  font-size: 16.25rem;
  will-change: transform;
}

/* Same display face as the hero headline */
.cta-loop-text {
  display: block;
  flex: none;
  color: var(--color-cta-wordmark);
  opacity: .24;
  font-family: var(--font-family-display);
  font-size: 1em;
  font-weight: 400;
  /* 260px type in a 308px row on the reference */
  line-height: 1.185;
  letter-spacing: -.03em;
  white-space: nowrap;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Floating card
   -------------------------------------------------------------------------- */
.cta-layout {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cta-card {
  display: flex;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  /* Space between the heading and the buttons */
  gap: 1.5rem;
  width: 100%;
  max-width: 30rem;
  /* Extra room below the buttons so the card reads as a solid block rather
     than a tight box around its contents. */
  padding: 8px 8px 32px 12px;
  border-radius: 1.25rem;
  background-color: var(--color-navy-deep);
  color: var(--color-white);
}

/* FIX: the reference's global `h3 { color: var(--soft-black) }` beats the
   card's white, leaving near-black text on the navy card — see the live site.
   Inheriting the card colour is clearly the intent. */
.cta-heading {
  width: 100%;
  margin: 0;
  color: inherit;
  font-family: var(--font-family-display);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.03em;
}

.cta-heading .highlight {
  background: none;
  padding: 0;
  color: var(--color-orange-accent);
}

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
/* Buttons come from the shared component in css/buttons.css — the CTA uses
   the same .button-group / .button-2 / .button-secondary as the hero. */

/* --------------------------------------------------------------------------
   768px and up  (Webflow "medium")
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .section-cta .padding-global {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Wide enough to keep the heading on a single line — it measures ~550px at
     48px Playfair, plus 2rem padding either side. The reference card is 30rem,
     but its heading was allowed to wrap. */
  .cta-card {
    gap: 2rem;
    max-width: 40rem;
    padding: 2rem 2rem 2rem;
    border-radius: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   992px and up  (Webflow "main")
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .section-cta .padding-global {
    padding-left: 3.25rem;
    padding-right: 3.25rem;
  }

  .cta-heading { font-size: 64px; }
}

/* --------------------------------------------------------------------------
   Below 480px — a direct user request
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
  .cta-heading { font-size: 43px; }
}

/* --------------------------------------------------------------------------
   Reduced motion — the rows sit still
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cta-loop-row { transform: none !important; }
}