/* ============================================================
   TFSSLLP BRAND LAYER  ·  Tarsariya Financial Services LLP
   Loaded AFTER style.css.

   IMPORTANT: This file does NOT change the Consultez template
   colour palette. It keeps every existing template colour
   (lime --theme-color1 #c6d936, dark-green --theme-color2
   #1a4137, etc.). It only adds reusable finance components
   (wordmark, cards, CTA band, avatar, disclaimer), all coloured
   from the template's own CSS variables so they stay in scheme.
   ============================================================ */

/* ============================================================
   BRAND WORDMARK  (replaces the Consultez logo image)
   Use in: main header, sticky header, mobile menu, footer.
   Add the --light modifier on dark backgrounds.
   ============================================================ */
.tfs-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; line-height: 1; }
.tfs-logo-mark {
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; border-radius: 11px;
  background: var(--theme-color1);
  color: var(--theme-color2); font-family: var(--title-font);
  font-weight: 800; font-size: 22px;
  box-shadow: 0 8px 18px rgba(var(--theme-color2-rgb), .20);
}
.tfs-logo-text {
  display: flex; flex-direction: column;
  font-family: var(--title-font); font-weight: 800; font-size: 19px;
  color: var(--headings-color); letter-spacing: -.01em;
}
.tfs-logo-text small {
  font-weight: 600; font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-color); margin-top: 3px;
}
.tfs-logo--light .tfs-logo-text { color: #fff; }
.tfs-logo--light .tfs-logo-text small { color: rgba(255, 255, 255, .70); }

/* ============================================================
   TESTIMONIAL AVATAR  (initials, no fabricated faces)
   ============================================================ */
.tfs-avatar {
  display: inline-grid; place-items: center;
  width: 88px; height: 88px; border-radius: 50%;
  background: linear-gradient(135deg, var(--theme-color2), var(--theme-color4));
  color: #fff; font-family: var(--title-font); font-weight: 700; font-size: 28px;
  letter-spacing: .04em;
}

/* ============================================================
   CALCULATORS / "WHO WE SERVE" CARDS
   (replaces the demo Case-study slider; reused for serve cards)
   ============================================================ */
.tfs-calc-section { padding: 120px 0; background: var(--theme-color-light-green); }
.tfs-calc-card {
  display: flex; flex-direction: column; height: 100%;
  padding: 34px 30px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(var(--theme-color2-rgb), .10);
  box-shadow: 0 10px 30px rgba(var(--theme-color2-rgb), .05);
  transition: transform .3s ease, box-shadow .3s ease;
  text-decoration: none;
}
.tfs-calc-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(var(--theme-color2-rgb), .13); }
.tfs-calc-icon {
  width: 58px; height: 58px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 20px;
  background: rgba(var(--theme-color1-rgb), .22); color: var(--theme-color2);
}
.tfs-calc-card h4 { margin: 0 0 10px; font-size: 21px; color: var(--headings-color); }
.tfs-calc-card p  { margin: 0 0 20px; color: var(--text-color); font-size: 15px; line-height: 1.6; }
.tfs-calc-link {
  margin-top: auto; font-family: var(--title-font); font-weight: 700;
  color: var(--theme-color2); display: inline-flex; align-items: center; gap: 7px;
}

/* ============================================================
   COMPLIANCE DISCLAIMER  (footer)
   ============================================================ */
.tfs-disclaimer {
  font-size: 12.5px; line-height: 1.7;
  color: rgba(255, 255, 255, .60);
  border-top: 1px solid rgba(255, 255, 255, .10);
  padding-top: 22px; margin-top: 26px;
}
.tfs-disclaimer strong { color: rgba(255, 255, 255, .85); }

/* ============================================================
   LOAN PRODUCTS GRID  (replaces the demo service slider)
   ============================================================ */
.tfs-loan-card {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 34px 28px; border-radius: 16px; overflow: hidden;
  background: #fff; border: 1px solid rgba(var(--theme-color2-rgb), .10);
  box-shadow: 0 10px 30px rgba(var(--theme-color2-rgb), .05);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  text-decoration: none;
}
.tfs-loan-card:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(var(--theme-color2-rgb), .13); border-color: rgba(var(--theme-color1-rgb), .55); }
.tfs-loan-num {
  position: absolute; top: 16px; right: 24px;
  font-family: var(--title-font); font-weight: 800; font-size: 46px; line-height: 1;
  color: rgba(var(--theme-color2-rgb), .06);
}
.tfs-loan-icon {
  width: 60px; height: 60px; border-radius: 14px;
  display: grid; place-items: center; font-size: 24px; margin-bottom: 20px;
  background: rgba(var(--theme-color1-rgb), .22); color: var(--theme-color2);
  transition: background .3s ease;
}
.tfs-loan-card:hover .tfs-loan-icon { background: var(--theme-color1); }
.tfs-loan-card h3 { margin: 0 0 10px; font-size: 21px; color: var(--headings-color); }
.tfs-loan-card p  { margin: 0 0 18px; color: var(--text-color); font-size: 14.5px; line-height: 1.6; }
.tfs-loan-link {
  margin-top: auto; font-family: var(--title-font); font-weight: 700; font-size: 14px;
  color: var(--theme-color2); display: inline-flex; align-items: center; gap: 7px;
}
.tfs-loan-link i { transition: transform .3s ease; }
.tfs-loan-card:hover .tfs-loan-link i { transform: translate(3px, -3px); }

/* ============================================================
   FINAL CTA BAND  (replaces the demo News/Blog slider)
   ============================================================ */
.tfs-cta-section { padding: 0 0 120px; }
.tfs-cta-box {
  position: relative; overflow: hidden; border-radius: 20px; padding: 54px 48px;
  background: linear-gradient(120deg, var(--theme-color2), var(--theme-color3));
  box-shadow: 0 24px 60px rgba(var(--theme-color2-rgb), .22);
}
.tfs-cta-box::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 25%, rgba(var(--theme-color1-rgb), .22), transparent 55%);
}
.tfs-cta-box > .row { position: relative; z-index: 1; }
.tfs-cta-eyebrow {
  font-family: var(--title-font); font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; font-size: 13px; color: var(--theme-color1); margin: 0 0 14px;
}
.tfs-cta-title { color: #fff; font-size: 34px; line-height: 1.2; margin: 0 0 14px; }
.tfs-cta-text  { color: rgba(255, 255, 255, .82); font-size: 16px; margin: 0; max-width: 560px; }
/* Stack the two CTA buttons as a matched pair. The template's .btn-one
   (lime, 3px radius, 220px) and .btn-one-light (white, 30px pill, 200px)
   ship with different shapes AND widths, so paired they looked mismatched.
   Scope an equal width + equal radius here only — global buttons untouched. */
.tfs-cta-actions { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.tfs-cta-actions .btn-one,
.tfs-cta-actions .btn-one-light { width: 100%; min-width: 0; border-radius: 10px; }
@media (max-width: 575.98px) { .tfs-cta-box { padding: 40px 26px; } .tfs-cta-title { font-size: 27px; } }

/* ============================================================
   BANNER FIX — equal-height fade slides
   The hero is a Swiper "fade" slider whose height is driven by the
   first (in-flow) slide. The template's demo slides were identical
   length; our finance slides differ, so a shorter active slide let
   the taller first slide bleed through at the bottom. Forcing the
   flex wrapper to stretch makes every slide the height of the
   tallest one, at every breakpoint, so none can show through.
   ============================================================ */
/* Loan-products slider: size & colour the FontAwesome line-icons in the
   restored Consultez service-block cards (template only set a transition). */
.service-block .content-box .icon i { font-size: 62px; line-height: 1; color: var(--theme-color1); }

/* Equal-height loan cards: our loan titles/descriptions differ in length,
   so let the Swiper slides stretch to the tallest one. .service-block,
   .content-box and .image-box are already height:100%, so they fill it. */
.service-slider .swiper-slide { height: auto !important; }
.service-slider .swiper-wrapper { align-items: stretch !important; }

/* Make every card photo fill its (now equal-height) box and crop to cover,
   so all images are the same height regardless of their source dimensions
   (the template only did this at mobile widths). */
.service-block .image-box .image { height: 100%; }
.service-block .image-box .image img { width: 100%; height: 100%; object-fit: cover; }

.banner-section .banner-slider .swiper-wrapper { align-items: stretch !important; }
.banner-section .banner-slider .swiper-slide { height: auto !important; min-height: 700px; }
@media (max-width: 991.98px) { .banner-section .banner-slider .swiper-slide { min-height: 620px; } }
@media (max-width: 575.98px) { .banner-section .banner-slider .swiper-slide { min-height: 560px; } }

/* ============================================================
   "HOW IT WORKS" PROCESSING STEPS — align step descriptions
   The four steps sit side by side, but one step title
   ("Documentation & sanction") wraps to two lines while the
   others fit on one, which pushed its paragraph down and broke
   the row's alignment. Reserve a two-line height for every step
   title (h4 = 24px/36px line-height) so all four paragraphs
   start on the same baseline whenever the steps are side by side.
   ============================================================ */
@media (min-width: 576px) {
  .processing-block .inner-box .title { min-height: 72px; }
}

/* ============================================================
   LEGAL / LONG-FORM PAGES (privacy, terms, disclaimer, faq intro)
   ============================================================ */
.legal-content { max-width: 880px; margin: 0 auto; color: var(--text-color); font-size: 16px; line-height: 1.85; }
.legal-content h2 { color: var(--headings-color); font-size: 26px; margin: 44px 0 16px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { color: var(--headings-color); font-size: 19px; margin: 28px 0 12px; }
.legal-content p { margin: 0 0 16px; }
.legal-content ul, .legal-content ol { margin: 0 0 18px; padding-left: 22px; }
.legal-content li { margin-bottom: 9px; }
.legal-content a { color: var(--theme-color2); text-decoration: underline; }
.legal-content strong { color: var(--headings-color); }
.legal-content .legal-meta {
  font-size: 14px; color: var(--text-color); border-left: 3px solid var(--theme-color1);
  padding: 12px 18px; background: var(--theme-color-light-green); border-radius: 8px; margin-bottom: 36px;
}

/* ============================================================
   REDUCED MOTION — the template is animation-heavy (WOW/GSAP/
   Swiper autoplay/knob/counters/infinite CSS keyframes). Honour
   the user's reduced-motion preference without losing content.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .wow { visibility: visible !important; }
}