/* ==========================================================================
   Guardian Alarm - desktop mega menu (Max Mega Menu, location "primary")
   Loaded by the Guardian Mobile Menu plugin, right after Max Mega Menu's
   own stylesheet. Desktop only: 991px and up, where the theme shows the
   desktop nav. Below that, the plugin's mobile drawer takes over.

   Panels are found by CSS classes on their menu items (Appearance > Menus >
   CSS Classes), not by item IDs, so the styles survive a menu export/import
   between sites (which gives every item a new ID):
     ga-tab-industries = Industries tab, ga-tab-solutions = Solutions tab,
     ga-home-security  = Home Security top-level item
   If one of those items is deleted and re-created, give it its class again.
   Selectors use li:is(.ga-tab-x, #ga-tab-x): the #id never exists, but it
   keeps ID-level specificity (as the old #mega-menu-item-NNNNN selectors
   had) so these rules still beat Max Mega Menu's own.

   Icons come from ga-icon-* CSS classes on the menu items (list near the
   bottom); the small line under each tab comes from its Description field.
   ========================================================================== */

/* Push menu onto new line */
#mega-menu-wrap-primary {
  clear: both;
}

@media (min-width: 991px) {
  /* ------------------------------------------------------------------------
     Top level: menu bar
     White bar, items aligned along the bottom so the links sit level with
     the second line of the phone buttons. The text links reach down to the
     bottom edge of the header, where their yellow hover bar sits; the phone
     buttons stop 10px above it (as on guardianalarm.com).
     ------------------------------------------------------------------------ */
  #mega-menu-wrap-primary,
  #mega-menu-wrap-primary #mega-menu-primary {
    background: transparent;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item {
    vertical-align: bottom;
    margin: 0;
  }
  /* ---- Text links (everything except the two phone buttons) ---- */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(.mega-menu-btn):not(.mega-menu-btn-outline) > a.mega-menu-link {
    position: relative !important; /* the hover bar is placed against this */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    padding: 9px 16px 19px; /* 19px = the usual 9px + the 10px space under the buttons */
    background: transparent;
    border: 0;
    font: 600 17px/1.25 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    color: var(--gmm-text);
    text-transform: none;
    letter-spacing: 0;
    /* yellow bar on hover / while open */
  }
  /* The yellow hover bar. Max Mega Menu's base stylesheet hides ::after on
     menu links (display: none), so every value here is set with !important. */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(.mega-menu-btn):not(.mega-menu-btn-outline) > a.mega-menu-link::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: 4px !important;
    margin: 0 !important;
    background: var(--gmm-accent) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scaleX(0) !important;
    transition: transform 0.2s ease !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(.mega-menu-btn):not(.mega-menu-btn-outline) > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(.mega-menu-btn):not(.mega-menu-btn-outline) > a.mega-menu-link:focus {
    background: transparent;
    color: var(--gmm-text);
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(.mega-menu-btn):not(.mega-menu-btn-outline) > a.mega-menu-link:hover::after, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(.mega-menu-btn):not(.mega-menu-btn-outline) > a.mega-menu-link:focus::after {
    transform: scaleX(1) !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(.mega-menu-btn):not(.mega-menu-btn-outline) > a.mega-menu-link {
    /* thin chevron instead of the solid triangle */
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(.mega-menu-btn):not(.mega-menu-btn-outline) > a.mega-menu-link > span.mega-indicator {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0 0 0 2px;
    line-height: 1;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(.mega-menu-btn):not(.mega-menu-btn-outline) > a.mega-menu-link > span.mega-indicator::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    margin: 0;
    border-right: 2px solid var(--gmm-text-soft);
    border-bottom: 2px solid var(--gmm-text-soft);
    transform: translateY(-3px) rotate(45deg);
    font-family: inherit;
    transition: transform 0.2s ease;
  }
  /* open state */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    background: transparent;
    color: var(--gmm-text);
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link::after {
    transform: scaleX(1) !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator::after {
    transform: translateY(1px) rotate(225deg);
  }
  /* ---- Phone buttons ---- */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn-outline,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn {
    margin-left: 18px;
    margin-bottom: 10px; /* space between the buttons and the bottom of the header */
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn-outline > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn > a.mega-menu-link {
    display: inline-block;
    min-width: 164px;
    height: auto;
    padding: 7px 20px;
    border: 2px solid var(--gmm-accent);
    border-radius: 999px; /* pill-shaped ends */
    background: var(--gmm-bg);
    font: 600 17px/1.25 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    color: var(--gmm-text);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
    transition: none;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn-outline > a.mega-menu-link::after,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn > a.mega-menu-link::after {
    display: none;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn-outline {
    margin-left: 14px;
  }
  /* Both buttons keep their exact look on hover and focus. The values are
     repeated with !important because Max Mega Menu's menu theme has its own
     hover styles for top-level items (font weight, border, background). */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn-outline > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn-outline > a.mega-menu-link:focus,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn > a.mega-menu-link:focus {
    border: 2px solid var(--gmm-accent) !important;
    font-weight: 600 !important;
    color: var(--gmm-text) !important;
    text-decoration: none !important;
  }
  /* Support (outline): no hover effect at all */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn-outline > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn-outline > a.mega-menu-link:focus {
    background: var(--gmm-bg) !important;
  }
  /* Sales (solid): no color change; grows slightly, as on guardianalarm.com
     (the theme's .btn hover: transform scale(1.1) over 0.3s) */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn > a.mega-menu-link {
    background: var(--gmm-accent);
    color: var(--gmm-on-accent) !important;
    transition: transform 0.3s;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-btn > a.mega-menu-link:focus {
    background: var(--gmm-accent) !important;
    color: var(--gmm-on-accent) !important;
    transform: scale(1.1);
  }
  /* ------------------------------------------------------------------------
     Panel shell: gray left column, white right side, soft shadow
     ------------------------------------------------------------------------ */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu {
    /* Wider than the nav, like the pen: up to 1200px, never wider than the
       window minus 16px each side. Anchored to the nav's right edge so it
       extends left across the header toward the logo. */
    width: min(1200px, 100vw - 32px) !important;
    left: auto !important;
    right: 0 !important;
    padding: 0;
    background: linear-gradient(90deg, var(--gmm-surface) 320px, var(--gmm-bg) 320px);
    box-shadow: 0 22px 48px -16px var(--gmm-shadow-strong), 0 2px 8px var(--gmm-shadow-soft);
    text-align: left;
    /* ---- Tabs (left column) ---- */
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item {
    float: none;
    position: static;
    width: 320px;
    padding: 0;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item:first-child {
    padding-top: 18px;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: auto;
    padding: 15px 22px 15px 84px; /* left room for the icon circle */
    background-color: transparent;
    border: 0;
    font: 700 18px/1.2 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    color: var(--gmm-text);
    text-align: left;
    text-transform: none;
    transition: background-color 0.15s ease, box-shadow 0.18s ease;
    /* the icon's circle is a background on the link and the icon itself is
       ::before (see "Icons" below), both in the left padding */
    background-repeat: no-repeat !important;
    background-size: 44px 44px !important;
    background-position: 26px center !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
    background-color: var(--gmm-surface-hover);
    color: var(--gmm-text);
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    /* right-pointing chevron */
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
    margin-left: auto;
    float: none;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link > span.mega-indicator::after {
    content: "";
    display: block;
    width: 7px;
    height: 7px;
    margin: 0;
    border-top: 2px solid var(--gmm-text-soft);
    border-right: 2px solid var(--gmm-text-soft);
    transform: rotate(45deg);
    font-family: inherit;
    transition: transform 0.15s ease, border-color 0.15s ease;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    /* "35 industries served" line, once you add item descriptions */
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link span.mega-description-group {
    display: flex;
    flex-direction: column;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link span.mega-menu-description {
    margin-top: 3px;
    font: 500 12.5px/1.3 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    color: var(--gmm-text-soft);
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item {
    /* active tab */
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link[aria-expanded=true] {
    background-color: var(--gmm-bg);
    box-shadow: inset 5px 0 0 var(--gmm-accent); /* yellow bar on the left */
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link > span.mega-indicator::after,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link[aria-expanded=true] > span.mega-indicator::after {
    border-color: var(--gmm-text);
    transform: translateX(3px) rotate(45deg);
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item {
    /* ---- Tab content (right side) ---- */
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu {
    position: absolute;
    top: 0;
    left: 320px;
    right: 0;
    width: auto;
    min-height: 100%;
    padding: 32px 40px 36px;
    background: var(--gmm-bg);
    box-sizing: border-box;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu li.mega-menu-row {
    margin-bottom: 30px;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu li.mega-menu-row:last-child {
    margin-bottom: 0;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu li.mega-menu-row > ul.mega-sub-menu {
    margin: 0 -20px;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu li.mega-menu-column {
    padding: 0 20px;
    /* the plugin sizes these at 1/6 of the column, which squeezed the
       links and broke words mid-way; make them fill their column */
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    float: none;
    width: 100% !important;
    padding: 0;
  }
  /* ------------------------------------------------------------------------
     Intro block ("The Leader in Business Security")
     A third item under Business Security, with CSS class ga-intro-item,
     swapped for HTML using Mega Menu Pro's Replacements. Sits directly
     under the tabs in the gray column instead of acting as a tab. The
     panel's height comes from Max Mega Menu, which sizes it to the
     tallest tab, so nothing is forced taller than it needs to be.
     ------------------------------------------------------------------------ */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item.ga-intro-item {
    position: relative;
    float: none;
    clear: both;
    width: 320px;
    margin: 8px 0 0;
    padding: 0 26px;
    box-sizing: border-box;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-intro-item .ga-intro {
    padding: 26px 0 30px;
    border-top: 1px solid var(--gmm-line-strong);
    text-align: center;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-intro-item .ga-intro__title {
    margin: 0 0 12px;
    font: 400 25px/1.25 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    color: var(--gmm-text);
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-intro-item .ga-intro__title strong {
    font-weight: 700;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-intro-item .ga-intro__text {
    margin: 0 0 22px;
    font: 400 14.5px/1.7 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    color: var(--gmm-text);
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-intro-item a.ga-btn {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 14px 12px;
    border-radius: 999px;
    background: var(--gmm-accent);
    font: 700 13px/1.2 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--gmm-on-accent);
    text-decoration: none;
    transition: background-color 0.15s ease;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-intro-item a.ga-btn:hover, #mega-menu-wrap-primary #mega-menu-primary li.ga-intro-item a.ga-btn:focus {
    background: var(--gmm-accent-hover);
    color: var(--gmm-on-accent);
  }
  /* ------------------------------------------------------------------------
     Industries: group headings with yellow rule + plain link lists
     ------------------------------------------------------------------------ */
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-industries, #ga-tab-industries) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    /* heading */
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-industries, #ga-tab-industries) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    display: flex;
    align-items: flex-end;
    min-height: calc(2.6em + 10px); /* keeps the yellow rules level when a heading wraps */
    margin: 0 0 8px;
    padding: 0 0 10px;
    border: 0;
    border-bottom: 2px solid var(--gmm-accent);
    background: transparent;
    font: 700 15.5px/1.3 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    color: var(--gmm-text);
    text-transform: none;
    cursor: default;
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-industries, #ga-tab-industries) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-industries, #ga-tab-industries) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
    background: transparent;
    color: var(--gmm-text);
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-industries, #ga-tab-industries) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
    display: none;
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-industries, #ga-tab-industries) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    /* links */
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-industries, #ga-tab-industries) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
    display: block;
    padding: 6px 0;
    background: transparent;
    font: 600 14px/1.35 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    color: var(--gmm-text);
    text-decoration: none;
    text-decoration-color: var(--gmm-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-industries, #ga-tab-industries) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-industries, #ga-tab-industries) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:focus {
    background: transparent;
    color: var(--gmm-text);
    text-decoration-line: underline;
  }
  /* ------------------------------------------------------------------------
     Solutions: bordered cards with a chevron
     ------------------------------------------------------------------------ */
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget) {
    margin-bottom: 12px;
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget) > a.mega-menu-link {
    display: flex;
    align-items: center;
    gap: 16px;
    /* !important: the plugin's own second-level link styles were
       overriding the padding, size and capitals */
    height: auto !important;
    min-height: 76px;
    padding: 14px 44px 14px 76px !important; /* room for icon circle (left) and chevron (right) */
    border: 1px solid var(--gmm-line);
    border-radius: 12px;
    background-color: var(--gmm-bg);
    font: 600 15px/1.3 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif !important;
    color: var(--gmm-text);
    text-transform: none !important;
    letter-spacing: 0 !important;
    text-decoration: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    /* circle = background on the link; icon = ::before; chevron = ::after
       (see "Icons" below) */
    position: relative !important;
    background-repeat: no-repeat !important;
    background-size: 46px 46px !important;
    background-position: 14px center !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget) > a.mega-menu-link:hover, #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget) > a.mega-menu-link:focus {
    border-color: var(--gmm-accent);
    background-color: var(--gmm-accent-wash);
    box-shadow: 0 4px 14px -6px var(--gmm-shadow-card);
    color: var(--gmm-text);
  }
  /* ---- "Not sure which solution fits?" strip (Custom HTML widget) ---- */
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.widget_custom_html > h4.mega-block-title {
    display: none;
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.widget_custom_html .textwidget {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    padding: 18px 22px;
    border-radius: 12px;
    background: var(--gmm-surface);
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.widget_custom_html p.ga-help__text {
    margin: 0;
    font: 500 14.5px/1.5 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    color: var(--gmm-text);
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.widget_custom_html p.ga-help__text strong {
    font-weight: 700;
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.widget_custom_html a.ga-help__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--gmm-accent);
    font: 700 15px/1 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    color: var(--gmm-on-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease;
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.widget_custom_html a.ga-help__phone:hover, #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.widget_custom_html a.ga-help__phone:focus {
    background: var(--gmm-accent-hover);
    color: var(--gmm-on-accent);
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.widget_custom_html a.ga-help__phone svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}
/* ==========================================================================
   Icons
   Add the class shown to the menu item's CSS Classes field
   (Appearance > Menus; tick "CSS Classes" under Screen Options if hidden).

   Each icon is a mask (a stencil) filled with the palette's text color, so
   icons follow the palette like everything else. The circle behind it is a
   background on the link. Max Mega Menu hides ::before / ::after on menu
   links, so the icon pseudo-elements are forced visible with !important.
   ========================================================================== */
@media (min-width: 991px) {
  /* ---- circles: palette colors ---- */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item[class*="ga-icon-"] > a.mega-menu-link {
    --gmm-circle: var(--gmm-bg);
    background-image: radial-gradient(circle closest-side, var(--gmm-circle) 95%, transparent 100%) !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item[class*="ga-icon-"].mega-toggle-on > a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item[class*="ga-icon-"] > a.mega-menu-link[aria-expanded=true] {
    --gmm-circle: var(--gmm-accent);
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget)[class*="ga-icon-"] > a.mega-menu-link {
    --gmm-circle: var(--gmm-accent-tint);
    background-image: radial-gradient(circle closest-side, var(--gmm-circle) 95%, transparent 100%) !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget)[class*="ga-icon-"] > a.mega-menu-link:hover,
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget)[class*="ga-icon-"] > a.mega-menu-link:focus {
    --gmm-circle: var(--gmm-accent);
  }

  /* ---- icons: masks filled with the text color ---- */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item[class*="ga-icon-"] > a.mega-menu-link::before,
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget)[class*="ga-icon-"] > a.mega-menu-link::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 37px !important;
    width: 22px !important;
    height: 22px !important;
    margin: -11px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--gmm-text) !important;
    -webkit-mask: var(--gmm-icon) center / contain no-repeat;
    mask: var(--gmm-icon) center / contain no-repeat;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget)[class*="ga-icon-"] > a.mega-menu-link::before {
    left: 25px !important;
    width: 24px !important;
    height: 24px !important;
    margin-top: -12px !important;
  }

  /* icons on an accent circle (active tab, hovered card) use the text-on-accent color */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item[class*="ga-icon-"].mega-toggle-on > a.mega-menu-link::before,
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item[class*="ga-icon-"] > a.mega-menu-link[aria-expanded=true]::before,
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget)[class*="ga-icon-"] > a.mega-menu-link:hover::before,
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget)[class*="ga-icon-"] > a.mega-menu-link:focus::before {
    background: var(--gmm-on-accent) !important;
  }

  /* ---- card chevron: mask filled with the soft text color ---- */
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget) > a.mega-menu-link::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    left: auto !important;
    width: 16px !important;
    height: 16px !important;
    margin: -8px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: var(--gmm-text-soft) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: transform 0.15s ease, background-color 0.15s ease !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget) > a.mega-menu-link:hover::after,
  #mega-menu-wrap-primary #mega-menu-primary li:is(.ga-tab-solutions, #ga-tab-solutions) li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item:not(.mega-menu-item-type-widget) > a.mega-menu-link:focus::after {
    background: var(--gmm-text) !important;
    transform: translateX(3px) !important;
  }

  /* ---- icon shapes, one per CSS class ----
     Solutions cards (Remote Video ... Business Analytics) use the filled
     Guardian icon set; the two tab icons are line drawings. Only the
     shape matters: the fill color comes from the mask rules above. */
  /* Industries tab: ga-icon-industries */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-icon-industries {
    --gmm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V5.5L13 3v18'/%3E%3Cpath d='M13 9h6v12'/%3E%3Cpath d='M8 7.5h2M8 11h2M8 14.5h2M16 12.5h1M16 16h1'/%3E%3C/svg%3E");
  }
  /* Solutions tab: ga-icon-solutions */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-icon-solutions {
    --gmm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5.2c0 4.4-2.9 8.2-7 9.8-4.1-1.6-7-5.4-7-9.8V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E");
  }
  /* Remote Video Monitoring: ga-icon-remote-video */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-icon-remote-video {
    --gmm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.32 -0.31 367.38 367.38' fill='black'%3E%3Cpath d='M175.03,218.29c.46,5.38,5.18,9.38,10.56,8.93l19.29-1.61c3.3-.28,6.08-2.16,7.63-4.82,21.78-2.91,38.08-8.68,48.9-13.71-14.85,37.35-44.22,62.76-78.03,62.76-48.81,0-88.37-52.94-88.37-118.26s39.56-118.26,88.37-118.26,88.35,52.94,88.35,118.26c0,13.66-1.73,26.8-4.93,39-7.11,4.41-25.77,14.25-55.91,18.29-1.96-1.92-4.71-3-7.65-2.76l-19.29,1.62c-5.38.44-9.37,5.18-8.93,10.56Z'%3E%3C/path%3E%3Cpath d='M319.69,132.29v49.08c0,6.51-5.27,11.78-11.78,11.78h-15.15c-6.5,0-11.78-5.27-11.78-11.78v-49.08c0-6.5,5.28-11.78,11.78-11.78h1.36c-3.57-56.7-51.87-101.74-110.75-101.74s-107.16,45.05-110.73,101.74h1.35c6.51,0,11.78,5.28,11.78,11.78v49.08c0,6.51-5.27,11.78-11.78,11.78h-15.15c-6.5,0-11.78-5.27-11.78-11.78v-49.08c0-6.5,5.28-11.78,11.78-11.78h1.76C64.18,57.19,117.88,6.75,183.37,6.75s119.2,50.44,122.78,113.76h1.76c6.51,0,11.78,5.28,11.78,11.78Z'%3E%3C/path%3E%3Cpath d='M311.04,314.84c-34.88,28.26-79.3,45.16-127.67,45.16s-92.76-16.9-127.65-45.16l72.84-45.01c19.62,22.73,54.82,20.26,54.82,20.26,0,0,35.16,2.47,54.8-20.26l72.84,45.01Z'%3E%3C/path%3E%3C/svg%3E");
  }
  /* Fire & Life Safety: ga-icon-fire */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-icon-fire {
    --gmm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.91 2.96 360.78 360.78' fill='black'%3E%3Cpath d='M290.5,164.8s22.7,32.9,22.7,83.7-70.8,108.3-70.8,108.3c0,0,34.5-49.6-12.9-96,0,0-1.9,33.1-27.3,33.1s-59.1-58.7-14.4-131.4c0,0-77.2,43.9-77.2,126.8s11,52.6,24.7,67.2c0,0-81.9-26.3-81.9-106.6s54.4-113.2,75.9-141.6c21.6-28.4,47.7-49.8,43.2-98.4,0,0,69.5,24.6,69.5,110.9,0,0-.4,18.2-7.4,32.8-7,14.6-8.1,46.6,24,46.6s31.8-35.4,31.8-35.4h0Z'%3E%3C/path%3E%3C/svg%3E");
  }
  /* Worker Safety: ga-icon-worker */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-icon-worker {
    --gmm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='28.23 29.52 210.13 210.13' fill='black'%3E%3Cpath d='M233.7,179.6s-2.7-8-5.4-12c0,0,0,0,0,0-2.7-4.6-6.2-8.7-10.2-12.4-4.6-4.3-7.2-9-8.5-15.1-1.3-6.2-4.2-12.1-5.7-18.3-6-23.7-18.3-42.3-41.1-52.8-.9-.4-1.8-1.1-2.5-1.9-14.7-14.4-33.2-18.8-51.2-12.3h-.2c-.6.2-2,.7-3.8,1.5-6.2,2.7-17.9,8.8-23.8,17.5-3.2,1.2-5.5,2.6-6.2,3-.2,0-.2.1-.2.1-11.8,7.5-19.6,18.3-25.1,31-5,11.4-7.9,23.3-9.1,35.7-.3,2.8-.7,5.2-3.7,6.8-1.7.9-3.2,2.8-4,4.7-.2.4-.3.8-.4,1.2-1.6,6,2.8,18.1,10.2,21.1,28.5,11.5,56.8,23.5,85.4,34.9,8.3,3.3,17.1,5.2,26.2,5,2.9-.2,5.9-.2,8.8-.8,14.8-3,29.7-5.9,44.4-9.3,5.7-1.3,11.3-3.3,16.5-5.9,8.5-4.4,11.7-12.3,9.6-21.7ZM68.5,175.9h0c-5.8-3.5-11-7.4-14-9.8-1.8-1.4-2.9-3.4-3.1-5.6-3-26.7,5.2-45.1,12.6-55.7,2.3-3.3,7.5-1.1,6.7,2.8-1.4,6.8-2.8,15.9-3.9,27-1.5,14.6,3,27.8,7.1,36.6,1.6,3.4-2.2,6.7-5.4,4.7ZM173.3,87.8h.1c14,23.1,21.7,49.6,25.9,81.1v.7c0,2.4-1.6,4.6-3.9,5.3-3.5,1.1-7.1-1.5-7.2-5.1-1.3-42.1-12.5-66.8-18-80.5-.8-2,2-3.3,3.1-1.5ZM97.2,72.3c-1.3-.4-1.7-2-.6-2.9h0c.2-.2.3-.3.4-.4.4-.3,1-.4,1.5-.3,3.8,1.2,7.1,2.6,9.8,4,1.6.6,3.1,1.3,4.5,2.3,2.5,1.7,4.6,3.7,6.5,5.9,0,0,.1,0,.1.2.9,1.1,1.8,2.3,2.6,3.5h0c1.9,2.9,3.5,5.9,4.9,9,4.8,10.1,8.1,20.8,10.6,31.6,1.5,6.3,2.6,12.7,3.7,19.1,1.1,6.8,2,13.6,2.9,20.5.4,3,.7,5.9,1.1,8.9l.9,7.1c.4,3.1-2,5.8-5.1,5.9-2.7,0-5.1-2-5.3-4.7l-1.7-16.9c-3.2-27.7-12.2-58.5-16.7-72.4-4.5-13.9-8.3-15-16-18.7-7.7-3.7-2.7-1.2-4.1-1.7ZM99.2,192c.3-1.3,1.6-2.1,2.9-1.9.8.2,1.5.3,2.3.5l3.5.6c.2,0,1.8.3,1.8.3,3,.5,6,.9,9.1,1.2,0,0,5.8.6,15.6.6s12.3-.2,20-.8c.7,0,1.5-.1,2.2-.2h1.1c12.4-1.2,24-3.9,35.4-7.6,8.7-2.9,14.2-8.9,17.6-16.8l2.9-6.6c.2-.4.8-.3.8.1.2,2.9.5,9.4-1.9,14.6-3.4,7-8.7,12.3-16.7,15-11.4,3.7-23,6.4-35.4,7.6h-1.1c-.7,0-1.5.2-2.2.2-7.7.6-10.2.8-20,.8s-15.6-.6-15.6-.6c-4.8-.4-9.5-1.1-14-2.1,0,0-4.8-1-6.2-1.5-.2,0-.4-.2-.7-.3-1.1-.5-1.8-1.8-1.4-3.1Z'%3E%3C/path%3E%3C/svg%3E");
  }
  /* Video Surveillance: ga-icon-surveillance */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-icon-surveillance {
    --gmm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='23.47 23.47 219.46 219.46' fill='black'%3E%3Cg%3E%3Cpath d='M171.14,124.67c7.66,1.81,15.63,2.53,23.32,4.13,5.79,1.21,9.87,5.54,7.29,11.68-1.86,4.44-5.91,5.28-10.26,4.66-9.5-1.37-19.42-4.4-28.94-6.04-1.93-.81-3.05-2.14-4.11-3.86-2.54-4.11-4.34-8.97-6.66-13.24-.2-.36-.49-1.15-.89-1.24l-5.05,24.28c4.98,5.34,9.88,10.77,14.86,16.1,2.82,3.02,10.25,9.58,11.46,13,1.36,3.86.64,7.47.62,11.3-.07,12.79-.14,25.63,0,38.42.02,1.64.45,3.29.31,5.12-.95,12.44-17.5,13.09-19.36,1.14l-.05-43.75-24.82-24.66c-1.78,8.73-2.9,17.6-4.66,26.34-.94,4.64-1.37,5.1-4.31,8.77-10.31,12.9-21.91,24.84-32.16,37.8-8.36,7-19.93-2.19-14.99-11.86l28.12-34.16c4.78-26.53,9.17-53.14,15.31-79.39l-.4-.68-7.68,4.55-14.22,27.3c-6.06,7.18-17.03,1.2-14.57-7.75,5.57-9.31,9.91-19.92,15.51-29.14,1.14-1.87,2.25-3.23,4.12-4.42,10.49-4.66,20.93-13.18,31.28-17.63,5.41-2.32,10.81-1.8,15.84,1.04,7.37,4.16,9.24,9.29,12.84,16.45,4.27,8.47,8.15,17.17,12.24,25.72Z'%3E%3C/path%3E%3Cpath d='M144.41,75.43c21.45,0,21.49-33.34,0-33.34s-21.49,33.34,0,33.34h0Z'%3E%3C/path%3E%3C/g%3E%3Cpolygon points='78.08 203.93 43.68 203.93 43.68 169.53 55.6 169.53 55.6 192.01 78.08 192.01 78.08 203.93'%3E%3C/polygon%3E%3Cpolygon points='55.6 62.09 43.68 62.09 43.68 27.69 78.08 27.69 78.08 39.61 55.6 39.61 55.6 62.09'%3E%3C/polygon%3E%3Cpolygon points='222.72 62.09 210.8 62.09 210.8 39.61 188.32 39.61 188.32 27.69 222.72 27.69 222.72 62.09'%3E%3C/polygon%3E%3Cpolygon points='222.72 203.93 188.32 203.93 188.32 192.01 210.8 192.01 210.8 169.53 222.72 169.53 222.72 203.93'%3E%3C/polygon%3E%3C/svg%3E");
  }
  /* Mobile Security Tower: ga-icon-tower */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-icon-tower {
    --gmm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='25.51 25.51 215.39 215.39' fill='black'%3E%3Cpath d='M93.39,140.28s48.81-34.91,48.81-61.82-21.9-48.81-48.81-48.81-48.81,21.9-48.81,48.81,48.81,61.82,48.81,61.82ZM93.39,58.71c10.91,0,19.75,8.84,19.75,19.75s-8.84,19.75-19.75,19.75-19.75-8.84-19.75-19.75,8.84-19.75,19.75-19.75Z'%3E%3C/path%3E%3Crect x='112.24' y='133.51' width='7.5' height='7'%3E%3C/rect%3E%3Crect x='94.07' y='175.3' width='14.55' height='7'%3E%3C/rect%3E%3Crect x='72.72' y='175.3' width='14.56' height='7'%3E%3C/rect%3E%3Cpath d='M46.84,184.72l-3.49-6.07c-4.9,2.81-8.77,7.24-10.9,12.47l6.48,2.64c1.54-3.79,4.35-7,7.91-9.04Z'%3E%3C/path%3E%3Cpath d='M126.53,133.51v7h.9c3.86,0,7.52,1.24,10.57,3.58l4.26-5.56c-4.29-3.28-9.41-5.02-14.83-5.02h-.9Z'%3E%3C/path%3E%3Cpath d='M37.58,200.69c0-.47,0-.94.05-1.4l-6.98-.53c-.05.64-.07,1.29-.07,1.94,0,5.03,1.47,9.91,4.26,14.08l5.82-3.89c-2.02-3.02-3.08-6.54-3.08-10.2Z'%3E%3C/path%3E%3Cpath d='M144.83,157.91c0,.6-.03,1.2-.1,1.8l6.97.71c.08-.83.13-1.68.13-2.51,0-4.89-1.44-9.6-4.16-13.63l-5.81,3.91c1.94,2.87,2.97,6.23,2.97,9.72Z'%3E%3C/path%3E%3Cpath d='M130.38,182.12l-.84-6.95c-.69.09-1.4.13-2.11.13h-12.02v7h12.02c.99,0,1.98-.06,2.95-.18Z'%3E%3C/path%3E%3Crect x='105.27' y='219.09' width='14.55' height='7'%3E%3C/rect%3E%3Cpath d='M40.14,220.56c4.48,3.57,9.88,5.48,15.62,5.53l.06-7c-4.16-.03-8.07-1.42-11.31-4.01l-4.37,5.48Z'%3E%3C/path%3E%3Crect x='83.92' y='219.09' width='14.55' height='7'%3E%3C/rect%3E%3Cpath d='M149.62,168.04l-6.36-2.91c-1.69,3.71-4.65,6.71-8.32,8.47l3.02,6.32c5.15-2.47,9.29-6.69,11.66-11.88Z'%3E%3C/path%3E%3Cpath d='M65.93,175.3h-9.96c-1.78,0-3.55.19-5.28.55l1.45,6.85c1.25-.27,2.54-.4,3.83-.4h9.96v-7Z'%3E%3C/path%3E%3Crect x='62.58' y='219.09' width='14.55' height='7'%3E%3C/rect%3E%3Crect x='126.7' y='219.09' width='7.5' height='7'%3E%3C/rect%3E%3Ccircle cx='183.16' cy='222.59' r='14.17'%3E%3C/circle%3E%3Cpolygon points='220.94 102.38 232.76 102.38 232.76 83.57 195.13 83.57 195.13 102.38 206.94 102.38 206.94 173.09 165.09 173.09 143.1 195.08 143.1 229.59 162.28 229.59 162.28 215.59 157.1 215.59 157.1 200.88 170.89 187.09 218.88 187.09 218.88 215.59 203.77 215.59 203.77 229.59 232.88 229.59 232.88 173.09 220.94 173.09 220.94 102.38'%3E%3C/polygon%3E%3Crect x='196.33' y='59.94' width='7' height='15' transform='translate(10.85 161.06) rotate(-45)'%3E%3C/rect%3E%3Crect x='220.55' y='63.94' width='15' height='7' transform='translate(19.11 181) rotate(-45)'%3E%3C/rect%3E%3Crect x='210.44' y='49.88' width='7' height='13.83'%3E%3C/rect%3E%3C/svg%3E");
  }
  /* Intrusion Alarms: ga-icon-intrusion */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-icon-intrusion {
    --gmm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.81 1.82 363.13 363.13' fill='black'%3E%3Cpath d='M212.58,187.07c3.86,0,7.11,2.89,7.57,6.73l12.06,102.47h-97.67l12.06-102.47c.45-3.84,3.7-6.73,7.57-6.73h58.41M212.58,171.53h-58.41c-11.75,0-21.63,8.79-23,20.46l-14.11,119.83h132.63l-14.11-119.83c-1.37-11.66-11.26-20.46-23-20.46h0Z'%3E%3C/path%3E%3Cpath d='M103.5,296.27h160.77c6.88,0,12.46,5.58,12.46,12.46v37.27H91.04v-37.27c0-6.88,5.58-12.46,12.46-12.46Z'%3E%3C/path%3E%3Cg%3E%3Cpath d='M183.37,138.33c-4.29,0-7.77-3.48-7.77-7.77V28.53c0-4.29,3.48-7.77,7.77-7.77s7.77,3.48,7.77,7.77v102.02c0,4.29-3.48,7.77-7.77,7.77Z'%3E%3C/path%3E%3Cpath d='M225.71,150.85c-1.52,0-3.06-.45-4.41-1.37-3.53-2.44-4.42-7.28-1.99-10.81l30.1-43.64c2.44-3.53,7.28-4.42,10.81-1.99,3.53,2.44,4.42,7.28,1.99,10.81l-30.1,43.64c-1.51,2.19-3.94,3.36-6.41,3.36Z'%3E%3C/path%3E%3Cpath d='M264.49,183.17c-2.58,0-5.1-1.28-6.58-3.62-2.29-3.63-1.21-8.43,2.42-10.72l85.7-54.14c3.63-2.29,8.43-1.21,10.72,2.42,2.29,3.63,1.21,8.43-2.42,10.72l-85.7,54.14c-1.29.81-2.72,1.2-4.14,1.2Z'%3E%3C/path%3E%3Cpath d='M322.36,228.62h-53.56c-4.29,0-7.77-3.48-7.77-7.77s3.48-7.77,7.77-7.77h53.56c4.29,0,7.77,3.48,7.77,7.77s-3.48,7.77-7.77,7.77Z'%3E%3C/path%3E%3C/g%3E%3Cg%3E%3Cpath d='M141.04,150.85c-2.47,0-4.9-1.17-6.41-3.36l-30.1-43.64c-2.44-3.53-1.55-8.37,1.99-10.81,3.53-2.44,8.37-1.55,10.81,1.99l30.1,43.64c2.44,3.53,1.55,8.37-1.99,10.81-1.35.93-2.88,1.37-4.41,1.37Z'%3E%3C/path%3E%3Cpath d='M102.26,183.17c-1.42,0-2.86-.39-4.14-1.2L12.41,127.83c-3.63-2.29-4.71-7.09-2.42-10.72,2.29-3.63,7.09-4.71,10.72-2.42l85.7,54.14c3.63,2.29,4.71,7.09,2.42,10.72-1.48,2.34-4,3.62-6.58,3.62Z'%3E%3C/path%3E%3Cpath d='M97.95,228.62h-53.56c-4.29,0-7.77-3.48-7.77-7.77s3.48-7.77,7.77-7.77h53.56c4.29,0,7.77,3.48,7.77,7.77s-3.48,7.77-7.77,7.77Z'%3E%3C/path%3E%3C/g%3E%3Cpath d='M211.1,287.12h-26.37c-4.29,0-7.77-3.48-7.77-7.77s3.48-7.77,7.77-7.77h17.75l-5.97-58.17h-11.78c-4.29,0-7.77-3.48-7.77-7.77s3.48-7.77,7.77-7.77h18.8c3.99,0,7.32,3.01,7.73,6.98l7.57,73.71c.22,2.19-.49,4.37-1.96,6-1.47,1.63-3.57,2.56-5.77,2.56Z'%3E%3C/path%3E%3C/svg%3E");
  }
  /* Access Control: ga-icon-access */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-icon-access {
    --gmm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='32.56 32.57 201.27 201.27' fill='black'%3E%3Cpolygon points='89.68 64.63 89.68 199 104.89 199 104.89 213 59.95 213 59.95 199 75.68 199 75.68 50.63 104.89 50.63 104.89 64.63 89.68 64.63'%3E%3C/polygon%3E%3Cpath d='M109.24,36.44v193.53l81.95-17.11V53.55l-81.95-17.11ZM128.08,148.87c0,2.03-1.66,3.69-3.69,3.69h-5.32v-5h4.01v-21.56h-4.01v-5h5.32c2.03,0,3.69,1.66,3.69,3.69v24.18Z'%3E%3C/path%3E%3Crect x='195.74' y='199' width='10.7' height='14'%3E%3C/rect%3E%3C/svg%3E");
  }
  /* Business Analytics: ga-icon-analytics */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-icon-analytics {
    --gmm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='5.42 5.37 255.77 255.77' fill='black'%3E%3Cpath d='M232.2,31.4c-14.2-1-26.6,9.7-27.6,23.9-.5,7.5,2.2,14.5,7,19.6l-22.6,40c-1.1-.2-2.3-.4-3.4-.5-9.8-.7-18.7,4.1-23.6,11.8l-43.6-11.7c-2.2-11.1-11.6-19.8-23.4-20.6-14.2-1-26.6,9.7-27.6,23.9-.5,6.6,1.6,12.9,5.4,17.8l-30.3,48.7c-1.4-.4-2.9-.6-4.5-.7-14.2-1-26.6,9.7-27.6,23.9s9.7,26.6,23.9,27.6c14.2,1,26.6-9.7,27.6-23.9.5-7.1-1.9-13.6-6.1-18.6l29.9-48.1c1.8.5,3.6.9,5.6,1,11.1.8,21.1-5.6,25.4-15.2l41.3,11.1c.6,12.9,10.7,23.6,23.9,24.6,14.2,1,26.6-9.7,27.6-23.9.5-7.4-2.1-14.4-6.8-19.4l22.6-40.1c1.1.2,2.2.4,3.3.5,14.2,1,26.6-9.7,27.6-23.9,1-14.2-9.7-26.6-23.9-27.6Z'%3E%3C/path%3E%3C/svg%3E");
  }
}

/* ==========================================================================
   Home Security panel (menu item with class ga-home-security): intro column + three image cards.
   Each column is a menu item whose content comes from Mega Menu Pro's
   Replacements (HTML):
     ga-hintro-item = the "Protect your home today" intro
     ga-hcard-item  = an image card (.ga-hcard)
   ========================================================================== */
@media (min-width: 991px) {
  /* panel: same size and position as the Business Security panel */
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:is(.ga-home-security, #ga-home-security) > ul.mega-sub-menu {
    width: min(1200px, calc(100vw - 32px)) !important;
    left: auto !important;
    right: 0 !important;
    padding: 28px 24px 32px !important;
    background: var(--gmm-bg) !important;
    box-shadow: 0 22px 48px -16px var(--gmm-shadow-strong), 0 2px 8px var(--gmm-shadow-soft);
    text-align: left;
    box-sizing: border-box;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:is(.ga-home-security, #ga-home-security) > ul.mega-sub-menu li.mega-menu-row > ul.mega-sub-menu {
    margin: 0 -41px;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:is(.ga-home-security, #ga-home-security) > ul.mega-sub-menu li.mega-menu-column {
    padding: 0 41px !important;
    box-sizing: border-box;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:is(.ga-home-security, #ga-home-security) > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
    float: none;
    width: 100% !important;
    padding: 0 !important;
  }

  /* ---- Intro column ---- */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hintro-item .ga-hintro {
    padding: 4px 0 0;
    text-align: left;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hintro-item .ga-hintro__title {
    margin: 0 0 17px;
    font: 400 26px/1.2 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    color: var(--gmm-text);
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hintro-item .ga-hintro__title strong {
    display: block;
    font-weight: 700;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hintro-item .ga-hintro__text {
    margin: 0 0 15px;
    font: 400 16.5px/1.575 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    color: var(--gmm-text);
  }
  /* the bold phrase starts on its own line, as in the design */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hintro-item .ga-hintro__text strong {
    display: block;
    font-weight: 700;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hintro-item a.ga-hintro__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 999px;
    background: var(--gmm-accent);
    font: 700 16px/1.2 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--gmm-on-accent);
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color .15s ease;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hintro-item a.ga-hintro__btn:hover,
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hintro-item a.ga-hintro__btn:focus {
    background: var(--gmm-accent-hover);
    color: var(--gmm-on-accent);
  }

  /* ---- Image cards ---- */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item a.ga-hcard {
    display: block;
    color: var(--gmm-text);
    text-decoration: none;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item .ga-hcard__media {
    position: relative;
    display: block;
    overflow: hidden;
  }
  /* the image is shown whole: its yellow bar and caption are part of the picture */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item .ga-hcard__media img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    transition: transform .3s ease;
  }
  /* the caption is already in the image, so it is kept for screen readers only */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item .ga-hcard__tag {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item .ga-hcard__title {
    display: block;
    margin: 27px 0 10px;
    font: 700 17px/1.25 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item .ga-hcard__text {
    display: block;
    font: 400 1rem/1.625 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item .ga-hcard__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 23px;
    font: 700 16px/1.2 "Guardian Montserrat", "Guardian Montserrat Fallback", "Montserrat", Arial, sans-serif;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration-color: var(--gmm-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
  /* small solid triangle after the call to action */
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item .ga-hcard__cta::after {
    content: "";
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 6px solid currentColor;
    transition: transform .15s ease;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item a.ga-hcard:hover .ga-hcard__media img,
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item a.ga-hcard:focus .ga-hcard__media img {
    transform: scale(1.04);
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item a.ga-hcard:hover .ga-hcard__cta,
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item a.ga-hcard:focus .ga-hcard__cta {
    text-decoration-line: underline;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item a.ga-hcard:hover .ga-hcard__cta::after,
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item a.ga-hcard:focus .ga-hcard__cta::after {
    transform: translateX(3px);
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item a.ga-hcard:focus-visible {
    outline: 2px solid var(--gmm-text);
    outline-offset: 4px;
  }
}

/* Narrower desktop screens: tighter Home Security panel */
@media (min-width: 991px) and (max-width: 1100px) {
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:is(.ga-home-security, #ga-home-security) > ul.mega-sub-menu {
    padding: 32px 28px 36px !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:is(.ga-home-security, #ga-home-security) > ul.mega-sub-menu li.mega-menu-row > ul.mega-sub-menu {
    margin: 0 -14px;
  }
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:is(.ga-home-security, #ga-home-security) > ul.mega-sub-menu li.mega-menu-column {
    padding: 0 14px !important;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hintro-item .ga-hintro__title {
    font-size: 23px;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hintro-item .ga-hintro__text {
    font-size: 15px;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item .ga-hcard__title {
    font-size: 16px;
  }
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item .ga-hcard__cta {
    font-size: 14.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item .ga-hcard__media img,
  #mega-menu-wrap-primary #mega-menu-primary li.ga-hcard-item .ga-hcard__cta::after,
  #mega-menu-wrap-primary #mega-menu-primary a.mega-menu-link,
  #mega-menu-wrap-primary #mega-menu-primary a.mega-menu-link::before,
  #mega-menu-wrap-primary #mega-menu-primary a.mega-menu-link::after,
  #mega-menu-wrap-primary #mega-menu-primary span.mega-indicator::after {
    transition: none !important;
  }
}