/* =========================================================
   TABLET LAYER
   Loaded after every page stylesheet (before mobile-menu.css).
   Two ranges in between the existing phone + desktop designs:

     PORTRAIT  768px – 991px   (iPad mini / Air / 11" portrait)
     LANDSCAPE 992px – 1199px  (iPad landscape, small laptops)

   Phones (< 768px) and desktop (>= 1200px) are untouched.
========================================================= */


/* ---------------------------------------------------------
   1. HOME — value points bar under the hero (4 items)
   was: 3 + 1 orphan at ~1024px, cramped single column ~768px
--------------------------------------------------------- */
@media (min-width: 744px) and (max-width: 1199px) {
    .trust-bar-section {
        margin-left: 20px;
        margin-right: 20px;
        padding: 30px 32px;
    }
}

@media (min-width: 744px) and (max-width: 991px) {
    .trust-bar-section {
        flex-direction: row;
    }
    .trust-bar-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 36px;
    }
    .trust-bar-feature {
        min-width: 0;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .trust-bar-features {
        flex-wrap: nowrap;
        gap: 22px;
    }
    .trust-bar-feature {
        flex: 1 1 0;
        min-width: 0;
        gap: 12px;
    }
    .trust-bar-feature-title { font-size: 17px; }
    .trust-bar-feature-description { font-size: 14.5px; }
    .trust-bar-feature-icon { width: 44px; height: 44px; }
}


/* ---------------------------------------------------------
   2. BEFORE / AFTER slider — cards were only 200px tall at 768
--------------------------------------------------------- */
@media (min-width: 744px) and (max-width: 1199px) {
    .ba-card img {
        height: 300px;
    }
    .beforeAfterSlider {
        margin-top: 48px;
    }
}


/* ---------------------------------------------------------
   3. STORY section — text + photo side by side (like desktop)
      was: stacked with a giant full-width circle
--------------------------------------------------------- */
@media (min-width: 744px) and (max-width: 991px) {
    .story-container {
        flex-direction: row;
        align-items: center;
        gap: 36px;
    }
    .story-content {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
        margin: 0;
        text-align: left;
    }
    .story-content h2 {
        font-size: 34px;
        line-height: 1.2;
        margin-bottom: 20px;
    }
	.story-text p br{
		display:none;
	}
    .story-image {
        flex: 0 0 42%;
        max-width: 42%;
        margin: 0;
    }
    .signature-wrapper {
        justify-content: flex-start;
        gap: 28px;
        flex-wrap: wrap;
    }
    .signature-box h4 { font-size: 30px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .story-container { gap: 48px; }
    .story-content h2 { font-size: 40px; }
}

.signature img {
    max-width: 100%;
    height: auto;
}


/* ---------------------------------------------------------
   4. FOOTER — CTA card + link columns
--------------------------------------------------------- */

/* CTA ("Trusted by homeowners"): it stacked at <= 1024px, leaving
   a huge pink block with a small photo. Keep it side-by-side. */
@media (min-width: 744px) and (max-width: 1199px) {
    .trusted-homeowners__inner {
        flex-direction: row;
        align-items: flex-end;
    }
    .trusted-homeowners__image {
        flex: 0 0 40%;
        align-self: flex-end;
    }
    .trusted-homeowners__image img {
        width: 100%;
        height: auto;
        max-height: 440px;
        margin-top: -60px;
        object-fit: contain;
        object-position: bottom center;
    }
    .trusted-homeowners__content {
        flex: 1;
        min-width: 0;
        padding: 48px 40px 48px 8px;
    }
    .trusted-homeowners__title {
        font-size: 32px;
        margin-bottom: 20px;
    }
    .trusted-homeowners__description {
        font-size: 16px;
        margin-bottom: 26px;
    }
    .trusted-homeowners__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 18px;
        max-width: none;
        margin-bottom: 30px;
    }
    .trusted-homeowners__item {
        font-size: 15px;
        line-height: 1.3;
    }
    .trusted-homeowners__button {
        width: auto;
        height: 56px;
        padding: 0 36px;
        font-size: 16px;
    }
}

@media (min-width: 744px) and (max-width: 860px) {
    .trusted-homeowners__content { padding: 40px 28px 40px 4px; }
    .trusted-homeowners__title { font-size: 28px; }
    .trusted-homeowners__list { grid-template-columns: 1fr; }
}

/* Link columns: desktop uses fixed 400/200/280/220px columns (1100px),
   which overflowed the screen between 992px and 1199px. */
@media (min-width: 992px) and (max-width: 1279px) {
    .footer-links {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr);
        gap: 36px;
        justify-content: normal;
    }
}

/* portrait: 2 x 2 instead of 3 + 1 */
@media (min-width: 744px) and (max-width: 991px) {
    .footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 48px;
    }
    .footer-col { min-width: 0; }
}


/* ---------------------------------------------------------
   5. SERVICE pages
--------------------------------------------------------- */

/* hero check-list: two even columns that wrap instead of
   two "max-content" columns that ran off the screen */
@media (min-width: 744px) and (max-width: 1199px) {
    .service-hero-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 28px;
        max-width: 640px;
    }
    .service-feature-item {
        align-items: flex-start;
        text-align: left;
        line-height: 1.35;
    }
}

/* "What's included" cards: 4 skinny columns -> 2 x 2 */
@media (min-width: 744px) and (max-width: 1099px) {
    .checklist-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 56px 24px;
    }
    .checklist-card {
        min-height: auto;
    }
}


/* ---------------------------------------------------------
   6. ABOUT — team tabs (3 tabs didn't fit in 439px at 769-1024)
--------------------------------------------------------- */
@media (min-width: 744px) and (max-width: 1024px) {
    .team-tabs {
        max-width: 620px;
    }
    .team-tab {
        font-size: 16px;
        white-space: nowrap;
    }
}


/* ---------------------------------------------------------
   7. FAQ page — 768px got the phone sizes (353px heading,
      450px list); give tablets the room
--------------------------------------------------------- */
@media (min-width: 744px) and (max-width: 992px) {
    .faq-wrap .faq-heading {
        max-width: 640px;
        font-size: 36px;
        margin-left: auto;
        margin-right: auto;
    }
    .faq-grid {
        width: 100%;
        max-width: 700px;
        margin: 50px auto 0;
    }
    .faq-tab-button {
        font-size: 16px;
    }
    .faq-contact-mobile {
        max-width: 700px;
    }
    .business-hours-description {
        max-width: 560px;
    }
}

.faq-category.active {
    width: 100%;
}

/* the question list is a direct flex child of .faq-wrapper: let it take
   the remaining width instead of shrinking to the longest question */
@media (min-width: 993px) {
    .faq-wrapper > .faq-grid {
        flex: 1 1 auto;
        min-width: 0;
    }
}
@media (min-width: 993px) and (max-width: 1199px) {
    .faq-wrapper { gap: 40px; }
    .faq-sidebar { width: 340px; flex-basis: 340px; }
}


/* ---------------------------------------------------------
   8. CANCER page — impact stats: 90px gaps + 30px padding pushed
      the last stat off-screen between 992px and 1199px
--------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {
    .cancer-impact-stats {
        gap: 28px;
    }
    .cancer-impact-item {
        min-width: 0;
        padding: 0 8px;
    }
    .cancer-impact-number {
        font-size: 44px;
    }
}


/* =========================================================================
   TABLET V2 — layout pass for iPads (follows the Figma tablet reference,
   keeps the desktop look: fonts, colours, cards, buttons)

     PORTRAIT   744px – 1023px   iPad mini 744 · iPad Pro 11" 834
     LANDSCAPE 1024px – 1199px   iPad Pro 12.9" 1024 · iPad 1133 / 1194

   Phones (< 744px) and desktop (>= 1200px) are not touched by this block.
========================================================================= */

/* ---------------- HOME · hero: centred text, photo underneath ---------------- */
@media (min-width: 744px) and (max-width: 1023px) {
    .hero-section.hero-section {
        height: auto;
        padding-bottom: 62vw;               /* room for the photo (1440 × 959) */
        background-size: 100% auto;
        background-position: center bottom;
        background-color: #fff;
    }
    .hero-section .hero-content {
        max-width: 680px;
        margin: 0 auto;
        padding-top: 170px;
        text-align: center;
    }
    .hero-section .hero-content h1 {
        font-size: 46px !important;
        line-height: 1.18;
        margin-bottom: 22px;
    }
    .hero-section .hero-content p {
        max-width: 600px !important;
        margin: 0 auto 32px;
        padding-right: 0;
        font-size: 17px;
    }
    .hero-section .hero-bottom {
        justify-content: center;
        flex-wrap: wrap;
        gap: 18px 28px;
    }
    .hero-section .guarantee-badge {
        width: 104px;
        height: 104px;
        right: 36px !important;
        bottom: 10vw !important;
    }
}

/* landscape: shorter hero so the photo scales down and the cleaner sits
   to the right of the text instead of under it */
@media (min-width: 1024px) and (max-width: 1199px) {
    .hero-section.hero-section {
        height: max(720px, 62vw);
        background-position: center bottom;
    }
    .hero-section .hero-content {
        max-width: 500px;
        padding-top: 190px;
    }
    .hero-section .hero-content h1 { font-size: 44px !important; }
    .hero-section .hero-content p {
        max-width: 470px !important;
        font-size: 17px;
        padding-right: 0;
    }
    .hero-section .hero-bottom { gap: 24px; flex-wrap: wrap; }
    .hero-section .hero-container { max-width: calc(100% - 64px); }
}

/* ---------------- SERVICE + SERVICE-LOCATION heroes ----------------
   Same idea as the home hero: on portrait the text is centred on white
   and the photo sits underneath; .hero-overlay (an empty div already in
   the markup) fades the top edge of the photo into the white. */
@media (min-width: 744px) and (max-width: 1023px) {
    .cleaning-hero.cleaning-hero,
    .cleaning-hero-location.cleaning-hero-location {
        display: block;
        height: auto;
        min-height: 0;
        margin-bottom: 0;
        padding: 90px 0 52vw !important;
        background-size: 100% auto;
        background-position: center bottom;
        background-color: #fff;
    }
	.services-section {
    padding: 60px 0;
	}
    .cleaning-hero .hero-overlay,
    .cleaning-hero-location .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to top,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0) calc(52vw - 170px),
            #fff calc(52vw - 20px));
    }
    .cleaning-hero .servicecontainer,
    .cleaning-hero-location .servicecontainer { padding: 0 32px; }
    .cleaning-hero .service-hero-content,
    .cleaning-hero-location .service-hero-content {
        max-width: 680px;
        margin: 0 auto;
        text-align: center;
    }
    .cleaning-hero .service-hero-content h1,
    .cleaning-hero-location .service-hero-content h1 {
        font-size: 44px;
        line-height: 1.18;
        margin-bottom: 22px;
    }
    .cleaning-hero .service-hero-desc,
    .cleaning-hero-location .service-hero-desc {
        max-width: 600px;
        margin: 0 auto 28px;
        font-size: 17px;
    }
    .cleaning-hero .service-hero-features {
        margin: 0 auto 30px;
        text-align: left;
    }
    .cleaning-hero .hero-bottom,
    .cleaning-hero-location .hero-bottom {
        justify-content: center;
        flex-wrap: wrap;
        gap: 18px 28px;
    }
    .cleaning-hero .guarantee-badge,
    .cleaning-hero-location .guarantee-badge {
        width: 96px;
        height: 96px;
        right: 32px;
        bottom: 6vw;
        z-index: 3;
    }
}
/* landscape: keep the desktop layout, just a narrower text column */
@media (min-width: 1024px) and (max-width: 1199px) {
    .cleaning-hero.cleaning-hero,
    .cleaning-hero-location.cleaning-hero-location {
        min-height: 640px;
        padding: 130px 0 80px !important;
        background-position: 62% center;
    }
    .cleaning-hero .service-hero-content,
    .cleaning-hero-location .service-hero-content { max-width: 520px; }
    .cleaning-hero .service-hero-content h1,
    .cleaning-hero-location .service-hero-content h1 { font-size: 46px; }
    .cleaning-hero .service-hero-desc,
    .cleaning-hero-location .service-hero-desc { max-width: 480px; font-size: 17px; }
    .cleaning-hero .hero-bottom,
    .cleaning-hero-location .hero-bottom { flex-wrap: wrap; gap: 18px 24px; }
}

/* ---------------- location: 4 trust cards -> 2 x 2 on portrait ---------------- */
@media (min-width: 744px) and (max-width: 1023px) {
    .alburtis-cleaning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .alburtis-cleaning-card { min-height: 0; padding: 28px 24px !important; gap: 18px; }
    .alburtis-cleaning-card h3 { font-size: 18px; }
    .alburtis-cleaning-container { padding: 0 32px; }
}

/* ---------------- stats: 3 in a row, numbers on one line ---------------- */
@media (min-width: 744px) and (max-width: 1199px) {
    .stats-container {
        gap: 28px;
        padding: 0 32px;
    }
    .stat-number { white-space: nowrap; }
}
@media (min-width: 744px) and (max-width: 1023px) {
    .stat-number { font-size: 38px; margin-bottom: 12px; }
    .stat-text   { font-size: 15px; line-height: 1.45; }
    .stat-divider { height: 110px; }
}

/* ---------------- image + text sections stay side by side ---------------- */
@media (min-width: 744px) and (max-width: 1023px) {
    .trust-section .trust-container {
        flex-direction: row;
        align-items: center;
        gap: 36px;
        padding: 0 32px;
    }
    .trust-section .trust-image-wrap {
        flex: 0 0 42%;
        max-width: 42%;
    }
    .trust-section .trust-image-wrap .main-image,
    .trust-section .trust-image-wrap > img:first-child {
        width: 100%;
        height: auto;
    }
    .trust-section .trust-content {
        flex: 1 1 0;
        min-width: 0;
        text-align: left;
    }
    .trust-section .trust-content h2 {
        font-size: 34px;
        line-height: 1.22;
        margin-bottom: 20px;
    }
    .trust-section .trust-content .intro-text,
    .trust-section .trust-content .body-text {
        font-size: 15px;
        line-height: 1.55;
    }
}

/* ---------------- services grid ---------------- */
/* portrait: 2 columns, the 5th card spans the full row */
@media (min-width: 744px) and (max-width: 991px) {
    .services-grid { gap: 16px; }
    .services-grid .service-card { height: 300px; }
    .services-grid .service-card:nth-child(5) {
        grid-column: 1 / -1 !important;
        height: 300px;
    }
}
/* 992 – 1100: keep the desktop 3 + 2 (centred) pattern instead of two skinny cards */
@media (min-width: 992px) and (max-width: 1199px) {
    .services-grid .service-card:nth-child(4) { grid-column: 2 / 4 !important; }
    .services-grid .service-card:nth-child(5) { grid-column: 4 / 6 !important; }
    .services-grid .service-card { height: 320px; }
}

/* ---------------- why choose us: 2 columns on portrait ---------------- */
@media (min-width: 744px) and (max-width: 1023px) {
    .why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
    .why-card { min-height: 0; text-align: left; }
    .why-card img { height: 200px; }
    .why-card p { max-width: none; margin: 0; font-size: 16px; }
}

/* ---------------- SERVICE pages · reviews + video ----------------
   an older 744–1100 rule cut these paddings to 10–20px (!important),
   so the reviews button ran straight into the video heading */
@media (min-width: 744px) and (max-width: 1199px) {
    .reviews-section-services { padding-bottom: 70px !important; }
    .cleaning-section-video   { padding: 70px 0 !important; }
    .cleaning-section-video .videocontainer { padding: 0 32px; }
    .video-wrapper {
        height: auto;
        aspect-ratio: 16 / 9;
    }
    .video-wrapper .service-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .service-features-video {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 28px;
    }
    .feature-item-video span { line-height: 1.3; }
}
@media (min-width: 744px) and (max-width: 1023px) {
    .video-section-header { margin-bottom: 40px; }
    .video-section-header h2 { font-size: 38px; }
    .video-section-header p { margin-top: 20px; font-size: 17px; }
}

/* ---------------- ABOUT · cancer-support (ribbon photo + text) ---------------- */
/* 1025 – 1199: 113px gap + both columns was wider than the screen */
@media (min-width: 1025px) and (max-width: 1199px) {
    .support-wrapper { gap: 48px; }
    .support-content { flex: 1 1 0; min-width: 0; }
    .support-content h2 { font-size: 42px; }
}
/* stacked range (≤ 1024): text first, photo underneath but not 800px wide */
@media (min-width: 744px) and (max-width: 1024px) {
    .support-wrapper { gap: 32px; }
    .support-content {
        flex: none;
        width: 100%;
        max-width: 680px;
        margin: 0 auto;
        padding: 40px 12px 0;
    }
    .support-content h2 { font-size: 38px; margin-bottom: 22px; }
    .support-image {
        flex: none;
        width: 100%;
        max-width: 560px;
        margin: 0 auto;
    }
    .support-image img { height: auto; }
}

/* ---------------- FAQ page · business hours ----------------
   993 – 1199: two 319px-min cards + the heading didn't fit (overflowed at 1024) */
@media (min-width: 993px) and (max-width: 1199px) {
    .business-hours-container { gap: 28px; padding: 0 32px; }
    .business-hours-content { flex: 0 0 34%; max-width: 34%; }
    .business-hours-title { font-size: 38px; margin-bottom: 24px; }
    .bussiness-cards { flex: 1 1 0; min-width: 0; gap: 20px; }
    .business-hours-card { flex: 1 1 0; min-width: 0; padding-left: 22px; padding-right: 22px; }
    .business-hours-hours span { font-size: 26px; }
}
/* portrait: heading on top, cards side by side, centred */
@media (min-width: 744px) and (max-width: 992px) {
    .business-hours-container { padding: 60px 32px 0; gap: 40px; }
    .business-hours-title { font-size: 40px; }
    .bussiness-cards { width: 100%; justify-content: center; }
    .business-hours-card { flex: 1 1 0; min-width: 0; max-width: 360px; }
}

/* ---------------- CAREERS page ----------------
   desktop sizes (60px heading, 190px icons, 100px gaps) ran until 900px */
@media (min-width: 901px) and (max-width: 1199px) {
    .lme-careers .hero .container { gap: 36px; padding: 0 32px; }
    .lme-careers .hero-text { text-align: left; }
    .lme-careers .hero h1 { font-size: 44px; }
    .lme-careers .hero p { text-align: left; margin: 0 0 32px !important; font-size: 17px; }
    .lme-careers .benefits h2 { font-size: 40px; }
    .lme-careers .benefit-grid { gap: 24px; }
    .lme-careers .benefit-icon img { width: 140px; }
    .lme-careers .benefit-item h3 { font-size: 21px; }
    .lme-careers .looking-for .container { gap: 48px; padding: 0 32px; }
    .lme-careers .looking-for h2 { font-size: 38px; }
    .lme-careers .cta h2 { font-size: 46px; }
}
@media (min-width: 744px) and (max-width: 900px) {
    .lme-careers .container { padding: 0 32px; }
    .lme-careers .hero-text { max-width: 640px; margin: 0 auto; text-align: center; }
    .lme-careers .hero h1 { font-size: 40px; }
    .lme-careers .hero-image-wrap { max-width: 640px; margin: 0 auto; }
    .lme-careers .benefits h2 { font-size: 34px; }
    .lme-careers .looking-for h2 { font-size: 34px; }
    .lme-careers .cta h2 { font-size: 40px; }
}

/* ---------------- CANCER program page ---------------- */
/* hero feature points: 2 x 2 instead of four squeezed columns */
@media (min-width: 744px) and (max-width: 1199px) {
    .cancer-features {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 24px;
        align-items: start;
    }
    .cancer-feature-item {
        align-items: flex-start;
        line-height: 1.35;
        text-align: left;
    }
}
/* portrait hero: text centred on white, photo (1440 × 840) underneath */
@media (min-width: 744px) and (max-width: 1023px) {
    .cancer-hero.cancer-hero {
        display: block;
        min-height: 0;
        padding: 90px 0 54vw;
        background-size: 100% auto;
        background-position: center bottom;
        background-color: #fff;
    }
    .cancer-hero .cancer-hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(to top,
            rgba(255, 255, 255, 0) 0,
            rgba(255, 255, 255, 0) calc(54vw - 170px),
            #fff calc(54vw - 20px));
    }
    .cancer-hero .cancer-container { padding: 0 32px; }
    .cancer-hero .cancer-content {
        max-width: 660px;
        margin: 0 auto;
        text-align: center;
    }
    .cancer-hero .cancer-title { font-size: 42px !important; margin-bottom: 22px; }
    .cancer-hero .cancer-description { max-width: 600px; margin: 0 auto 30px; font-size: 17px; }
    .cancer-hero .cancer-features { max-width: 560px; margin: 26px auto 0; }
}
/* landscape hero: desktop layout, narrower text so the photo stays clear */
@media (min-width: 1024px) and (max-width: 1199px) {
    .cancer-hero.cancer-hero { min-height: 640px; background-position: 70% center; }
    .cancer-hero .cancer-container { padding: 0 32px; }
    .cancer-hero .cancer-content { max-width: 500px; }
    .cancer-hero .cancer-title { font-size: 44px !important; }
}
/* caregiver: photo + text side by side on portrait (was a full-width circle) */
@media (min-width: 744px) and (max-width: 991px) {
    .cancer-caregiver-container {
        flex-direction: row;
        gap: 36px;
    }
    .cancer-caregiver-image-wrapper { flex: 0 0 42%; max-width: 42%; }
    .cancer-caregiver-image { width: 100%; height: auto; }
    .cancer-caregiver-content { flex: 1 1 0; min-width: 0; }
    .cancer-caregiver-title { font-size: 32px; margin-bottom: 20px; }
    .cancer-caregiver-description { font-size: 17px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .cancer-caregiver-container { gap: 48px; }
    .cancer-caregiver-title { font-size: 40px; }
}

/* ---------------- BLOG post (single) ---------------- */
@media (min-width: 744px) and (max-width: 1199px) {
    .blog-detail-content { padding: 0 24px; }
    .blog-featured-image { margin-bottom: 64px; }
}
@media (min-width: 744px) and (max-width: 1023px) {
    .blog-title { font-size: 44px; max-width: 680px; }
    .blog-featured-image img { height: 420px; }
    .blog-detail-content p { font-size: 17px; line-height: 1.55; }
}

/* ---------------- HEADER on portrait tablets ----------------
   like the Figma tablet frame: logo · phone · quote button · menu.
   The menu links stay inside the hamburger menu. */
@media (min-width: 744px) and (max-width: 991px) {
    .site-header .nav-container {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-left: auto;
        margin-right: 14px;
    }
    .site-header .nav-container .main-nav { display: none; }
    .site-header .call-btn { flex-shrink: 0; }
    .site-header .quote-btn {
        min-width: 0;
        height: 44px;
        padding: 10px 16px;
        font-size: 14px;
        flex-shrink: 0;
    }
    .site-header .nav-container {
        transition: opacity .2s ease, visibility .2s ease;
    }
    /* menu open (and while it rolls up): the menu has its own phone +
       quote button, so hide the header ones. They keep their space,
       so the logo and the X don't move. */
    body.lme-nav-open .site-header .nav-container,
    body.lme-nav-closing:not(.lme-nav-closing-end) .site-header .nav-container {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}