/*
 * Magik Theme — base styles driven by the brand variables (--mk-*).
 * Everything is wrapped in :where() so Elementor widget settings always win.
 */

:where(body) {
	background: var(--mk-color-background);
	color: var(--mk-color-text);
	font-family: var(--mk-font-body);
	font-weight: var(--mk-body-weight);
	font-size: var(--mk-text-body);
	line-height: var(--mk-body-line-height);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--mk-font-heading);
	font-weight: var(--mk-heading-weight);
	letter-spacing: var(--mk-heading-tracking);
	line-height: var(--mk-heading-line-height);
	color: var(--mk-color-primary);
	text-wrap: balance;
}
:where(h1) { font-size: var(--mk-text-h1); }
:where(h2) { font-size: var(--mk-text-h2); }
:where(h3) { font-size: var(--mk-text-h3); }
:where(h4) { font-size: var(--mk-text-h4); }
:where(h5) { font-size: var(--mk-text-h5); }
:where(h6) { font-size: var(--mk-text-h6); }

:where(p) { text-wrap: pretty; }

:where(a) {
	color: var(--mk-color-accent);
	text-underline-offset: 0.18em;
}

:where(button, .button, input[type="submit"], .wp-element-button) {
	background: var(--mk-color-accent);
	color: var(--mk-color-accent-contrast);
	border: 0;
	border-radius: var(--mk-radius-button);
	font-family: var(--mk-font-body);
	font-weight: 600;
	padding: 0.85em 1.6em;
	cursor: pointer;
	transition: transform var(--mk-duration) var(--mk-ease), filter var(--mk-duration) var(--mk-ease);
}
:where(button, .button, input[type="submit"], .wp-element-button):hover { filter: brightness(1.08); }

/* Elementor buttons: only the radius/transition, colours come from the kit. */
.elementor-button {
	border-radius: var(--mk-radius-button);
	transition: transform var(--mk-duration) var(--mk-ease), filter var(--mk-duration) var(--mk-ease), background-color var(--mk-duration) var(--mk-ease);
}

:where(input:not([type="submit"]), textarea, select) {
	border-radius: var(--mk-radius-input);
	border: 1px solid color-mix(in srgb, var(--mk-color-text) 18%, transparent);
	background: var(--mk-color-background);
	color: var(--mk-color-text);
	font: inherit;
	padding: 0.75em 1em;
}
:where(input, textarea, select):focus-visible {
	outline: 2px solid var(--mk-color-accent);
	outline-offset: 2px;
}

:where(img) { border-radius: var(--mk-radius-image); }
.elementor-widget-image img { border-radius: var(--mk-radius-image); }

/* Utility classes usable from Elementor (Advanced > CSS classes). */
.mk-card {
	background: var(--mk-color-surface);
	border-radius: var(--mk-radius-card);
	box-shadow: var(--mk-shadow);
}
.mk-dark {
	background: var(--mk-color-dark);
	color: color-mix(in srgb, var(--mk-color-background) 88%, transparent);
}
.mk-dark :where(h1, h2, h3, h4, h5, h6) { color: var(--mk-color-background); }
.mk-dark a:not(.elementor-button) { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.mk-dark a:not(.elementor-button):hover { text-decoration-color: currentColor; }
.mk-muted { color: var(--mk-color-muted); }

/* Rounded panel set off the page edges (sections built by Magik). */
.e-con.mk-inset {
	--width: calc(100% - 32px);
	margin-inline: auto;
	border-radius: calc(var(--mk-radius-card) * 1.4);
	overflow: hidden;
}
@media (max-width: 767px) {
	.e-con.mk-inset { --width: calc(100% - 16px); border-radius: var(--mk-radius-card); }
}
.e-con.mk-inset + .e-con.mk-inset { margin-top: 16px; }
.e-con.mk-inset:has(+ footer), .e-con.mk-inset:last-child { margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Provisional text, to be replaced by the site owner: shown in red. */
.mk-todo { color: #d0201a; }
.mk-dark .mk-todo { color: #ff7b72; }

/* Small label above a title */
.mk-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
}
.mk-eyebrow::before {
	content: "";
	width: 1.6em;
	height: 1px;
	background: var(--mk-color-signal, var(--mk-color-accent));
}
.mk-quote { font-size: 1.125rem; line-height: 1.55; margin: 0; }
.mk-sep { color: var(--mk-color-signal, var(--mk-color-accent)); font-size: 0.5em; vertical-align: middle; padding: 0 0.4em; }
.mk-marquee .elementor-heading-title { opacity: 0.92; }

/* Big figures and bands use the heading font. */
:is(.mk-counter, .mk-marquee, .mk-index) .elementor-heading-title {
	font-family: var(--mk-font-heading);
	font-weight: var(--mk-heading-weight);
	letter-spacing: var(--mk-heading-tracking);
}

/* Legal note under forms, footer bottom bar, newsletter signup */
.mk-form-note { font-size: 0.8125rem; line-height: 1.5; margin: 0; }
.mk-form-note a { color: inherit; }
.mk-footer-bottom { border-top: 1px solid color-mix(in srgb, var(--mk-color-background) 16%, transparent); padding-top: 24px; font-size: 0.875rem; }
.mk-footer-bottom p { margin: 0; }
.mk-form-dark .elementor-field-type-acceptance label { color: color-mix(in srgb, var(--mk-color-background) 80%, transparent); font-size: 0.8125rem; }
.mk-form-dark .elementor-message { color: var(--mk-color-background); }
.mk-signup-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mk-signup-row input { flex: 1 1 200px; }
.mk-signup-consent { font-size: 0.8125rem; margin: 8px 0 0; }
.mk-signup-done { font-weight: 600; }
.mk-legal h2.elementor-heading-title { font-size: var(--mk-text-h4); margin-top: 24px; }
.mk-legal .elementor-widget-text-editor { font-size: 1rem; }

/* Two-tone headline, frosted cards, small hero figures */
.mk-hl { color: var(--mk-color-signal, var(--mk-color-accent)); }
.e-con.mk-hero-visual { position: relative; }
.mk-float-cards { position: absolute !important; right: -8px; top: 8%; width: 250px !important; z-index: 3; pointer-events: auto; }
.mk-float-cards .elementor-widget-icon-box:nth-child(2) { transform: translateX(-56px); }
.mk-glass .elementor-icon-box-wrapper {
	background: color-mix(in srgb, var(--mk-color-background) 72%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
	border: 1px solid color-mix(in srgb, var(--mk-color-background) 60%, transparent);
	border-radius: 18px; padding: 14px 16px; box-shadow: 0 10px 30px rgba(15, 20, 18, .08); gap: 12px;
}
.mk-glass .elementor-icon { font-size: 16px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--mk-color-signal, var(--mk-color-accent)) 14%, transparent); }
.mk-glass .elementor-icon-box-title { font-size: 15px; margin: 0 0 2px; }
.mk-glass .elementor-icon-box-description { font-size: 13px; line-height: 1.4; margin: 0; }
.mk-mini-stats { border-top: 1px solid color-mix(in srgb, var(--mk-color-text) 10%, transparent); padding-top: 18px !important; margin-top: 8px; }
.mk-mini-label { font-size: 13px; margin: 0; }
@media (max-width: 1024px) {
	.mk-float-cards { position: static !important; width: 100% !important; }
	.mk-float-cards .elementor-widget-icon-box:nth-child(2) { transform: none; }
}

/* ================================================================== */
/* « Studio » skin: sections carry .mk-studio (dark, signal colour, mono labels) */
.mk-studio .mk-eyebrow, .mk-mono { font-family: var(--mk-font-label); font-weight: 500; letter-spacing: .06em; font-size: 12px; text-transform: uppercase; }
.mk-studio .mk-eyebrow::before { width: 6px; height: 6px; border-radius: 50%; background: var(--mk-color-signal, var(--mk-color-accent)); }
.mk-pill-word { display: inline-block; background: var(--mk-color-signal, var(--mk-color-accent)); color: var(--mk-color-dark); padding: 0 .28em .06em; border-radius: 999px; transform: rotate(-2deg); }
.mk-studio.mk-dark .mk-sig, .mk-sig { color: var(--mk-color-signal, var(--mk-color-accent)); }
.mk-btn-glass .elementor-button { background: color-mix(in srgb, var(--mk-color-background) 10%, transparent) !important; border-color: color-mix(in srgb, var(--mk-color-background) 35%, transparent) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* Luminous hero */
.e-con.mk-aurora { position: relative; isolation: isolate; overflow: hidden; }
.e-con.mk-aurora::before, .e-con.mk-aurora::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.e-con.mk-aurora::before {
	inset: -20%;
	background:
		radial-gradient(38% 42% at 30% 35%, color-mix(in srgb, var(--mk-color-signal) 55%, transparent), transparent 70%),
		radial-gradient(30% 36% at 72% 30%, rgba(255, 120, 180, .45), transparent 70%),
		radial-gradient(40% 40% at 60% 78%, rgba(120, 200, 255, .30), transparent 70%);
	filter: blur(40px) saturate(1.2);
	animation: mk-aurora 18s ease-in-out infinite alternate;
	opacity: .75;
}
.e-con.mk-aurora::after {
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
	mix-blend-mode: overlay; opacity: .35;
}
@keyframes mk-aurora { 0% { transform: translate3d(-4%, -2%, 0) rotate(0deg); } 50% { transform: translate3d(3%, 4%, 0) rotate(8deg); } 100% { transform: translate3d(-2%, 2%, 0) rotate(-6deg); } }
.mk-aurora .elementor-heading-title { text-wrap: balance; }

/* Floating tags */
.mk-tags-wrap { position: absolute !important; inset: 0; pointer-events: none; z-index: 1; width: 100% !important; }
.mk-tags { position: relative; width: 100%; height: 100%; }
.mk-tag {
	position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: 999px;
	font: 500 13px/1 var(--mk-font-body); color: var(--mk-color-background);
	background: color-mix(in srgb, var(--mk-color-background) 12%, transparent); border: 1px solid color-mix(in srgb, var(--mk-color-background) 18%, transparent);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); will-change: transform;
}
.mk-tag i { width: 18px; height: 18px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 12px var(--dot); }
.mk-tag:nth-child(1) { left: 12%; top: 26%; } .mk-tag:nth-child(2) { right: 13%; top: 30%; }
.mk-tag:nth-child(3) { left: 7%; top: 64%; } .mk-tag:nth-child(4) { right: 9%; top: 68%; }
.mk-tag:nth-child(5) { left: 44%; top: 14%; }
@media (max-width: 900px) { .mk-tag:nth-child(n+3) { display: none; } .mk-tag:nth-child(1) { left: 4%; top: 12%; } .mk-tag:nth-child(2) { right: 4%; top: 16%; } }

/* Crossing bands */
.e-con.mk-bands { overflow: hidden; }
.e-con.mk-band { width: 110% !important; max-width: none !important; margin-left: -5% !important; }
.e-con.mk-band-a { transform: rotate(-3.5deg); z-index: 2; }
.e-con.mk-band-b { transform: rotate(2.5deg); margin-top: -40px !important; z-index: 1; }
.mk-band .mk-sep { color: var(--mk-color-signal); }
.mk-band-b .mk-sep { color: var(--mk-color-dark); }

/* Hover list (services) */
.e-con.mk-hover-row { position: relative; border-top: 1px solid color-mix(in srgb, var(--mk-color-text) 14%, transparent); transition: background-color .4s var(--mk-ease); cursor: pointer; }
.e-con.mk-hover-row:last-of-type { border-bottom: 1px solid color-mix(in srgb, var(--mk-color-text) 14%, transparent); }
.mk-hover-row .elementor-heading-title { transition: transform .5s var(--mk-ease); font-size: clamp(28px, 3.4vw, 46px); }
.mk-hover-row:hover .elementor-heading-title { transform: translateX(14px); }
.mk-row-num { color: var(--mk-color-muted); margin: 0; }
.mk-row-arrow { margin: 0; text-align: right; font-size: 28px; }
.mk-row-arrow a { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid currentColor; color: var(--mk-color-text); text-decoration: none; transition: background-color .3s, color .3s, transform .4s var(--mk-ease); }
.mk-hover-row:hover .mk-row-arrow a { background: var(--mk-color-signal); color: var(--mk-color-dark); border-color: transparent; transform: rotate(-45deg); }
.mk-hover-img { position: fixed !important; left: 0; top: 0; width: 260px !important; pointer-events: none; z-index: 50; opacity: 0; transform: scale(.85); transition: opacity .3s ease, transform .4s var(--mk-ease); }
.mk-hover-img img { border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.mk-hover-row.is-hover .mk-hover-img { opacity: 1; transform: scale(1); }
@media (hover: none), (max-width: 900px) { .mk-hover-img { display: none; } }

/* Chips */
.mk-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.mk-chip { display: inline-flex; align-items: center; padding: 10px 18px; margin-right: 12px; border-radius: 999px; background: var(--mk-color-background); color: var(--mk-color-dark); font: 600 16px/1 var(--mk-font-heading); white-space: nowrap; }
.mk-dark .mk-chip-marquee .mk-chip { background: var(--mk-color-background); }
.mk-chips.mk-chips-ghost .mk-chip { background: transparent; color: var(--mk-color-background); border: 1px solid color-mix(in srgb, var(--mk-color-background) 25%, transparent); font: 500 13px/1 var(--mk-font-body); }

/* Dark metric card */
.e-con.mk-metric { border-radius: calc(var(--mk-radius-card) * 1.4); overflow: hidden; }
.mk-metric .mk-big { font: 500 clamp(56px, 7vw, 96px)/1 var(--mk-font-heading); color: var(--mk-color-signal); letter-spacing: -.04em; margin: 0; }

/* Giant wordmark */
.mk-giant .elementor-heading-title { font-family: var(--mk-font-heading); font-weight: 600; font-size: clamp(56px, 15vw, 240px) !important; line-height: .85 !important; letter-spacing: -.06em; white-space: nowrap; color: var(--mk-color-signal) !important; }

/* Project cards */
.mk-project .elementor-widget-image img { transition: transform .8s var(--mk-ease); }
.mk-project:hover .elementor-widget-image img { transform: scale(1.04); }
.mk-project .elementor-widget-image .elementor-widget-container, .mk-project .elementor-widget-image { overflow: hidden; border-radius: var(--mk-radius-image); }
.mk-row-small .elementor-heading-title { font-size: clamp(20px, 2vw, 26px) !important; }
.mk-chips-left { justify-content: flex-start; }
.mk-chips-left .mk-chip { padding: 6px 12px; font: 500 12px/1 var(--mk-font-label); background: var(--mk-color-surface); border: 1px solid color-mix(in srgb, var(--mk-color-text) 12%, transparent); }
.mk-chips-ghost-marquee .mk-chip { background: transparent; color: var(--mk-color-background); border: 1px solid color-mix(in srgb, var(--mk-color-background) 25%, transparent); font: 500 13px/1 var(--mk-font-body); padding: 8px 14px; }
.mk-nav-mono .elementor-item { font-family: var(--mk-font-label) !important; font-size: 12px !important; letter-spacing: .08em; text-transform: uppercase; }
.mk-studio .mk-card { box-shadow: none; }
.mk-studio .elementor-location-header, .elementor-location-header:has(.mk-studio) { box-shadow: none; }
.elementor-location-header.mk-scrolled > .e-con.mk-studio { background-color: color-mix(in srgb, var(--mk-color-dark) 86%, transparent) !important; }
.mk-nowrap { white-space: nowrap; }
.mk-tag:nth-child(2) { right: 6%; top: 20%; }
.mk-tag:nth-child(1) { left: 9%; top: 22%; }
.mk-dark .mk-chips-ghost-marquee.mk-chip-marquee .mk-chip { background: transparent; color: var(--mk-color-background); border: 1px solid color-mix(in srgb, var(--mk-color-background) 28%, transparent); }
.mk-cta-signal .mk-pill-word { background: var(--mk-color-dark); color: var(--mk-color-signal); }
.mk-cta-signal .mk-eyebrow::before { background: var(--mk-color-dark); }
@media (max-width: 767px) {
	.mk-tag:nth-child(1) { left: 5%; top: 13%; } .mk-tag:nth-child(2) { right: 5%; top: 17%; }
	.mk-aurora .e-con.e-child { align-items: center; }
	.mk-aurora .e-child > .elementor-widget-button { width: auto; max-width: 100%; }
}