/* ==========================================================================
   Products mega menu
   --------------------------------------------------------------------------
   Additive stylesheet. Everything is namespaced under .sd-mega / .sd-rail /
   .sd-card so nothing here collides with the minified style.css or with the
   .mega-menu rules in responsive.css. Load this AFTER style.css and
   responsive.css: several rules are prefixed with .custom-menu purely to win
   specificity over the blanket ".custom-menu li a" mobile rule.
   ========================================================================== */

:root {
    --sd-blue: #124A9A;
    --sd-navy: #1A365D;
    --sd-orange: #E86A38;
    --sd-orange-ink: #c9531f;
    --sd-tint: #F4F7FC;
    --sd-line: #E3E9F3;
    --sd-ink: #16233A;
    --sd-muted: #5D6E88;
}

/* --------------------------------------------------------------------------
   Trigger
   -------------------------------------------------------------------------- */

.custom-menu .sd-mega__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    text-decoration: none;
    font: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: inherit;
    color: var(--sd-blue);
    cursor: pointer;
}

.custom-menu .sd-mega__trigger i {
    font-size: 14px;
    transition: transform .25s ease;
}

.custom-menu .sd-mega__trigger[aria-expanded="true"] {
    color: var(--sd-orange);
}

.custom-menu .sd-mega__trigger[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.custom-menu .sd-mega__trigger:focus-visible,
.sd-mega a:focus-visible,
.sd-mega button:focus-visible {
    outline: 2px solid var(--sd-orange);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Panel shell (desktop)
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {

    /* Static so the panel anchors to the header .container, not to the <li>,
       and can therefore span the full container width. */
    .custom-menu .sd-mega-item {
        position: static;
    }

    .sd-mega {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 999;
        background: #fff;
        border-top: 3px solid var(--sd-orange);
        border-radius: 0 0 14px 14px;
        box-shadow: 0 24px 60px rgba(16, 38, 73, .18);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
        overflow: hidden;
    }

    .sd-mega-item.is-open .sd-mega {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Invisible bridge so a diagonal mouse move from the trigger to the panel
       does not cross a dead gap and close the menu. */
    .sd-mega::before {
        content: "";
        position: absolute;
        top: -14px;
        left: 0;
        right: 0;
        height: 14px;
    }

    .sd-mega__inner {
        display: grid;
        grid-template-columns: 300px 1fr;
        align-items: stretch;
    }

    /* ---- rail ---- */

    .sd-mega__rail {
        display: flex;
        flex-direction: column;
        padding: 16px 14px;
        background: var(--sd-tint);
        border-right: 1px solid var(--sd-line);
    }

    .sd-rail__group {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    /* Kept to one line each so five families fit in a short panel. */
    .sd-rail__btn {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 9px 12px;
        text-decoration: none;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
        text-align: left;
        cursor: pointer;
        transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .sd-rail__btn.is-active {
        background: #fff;
        border-color: var(--sd-line);
        box-shadow: 0 6px 18px rgba(16, 38, 73, .08);
    }

    .sd-rail__icon {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(18, 74, 154, .08);
        color: var(--sd-blue);
        font-size: 15px;
        transition: background .2s ease, color .2s ease;
    }

    .sd-rail__btn.is-active .sd-rail__icon {
        background: var(--sd-orange);
        color: #fff;
    }

    .sd-rail__text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .sd-rail__label {
        font-size: 15px;
        font-weight: 700;
        color: var(--sd-navy);
        line-height: 1.3;
        white-space: nowrap;
    }

    .sd-rail__btn.is-active .sd-rail__label {
        color: var(--sd-blue);
    }

    /* The pane heading already says what each family covers. */
    .sd-rail__meta {
        display: none;
    }

    .sd-rail__chev {
        margin-left: auto;
        font-size: 13px;
        color: #A9B7CC;
        transition: color .2s ease, transform .2s ease;
    }

    .sd-rail__btn.is-active .sd-rail__chev {
        color: var(--sd-orange);
        transform: translateX(2px);
    }

    .sd-rail__all {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: auto;
        padding: 12px 12px 4px;
        border-top: 1px dashed #CFDAE9;
        color: var(--sd-blue);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        transition: color .2s ease;
    }

    .sd-rail__all:hover {
        color: var(--sd-orange);
    }

    /* ---- panes ---- */

    .sd-mega__panes {
        padding: 20px 26px 22px;
    }

    .sd-pane {
        display: none;
    }

    .sd-pane.is-active {
        display: block;
        animation: sd-pane-in .24s ease both;
    }

    @keyframes sd-pane-in {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: none; }
    }

    .sd-pane__head {
        margin-bottom: 18px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--sd-line);
    }

    .sd-pane__title {
        margin: 0 0 4px;
        font-size: 20px;
        font-weight: 800;
        color: var(--sd-navy);
        line-height: 1.2;
    }

    .sd-pane__blurb {
        margin: 0;
        font-size: 14px;
        line-height: 1.55;
        color: var(--sd-muted);
        max-width: 62ch;
    }

    .sd-pane__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    /* ---- category card ---- */

    .sd-card {
        display: flex;
        gap: 14px;
        padding: 14px;
        border: 1px solid var(--sd-line);
        border-radius: 12px;
        background: #fff;
        text-decoration: none;
        transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
    }

    .sd-card:hover,
    .sd-card:focus-visible {
        border-color: rgba(232, 106, 56, .55);
        background: #FFFBF9;
        box-shadow: 0 10px 24px rgba(16, 38, 73, .10);
        transform: translateY(-2px);
    }

    .sd-card__thumb {
        flex: 0 0 62px;
        width: 62px;
        height: 62px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--sd-tint);
        overflow: hidden;
    }

    .sd-card__thumb img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

    .sd-card__body {
        display: flex;
        flex-direction: column;
        gap: 5px;
        min-width: 0;
    }

    .sd-card__title {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--sd-navy);
    }

    .sd-card:hover .sd-card__title {
        color: var(--sd-orange-ink);
    }

    .sd-card__go {
        font-size: 12px;
        color: var(--sd-orange);
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity .2s ease, transform .2s ease;
    }

    .sd-card:hover .sd-card__go,
    .sd-card:focus-visible .sd-card__go {
        opacity: 1;
        transform: none;
    }

    .sd-card__desc {
        font-size: 13px;
        line-height: 1.45;
        color: var(--sd-muted);
    }




    /* ---- footer strip ---- */

    .sd-mega__foot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        flex-wrap: wrap;
        padding: 14px 28px;
        background: var(--sd-navy);
    }

    .sd-mega__foot-text {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        color: #D4DEEC;
        font-size: 14.5px;
        font-weight: 500;
    }

    .sd-mega__foot-text i {
        color: var(--sd-orange);
        font-size: 16px;
    }

    .sd-mega__foot-actions {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .sd-mega__foot-tel {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

    .sd-mega__foot-tel i {
        font-size: 13px;
        color: var(--sd-orange);
    }

    .sd-mega__foot-tel:hover {
        color: var(--sd-orange);
    }

    .sd-mega__foot-cta {
        padding: 9px 20px;
        border-radius: 6px;
        background: var(--sd-orange);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        transition: background .2s ease;
    }

    .sd-mega__foot-cta:hover {
        background: #d65b2d;
        color: #fff;
    }
}

/* Three cards per row is comfortable at 1200+. Below that the container gets
   tight, so drop to two and let the pane grow. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .sd-mega__inner {
        grid-template-columns: 260px 1fr;
    }

    .sd-pane__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sd-mega__panes {
        min-height: 0;
    }
}

/* --------------------------------------------------------------------------
   Mobile / tablet: the rail becomes an accordion inside the existing slide-in
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .custom-menu .sd-mega-item {
        position: relative;
        width: 100%;
        border-bottom: 1px solid rgba(18, 74, 154, .1);
    }

    .custom-menu .sd-mega__trigger {
        justify-content: space-between;
        width: 100%;
        padding: 10px 0;
        font-size: 18px;
        font-weight: 600;
    }

    .sd-mega {
        display: none;
        padding: 4px 0 14px;
    }

    .sd-mega-item.is-open .sd-mega {
        display: block;
    }

    .sd-mega__inner {
        display: flex;
        flex-direction: column;
    }

    /* The rail box itself is dropped on mobile so its two children become
       flex items of .sd-mega__inner and can be ordered around the panes:
       chips first, then the cards, then the catch-all link. */
    .sd-mega__rail {
        display: contents;
    }

    .sd-rail__group {
        order: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 12px;
    }

    .sd-mega__panes {
        order: 2;
    }

    .custom-menu .sd-rail__all {
        order: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 12px;
        padding: 12px;
        border-radius: 8px;
        background: rgba(18, 74, 154, .07);
        color: var(--sd-blue);
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }

    /* ---- family chips ---- */

    .sd-rail__btn {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 9px 14px 9px 9px;
        border: 1px solid var(--sd-line);
        border-radius: 999px;
        background: #fff;
        text-align: left;
        cursor: pointer;
        transition: background .2s ease, border-color .2s ease;
    }

    .sd-rail__btn[aria-expanded="true"] {
        background: var(--sd-blue);
        border-color: var(--sd-blue);
    }

    .sd-rail__icon {
        flex: 0 0 28px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: rgba(18, 74, 154, .1);
        color: var(--sd-blue);
        font-size: 13px;
    }

    .sd-rail__btn[aria-expanded="true"] .sd-rail__icon {
        background: var(--sd-orange);
        color: #fff;
    }

    .sd-rail__label {
        font-size: 14.5px;
        font-weight: 700;
        color: var(--sd-navy);
        white-space: nowrap;
    }

    .sd-rail__btn[aria-expanded="true"] .sd-rail__label {
        color: #fff;
    }

    /* The count belongs in the pane header on mobile, and the chevron only
       makes sense for the desktop fly-out. */
    .sd-rail__meta,
    .sd-rail__chev {
        display: none;
    }

    /* ---- panes ---- */

    .sd-pane {
        display: none;
    }

    .sd-pane.is-active {
        display: block;
    }

    .sd-pane__head {
        margin-bottom: 8px;
    }

    .sd-pane__title {
        display: none;
    }

    .sd-pane__blurb {
        margin: 0;
        font-size: 13px;
        line-height: 1.5;
        color: var(--sd-muted);
    }

    .sd-pane__grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    /* ---- cards ---- */
    /* The .custom-menu prefix is needed to beat the blanket
       ".custom-menu li a" rule in responsive.css, which would otherwise force
       these into 18px space-between rows. */

    .custom-menu .sd-card {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 11px 4px;
        border-bottom: 1px dashed #DBE3EF;
        text-decoration: none;
    }

    .custom-menu .sd-pane__grid .sd-card:last-child {
        border-bottom: 0;
    }

    .sd-card__thumb {
        flex: 0 0 46px;
        width: 46px;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: var(--sd-tint);
        overflow: hidden;
    }

    .sd-card__thumb img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
    }

    .sd-card__body {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .custom-menu .sd-card__title {
        display: block;
        font-size: 15px;
        font-weight: 600;
        color: var(--sd-navy);
        line-height: 1.35;
    }

    .sd-card__go {
        display: none;
    }

    .sd-card__desc {
        font-size: 12.5px;
        line-height: 1.4;
        color: var(--sd-muted);
    }




    /* ---- footer strip ---- */

    .sd-mega__foot {
        margin-top: 14px;
        padding: 14px;
        border-radius: 10px;
        background: var(--sd-navy);
    }

    .sd-mega__foot-text {
        display: flex;
        gap: 9px;
        margin: 0 0 12px;
        color: #D4DEEC;
        font-size: 13.5px;
        line-height: 1.5;
    }

    .sd-mega__foot-text i {
        margin-top: 3px;
        color: var(--sd-orange);
    }

    .sd-mega__foot-actions {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }

    .custom-menu .sd-mega__foot-tel {
        display: flex;
        align-items: center;
        gap: 8px;
        width: auto;
        padding: 0;
        color: #fff;
        font-size: 14.5px;
        font-weight: 700;
        text-decoration: none;
    }

    .sd-mega__foot-tel i {
        color: var(--sd-orange);
        font-size: 13px;
    }

    .custom-menu .sd-mega__foot-cta {
        width: auto;
        padding: 9px 18px;
        border-radius: 6px;
        background: var(--sd-orange);
        color: #fff;
        font-size: 14.5px;
        font-weight: 700;
        text-decoration: none;
    }
}

/* --------------------------------------------------------------------------
   Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .sd-mega,
    .sd-card,
    .sd-card__go,
    .sd-rail__btn,
    .sd-rail__chev,
    .custom-menu .sd-mega__trigger i {
        transition: none !important;
    }

    .sd-pane.is-active {
        animation: none !important;
    }

    .sd-card:hover,
    .sd-card:focus-visible {
        transform: none;
    }
}

/* ==========================================================================
   Rich nav dropdowns — Solutions, Industries, Services
   --------------------------------------------------------------------------
   Same panel language as the Products mega menu above, minus the rail. One
   column for the short menus, two for Industries.
   ========================================================================== */

@media (min-width: 992px) {

    .custom-menu .sd-drop-item {
        position: relative;
    }

    .sd-drop {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 999;
        padding: 10px;
        background: #fff;
        border-top: 3px solid var(--sd-orange);
        border-radius: 0 0 14px 14px;
        box-shadow: 0 24px 60px rgba(16, 38, 73, .18);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
    }

    .sd-drop--cols-1 { width: 372px; }
    .sd-drop--cols-2 { width: 660px; }

    .sd-drop-item.is-open .sd-drop {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Same hover bridge as the mega panel. */
    .sd-drop::before {
        content: "";
        position: absolute;
        top: -14px;
        left: 0;
        right: 0;
        height: 14px;
    }

    /* The wide panel is centred on its trigger rather than left or right
       aligned, so it reads as belonging to it and stays clear of the logo and
       the CTA at every desktop width. */
    .sd-drop--cols-2 {
        left: 50%;
        transform: translate(-50%, -8px);
        max-width: calc(100vw - 40px);
    }

    .sd-drop-item.is-open .sd-drop--cols-2 {
        transform: translate(-50%, 0);
    }

    .sd-drop__grid {
        display: grid;
        gap: 2px;
    }

    .sd-drop--cols-2 .sd-drop__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 6px;
    }

    .sd-drop__item {
        display: flex;
        align-items: flex-start;
        gap: 13px;
        padding: 11px 12px;
        border-radius: 10px;
        text-decoration: none;
        transition: background .2s ease;
    }

    .sd-drop__item:hover,
    .sd-drop__item:focus-visible {
        background: #FFF6F2;
    }

    .sd-drop__icon {
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 9px;
        background: rgba(18, 74, 154, .08);
        color: var(--sd-blue);
        font-size: 15px;
        transition: background .2s ease, color .2s ease;
    }

    .sd-drop__item:hover .sd-drop__icon {
        background: var(--sd-orange);
        color: #fff;
    }

    .sd-drop__text {
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-width: 0;
    }

    .sd-drop__title {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
        color: var(--sd-navy);
    }

    .sd-drop__item:hover .sd-drop__title {
        color: var(--sd-orange-ink);
    }

    .sd-drop__go {
        font-size: 11px;
        color: var(--sd-orange);
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity .2s ease, transform .2s ease;
    }

    .sd-drop__item:hover .sd-drop__go,
    .sd-drop__item:focus-visible .sd-drop__go {
        opacity: 1;
        transform: none;
    }

    .sd-drop__desc {
        font-size: 12.5px;
        line-height: 1.45;
        color: var(--sd-muted);
    }

    .sd-drop__all {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 6px;
        padding: 13px 12px 4px;
        border-top: 1px dashed #CFDAE9;
        color: var(--sd-blue);
        font-size: 14.5px;
        font-weight: 700;
        text-decoration: none;
        transition: color .2s ease;
    }

    .sd-drop__all:hover {
        color: var(--sd-orange);
    }
}

/* --------------------------------------------------------------------------
   Mobile: plain accordion inside the existing slide-in
   -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    .custom-menu .sd-drop-item {
        position: relative;
        width: 100%;
        border-bottom: 1px solid rgba(18, 74, 154, .1);
    }

    .sd-drop {
        display: none;
        padding: 2px 0 12px;
    }

    .sd-drop-item.is-open .sd-drop {
        display: block;
    }

    .sd-drop__grid {
        display: flex;
        flex-direction: column;
    }

    .custom-menu .sd-drop__item {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 10px 4px;
        border-bottom: 1px dashed #DBE3EF;
        text-decoration: none;
    }

    .custom-menu .sd-drop__grid .sd-drop__item:last-child {
        border-bottom: 0;
    }

    .sd-drop__icon {
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background: rgba(18, 74, 154, .1);
        color: var(--sd-blue);
        font-size: 14px;
    }

    .sd-drop__text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .custom-menu .sd-drop__title {
        display: block;
        font-size: 15px;
        font-weight: 600;
        color: var(--sd-navy);
        line-height: 1.35;
    }

    .sd-drop__go {
        display: none;
    }

    .sd-drop__desc {
        font-size: 12.5px;
        line-height: 1.4;
        color: var(--sd-muted);
    }

    .custom-menu .sd-drop__all {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 10px;
        padding: 11px 12px;
        border-radius: 8px;
        background: rgba(18, 74, 154, .06);
        color: var(--sd-blue);
        font-size: 14.5px;
        font-weight: 700;
        text-decoration: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sd-drop,
    .sd-drop__item,
    .sd-drop__icon,
    .sd-drop__go {
        transition: none !important;
    }
}

/* Pane-level link to a family's own landing page, where one exists. */
@media (min-width: 992px) {
    .sd-pane__head {
        position: relative;
    }

    .sd-pane__link {
        position: absolute;
        right: 0;
        top: 2px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--sd-blue);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        transition: color .2s ease;
    }

    .sd-pane__link i {
        font-size: 11px;
        transition: transform .2s ease;
    }

    .sd-pane__link:hover {
        color: var(--sd-orange);
    }

    .sd-pane__link:hover i {
        transform: translateX(3px);
    }
}

@media (max-width: 991.98px) {
    .custom-menu .sd-pane__link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 6px;
        padding: 0;
        color: var(--sd-blue);
        font-size: 13.5px;
        font-weight: 700;
        text-decoration: none;
    }
}

/* ==========================================================================
   Mobile navigation
   --------------------------------------------------------------------------
   The slide-in panel itself is laid out by responsive.css. These are the
   parts that were missing: a proper header row, a close button big enough to
   hit, and the actions the desktop header shows but mobile never did.
   ========================================================================== */

@media (max-width: 991.98px) {

    /* The panel had 60px of blank top padding to clear a floating close
       icon; the header row replaces that. */
    .custom-navbar {
        padding-top: 0 !important;
        display: flex !important;
        flex-direction: column;
    }

    .sd-mnav__top {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin: 0 -20px 12px;
        padding: 12px 16px;
        background: #fff;
        border-bottom: 1px solid rgba(18, 74, 154, .12);
    }

    .sd-mnav__logo img {
        max-height: 42px;
        width: auto;
    }

    /* Was an 18px glyph with no hit area. 44px is the smallest comfortable
       thumb target. */
    .custom-navbar .menu-close {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid rgba(18, 74, 154, .18);
        border-radius: 12px;
        background: #F4F7FB;
        color: #124A9A;
        font-size: 19px;
        cursor: pointer;
        position: static;
    }

    .custom-navbar .menu-close:active {
        background: #E86A38;
        border-color: #E86A38;
        color: #fff;
    }

    /* The list scrolls, the actions below stay reachable. */
    .custom-navbar .custom-menu {
        flex: 1 1 auto;
    }

    /* ---- actions at the foot of the menu ---- */

    .sd-mnav__cta {
        margin: 18px -20px 0;
        padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
        background: #F4F7FB;
        border-top: 1px solid rgba(18, 74, 154, .12);
    }

    .sd-mnav__quote {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 50px;
        padding: 13px 18px;
        border-radius: 12px;
        background: #E86A38;
        color: #fff !important;
        font-size: 16px;
        font-weight: 700;
        text-decoration: none;
    }

    .sd-mnav__row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 10px;
    }

    .sd-mnav__row a,
    .sd-mnav__mail {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 46px;
        padding: 11px 14px;
        border: 1px solid rgba(18, 74, 154, .2);
        border-radius: 12px;
        background: #fff;
        color: #124A9A !important;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
    }

    .sd-mnav__mail {
        margin-top: 10px;
        font-size: 14.5px;
    }

    .sd-mnav__row a i,
    .sd-mnav__mail i {
        color: #E86A38;
    }

    /* The products panel needs its own way to the landing page on mobile,
       because tapping the Products row expands it instead of navigating. */
    .sd-mega__foot-all {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 46px;
        padding: 11px 16px;
        border: 1px solid rgba(18, 74, 154, .2);
        border-radius: 12px;
        color: #124A9A;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
    }
}

/* On desktop the same link sits in the panel footer beside the quote button. */
@media (min-width: 992px) {
    .sd-mega__foot-all {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-right: 14px;
        color: var(--sd-blue);
        font-size: 14.5px;
        font-weight: 700;
        text-decoration: none;
    }

    .sd-mega__foot-all:hover {
        color: var(--sd-orange);
    }
}