/* Inner-page hero banner (About, Services, POS, Pricing, Hardware, Portfolio, Contact).
   Same layout and type as the /blog hero (see fd-blog.css .fd-blog-banner): dark overlay, amber kicker,
   uppercase Oswald title with an amber accent word, breadcrumb, intro line and one button.
   Each page keeps its own background image; only the overlay and text styling live here. */
.fd-inner .fd-page-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 550px;
    padding: 120px 0 30px;
    isolation: isolate;
    background-color: #043d37;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fd-page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(3, 43, 39, .55), rgba(3, 43, 39, .15) 55%, rgba(3, 43, 39, .35));
}

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

.fd-page-banner__kicker {
    display: block;
    margin-bottom: 14px;
    color: #f59e0b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
}

.fd-inner .fd-page-banner .vl-breadcrumb h1 {
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 600 !important;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: uppercase !important;
}

.fd-inner .fd-page-banner .vl-breadcrumb h1 span {
    color: #f59e0b;
    font-family: 'Oswald', sans-serif !important;
}

.fd-page-banner .vl-breadcrumb-list { margin: 0 0 20px; }

.fd-page-banner__intro {
    max-width: 700px;
    margin: 0 0 24px;
    color: #e2eee9;
    font-size: 17px;
    line-height: 1.7;
}

.fd-page-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 8px 8px 8px 26px;
    border-radius: 50px;
    background: #f59e0b;
    color: #043d37;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.fd-page-banner__btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #065a51;
    color: #fff;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.fd-page-banner__btn:hover { background: #065a51; color: #fff; }
.fd-page-banner__btn:hover span { background: #f59e0b; color: #043d37; }

.fd-page-banner a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 5px; }

@media (max-width: 991px) {
    .fd-inner .fd-page-banner { padding-top: 136px; min-height: 0; }
}

@media (max-width: 575px) {
    .fd-inner .fd-page-banner { padding: 124px 0 52px; }
}

@media (prefers-reduced-motion: reduce) {
    .fd-page-banner__btn,
    .fd-page-banner__btn span { transition: none; }
}

/* Blog article hero: photo backgrounds can be bright, so the overlay is darker than on the other pages to keep the white title readable. */
.fd-page-banner--article::before {
    background: linear-gradient(90deg, rgba(3, 43, 39, .84), rgba(3, 43, 39, .6) 60%, rgba(3, 43, 39, .42));
}