/* ==========================================================================
   KOBIL — Industries / Financial Services: Pre-Footer CTA
   Photo card (572px, 12px radius) with corporate photo (exact Figma crop as
   a pre-cropped JPG 1360x572; the progressive background blur of the Figma
   scrim is baked into the JPG: Gaussian sigma ~7px at the left edge, linearly
   fading to 0 at x=617px), white gradient scrim on the left (617px, in
   Figma a gradient rect rotated -90°: white 0.9 → transparent) and a
   left-aligned copy column (539px, gap 48px): H5 eyebrow (24/32 blue),
   H2 (40/50 navy) + notched button ("Case studies").
   ========================================================================== */

.sec-financial-services-cta {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  align-items: center;
  min-height: var(--w572);
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  padding: var(--w48) var(--w80);
  border-radius: 0;
  margin-top: calc(-1 * var(--section-gap));
}

.sec-financial-services-cta__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* White scrim: left → right, 0.9 → 0 over 617px */
.sec-financial-services-cta__scrim {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: var(--w617);
  max-width: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 100%);
}

/* ---- Copy column: left, vertically centered ---- */

.sec-financial-services-cta__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--w48);
  width: 100%;
  max-width: var(--w539);
}

.sec-financial-services-cta__copy {
  display: flex;
  flex-direction: column;
  gap: var(--w12);
}

.sec-financial-services-cta__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w14);
  line-height: var(--w32);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
}

.sec-financial-services-cta__title {
  font-family: var(--font-serif);
  font-size: var(--w56);
  line-height: 1.2;
  font-weight: 400;
  color: var(--navy);
}

/* ---- Button: simple outline pill (Figma no longer uses a notched mask) ---- */

.sec-financial-services-cta__btn {
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  border: 1px solid var(--navy);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--navy);
}

.sec-financial-services-cta__btn:hover {
  background: var(--navy);
  color: var(--white);
}

.sec-financial-services-cta__btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.sec-financial-services-cta__btn-icon {
  transition: transform var(--dur) var(--ease);
}

.sec-financial-services-cta__btn:hover .sec-financial-services-cta__btn-icon {
  transform: translateX(3px);
}

/* ---- Responsive ---- */

@media (max-width: 768px) {
  .sec-financial-services-cta {
    min-height: var(--w520);
  }

  .sec-financial-services-cta__title {
    font-size: var(--w44);
    line-height: 1.25;
  }
}

/* Mobile — Figma 5997:99796 (393x572): no white scrim, copy sits directly on
   the photo in WHITE at 24/79, 321px wide, gap 32. Serif title 28/36,
   small 40px-tall white outline button. The photo is offset so the woman
   stays in frame (Figma: w 308.15%, left -179.8% => window at ~58-91% of
   the image width, i.e. object-position ~82%). */
@media (max-width: 768px) {
  .sec-financial-services-cta {
    min-height: var(--m572);
    align-items: flex-start;
    padding: var(--m79) var(--m24) 0;
  }

  .sec-financial-services-cta__scrim {
    display: none;
  }

  .sec-financial-services-cta__photo {
    object-position: 82% 50%;
  }

  .sec-financial-services-cta__content {
    gap: var(--m32);
    width: var(--m321);
    max-width: 100%;
  }

  .sec-financial-services-cta__copy {
    gap: var(--m8);
  }

  .sec-financial-services-cta__eyebrow {
    font-size: var(--m12);
    line-height: var(--m32);
    color: var(--white);
  }

  .sec-financial-services-cta__title {
    font-size: var(--m28);
    line-height: var(--m36);
    color: var(--white);
  }

  .sec-financial-services-cta__btn {
    height: var(--m40);
    padding: var(--m4) var(--m12) var(--m4) var(--m16);
    font-size: var(--m14);
    line-height: var(--m18);
    border-color: var(--white);
    color: var(--white);
  }

  .sec-financial-services-cta__btn:hover {
    background: var(--white-20);
    color: var(--white);
  }

  /* Shared arrow asset is navy for the desktop button — invert for the photo. */
  .sec-financial-services-cta__btn-icon {
    filter: brightness(0) invert(1);
  }
}

@media (max-width: 480px) {
  .sec-financial-services-cta {
    min-height: var(--m572);
    padding: var(--m79) var(--m20) 0;
  }

  .sec-financial-services-cta__title {
    font-size: var(--m30);
    line-height: 1.2;
  }
}