/* ==========================================================================
   responsive-fixes.css
   --------------------------------------------------------------------------
   Site-wide mobile responsiveness for the shared layout (header, rsmenu nav,
   top toolbar, footer). Loaded LAST in _Layout.cshtml so it beats every other
   stylesheet. The inline <style> blocks in _Layout.cshtml still come later in
   document order, so rules that fight them are given extra specificity
   (#rs-header / .full-width-header prefixes).

   The big change: the hamburger breakpoint moves 991px -> 1199px, so small
   laptops and landscape tablets get the mobile menu at a readable size instead
   of a 10-11px desktop bar. Everything the old max-width:991px blocks in
   responsive.css / rsmenu-main.css did must therefore be RESTATED here for
   max-width:1199px.

   Tiers: phone <=575  |  tablet 576-991  |  small laptop 992-1199  |  desktop 1200+
   Desktop (>=1200px) is deliberately left untouched.
   ========================================================================== */


/* ==========================================================================
   1. NAV: re-tier the rsmenu hamburger from 991px up to 1199px
   ========================================================================== */

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

    /* --- 1.1 The toggle button ------------------------------------------
       rsmenu-main.css:473 hides it above 992px. Its full appearance only
       exists in max-width:991px blocks, so restate it all, not just display. */
    .full-width-header .rs-header .main-menu .rs-menu-toggle,
    .rs-menu-toggle {
        display: block !important;
        float: right;
        width: auto;
        height: 50px;
        padding: 12px 0;
        line-height: 26px;
        text-align: right;
        background-color: #fff !important;
        color: #1ba1e2 !important;
        border: none !important;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

        .rs-menu-toggle i {
            margin-right: 0;
            font-size: 24px;
        }

    /* --- 1.2 Header chrome ---------------------------------------------
       responsive.css:346-368 only applies <=991. Restate for <=1199. */
    .full-width-header .rs-header .main-menu {
        position: relative;
        margin-top: 20px;
        left: 0;
        width: 100%;
        z-index: 99999;
    }

    .full-width-header .rs-header .menu-area,
    .home4 .full-width-header .rs-header .menu-area {
        background-color: #fff;
        box-shadow: -1px 2px 4px 0 rgba(0, 0, 0, 0.1);
    }

    /* style.css:758-765 hard-codes .logo-area{width:250px}. Inside a col-6
       that is ~157px at 360px wide, which overflows the viewport. The :before
       is a left:-500%/width:500% bleed element - another h-scroll source. */
    .full-width-header .rs-header .logo-area {
        top: 0;
        width: auto;
        max-width: 250px;
        height: auto;
        line-height: normal;
    }

        .full-width-header .rs-header .logo-area:after {
            border: none;
            content: none;
        }

        .full-width-header .rs-header .logo-area:before {
            display: none;
        }

        .full-width-header .rs-header .logo-area img {
            max-width: 100%;
            height: auto;
        }

        .full-width-header .rs-header .logo-area span {
            line-height: 18px;
        }

    /* _Layout.cshtml:312-318 shrink-wraps this container. With the menu
       collapsed its content is just logo+hamburger, so it would crush the
       whole header bar to ~300px. (0,2,0) inline rule vs (1,2,0) here. */
    #rs-header .container.menu-container {
        max-width: 100% !important;
        width: 100%;
    }

    /* --- 1.3 The menu panel: collapse + scroll --------------------------
       rsmenu-main.js:96 writes an INLINE height:500px, which loses to an
       !important here - so the jQuery animation becomes inert with no JS edit.
       Keyed off .rs-menu-toggle-open (adjacent sibling of .rs-menu), NOT off
       .rs-menu-close: that class is only added on window.load, so the menu
       would render fully expanded while the page is still loading. */
    .full-width-header .rs-header .main-menu .rs-menu,
    .rs-menu {
        height: auto !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height .3s ease;
    }

    /* NB: the collapsed rule above is (0,4,0). This one must out-specify it or
       max-height:0 wins and the menu can never open - hence the full
       .full-width-header .rs-header .main-menu prefix, giving (0,6,1). */
    .full-width-header .rs-header .main-menu a.rs-menu-toggle.rs-menu-toggle-open + .rs-menu {
        max-height: calc(100vh - 160px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* --- 1.4 Stack the top-level items ---------------------------------
       Dark skin from responsive.css:420-455 restated for <=1199. */
    .full-width-header .rs-header .main-menu .rs-menu ul.nav-menu {
        background-color: #1b1b1b;
        margin: 0;
        float: left;
        width: 100%;
    }

    .rs-menu li,
    .full-width-header .rs-header .main-menu .rs-menu ul.nav-menu li {
        display: block;
        width: 100%;
        margin: 0;
        position: relative;
    }

    /* #rs-header prefix out-specifies the inline font hacks in _Layout.cshtml */
    .full-width-header #rs-header .main-menu .rs-menu ul.nav-menu > li > a {
        display: block;
        width: 100%;
        height: auto;
        line-height: 1.45;
        padding: 13px 56px 13px 16px; /* right pad leaves room for the chevron */
        font-size: 14px;
        color: #fff !important;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

    .full-width-header .rs-header .main-menu .rs-menu ul.nav-menu li a:hover,
    .full-width-header .rs-header .main-menu .rs-menu ul.nav-menu li:hover {
        background-color: #565656;
    }

    .full-width-header .rs-header .main-menu .rs-menu ul.nav-menu li i {
        color: #fff !important;
    }

    /* --- 1.5 Tap chevrons ----------------------------------------------
       rsmenu-main.css:469 hides these above 992px, and :557 makes the
       top-level one width:100% - which is why tapping "Cloud Services"
       anywhere expands it and you can never reach /cloud-hosting.
       Narrowed to a 56px chevron: row text navigates, chevron expands. */
    .nav-menu > .menu-item-has-children > span.rs-menu-parent,
    .nav-menu .rs-mega-menu > span.rs-menu-parent {
        display: block !important;
        position: absolute;
        right: 0;
        top: 0;
        width: 56px;
        height: 48px;
        padding: 14px 18px;
        line-height: 20px;
        text-align: right;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 2;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    .nav-menu > .menu-item-has-children .sub-menu .menu-item-has-children > span.rs-menu-parent {
        display: block !important;
        position: absolute;
        right: 0;
        top: 0;
        width: 56px;
        height: 44px;
        padding: 12px 18px;
        line-height: 20px;
        text-align: right;
        border-left: 1px solid rgba(255, 255, 255, .08);
        cursor: pointer;
        z-index: 2;
    }

    .full-width-header .rs-header .main-menu .rs-menu .nav-menu span.rs-menu-parent i {
        color: #fff !important;
        margin: 0;
    }

    /* --- 1.6 Submenus go static (no flyouts) ---------------------------
       Overrides rsmenu-main.css:37-43 / 486-500 and style.css:8365. */
    .full-width-header .rs-header .main-menu .rs-menu ul.sub-menu,
    .rs-menu ul ul {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        transform: none !important;
        box-shadow: none !important;
        background-color: #565656;
    }

    .rs-menu ul ul li > ul,
    .rs-menu ul ul ul,
    .rs-menu ul ul li > ul.thirdlevel {
        left: auto !important;
        right: auto !important;
        top: auto !important;
    }

    .rs-menu ul ul a,
    .full-width-header .rs-header .main-menu .rs-menu ul.sub-menu li a {
        width: 100% !important;
        line-height: 1.4;
        padding: 11px 56px 11px 26px;
        font-size: 13px;
        font-weight: 300;
        color: #fff !important;
    }

    .rs-menu ul ul li {
        border-bottom: none;
    }

    .full-width-header .rs-header .main-menu .rs-menu ul.sub-menu li:hover {
        background-color: #565656 !important;
    }

    .nav-menu .rs-mega-menu {
        position: relative;
    }

    /* The third-level flyout. The inline rule at _Layout.cshtml:119 is (0,2,3)
       with !important AND later in the document, so this needs (1,3,4) to win.
       The media query on that inline block is also moved to min-width:1200px. */
    .full-width-header #rs-header .rs-menu ul ul li > ul.Side-sub-menu {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100% !important;
    }

    /* --- 1.7 Kill hover-to-open; .visible becomes the only opener ------
       TWO sources: rsmenu-main.css:481 and rsmenu-transitions.css (a 3-line
       file that is 100% inside min-width:992px - easy to miss). Without this,
       every submenu at 992-1199 is display:block + visibility:hidden, and
       rsmenu-main.css:464 actively hides .visible. */
    .rs-menu li:active > ul,
    .rs-menu li:focus > ul,
    .rs-menu li:hover > ul,
    .rs-menu li:hover > ul.mega-menu > li > ul,
    .rs-menu li:hover ul.mega-menu .sub-menu {
        display: none;
    }

    /* (0,1,2) */
    .rs-menu ul ul {
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* (0,2,2) - beats the rule above, so .visible wins */
    .rs-menu ul ul.visible {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* --- 1.8 Mega-menu grid neutraliser --------------------------------
       _Layout.cshtml has no mega-menu markup today; this is cheap insurance
       for any future view that uses .rs-menu .row. */
    .rs-menu .row [class*="col-"] {
        float: left !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* --- 1.9 Sticky header ---------------------------------------------
       responsive.css:336 sets .sticky{display:none} and main.js adds .sticky on
       any scroll - so today the whole header VANISHES the moment you scroll on
       a phone. Un-stick it instead: it scrolls away with the page normally. */
    .full-width-header .rs-header .sticky {
        display: block !important;
        position: relative !important;
        top: auto !important;
        box-shadow: none;
    }
}

/* Phone: cap the open menu at the viewport minus the chrome above it. 190px was
   sized for the old bar - a 9-link toolbar wrapping to ~4 rows over a ~104px
   header. The toolbar is now one row of three and the header ~71px (see 1.3),
   so the panel can have that space back. */
@media only screen and (max-width: 575px) {
    .full-width-header .rs-header .main-menu a.rs-menu-toggle.rs-menu-toggle-open + .rs-menu {
        max-height: calc(100vh - 120px);
    }
}

/* --- 1.3 Tighter header bar on phones --------------------------------------
   The bar is a plain BS4 .row: logo in a col-6, hamburger in the other col-6,
   and its height is simply whichever column is taller. The logo column is the
   tall one - logo.png is 150x86 and was only capped at max-width:100%, so it
   rendered full size and the stack came to ~104px against ~70px on the menu
   side. Both columns are trimmed below, logo first since it sets the floor:

     <=767px   img 100px (57 tall) + 2px pad + 11px tagline   ~= 70px
     <=479px   img  88px (50 tall) + 2px pad + 11px tagline   ~= 63px

   Not trimmed any further on purpose: the next ~12px would have to come from
   dropping the "Empower your Web Identity" tagline, and the hamburger is kept
   at a 44px tap target.

   The .sticky selector is repeated at equal specificity to beat
   style.css:948 (.sticky .logo-area img{max-width:76%}), which is otherwise
   more specific than the plain rule and would undo the cap once .sticky lands. */
@media (max-width: 767px) {

    .full-width-header .rs-header .logo-area img,
    .full-width-header .rs-header .sticky .logo-area img {
        max-width: 100px;
    }

    .full-width-header .rs-header .logo-area {
        line-height: 1;
        padding: 2px 0;
    }

        /* line-height:0 on the inline formatting context removes the ~4px
           baseline gap the inline image sits on. */
        .full-width-header .rs-header .logo-area a {
            display: inline-block;
            line-height: 0;
        }

        /* The tagline is sized for a 150px mark. At 7px the 25-character line
           measures ~85px, so it sits under the shrunken logo instead of
           running past it (at the inherited 9px it would be ~110px). */
        .full-width-header .rs-header .logo-area span {
            font-size: 7px;
            line-height: 9px;
            margin-top: 2px;
        }

    /* Menu column: .main-menu's top margin is the only thing positioning the
       toggle vertically, so centre it by hand against the logo column, which is
       what sets the bar height: (70 - 44) / 2 = 13. Re-derive if the logo sizes
       above change. */
    .full-width-header .rs-header .main-menu {
        margin-top: 13px;
    }

    /* Right-aligned, but via text-align rather than the float:right of the 1199
       tier. Out of flow the toggle contributed no height and the menu panel had
       to clear it; in flow it gives .main-menu its height and the panel is a
       plain sibling below. Same resting position either way - the 13px above
       still lands it centred vertically. */
    .full-width-header .rs-header .main-menu .rs-menu-toggle,
    .rs-menu-toggle {
        float: none;
        text-align: right;
        height: 44px;
        padding: 10px 0;
        line-height: 24px;
    }

        .rs-menu-toggle i {
            font-size: 22px;
        }
}

@media (max-width: 479px) {

    .full-width-header .rs-header .logo-area img,
    .full-width-header .rs-header .sticky .logo-area img {
        max-width: 88px;
    }

    /* Shorter bar at this tier, so re-centre: (63 - 44) / 2 = 10. */
    .full-width-header .rs-header .main-menu {
        margin-top: 10px;
    }
}


/* ==========================================================================
   2. TOP TOOLBAR: collapse to Support / Contact Us / More below 1200px
   --------------------------------------------------------------------------
   _Layout.cshtml:172 tags this "hidden-sm hidden-xs" - Bootstrap 3 class names
   with zero matching CSS in this BS4 project, so it has always rendered on
   phones. Per the decision it stays; every link is still reachable, the six
   page links just move behind "More" and the phone number drops out.
   ========================================================================== */

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

    .full-width-header .toolbar-area {
        display: block;
        padding: 4px 0;
    }

        /* NB: the empty spacer column is hidden in the markup with
           d-none d-xl-block, not here - :empty does not match an element
           containing whitespace, which that div does. */

        .full-width-header .toolbar-area .toolbar-contact {
            display: block;
            width: 100%;
            text-align: center !important;
        }

            .full-width-header .toolbar-area .toolbar-contact ul.top-menu {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                align-items: stretch;
                margin: 0;
                padding: 0;
                line-height: 1.3;
            }

                .full-width-header .toolbar-area .toolbar-contact ul.top-menu > li {
                    display: block;
                    margin: 0 !important;
                    padding: 5px 6px;
                    font-size: 12px;
                    text-align: center;
                    position: relative;
                }

                    .full-width-header .toolbar-area .toolbar-contact ul.top-menu > li > a {
                        font-size: 11px;
                    }

                    .full-width-header .toolbar-area .toolbar-contact ul.top-menu > li i {
                        margin-right: 5px;
                    }

        .full-width-header .toolbar-area .toolbar-contact ul {
            z-index: 999999;
        }
}

/* Toolbar tiers. 1200px up: phone + Support + the six page links + Contact Us,
   all inline. Below that the phone number and the six links drop out and the
   same links come back under "More", leaving Support / Contact Us / More. */
.toolbar-mobile-only {
    display: none !important;
}

@media only screen and (max-width: 1199px) {
    .full-width-header .toolbar-area .toolbar-contact ul.top-menu > li.toolbar-desktop-only {
        display: none !important;
    }

    .full-width-header .toolbar-area .toolbar-contact ul.top-menu > li.toolbar-mobile-only {
        display: block !important;
    }
}

/* Per-tier wrapping: 3 items (Support, Contact Us, More). */
@media (min-width: 768px) and (max-width: 1199px) {
    /* natural wrap, single row */
    .full-width-header .toolbar-area .toolbar-contact ul.top-menu > li {
        flex: 0 0 auto;
        padding: 5px 10px;
    }
}

/* Only three items are visible here - the six page links live inside the "More"
   dropdown - so they fit one row at any phone width and need no forced column
   split (an earlier revision pinned items 3+ to 30% for that reason). */
@media (max-width: 767px) {

    .full-width-header .toolbar-area .toolbar-contact ul.top-menu > li {
        display: block;
        flex: 0 0 auto;
        padding: 4px 8px;
    }
}


/* ==========================================================================
   3. FLOATING OVERLAY WIDGETS
   --------------------------------------------------------------------------
   Six fixed-position widgets live in _Layout.cshtml:1198-1219 and NONE of them
   has a media query anywhere in the project - they render at full desktop size
   on a 360px phone. On the left, WhatsApp / Telegram / Get Free Quote all land
   in the same 50px column at 60% / 70% / 80% of viewport height, directly on
   top of the hero copy; on the right, Live Chat + Help Desk are two stacked
   120px images. Below 768px all six stay visible but are pulled out of the
   text column into the two bottom corners:

     bottom-left  (46px strip)   WhatsApp 128 / Telegram 74 / Mail 20
     bottom-right                Live Chat + Help Desk 76-260, scroll-to-top 20-60
   ========================================================================== */

@media (max-width: 767px) {

    /* Live Chat + Help Desk: two stacked 203x941 tabs at height:120px = 240px
       tall, starting at top:55%, which is what drove them through the hero copy.
       Shrink to 92px each (184px total, ~20px wide) and anchor to the bottom
       right above the scroll-to-top button instead of mid-viewport.
       Position is an INLINE style on _Layout.cshtml:1212, hence !important;
       `display:inline-grid` is inline too, so it needs no restating here. */
    .livechat {
        top: auto !important;
        bottom: 76px !important;
        right: 0 !important;
    }

        .livechat img {
            height: 92px !important;
            width: auto !important;
        }

    /* WhatsApp, Telegram and Get Free Quote all default into the same 50px
       column at 60% / 70% / 80% of viewport height, on top of the hero copy.
       Restack them as a 46px vertical strip in the bottom-left corner:
       WhatsApp 128 / Telegram 74 / Mail 20, with scroll-to-top bottom-right. */
    /* WhatsApp. style.css:10904 makes the inner div position:absolute, and
       #myButton is empty in the markup, so the container collapses to ZERO
       height - `bottom` then anchors a 0px box and the 46px icon hangs
       downward from it, straight into Telegram's slot. Give the container a
       real 46x46 box and let the icon flow inside it. */
    .quote-side-btn.whatsap-btn {
        top: auto !important;
        bottom: 128px !important;
        left: 12px !important;
        width: 46px !important;
        height: 46px !important;
    }

        .whatsap-btn > div {
            position: static !important;
            transform: none !important;
            width: 46px !important;
            height: 46px !important;
        }

        /* style.css:10885 pins the icon with right:-70px / position:absolute,
           which is what pushed it into the text column. */
        .whatsap-btn div i {
            position: static !important;
            display: block !important;
            top: auto !important;
            right: auto !important;
            left: auto !important;
            width: 46px !important;
            height: 46px !important;
            line-height: 46px !important;
            font-size: 24px !important;
        }

    /* Telegram - position lives in an inline style on _Layout.cshtml:1208,
       and the size in an inline style on its child <a>, so both need
       !important to be reachable from a stylesheet. */
    .wapp {
        top: auto !important;
        bottom: 74px !important;
        left: 12px !important;
    }

        /* display:block, not the .fa default inline-block - an inline box adds
           a baseline descender gap under it and shifts the stack. */
        .wapp a {
            display: block !important;
            width: 46px !important;
            height: 46px !important;
            line-height: 46px !important;
            font-size: 20px !important;
        }

    /* Get Free Quote - on desktop this is a 200px pill parked off-screen at
       left:-200px that slides in on :hover. Hover is unreliable on touch, so
       on phones drop the label and keep the envelope icon only. */
    .quote-side-btn.bounce {
        top: auto !important;
        bottom: 20px !important;
        left: 12px !important;
        width: 46px !important;
        height: 46px !important;
        box-shadow: none !important;
    }

        .quote-side-btn.bounce a {
            display: block !important;
            width: 46px !important;
            height: 46px !important;
            background: none !important;
            box-shadow: none !important;
        }

        .quote-side-btn.bounce a span {
            display: none !important;
        }

        .quote-side-btn.bounce a i {
            position: static !important;
            display: block !important;
            top: auto !important;
            right: auto !important;
            left: auto !important;
            width: 46px !important;
            height: 46px !important;
            line-height: 46px !important;
            font-size: 22px !important;
            border-radius: 50% !important;
        }

    #scrollUp {
        bottom: 20px;
        right: 16px;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }
}


/* ==========================================================================
   4. FOOTER - MOBILE REDESIGN  (see also section 6 for the 768-991px tier)
   --------------------------------------------------------------------------
   Two changes below 768px:
   (a) the social + quick-contact strip is centred and loses the dividers that
       only make sense when the two halves sit side by side;
   (b) the four link groups go 2-up instead of one tall stack (markup:
       col-6 col-lg-2), with Address full-width beneath them (col-12 col-lg-3),
       and the whole block tightened.
   `text-center` was removed from .footer-content in the markup rather than
   overridden here - Bootstrap sets it !important, and left-aligned reads
   better once the groups are in two columns.
   ========================================================================== */

@media (max-width: 767px) {

    /* --- (a) social + quick-contact strip ------------------------------- */
    .client-contact-services .client-contact .row > div {
        text-align: center !important;
    }

    .footer-social-links {
        padding: 0 !important;
        margin: 10px 0 !important;
        border: none !important;
        text-align: center !important;
    }

        .footer-social-links ul {
            margin-bottom: 0;
            padding-left: 0;
        }

    /* style.css:4404 puts a border-right on this - a divider between the two
       halves that reads as a stray line once they stack full-width. */
    .client-contact-services .client-service {
        border-right: none !important;
        justify-content: center;
        padding: 4px 5px 12px;
    }

        /* responsive.css:612 turns .client-service into an inline-block, so the
           icons only sat in a row because of the float at style.css:4407.
           Dropping the float without replacing it left four block-level divs
           stacked one per line; inline-block keeps the row and lets the
           text-align:center above centre it. */
        .client-contact-services .client-service .service-icon {
            float: none;
            display: inline-block;
            vertical-align: middle;
        }

            /* style.css:4419 puts margin-right:30px on every icon - a trailing
               gap on the last one throws the centring off by half of it. */
            .client-contact-services .client-service .service-icon i {
                margin: 0 9px !important;
            }

    .client-contact .client-border {
        border: none !important;
    }

    /* --- (b) link groups ------------------------------------------------ */
    /* responsive.css:288-291 forces padding-top:80px !important on this at
       <=991px, via .client-footer .rs-hostlab-footer .footer-content (0,3,0).
       Match that selector and !important or the footer keeps 80px of dead
       space above the links on every phone. (style.css:4465 = 66px.) */
    .client-footer .rs-hostlab-footer .footer-content {
        padding-top: 28px !important;
        padding-bottom: 18px !important;
    }

        /* The link groups are laid out with CSS Grid rather than Bootstrap's
           flex .row. The flex version left the second column of the FIRST line
           sitting ~60px lower than the first (rows 2+ aligned fine), and grid
           removes the whole class of problem: each group occupies a cell, and
           cells in a row always share a top edge regardless of content height.
           Bootstrap's col-* flex-basis/max-width/padding are neutralised below
           so the grid controls sizing. */
        .rs-hostlab-footer .footer-content .row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 15px;
            row-gap: 24px;
            align-items: start;
            margin-left: 0;
            margin-right: 0;
        }

            /* style.css:7487 gives every .row a :before and an :after. In a flex
               row they are zero-size no-ops; in a grid container they become real
               grid items, and :before ate cell 1 - which is why "More Details"
               rendered alone in the right-hand column with a blank cell beside it
               and every group below it shifted a row down. `content: none` stops
               the box being generated at all, so the !important display on that
               rule has nothing to apply to. */
            .rs-hostlab-footer .footer-content .row::before,
            .rs-hostlab-footer .footer-content .row::after {
                content: none;
                display: none !important;
            }

            .rs-hostlab-footer .footer-content .row > div {
                flex: none;
                max-width: 100%;
                padding-left: 0;
                padding-right: 0;
            }

            /* Address spans the full width beneath the 2-up groups */
            .rs-hostlab-footer .footer-content .row > .col-12 {
                grid-column: 1 / -1;
            }

            /* the lg-only spacer must not consume a grid cell */
            .rs-hostlab-footer .footer-content .row > .d-none {
                display: none !important;
            }

        /* the gap between groups is the grid row-gap above - a margin here as
           well would stack on top of it and make the rows uneven, because the
           taller group in each row already sets the row height. */
        .rs-hostlab-footer .footer-content .footer-menu {
            margin-top: 0;
            margin-bottom: 0;
        }

            .rs-hostlab-footer .footer-content .footer-menu .title {
                font-size: 15px;
                margin-top: 0;
                margin-bottom: 10px;
                line-height: 1.3;
            }

            .rs-hostlab-footer .footer-content .footer-menu ul {
                padding-left: 0;
                margin-bottom: 0;
                list-style: none;
            }

                /* style.css:8449 is the shorthand `margin: 8px auto`, so setting
                   margin-bottom alone left an 8px top margin as well - 15px
                   between links but only 7px under the title. */
                .rs-hostlab-footer .footer-content .footer-menu ul li {
                    margin: 0 0 9px;
                }

                    /* the gap below a group is the grid row-gap, not this */
                    .rs-hostlab-footer .footer-content .footer-menu ul li:last-child {
                        margin-bottom: 0;
                    }

                .rs-hostlab-footer .footer-content .footer-menu ul li a {
                    font-size: 13px;
                    line-height: 1.5;
                }

    .copyright .copy-text {
        font-size: 12px;
        line-height: 1.6;
        padding: 0 10px;
    }
}


/* ==========================================================================
   5. BANNER SIZING
   --------------------------------------------------------------------------
   .new-quote-back (style.css:8331) declares no background-size or -position,
   so its hero art tiles at natural size from the top-left corner at every
   width. Not a responsive bug - a plain bug - so no media query.
   ========================================================================== */

.new-sg-section.new-quote-back {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* --- Support dropdown: tap to open instead of hover --------------------
   style.css:1023 opens it on :hover, which on touch gives a sticky/double-tap
   mess. The anchor at _Layout.cshtml:190 has no href, so :focus-within is not
   reliable either - a small click handler in _Layout toggles .is-open. */
@media only screen and (max-width: 1199px) {

    .full-width-header .toolbar-area .toolbar-contact .top-menu li:hover > ul {
        display: none;
        opacity: 0;
        visibility: hidden;
    }

    .full-width-header .toolbar-area .toolbar-contact .top-menu li > ul.support-drop {
        display: none;
        opacity: 1;
        visibility: visible;
        position: absolute;
        top: 100%;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 300px;
        width: min(300px, 92vw);
        max-height: 60vh;
        overflow-y: auto;
        text-align: left;
        z-index: 999999;
    }

    .full-width-header .toolbar-area .toolbar-contact .top-menu li.is-open > ul.support-drop {
        display: block;
    }

    .full-width-header .toolbar-area .toolbar-contact .top-menu li.is-open > a {
        text-decoration: underline;
    }

    .support-drop li {
        width: 100%;
        padding: 8px 12px !important;
    }

        .support-drop li a span {
            font-size: 11px;
            line-height: 1.3;
        }

    /* "More" is the last item in the row, so a centred 92vw panel would hang off
       the right edge. Hang it from the item's right edge instead and keep it
       narrow - these entries are bare labels, no description line. */
    .full-width-header .toolbar-area .toolbar-contact .top-menu li > ul.more-drop {
        left: auto;
        right: 0;
        transform: none;
        width: min(200px, 60vw);
    }
}

/* --- Toolbar "More" ---------------------------------------------------
   Collapses the page links (Cloud Console ... Financials) behind one entry so
   the bar reads Support / Contact Us / More. It reuses .support-drop for the
   panel itself - only the width and the arrow state differ. */
.top-menu li > ul.more-drop {
    width: 200px;
}

    .top-menu li > ul.more-drop li a {
        font-weight: normal;
    }

/* Expanded/collapsed affordance: the caret flips on hover (desktop) and on the
   .is-open class the tap handler sets below 1200px. */
.top-menu li > a .fa-angle-down {
    transition: transform 0.2s ease-in-out;
}

.top-menu li:hover > a .fa-angle-down,
.top-menu li.is-open > a .fa-angle-down {
    transform: rotate(180deg);
}

@media only screen and (max-width: 1199px) {
    /* No hover state on touch - only the tapped item should flip. */
    .top-menu li:hover > a .fa-angle-down {
        transform: none;
    }

    .top-menu li.is-open > a .fa-angle-down {
        transform: rotate(180deg);
    }
}


/* ==========================================================================
   6. FOOTER - 768-991px spacing (the phone redesign is section 4)
   ========================================================================== */

@media only screen and (max-width: 991px) {
    .footer-content .footer-menu {
        margin-bottom: 28px;
    }
}


/* ==========================================================================
   7. DESKTOP GUARD (>=1200px)
   --------------------------------------------------------------------------
   The inline font hacks deleted from _Layout.cshtml:95-117 were mostly no-ops
   (style.css:793 already sets 11px). This documents the intent for the band
   where the horizontal bar is tightest, so a future style.css edit can't
   silently break it.
   ========================================================================== */

@media (min-width: 1200px) and (max-width: 1400px) {
    .full-width-header #rs-header .main-menu .rs-menu ul.nav-menu > li > a {
        font-size: 11px;
        padding: 0 4px;
    }
}