.services-box {
    min-height: 300px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* The parallax overlay ships with asymmetric side padding (60px right, 0 left),
   which pushed the centered quote off-center horizontally. Make it symmetric. */
#quote .parallax-overlay-dark {
    padding-left: 0;
    padding-right: 0;
}

/* Quote slider — pager below the author */
#quote .bx-wrapper {
    margin: 0 auto;
    box-shadow: none;
    border: none;
    background: transparent;
}
#quote .bx-viewport {
    background: transparent;
}
#quote .bx-pager {
    position: static;
    text-align: center;
    padding-top: 30px;
    font-size: 0;
}
#quote .bx-pager .bx-pager-item {
    display: inline-block;
    margin: 0 6px;
    vertical-align: middle;
}
#quote .bx-pager .bx-pager-item a {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    text-indent: -9999px;
    overflow: hidden;
    transition: background 0.2s ease;
}
#quote .bx-pager .bx-pager-item a:hover,
#quote .bx-pager .bx-pager-item a.active {
    background: #D97955;
}

/* ===== Feature carousel ===== */
#feature-list-carousel {
    position: relative;
}

/* Pagination dots (all screens) */
#feature-list-carousel .owl-controls .owl-pagination {
    margin-top: 18px;
    text-align: center;
}
#feature-list-carousel .owl-controls .owl-page {
    display: inline-block;
}
#feature-list-carousel .owl-controls .owl-page span {
    display: block;
    width: 12px;
    height: 12px;
    margin: 4px;
    border-radius: 50%;
    background: #ccc;
    transition: background 0.2s ease;
}
#feature-list-carousel .owl-controls .owl-page.active span,
#feature-list-carousel .owl-controls.clickable .owl-page:hover span {
    background: #D97955;
}

/* Mobile (default): full/vertical images, NO arrows.
   Navigation via swipe + dots only. */
#feature-list-carousel .owl-controls .owl-buttons {
    display: none;
}

/* ---- Wide screens: fixed height + left/right arrows ---- */
@media (min-width: 768px) {
    /* Every tile keeps the same height, regardless of text length */
    #feature-list-carousel .feature-box {
        height: 360px;
        overflow: hidden;
    }
    /* Image cropped to a constant height */
    #feature-list-carousel .feature-box-image img {
        width: 100%;
        height: 190px;
        object-fit: cover;
    }
    #feature-list-carousel .feature-box-image h4 {
        margin-top: 15px;
    }

    /* Arrows visible only on wide screens */
    #feature-list-carousel .owl-controls .owl-buttons {
        display: block;
    }
    #feature-list-carousel .owl-controls .owl-buttons div {
        position: absolute;
        top: 95px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        width: 44px;
        height: 44px;
        line-height: 44px;
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 22px;
        color: #fff;
        background: #D97955;
        border-radius: 50%;
        opacity: 0.85;
        z-index: 10;
        transition: opacity 0.2s ease, background 0.2s ease;
    }
    #feature-list-carousel .owl-controls .owl-buttons div:hover {
        opacity: 1;
        background: #262626;
        text-decoration: none;
    }
    #feature-list-carousel .owl-controls .owl-buttons .owl-prev {
        left: 0;
    }
    #feature-list-carousel .owl-controls .owl-buttons .owl-next {
        right: 0;
    }
}

/* ===== Mobile dropdown menu ===== */
/* The open menu sat white-on-white over the white page, which was confusing.
   Give it a very light gray background so the panel is clearly separated. */
@media only screen and (max-width: 991px) {
    .white-nav .nav-inner div.nav-menu,
    .white-nav .nav-inner div.nav-menu ul.nav {
        background: #f2f2f2;
    }
    .white-nav .nav-inner div.nav-menu {
        border-bottom: 1px solid #dcdcdc;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.06);
    }
    /* Size the panel to its content instead of a fixed 400px, so it does
       not cover the page below. Cap it on short screens with a scroll. */
    .nav-inner div.nav-menu {
        height: auto;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
}

/* ===== Header slider: mobile background images ===== */
/* On desktop the wide landscape photos are set as the <li> background by JS.
   On phones a centered "cover" crop drops the subject (usually on the right),
   so swap in dedicated square crops composed around each subject.
   !important is required to override the inline background set by script.js. */
@media only screen and (max-width: 767px) {
    #home .fullwidth-slider li.slide-hdr-0 {
        background-image: url(../images/custom/header-0-mobile.jpg) !important;
    }
    #home .fullwidth-slider li.slide-hdr-1 {
        background-image: url(../images/custom/header-1-mobile.jpg) !important;
    }
    #home .fullwidth-slider li.slide-hdr-2 {
        background-image: url(../images/custom/header-2-mobile.jpg) !important;
    }
    #home .fullwidth-slider li.slide-hdr-3 {
        background-image: url(../images/custom/header-3-mobile.jpg) !important;
    }
    #home .fullwidth-slider li.slide-hdr-4 {
        background-image: url(../images/custom/header-4-mobile.jpg) !important;
    }
    #home .fullwidth-slider li.slide-hdr-5 {
        background-image: url(../images/custom/header-5-mobile.jpg) !important;
    }

    /* Raise the hero caption on phones so it sits higher over the image. */
    #home .fullwidth-slider .slide-caption {
        -webkit-transform: translateY(-110px);
        transform: translateY(-110px);
    }
}