/* ==========================================================================
   KOBIL — Industry Financial Services — Section: Hero (Aug 2026 redesign)
   Figma: D-Industries/Financial Services → hero, node 5882:45287 (desktop),
   5882:48817 (mobile, 393x731).
   Full-bleed gradient background, serif headline, and a bespoke "payment"
   card widget (Payment/Balance row + Total row + CONFIRM & PAY button)
   layered over a mirrored photo — same architecture as the shared
   css/industries/_shared/hero.css used by the Aug 2026 net-new industry
   pages (Telecom/Gaming/Logistics/E-commerce), but kept as its own file
   since this page uses register_subpage() (own css_base, no _shared
   include) and the card's internal markup is entirely bespoke.
   ========================================================================== */

.sec-financial-services-hero {
  /* See _shared/hero.css for the full rationale: cancels .page's 40px side
     padding so the background reaches the full 1440 Figma frame width, and
     pulls the section up underneath the floating sticky header so the
     header renders on top of the hero's own background. */
  position: relative;
  width: calc(100% + var(--page-pad) * 2);
  margin-left: calc(-1 * var(--page-pad));
  margin-top: calc(-1 * var(--w100));
  isolation: isolate;
  overflow: hidden;
  min-height: var(--w754);
  background-color: #ffffff;
  background-image: url("/assets/industries/financial-services/hero/hero-bg-new.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sec-financial-services-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  max-width: var(--page-max);
  min-height: var(--w754);
  margin: 0 auto;
  padding: 0 var(--w90);
}

.sec-financial-services-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--w20);
  max-width: var(--w635);
}

.sec-financial-services-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--w12);
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 600;
  line-height: var(--w18);
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--navy);
}

.sec-financial-services-hero__eyebrow-dot {
  display: inline-block;
  width: var(--w3);
  height: var(--w3);
  border-radius: 50%;
  background: var(--navy);
}

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

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

.sec-financial-services-hero__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w64);
  line-height: 1.3;
  color: var(--navy);
}

.sec-financial-services-hero__desc {
  font-family: var(--font-sans);
  font-size: var(--w18);
  font-weight: 400;
  line-height: var(--w26);
  color: var(--navy-80);
}

.sec-financial-services-hero__cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--w8);
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  background: var(--white);
  border-radius: var(--w32);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--navy);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}

.sec-financial-services-hero__cta:hover {
  background: var(--navy-20);
}

.sec-financial-services-hero__cta img {
  width: var(--w18);
  height: var(--w18);
  transition: transform var(--dur) var(--ease);
}

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

/* ---- Photo — Figma 5882:45326: left:calc(50%+385.5px) w/ -translate-x-1/2
   (center-anchored horizontally only), bottom:0, 447x531. In px terms
   against the 1440x754 frame that's left:882px (61.25%), width 447px
   (31.04%), height 531px (70.42%), bottom-anchored. ---- */

.sec-financial-services-hero__media {
  position: absolute;
  z-index: 5;
  left: 61.25%;
  bottom: 0;
  width: var(--w447);
  height: var(--w531);
  overflow: hidden;
}

.sec-financial-services-hero__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  /* Figma wraps the image in scaleY(-1) + rotate(180deg), which nets out
     to a plain horizontal flip. */
  transform: scaleX(-1);
}

/* ---- Bespoke "payment" card — Figma 5882:45302: center-anchored at
   calc(50%+188.69px)/calc(50%+75.83px), 287.37x173.652 -> top-left in px:
   left 765px (53.13%), top 366px (48.54%). ---- */

.sec-financial-services-hero__card {
  position: absolute;
  z-index: 4;
  left: 53.13%;
  top: 48.54%;
  display: flex;
  flex-direction: column;
  gap: var(--w14);
  width: var(--w287);
  height: var(--w174);
  padding: var(--w17) var(--w18);
  background: var(--white);
  border-radius: var(--w12);
  box-shadow: 6.35px 6.35px 5.6px rgba(0, 0, 0, 0.07);
  font-family: "Barlow", var(--font-ui), sans-serif;
}

.sec-financial-services-hero__pay-group {
  display: flex;
  flex-direction: column;
  gap: var(--w15);
}

.sec-financial-services-hero__pay-row {
  display: flex;
  align-items: center;
  gap: var(--w8);
}

.sec-financial-services-hero__pay-card {
  flex: none;
  width: var(--w59);
  height: var(--w36);
}

.sec-financial-services-hero__pay-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sec-financial-services-hero__pay-title {
  font-weight: 500;
  font-size: var(--w12);
  line-height: var(--w18);
  color: #232935;
}

.sec-financial-services-hero__pay-balance {
  font-weight: 400;
  font-size: var(--w11);
  line-height: var(--w15);
  color: #747b86;
}

.sec-financial-services-hero__pay-chevron {
  flex: none;
  color: #b9c1d1;
}

.sec-financial-services-hero__pay-chevron--right {
  margin-left: auto;
}

.sec-financial-services-hero__pay-total {
  display: flex;
  align-items: center;
  gap: var(--w6);
  height: var(--w31);
  padding: 0 var(--w9);
  background: #f2f4f9;
  border-radius: var(--w5);
}

.sec-financial-services-hero__pay-total-label {
  font-weight: 500;
  font-size: var(--w14);
  line-height: var(--w21);
  color: #232935;
}

.sec-financial-services-hero__pay-total-value {
  margin-left: auto;
  font-weight: 500;
  font-size: var(--w14);
  line-height: var(--w21);
  color: #232935;
}

.sec-financial-services-hero__pay-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--w37);
  background: var(--btn-blue);
  border-radius: var(--w5);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--w12);
  line-height: var(--w18);
  color: var(--white);
}

@media (max-width: 768px) {
  .sec-financial-services-hero {
    min-height: var(--m732);
    padding: 0;
    background-image: url("/assets/industries/financial-services/hero/hero-bg-mobile-new.webp");
    --phone-canvas-left: calc((100% - var(--m393)) / 2);
    margin-top: calc(-1 * var(--m68));
  }

  .sec-financial-services-hero__inner {
    min-height: var(--m732);
    padding: 0;
    display: block;
  }

  .sec-financial-services-hero__content {
    position: absolute;
    left: 50%;
    top: var(--m106);
    transform: translateX(-50%);
    width: var(--m329);
    max-width: 84%;
    align-items: center;
    text-align: center;
  }

  .sec-financial-services-hero__eyebrow {
    justify-content: center;
    font-size: var(--m11);
    letter-spacing: 1.5px;
  }

  .sec-financial-services-hero__body {
    align-items: center;
    gap: var(--m32);
  }

  .sec-financial-services-hero__text {
    align-items: center;
    gap: var(--m12);
  }

  .sec-financial-services-hero__title {
    font-size: var(--m34);
    line-height: 1.2;
    text-align: center;
  }

  .sec-financial-services-hero__desc {
    font-size: var(--m16);
    line-height: var(--m23);
    text-align: center;
  }

  .sec-financial-services-hero__cta {
    align-self: center;
    height: var(--m40);
    padding: var(--m4) var(--m12) var(--m4) var(--m16);
    font-size: var(--m14);
  }

  /* Photo on top of the card in z-order (matches Figma's mobile frame
     layer order, opposite of desktop). */
  .sec-financial-services-hero__media {
    z-index: 5;
    left: calc(var(--phone-canvas-left) + var(--m12));
    bottom: 0;
    top: auto;
    width: var(--m248);
    max-width: none;
    height: var(--m295);
    max-height: none;
    border-radius: 0;
  }

  /* Figma's phone frame crops the photo (CROP fill, window 86%x82% at
     7%/1% of the source) — reproduced by drawing the source at 288px wide
     and shifting it -20/-4 inside the clipped 248x295 box. Without this
     the woman's arm sits ~25px further right and buries the card's
     "Total" row. */
  .sec-financial-services-hero__media {
    overflow: hidden;
  }

  .sec-financial-services-hero__media img {
    width: var(--m288);
    height: auto;
    max-width: none;
    margin-left: calc(-1 * var(--m20));
    margin-top: calc(-1 * var(--m4));
  }

  .sec-financial-services-hero__card {
    z-index: 2;
    top: auto;
    bottom: var(--m115);
    left: calc(var(--phone-canvas-left) + var(--m161));
    transform: scale(0.68);
    transform-origin: bottom left;
  }
}