/* Bootstrap 5.3 layout with Hickies brand overrides */
:root {
    --orange: #ff9d00;
    --dark: #171719
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--dark);
    color: white;
    font-family: Arial, Helvetica, sans-serif
}

.showcase {
    position: relative;
    isolation: isolate;
    padding: 58px 0 26px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .13) 0%, rgba(15, 15, 17, .42) 10%, rgba(23, 23, 25, .88) 70%, #242426 100%), url('assets/hickies-store.png') center top/cover no-repeat
}

.hero {
    position: relative;
    z-index: 1
}

.brand-logo {
    width: min(250px, 75vw);
    height: auto;
    image-rendering: auto
}

.hero h1 {
    font-size: clamp(2rem, 5.6vw, 4rem);
    line-height: 1.05;
    letter-spacing: -.04em;
    text-shadow: 0 2px 14px #0008
}

.hero .lead {
    font-size: clamp(1.07rem, 2.1vw, 1.6rem);
    line-height: 1.5;
    text-shadow: 0 1px 10px #000
}

.services-wrap {
    padding-top: clamp(55px, 7vw, 105px)
}

.service {
    padding: 12px 6px 0
}

.service-icon {
    width: 66px;
    height: 66px;
    object-fit: contain;
    margin-bottom: 17px
}

.service h2 {
    font-size: clamp(1.4rem, 2vw, 1.85rem);
    font-weight: 750;
    letter-spacing: -.035em
}

.service p {
    font-size: 1.05rem;
    line-height: 1.45;
    min-height: 60px;
    margin: 7px 0 24px
}

.btn-hickies {
    background: var(--orange);
    border: 2px solid var(--orange);
    color: #090909;
    border-radius: 0px;
    padding: 12px 9px;
    font-size: clamp(.78rem, 1vw, .96rem);
    font-weight: 700;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: .2s
}

.btn-hickies:hover,
.btn-hickies:focus {
    background: #ffb43e;
    border-color: #ffb43e;
    color: #000;
    transform: translateY(-2px)
}

.instrument-callout {
    margin-top: 65px;
    padding: 29px 20px;
    border-top: 1px solid #ffffff8c;
    border-bottom: 1px solid #ffffff8c
}

.instrument-icon {
    width: 82px;
    height: 82px;
    object-fit: contain;
    flex-shrink: 0
}

.instrument-callout h2 {
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 700;
    margin-bottom: 8px
}

.instrument-callout p {
    font-size: 1.05rem
}

.contact-footer {
    background: var(--orange);
    color: #080808;
    padding: 42px 0 50px;
    overflow: hidden
}

.branch h2 {
    font-size: 2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 13px
}

.branch h2 img {
    width: 29px;
    height: 35px;
    object-fit: contain
}

.branch address {
    font-style: normal;
    font-size: 1.07rem;
    line-height: 1.45;
    margin: 0 0 16px 41px
}

.branch a {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 11px 0;
    color: inherit;
    text-decoration: none;
    font-size: 1.03rem;
    overflow-wrap: anywhere
}

.branch a:hover {
    text-decoration: underline
}

.branch a img {
    width: 27px;
    height: 27px;
    object-fit: contain
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.social-links img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    transition: transform .2s
}

.social-links a:hover img {
    transform: translateY(-3px)
}

.social p {
    font-size: 1.07rem;
    line-height: 1.45
}

.equalizer {
    height: 62px;
    display: flex;
    align-items: end;
    gap: 8px;
    opacity: .24
}

.equalizer i {
    display: block;
    width: 18px;
    background: repeating-linear-gradient(to top, #fff 0 7px, transparent 7px 13px)
}

.equalizer i:nth-child(1) {
    height: 15px
}

.equalizer i:nth-child(2) {
    height: 34px
}

.equalizer i:nth-child(3) {
    height: 47px
}

.equalizer i:nth-child(4) {
    height: 28px
}

.equalizer i:nth-child(5) {
    height: 55px
}

.equalizer i:nth-child(6) {
    height: 39px
}

.equalizer i:nth-child(7) {
    height: 62px
}

.equalizer i:nth-child(8) {
    height: 45px
}

@media(min-width:992px) {
    .service:not(:first-child) {
        border-left: 1px solid #ffffff70
    }

    .branch:not(:first-child),
    .social {
        border-left: 1px solid #0006;
        padding-left: 34px
    }
}

@media(max-width:991.98px) {
    .showcase {
        background-position: center top
    }

    .service {
        padding: 15px 8px
    }

    .social {
        padding-top: 10px
    }
}

@media(max-width:575.98px) {
    .showcase {
        padding-top: 34px;
        background-position: 45% top
    }

    .hero h1 {
        margin-top: 25px !important
    }

    .services-wrap {
        padding-top: 48px
    }

    .service p {
        min-height: auto;
        margin-bottom: 16px
    }

    .service {
        max-width: 360px;
        margin: auto
    }

    .instrument-callout {
        margin-top: 40px
    }

    .contact-footer {
        padding: 35px 0
    }

    .branch h2 {
        font-size: 1.7rem
    }
}