/**
 * Ahmed Elkady Portfolio — "Editorial Onyx & Gold" component system
 * Loaded on the front end and inside the block editor.
 *
 * Visual language: deep onyx canvas, Fraunces display serif + Manrope sans,
 * dark glass cards, metallic gold gradients & hairlines, numbered editorial
 * sections, a typographic hero, premium counters, and an elegant timeline.
 */

:root {
	--lx-onyx: #08080a;
	--lx-surface: #0c0c0f;
	--lx-graphite: #16161c;
	--lx-ivory: #f1ede4;
	--lx-soft: #cfc9bb;
	--lx-muted: #948d7c;
	--lx-faint: #6f6a5b;
	--lx-gold: #c8a35a;
	--lx-gold-bright: #dcbb6a;
	--lx-gold-soft: #ead9ad;
	--lx-champagne: #f0e3bd;
	--lx-line: rgba(200, 163, 90, 0.16);
	--lx-line-strong: rgba(200, 163, 90, 0.42);
	--lx-hairline: rgba(255, 255, 255, 0.06);
	--lx-serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
	--lx-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--lx-glass: linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 100%);
	--lx-gold-grad: linear-gradient(135deg, #f0dca0 0%, #d8b25e 38%, #c8a35a 62%, #9a7b34 100%);
	--lx-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
	--lx-shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.45);
	--lx-glow: 0 0 50px rgba(200, 163, 90, 0.1);
	--lx-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* =========================================================================
 * Glass card surface — shared by every card
 * ====================================================================== */
.lx-card,
.lx-ach,
.lx-proj,
.lx-svc,
.lx-step,
.lx-tl-item,
.lx-cv,
.lx-contact-panel,
.lx-callout,
.lx-ba-card,
.lx-total {
	position: relative;
	background: var(--lx-glass), rgba(12, 12, 15, 0.55);
	-webkit-backdrop-filter: blur(12px) saturate(115%);
	backdrop-filter: blur(12px) saturate(115%);
	border: 1px solid var(--lx-line);
	border-radius: 4px;
	box-shadow: var(--lx-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: transform 0.55s var(--lx-ease), border-color 0.55s var(--lx-ease), box-shadow 0.55s var(--lx-ease);
	overflow: hidden;
}

/* Gold top hairline that sweeps in on hover */
.lx-card::after,
.lx-ach::after,
.lx-proj::after,
.lx-svc::after,
.lx-step::after,
.lx-tl-item::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--lx-gold-grad);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--lx-ease);
}

.lx-card:hover,
.lx-ach:hover,
.lx-proj:hover,
.lx-svc:hover,
.lx-step:hover,
.lx-tl-item:hover {
	transform: translateY(-6px);
	border-color: var(--lx-line-strong);
	box-shadow: var(--lx-shadow), var(--lx-glow);
}

.lx-card:hover::after,
.lx-ach:hover::after,
.lx-proj:hover::after,
.lx-svc:hover::after,
.lx-step:hover::after,
.lx-tl-item:hover::after {
	transform: scaleX(1);
}

/* =========================================================================
 * Metallic gold gradient text helper
 * ====================================================================== */
.lx-gold-text,
.lx-stat-num,
.lx-hstat-num,
.lx-ach-metric,
.lx-total-num,
.lx-hero-tagline {
	color: var(--lx-gold-soft);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.lx-gold-text,
	.lx-stat-num,
	.lx-hstat-num,
	.lx-ach-metric,
	.lx-total-num {
		background: var(--lx-gold-grad);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

/* =========================================================================
 * Sections & editorial heads
 * ====================================================================== */
.lx-section {
	position: relative;
	padding-block: clamp(4.5rem, 9vw, 8rem);
}

.lx-section--alt {
	background: #0b0b0e;
	border-top: 1px solid var(--lx-line);
	border-bottom: 1px solid var(--lx-line);
}

.lx-head {
	max-width: 780px;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.lx-head--center {
	margin-inline: auto;
	text-align: center;
}

.lx-index {
	font-family: var(--lx-serif);
	font-size: clamp(3rem, 6vw, 4.5rem);
	font-weight: 600;
	line-height: 1;
	color: rgba(255, 255, 255, 0.06);
	letter-spacing: -0.02em;
	margin: 0 0 0.3rem;
}

.lx-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--lx-sans);
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--lx-gold);
	margin: 0 0 1.1rem;
}

.lx-kicker::before {
	content: "";
	width: 32px;
	height: 1px;
	background: var(--lx-gold);
}

.lx-head--center .lx-kicker {
	justify-content: center;
}

.lx-title {
	font-family: var(--lx-serif);
	color: var(--lx-ivory);
	font-size: clamp(2.2rem, 4.5vw, 3.4rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
}

.lx-sub {
	color: var(--lx-soft);
	font-size: 1.1rem;
	line-height: 1.7;
	margin: 1.15rem 0 0;
	max-width: 64ch;
}

.lx-head--center .lx-sub {
	margin-inline: auto;
}

/* Standalone gold divider */
.lx-rule {
	height: 1px;
	border: 0;
	background: var(--lx-gold-grad);
	opacity: 0.6;
	max-width: 120px;
	margin: 1.75rem 0;
}

.lx-head--center .lx-rule {
	margin-inline: auto;
}

/* =========================================================================
 * HERO (home) — typographic, centered, editorial
 * ====================================================================== */
.lx-hero {
	position: relative;
	min-height: clamp(640px, 92vh, 1000px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	padding-block: clamp(5rem, 12vh, 9rem);
}

.lx-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(58% 50% at 50% -4%, rgba(200, 163, 90, 0.16), transparent 60%),
		radial-gradient(42% 42% at 82% 92%, rgba(200, 163, 90, 0.07), transparent 60%);
	pointer-events: none;
	z-index: 0;
}

/* Ghost monogram watermark */
.lx-hero::after {
	content: "AE";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -46%);
	font-family: var(--lx-serif);
	font-weight: 600;
	font-size: clamp(18rem, 46vw, 42rem);
	line-height: 1;
	letter-spacing: -0.05em;
	color: rgba(255, 255, 255, 0.022);
	pointer-events: none;
	z-index: 0;
	white-space: nowrap;
}

.lx-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1000px;
	margin-inline: auto;
}

.lx-mono {
	width: 66px;
	height: 66px;
	border-radius: 50%;
	border: 1px solid var(--lx-line-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--lx-gold-soft);
	font-family: var(--lx-serif);
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: 0.02em;
	background: radial-gradient(circle at 30% 25%, rgba(200, 163, 90, 0.18), rgba(200, 163, 90, 0.03));
	box-shadow: var(--lx-glow);
	margin: 0 auto 1.75rem;
}

.lx-hero-kicker {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	font-family: var(--lx-sans);
	text-transform: uppercase;
	letter-spacing: 0.34em;
	font-size: 0.74rem;
	font-weight: 700;
	color: var(--lx-gold);
	margin: 0 0 1.5rem;
}

.lx-hero-kicker::before,
.lx-hero-kicker::after {
	content: "";
	width: 26px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--lx-gold));
}

.lx-hero-kicker::after {
	background: linear-gradient(90deg, var(--lx-gold), transparent);
}

.lx-hero-name {
	font-family: var(--lx-serif);
	font-weight: 600;
	font-size: clamp(3.6rem, 11vw, 7rem);
	line-height: 0.96;
	letter-spacing: -0.035em;
	color: var(--lx-ivory);
	margin: 0;
}

.lx-hero-tagline {
	font-family: var(--lx-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.4rem, 3.4vw, 2.2rem);
	line-height: 1.25;
	margin: 1.4rem 0 0;
}

.lx-hero-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.65rem;
	margin: 1.6rem 0 0;
}

.lx-tag {
	font-family: var(--lx-sans);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lx-champagne);
	border: 1px solid var(--lx-line-strong);
	border-radius: 999px;
	padding: 0.4rem 0.95rem;
	margin: 0;
	background: rgba(200, 163, 90, 0.05);
}

.lx-hero-intro {
	color: var(--lx-soft);
	font-size: 1.12rem;
	line-height: 1.75;
	max-width: 60ch;
	margin: 1.7rem auto 0;
}

.lx-hero-actions {
	margin-top: 2rem;
}

/* Hero credentials strip */
.lx-hero-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 2.75rem auto 0;
	border-top: 1px solid var(--lx-line);
	border-bottom: 1px solid var(--lx-line);
	max-width: 820px;
}

.lx-hstat {
	flex: 1 1 160px;
	padding: 1.4rem 1.25rem;
	border-left: 1px solid var(--lx-line);
}

.lx-hstat:first-child {
	border-left: 0;
}

.lx-hstat-num {
	font-family: var(--lx-serif);
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
}

.lx-hstat-label {
	color: var(--lx-muted);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.66rem;
	font-weight: 600;
	margin: 0.55rem 0 0;
}

/* Scroll cue */
.lx-scroll {
	position: absolute;
	left: 50%;
	bottom: 1.75rem;
	transform: translateX(-50%);
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	color: var(--lx-muted);
	text-transform: uppercase;
	letter-spacing: 0.24em;
	font-size: 0.6rem;
	font-weight: 600;
}

.lx-scroll::after {
	content: "";
	display: block;
	width: 1px;
	height: 46px;
	margin: 0 auto;
	background: linear-gradient(180deg, var(--lx-gold), transparent);
}

/* =========================================================================
 * Page hero (inner pages)
 * ====================================================================== */
.lx-page-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(6rem, 15vh, 9.5rem) clamp(2.5rem, 6vh, 4rem);
}

.lx-page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 80% at 88% 0%, rgba(200, 163, 90, 0.13), transparent 58%);
	pointer-events: none;
}

.lx-page-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: var(--lx-gold-grad);
	opacity: 0.55;
}

.lx-page-hero > * {
	position: relative;
}

.lx-page-hero h1 {
	font-family: var(--lx-serif);
	color: var(--lx-ivory);
	font-size: clamp(2.6rem, 6vw, 4.4rem);
	line-height: 1.02;
	letter-spacing: -0.025em;
	margin: 0.3rem 0 0.7rem;
}

.lx-page-lead {
	color: var(--lx-soft);
	font-size: 1.18rem;
	line-height: 1.7;
	max-width: 64ch;
	margin: 0;
}

.lx-page-actions {
	margin-top: 1.9rem;
}

/* =========================================================================
 * Stats band (home)
 * ====================================================================== */
.lx-stats {
	display: flex;
	flex-wrap: wrap;
}

.lx-stat {
	flex: 1 1 200px;
	padding: 1.85rem 1.85rem;
	border-left: 1px solid var(--lx-line);
}

.lx-stat:first-child {
	border-left: 0;
}

.lx-stat-num {
	font-family: var(--lx-serif);
	font-size: clamp(2.6rem, 4.5vw, 3.6rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
}

.lx-stat-label {
	color: var(--lx-muted);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 0.72rem;
	font-weight: 600;
	margin: 0.75rem 0 0;
	line-height: 1.5;
}

/* =========================================================================
 * Cards: expertise / focus
 * ====================================================================== */
.lx-card {
	padding: 2rem 1.85rem;
	height: 100%;
}

.lx-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 4px;
	color: var(--lx-gold-soft);
	background: radial-gradient(circle at 30% 25%, rgba(200, 163, 90, 0.18), rgba(200, 163, 90, 0.04));
	border: 1px solid var(--lx-line-strong);
	margin-bottom: 1.25rem;
}

.lx-card-icon svg {
	width: 24px;
	height: 24px;
}

.lx-card-title,
.lx-ach-title,
.lx-proj-title,
.lx-svc-title,
.lx-step-title,
.lx-tl-role {
	font-family: var(--lx-sans);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--lx-ivory);
}

.lx-card-title {
	font-size: 1.16rem;
	margin: 0 0 0.55rem;
}

.lx-card-text,
.lx-svc-text,
.lx-step-text {
	color: var(--lx-muted);
	font-size: 0.97rem;
	line-height: 1.65;
	margin: 0;
}

/* =========================================================================
 * Achievements
 * ====================================================================== */
.lx-ach {
	padding: 2rem 1.85rem;
	height: 100%;
}

.lx-ach--feature {
	background: linear-gradient(160deg, #18160f 0%, #0b0b0c 70%);
	border-color: var(--lx-line-strong);
}

.lx-ach-metric {
	font-family: var(--lx-serif);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.05;
	margin: 0 0 0.45rem;
}

.lx-ach--feature .lx-ach-metric {
	font-size: clamp(2.6rem, 4vw, 3.4rem);
}

.lx-ach-title {
	font-size: 1.12rem;
	margin: 0 0 0.5rem;
}

.lx-ach-text {
	color: var(--lx-muted);
	font-size: 0.96rem;
	line-height: 1.65;
	margin: 0;
}

.lx-ach--feature .lx-ach-text {
	color: var(--lx-soft);
}

/* =========================================================================
 * Projects
 * ====================================================================== */
.lx-group-label {
	font-family: var(--lx-serif);
	font-size: 1.4rem;
	color: var(--lx-ivory);
	margin: 0 0 1.4rem;
	padding-bottom: 0.7rem;
	border-bottom: 1px solid var(--lx-line);
}

.lx-proj {
	padding: 1.9rem 1.8rem;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.lx-proj-cat {
	font-family: var(--lx-sans);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--lx-gold);
	margin: 0 0 0.4rem;
}

.lx-proj-title {
	font-size: 1.18rem;
	margin: 0.65rem 0 0.55rem;
}

.lx-proj p {
	color: var(--lx-muted);
	font-size: 0.94rem;
	line-height: 1.6;
	margin: 0 0 0.55rem;
}

.lx-proj-tools {
	font-size: 0.86rem;
	color: var(--lx-soft);
}

.lx-proj-tools strong {
	color: var(--lx-ivory);
}

.lx-proj-value {
	font-size: 0.9rem;
	color: var(--lx-gold-soft);
	font-weight: 600;
	margin-top: auto;
	padding-top: 0.5rem;
}

.lx-status {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--lx-line);
	background: rgba(255, 255, 255, 0.03);
	color: var(--lx-soft);
	line-height: 1;
	align-self: flex-start;
}

.lx-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.lx-status.is-completed {
	color: var(--lx-gold-bright);
	background: rgba(200, 163, 90, 0.1);
	border-color: var(--lx-line-strong);
}

.lx-status.is-progress {
	color: #cdb78a;
	border-color: rgba(200, 163, 90, 0.28);
}

.lx-status.is-concept {
	color: #bdb6a4;
}

.lx-status.is-learning {
	color: var(--lx-muted);
}

/* =========================================================================
 * Timeline
 * ====================================================================== */
.lx-timeline {
	position: relative;
	max-width: 880px;
	padding-left: 2.6rem;
}

.lx-timeline::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: linear-gradient(180deg, var(--lx-gold) 0%, rgba(200, 163, 90, 0.06) 100%);
}

.lx-tl-item {
	padding: 1.6rem 1.85rem;
	margin-bottom: 1.2rem;
}

.lx-tl-item:last-child {
	margin-bottom: 0;
}

.lx-tl-node {
	position: absolute;
	left: -2.6rem;
	top: 2rem;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--lx-onyx);
	border: 2px solid var(--lx-gold);
	box-shadow: 0 0 0 4px rgba(200, 163, 90, 0.1), 0 0 16px rgba(200, 163, 90, 0.35);
}

.lx-tl-date {
	font-family: var(--lx-serif);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--lx-gold);
	margin: 0 0 0.25rem;
}

.lx-tl-role {
	font-size: 1.18rem;
	margin: 0 0 0.15rem;
}

.lx-tl-org {
	font-weight: 600;
	color: var(--lx-soft);
	margin: 0 0 0.55rem;
}

.lx-tl-text {
	color: var(--lx-muted);
	font-size: 0.96rem;
	line-height: 1.65;
	margin: 0 0 0.8rem;
}

/* =========================================================================
 * Chips
 * ====================================================================== */
.lx-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem;
}

.lx-chip {
	display: inline-block;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--lx-champagne);
	background: rgba(200, 163, 90, 0.06);
	border: 1px solid rgba(200, 163, 90, 0.22);
	border-radius: 999px;
	padding: 0.42rem 0.9rem;
	margin: 0;
	line-height: 1.2;
	transition: border-color 0.3s var(--lx-ease), background 0.3s var(--lx-ease);
}

.lx-chip:hover {
	border-color: var(--lx-line-strong);
	background: rgba(200, 163, 90, 0.12);
}

/* =========================================================================
 * Services & steps
 * ====================================================================== */
.lx-svc {
	padding: 1.9rem 1.8rem;
	height: 100%;
}

.lx-svc-title {
	font-size: 1.16rem;
	margin: 0 0 0.55rem;
}

.lx-step {
	padding: 2rem 1.8rem 1.85rem;
	height: 100%;
}

.lx-step-num {
	font-family: var(--lx-serif);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--lx-gold-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border-radius: 4px;
	background: radial-gradient(circle at 30% 25%, rgba(200, 163, 90, 0.18), rgba(200, 163, 90, 0.04));
	border: 1px solid var(--lx-line-strong);
	margin-bottom: 1.15rem;
}

.lx-step-title {
	font-size: 1.16rem;
	margin: 0 0 0.55rem;
}

/* =========================================================================
 * Prose, lead, lists, callout
 * ====================================================================== */
.lx-prose p {
	color: var(--lx-soft);
	line-height: 1.85;
}

.lx-prose h2,
.lx-prose h3 {
	font-family: var(--lx-serif);
	color: var(--lx-ivory);
	margin-top: 2.5rem;
}

.lx-lead {
	font-family: var(--lx-serif);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem);
	line-height: 1.5;
	color: var(--lx-ivory);
	font-weight: 400;
}

.lx-check {
	list-style: none;
	margin: 1.15rem 0;
	padding: 0;
}

.lx-check li {
	position: relative;
	padding-left: 2rem;
	margin-bottom: 0.8rem;
	line-height: 1.65;
	color: var(--lx-soft);
}

.lx-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.2rem;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 50%;
	background: var(--lx-gold-grad);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 64% no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / 64% no-repeat;
}

.lx-callout {
	padding: 1.75rem 1.85rem;
	border-left: 2px solid var(--lx-gold);
}

.lx-callout p {
	margin: 0;
	color: var(--lx-soft);
	line-height: 1.7;
}

/* Before / after */
.lx-ba {
	display: flex;
	gap: 1.1rem;
	flex-wrap: wrap;
}

.lx-ba-card {
	flex: 1 1 240px;
	padding: 1.6rem 1.7rem;
}

.lx-ba-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	margin: 0 0 0.55rem;
}

.lx-ba--before {
	border-top: 2px solid rgba(255, 255, 255, 0.16);
}

.lx-ba--before .lx-ba-label {
	color: var(--lx-muted);
}

.lx-ba--after {
	border-top: 2px solid var(--lx-gold);
}

.lx-ba--after .lx-ba-label {
	color: var(--lx-gold);
}

.lx-ba-card p,
.lx-ba-card li {
	color: var(--lx-soft);
	line-height: 1.65;
}

/* Total impact */
.lx-total {
	text-align: center;
	padding: clamp(2.5rem, 5vw, 3.5rem);
	border-color: var(--lx-line-strong);
	background: linear-gradient(160deg, #16140e 0%, #0a0a0c 70%);
}

.lx-total-num {
	font-family: var(--lx-serif);
	font-size: clamp(2.8rem, 1.6rem + 4.5vw, 4.4rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	margin: 0;
}

.lx-total p {
	color: var(--lx-soft);
}

/* =========================================================================
 * CV panel
 * ====================================================================== */
.lx-cv {
	padding: clamp(1.9rem, 4vw, 3rem);
}

.lx-cv-h {
	font-family: var(--lx-serif);
	color: var(--lx-ivory);
	margin-top: 2.25rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--lx-line);
}

.lx-cv-h:first-of-type {
	margin-top: 0;
}

.lx-cv-role {
	padding: 1.2rem 0;
	border-bottom: 1px solid var(--lx-hairline);
}

.lx-cv-role:last-child {
	border-bottom: 0;
}

.lx-cv-role h3 {
	font-family: var(--lx-sans);
	font-weight: 700;
	font-size: 1.12rem;
	color: var(--lx-ivory);
	margin: 0 0 0.2rem;
}

.lx-cv-meta {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--lx-gold);
	margin: 0 0 0.55rem;
}

.lx-cv-cols {
	gap: 1.75rem;
}

.lx-fine {
	font-size: 0.85rem;
	color: var(--lx-muted);
	font-style: italic;
	margin-top: 1.1rem;
}

/* =========================================================================
 * Contact
 * ====================================================================== */
.lx-contact-grid {
	gap: clamp(1.75rem, 4vw, 3.25rem);
	align-items: start;
}

.lx-contact-invite h2 {
	font-family: var(--lx-serif);
	color: var(--lx-ivory);
	font-size: clamp(2.4rem, 5vw, 3.4rem);
	line-height: 1.04;
	margin: 0 0 1rem;
}

.lx-contact-details {
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
	margin-top: 2rem;
}

.lx-contact-line {
	display: flex;
	flex-direction: column;
	gap: 0.18rem;
}

.lx-contact-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--lx-gold);
	margin: 0;
}

.lx-contact-line a,
.lx-contact-line p {
	margin: 0;
	color: var(--lx-ivory);
	font-size: 1.02rem;
	text-decoration: none;
}

.lx-contact-line a:hover {
	color: var(--lx-gold-soft);
}

.lx-contact-panel {
	padding: clamp(1.75rem, 4vw, 2.5rem);
	box-shadow: var(--lx-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Contact form (shortcode markup) */
.ae-contact-form {
	display: flex;
	flex-wrap: wrap;
	gap: 1.05rem;
}

.ae-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	flex: 1 1 100%;
}

.ae-field--half {
	flex: 1 1 calc(50% - 0.55rem);
	min-width: 200px;
}

.ae-field--full {
	flex: 1 1 100%;
}

.ae-field label {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--lx-soft);
}

.ae-field input,
.ae-field textarea {
	width: 100%;
	font: inherit;
	color: var(--lx-ivory);
	background: rgba(8, 8, 10, 0.7);
	border: 1px solid var(--lx-line);
	border-radius: 4px;
	padding: 0.8rem 0.9rem;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.ae-field input::placeholder,
.ae-field textarea::placeholder {
	color: var(--lx-faint);
}

.ae-field input:focus,
.ae-field textarea:focus {
	outline: none;
	background: rgba(16, 16, 20, 0.8);
	border-color: var(--lx-gold);
	box-shadow: 0 0 0 3px rgba(200, 163, 90, 0.16);
}

.ae-field textarea {
	min-height: 150px;
	resize: vertical;
}

.ae-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ae-submit {
	flex: 1 1 100%;
}

.ae-submit button {
	font: inherit;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	cursor: pointer;
	color: #08080a;
	background: var(--lx-gold-grad);
	border: 1px solid rgba(200, 163, 90, 0.5);
	border-radius: 4px;
	padding: 0.9rem 1.8rem;
	box-shadow: 0 10px 28px rgba(200, 163, 90, 0.16);
	transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.ae-submit button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 34px rgba(200, 163, 90, 0.28);
	filter: brightness(1.05);
}

.ae-form-notice {
	flex: 1 1 100%;
	border-radius: 4px;
	padding: 0.9rem 1.05rem;
	font-size: 0.95rem;
	margin-bottom: 0.25rem;
}

.ae-form-notice--ok {
	color: var(--lx-gold-soft);
	background: rgba(200, 163, 90, 0.1);
	border: 1px solid var(--lx-line-strong);
}

.ae-form-notice--error {
	color: #e0a88f;
	background: rgba(176, 64, 42, 0.12);
	border: 1px solid rgba(176, 64, 42, 0.4);
}

/* =========================================================================
 * CTA band
 * ====================================================================== */
.lx-cta {
	position: relative;
	text-align: center;
	padding-block: clamp(4rem, 8vw, 6.5rem);
	overflow: hidden;
	border-top: 1px solid var(--lx-line);
	border-bottom: 1px solid var(--lx-line);
}

.lx-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 130% at 50% 0%, rgba(200, 163, 90, 0.12), transparent 62%);
	pointer-events: none;
}

.lx-cta > * {
	position: relative;
}

.lx-cta-title {
	font-family: var(--lx-serif);
	color: var(--lx-ivory);
	font-size: clamp(2.4rem, 5vw, 3.8rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
}

.lx-cta-sub {
	color: var(--lx-soft);
	font-size: 1.12rem;
	line-height: 1.7;
	max-width: 58ch;
	margin: 1.1rem auto 0;
}

.lx-cta-actions {
	margin-top: 1.9rem;
}

/* =========================================================================
 * Buttons
 * ====================================================================== */
.wp-block-button:not(.is-style-outline-light) > .wp-block-button__link {
	background: var(--lx-gold-grad);
	color: #08080a;
	border: 1px solid rgba(200, 163, 90, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	box-shadow: 0 10px 28px rgba(200, 163, 90, 0.14);
	transition: transform 0.25s var(--lx-ease), box-shadow 0.25s var(--lx-ease), filter 0.25s var(--lx-ease);
}

.wp-block-button:not(.is-style-outline-light) > .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 36px rgba(200, 163, 90, 0.3);
	filter: brightness(1.05);
}

.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent;
	color: var(--lx-champagne);
	border: 1px solid rgba(200, 163, 90, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 700;
	box-shadow: none;
	transition: background 0.25s var(--lx-ease), color 0.25s var(--lx-ease), border-color 0.25s var(--lx-ease), transform 0.25s var(--lx-ease);
}

.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background: var(--lx-gold-grad);
	color: #08080a;
	border-color: transparent;
	transform: translateY(-2px);
}

/* =========================================================================
 * Header
 * ====================================================================== */
.site-header {
	position: relative;
}

.lx-brand {
	gap: 0.85rem;
}

.lx-monogram {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--lx-line-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--lx-gold-soft);
	font-family: var(--lx-serif);
	font-weight: 600;
	font-size: 1.05rem;
	background: radial-gradient(circle at 30% 25%, rgba(200, 163, 90, 0.16), rgba(200, 163, 90, 0.03));
}

.lx-brand-role {
	color: var(--lx-muted);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-size: 0.6rem;
	font-weight: 600;
	margin: 0;
}

.site-header .wp-block-navigation a,
.site-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--lx-soft);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: color 0.25s ease;
}

.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--lx-gold-soft);
}

.site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--lx-graphite);
	border: 1px solid var(--lx-line);
	border-radius: 4px;
	box-shadow: var(--lx-shadow-soft);
	padding: 0.4rem 0;
}

.nav-cta a,
.wp-block-navigation-item.nav-cta .wp-block-navigation-item__content {
	border: 1px solid var(--lx-gold);
	color: var(--lx-gold-soft) !important;
	border-radius: 999px;
	padding: 0.5rem 1.2rem !important;
	letter-spacing: 0.1em;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.nav-cta a:hover,
.wp-block-navigation-item.nav-cta:hover .wp-block-navigation-item__content {
	background: var(--lx-gold-grad);
	color: #08080a !important;
	transform: translateY(-1px);
}

/* =========================================================================
 * Footer
 * ====================================================================== */
.site-footer {
	position: relative;
}

.lx-foot-mono {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid var(--lx-line-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--lx-gold-soft);
	font-family: var(--lx-serif);
	font-weight: 600;
	font-size: 1.2rem;
	background: radial-gradient(circle at 30% 25%, rgba(200, 163, 90, 0.16), rgba(200, 163, 90, 0.03));
	margin-bottom: 1.1rem;
}

.lx-foot-col-title {
	color: var(--lx-ivory) !important;
	font-family: var(--lx-sans) !important;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-links li {
	margin-bottom: 0.6rem;
}

.site-footer a {
	color: var(--lx-soft);
	text-decoration: none;
	transition: color 0.25s ease;
}

.site-footer a:hover {
	color: var(--lx-gold-soft);
}

.lx-foot-meta {
	color: var(--lx-gold-soft) !important;
}

.lx-foot-copy {
	color: var(--lx-muted) !important;
}

.footer-sep {
	border: 0;
	border-top: 1px solid var(--lx-hairline);
	margin: 2.25rem 0 1.5rem;
}

/* =========================================================================
 * Blog / archive / single
 * ====================================================================== */
.lx-blog-card {
	position: relative;
	background: var(--lx-glass), rgba(12, 12, 15, 0.55);
	border: 1px solid var(--lx-line);
	border-radius: 4px;
	overflow: hidden;
	box-shadow: var(--lx-shadow-soft);
	transition: transform 0.55s var(--lx-ease), box-shadow 0.55s var(--lx-ease), border-color 0.55s var(--lx-ease);
	height: 100%;
}

.lx-blog-card:hover {
	transform: translateY(-6px);
	border-color: var(--lx-line-strong);
	box-shadow: var(--lx-shadow), var(--lx-glow);
}

.lx-post-hero {
	position: relative;
	overflow: hidden;
}

.lx-post-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(70% 80% at 88% 0%, rgba(200, 163, 90, 0.12), transparent 58%);
	pointer-events: none;
}

.lx-post-hero > * {
	position: relative;
}

.lx-post-hero h1 {
	font-family: var(--lx-serif);
	color: var(--lx-ivory);
	line-height: 1.08;
}

.lx-eyebrow {
	color: var(--lx-gold);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* =========================================================================
 * Reveal-on-scroll
 * ====================================================================== */
.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.9s var(--lx-ease), transform 0.9s var(--lx-ease);
	will-change: opacity, transform;
}

.reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* =========================================================================
 * Dark heading safeguards
 * ====================================================================== */
.has-onyx-gradient-background h1,
.has-onyx-gradient-background h2,
.has-onyx-gradient-background h3,
.has-navy-depth-gradient-background h1,
.has-navy-depth-gradient-background h2,
.has-navy-depth-gradient-background h3 {
	color: var(--lx-ivory);
}

/* =========================================================================
 * RTL
 * ====================================================================== */
[dir="rtl"] .lx-callout,
[dir="rtl"] .lx-ach--feature {
	border-left: 1px solid var(--lx-line);
	border-right: 2px solid var(--lx-gold);
}

[dir="rtl"] .lx-timeline {
	padding-left: 0;
	padding-right: 2.6rem;
}

[dir="rtl"] .lx-timeline::before {
	left: auto;
	right: 7px;
}

[dir="rtl"] .lx-tl-node {
	left: auto;
	right: -2.6rem;
}

[dir="rtl"] .lx-check li {
	padding-left: 0;
	padding-right: 2rem;
}

[dir="rtl"] .lx-check li::before {
	left: auto;
	right: 0;
}

[dir="rtl"] .lx-stat,
[dir="rtl"] .lx-hstat {
	border-left: 0;
	border-right: 1px solid var(--lx-line);
}

[dir="rtl"] .lx-stat:first-child,
[dir="rtl"] .lx-hstat:first-child {
	border-right: 0;
}

[dir="rtl"] .lx-kicker::before {
	background: var(--lx-gold);
}

/* =========================================================================
 * Responsive
 * ====================================================================== */
@media (max-width: 900px) {
	.lx-hstat {
		flex: 1 1 50%;
	}
}

@media (max-width: 782px) {
	.lx-ba {
		flex-direction: column;
	}

	.ae-field--half {
		flex: 1 1 100%;
	}

	.lx-stat {
		flex: 1 1 50%;
	}
}

@media (max-width: 600px) {
	.lx-card,
	.lx-ach,
	.lx-proj,
	.lx-svc,
	.lx-step,
	.lx-tl-item {
		padding: 1.5rem 1.4rem;
	}

	.lx-stat,
	.lx-hstat {
		flex: 1 1 100%;
		border-left: 0;
	}
}

/* =========================================================================
 * Reduced motion
 * ====================================================================== */
@media (prefers-reduced-motion: reduce) {
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.lx-card,
	.lx-ach,
	.lx-proj,
	.lx-svc,
	.lx-step,
	.lx-tl-item,
	.lx-blog-card,
	.lx-chip {
		transition: none;
	}
}

/* =========================================================================
 * Sticky glass header (refined)
 * ====================================================================== */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(8, 8, 10, 0.72);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
	backdrop-filter: blur(12px) saturate(120%);
	border-bottom: 1px solid var(--lx-line);
	transition: background 0.3s ease, box-shadow 0.3s ease;
}

header.wp-block-template-part.is-scrolled {
	background: rgba(8, 8, 10, 0.92);
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Analytics visual frame */
.lx-viz {
	margin-top: 2.5rem;
}

.lx-viz img {
	border: 1px solid var(--lx-line);
	border-radius: 6px;
	box-shadow: var(--lx-shadow-soft);
	background: #0a0a0c;
	display: block;
	margin-inline: auto;
}

/* Print / Save-as-PDF button on the CV page */
.lx-print-btn {
	font: inherit;
	font-weight: 700;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	cursor: pointer;
	color: var(--lx-champagne);
	background: transparent;
	border: 1px solid var(--lx-gold);
	border-radius: 999px;
	padding: 0.6rem 1.4rem;
	transition: background 0.25s var(--lx-ease), color 0.25s var(--lx-ease);
}

.lx-print-btn:hover {
	background: var(--lx-gold-grad);
	color: #08080a;
}

/* =========================================================================
 * Print: produce a clean black-on-white full CV (Save as PDF)
 * ====================================================================== */
@media print {
	body {
		background: #ffffff !important;
		color: #111111 !important;
	}

	body::before,
	body::after,
	header.wp-block-template-part,
	.site-footer,
	.lx-scroll,
	.lx-print-btn,
	.wp-block-buttons,
	.lx-page-hero::before,
	.lx-page-hero::after {
		display: none !important;
	}

	.lx-page-hero,
	.lx-section {
		padding-block: 0.5rem !important;
	}

	.lx-cv {
		background: #ffffff !important;
		border: 0 !important;
		box-shadow: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		padding: 0 !important;
	}

	.lx-page-hero h1,
	.lx-page-lead,
	.lx-cv-h,
	.lx-cv-role h3,
	.lx-cv p,
	.lx-cv li,
	.lx-kicker {
		color: #111111 !important;
	}

	.lx-cv-meta {
		color: #555555 !important;
	}

	.lx-chip {
		color: #111111 !important;
		background: #f2f2f2 !important;
		border-color: #cccccc !important;
		-webkit-text-fill-color: #111111 !important;
	}

	.lx-check li::before {
		background: #111111 !important;
	}
}