.hero {
  position: relative;
  isolation: isolate;
  min-height: 620px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #06111f;
}

.financial-hero {
  background-image: url("financial-hero-toronto.webp");
  background-size: cover;
  background-position: center;
}

.financial-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(2, 8, 15, 0.97) 0%,
    rgba(4, 14, 26, 0.88) 42%,
    rgba(4, 13, 24, 0.56) 68%,
    rgba(2, 7, 13, 0.7) 100%
  );
}

.hero h1 {
  font-size: clamp(44px, 5.8vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.052em;
  padding-bottom: 0.08em;
  overflow: visible;
}

.page-hero {
  position: relative;
  isolation: isolate;
  padding: 82px 0;
  overflow: hidden;
}

.loans-hero {
  min-height: 510px;
  display: flex;
  align-items: center;
  background-image: url("financial-hero-toronto.webp");
  background-size: cover;
  background-position: center;
}

.loans-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(2, 8, 15, 0.97) 0%,
    rgba(4, 14, 26, 0.88) 52%,
    rgba(4, 13, 24, 0.68) 100%
  );
}

.page-hero h1 {
  max-width: 1000px;
  line-height: 1.08;
  letter-spacing: -0.045em;
  padding-bottom: 0.08em;
  overflow: visible;
}

@media (max-width: 980px) {
  .hero {
    min-height: auto;
  }

  .financial-hero,
  .loans-hero {
    background-position: 62% center;
  }

  .financial-hero::before,
  .loans-hero::before {
    background: rgba(3, 11, 21, 0.82);
  }
}

@media (max-width: 650px) {
  .hero h1 {
    font-size: clamp(38px, 11.5vw, 48px);
    line-height: 1.08;
  }

  .loans-hero {
    min-height: 560px;
    padding: 64px 0;
  }

  .page-hero h1 {
    font-size: clamp(40px, 12vw, 52px);
    line-height: 1.1;
  }
}