/*
 * newmobile.css
 * New mobile header & navigation – test version only (?test=newmobile)
 * All rules are scoped to body.nm-test to guarantee zero impact on production.
 * Mobile-only rules live inside @media (max-width: 1000px).
 * Class prefix: nm- (newmobile)
 */

/* ============================================================
   GLOBAL: hide new elements everywhere by default
   (they are only shown inside .nm-test scope below)
   ============================================================ */

.nm-header,
.nm-quick-links,
.nm-book-btn,
.nm-all-procedures,
.nm-staticbuttons {
    display: none;
}

/* ============================================================
   DESKTOP (≥1001px): nm-test changes nothing on desktop
   ============================================================ */

@media screen and (min-width: 1001px) {
    /* All .nm-header elements stay hidden – desktop uses existing header */
    .nm-test .nm-header { display: none; }
}

/* ============================================================
   MOBILE (≤1000px): new header bar + menu layout
   ============================================================ */

@media screen and (max-width: 1000px) {

    /* ----------------------------------------------------------
       1. HIDE OLD MOBILE NAV BAR, SHOW NEW ONE
       ---------------------------------------------------------- */

    .nm-test .mobile-nav {
        display: none;
    }

    /* Hide the old bottom-fixed-socials floating bar (social icons are in new header) */
    .nm-test .bottom-fixed-socials {
        display: none;
    }

    /* Hide the desktop bottomline on mobile – new nm-header replaces it */
    .nm-test #header_new .bottomline {
        display: none;
    }

    /* Hide the static gallery links bar (replaced by the B&A section inside the menu) */
    .nm-test #header_new .staticbuttons_new {
        display: none;
    }

    /* Remove the old mobile-nav padding compensation */
    .nm-test header {
        padding-top: 0;
    }

    /* Give #header_new the correct height so page content sits below the fixed nm-header */
    /* 105px base + ~80px for nm-staticbuttons two rows */
    .nm-test #header_new {
        padding-top: 185px;
    }

    /* ----------------------------------------------------------
       2. NEW MOBILE HEADER BAR (.nm-header)
       ---------------------------------------------------------- */

    .nm-test .nm-header {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background: #ffffff;
        z-index: 200;
        padding: 10px 16px 8px;
        box-sizing: border-box;
    }

    /* Row 1: Logo spans full width */
    .nm-header__logo {
        display: block;
        line-height: 0;
        margin-bottom: 8px;
        text-decoration: none;
    }

    .nm-header__logo img {
        width: 100%;
        height: auto;
        max-width: 320px;
        display: block;
    }

    /* Row 2: Social icons (left) + Hamburger (right) */
    .nm-header__bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .nm-header__social {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .nm-header__social a {
        display: flex;
        align-items: center;
        line-height: 0;
        text-decoration: none;
    }

    .nm-header__social svg {
        fill: #2a4f74;
        display: block;
    }

    /* ----------------------------------------------------------
       Row 3: Static gallery/video buttons (same look as .staticbuttons_new)
       ---------------------------------------------------------- */

    .nm-test .nm-staticbuttons {
        display: flex;
        flex-wrap: wrap;
        background: #2A4F74;
        /* bleed out of nm-header's padding (16px sides, 8px bottom) */
        margin: 7px -16px -8px;
        width: calc(100% + 32px);
    }

    .nm-test .nm-staticbuttons a {
        color: #ffffff;
        text-align: center;
        text-decoration: none;
        font-size: 15px;
        line-height: 20px;
        width: 33.33%;
        padding: 10px;
        box-sizing: border-box;
    }

    .nm-test .nm-staticbuttons a:nth-child(2) {
        border-left: 1px solid #5180BB;
        border-right: 1px solid #5180BB;
    }

    .nm-test .nm-staticbuttons a:nth-child(4) {
        width: 100%;
        border-top: 1px solid #5180BB;
    }

    /* Hamburger toggle button */
    .nm-header__toggle {
        background: none;
        border: none;
        padding: 6px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        -webkit-tap-highlight-color: transparent;
    }

    /*
     * .nm-header__toggle also has the .menu class from script.js compatibility.
     * style-new.css's .menu rule sets width:100%, margin:auto, position:relative,
     * max-height:70px — all of which break the flex row layout here.
     * Override them explicitly.
     */
    .nm-test .nm-header__toggle.menu {
        width: auto;
        max-width: none;
        max-height: none;
        margin: 0 0 0 auto;
        position: static;
    }

    .nm-header__bar {
        display: block;
        width: 28px;
        height: 3px;
        background-color: #2a4f74;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    /* Animate bars to X when menu is open (.change added by script.js) */
    .nm-test .nm-header__toggle.change .nm-header__bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .nm-test .nm-header__toggle.change .nm-header__bar:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .nm-test .nm-header__toggle.change .nm-header__bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* ----------------------------------------------------------
       3. MENU OVERLAY ADJUSTMENTS FOR nm-test
       ---------------------------------------------------------- */

    /* Full-screen overlay at ≤1000px (menunew.css only does this at ≤768px) */
    .nm-test #box_menu {
        top: 0;
        height: 100%;
        z-index: 99999999999;
    }

    /*
     * mob_logo_box is display:none globally in menunew.css.
     * At ≤768px menunew.css shows it. At 769–1000px we must show it ourselves.
     * We also override layout/colours here to match the new design.
     */
    .nm-test #box_menu .mob_logo_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #ffffff;
        padding: 12px 16px;
        border-bottom: 1px solid #e5e5e5;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }

    /* Logo inside open-menu header — same proportional sizing as .nm-header__logo */
    .nm-test #box_menu .mob_logo_box > a:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .nm-test #box_menu .mob_logo_box img {
        width: 100%;
        height: auto;
        max-width: 260px;
        padding-left: 0;
    }

    /*
     * The close button (<a class="menu-link menu-closed menu menu_click">) inherits
     * width:100%; margin:auto from style-new.css's .menu rule, which collapses the
     * logo space. Override those properties to give the button a natural auto width
     * and push it to the right edge.
     */
    .nm-test #box_menu .mob_logo_box .menu-link.menu {
        width: auto;
        max-width: none;
        max-height: none;
        margin: 0;
        position: static;
        flex: 0 0 auto;
    }

    /* Scrollable content area: start below the mob_logo_box */
    .nm-test .box_menu_cont {
        top: 88px;
        height: calc(100% - 88px);
        padding: 0 16px 40px;
        max-width: 100%;
        left: 0;
        transform: none;
        -webkit-transform: none;
    }

    /* ----------------------------------------------------------
       4. PHONE NUMBER – prominent display
       ---------------------------------------------------------- */

    .nm-test .nav_info_mobile {
        text-align: center;
        padding: 16px 0 0;
    }

    .nm-test .nav_info_mobile .h_tel {
        font-size: 22px;
        font-weight: 600;
        color: #000000;
        text-decoration: none;
        display: block;
        margin-bottom: 0;
    }

    /* ----------------------------------------------------------
       5. MEET DR. RIZK SECTION
       ---------------------------------------------------------- */

    .nm-test .rbox .nav_box_meet.d-lg-none {
        display: grid;
        grid-template-columns: 1fr 100px;
        gap: 0 12px;
        padding: 16px 0 12px;
        border-bottom: 0;
        margin-bottom: 0;
    }

    .nm-test .rbox .nav_box_meet.d-lg-none .box_txt {
        align-self: center;
    }

    .nm-test .rbox .nav_box_meet.d-lg-none .nav_title {
        font-size: 20px;
        line-height: 26px;
        font-weight: 700;
        margin-top: 0;
        padding-bottom: 6px;
    }

    .nm-test .rbox .nav_box_meet.d-lg-none p {
        font-size: 11px;
        line-height: 16px;
    }

    .nm-test .rbox .nav_box_meet.d-lg-none img {
        width: 100%;
        height: 100px;
        object-fit: cover;
        object-position: top center;
        border-radius: 4px;
    }

    /* ----------------------------------------------------------
       6. QUICK LINKS (Rhinoplasty | Facelift)
       ---------------------------------------------------------- */

    .nm-test .nm-quick-links {
        display: flex;
        gap: 10px;
        margin-bottom: 12px;
    }

    .nm-quick-link {
        flex: 1;
        border: 1px solid #2a4f74;
        color: #2a4f74;
        text-align: center;
        padding: 5px 8px;
        text-decoration: none;
        border-radius: 0;
        font-size: 15px;
        font-weight: 500;
        transition: background 0.2s, color 0.2s;
        display: block;
    }

    .nm-quick-link:hover,
    .nm-quick-link:focus {
        background: #2a4f74;
        color: #ffffff;
    }

    /* ----------------------------------------------------------
       7. BOOK AN APPOINTMENT BUTTON
       ---------------------------------------------------------- */

    .nm-test .nm-book-btn {
        display: block;
        background: #2a4f74;
        color: #ffffff;
        text-align: center;
        padding: 8px;
        text-decoration: none;
        border-radius: 0;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 16px;
        transition: background 0.2s;
        width: 100%;
        box-sizing: border-box;
    }

    .nm-test .nm-book-btn:hover,
    .nm-test .nm-book-btn:focus {
        background: #1e3a57;
        color: #ffffff;
    }

    /* ----------------------------------------------------------
       8. BEFORE & AFTER GALLERY BANNER
       ---------------------------------------------------------- */

    .nm-test .rbox .nav_ba_ban {
        margin-bottom: 0;
    }

    /* ----------------------------------------------------------
       9. ALL PROCEDURES BUTTON
       ---------------------------------------------------------- */

    .nm-test .nm-all-procedures {
        display: block;
        margin: 14px 0;
    }

    .nm-all-procedures a {
        display: block;
        text-align: center;
        border: 1px solid #2a4f74;
        color: #2a4f74;
        padding: 8px 16px;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        border-radius: 0;
        transition: background 0.2s, color 0.2s;
    }

    .nm-all-procedures a:hover,
    .nm-all-procedures a:focus {
        background: #2a4f74;
        color: #ffffff;
    }

    /* Hide the original "All Procedures" button inside .lbox to avoid duplication */
    .nm-test .lbox .box_link_all {
        display: none;
    }

    /* ----------------------------------------------------------
       10. NOSE / FACE & NECK TOP-LEVEL TAB BUTTONS
       ---------------------------------------------------------- */

    .nm-test #box_menu .box_menu_row .tabs {
        padding: 0 0 10px;
    }

    .nm-test .box_menu_row .tabs-nav1 {
        display: flex;
        gap: 5px;
        border-bottom: none;
        margin-bottom: 0;
    }

    /* Each top-level tab: light-blue pill with circle chevron */
    .nm-test #box_menu .box_menu_row .tabs-nav1 .tab-button {
        flex: 1;
        background: #8ec1e1;
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
        padding: 12px 30px 12px 16px;
        border: none;
        border-right: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 0;
        position: relative;
        text-align: left;
        transition: background 0.2s;
        width: auto;
    }

    .nm-test #box_menu .box_menu_row .tabs-nav1 .tab-button:last-child {
        border-right: none;
    }

    /* Circle indicator on the right */
    .nm-test #box_menu .box_menu_row .tabs-nav1 .tab-button::before {
        content: '';
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 2px solid #ffffff;
        background: transparent;
        position: absolute;
        top: 50%;
        right: 5px;
        transform: translateY(-50%);
        transition: background 0.2s;
    }

    /* Chevron arrow inside the circle */
    .nm-test #box_menu .box_menu_row .tabs-nav1 .tab-button::after {
        content: '';
        display: block;
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        padding: 4px;
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(0) rotate(-45deg);
        transition: transform 0.2s;
    }

    /* Active state: dark blue */
    .nm-test #box_menu .box_menu_row .tabs-nav1 .tab-button.active {
        background: #2a4f74;
        color: #ffffff;
    }

    .nm-test #box_menu .box_menu_row .tabs-nav1 .tab-button.active::before {
        background: #8ec1e1;
        border-color: #8ec1e1;
    }

    .nm-test #box_menu .box_menu_row .tabs-nav1 .tab-button.active::after {
        transform: translateY(-10%) rotate(45deg);
        border-color: #ffffff;
        right: 13px;
    }
    .nm-test .box_menu_row .tab-content.active{
        display: block;
        padding-top: 5px;
    }
    /* ----------------------------------------------------------
       11. NESTED PROCEDURES / CONDITIONS SUB-TABS
       ---------------------------------------------------------- */

    .nm-test .box_menu_row .nested-tabs {
        margin-top: 0;
    }

    .nm-test .box_menu_row .nested-tabs .tabs-nav {
        display: flex;
        gap: 0;
        border-bottom: none;
        margin-bottom: 10px;
        justify-content: space-between;
    }

    .nm-test .box_menu_row .nested-tabs .tab-button {
        flex: 1;
        min-width: auto;
        width: 48%;
        padding: 12px 12px 12px 44px;
        font-size: 15px;
        font-weight: 600;
        border-radius: 0;
        border: 1px solid #cdcdcd;
        color: #888;
        background: #f5f5f5;
        position: relative;
        text-align: left;
        transition: background 0.2s, color 0.2s, border-color 0.2s;
    }

    .nm-test .box_menu_row .nested-tabs .tab-button::before {
        content: '';
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #cdcdcd;
        position: absolute;
        top: 50%;
        left: 8px;
        transform: translateY(-50%);
        transition: background 0.2s;
    }

    .nm-test .box_menu_row .nested-tabs .tab-button::after {
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.3536 4.35355C11.5488 4.15829 11.5488 3.84171 11.3536 3.64645L8.17157 0.464466C7.97631 0.269204 7.65973 0.269204 7.46447 0.464466C7.2692 0.659728 7.2692 0.976311 7.46447 1.17157L10.2929 4L7.46447 6.82843C7.2692 7.02369 7.2692 7.34027 7.46447 7.53553C7.65973 7.7308 7.97631 7.7308 8.17157 7.53553L11.3536 4.35355ZM0 4.5H11V3.5H0V4.5Z' fill='white'/%3E%3C/svg%3E%0A");
        width: 11px;
        height: 8px;
        display: block;
        position: absolute;
        top: 50%;
        left: 16px;
        transform: translateY(-50%);
    }

    .nm-test .box_menu_row .nested-tabs .tab-button.active {
        background: #2a4f74;
        color: #ffffff;
        border-color: #2a4f74;
    }

    .nm-test .box_menu_row .nested-tabs .tab-button.active::before {
        background: #8ec1e1;
    }

    /* Procedures list */
    .nm-test .box_menu_row .nested-tabs ul {
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .nm-test .box_menu_row .nested-tabs .tab_content1 ul li {
        background: none;
    }

    .nm-test .box_menu_row .nested-tabs .tab_content1 ul li:first-child a {
        font-weight: 700;
        color: #2a4f74;
        border-bottom: 1px solid #ddd;
    }

    .nm-test .box_menu_row .nested-tabs .tab_content1 ul li a {
        font-size: 15px;
        padding: 9px 4px;
        margin-bottom: 0;
        border-bottom: 1px solid #efefef;
        display: block;
        text-decoration: none;
        color: #333;
    }

    .nm-test .box_menu_row .nested-tabs .tab_content1 ul li:last-child a {
        border-bottom: none;
    }

    /* Conditions (tab_content2) */
    .nm-test .box_menu_row .nested-tabs .tab_content2 .nav_title {
        font-size: 16px;
        font-weight: 700;
        color: #2a4f74;
        padding: 10px 0 6px;
    }

    .nm-test .box_menu_row .nested-tabs .tab_content2 li {
        padding-left: 0;
        margin-bottom: 6px;
    }

    .nm-test .box_menu_row .nested-tabs .tab_content2 li a {
        font-size: 15px;
        color: #333;
        text-decoration: none;
        padding: 4px 0;
        display: block;
        border-bottom: 1px solid #efefef;
    }

    .nm-test .box_menu_row .nested-tabs .view-all-btn {
        font-size: 15px;
        color: #2a4f74;
        text-decoration: none;
        font-weight: 600;
        padding: 8px 0;
        display: block;
    }

    /* ----------------------------------------------------------
       12. LINK GRID (Case Studies, Blog, etc.) & CONSULTATION CTAs
       ---------------------------------------------------------- */

    /* .lbox comes after .rbox in the flex layout (order: 2).
       Nudge it up so it directly follows the tabs section. */
    .nm-test .box_menu_row .lbox {
        padding-top: 8px;
    }

    /* Show nav_box_link as a proper grid */
    .nm-test .nav_box_link {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 8px 0;
    }

    /* Reorder link rows to match Figma:
       Case Studies | Testimonials  → order 1
       All Procedures               → hidden (replaced above)
       Blog | In the Media          → order 2
       Our Facility | Out of Town   → order 3 */
    .nm-test .nav_box_link .box_link2 { order: 1; width: 100%; }
    .nm-test .nav_box_link .box_link_all { order: 2; width: 100%; }
    .nm-test .nav_box_link .box_link1 { order: 3; width: 100%; }
    .nm-test .nav_box_link .box_link3 { order: 4; width: 100%; margin-top: 0; }

    /* Individual link buttons */
    .nm-test .box_menu_row .btn_ {
        font-size: 14px;
        padding: 8px;
        border-radius: 0;
        border: 1px solid #d8d8d8;
        color: #333;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 48%;
        transition: background 0.2s, color 0.2s;
    }

    .nm-test .box_menu_row .btn_::after {
        content: '';
        border: solid #aaa;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 4px;
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        margin-left: 6px;
        flex-shrink: 0;
    }

    /* Consultation CTA buttons – dark blue */
    .nm-test .box_menu_row .box_link_consult {
        margin-top: 12px;
        display: flex;
        gap: 10px;
    }

    .nm-test .box_menu_row .box_link_consult a {
        flex: 1;
        background: #2a4f74;
        color: #ffffff;
        text-decoration: none;
        padding: 14px 12px;
        font-size: 14px;
        line-height: 1.125rem;
        font-weight: 500;
        border-radius: 0;
        text-align: left;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: background 0.2s;
    }

    .nm-test .box_menu_row .box_link_consult a:hover,
    .nm-test .box_menu_row .box_link_consult a:focus {
        background: #1e3a57;
        color: #ffffff;
    }

    /* Override the existing .arrow_link inside .box_link_consult */
    .nm-test .box_menu_row .box_link_consult .arrow_link {
        display: none;
    }

    .nm-test .box_menu_row .box_link_consult a::after {
        content: '';
        border: solid #ffffff;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 5px;
        transform: rotate(-45deg);
        flex-shrink: 0;
    }

    /* ----------------------------------------------------------
       13. ACCESSIBILITY – FOCUS STATES
       ---------------------------------------------------------- */

    .nm-test .nm-header__toggle:focus-visible {
        outline: 2px solid #2a4f74;
        outline-offset: 2px;
        border-radius: 4px;
    }

    .nm-test .nm-quick-link:focus-visible,
    .nm-test .nm-book-btn:focus-visible,
    .nm-test .nm-all-procedures a:focus-visible {
        outline: 2px solid #2a4f74;
        outline-offset: 2px;
    }

    .nm-test .box_menu_row .tabs-nav1 .tab-button:focus-visible,
    .nm-test .box_menu_row .nested-tabs .tab-button:focus-visible {
        outline: 2px solid #2a4f74;
        outline-offset: 2px;
    }

} /* end @media (max-width: 1000px) */

/* ============================================================
   HERO CTA BUTTONS & FLOATING GALLERIES TAB
   Scoped to .nm-test body class – zero desktop impact.
   Class prefix: nm-hero-
   ============================================================ */

/* Hide new hero elements everywhere by default */
.nm-hero-galleries,
.nm-hero-ctas {
    display: none;
}

@media screen and (max-width: 1000px) {

    /* ----------------------------------------------------------
       FLOATING GALLERIES TAB
       Sits on the right edge of the hero, vertically centred,
       text rotated so it reads bottom-to-top.
       ---------------------------------------------------------- */
    .nm-test .nm-hero-galleries {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 0;
        top: 65%;
        transform: translateY(-50%) rotate(180deg);
        writing-mode: vertical-lr;
        text-orientation: mixed;
        background: #ffffff;
        color: #2a4f74;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-decoration: none;
        padding: 14px 14px;
        border-radius: 0rem 0.5rem 0.5rem 0;
        z-index: 9999;
        line-height: 1;
        box-shadow: -2px 0 6px rgba(0, 0, 0, 0.15);
    }

    .nm-test .nm-hero-galleries:hover,
    .nm-test .nm-hero-galleries:focus {
        background: #f0f4f8;
        color: #2a4f74;
    }

    /* ----------------------------------------------------------
       HERO CTA CONTAINER
       Fixed to the bottom of the viewport on mobile.
       ---------------------------------------------------------- */
    .nm-test .nm-hero-ctas {
        display: flex;
        flex-direction: column;
        gap: 10px;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        padding: 0 16px calc(18px + env(safe-area-inset-bottom, 0px));
        z-index: 9998;
        box-sizing: border-box;
    }

    /* Reserve space so the fixed bar does not cover page content */
    .nm-test {
        padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }

    /* Two-column row: phone + out-of-town */
    .nm-hero-ctas__row {
        display: flex;
        gap: 10px;
    }

    /* Base button styles */
    .nm-hero-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-decoration: none;
        font-size: 15px;
        font-weight: 500;
        padding: 11px 10px;
        border-radius: 0;
        line-height: 1.2;
        transition: background 0.2s ease, color 0.2s ease;
        box-sizing: border-box;
    }

    /* Phone & Out of Town */
    .nm-hero-cta--phone,
    .nm-hero-cta--town {
        flex: 1;
        background: #8EC1E1;
        border: 0;
        color: #2A4F74;
        border-radius: 0.375rem;
    }

    .nm-hero-cta--phone:hover,
    .nm-hero-cta--phone:focus,
    .nm-hero-cta--town:hover,
    .nm-hero-cta--town:focus {
        background: #7ab0d4;
        color: #2A4F74;
    }

    /* Book Your Consultation – solid dark blue */
    .nm-hero-cta--book {
        width: 100%;
        background: #2A4F74;
        color: #ffffff;
        border: none;
        border-radius: 0.375rem;
    }

    .nm-hero-cta--book:hover,
    .nm-hero-cta--book:focus {
        background: #1e3a57;
        color: #ffffff;
    }

    /* ----------------------------------------------------------
       HIDE EXISTING INNER-PAGE HERO BUTTONS ON MOBILE
       The new nm-hero-ctas replace them.
       ---------------------------------------------------------- */
    .nm-test .sec-banner .banner-info .btn,
    .nm-test .hero-section .hero-btn {
        /*display: none;*/
    }

    /* Hide the "Book an Appointment" quick-guide bar below the hero
       to avoid duplicate booking CTAs on mobile. */
    .nm-test .quick-guide {
        display: none;
    }

    /* ----------------------------------------------------------
       HOME PAGE HERO TEXT – mobile overrides
       ---------------------------------------------------------- */
    .nm-test .topbanner .top_banner_container .top_banner_content p.top_banner_content_small {
        font-size: 20px !important;
        line-height: 22px !important;
    }

    .nm-test .topbanner .top_banner_container .top_banner_content p.top_banner_content_big,
    .nm-test .topbanner .top_banner_container .top_banner_content p.top_banner_content_big a {
        font-size: 20px !important;
        line-height: 26px !important;
    }

    /* top is set dynamically in footer.php to match the rendered .nm-header height */
    .nm-test .stickyanchors {
        top: 185px;
    }

    /* ----------------------------------------------------------
       ACCESSIBILITY – FOCUS STATES
       ---------------------------------------------------------- */
    .nm-hero-galleries:focus-visible,
    .nm-hero-cta:focus-visible {
        outline: 2px solid #2a4f74;
        outline-offset: 2px;
    }

} /* end @media (max-width: 1000px) – hero CTAs */

/* ============================================================
   SMALL MOBILE (≤500px): logo image swap + divider line
   ============================================================ */

/* Hide the divider everywhere by default */
.nm-header__divider {
    display: none;
}

@media screen and (max-width: 500px) {

    /* Logo: stretch to full available width, no cap */
    .nm-test .nm-header__logo img {
        max-width: 100%;
        width: 100%;
    }

    /* Full-width #334E71 divider below the logo */
    .nm-test .nm-header__divider {
        display: block;
        height: 2px;
        background: #334E71;
        /* Bleed out of the parent's 16px horizontal padding */
        margin: 4px -16px 8px;
        width: calc(100% + 32px);
    }

    /* Remove logo's own bottom margin – the divider provides the spacing */
    .nm-test .nm-header__logo {
        margin-bottom: 0;
    }

} /* end @media (max-width: 500px) */