/* ==========================================================================
   KOBIL — Industry Financial Services — Section: Overview (Aug 2026
   redesign). Figma: D-Industries/Financial Services → overview,
   node 5882:45334 (desktop), 5882:48858 (mobile).
   Eyebrow tag + a 2-column row: serif H2 (566px, gradient accent on the
   last line) and a 2-paragraph body (604px), gap 100px. Same pattern as
   css/industries/_shared/overview.css (used by the Aug 2026 net-new
   industry pages), just with this page's own column widths/gap — this
   page keeps its own file since it uses register_subpage() (own
   css_base), not the "_shared" mechanism.
   ========================================================================== */

/* Per-page themed background wash accent, consumed by
   .page-surface--seamless::before in css/base.css — blue  (Primary cyan — Figma blob #3EBFFC) */
.page-surface--seamless {
  --surface-accent: #3ebffc;
}

.sec-financial-services-overview {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  width: 100%;
  padding: var(--w80) var(--w80) 0;
}

.sec-financial-services-overview__tag {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 500;
  line-height: var(--w18);
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--navy-70);
}

.sec-financial-services-overview__row {
  display: flex;
  gap: var(--w100);
  align-items: center;
}

.sec-financial-services-overview__title {
  flex: 1 1 var(--w566);
  min-width: 0;
  max-width: var(--w566);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w56);
  line-height: 1.3;
  color: var(--navy);
}

.sec-financial-services-overview__title-accent {
  background-image: linear-gradient(
    90deg,
    #1046cf 11.229%,
    #696ef5 16.038%,
    #ca80f4 41.701%,
    #ffc4a0 67.364%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sec-financial-services-overview__desc {
  display: flex;
  flex-direction: column;
  gap: var(--w23);
  flex: 1 1 var(--w604);
  min-width: 0;
  max-width: var(--w604);
  font-family: var(--font-sans);
  font-size: var(--w16);
  font-weight: 400;
  line-height: var(--w23);
  color: var(--navy-80);
}

@media (max-width: 768px) {
  .sec-financial-services-overview {
    padding: var(--w64) var(--w40) 0;
  }

  .sec-financial-services-overview__row {
    flex-direction: column;
    gap: var(--w24);
  }

  .sec-financial-services-overview__title,
  .sec-financial-services-overview__desc {
    width: 100%;
    /* lift the desktop column caps — stacked, both run the full width */
    max-width: none;
    flex: 0 0 auto;
  }

  .sec-financial-services-overview__title {
    font-size: var(--w44);
  }
}

@media (max-width: 768px) {
  .sec-financial-services-overview {
    padding: var(--m48) var(--m24) 0;
  }

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

  .sec-financial-services-overview__desc {
    font-size: var(--m14);
    line-height: var(--m20);
  }
}