/* ============================================================
   AFX — Site Chrome (header + footer + mega menu)
   Loaded site-wide. Restyles the existing Elementor header/footer
   to the dark brand without touching their structure.
   ============================================================ */

:root {
    --afx-bg:           rgb(34, 38, 37);
    --afx-bg-deep:      rgb(20, 22, 22);
    --afx-surface:      rgb(28, 32, 31);
    --afx-surface-2:    rgb(40, 44, 43);
    --afx-fg:           #ffffff;
    --afx-muted:        #b0b0b0;
    --afx-dim:          #6a6a6a;
    --afx-border:       rgb(48, 52, 51);
    --afx-border-strong:rgb(72, 76, 75);
    --afx-accent:       #2FE6FF;
    --afx-accent-fg:    rgb(20, 22, 22);
}

/* ════════════════════════════════════════════════════════════
   HEADER — dark, sticky, transparent over home hero
   ════════════════════════════════════════════════════════════ */

/* The header element — non-sticky, transparent by default across the entire site */
#masthead,
[data-elementor-type="header"],
.site-header,
header.site-header,
.ast-above-header,
.ast-above-header-bar,
.main-header-bar,
.ast-primary-header,
.ast-primary-header-bar,
.ast-below-header,
.ast-below-header-bar {
    background-color: transparent !important;
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
    position: relative !important;
    z-index: 1000;
}

/* Top accent line — a thin gradient "light ray" along the top edge.
   Subtly animates left↔right so it feels like light moving across glass. */
#masthead::before,
[data-elementor-type="header"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(47, 230, 255, 0.15) 25%,
        rgba(47, 230, 255, 0.7) 50%,
        rgba(47, 230, 255, 0.15) 75%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: afx-light-ray 8s ease-in-out infinite;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
}
@keyframes afx-light-ray {
    0%, 100% { background-position: 0% 0; }
    50% { background-position: 100% 0; }
}

/* Transparent header EVERYWHERE — same gradient on every page for uniformity.
   Strong enough opacity + backdrop blur so nav stays readable over any background
   (dark catalogue, light portfolio, photo heroes etc.). Header does NOT stick.  */
[data-elementor-type="header"],
#masthead {
    background: linear-gradient(to bottom, rgba(20, 22, 22, 0.85) 0%, rgba(20, 22, 22, 0.55) 60%, rgba(20, 22, 22, 0.2) 100%) !important;
    backdrop-filter: blur(10px) saturate(110%);
    -webkit-backdrop-filter: blur(10px) saturate(110%);
}

/* ════════════════════════════════════════════════════════════
   NAV LINKS — refined uppercase typography + animated underline
   ════════════════════════════════════════════════════════════ */

/* Top-level nav items — tight enough to fit on one row, still readable */
#masthead > nav .menu-item > a,
#masthead .elementor-nav-menu > li > a,
[data-elementor-type="header"] .elementor-nav-menu > li > a,
[data-elementor-type="header"] .uael-nav-menu > li > a {
    position: relative;
    color: var(--afx-fg) !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 14px 11px !important;
    white-space: nowrap !important;
    transition: color 0.25s ease, text-shadow 0.35s ease !important;
}

/* Prevent the nav container from wrapping items onto a second line */
[data-elementor-type="header"] .elementor-nav-menu,
[data-elementor-type="header"] ul.elementor-nav-menu {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
}

/* Give the nav column more room (and the logo column less) */
[data-elementor-type="header"] .elementor-column:has(.elementor-widget-nav-menu) {
    flex: 1 1 auto !important;
    max-width: none !important;
}
[data-elementor-type="header"] .elementor-column:has(.elementor-widget-image) {
    flex: 0 0 auto !important;
    width: auto !important;
}

/* Vertically centre everything in the header so the nav lines up with the logo's middle */
[data-elementor-type="header"] .elementor-column,
[data-elementor-type="header"] .elementor-column-wrap,
[data-elementor-type="header"] .elementor-widget-wrap {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-content: center !important;
}
[data-elementor-type="header"] .elementor-widget {
    width: 100%;
    align-self: center !important;
}
/* Vertical centring + tighter header — give the nav widget BOTH top and bottom padding
   so it stays centred but doesn't push the header taller than necessary. */
[data-elementor-type="header"] .elementor-widget-nav-menu,
[data-elementor-type="header"] .elementor-widget-image {
    margin: 0 !important;
}
[data-elementor-type="header"] .elementor-widget-nav-menu {
    padding-top: 22px !important;
    padding-bottom: 0 !important;
}
[data-elementor-type="header"] .elementor-widget-image {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Shrink the header section itself — kill any min-height that's making it taller than
   its content. */
[data-elementor-type="header"] .elementor-top-section,
[data-elementor-type="header"] .elementor-section.elementor-section-height-default {
    min-height: 0 !important;
    height: auto !important;
}

/* Hover + active = cyan (no text-shadow glow — kept clean) */
#masthead .elementor-nav-menu > li > a:hover,
[data-elementor-type="header"] .elementor-nav-menu > li > a:hover,
[data-elementor-type="header"] .elementor-nav-menu > li.current-menu-item > a,
[data-elementor-type="header"] .menu-item.current-menu-item > a,
[data-elementor-type="header"] .elementor-item-active {
    color: var(--afx-accent) !important;
}

/* Animated underline — expands from centre on hover, persistent on active */
[data-elementor-type="header"] .elementor-nav-menu > li > a::after,
[data-elementor-type="header"] .menu-item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1.5px;
    background: var(--afx-accent);
    box-shadow: 0 0 8px rgba(47, 230, 255, 0.6);
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-elementor-type="header"] .elementor-nav-menu > li > a:hover::after,
[data-elementor-type="header"] .menu-item:hover > a::after,
[data-elementor-type="header"] .menu-item.current-menu-item > a::after,
[data-elementor-type="header"] .elementor-item-active::after {
    width: calc(100% - 8px);
    left: 4px;
}

/* Logo — constrain to the intended Elementor template size (325px wide).
   The Elementor CSS file that normally enforces this isn't always loaded on staging
   after cache splits, so we enforce it directly here. */
[data-elementor-type="header"] .elementor-widget-image,
[data-elementor-type="header"] .elementor-widget-image a {
    display: inline-block;
    max-width: 325px;
    transition: transform 0.4s ease, filter 0.4s ease;
}
[data-elementor-type="header"] .elementor-widget-image img {
    max-width: 325px !important;
    width: 100% !important;
    height: auto !important;
    display: block;
}
[data-elementor-type="header"] .elementor-widget-image a:hover {
    transform: translateX(2px);
    filter: drop-shadow(0 0 12px rgba(47, 230, 255, 0.4));
}

/* ════════════════════════════════════════════════════════════
   BODY BACKGROUND — keep the whole site on one consistent
   brand colour so we don't get two-tone "boxed" rendering from
   Astra's separate-container layout.
   ════════════════════════════════════════════════════════════ */
body,
body.ast-separate-container,
.ast-separate-container,
.ast-separate-container .ast-article-single,
.ast-separate-container .ast-article-post,
.ast-separate-container .site-content,
.ast-separate-container .site-content > .ast-container { background-color: rgb(34, 38, 37) !important; }

/* Hamburger / mobile toggle */
#masthead .elementor-menu-toggle,
#masthead .ast-mobile-menu-buttons-icon,
#masthead .menu-toggle,
[data-elementor-type="header"] .elementor-menu-toggle,
[data-elementor-type="header"] .ast-mobile-menu-buttons-icon,
[data-elementor-type="header"] .menu-toggle { color: var(--afx-fg) !important; }
[data-elementor-type="header"] .elementor-menu-toggle:hover { color: var(--afx-accent) !important; }

/* ════════════════════════════════════════════════════════════
   MOBILE MENU — popup/drawer styling
   Site uses Elementor popup ID 15500 as the mobile menu container.
   Style its contents to match the dark brand.
   ════════════════════════════════════════════════════════════ */

/* The popup overlay backdrop */
.elementor-popup-modal,
.dialog-widget.dialog-lightbox-widget,
[data-elementor-id="15500"] {
    background: rgba(0, 0, 0, 0.85) !important;
}

/* The popup content panel itself — use site dark grey, not the deeper near-black */
.elementor-popup-modal .dialog-message,
.elementor-popup-modal .dialog-widget-content,
.elementor-popup-modal .elementor-section,
.elementor-popup-modal .elementor-column,
[data-elementor-id="15500"] .dialog-widget-content,
[data-elementor-id="15500"] .dialog-message,
[data-elementor-id="15500"] .elementor-section,
[data-elementor-id="15500"] .elementor-column {
    background: rgb(34, 38, 37) !important;  /* --afx-bg, matches the rest of the site */
    color: var(--afx-fg) !important;
    border: none !important;
}

/* Kill the huge 100px top padding the template adds to its column */
[data-elementor-id="15500"] .elementor-column,
[data-elementor-id="15500"] .elementor-column > .elementor-widget-wrap,
.elementor-popup-modal [data-elementor-id="15500"] .elementor-column {
    padding: 0 !important;
}
/* Section + dialog also reset to zero */
[data-elementor-id="15500"] .elementor-section,
[data-elementor-id="15500"] .elementor-top-section,
[data-elementor-id="15500"] .dialog-widget-content,
[data-elementor-id="15500"] .dialog-message {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

/* HIDE BOTH custom icon widgets inside the popup template.
   Template has: (1) empty icon link, (2) close × icon. We use Elementor's
   built-in .dialog-close-button instead — those two are duplicates. */
[data-elementor-id="15500"] .elementor-element-2a42bf65,
[data-elementor-id="15500"] .elementor-element-76eee39,
[data-elementor-id="15500"] .elementor-widget-icon,
.elementor-popup-modal [data-elementor-id="15500"] .elementor-widget-icon {
    display: none !important;
}

/* Close button (×) — smaller, sits cleanly above the search bar */
.elementor-popup-modal .dialog-close-button,
[data-elementor-id="15500"] .dialog-close-button {
    color: var(--afx-fg) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    top: 16px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.8 !important;
    z-index: 100 !important;
    background: transparent !important;
    border: 1px solid var(--afx-border) !important;
    border-radius: 50% !important;
    cursor: pointer;
    transition: transform 0.3s, color 0.2s, opacity 0.2s, border-color 0.2s !important;
}
.elementor-popup-modal .dialog-close-button svg,
[data-elementor-id="15500"] .dialog-close-button svg {
    width: 14px !important;
    height: 14px !important;
}
.elementor-popup-modal .dialog-close-button:hover,
[data-elementor-id="15500"] .dialog-close-button:hover {
    color: var(--afx-accent) !important;
    border-color: var(--afx-accent) !important;
    opacity: 1 !important;
    transform: rotate(90deg);
}

/* Search bar in popup — sit at the top with small clearance from the close button */
[data-elementor-id="15500"] .elementor-widget-search-form {
    margin: 16px 16px 0 !important;
    padding: 0 !important;
}

/* Search bar inside popup — cover Elementor search widget + raw inputs */
.elementor-popup-modal input[type="search"],
.elementor-popup-modal input[type="text"],
.elementor-popup-modal .elementor-search-form__input,
.elementor-popup-modal .search-form input,
[data-elementor-id="15500"] input[type="search"],
[data-elementor-id="15500"] input[type="text"],
[data-elementor-id="15500"] .elementor-search-form__input,
[data-elementor-id="15500"] .search-form input,
[data-elementor-id="15500"] form input {
    background: var(--afx-surface) !important;
    border: 1px solid var(--afx-border-strong) !important;
    color: var(--afx-fg) !important;
    border-radius: 0 !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
    width: 100% !important;
    box-shadow: none !important;
    outline: none !important;
}
.elementor-popup-modal input[type="search"]::placeholder,
.elementor-popup-modal .elementor-search-form__input::placeholder,
[data-elementor-id="15500"] input[type="search"]::placeholder,
[data-elementor-id="15500"] .elementor-search-form__input::placeholder { color: var(--afx-muted) !important; }

/* Search form container + submit button */
[data-elementor-id="15500"] .elementor-search-form,
[data-elementor-id="15500"] .elementor-search-form__container {
    background: var(--afx-surface) !important;
    border: 1px solid var(--afx-border-strong) !important;
    border-radius: 0 !important;
    overflow: hidden;
}
[data-elementor-id="15500"] .elementor-search-form__container input { border: none !important; background: transparent !important; }
[data-elementor-id="15500"] .elementor-search-form__submit,
[data-elementor-id="15500"] button[type="submit"] {
    background: transparent !important;
    color: var(--afx-fg) !important;
    border: none !important;
    padding: 0 16px !important;
}
[data-elementor-id="15500"] .elementor-search-form__submit:hover,
[data-elementor-id="15500"] button[type="submit"]:hover { color: var(--afx-accent) !important; }

/* Entrance animation — popup fades in + slides down (Elementor default may be disabled) */
@keyframes afx-popup-fade-in {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
.dialog-widget.dialog-lightbox-widget[data-elementor-id="15500"] .dialog-widget-content,
.elementor-popup-modal[data-elementor-id="15500"] .dialog-widget-content,
[data-elementor-id="15500"].dialog-widget-content,
[data-elementor-id="15500"] > .dialog-widget-content,
[data-elementor-id="15500"] .elementor {
    animation: afx-popup-fade-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
/* Also animate the backdrop */
@keyframes afx-popup-backdrop {
    from { opacity: 0; }
    to { opacity: 1; }
}
.dialog-widget[data-elementor-id="15500"],
.elementor-popup-modal[data-elementor-id="15500"] {
    animation: afx-popup-backdrop 0.3s ease forwards;
}

/* Mobile menu — apply to BOTH top-level (.uael-menu-item) AND nested (.uael-sub-menu-item)
   anchors. Also catches wrapped-in-div items like <div class="uael-has-submenu-container">. */
.elementor-popup-modal .uael-menu-item,
.elementor-popup-modal .uael-sub-menu-item,
.elementor-popup-modal .elementor-nav-menu li > a,
.elementor-popup-modal .menu-item > a,
.elementor-popup-modal .menu-item .uael-has-submenu-container > a,
[data-elementor-id="15500"] .uael-menu-item,
[data-elementor-id="15500"] .uael-sub-menu-item,
[data-elementor-id="15500"] .elementor-nav-menu li > a,
[data-elementor-id="15500"] .menu-item > a,
[data-elementor-id="15500"] .menu-item .uael-has-submenu-container > a {
    color: var(--afx-fg) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 20px 32px !important;
    border-bottom: 1px solid var(--afx-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: transparent !important;
    transition: color 0.2s, background 0.2s, padding-left 0.25s !important;
}
.elementor-popup-modal .uael-menu-item:hover,
.elementor-popup-modal .uael-sub-menu-item:hover,
[data-elementor-id="15500"] .uael-menu-item:hover,
[data-elementor-id="15500"] .uael-sub-menu-item:hover {
    color: var(--afx-accent) !important;
    background: rgba(47, 230, 255, 0.06) !important;
    padding-left: 44px !important;
}

/* Mobile sub-menu — indented + smaller font. Higher specificity than the base rule above. */
.elementor-popup-modal .sub-menu .uael-sub-menu-item,
.elementor-popup-modal .sub-menu .uael-menu-item,
.elementor-popup-modal .sub-menu .uael-has-submenu-container > a,
.elementor-popup-modal .sub-menu a.elementor-sub-item,
.elementor-popup-modal .sub-menu li > a,
[data-elementor-id="15500"] .sub-menu .uael-sub-menu-item,
[data-elementor-id="15500"] .sub-menu .uael-menu-item,
[data-elementor-id="15500"] .sub-menu .uael-has-submenu-container > a,
[data-elementor-id="15500"] .sub-menu a.elementor-sub-item,
[data-elementor-id="15500"] .sub-menu li > a {
    font-size: 13px !important;
    padding: 16px 32px 16px 56px !important;
    color: var(--afx-muted) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    letter-spacing: 1px !important;
}
.elementor-popup-modal .sub-menu .uael-sub-menu-item:hover,
.elementor-popup-modal .sub-menu .uael-menu-item:hover,
[data-elementor-id="15500"] .sub-menu .uael-sub-menu-item:hover,
[data-elementor-id="15500"] .sub-menu .uael-menu-item:hover {
    color: var(--afx-accent) !important;
    padding-left: 64px !important;
}
/* Deeper-nested sub-sub-menu items get more indent */
.elementor-popup-modal .sub-menu .sub-menu .uael-sub-menu-item,
.elementor-popup-modal .sub-menu .sub-menu .uael-menu-item,
.elementor-popup-modal .sub-menu .sub-menu a,
[data-elementor-id="15500"] .sub-menu .sub-menu .uael-sub-menu-item,
[data-elementor-id="15500"] .sub-menu .sub-menu .uael-menu-item,
[data-elementor-id="15500"] .sub-menu .sub-menu a {
    font-size: 12px !important;
    padding-left: 80px !important;
    color: var(--afx-dim) !important;
}

/* Mobile dropdown toggle (+) — UAEL adds `.uael-menu-toggle.sub-arrow` to items with children */
.elementor-popup-modal .uael-menu-toggle,
.elementor-popup-modal .sub-arrow,
[data-elementor-id="15500"] .uael-menu-toggle,
[data-elementor-id="15500"] .sub-arrow {
    color: var(--afx-fg) !important;
    background: transparent !important;
    border: 1px solid var(--afx-border) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
}
/* Replace the FontAwesome icon with a clean CSS + indicator */
.elementor-popup-modal .uael-menu-toggle i,
.elementor-popup-modal .sub-arrow i,
[data-elementor-id="15500"] .uael-menu-toggle i,
[data-elementor-id="15500"] .sub-arrow i { display: none !important; }
.elementor-popup-modal .uael-menu-toggle::before,
.elementor-popup-modal .sub-arrow::before,
[data-elementor-id="15500"] .uael-menu-toggle::before,
[data-elementor-id="15500"] .sub-arrow::before {
    content: '+';
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    color: var(--afx-fg);
    transition: transform 0.25s ease;
}
/* When the parent menu item is OPEN (sub-menu visible), flip + to − (minus).
   JS toggles .afx-menu-open class on the parent LI when its toggle is clicked.
   IMPORTANT: use direct-child combinators (>) so nested children's toggles don't
   inherit the open state from their grandparent. */
.elementor-popup-modal li.afx-menu-open > .uael-has-submenu-container > a > .uael-menu-toggle::before,
.elementor-popup-modal li.afx-menu-open > a > .uael-menu-toggle::before,
.elementor-popup-modal li.afx-menu-open > .uael-menu-item > .uael-menu-toggle::before,
[data-elementor-id="15500"] li.afx-menu-open > .uael-has-submenu-container > a > .uael-menu-toggle::before,
[data-elementor-id="15500"] li.afx-menu-open > a > .uael-menu-toggle::before,
[data-elementor-id="15500"] li.afx-menu-open > .uael-menu-item > .uael-menu-toggle::before {
    content: '−' !important;
    color: var(--afx-accent);
}

/* Add some breathing room around the mobile menu content */
[data-elementor-id="15500"] .elementor-section,
[data-elementor-id="15500"] .elementor-column {
    padding: 0 !important;
}
[data-elementor-id="15500"] > .elementor {
    padding-top: 60px !important;
}

/* ════════════════════════════════════════════════════════════
   MEGA MENU — dropdown content rendered by [afx_mega_menu]
   Lives inside an Elementor template hosted as a sub-menu / dropdown
   ════════════════════════════════════════════════════════════ */

/* All top-level dropdown arrows — force them visible white on the dark header */
#masthead .ast-arrow-svg,
#masthead .ast-arrow-svg path,
[data-elementor-type="header"] .ast-arrow-svg,
[data-elementor-type="header"] .ast-arrow-svg path,
.elementor-nav-menu .ast-arrow-svg,
.elementor-nav-menu .ast-arrow-svg path {
    fill: var(--afx-fg) !important;
    transition: fill 0.25s ease, transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#masthead .menu-item:hover .ast-arrow-svg path,
[data-elementor-type="header"] .menu-item:hover .ast-arrow-svg path,
.elementor-nav-menu .menu-item:hover .ast-arrow-svg path {
    fill: var(--afx-accent) !important;
}

/* Mega menu trigger — Astra hides the dropdown arrow when there's no <ul.sub-menu>,
   but my JS removes the sub-menu to inject the mega menu. Force the arrow visible. */
.afx-mm-trigger { position: relative; }
.afx-mm-trigger > a .dropdown-menu-toggle,
.afx-mm-trigger > a .ast-header-navigation-arrow,
.afx-mm-trigger > a .ast-icon {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 4px !important;
    pointer-events: none;
}
.afx-mm-trigger > a .ast-arrow-svg {
    display: inline-block !important;
    width: 12px !important;
    height: auto !important;
}
.afx-mm-trigger.is-open .ast-arrow-svg,
.afx-mm-trigger:hover .ast-arrow-svg { transform: rotate(180deg); }

/* Full-width mega menu panel — fixed under the header, viewport-wide */
.afx-mm-wrap {
    position: fixed;
    top: var(--afx-header-h, 80px);
    left: 0;
    right: 0;
    width: 100vw;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    z-index: 1500;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.afx-mm-trigger.is-open .afx-mm-wrap,
.afx-mm-trigger:hover .afx-mm-wrap {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.afx-mm {
    font-family: 'Poppins', sans-serif;
    color: var(--afx-fg);
    background: var(--afx-bg-deep);
    padding: 20px 64px 24px;
    width: 100%;
    border-top: 1px solid var(--afx-border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
.afx-mm-inner {
    display: grid;
    grid-template-columns: 3fr 2fr;  /* a bit more room for the applications column */
    gap: 56px;
    max-width: 1680px;
    margin: 0 auto;
}

.afx-mm * { box-sizing: border-box; }

.afx-mm-heading {
    /* Match the style of standard dropdown items — Poppins, uppercase, 12px, 1.2px tracking */
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--afx-fg);
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--afx-border);
}

/* Brand grid (2 columns × 2 rows for 4 brands) — biggest possible images */
.afx-mm-brand-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 32px;
    max-width: 720px;  /* keeps each tile to a sensible size on very wide viewports */
}
.afx-mm-brand {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    color: var(--afx-fg) !important;
    transition: transform 0.2s;
}
.afx-mm-brand:hover { transform: translateY(-3px); }
.afx-mm-brand-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid var(--afx-border);
    background: var(--afx-surface);
    transition: border-color 0.2s;
    margin-bottom: 12px;
}
.afx-mm-brand:hover .afx-mm-brand-image { border-color: var(--afx-accent); }
.afx-mm-brand-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s;
}
.afx-mm-brand:hover .afx-mm-brand-image img { transform: scale(1.06); }
.afx-mm-brand-name {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--afx-fg) !important;
}
.afx-mm-brand:hover .afx-mm-brand-name { color: var(--afx-accent) !important; }

/* Applications list — flat <a> elements (no <li>) so theme list-styling can't hide them.
   2 columns. Names allowed to wrap onto 2 lines for long entries like "Luxury Yachts and Cruise Ships". */
.afx-mm-app-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
}
.afx-mm-app-item {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 11px 0 !important;
    color: var(--afx-fg) !important;
    text-decoration: none !important;
    font-size: 13px;
    border-bottom: 1px solid var(--afx-border);
    transition: color 0.15s, padding 0.15s;
    min-width: 0;  /* let flex shrink properly so long names don't overflow */
}
.afx-mm-app-item:hover {
    color: var(--afx-accent) !important;
    padding-left: 6px !important;
}
.afx-mm-app-name {
    font-weight: 500;
    min-width: 0;
    line-height: 1.3;
    /* Wrap long names onto 2 lines max */
    overflow-wrap: break-word;
}
.afx-mm-app-count {
    color: var(--afx-dim);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;  /* never let the count get pushed off */
    padding-left: 4px;
}

/* Foot link */
.afx-mm-foot {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--afx-border);
    text-align: right;
}
.afx-mm-all {
    color: var(--afx-accent) !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.afx-mm-all:hover { color: var(--afx-fg) !important; }

/* Strip the default Elementor/Astra dropdown chrome — the mega menu template provides its own bg */
.elementor-section-wrap > .elementor-section .elementor-widget-shortcode > .elementor-widget-container { padding: 0 !important; }

/* ════════════════════════════════════════════════════════════
   STANDARD DROPDOWNS (About us, Technical Support, etc.)
   Restyle to match the dark brand — without these, the theme's
   default white-on-white dropdowns are invisible.
   ════════════════════════════════════════════════════════════ */

/* UNIFIED DROPDOWNS — same opening position, animation, and backdrop as the mega menu,
   but standard (non-mega) dropdowns stay narrow (just wide enough for their items).
   JS sets `left` dynamically to position each dropdown under its parent menu item. */
[data-elementor-type="header"] .menu-item-has-children > .sub-menu,
.elementor-nav-menu .menu-item-has-children > .sub-menu {
    display: block !important;
    position: fixed !important;
    top: var(--afx-header-h, 80px) !important;
    /* left set by JS — fallback to 0 */
    left: 0;
    right: auto !important;
    width: auto !important;
    min-width: 260px !important;
    max-width: 360px !important;
    margin: 0 !important;
    background: var(--afx-bg-deep) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--afx-border) !important;
    border-top: 2px solid var(--afx-accent) !important;
    border-radius: 0 !important;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(47, 230, 255, 0.04) !important;
    padding: 12px 0 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
    pointer-events: none;
    z-index: 1500;
}
/* Reveal dropdown on hover — identical timing to the mega menu */
.elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu,
.elementor-nav-menu > li.menu-item-has-children:focus-within > .sub-menu,
[data-elementor-type="header"] .menu-item-has-children:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s !important;
}

/* Items inside a standard (non-mega) sub-menu — back to full-width within their narrow panel */
[data-elementor-type="header"] .menu-item-has-children > .sub-menu > li {
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box;
}
/* When the sub-menu is the mega menu wrap, hide the auto-generated sub-menu (mega menu replaces it) */
[data-elementor-type="header"] .afx-mm-trigger > .sub-menu { display: none !important; }
/* Reveal dropdown on hover/focus of the parent menu item */
.elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu,
.elementor-nav-menu > li.menu-item-has-children:focus-within > .sub-menu,
[data-elementor-type="header"] .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Submenu list items — start hidden + offset, then staggered cascade in */
.elementor-nav-menu .sub-menu > li,
[data-elementor-type="header"] .sub-menu > li {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu > li,
[data-elementor-type="header"] .menu-item-has-children:hover > .sub-menu > li {
    opacity: 1;
    transform: translateX(0);
}
.elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu > li:nth-child(1) { transition-delay: 0.04s; }
.elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu > li:nth-child(2) { transition-delay: 0.07s; }
.elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu > li:nth-child(3) { transition-delay: 0.10s; }
.elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu > li:nth-child(4) { transition-delay: 0.13s; }
.elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu > li:nth-child(5) { transition-delay: 0.16s; }
.elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu > li:nth-child(6) { transition-delay: 0.19s; }
.elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu > li:nth-child(7) { transition-delay: 0.22s; }
.elementor-nav-menu > li.menu-item-has-children:hover > .sub-menu > li:nth-child(n+8) { transition-delay: 0.25s; }

/* Submenu links — refined typography with generous padding.
   Use flex so any inline arrow stays aligned to the right (instead of wrapping). */
[data-elementor-type="header"] .sub-menu a,
.elementor-nav-menu .sub-menu a,
.elementor-nav-menu .sub-menu .elementor-sub-item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    padding: 13px 26px !important;
    color: var(--afx-fg) !important;
    background: transparent !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    border: none !important;
    transition: background 0.2s ease, color 0.2s ease, padding 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
}
[data-elementor-type="header"] .sub-menu a::before,
.elementor-nav-menu .sub-menu a::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 8px;
    height: 1.5px;
    background: var(--afx-accent);
    box-shadow: 0 0 6px rgba(47, 230, 255, 0.6);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-elementor-type="header"] .sub-menu a:hover,
.elementor-nav-menu .sub-menu a:hover,
.elementor-nav-menu .sub-menu .elementor-sub-item:hover {
    background: linear-gradient(90deg, rgba(47, 230, 255, 0.08) 0%, transparent 60%) !important;
    color: var(--afx-accent) !important;
    padding-left: 32px !important;
}
[data-elementor-type="header"] .sub-menu a:hover::before,
.elementor-nav-menu .sub-menu a:hover::before {
    transform: translateY(-50%) scaleX(1);
}

/* Active sub-item */
[data-elementor-type="header"] .sub-menu .current-menu-item > a,
.elementor-nav-menu .sub-menu .current-menu-item > a { color: var(--afx-accent) !important; }

/* Sub-sub-menu (3rd level) — to the right */
[data-elementor-type="header"] .sub-menu .sub-menu,
.elementor-nav-menu .sub-menu .sub-menu {
    top: 0 !important;
    left: 100% !important;
    margin-left: 1px !important;
}

/* Suppress all child-item dropdown indicators inside sub-menus.
   Belt + braces: hide every flavour of arrow the theme/SmartMenus/FontAwesome inject. */
[data-elementor-type="header"] .sub-menu .ast-header-navigation-arrow,
[data-elementor-type="header"] .sub-menu .dropdown-menu-toggle,
[data-elementor-type="header"] .sub-menu .ast-icon,
[data-elementor-type="header"] .sub-menu .ast-icon-arrow,
[data-elementor-type="header"] .sub-menu .icon-arrow,
[data-elementor-type="header"] .sub-menu .ast-arrow-svg,
[data-elementor-type="header"] .sub-menu .sub-arrow,
[data-elementor-type="header"] .sub-menu .sub-arrow i,
[data-elementor-type="header"] .sub-menu i.fas,
[data-elementor-type="header"] .sub-menu i.fa-caret-down,
[data-elementor-type="header"] .sub-menu i.fa-caret-right,
.elementor-nav-menu .sub-menu .ast-arrow-svg,
.elementor-nav-menu .sub-menu .dropdown-menu-toggle,
.elementor-nav-menu .sub-menu .ast-header-navigation-arrow,
.elementor-nav-menu .sub-menu .sub-arrow {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
}
/* Also kill any ::after pseudo-arrow some themes inject */
[data-elementor-type="header"] .sub-menu a::after,
.elementor-nav-menu .sub-menu a::after { display: none !important; content: none !important; }

/* ════════════════════════════════════════════════════════════
   FOOTER — creative dark restyle
   - Cyan light-ray accent at top edge (matches header)
   - Subtle radial-gradient depth + grid-line texture
   - Massive "TECHNICIANS OF LIGHT" ghost watermark
   - Refined typography, animated link interactions, social glow
   ════════════════════════════════════════════════════════════ */

footer,
footer.site-footer,
.site-footer,
[data-elementor-type="footer"] {
    background: var(--afx-bg-deep) !important;
    color: var(--afx-fg) !important;
    position: relative;
    overflow: hidden !important;
    padding-top: 60px !important;  /* Breathing room at the top */
}

/* Subtle ambient gradient — cyan glow from bottom-right corner, like a distant light source */
[data-elementor-type="footer"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 1200px 600px at 85% 100%, rgba(47, 230, 255, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse 800px 400px at 15% 0%, rgba(47, 230, 255, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}
/* Faint top light-ray accent removed at user's request */

[data-elementor-type="footer"] > * { position: relative; z-index: 1; }
[data-elementor-type="footer"] .elementor-section { background: transparent !important; }

/* Headings — refined Poppins matching the menu system */
[data-elementor-type="footer"] .elementor-heading-title,
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4 {
    color: var(--afx-fg) !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    position: relative;
    padding-bottom: 14px !important;
    margin-bottom: 20px !important;
}
/* Cyan accent line under each heading */
[data-elementor-type="footer"] .elementor-heading-title::after,
.site-footer h1::after, .site-footer h2::after,
.site-footer h3::after, .site-footer h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--afx-accent);
    box-shadow: 0 0 12px rgba(47, 230, 255, 0.5);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Heading accent line extends on hover — scope to the widget that wraps THE heading,
   not the entire column (which contains all the headings in the footer). */
[data-elementor-type="footer"] .elementor-widget:hover > .elementor-widget-container > .elementor-heading-title::after,
[data-elementor-type="footer"] .elementor-widget-heading:hover .elementor-heading-title::after { width: 40px; }

/* Footer body text — all white as requested */
[data-elementor-type="footer"] p,
[data-elementor-type="footer"] li,
[data-elementor-type="footer"] span,
[data-elementor-type="footer"] div,
[data-elementor-type="footer"] .elementor-icon-list-text,
.site-footer p,
.site-footer span,
.site-footer li {
    color: var(--afx-fg) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.7 !important;
}

/* Footer links — refined with sliding cyan accent on hover */
[data-elementor-type="footer"] a,
.site-footer a {
    color: var(--afx-fg) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    font-size: 13px !important;
}
[data-elementor-type="footer"] a:hover,
.site-footer a:hover {
    color: var(--afx-accent) !important;
    padding-left: 12px !important;
}
/* Sliding cyan tick mark on hover (same as sub-menu items) */
[data-elementor-type="footer"] .elementor-icon-list-item a::before,
[data-elementor-type="footer"] li a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 1.5px;
    background: var(--afx-accent);
    box-shadow: 0 0 6px rgba(47, 230, 255, 0.6);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-elementor-type="footer"] .elementor-icon-list-item a:hover::before,
[data-elementor-type="footer"] li a:hover::before { transform: translateY(-50%) scaleX(1); }

/* Address + contact info — white text */
[data-elementor-type="footer"] .elementor-icon-list-text { color: var(--afx-fg) !important; transition: color 0.2s; }
[data-elementor-type="footer"] .elementor-icon-list-item:hover .elementor-icon-list-text { color: var(--afx-accent) !important; }
[data-elementor-type="footer"] .elementor-icon-list-icon { color: var(--afx-accent) !important; }
[data-elementor-type="footer"] .elementor-icon-list-icon svg { fill: var(--afx-accent) !important; }

/* Social icons — refined hover state with cyan glow + rotation */
[data-elementor-type="footer"] .elementor-social-icon,
[data-elementor-type="footer"] .elementor-icon {
    color: var(--afx-fg) !important;
    background: transparent !important;
    border: 1px solid var(--afx-border) !important;
    border-radius: 50% !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
[data-elementor-type="footer"] .elementor-social-icon:hover,
[data-elementor-type="footer"] .elementor-icon:hover {
    color: var(--afx-accent) !important;
    border-color: var(--afx-accent) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 0 24px rgba(47, 230, 255, 0.35);
}
[data-elementor-type="footer"] .elementor-social-icon svg { fill: currentColor !important; transition: transform 0.3s; }
[data-elementor-type="footer"] .elementor-social-icon:hover svg { transform: scale(1.1) rotate(-5deg); }

/* Bottom copyright bar — no divider */
[data-elementor-type="footer"] .elementor-section:last-child {
    border-top: none !important;
}
/* Bottom row text — uniform size, all white */
[data-elementor-type="footer"] .elementor-section:last-child,
[data-elementor-type="footer"] .elementor-section:last-child p,
[data-elementor-type="footer"] .elementor-section:last-child span,
[data-elementor-type="footer"] .elementor-section:last-child a {
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    color: var(--afx-fg) !important;
    font-weight: 400 !important;
}

/* Accreditation images (BSI, ISO, TM66 badges) — shrink them so they're not dominating */
[data-elementor-type="footer"] .elementor-section:last-child .elementor-widget-image img,
[data-elementor-type="footer"] .elementor-widget-image img[src*="bsi"],
[data-elementor-type="footer"] .elementor-widget-image img[src*="iso"],
[data-elementor-type="footer"] .elementor-widget-image img[src*="tm66"],
[data-elementor-type="footer"] .elementor-widget-image img[src*="circular"],
[data-elementor-type="footer"] .elementor-widget-image img[src*="UKAS"] {
    max-width: 96px !important;
    height: auto !important;
}

/* GIANT GHOST WATERMARK — "TECHNICIANS OF LIGHT" peeking from bottom edge.
   Pure decoration — adds drama without affecting the footer's actual content. */
[data-elementor-type="footer"] > .elementor:first-child::before,
[data-elementor-type="footer"]:has(.elementor) .elementor:first-child::before {
    content: 'TECHNICIANS OF LIGHT';
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(80px, 14vw, 220px);
    font-weight: 400;
    letter-spacing: -2px;
    color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.04);
    text-stroke: 1px rgba(255, 255, 255, 0.04);
    pointer-events: none;
    z-index: 0;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
}

/* Brand / Category list shortcodes — match dropdown style with tick mark */
.afx-footer-list {
    list-style: none;
    padding: 0 !important;
    margin: 0 !important;
}
.afx-footer-list li {
    margin: 0 0 4px !important;
    list-style: none;
    background: none;
}
.afx-footer-list a {
    font-size: 13px !important;
    color: var(--afx-fg) !important;
    transition: color 0.2s ease, padding-left 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-block;
    padding: 4px 0 4px 0 !important;
    position: relative;
}
.afx-footer-list a:hover {
    color: var(--afx-accent) !important;
    padding-left: 12px !important;
}
.afx-footer-list a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 1.5px;
    background: var(--afx-accent);
    box-shadow: 0 0 6px rgba(47, 230, 255, 0.6);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.afx-footer-list a:hover::before { transform: translateY(-50%) scaleX(1); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════
   MOBILE FOOTER — tighter heading → content gap
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    [data-elementor-type="footer"] .elementor-heading-title {
        margin-bottom: 10px !important;
        padding-bottom: 8px !important;
    }
    /* Reduce vertical spacing between widgets in each column */
    [data-elementor-type="footer"] .elementor-widget:not(:last-child) {
        margin-bottom: 16px !important;
    }
    /* Tighten the column padding so columns stack closer */
    [data-elementor-type="footer"] .elementor-column {
        padding-bottom: 0 !important;
        margin-bottom: 24px !important;
    }
    /* Trim text-block widget margin to remove the gap before contact details */
    [data-elementor-type="footer"] .elementor-widget-text-editor,
    [data-elementor-type="footer"] .elementor-widget-icon-list {
        margin-bottom: 0 !important;
    }
    [data-elementor-type="footer"] .elementor-widget-text-editor p,
    [data-elementor-type="footer"] .elementor-widget-icon-list li {
        margin-bottom: 4px !important;
    }
}

/* ════════════════════════════════════════════════════════════
   MOBILE HEADER — keep logo + hamburger side-by-side
   ════════════════════════════════════════════════════════════ */
@media (max-width: 921px) {
    /* Force the header's container to row layout (Elementor stacks on mobile by default) */
    [data-elementor-type="header"] .elementor-top-section > .elementor-container,
    [data-elementor-type="header"] .elementor-section > .elementor-container {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
    }
    /* Logo column shrinks to fit its content (no longer full-width) */
    [data-elementor-type="header"] .elementor-column:has(.elementor-widget-image) {
        flex: 1 1 auto !important;
        width: auto !important;
        max-width: none !important;
    }
    /* Nav column (which contains the hamburger) — fixed width on right */
    [data-elementor-type="header"] .elementor-column:has(.elementor-widget-icon) {
        flex: 0 0 auto !important;
        width: auto !important;
    }
    /* Show the hamburger icon on mobile (Elementor hides it via class hide-mobile but we want it) */
    [data-elementor-type="header"] .elementor-widget-icon {
        display: flex !important;
    }
    /* Shrink logo a touch on mobile so it doesn't crowd the hamburger */
    [data-elementor-type="header"] .elementor-widget-image img {
        max-width: 220px !important;
    }
    /* Hamburger icon — make sure it's right-aligned and sized for touch */
    [data-elementor-type="header"] .elementor-widget-icon .elementor-icon {
        font-size: 24px !important;
        padding: 8px !important;
        color: var(--afx-fg) !important;
    }
}

@media (max-width: 1024px) {
    .afx-mm { padding: 32px 24px; }
    .afx-mm-inner { grid-template-columns: 1fr; gap: 32px; }
    .afx-mm-brand-grid { grid-template-columns: repeat(3, 1fr); }
    .afx-mm-app-list { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .afx-mm-brand-grid { grid-template-columns: repeat(2, 1fr); }
}