/**
 * Components.
 *
 * The interaction-state rules below are the hover, focus and active states for
 * every interactive element in the design, generated 1:1 from the approved V4
 * source so the theme reproduces it exactly. Each class is applied in the
 * matching template part.
 */

/* Site logo.
 *
 * the_custom_logo() emits the image at its full intrinsic size, so a logo
 * uploaded in Site Identity must be constrained here or it pushes the whole
 * header down the page. */
.custom-logo-link {
	display: flex;
	align-items: center;
	flex: none;
}

.custom-logo {
	display: block;
	width: auto;
	max-width: 220px;
	height: auto;
	max-height: 40px;
	object-fit: contain;
	flex: none;
}

/* A logo uploaded in Site Identity replaces the packaged wordmark rather than
   doubling up with it. */
.wp-custom-logo .nk-wordmark {
	display: none;
}

@media (max-width: 760px) {
	.custom-logo {
		height: 30px;
		max-width: 160px;
	}
}

/* Blocks that JS toggles: mega menus, tabs, dashboard screens, quotes, FAQ. */
[data-nk-menu-panel],
[data-nk-nav-panel],
[data-nk-tab-panel],
[data-nk-screen-panel],
[data-nk-quote-panel],
[data-nk-faq-panel] {
	display: contents;
}

[data-nk-menu-panel][hidden],
[data-nk-nav-panel][hidden],
[data-nk-tab-panel][hidden],
[data-nk-screen-panel][hidden],
[data-nk-quote-panel][hidden],
[data-nk-faq-panel][hidden] {
	display: none;
}

/* Viewport-gated regions: desktop nav vs. compact drawer trigger. */
[data-nk-vp-panel] {
	display: contents;
}

[data-nk-vp-panel][hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Interaction states (generated from the approved design)
 * ------------------------------------------------------------------------ */

.nk-i0:focus-visible{top: 16px; color: #fff}
.nk-i1:hover{background: rgba(26,26,28,.07); color: #1A1A1C}
.nk-i2:hover{background: rgba(26,26,28,.07); color: #1A1A1C}
.nk-i3:hover{background: rgba(26,26,28,.07); color: #1A1A1C}
.nk-i4:hover{background: rgba(26,26,28,.07)}
.nk-i5:hover{background: rgba(26,26,28,.07)}
.nk-i6:hover{background: rgba(26,26,28,.07)}
.nk-i7:hover{background: rgba(26,26,28,.07)}
.nk-i8:hover{background: rgba(26,26,28,.07)}
.nk-i9:hover{background: rgba(26,26,28,.07)}
.nk-i10:hover{border-color: #1A1A1C}
.nk-i11:hover{border-color: #1A1A1C; color: #1A1A1C}
.nk-i12:hover{background: #2E2E31; transform: translateY(-1px); color: #fff}
.nk-i13:hover{border-color: #1A1A1C; color: #1A1A1C}
.nk-i14:hover{background: rgba(26,26,28,.07); color: #1A1A1C}
.nk-i15:hover{background: #2E2E31; transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(26,26,28,.9); color: #fff}
.nk-i16:active{transform: translateY(0) scale(.98)}
.nk-i17:hover{background: #2E2E31; color: #fff}
.nk-i18:hover{background: #F5F5F6}
.nk-i19:hover{background: #F5F5F6}
.nk-i20:hover{background: #F5F5F6}
.nk-i21:hover{background: #F5F5F6}
.nk-i22:hover{background: #F5F5F6}
.nk-i23:hover{background: #F5F5F6}
.nk-i24:hover{color: #fff; border-color: #DA1A32}
.nk-i25:hover{background: #F5F5F6}
.nk-i26:hover{background: #F5F5F6}
.nk-i27:hover{background: #F5F5F6}
.nk-i28:hover{background: #F5F5F6}
.nk-i29:hover{background: #F5F5F6}
.nk-i30:hover{color: #DA1A32}
.nk-i31:hover{border-color: #C7D6D3; transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(14,14,15,.4)}
.nk-i32:hover{border-color: #C7D6D3; transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(14,14,15,.4)}
.nk-i33:hover{border-color: #C7D6D3; transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(14,14,15,.4)}
.nk-i34:hover{border-color: #C7D6D3; transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(14,14,15,.4)}
.nk-i35:hover{background: #B8152A; color: #fff; transform: translateY(-2px); box-shadow: 0 20px 40px -16px rgba(218,26,50,.8)}
.nk-i36:active{transform: translateY(0) scale(.985)}
.nk-i37:hover{border-color: #1A1A1C; background: #fff; transform: translateY(-2px); color: #141416}
.nk-i38:hover{background: #0E0E0F; transform: translateY(-2px); color: #fff}
.nk-i39:hover{background: #0E0E0F; transform: translateY(-2px); color: #fff}
.nk-i40:hover{background: #0E0E0F; transform: translateY(-2px); color: #fff}
.nk-i41:hover{color: #141416}
.nk-i42:hover{color: #141416}
.nk-i43:hover{color: #141416}
.nk-i44:hover{transform: translateY(-4px); box-shadow: 0 34px 60px -34px rgba(14,14,15,.8); color: #E6E6E8}
.nk-i45:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i46:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i47:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i48:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i49:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i50:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i51:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i52:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i53:hover{transform: translateY(-4px); box-shadow: 0 34px 60px -34px rgba(14,14,15,.8); color: #E6E6E8}
.nk-i54:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i55:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i56:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i57:hover{transform: translateY(-4px); box-shadow: 0 34px 60px -34px rgba(14,14,15,.8); color: #E6E6E8}
.nk-i58:hover{background: #1C1C1E}
.nk-i59:hover{background: #1C1C1E}
.nk-i60:hover{background: #1C1C1E}
.nk-i61:hover{background: #1C1C1E}
.nk-i62:hover{background: rgba(255,255,255,.13); color: #fff}
.nk-i63:hover{background: rgba(255,255,255,.13); color: #fff}
.nk-i64:hover{background: rgba(255,255,255,.13); color: #fff}
.nk-i65:hover{background: rgba(255,255,255,.13); color: #fff}
.nk-i66:hover{background: rgba(255,255,255,.13); color: #fff}
.nk-i67:hover{background: #2E2E31; transform: translateY(-2px); color: #fff}
.nk-i68:hover{transform: rotate(-6deg) translateY(-10px)}
.nk-i69:hover{transform: rotate(5deg) translateY(-10px)}
.nk-i70:hover{transform: rotate(-2deg) translateY(-10px)}
.nk-i71:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i72:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i73:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i74:hover{transform: translateY(-5px); border-color: #CFCFD1; box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45)}
.nk-i75:hover{background: #0E0E0F; transform: translateY(-2px); color: #fff}
.nk-i76:hover{background: #0E0E0F; transform: translateY(-2px); color: #fff}
.nk-i77:hover{background: #0E0E0F; transform: translateY(-2px); color: #fff}
.nk-i78:hover{background: #B4B4B6}
.nk-i79:hover{background: #B4B4B6}
.nk-i80:hover{background: #B4B4B6}
.nk-i81:hover{color: #DA1A32; border-color: #DA1A32}
.nk-i82:hover{color: #1A1A1C}
.nk-i83:hover{color: #1A1A1C}
.nk-i84:hover{color: #1A1A1C}
.nk-i85:hover{color: #1A1A1C}
.nk-i86:hover{color: #1A1A1C}
.nk-i87:hover{background: #B8152A; transform: translateY(-2px); color: #fff}
.nk-i88:active{transform: translateY(0) scale(.985)}
.nk-i89:hover{background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.5); transform: translateY(-2px); color: #fff}
.nk-i90:hover{background: #B8152A}
.nk-i91:hover{color: #fff}
.nk-i92:hover{color: #fff}
.nk-i93:hover{color: #fff}
.nk-i94:hover{color: #fff}
.nk-i95:hover{color: #fff}
.nk-i96:hover{color: #fff}
.nk-i97:hover{color: #fff}
.nk-i98:hover{color: #fff}
.nk-i99:hover{color: #fff}
.nk-i100:hover{color: #fff}
.nk-i101:hover{color: #fff}
.nk-i102:hover{color: #fff}
.nk-i103:hover{color: #fff}
.nk-i104:hover{color: #fff}
.nk-i105:hover{color: #fff}
.nk-i106:hover{color: #fff}
.nk-i107:hover{color: #fff}
.nk-i108:hover{color: #fff}
.nk-i109:hover{color: #fff}
.nk-i110:hover{color: #fff}
.nk-i111:hover{color: #fff}
.nk-i112:hover{color: #fff}
.nk-i113:hover{color: #fff}
.nk-i114:hover{border-color: rgba(255,255,255,.5); color: #fff}
.nk-i115:hover{border-color: rgba(255,255,255,.5); color: #fff}
.nk-i116:hover{border-color: rgba(255,255,255,.5); color: #fff}
.nk-i117:hover{border-color: #DA1A32; color: #fff}
.nk-i118:hover{border-color: #DA1A32; color: #fff}
.nk-i119:hover{border-color: #DA1A32; color: #fff}
.nk-i120:hover{border-color: #DA1A32; color: #fff}

/* Journey section: step cards (Experience the Complete Banking Journey). */
.nk-i201:hover,
.nk-i202:hover,
.nk-i203:hover,
.nk-i204:hover,
.nk-i205:hover,
.nk-i206:hover,
.nk-i207:hover,
.nk-i208:hover {
	transform: translateY(-5px);
	border-color: #CFCFD1;
	box-shadow: 0 1px 2px rgba(14,14,15,.05), 0 34px 56px -30px rgba(14,14,15,.45);
}