/* Home hero heading (page-specific, loaded only on the home page) */
.banner .container { text-align: center; }

/* vendor.css caps .banner at max-height:447px (image-only hero). With the H1 +
   subtitle added on top, the image overflowed that cap onto the next section.
   Let the banner grow to fit heading + image so spacing below stays clean. */
.banner { max-height: none; }

.banner-title {
    margin: 0;
    padding-top: 18px;
    text-transform: uppercase;
    font-family: 'Avenir Next Cyr Bold', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.2;
    color: #0f2733;
}

.banner-subtitle {
    margin: 8px auto 0;
    max-width: 720px;
    font-family: 'Avenir Next Cyr Demi', sans-serif;
    font-size: 18px;
    line-height: 1.45;
    color: #5a6b72;
}

/* On mobile the hero image is hidden in vendor.css (.banner{display:none}).
   Keep the heading text visible (mobile-first SEO), hide only the image. */
@media (max-width: 600px) {
    .banner { display: block !important; max-height: none; }
    .banner .banner-img { display: none; }
    .banner-title { font-size: 22px; padding-top: 14px; }
    .banner-subtitle { font-size: 15px; }
}