.menu-item-has-children::after {
    content: "\f078";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    font-size: 11px;
    display: inline-block;
    position: relative;
    top: -1px;
    right: -3px;
    color: #2d2d2d;
    transition: transform 0.1s linear;
}

.menu-item-has-children:hover::after {
    animation: arrowBounce 1s ease-in-out infinite;
}

@keyframes arrowBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(1px);
    }
}


@media (min-width:992px) and (max-width:1200px) {
}

@media (max-width: 1200px) {
}

@media only screen and (min-width: 1201px) {
    .header nav.nav .sub-menu li {
        width: 100%;
        margin-left: 0;
        display: block;
        padding: 8px 20px;
        width: 300px !important;
        white-space: wrap;
    }
    nav.nav .menu-item-has-children.sub-menu-active>.sub-menu-inner {
        display:block;
    }
    nav.nav .sub-menu li {
        width: 100%;
        margin-left: 0;
        display: inline-block;
        white-space: unset;
        line-height: 1.2;
    }
}

@media (min-width: 992px) {

}

@media (min-width:1201px) {
    .header-nav ul {
        list-style: none;
        display: flex;
        margin-bottom: 0;
        padding-left:0;
        flex-direction: row;
        justify-content: center;
    }
}


@media only screen and (max-width: 1200px) {
    .mobile-header-cta {
        display: block !important;
        margin: 0 40px;
    }
    .fix .innerBurger span {
        background-color: #262b5b !important;
    }
    #home-hero:before {
        content: '';
        height: 30%;
        width: 100%;
        background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
        position: absolute;
        top: 0;
        z-index: 4;
        opacity: 0.5;
    }
    /**********
    HEADER NAV (mobile)
    **********/
    body.fix { overflow: hidden; }

    #home-hero { padding: 150px 0 300px; }

    /* Constrain the logo on mobile (no grid column to size it) */
    /* Bootstrap's `.row > *` forces width:100% — override so the logo
       shrinks to its content and the burger sits on the same row. */
    .header .logo { flex: 0 0 auto; width: auto; }
    .header .row { flex-wrap: nowrap; }
    .header .logo-img {
        max-width: 150px;
        height: auto;
    }

    /* The header row keeps logo + burger; the desktop menu column
       collapses out of flow (its <nav> becomes the fixed slide-in panel). */
    .header-right {
        display: block;
        width: auto;
        flex: 0 0 auto;
        padding: 0;
    }

    /* Burger button */
    .burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        width: 44px;
        height: 44px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
        z-index: 30;
    }
    .burger .innerBurger {
        position: relative;
        width: 26px;
        height: 18px;
    }
    .burger .innerBurger span {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 2.5px;
        border-radius: 4px;
        background-color: var(--nuvo-main, #1d1c23);
        transition: transform .3s ease, opacity .2s ease, top .3s ease;
    }
    .burger .innerBurger span:nth-child(1) { top: 0; }
    .burger .innerBurger span:nth-child(2) { top: 50%; transform: translateY(-50%); }
    .burger .innerBurger span:nth-child(3) { top: 100%; transform: translateY(-100%); }
    .burger.navActive .innerBurger span:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); }
    .burger.navActive .innerBurger span:nth-child(2) { opacity: 0; }
    .burger.navActive .innerBurger span:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); }

    /* Dim backdrop */
    .nav-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 20;
        background: rgba(10, 10, 10, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility .3s ease;
    }
    .nav-overlay.is-open { opacity: 1; visibility: visible; }

    /* Slide-in panel — .header .nav (2 classes) to beat the desktop
       ".header .nav { justify-content: flex-end }" rule in main.css */
    .header .nav {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 21;
        height: 100dvh;
        width: min(360px, 86vw);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start !important;
        background-color: #fff;
        box-shadow: 24px 0 60px rgba(0, 0, 0, 0.18);
        transform: translateX(-105%);
        transition: transform .32s cubic-bezier(.4, 0, .2, 1);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .header .nav.navActive { transform: translateX(0); }

    /* Panel header (logo-height bar with Menu label + close) */
    .nav-panel-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 22px;
        border-bottom: 1px solid #ececec;
    }
    .nav-panel-title {
        font-family: var(--font-heading, serif);
        font-size: 20px;
        font-weight: 500;
        color: var(--nuvo-main, #1d1c23);
    }
    .nav-panel-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin: -8px -8px -8px 0;
        font-size: 30px;
        line-height: 1;
        color: var(--nuvo-main, #1d1c23);
        background: none;
        border: 0;
        cursor: pointer;
        transition: color .2s ease, transform .2s ease;
    }
    .nav-panel-close:hover { color: var(--nuvo-accent, #829a89); transform: rotate(90deg); }

    /* Menu list */
    header .nav .header-menu-list {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        margin: 8px 0 0;
        padding: 0;
        width: 100%;
    }
    header .nav .header-menu-list > li {
        position: relative;
        border-bottom: 1px solid #f0f0f0;
    }
    header .nav .header-menu-list > li > a {
        display: block;
        width: 100%;
        padding: 12px 11px;
        font-family: var(--font-body);
        font-size: 14px;
        font-weight: 500;
        color: var(--nuvo-main, #1d1c23);
        white-space: normal;
    }
    header .nav .header-menu-list > li > a:hover,
    header .nav .header-menu-list > li > a:focus { color: var(--nuvo-accent, #829a89); }

    /* Active item — full-width tint instead of the desktop pill */
    header .nav .header-menu-list .current-menu-item > a,
    header .nav .header-menu-list .current-menu-ancestor > a {
        background-color: var(--nuvo-accent, #829a89);
        color: #fff;
        padding: 12px 11px;
        border-radius: 0;
        box-shadow: inset 4px 0 0 var(--nuvo-main, #1d1c23);
    }
    header .nav .header-menu-list .current-menu-item > a:hover { color: #fff !important; }

    /* Parent caret — suppress the global li::after, use an anchor caret instead */
    header .nav .menu-item-has-children::after { display: none; }
    header .nav .menu-item-has-children > a { position: relative; padding-right: 52px; }
    header .nav .menu-item-has-children > a::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 24px;
        width: 9px;
        height: 9px;
        margin-top: -6px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform .25s ease;
        opacity: .6;
    }
    header .nav .menu-item-has-children.sub-menu-active > a::after {
        transform: rotate(-135deg);
        margin-top: -2px;
    }

    /* Accordion sub-menu */
    header .nav .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        width: 100% !important;
        min-width: 0 !important;
        max-height: 0;
        overflow: hidden;
        padding: 0;
        background: #f7f8f7;
        box-shadow: none;
        transition: max-height .3s ease;
    }
    header .nav .menu-item-has-children.sub-menu-active > .sub-menu { max-height: 600px; }
    header .nav .sub-menu li { border-top: 1px solid #ececec; }
    header .nav .sub-menu a {
        display: block;
        padding: 13px 22px 13px 38px;
        font-size: 15px;
        color: #333;
        white-space: normal;
    }
    header .nav .sub-menu a:hover { color: var(--nuvo-accent, #829a89); }

    /* Hide the desktop search toggle inside the drawer */
    header .nav .header-search { display: none; }

    /* Inline search field inside the drawer (neukitchens-style) */
    header .nav .nav-search-form {
        display: flex;
        align-items: center;
        margin: 18px 22px 28px;
        border: 1px solid #d4d4d4;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
    }
    header .nav .nav-search-form input[type="text"] {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        padding: 8px 12px;
        font-family: var(--font-body);
        font-size: 14px;
        color: var(--nuvo-main, #1d1c23);
        outline: none;
    }
    header .nav .nav-search-form input[type="text"]::placeholder { color: #9a9a9a; }
    header .nav .nav-search-form button {
        flex: 0 0 auto;
        border: none;
        background: var(--nuvo-main, #1d1c23);
        color: #fff;
        padding: 8px 14px;
        font-size: 14px;
        cursor: pointer;
        transition: background .2s ease;
    }
    header .nav .nav-search-form button:hover { background: var(--nuvo-accent, #829a89); }
}

@media (max-width: 991px) {
    .pit-blog-grid { grid-template-columns: repeat(3, 1fr); }
    /* Text + video: stack on tablet so the video isn't cramped */
    .pit-page-content .pit-textandimage:has(.pit-insetvideo) { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }
    .pit-page-content .pit-textandimage:has(.pit-insetvideo) .pit-insetvideo { order: 0; margin-top: 1rem; }
    /* Inner hero */
    .pit-inner-hero { min-height: 360px; padding: 6rem 1.5rem 3rem; }
    .pit-inner-hero h1 { font-size: 34px; }
    .pit-inner-hero-sub { font-size: 16px; }
}

@media (max-width: 767px) {
    .pit-blog-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    /* Inner hero */
    .pit-inner-hero { min-height: 300px; padding: 5rem 1.25rem 2.5rem; }
    .pit-inner-hero h1 { font-size: 28px; }
    .pit-inner-hero-sub { font-size: 15px; line-height: 1.5; }
    /* Stack: text first, image below, with a clear gap between them */
    .pit-page-content .pit-textandimage { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }
    .pit-page-content .pit-textandimage.left .pit-insetimage,
    .pit-page-content .pit-textandimage.right .pit-insetimage,
    .pit-page-content .pit-textandimage.left .pit-insetvideo,
    .pit-page-content .pit-textandimage.right .pit-insetvideo { order: 0; }
    /* Reset the desktop overflow so the image doesn't eat into the gap on mobile */
    .pit-page-content .pit-textandimage .pit-insetimage { height: auto; min-height: 240px; margin-top: 1rem; }
    .pit-page-content .pit-textandimage .pit-insetvideo { margin-top: 1rem; }
    .pit-featured-inner { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 575px) {
    .pit-blog-grid { grid-template-columns: 1fr; }
    .pit-inner-hero { min-height: 240px; padding: 4rem 1.25rem 2rem; }
    .pit-inner-hero h1 { font-size: 24px; }
}