/* ==========================================================================
   HOME CTA — "Be Breach Ready™" (template-parts/home-cta.php)
   Left-aligned title + red button on the padlock background image.
   Container = shared .container, so the content lines up with header/footer.
   Plain CSS (no build step). Brand: weights 400–700, button text UPPERCASE.
   ========================================================================== */
.cta.home-cta {
  text-align: left;
  display: flex;
  align-items: center;
  min-height: clamp(360px, 29vw, 560px); /* banner ratio of the design (≈ 3.4:1) */
  padding: clamp(4rem, 6vw, 6rem) 0;
  background: #020809 url("../../images/home-cta-bg.webp") right center / cover no-repeat;
}
.cta.home-cta .cta-inner {
  width: 100%;
  align-items: flex-start;
  text-align: left;
}
.cta.home-cta .home-cta__title {
  margin: 0 0 2rem;
  max-width: none;
  text-transform: none;
}
.cta.home-cta .home-cta__title sup.breach-tm {
  font-size: 0.35em;
  top: -1.4em;
  margin-left: 0.08em;
  font-weight: 600;
}
.cta.home-cta .home-cta__actions { justify-content: flex-start; }

/* phones: darken the image behind the text, full-width button */
@media (max-width: 767.98px) {
  .cta.home-cta {
    min-height: 0;
    padding: 4rem 0;
    background:
      linear-gradient(180deg, rgba(2, 8, 9, 0.85) 0%, rgba(2, 8, 9, 0.6) 100%),
      #020809 url("../../images/home-cta-bg.webp") 75% center / cover no-repeat;
  }
}
@media (max-width: 575.98px) {
  .cta.home-cta .home-cta__actions .btn { width: 100%; justify-content: center; text-align: center; white-space: normal; line-height: 1.4; }
}