/* =========================================================
   INNER PAGE BANNER — shared across About, What We Do,
   Services, Gallery, Suggestions, Members, Contact
   ========================================================= */

.page-banner {
    position: relative;
    width: 100%;
    height: 340px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.page-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        100deg,
        rgba(16, 32, 62, 0.86) 0%,
        rgba(16, 32, 62, 0.72) 45%,
        rgba(16, 32, 62, 0.4) 100%
    );
}

.page-banner .container {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.page-banner-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 4px 16px;
    margin-bottom: 18px;

    border: 1px solid rgba(201, 138, 46, 0.7);
    border-radius: 50px;

    color: #f1c77a;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.page-banner h1 {
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-size: clamp(32px, 4vw, 54px);
    line-height: 1.1;
    color: #fff;
    font-weight: 700;
}

.page-banner-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
}

.page-banner-crumb a {
    color: #fff;
}

.page-banner-crumb a:hover {
    color: var(--gold-light);
}

.page-banner-crumb span {
    color: rgba(255, 255, 255, 0.5);
}

/* colour accent variants — pull from the pillar palette so each
   page can carry a subtle identity while sharing one layout */
.banner-about .page-banner-eyebrow      { border-color: rgba(201, 138, 46, 0.7); color: #f1c77a; }
.banner-whatwedo .page-banner-eyebrow   { border-color: rgba(224, 122, 63, 0.7); color: #f4a878; }
.banner-services .page-banner-eyebrow   { border-color: rgba(76, 122, 61, 0.7);  color: #a9d19a; }
.banner-gallery .page-banner-eyebrow    { border-color: rgba(217, 98, 43, 0.7);  color: #f2a582; }
.banner-suggestions .page-banner-eyebrow{ border-color: rgba(36, 89, 74, 0.7);   color: #8fd0bd; }
.banner-members .page-banner-eyebrow    { border-color: rgba(201, 138, 46, 0.7); color: #f1c77a; }
.banner-contact .page-banner-eyebrow    { border-color: rgba(224, 122, 63, 0.7); color: #f4a878; }

@media (max-width: 767px) {
    .page-banner {
        height: 230px;
        /* fixed backgrounds are unreliable/janky on mobile browsers
           (especially iOS Safari) — fall back to normal scroll */
        background-attachment: scroll;
    }

    .page-banner h1 {
        font-size: 28px;
    }

    .page-banner-crumb {
        font-size: 12px;
    }
}