@media (max-width: 768px) {

    .top-bar-inner {
        padding: 8px 16px;
        text-align: center;
    }

    .top-contact {
        justify-content: center;
        flex-wrap: wrap;
        font-size: 13px;
    }

    .brand-band-inner {
        padding: 28px 18px;
        flex-direction: column;
        text-align: center;
        gap: 22px;
    }

    .brand-name {
        font-size: 36px;
        letter-spacing: 2px;
    }

    .brand-name span {
        font-size: 18px;
        letter-spacing: 6px;
    }

    .brand-subtitle {
        font-size: 12px;
        letter-spacing: 3px;
    }

    .brand-statement {
        border-left: none;
        border-top: 2px solid var(--gold);
        padding-left: 0;
        padding-top: 18px;
        font-size: 22px;
        max-width: 100%;
    }

    .main-nav ul {
        flex-direction: column;
        padding: 0;
    }

    .main-nav a {
        text-align: center;
        padding: 15px 18px;
        font-size: 14px;
        border-top: 1px solid rgba(255,255,255,.12);
    }

    .dropdown {
        position: static;
        display: block !important;
        box-shadow: none;
        min-width: 100%;
        background: var(--primary-dark);
    }

    .dropdown a {
        font-size: 12px;
        padding: 12px;
    }

    .hero,
    .hero-overlay {
        min-height: 70vh;
    }

    .hero-overlay {
        background: rgba(247,245,241,.86);
    }

    .hero-content {
        margin: 0;
        padding: 48px 24px;
        max-width: 100%;
    }

    .hero h1 {
        font-size: 46px;
    }

    .hero p {
        font-size: 18px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 14px;
    }

    .btn {
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }
}