/**
 * Metalumina Flagship — Components
 * Header, navigation, buttons, cards, forms, footer.
 */

/* ── Header ─────────────────────────────────────────────────────────── */

.ml-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--ml-z-header);
	height: var(--ml-header-h);
	display: flex;
	align-items: center;
	background: transparent;
	transition:
		background-color var(--ml-d-base) var(--ml-ease),
		border-color var(--ml-d-base) var(--ml-ease),
		transform var(--ml-d-slow) var(--ml-ease-out);
	border-bottom: 1px solid transparent;
}

/* Condensed state — the Tesla move: the bar only materialises once you
   have left the hero, and it stays whisper-quiet when it does. */
.ml-header.is-condensed {
	background: rgba(7, 11, 20, 0.72);
	backdrop-filter: saturate(150%) blur(18px);
	-webkit-backdrop-filter: saturate(150%) blur(18px);
	border-bottom-color: var(--ml-line);
}

.ml-header.is-hidden {
	transform: translateY(-100%);
}

.ml-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ml-s-6);
	width: 100%;
	max-width: var(--ml-w-full);
	margin-inline: auto;
	padding-inline: var(--ml-gutter);
}

/* ── Wordmark ───────────────────────────────────────────────────────── */

.ml-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.ml-glyph.ml-brand__mark,
.ml-brand__mark {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--ml-accent);
	transition:
		color var(--ml-d-base) var(--ml-ease),
		filter var(--ml-d-slow) var(--ml-ease-out);
}

/* The mark is a wavefront, so it lights up rather than turns. */
.ml-brand:hover .ml-brand__mark,
.ml-brand:focus-visible .ml-brand__mark {
	color: var(--ml-accent-soft);
	filter: drop-shadow(0 0 8px rgba(76, 141, 255, 0.55));
}

.ml-brand__text {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ml-ink-display);
	white-space: nowrap;
}

.ml-brand__logo {
	max-height: 32px;
	width: auto;
}

/* ── Primary navigation ─────────────────────────────────────────────── */

.ml-nav {
	display: flex;
	align-items: center;
}

.ml-nav__list {
	display: flex;
	align-items: center;
	gap: var(--ml-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ml-nav__list a {
	position: relative;
	display: block;
	padding: 8px 14px;
	font-size: var(--ml-t-sm);
	font-weight: 450;
	color: var(--ml-ink-muted);
	border-radius: var(--ml-r-sm);
	transition: color var(--ml-d-fast) var(--ml-ease);
}

.ml-nav__list a::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 2px;
	height: 1px;
	background: var(--ml-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--ml-d-base) var(--ml-ease-out);
}

.ml-nav__list a:hover,
.ml-nav__list a:focus-visible {
	color: var(--ml-ink-display);
}

.ml-nav__list a:hover::after {
	transform: scaleX(1);
}

.ml-nav__list .current-menu-item > a,
.ml-nav__list .current_page_item > a,
.ml-nav__list .is-current > a,
.ml-nav__list a[aria-current='page'] {
	color: var(--ml-ink-display);
}

.ml-nav__list .current-menu-item > a::after,
.ml-nav__list .current_page_item > a::after,
.ml-nav__list .is-current > a::after,
.ml-nav__list a[aria-current='page']::after {
	transform: scaleX(1);
}

.ml-header__actions {
	display: flex;
	align-items: center;
	gap: var(--ml-s-4);
}

/* ── Menu toggle ────────────────────────────────────────────────────── */

.ml-burger {
	display: none;
	position: relative;
	width: 40px;
	height: 40px;
	margin-right: -8px;
	border-radius: var(--ml-r-sm);
	color: var(--ml-ink-display);
}

.ml-burger__bar {
	position: absolute;
	left: 11px;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--ml-d-base) var(--ml-ease-out),
		opacity var(--ml-d-fast) var(--ml-ease);
}

.ml-burger__bar:nth-child(1) { top: 16px; }
.ml-burger__bar:nth-child(2) { top: 23px; }

.ml-burger[aria-expanded='true'] .ml-burger__bar:nth-child(1) {
	transform: translateY(3.5px) rotate(45deg);
}

.ml-burger[aria-expanded='true'] .ml-burger__bar:nth-child(2) {
	transform: translateY(-3.5px) rotate(-45deg);
}

/* ── Mobile drawer ──────────────────────────────────────────────────── */

.ml-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--ml-z-overlay);
	display: flex;
	flex-direction: column;
	padding: calc(var(--ml-header-h) + var(--ml-s-7)) var(--ml-gutter) var(--ml-s-8);
	background: rgba(4, 7, 14, 0.97);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	visibility: hidden;
	opacity: 0;
	transition:
		opacity var(--ml-d-base) var(--ml-ease),
		visibility 0s linear var(--ml-d-base);
}

.ml-drawer.is-open {
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
}

.ml-drawer__list {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ml-drawer__list a {
	display: block;
	padding: var(--ml-s-4) 0;
	font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.25rem);
	font-weight: 600;
	letter-spacing: var(--ml-track-h);
	color: var(--ml-ink-display);
	border-bottom: 1px solid var(--ml-line);
	opacity: 0;
	transform: translateY(14px);
	transition:
		opacity var(--ml-d-slow) var(--ml-ease-out),
		transform var(--ml-d-slow) var(--ml-ease-out),
		color var(--ml-d-fast) var(--ml-ease);
}

.ml-drawer.is-open .ml-drawer__list a {
	opacity: 1;
	transform: none;
}

.ml-drawer.is-open .ml-drawer__list li:nth-child(1) a { transition-delay: 70ms; }
.ml-drawer.is-open .ml-drawer__list li:nth-child(2) a { transition-delay: 130ms; }
.ml-drawer.is-open .ml-drawer__list li:nth-child(3) a { transition-delay: 190ms; }
.ml-drawer.is-open .ml-drawer__list li:nth-child(4) a { transition-delay: 250ms; }
.ml-drawer.is-open .ml-drawer__list li:nth-child(5) a { transition-delay: 310ms; }

.ml-drawer__list a:hover,
.ml-drawer__list a[aria-current='page'] {
	color: var(--ml-accent);
}

.ml-drawer__foot {
	margin-top: auto;
	padding-top: var(--ml-s-8);
	display: flex;
	flex-direction: column;
	gap: var(--ml-s-3);
	opacity: 0;
	transition: opacity var(--ml-d-slow) var(--ml-ease-out) 340ms;
}

.ml-drawer.is-open .ml-drawer__foot {
	opacity: 1;
}

.ml-drawer__mail {
	font-size: var(--ml-t-lead);
	color: var(--ml-accent);
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.ml-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 46px;
	padding: 0 26px;
	border: 1px solid transparent;
	border-radius: var(--ml-r-pill);
	font-size: var(--ml-t-sm);
	font-weight: 500;
	letter-spacing: 0.005em;
	white-space: nowrap;
	overflow: hidden;
	isolation: isolate;
	transition:
		background-color var(--ml-d-base) var(--ml-ease),
		border-color var(--ml-d-base) var(--ml-ease),
		color var(--ml-d-base) var(--ml-ease),
		box-shadow var(--ml-d-base) var(--ml-ease),
		transform var(--ml-d-base) var(--ml-ease-out);
}

.ml-btn:active {
	transform: translateY(1px);
}

.ml-glyph.ml-btn__icon,
.ml-btn__icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	transition: transform var(--ml-d-base) var(--ml-ease-out);
}

.ml-btn:hover .ml-btn__icon {
	transform: translateX(3px);
}

/* Solid */
.ml-btn--primary {
	background: var(--ml-ink-display);
	color: var(--ml-void);
	font-weight: 550;
}

.ml-btn--primary:hover,
.ml-btn--primary:focus-visible {
	background: #fff;
	box-shadow: var(--ml-glow-md);
}

/* Outline */
.ml-btn--ghost {
	background: rgba(139, 168, 214, 0.04);
	border-color: var(--ml-line-hi);
	color: var(--ml-ink);
}

.ml-btn--ghost:hover,
.ml-btn--ghost:focus-visible {
	border-color: var(--ml-line-accent);
	color: var(--ml-ink-display);
	background: rgba(76, 141, 255, 0.08);
}

/* Accent */
.ml-btn--accent {
	background: var(--ml-accent);
	color: #030711;
	font-weight: 550;
}

.ml-btn--accent:hover,
.ml-btn--accent:focus-visible {
	background: var(--ml-accent-soft);
	box-shadow: var(--ml-glow-md);
}

/* Inline text link with a travelling underline. */
.ml-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ml-accent);
	font-size: var(--ml-t-sm);
	font-weight: 500;
	padding-bottom: 2px;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--ml-d-base) var(--ml-ease-out),
		color var(--ml-d-fast) var(--ml-ease);
}

.ml-link:hover,
.ml-link:focus-visible {
	background-size: 100% 1px;
	color: var(--ml-accent-soft);
}

.ml-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ml-s-4);
}

/* ── Card — the one card in the system ──────────────────────────────── */

.ml-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--ml-s-7);
	background: linear-gradient(
		168deg,
		rgba(16, 24, 39, 0.72) 0%,
		rgba(11, 17, 32, 0.5) 100%
	);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-lg);
	overflow: hidden;
	transition:
		border-color var(--ml-d-base) var(--ml-ease),
		transform var(--ml-d-base) var(--ml-ease-out),
		box-shadow var(--ml-d-base) var(--ml-ease);
}

/* A single hairline of accent light that sweeps the top edge on hover.
   This is the site's one hover signature; it repeats everywhere. */
.ml-card::after {
	content: '';
	position: absolute;
	top: -1px;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--ml-accent) 50%,
		transparent
	);
	opacity: 0;
	transition: opacity var(--ml-d-base) var(--ml-ease);
}

.ml-card:hover,
.ml-card:focus-within {
	border-color: var(--ml-line-hi);
	transform: translateY(-4px);
	box-shadow: var(--ml-lift), var(--ml-glow-sm);
}

.ml-card:hover::after,
.ml-card:focus-within::after {
	opacity: 0.85;
}

.ml-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ml-s-4);
	margin-bottom: var(--ml-s-6);
}

.ml-card__figure {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--ml-s-6);
	color: var(--ml-ink);
}

.ml-card__figure svg {
	width: 100%;
	height: auto;
	max-width: 220px;
	overflow: visible;
}

.ml-card__title {
	margin-bottom: var(--ml-s-4);
}

.ml-card__title + .ml-rule {
	margin-bottom: var(--ml-s-4);
}

.ml-card__text {
	color: var(--ml-ink-muted);
	font-size: var(--ml-t-sm);
	margin: 0;
}

.ml-card__text + .ml-card__text {
	margin-top: var(--ml-s-4);
}

.ml-card--flat {
	background: rgba(11, 17, 32, 0.45);
}

/* ── Grids ──────────────────────────────────────────────────────────── */

.ml-grid {
	display: grid;
	gap: var(--ml-s-6);
}

.ml-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ml-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ml-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.ml-split {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	gap: clamp(2.5rem, 1rem + 5vw, 6rem);
	align-items: center;
}

.ml-split--even {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ml-split--reverse {
	grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
}

.ml-split--top {
	align-items: start;
}

/* ── Forms ──────────────────────────────────────────────────────────── */

.ml-form {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s-5);
}

.ml-field {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s-2);
}

.ml-field__label {
	font-size: var(--ml-t-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ml-ink-faint);
	transition: color var(--ml-d-fast) var(--ml-ease);
}

.ml-field:focus-within .ml-field__label {
	color: var(--ml-accent);
}

.ml-field__req {
	color: var(--ml-accent);
	margin-left: 2px;
}

.ml-input,
.ml-select,
.ml-textarea {
	width: 100%;
	padding: 14px 16px;
	background: rgba(4, 7, 14, 0.6);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	color: var(--ml-ink-display);
	font-size: var(--ml-t-sm);
	transition:
		border-color var(--ml-d-base) var(--ml-ease),
		background-color var(--ml-d-base) var(--ml-ease),
		box-shadow var(--ml-d-base) var(--ml-ease);
	appearance: none;
}

.ml-textarea {
	min-height: 148px;
	resize: vertical;
	line-height: 1.6;
}

.ml-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%238593AC' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 42px;
	cursor: pointer;
}

.ml-select option {
	background: var(--ml-surface);
	color: var(--ml-ink);
}

.ml-input::placeholder,
.ml-textarea::placeholder {
	color: var(--ml-ink-ghost);
}

.ml-input:hover,
.ml-select:hover,
.ml-textarea:hover {
	border-color: var(--ml-line-hi);
}

.ml-input:focus,
.ml-select:focus,
.ml-textarea:focus {
	outline: none;
	border-color: var(--ml-line-accent);
	background: rgba(4, 7, 14, 0.85);
	box-shadow: 0 0 0 3px rgba(76, 141, 255, 0.10);
}

.ml-input[aria-invalid='true'],
.ml-textarea[aria-invalid='true'],
.ml-select[aria-invalid='true'] {
	border-color: rgba(232, 106, 106, 0.55);
}

.ml-field__error {
	font-size: var(--ml-t-xs);
	color: #E86A6A;
	min-height: 0;
}

.ml-field__error:empty {
	display: none;
}

/* Honeypot — visually and programmatically removed from the tab order. */
.ml-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ml-form__status {
	font-size: var(--ml-t-sm);
	padding: 14px 18px;
	border-radius: var(--ml-r-md);
	border: 1px solid var(--ml-line);
	display: none;
}

.ml-form__status.is-visible {
	display: block;
}

.ml-form__status.is-success {
	border-color: rgba(63, 168, 142, 0.4);
	background: rgba(63, 168, 142, 0.08);
	color: #6FD3B8;
}

.ml-form__status.is-error {
	border-color: rgba(232, 106, 106, 0.4);
	background: rgba(232, 106, 106, 0.08);
	color: #F09292;
}

.ml-btn[aria-busy='true'] {
	pointer-events: none;
	opacity: 0.72;
}

.ml-btn__spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 1.5px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: ml-spin 700ms linear infinite;
}

.ml-btn[aria-busy='true'] .ml-btn__spinner {
	display: block;
}

.ml-btn[aria-busy='true'] .ml-btn__icon {
	display: none;
}

@keyframes ml-spin {
	to { transform: rotate(360deg); }
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.ml-footer {
	position: relative;
	background: var(--ml-bg-sunken);
	border-top: 1px solid var(--ml-line);
}

.ml-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	padding-block: clamp(3.5rem, 2rem + 4.5vw, 6rem);
}

.ml-footer__brand .ml-brand {
	margin-bottom: var(--ml-s-4);
}

.ml-footer__tagline {
	max-width: 260px;
	font-size: var(--ml-t-sm);
	color: var(--ml-ink-faint);
	margin-top: var(--ml-s-4);
}

.ml-footer__col-title {
	font-size: var(--ml-t-eyebrow);
	font-weight: 500;
	letter-spacing: var(--ml-track-eyebrow);
	text-transform: uppercase;
	color: var(--ml-ink-faint);
	margin-bottom: var(--ml-s-3);
}

.ml-footer__col-title + .ml-rule {
	margin-bottom: var(--ml-s-5);
	width: 24px;
}

.ml-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--ml-s-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ml-footer__list a {
	font-size: var(--ml-t-sm);
	color: var(--ml-ink-muted);
	transition: color var(--ml-d-fast) var(--ml-ease);
	width: fit-content;
}

.ml-footer__list a:hover,
.ml-footer__list a:focus-visible {
	color: var(--ml-accent);
}

.ml-footer__legal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--ml-s-4);
	padding-block: var(--ml-s-6);
	border-top: 1px solid var(--ml-line);
}

.ml-footer__copy {
	font-size: var(--ml-t-xs);
	color: var(--ml-ink-ghost);
	margin: 0;
}

.ml-footer__legal-links {
	display: flex;
	align-items: center;
	gap: var(--ml-s-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ml-footer__legal-links li + li::before {
	content: '';
	display: inline-block;
	width: 1px;
	height: 11px;
	margin-right: var(--ml-s-4);
	background: var(--ml-line-hi);
	vertical-align: -1px;
}

.ml-footer__legal-links a {
	font-size: var(--ml-t-xs);
	color: var(--ml-ink-faint);
	transition: color var(--ml-d-fast) var(--ml-ease);
}

.ml-footer__legal-links a:hover,
.ml-footer__legal-links a:focus-visible {
	color: var(--ml-ink);
}

/* ── Scroll progress rail ───────────────────────────────────────────── */

.ml-progress {
	position: fixed;
	inset-inline: 0;
	top: 0;
	height: 1px;
	z-index: calc(var(--ml-z-header) + 1);
	background: transparent;
	pointer-events: none;
}

.ml-progress__bar {
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	background: linear-gradient(90deg, var(--ml-accent-deep), var(--ml-accent-soft));
	will-change: transform;
}

/* ── Scroll cue ─────────────────────────────────────────────────────── */

.ml-cue {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ml-ink-ghost);
}

.ml-cue__track {
	position: relative;
	width: 1px;
	height: 46px;
	background: var(--ml-line-hi);
	overflow: hidden;
}

.ml-cue__track::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	top: -50%;
	height: 50%;
	background: linear-gradient(180deg, transparent, var(--ml-accent));
	animation: ml-cue-fall 2.4s var(--ml-ease-inout) infinite;
}

@keyframes ml-cue-fall {
	0%   { transform: translateY(0); opacity: 0; }
	28%  { opacity: 1; }
	72%  { opacity: 1; }
	100% { transform: translateY(300%); opacity: 0; }
}