/* ============================================================
   LS Nav Menu — widget style

   Mobile mode is driven by a JS-measured, per-instance custom
   breakpoint (see script.js), not a CSS @media query — every rule
   that only applies once collapsed is keyed off the
   .ls-nav-menu--mobile class instead of a fixed pixel width, because
   an actual `@media (max-width: <value>)` can't read its threshold
   from a CSS custom property. The hamburger button itself needs JS
   to do anything regardless, so there's no meaningful "no-JS
   fallback" being given up here.
   ============================================================ */

.ls-nav-menu{
	--ls-nav-gap: 36px;
	--ls-nav-link-color: #FFFFFF;
	--ls-nav-accent: #E8A33D;
	--ls-nav-current: #E8A33D;
	--ls-nav-panel-bg: #0B1622;
	--ls-nav-panel-border: rgba(244,246,245,.14);
	--ls-nav-panel-text: rgba(244,246,245,.62);
	--ls-nav-panel-text-hover: #FFFFFF;
	--ls-nav-panel-min-width: 180px;
	--ls-nav-mobile-bg: #0B1622;
	--ls-nav-mobile-width: 80%;
	--ls-nav-overlay: rgba(5,9,13,.6);
	--ls-nav-hamburger-color: #FFFFFF;
	--ls-nav-cta-color: #FFFFFF;
	--ls-nav-cta-hover: #E8A33D;
	--ls-nav-ease: cubic-bezier(.22,.88,.30,1);
	--ls-nav-ease-soft: cubic-bezier(.4,0,.2,1);

	position:relative;
	display:flex;
	align-items:center;
	padding:28px 44px;
	box-sizing:border-box;
	transition:padding .4s var(--ls-nav-ease-soft), background .4s var(--ls-nav-ease-soft), box-shadow .4s;
}
.ls-nav-menu *{ box-sizing:border-box; }

/* ---------- layout: horizontal ---------- */
.ls-nav-menu--horizontal{ flex-direction:row; }
.ls-nav-menu--horizontal.ls-nav-menu--align-left .ls-nav-menu__links{ margin-right:auto; }
.ls-nav-menu--horizontal.ls-nav-menu--align-right .ls-nav-menu__links{ margin-left:auto; }
.ls-nav-menu--horizontal.ls-nav-menu--align-center{ justify-content:center; }
.ls-nav-menu--horizontal.ls-nav-menu--align-space-between .ls-nav-menu__links{ width:100%; justify-content:space-between; }
.ls-nav-menu--horizontal .ls-nav-menu__links{
	display:flex; flex-direction:row; align-items:center; gap:var(--ls-nav-gap);
}
.ls-nav-menu--horizontal .ls-nav-menu__item{ position:relative; }

/* ---------- layout: vertical ---------- */
.ls-nav-menu--vertical{ flex-direction:column; align-items:stretch; }
.ls-nav-menu--vertical .ls-nav-menu__links{
	display:flex; flex-direction:column; align-items:stretch; gap:calc(var(--ls-nav-gap) / 3);
}
.ls-nav-menu--vertical .ls-nav-menu__item{ position:relative; }
.ls-nav-menu--vertical .ls-nav-menu__item > a{ display:block; }

/* ---------- links ---------- */
.ls-nav-menu__links{ list-style:none; margin:0; padding:0; }
.ls-nav-menu__item{ display:flex; align-items:center; gap:6px; }
.ls-nav-menu__links a{
	color:var(--ls-nav-link-color); font-size:12.5px; letter-spacing:.08em;
	text-transform:uppercase; font-weight:500; text-decoration:none;
	transition:color .25s;
}
.ls-nav-menu__links > .ls-nav-menu__item > a{ position:relative; padding-bottom:5px; }
.ls-nav-menu__links > .ls-nav-menu__item > a:not(.ls-nav-menu__cta)::after{
	content:''; position:absolute; left:0; bottom:0; width:100%; height:2px;
	background:var(--ls-nav-accent); transform:scaleX(0); transform-origin:left;
	transition:transform .35s var(--ls-nav-ease-soft);
}
.ls-nav-menu__links > .ls-nav-menu__item > a:not(.ls-nav-menu__cta):hover::after,
.ls-nav-menu__links > .ls-nav-menu__item > a:not(.ls-nav-menu__cta):focus-visible::after{ transform:scaleX(1); }

/* current-page highlight — three alternate treatments, chosen via the
   Current Page control; "underline" reuses the same sliding-underline
   rule and just leaves it permanently drawn instead of only on hover */
.ls-nav-menu--current-underline .ls-nav-menu__item.is-current > a:not(.ls-nav-menu__cta)::after{ transform:scaleX(1); background:var(--ls-nav-current); }
.ls-nav-menu--current-color .ls-nav-menu__item.is-current > a{ color:var(--ls-nav-current); }
.ls-nav-menu--current-background .ls-nav-menu__item.is-current > a:not(.ls-nav-menu__cta){
	background:rgba(244,246,245,.08); border-radius:100px; padding:6px 14px; margin:-6px -14px 1px;
}

/* optional small chevron next to a top-level item's own label */
.ls-nav-menu__links > .ls-nav-menu__item > a::before{ content:none; }
.ls-nav-menu--show-arrow .ls-nav-menu__item--has-dropdown > a::before{
	content:''; display:inline-block; width:5px; height:5px; margin:0 0 1px 6px;
	border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
	transform:rotate(45deg); transition:transform .3s var(--ls-nav-ease-soft);
	vertical-align:middle;
}
.ls-nav-menu--show-arrow .ls-nav-menu__item--has-dropdown:hover > a::before,
.ls-nav-menu--show-arrow .ls-nav-menu__item--has-dropdown:focus-within > a::before{ transform:rotate(225deg) translateY(1px); }

/* ---------- CTA / button item ---------- */
.ls-nav-menu__cta{
	border:1px solid var(--ls-nav-cta-color); color:var(--ls-nav-cta-color);
	padding:9px 18px; border-radius:100px; transition:border-color .25s, color .25s;
}
.ls-nav-menu__cta:hover, .ls-nav-menu__cta:focus-visible{
	border-color:var(--ls-nav-cta-hover); color:var(--ls-nav-cta-hover);
}

/* ---------- mobile-only chrome, hidden on desktop ---------- */
.ls-nav-menu__toggle{ display:none; background:none; border:0; padding:0; cursor:pointer; }
.ls-nav-menu__item-toggle{
	display:none; align-items:center; justify-content:center;
	width:20px; height:20px; padding:0; border:0; background:none; cursor:pointer;
	color:var(--ls-nav-link-color); flex-shrink:0;
}
.ls-nav-menu__item-toggle i{
	display:block; width:6px; height:6px;
	border-right:1.4px solid currentColor; border-bottom:1.4px solid currentColor;
	transform:rotate(45deg) translateY(-2px);
	transition:transform .3s var(--ls-nav-ease-soft);
}
.ls-nav-menu__item.is-open .ls-nav-menu__item-toggle i{ transform:rotate(-135deg) translateY(1px); }
.ls-nav-menu__overlay{ display:none; }

/* ============================================================
   Submenu — shared base
   ============================================================ */
.ls-nav-menu__dropdown{
	position:absolute; top:100%; left:0; margin-top:22px;
	list-style:none; min-width:var(--ls-nav-panel-min-width); padding:10px; z-index:50;
	background:var(--ls-nav-panel-bg); border:1px solid var(--ls-nav-panel-border); border-radius:14px;
	box-shadow:0 20px 40px rgba(0,0,0,.35); backdrop-filter:blur(10px);
	opacity:0; visibility:hidden; transform:translateY(6px);
	transition:opacity .3s var(--ls-nav-ease-soft), transform .3s var(--ls-nav-ease-soft), visibility 0s linear .3s;
}
.ls-nav-menu[data-trigger="hover"].ls-nav-menu--horizontal .ls-nav-menu__item--has-dropdown:hover .ls-nav-menu__dropdown,
.ls-nav-menu[data-trigger="hover"].ls-nav-menu--horizontal .ls-nav-menu__item--has-dropdown:focus-within .ls-nav-menu__dropdown,
.ls-nav-menu__item--has-dropdown.is-open > .ls-nav-menu__dropdown{
	opacity:1; visibility:visible; transform:translateY(0);
	transition:opacity .3s var(--ls-nav-ease-soft), transform .3s var(--ls-nav-ease-soft), visibility 0s;
}
/* "Click / Tap only" trigger: the chevron toggle button (otherwise
   mobile-only) is also shown on desktop, since the dropdown no longer
   opens on hover — same click handler drives both. */
.ls-nav-menu[data-trigger="click"] .ls-nav-menu__item--has-dropdown > .ls-nav-menu__item-toggle{ display:flex; }
.ls-nav-menu__dropdown li + li{ margin-top:2px; }
.ls-nav-menu__dropdown a{
	display:block; padding:10px 14px; border-radius:8px;
	font-size:11.5px; letter-spacing:.06em; color:var(--ls-nav-panel-text);
	transition:background .25s, color .25s;
}
.ls-nav-menu__dropdown a::after{ content:none; }
.ls-nav-menu__dropdown a:hover,
.ls-nav-menu__dropdown a:focus-visible{ background:rgba(244,246,245,.06); color:var(--ls-nav-panel-text-hover); }
.ls-nav-menu__dropdown a.is-current{ color:var(--ls-nav-current); }

/* ---------- submenu — "card" caret ---------- */
.ls-nav-menu__dropdown--card::before,
.ls-nav-menu__dropdown--card::after{
	content:''; position:absolute; bottom:100%; left:22px;
	width:0; height:0; border-style:solid; pointer-events:none;
}
.ls-nav-menu__dropdown--card::before{
	border-width:0 8px 8px 8px;
	border-color:transparent transparent var(--ls-nav-panel-border) transparent;
}
.ls-nav-menu__dropdown--card::after{
	left:23px; bottom:calc(100% - 1px);
	border-width:0 7px 7px 7px;
	border-color:transparent transparent var(--ls-nav-panel-bg) transparent;
}

/* right-edge flip for a horizontal menu — main.js measures the real
   position (the panel stays in normal layout while hidden, only
   opacity/visibility change) and adds this class when the default
   left-anchored panel would run off the right side of the viewport;
   not limited to "the last item", whichever trigger doesn't fit. */
.ls-nav-menu--horizontal .ls-nav-menu__item--align-flip .ls-nav-menu__dropdown{ left:auto; right:0; }
.ls-nav-menu--horizontal .ls-nav-menu__item--align-flip .ls-nav-menu__dropdown--card::before,
.ls-nav-menu--horizontal .ls-nav-menu__item--align-flip .ls-nav-menu__dropdown--card::after{ left:auto; }
.ls-nav-menu--horizontal .ls-nav-menu__item--align-flip .ls-nav-menu__dropdown--card::before{ right:22px; }
.ls-nav-menu--horizontal .ls-nav-menu__item--align-flip .ls-nav-menu__dropdown--card::after{ right:23px; }

/* ---------- submenu — "numbered editorial" alternate ---------- */
.ls-nav-menu__dropdown--numbered{
	min-width:220px; padding:14px 0; border:none; border-radius:0;
	border-top:1px solid var(--ls-nav-accent);
	background:rgba(5,9,13,.92); backdrop-filter:blur(14px);
	box-shadow:0 24px 50px rgba(0,0,0,.45);
	counter-reset:ls-nav-dd-item;
}
.ls-nav-menu__dropdown--numbered li{ counter-increment:ls-nav-dd-item; }
.ls-nav-menu__dropdown--numbered li + li{ margin-top:0; border-top:1px solid var(--ls-nav-panel-border); }
.ls-nav-menu__dropdown--numbered a{
	display:flex; align-items:center; gap:12px;
	padding:13px 20px; border-radius:0;
	font-family:inherit; font-size:11px; letter-spacing:.1em;
	transition:padding-left .3s var(--ls-nav-ease-soft), color .25s;
}
.ls-nav-menu__dropdown--numbered a::before{
	content:counter(ls-nav-dd-item, decimal-leading-zero);
	color:var(--ls-nav-accent); font-size:10px;
}
.ls-nav-menu__dropdown--numbered a:hover,
.ls-nav-menu__dropdown--numbered a:focus-visible{ background:transparent; color:var(--ls-nav-panel-text-hover); padding-left:26px; }
.ls-nav-menu--horizontal .ls-nav-menu__item--align-flip .ls-nav-menu__dropdown--numbered{ left:auto; right:0; }

/* ---------- submenu as a side flyout for vertical layout ---------- */
.ls-nav-menu--vertical .ls-nav-menu__dropdown{
	top:0; left:100%; margin-top:0; margin-left:14px;
	transform:translateX(6px);
}
.ls-nav-menu[data-trigger="hover"].ls-nav-menu--vertical .ls-nav-menu__item--has-dropdown:hover .ls-nav-menu__dropdown,
.ls-nav-menu[data-trigger="hover"].ls-nav-menu--vertical .ls-nav-menu__item--has-dropdown:focus-within .ls-nav-menu__dropdown,
.ls-nav-menu--vertical .ls-nav-menu__item--has-dropdown.is-open > .ls-nav-menu__dropdown{
	opacity:1; visibility:visible; transform:translateX(0);
	transition:opacity .3s var(--ls-nav-ease-soft), transform .3s var(--ls-nav-ease-soft), visibility 0s;
}
.ls-nav-menu--vertical .ls-nav-menu__dropdown--card::before,
.ls-nav-menu--vertical .ls-nav-menu__dropdown--card::after{
	bottom:auto; left:auto; right:100%; top:18px;
	border-width:8px 8px 8px 0;
	border-color:transparent var(--ls-nav-panel-border) transparent transparent;
}
.ls-nav-menu--vertical .ls-nav-menu__dropdown--card::after{
	top:18px; right:calc(100% - 1px);
	border-width:7px 7px 7px 0;
	border-color:transparent var(--ls-nav-panel-bg) transparent transparent;
}
/* left/right flyout flip for vertical layout — same JS measurement,
   applied to whichever edge the panel would actually overflow */
.ls-nav-menu--vertical .ls-nav-menu__item--align-flip .ls-nav-menu__dropdown{
	left:auto; right:100%; margin-left:0; margin-right:14px;
}
.ls-nav-menu--vertical .ls-nav-menu__item--align-flip .ls-nav-menu__dropdown--card::before{
	left:100%; right:auto;
	border-width:8px 0 8px 8px;
	border-color:transparent transparent transparent var(--ls-nav-panel-border);
}
.ls-nav-menu--vertical .ls-nav-menu__item--align-flip .ls-nav-menu__dropdown--card::after{
	left:calc(100% - 1px); right:auto;
	border-width:7px 0 7px 7px;
	border-color:transparent transparent transparent var(--ls-nav-panel-bg);
}

/* ============================================================
   Sticky
   ============================================================ */
.ls-nav-menu--sticky-fixed{
	position:fixed; top:0; left:0; right:0;
	background:var(--ls-nav-panel-bg);
}
.ls-nav-menu--sticky-transparent,
.ls-nav-menu--sticky-smart{
	position:fixed; top:0; left:0; right:0;
	transition:padding .4s var(--ls-nav-ease-soft), background .4s var(--ls-nav-ease-soft), box-shadow .4s, transform .4s var(--ls-nav-ease-soft);
}
.ls-nav-menu--sticky-transparent.is-scrolled,
.ls-nav-menu--sticky-smart.is-scrolled{
	padding-top:16px; padding-bottom:16px;
}
.ls-nav-menu--sticky-smart.is-hidden{ transform:translateY(-100%); }

/* ============================================================
   Mobile — driven by .ls-nav-menu--mobile (JS-measured custom
   breakpoint), not a fixed @media query.
   ============================================================ */
.ls-nav-menu--mobile{ position:relative; }
.ls-nav-menu--mobile.ls-nav-menu--sticky-fixed,
.ls-nav-menu--mobile.ls-nav-menu--sticky-transparent,
.ls-nav-menu--mobile.ls-nav-menu--sticky-smart{ position:fixed; top:0; left:0; right:0; }

.ls-nav-menu--mobile .ls-nav-menu__toggle{
	display:flex; flex-direction:column; gap:5px; z-index:10; margin-left:auto;
}
.ls-nav-menu--mobile.ls-nav-menu--align-space-between .ls-nav-menu__toggle,
.ls-nav-menu--mobile .ls-nav-menu__toggle{ margin-left:auto; }
.ls-nav-menu__toggle span{
	width:24px; height:2px; background:var(--ls-nav-hamburger-color); display:block;
	transition:transform .3s var(--ls-nav-ease-soft), opacity .2s;
}
.ls-nav-menu--mobile.is-open .ls-nav-menu__toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.ls-nav-menu--mobile.is-open .ls-nav-menu__toggle span:nth-child(2){ opacity:0; }
.ls-nav-menu--mobile.is-open .ls-nav-menu__toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.ls-nav-menu--mobile .ls-nav-menu__links{
	position:fixed; top:0; bottom:0; width:var(--ls-nav-mobile-width); max-width:380px;
	background:var(--ls-nav-mobile-bg);
	flex-direction:column; align-items:flex-start; padding:100px 30px 30px; gap:24px;
	overflow-y:auto; z-index:9;
	transition:transform .5s var(--ls-nav-ease);
}
.ls-nav-menu--mobile.ls-nav-menu--panel-right .ls-nav-menu__links{ right:0; transform:translateX(100%); }
.ls-nav-menu--mobile.ls-nav-menu--panel-left .ls-nav-menu__links{ left:0; transform:translateX(-100%); }
.ls-nav-menu--mobile.is-open .ls-nav-menu__links{ transform:translateX(0); }

.ls-nav-menu--mobile .ls-nav-menu__item{ flex-wrap:wrap; width:100%; }
.ls-nav-menu--mobile .ls-nav-menu__item-toggle{ display:flex; }

.ls-nav-menu--mobile .ls-nav-menu__dropdown{
	position:static; order:3; width:100%; margin:0; left:auto; right:auto; top:auto; transform:none;
	padding:0; border:none; background:transparent; box-shadow:none; backdrop-filter:none;
	opacity:1; visibility:visible;
	max-height:0; overflow:hidden;
	transition:max-height .4s var(--ls-nav-ease-soft);
}
.ls-nav-menu--mobile .ls-nav-menu__item.is-open .ls-nav-menu__dropdown{ max-height:400px; margin-top:14px; }
.ls-nav-menu--mobile .ls-nav-menu__dropdown a{ padding:8px 0 8px 4px; font-size:12.5px; }
.ls-nav-menu--mobile .ls-nav-menu__dropdown a:hover,
.ls-nav-menu--mobile .ls-nav-menu__dropdown a:focus-visible{ background:transparent; color:var(--ls-nav-accent); }
/* the desktop caret is meaningless once the panel is an inline
   accordion, and the edge-flip never applies to a full-width panel */
.ls-nav-menu--mobile .ls-nav-menu__dropdown::before,
.ls-nav-menu--mobile .ls-nav-menu__dropdown::after{ display:none; }

.ls-nav-menu--mobile.ls-nav-menu--overlay .ls-nav-menu__overlay{
	display:block; position:fixed; inset:0; z-index:8;
	background:var(--ls-nav-overlay);
	opacity:0; visibility:hidden;
	transition:opacity .4s var(--ls-nav-ease-soft), visibility 0s linear .4s;
}
.ls-nav-menu--mobile.is-open.ls-nav-menu--overlay .ls-nav-menu__overlay{
	opacity:1; visibility:visible;
	transition:opacity .4s var(--ls-nav-ease-soft), visibility 0s;
}

/* accessibility: keep a visible focus ring for keyboard users without
   drawing one on every mouse click */
.ls-nav-menu a:focus-visible,
.ls-nav-menu button:focus-visible{ outline:2px solid var(--ls-nav-accent); outline-offset:2px; }