/**
 * Shared inner-page heroes — centered content, large typography
 */

:root {
  /* Photo-safe brand shade — keeps images visible; text uses text-shadow for contrast */
  --hero-photo-tint: linear-gradient(
    165deg,
    rgba(7, 7, 102, 0.36) 0%,
    rgba(11, 10, 136, 0.26) 45%,
    rgba(20, 92, 108, 0.32) 100%
  );
  /* Center-weighted black scrim — photo visible at edges; text stays readable */
  --hero-photo-scrim:
    radial-gradient(
      ellipse 105% 88% at 50% 44%,
      rgba(0, 0, 0, 0.62) 0%,
      rgba(0, 0, 0, 0.44) 36%,
      rgba(0, 0, 0, 0.18) 58%,
      transparent 76%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.12) 0%,
      transparent 30%,
      rgba(0, 0, 0, 0.4) 100%
    );
  --cta-photo-tint: linear-gradient(
    135deg,
    rgba(11, 10, 136, 0.58) 0%,
    rgba(11, 10, 136, 0.48) 50%,
    rgba(26, 107, 102, 0.54) 100%
  );
}

.calc-hero,
.about-hero,
.contact-hero,
.services-hero,
.faq-hero,
.loan-hero,
.cibil-hero,
.career-hero,
.blog-hero {
  position: relative;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: min(48vh, 420px);
}

/* Light brand scrim — avoids heavy black wash that hides photos */
.calc-hero::after,
.about-hero::after,
.contact-hero::after,
.services-hero::after,
.faq-hero::after,
.loan-hero::after,
.cibil-hero::after,
.career-hero::after,
.blog-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--hero-photo-scrim);
}

.calc-hero__inner,
.about-hero__inner,
.contact-hero__inner,
.services-hero__inner,
.faq-hero__inner,
.loan-hero__inner,
.cibil-hero__inner,
.career-hero__inner,
.blog-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 8vw, 4.5rem);
  text-align: center;
  color: #fff;
}

.calc-hero__breadcrumb,
.about-hero__breadcrumb,
.contact-hero__breadcrumb,
.services-hero__breadcrumb,
.faq-hero__breadcrumb,
.loan-hero__breadcrumb,
.cibil-hero__breadcrumb,
.career-hero__breadcrumb,
.blog-hero__breadcrumb {
  justify-content: center;
  margin-bottom: 1rem;
  font-size: clamp(0.8125rem, 1.5vw, 0.9375rem);
}

.calc-hero__breadcrumb a,
.about-hero__breadcrumb a,
.contact-hero__breadcrumb a,
.services-hero__breadcrumb a,
.faq-hero__breadcrumb a,
.loan-hero__breadcrumb a,
.calc-hero__breadcrumb li,
.about-hero__breadcrumb li,
.contact-hero__breadcrumb li,
.services-hero__breadcrumb li,
.faq-hero__breadcrumb li,
.loan-hero__breadcrumb li,
.cibil-hero__breadcrumb a,
.cibil-hero__breadcrumb li,
.career-hero__breadcrumb a,
.career-hero__breadcrumb li,
.blog-hero__breadcrumb a,
.blog-hero__breadcrumb li {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.45);
}

.calc-hero__title,
.about-hero__title,
.contact-hero__title,
.services-hero__title,
.faq-hero__title,
.loan-hero__title,
.cibil-hero__title,
.career-hero__title,
.blog-hero__title {
  margin: 0 0 0.75rem;
  max-width: none;
  width: 100%;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(2.25rem, 6.5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-wrap: balance;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.55),
    0 4px 20px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(0, 0, 0, 0.25);
}

.calc-hero__tagline,
.about-hero__tagline,
.contact-hero__tagline,
.services-hero__tagline,
.faq-hero__tagline,
.loan-hero__tagline,
.cibil-hero__tagline,
.career-hero__tagline,
.blog-hero__tagline {
  margin: 0 auto;
  max-width: 42rem;
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.98);
  text-wrap: balance;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 2px 14px rgba(0, 0, 0, 0.45);
}

.calc-hero__actions,
.about-hero__actions,
.contact-hero__actions,
.services-hero__actions,
.faq-hero__actions,
.loan-hero__actions,
.cibil-hero__actions,
.career-hero__actions,
.blog-hero__actions {
  justify-content: center;
  margin-top: 1.5rem;
}

/* Slightly larger home hero title (already centered) */
.hero--professional {
  min-height: min(58vh, 480px);
}

.hero--professional .hero__title {
  font-size: clamp(2.35rem, 6.5vw, 3.85rem);
}

.hero--professional .hero__text {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  max-width: 44rem;
}

/* Centered section intros on revamped inner pages */
.page-about .about-intro,
.page-services .section__header--services,
.page-loan-calculator .calc-highlights {
  text-align: left;
}

.page-about .about-intro {
  max-width: 42rem;
  margin-inline: auto;
}

/* Legacy inner pages (.page-banner) */
.page-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: min(48vh, 420px) !important;
  height: auto !important;
  text-align: center;
}

.page-banner .d-table,
.page-banner .d-table-cell {
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.page-banner .container {
  width: 100%;
}

.page-banner .page-content {
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  padding-top: 0 !important;
  text-align: center;
}

.page-banner .page-content h2 {
  margin: 0 0 0.75rem;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-size: clamp(2.25rem, 6.5vw, 3.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-transform: none !important;
  color: #ffffff !important;
  text-wrap: balance;
}

.page-banner .page-content ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.75rem;
}

.page-contact .contact-quick__inner,
.page-contact .section__header--contact {
  text-align: center;
}

.page-contact .section__header--contact {
  max-width: 40rem;
  margin-inline: auto;
}

@media (max-width: 767px) {
  .calc-hero,
  .about-hero,
  .contact-hero,
  .services-hero,
  .faq-hero,
  .loan-hero,
  .cibil-hero,
  .career-hero,
  .blog-hero {
    min-height: min(44vh, 380px);
  }

  .calc-hero__inner,
  .about-hero__inner,
  .contact-hero__inner,
  .services-hero__inner,
  .faq-hero__inner,
  .loan-hero__inner,
  .cibil-hero__inner,
  .career-hero__inner,
  .blog-hero__inner {
    padding-block: clamp(2.5rem, 10vw, 3.5rem);
  }
}