/* Hero: navy field, faint grid, live constellation (canvas) */
.mx-hero { position: relative; overflow: hidden; background-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--on-navy); background-image: linear-gradient(rgba(244,240,232,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(244,240,232,.04) 1px, transparent 1px); background-size: 44px 44px; padding-block: 0; }
.mx-hero h1, .mx-hero p, .mx-hero a { color: inherit; }
.mx-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mx-hero__body { position: relative; display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; padding-block: 3.5rem 2.5rem; min-height: 30rem; margin-block: 0 !important; }
.mx-hero__body > * { margin-block: 0 !important; }
.mx-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.mx-hero__copy > * { margin: 0 !important; }
.mx-hero__title { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; text-wrap: balance; }
.mx-hero__lead { font: 400 1.0625rem/1.6 var(--wp--preset--font-family--ui); opacity: .85; max-width: 48ch; }
.mx-hero__tag { font: 400 .75rem var(--wp--preset--font-family--ui); letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.mx-pill { font: 500 .6875rem var(--wp--preset--font-family--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--gold) !important; border: 1px solid rgba(217,169,78,.5); padding: .5rem .9rem; border-radius: 99px; }
.mx-ul { background: linear-gradient(var(--wp--preset--color--gold), var(--wp--preset--color--gold)) 0 92% / 100% 3px no-repeat; animation: mx-ul 1.2s .4s both; }
@keyframes mx-ul { from { background-size: 0 3px; } to { background-size: 100% 3px; } }
.mx-hero__aside { position: relative; min-height: 18rem; display: flex; flex-direction: column; justify-content: flex-end; }
.mx-hero__info { align-self: flex-end; width: min(300px, 100%); background: rgba(20,26,51,.9); border: 1px solid rgba(217,169,78,.4); border-radius: 12px; padding: 1.1rem; display: flex; flex-direction: column; gap: .35rem; position: relative; z-index: 2; font-family: var(--wp--preset--font-family--ui); }
.mx-hero__info .mx-label { color: var(--wp--preset--color--gold); }
.mx-hero__info strong { font: 500 1.4rem/1.2 var(--wp--preset--font-family--display); }
.mx-hero__info p { font-size: .875rem; line-height: 1.5; opacity: .85; margin: 0; }
.mx-hero__info a { font-size: .8125rem; font-weight: 500; color: var(--wp--preset--color--gold); text-decoration: none; margin-top: .25rem; }
/* Without JS the concepts are a plain list of links */
.mx-nodes { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; position: relative; z-index: 3; }
.mx-nodes a { font: 500 .75rem var(--wp--preset--font-family--ui); color: var(--wp--preset--color--on-navy); text-decoration: none; background: rgba(20,26,51,.85); border: 1px solid rgba(217,169,78,.55); border-radius: 99px; padding: .45rem .8rem; display: inline-flex; gap: .45rem; align-items: center; white-space: nowrap; }
.mx-nodes a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--gold); box-shadow: 0 0 0 4px rgba(217,169,78,.2); }
.mx-nodes a:hover, .mx-nodes a.is-on { background: var(--wp--preset--color--gold); color: #1B2238; }
.mx-nodes a:hover::before, .mx-nodes a.is-on::before { background: #1B2238; box-shadow: none; }
/* With JS the list becomes free-floating nodes over the canvas */
.mx-hero.is-live .mx-nodes { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
.mx-hero.is-live .mx-nodes li { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; }
.mx-hero.is-live .mx-hero__aside { position: static; }
.mx-hero.is-live .mx-hero__body { position: static; }
.mx-hero.is-live .mx-hero__copy, .mx-hero.is-live .mx-hero__info { position: relative; }
.mx-hero__strip { position: relative; border-top: 1px solid rgba(244,240,232,.12); padding-block: 1rem; gap: .5rem 1.6rem !important; align-items: center; font-family: var(--wp--preset--font-family--ui); }
.mx-hero__strip p { margin: 0; font-size: .8125rem; opacity: .55; }
.mx-hero__strip p a { font: 500 .95rem var(--wp--preset--font-family--display); text-decoration: none; }
.mx-hero__strip p:not(:first-child) { opacity: .9; }
@media (max-width: 820px) {
	.mx-hero__body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
	.mx-hero.is-live .mx-nodes { position: static; display: flex; pointer-events: auto; }
	.mx-hero.is-live .mx-nodes li { position: static; transform: none; }
	.mx-hero__aside { min-height: 0; }
	.mx-hero__info { align-self: stretch; width: 100%; }
}