/* =============================================================================
   NAI-STYLE OVERLAY MENU  —  rebuilt from the original naisigns.com theme
   Colours, easings and structure taken from the real compiled stylesheet.
   Everything is scoped under .nai-root so it can't leak into your theme or
   collide with Elementor.
   ============================================================================= */

.nai-root {
	/* --- Brand (from the real stylesheet) --- */
	--nai-red:            #d1422a;          /* bg-red */
	--nai-orange:         #f47042;          /* hover accent */
	--nai-white:          #ffffff;

	/* --- Type ---
	   The real site uses Adobe Fonts: 'salo-variable' (compressed display) and
	   'cartograph-cf' (mono). Those need an Adobe kit. The free stand-ins below
	   get very close. If you have the Adobe kit loaded, just swap the names. */
	--nai-display-font:   "Anton", "Oswald", "Arial Narrow", sans-serif;
	--nai-mono-font:      "Overpass Mono", ui-monospace, SFMono-Regular, monospace;

	/* --- Easings (verbatim from the theme) --- */
	--ease-theme:         cubic-bezier(.23, 1, .32, 1);
	--ease-out-quart:     cubic-bezier(.165, .84, .44, 1);
	--ease-in-out-quart:  cubic-bezier(.77, 0, .175, 1);

	/* --- Tunables --- */
	--nai-notch:          3rem;             /* panel notch (theme: --notch-size:3rem) */
	--nai-panel-speed:    .7s;

	/* Wrapper: fixed top-right, sits above the page (theme: fixed top-0 right-0 z-50) */
	position: fixed;
	top: 0;
	right: 0;
	z-index: 50;
	font-family: var(--nai-display-font);
	color: var(--nai-white);
}
.nai-root *,
.nai-root *::before,
.nai-root *::after { box-sizing: border-box; }

/* =============================================================================
   1. TOGGLE BUTTON  —  hamburger on a red notched square (theme: .js-menu__toggle)
   ============================================================================= */
.nai-root .js-menu__toggle {
	position: relative;
	z-index: 20;                            /* stays above the open panel */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 1rem;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--nai-white);
	cursor: pointer;
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
	transition: all .3s var(--ease-theme);
	height: 168px;
}
@media (min-width: 768px) { .nai-root .js-menu__toggle { padding: 1.5rem; } }

/* the red notched square behind the icon (theme: .js-menu__toggle:after, --notch-size:1rem) */
.nai-root .js-menu__toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: var(--nai-red);
	--notch: 1rem;
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch) 100%, 0 calc(100% - var(--notch)), 0 0);
}

/* hamburger bars (theme: white bars, w-4 h-[2px], gap-[5px]) */
.nai-root .toggle-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	gap: 5px;
}
.nai-root .bar {
	display: block;
	width: 1rem;
	height: 2px;
	background-color: var(--nai-white);
	transform-origin: center;
	transition: transform .5s var(--ease-theme);
}
/* hamburger -> X  (verbatim transforms from the theme) */
.nai-root .js-menu__toggle--open .bar--top    { transform: rotate(-45deg) translate3d(0, 5px, 0); }
.nai-root .js-menu__toggle--open .bar--bottom { transform: rotate(45deg)  translate3d(0, -5px, 0); }

/* =============================================================================
   2. MENU / CLOSE LABEL  —  per-letter 3D flip (theme: .menu__label / .menu-text)
   ============================================================================= */
.nai-root .menu__label {
	position: relative;
	display: inline-block;
	perspective: 800px;
	transform-style: preserve-3d;
	font-family: var(--nai-mono-font);
	font-size: clamp(1rem, .875vw + .5rem, 1.125rem);
	font-weight: 600;
	text-transform: uppercase;
	line-height: 1;
}
/* NOTE: selectors here use .nai-root .menu__label .menu-text (3 classes) on
   purpose, so they beat any leftover NAI-theme rule like
   `.menu__label .menu-text { flex-direction: column }` that would otherwise
   stack the letters vertically. display:inline-block + nowrap also makes the
   letters immune to flex-direction entirely. */
.nai-root .menu__label .menu-text {
	display: flex;                  /* horizontal letters, never a column */
	flex-direction: column;
	white-space: nowrap;
	left: 2px;
	top: 0;
	opacity: 1;                             /* override theme .menu-text{opacity:0} */
	visibility: visible;                    /* override theme .menu-text{visibility:hidden} */
	transform-style: preserve-3d;
}
.nai-root .menu__label .menu-text:not(.active) { position: absolute; }
.nai-root .menu__label .menu-text.active        { position: relative; }

.nai-root .menu__label .menu-text > div {
	display: inline-block;
	line-height: 1.1;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	transition: transform .5s var(--ease-out-quart), opacity .5s var(--ease-out-quart);
}
/* default (closed): "Menu" facing front, "Close" flipped away */
.nai-root .menu__label .menu-text--open  > div { transform: rotateY(0deg);  opacity: 1; }
.nai-root .menu__label .menu-text--close > div { transform: rotateY(90deg); opacity: 0; }
/* open: "Menu" flips out, "Close" flips in */
.nai-root .js-menu__toggle--open .menu-text--open  > div { transform: rotateY(-90deg); opacity: 0; }
.nai-root .js-menu__toggle--open .menu-text--close > div { transform: rotateY(0deg);   opacity: 1; }
.nai-root button:hover, .nai-root button:focus{background-color: unset;}
/* =============================================================================
   3. THE OVERLAY PANEL  —  red, notched, slides from the top-right corner
      (theme: #js-menu__overlay .notched .bg-red, p-16)
   ============================================================================= */
.nai-root .menu__overlay {
	position: fixed;
	top: 0;
	right: 0;
	z-index: 10;                            /* above page, below the toggle */
	display: flex;
	flex-direction: column;
	padding: 4rem;                          /* p-16 */
	min-width: 314px;
	max-width: 314px;

	background-color: var(--nai-red);
	color: var(--nai-white);

	/* the notch (theme: .notched, --notch-size:3rem) */
	--notch-size: var(--nai-notch);
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--notch-size) 100%, 0 calc(100% - var(--notch-size)), 0 0);

	/* closed: parked off the top-right corner */
	transform: translate(100%, -100%);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition:
		transform  var(--nai-panel-speed) var(--ease-in-out-quart),
		opacity    .4s var(--ease-theme),
		visibility 0s linear var(--nai-panel-speed);
	will-change: transform, opacity;
}

/* OPEN — driven by body.menu-open, exactly like the original */
body.menu-open .nai-root .menu__overlay {
	transform: translate(0, 0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition:
		transform  var(--nai-panel-speed) var(--ease-in-out-quart),
		opacity    .4s var(--ease-theme),
		visibility 0s;
}

.nai-root .menu__overlay .container {
	width: 100%;
	padding-top: 8rem;                      /* pt-32 */
}

@media (max-width: 640px) {
	.nai-root .menu__overlay { width: 100%; max-width: 100%; padding: 2rem; --nai-notch: 2rem; }
	.nai-root .menu__overlay .container { padding-top: 5rem; }
}

/* =============================================================================
   4. PRIMARY LINKS  —  big compressed uppercase, staggered reveal
   ============================================================================= */
.nai-root .heading-compressed {
	font-feature-settings: "ss01" on, "ss02" on, "ss03" on; 
	font-family: salo-variable, sans-serif !important; 
	font-optical-sizing: none; 
	font-variation-settings: "opsz" 1; 
	font-weight: 400; 
	text-transform: uppercase;
}
.nai-root .nai-primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem;                            /* gap-3 */
	line-height: 1;                         /* leading-none */
}
.nai-root .nai-primary-menu a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	letter-spacing: .01em;
	font-size: 2.25rem;
}

/* shared link hover from the theme (#js-menu__overlay a:hover { opacity:.7 }) */
.nai-root .menu__overlay a { transition: opacity .5s var(--ease-theme); }
.nai-root .menu__overlay a:hover { opacity: .7; }

/* staggered reveal of every line (delays applied per item in JS) */
.nai-root .menu__overlay .menu-item,
.nai-root .menu__overlay .menu-cta {
	opacity: 0;
	transform: translateY(-14px);
	transition: opacity .6s var(--ease-out-quart), transform .6s var(--ease-out-quart);
}
body.menu-open .nai-root .menu__overlay .menu-item,
body.menu-open .nai-root .menu__overlay .menu-cta {
	opacity: 1;
	transform: translateY(0);
}

/* =============================================================================
   5. SOCIAL ICONS  —  masked recolour (theme: .nav-image-container)
   ============================================================================= */
.nai-root .nai-social-menu {
	list-style: none;
	margin: 2.5rem 0 0;                     /* mt-10 */
	padding: 0;
	display: flex;
	align-items: center;
	gap: .75rem;                            /* gap-3 */
}
.nai-root .nav-image-container {
	position: relative;
	display: inline-block;
	width: 1.6rem;
	height: 1.6rem;
	color: var(--nai-white);
}
.nai-root .nav-image-container img { opacity: 0; width: 100%; height: 100%; }
.nai-root .nav-image-container::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: currentColor;
	-webkit-mask: var(--image-url) no-repeat center / contain;
	        mask: var(--image-url) no-repeat center / contain;
	transition: background-color .3s var(--ease-out-quart);
}
.nai-root .nav-image-container:hover::before,
.nai-root a:hover .nav-image-container::before { background-color: var(--nai-orange); }

/* =============================================================================
   6. CTA  —  "Start a Project" mono link with underline wipe
      (theme: .font-mono + the after:* underline utilities)
   ============================================================================= */
.nai-root .menu-cta { margin-top: 2.5rem; }     /* mt-10 */
.nai-root .nai-cta-menu { list-style: none; margin: 0; padding: 0; }
.nai-root .nai-cta-link,
.nai-root .nai-cta-menu a {
	position: relative;
	display: inline-block;
	padding: .25rem 0;                      /* py-1 */
	color: inherit;
	text-decoration: none;
	font-family: cartograph-cf, monospace !important;
	will-change: transform;
	font-size: 1.25rem;
}
.nai-root .nai-cta-link::after,
.nai-root .nai-cta-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	top: 95%;
	display: block;
	width: 100%;
	height: 2px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .5s var(--ease-out-quart);
}
.nai-root .nai-cta-link:hover::after,
.nai-root .nai-cta-menu a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}
/* keep CTA hover from also dimming via the shared a:hover rule */
.nai-root .menu-cta a:hover { opacity: 1; }

/* =============================================================================
   7. Misc + accessibility
   ============================================================================= */
.nai-root .sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.nai-root .nai-admin-note {
	font-family: var(--nai-mono-font);
	font-size: .85rem; line-height: 1.4;
	background: rgba(0,0,0,.2); padding: .75rem 1rem;
}
.nai-root .js-menu__toggle:focus-visible,
.nai-root .menu__overlay a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
	.nai-root .menu__overlay,
	.nai-root .bar,
	.nai-root .menu-text > div,
	.nai-root .menu__overlay .menu-item,
	.nai-root .nai-cta-link::after,
	.nai-root .nai-cta-menu a::after {
		transition-duration: .001s !important;
		transition-delay: 0s !important;
	}
}