/* Existing header typography and colours are intentionally inherited. */
.uds-header-enhanced nav,
.uds-header-enhanced .elementor-nav-menu--main,
.uds-header-enhanced .elementor-nav-menu--dropdown {
    overflow: visible !important;
}

.uds-logo-wrap {
    display: block !important;
    width: clamp(150px, 13vw, 195px) !important;
    max-width: 195px !important;
    height: auto !important;
    overflow: visible !important;
    line-height: 0 !important;
}

img.uds-white-logo {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    transform: none !important;
}

.uds-expertise-host {
    position: relative !important;
    overflow: visible !important;
}

.uds-expertise-trigger {
    text-transform: uppercase !important;
}

.uds-expertise-menu {
    position: absolute !important;
    z-index: 99999 !important;
    top: calc(100% + 20px) !important;
    left: 50% !important;
    display: block !important;
    width: 240px !important;
    min-width: 240px !important;
    margin: 0 !important;
    padding: 8px 0 !important;
    list-style: none !important;
    background: rgba(9, 10, 10, .94) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    box-shadow: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, 8px) !important;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease !important;
    backdrop-filter: blur(18px);
}

.uds-expertise-menu::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 21px;
}

.uds-expertise-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.uds-expertise-menu a {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 12px 16px !important;
    border: 0 !important;
    background: transparent !important;
    color: rgba(245, 245, 241, .72) !important;
    font-family: inherit !important;
    font-size: .68rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    transition: color .2s ease, background .2s ease !important;
}

.uds-expertise-menu a:hover,
.uds-expertise-menu a:focus-visible {
    color: #f5f5f1 !important;
    background: rgba(255, 255, 255, .055) !important;
}

.uds-expertise-host:hover > .uds-expertise-menu,
.uds-expertise-host:focus-within > .uds-expertise-menu,
.uds-expertise-host.uds-open > .uds-expertise-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) !important;
}

@media (max-width: 1024px) {
    .uds-header-enhanced a,
    .uds-header-enhanced button {
        text-transform: uppercase !important;
    }

    .uds-expertise-host {
        display: block !important;
        width: 100% !important;
    }

    .uds-logo-wrap {
        width: 128px !important;
        max-width: 128px !important;
    }

    .uds-expertise-menu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: grid !important;
        grid-template-rows: 0fr !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
        transform: none !important;
        transition: grid-template-rows .28s ease !important;
        backdrop-filter: none;
    }

    .uds-expertise-menu > .uds-expertise-inner {
        min-height: 0;
        overflow: hidden;
    }

    .uds-expertise-host.uds-open > .uds-expertise-menu {
        grid-template-rows: 1fr !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    .uds-expertise-menu a {
        padding: 9px 0 9px 14px !important;
        border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
        color: rgba(245, 245, 241, .64) !important;
        font-size: .62rem !important;
        line-height: 1.45 !important;
        letter-spacing: .10em !important;
    }

    .uds-native-dropdown-menu a {
        font-size: .62rem !important;
        line-height: 1.45 !important;
        letter-spacing: .10em !important;
    }

    /* Native theme dropdowns (e.g. "Capabilities") are usually shown via
       :hover, which touchscreens can't reliably trigger. Force them into
       a tap-to-open accordion on mobile instead. */
    .uds-native-dropdown-host {
        position: relative !important;
    }

    .uds-native-dropdown-menu {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
        transform: none !important;
        box-shadow: none !important;
        transition: max-height .28s ease !important;
    }

    .uds-native-dropdown-host.uds-open > .uds-native-dropdown-menu {
        max-height: 1200px !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 600px) {
    .uds-logo-wrap {
        width: 118px !important;
        max-width: 118px !important;
    }
}

@media (max-width: 600px) {
    .uds-expertise-menu a,
    .uds-native-dropdown-menu a {
        font-size: .59rem !important;
        letter-spacing: .095em !important;
    }
}

/* =========================================================
   v1.0.16 — STANDARD RESPONSIVE HEADER
   One mobile/off-canvas structure for every width <=1180px.
   Desktop (>1180px) is untouched.
   ========================================================= */
@media (max-width: 1180px) {

    /* Prevent the squeezed "mini desktop" header seen on tablet /
       narrow laptop widths. Always use the same hamburger structure. */
    .site-header {
        grid-template-columns: 1fr auto !important;
    }

    .site-header .desktop-nav,
    .site-header .header-cta {
        display: none !important;
    }

    .site-header .menu-button {
        display: block !important;
    }

    .mobile-nav.open {
        display: block !important;
    }

    /* Same drawer geometry at every responsive width. */
    .mobile-nav {
        position: fixed !important;
        inset: 0 !important;
        z-index: 80 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding:
            clamp(94px, 11vh, 116px)
            clamp(20px, 5vw, 54px)
            max(30px, env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        background: #0b0c0c !important;
    }

    .mobile-menu {
        width: 100% !important;
        max-width: 760px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-menu > li {
        margin: 0 !important;
        border-bottom: 1px solid #292a29 !important;
    }

    /* Main items: Expertise / Capabilities / Projects / About.
       Deliberately smaller and consistent instead of scaling into
       several different sizes at different responsive widths. */
    .mobile-menu > li > a {
        display: block !important;
        padding: 15px 46px 15px 0 !important;
        font-size: clamp(1rem, 1.6vw, 1.08rem) !important;
        font-weight: 400 !important;
        line-height: 1.22 !important;
        letter-spacing: -.015em !important;
        text-transform: uppercase !important;
    }

    .mobile-submenu-toggle {
        top: 3px !important;
        width: 42px !important;
        height: 42px !important;
    }

    /* Expertise submenu generated by Header Enhancement.
       Increase these labels from the tiny v1.0.9 mobile values. */
    .mobile-nav .uds-expertise-host {
        display: block !important;
        width: 100% !important;
    }

    .mobile-nav .uds-expertise-menu {
        position: static !important;
        inset: auto !important;
        display: grid !important;
        grid-template-rows: 0fr !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
        transform: none !important;
        transition: grid-template-rows .28s ease !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .mobile-nav .uds-expertise-menu > .uds-expertise-inner {
        min-height: 0 !important;
        overflow: hidden !important;
    }

    .mobile-nav .uds-expertise-host.uds-open > .uds-expertise-menu {
        grid-template-rows: 1fr !important;
        pointer-events: auto !important;
    }

    .mobile-nav .uds-expertise-menu a {
        padding: 10px 0 10px 14px !important;
        border-bottom: 1px solid rgba(255,255,255,.06) !important;
        color: rgba(245,245,241,.68) !important;
        font-size: .80rem !important;
        font-weight: 400 !important;
        line-height: 1.42 !important;
        letter-spacing: .075em !important;
        text-transform: uppercase !important;
        white-space: normal !important;
    }

    /* Same sizing for any native submenu in the responsive drawer. */
    .mobile-nav .mobile-menu .sub-menu a,
    .mobile-nav .uds-native-dropdown-menu a {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        font-size: .80rem !important;
        line-height: 1.42 !important;
        letter-spacing: .075em !important;
        text-transform: uppercase !important;
    }

    .mobile-nav .uds-native-dropdown-host {
        position: relative !important;
    }

    .mobile-nav .uds-native-dropdown-menu {
        position: static !important;
        display: block !important;
        width: 100% !important;
        max-height: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;
        transform: none !important;
        box-shadow: none !important;
        transition: max-height .28s ease !important;
    }

    .mobile-nav .uds-native-dropdown-host.uds-open > .uds-native-dropdown-menu {
        max-height: 1200px !important;
        pointer-events: auto !important;
    }

    /* CTA stays visually subordinate to the four main navigation items. */
    .mobile-nav .mobile-cta {
        margin-top: clamp(28px, 6vh, 54px) !important;
        padding: 14px 15px !important;
        font-size: .68rem !important;
        line-height: 1.35 !important;
        letter-spacing: .12em !important;
    }
}

/* Narrow mobile: keep the SAME structure; only tighten type slightly.
   No new navigation layout or alternate pattern. */
@media (max-width: 600px) {
    .mobile-nav {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .mobile-menu > li > a {
        font-size: .98rem !important;
        padding-top: 14px !important;
        padding-bottom: 14px !important;
    }

    .mobile-nav .uds-expertise-menu a,
    .mobile-nav .mobile-menu .sub-menu a,
    .mobile-nav .uds-native-dropdown-menu a {
        font-size: .78rem !important;
        letter-spacing: .07em !important;
    }
}

/* v1.0.17 — breathing space below logo/header in hamburger layouts only. */
@media (min-width: 601px) and (max-width: 1180px) {
    .mobile-nav .mobile-menu {
        margin-top: 24px !important;
    }
}

@media (max-width: 600px) {
    .mobile-nav .mobile-menu {
        margin-top: 24px !important;
    }
}



/* v1.0.18 — slightly larger logo on responsive screens only.
   Desktop/main/wide-screen logo remains unchanged. */
@media (max-width: 1180px) {
    .site-header .brand-logo {
        width: 165px !important;
    }
    .site-header .brand-logo .custom-logo,
    .site-header .brand-logo img,
    .uds-logo-wrap {
        max-width: 165px !important;
    }
}

@media (max-width: 600px) {
    .site-header .brand-logo {
        width: 160px !important;
    }
    .site-header .brand-logo .custom-logo,
    .site-header .brand-logo img,
    .uds-logo-wrap {
        max-width: 160px !important;
    }
}

/* v1.0.19 — align responsive menu text with the visible left edge
   of the Unidecors logo on tablet/small responsive screens only.
   Mobile <=600px remains unchanged. */
@media (min-width: 601px) and (max-width: 1180px) {
    .mobile-nav {
        padding-left: calc(clamp(20px, 4vw, 72px) + 2px) !important;
        padding-right: clamp(20px, 4vw, 72px) !important;
    }
}



/* v1.0.21 — equal responsive breathing space.
   Use the same 24px gap:
   header → Expertise,
   About → Discuss a project,
   Discuss a project → bottom of drawer.
   Mobile + tablet only; desktop unchanged. */
@media (max-width: 1180px) {
    .mobile-nav .mobile-cta {
        margin-top: 24px !important;
    }

    .mobile-nav {
        padding-bottom: max(24px, env(safe-area-inset-bottom)) !important;
    }
}


/* v1.0.22 — mobile/tablet only:
   no gap between header area and first Expertise item.
   Other responsive spacing remains unchanged. */
@media (max-width: 1180px) {
    .mobile-nav .mobile-menu {
        margin-top: 0 !important;
    }
}


/* v1.0.23 — mobile/tablet only:
   remove the REAL visible gap between the header/logo and Expertise.
   The previous menu margin was already zero; the remaining space came from
   the drawer's top padding. Keep all side/bottom spacing and item styling unchanged. */
@media (max-width: 1180px) {
    .mobile-nav {
        padding-top: 72px !important;
    }

    .mobile-nav .mobile-menu {
        margin-top: 0 !important;
    }
}

/* =========================================================
   v1.0.28 — CURRENT PAGE LINE
   Preserve the theme's existing white hover underline exactly.
   The active desktop item uses that same ::before track in lime.
   ========================================================= */
@media (min-width: 1181px) {
    .site-header .desktop-menu > li > a.uds-current-page::before {
        right: 0 !important;
        background: #D6FF52 !important;
    }

    /* The active item is excluded from the normal white hover state because
       it is the very same pseudo-element and its lime background is fixed. */
    .site-header .desktop-menu > li:hover > a.uds-current-page::before,
    .site-header .desktop-menu > li:focus-within > a.uds-current-page::before {
        right: 0 !important;
        background: #D6FF52 !important;
    }
}


/* v1.0.32 — position the existing desktop underline just below the nav text
   with a small breathing gap. White hover and active lime share the same track. */
@media (min-width: 1181px) {
    .site-header .desktop-menu > li > a::before {
        bottom: 3px !important;
    }
}