/* Marketing site styles — theme tokens are runtime-resolved from the app Settings Single
   (theme_primary_color, theme_accent_color, theme_font_heading, ...) by www/marketing.py and
   emitted as CSS custom properties in an inline <style> that overrides this :root. Re-skinning
   = changing tokens, never editing the rules below. The craft (sticky nav, type pairing,
   art-directed hero, alternating tones, scroll-reveal, bold archetype) is all token-driven.

   This is a STATIC asset, so :root carries valid fallback values. The REAL palette/fonts are
   injected at runtime by www/marketing.py as an inline <style> in the page <head>, loaded
   AFTER this stylesheet so it wins. Re-skin via Settings, never here. No raw palette hex
   appears outside this :root block — every rule references the var(--mk-*) tokens. */
:root {
	--mk-primary: #C6FF3A;
	--mk-accent: #C6FF3A;
	--mk-bg: #14181C;
	--mk-surface: #1E242B;
	--mk-ink: #F2F4F0;
	--mk-muted: #9AA6B2;
	--mk-font-heading: "Anton", "Arial Narrow", system-ui, sans-serif;
	--mk-font-body: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

	/* Banding + hairline tokens — runtime overridden by the inline <style>; defined here as a
	   safety net so alternating section tones render even without the inline override. */
	--mk-bg-alt: #0F1316;
	--mk-line: rgba(242, 244, 240, 0.12);
	--mk-err: #FF6B6B;

	/* Derived layout tokens (constant; tweak once, not per-skin). */
	--mk-maxw: 1180px;
	--mk-gap: 1.5rem;
	--mk-radius: 14px;
	--mk-radius-sm: 10px;
	--mk-pad-section: clamp(3.5rem, 8vw, 6.5rem);
	--mk-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
	--mk-shadow-sm: 0 12px 30px -20px rgba(0, 0, 0, 0.6);
	--mk-focus: 0 0 0 3px color-mix(in srgb, var(--mk-accent) 45%, transparent);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html { scroll-behavior: smooth; }

.mk-body {
	margin: 0;
	font-family: var(--mk-font-body);
	color: var(--mk-ink);
	background: var(--mk-bg);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--mk-font-heading);
	line-height: 1.06;
	letter-spacing: -0.01em;
	font-weight: 600;
	color: var(--mk-ink);
	margin: 0;
}

a { color: var(--mk-ink); text-decoration: none; }

img {
	max-width: 100%;
	height: auto;
}

/* Eyebrow — the small uppercase kicker above section titles. */
.mk-eyebrow {
	font-size: 0.8rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--mk-accent);
	margin: 0 0 0.7rem;
}

/* Accessibility: visible skip link + clear focus rings on every interactive element. */
.mk-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--mk-primary);
	color: var(--mk-bg);
	padding: 0.75rem 1rem;
	border-radius: 0 0 var(--mk-radius-sm) 0;
	z-index: 100;
}
.mk-skip-link:focus { left: 0; }

a:focus-visible,
.mk-btn:focus-visible {
	outline: none;
	box-shadow: var(--mk-focus);
	border-radius: 6px;
}

.mk-container {
	width: 100%;
	max-width: var(--mk-maxw);
	margin: 0 auto;
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* ---------- Sticky nav ---------- */
.mk-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	backdrop-filter: blur(12px);
	background: color-mix(in srgb, var(--mk-bg) 80%, transparent);
	border-bottom: 1px solid var(--mk-line);
}
.mk-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 74px;
}
.mk-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-family: var(--mk-font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}
.mk-brand__dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--mk-primary);
	color: var(--mk-bg);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
}
.mk-nav__links {
	display: flex;
	align-items: center;
	gap: 1.6rem;
}
.mk-nav__links a {
	color: var(--mk-muted);
	font-size: 0.95rem;
	font-weight: 600;
	transition: color 0.2s ease;
}
.mk-nav__links a:hover { color: var(--mk-ink); }
.mk-nav__login { letter-spacing: 0.01em; }
.mk-nav__cta { color: var(--mk-bg); }
.mk-nav__cta:hover { color: var(--mk-bg); }

/* ---------- Buttons ---------- */
.mk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--mk-font-body);
	font-weight: 700;
	font-size: 0.97rem;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	border: none;
	height: 54px;
	padding: 0 1.8rem;
	border-radius: 999px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mk-btn--primary {
	background: var(--mk-primary);
	color: var(--mk-bg);
	box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--mk-primary) 70%, transparent);
}
.mk-btn--primary:hover {
	transform: translateY(-2px);
	background: color-mix(in srgb, var(--mk-primary) 88%, white);
}
.mk-btn--accent {
	background: var(--mk-accent);
	color: var(--mk-bg);
}
.mk-btn--accent:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--mk-accent) 88%, white); }
.mk-btn--outline {
	background: transparent;
	color: var(--mk-ink);
	border: 1.5px solid color-mix(in srgb, var(--mk-ink) 55%, transparent);
}
.mk-btn--outline:hover { background: var(--mk-ink); color: var(--mk-bg); border-color: var(--mk-ink); }
.mk-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* ---------- Sections ---------- */
.mk-section {
	position: relative;
	padding-block: var(--mk-pad-section);
}
.mk-tone-alt { background: var(--mk-bg-alt); }

.mk-section__head {
	max-width: 42rem;
	margin: 0 0 2.8rem;
}
.mk-section__title {
	font-size: clamp(2rem, 4.6vw, 3.4rem);
	margin: 0;
}
.mk-section__subtext {
	color: var(--mk-muted);
	font-size: 1.12rem;
	margin: 0.9rem 0 0;
}

/* ---------- Hero ---------- */
.mk-hero {
	overflow: hidden;
	padding-block: clamp(4rem, 9vw, 7.5rem);
}
.mk-hero::after {
	/* subtle vignette + accent glow so the dark hero reads layered, not flat */
	content: "";
	position: absolute;
	inset: -30% -10% auto auto;
	width: 70%;
	height: 120%;
	background: radial-gradient(50% 55% at 75% 25%, color-mix(in srgb, var(--mk-accent) 18%, transparent), transparent 70%);
	pointer-events: none;
	z-index: 0;
}
.mk-hero__inner {
	position: relative;
	z-index: 1;
}
.mk-hero__title {
	font-size: clamp(2.6rem, 7vw, 5rem);
	margin: 0 0 1.1rem;
	text-transform: uppercase;
	line-height: 0.98;
}
.mk-hero__title em { font-style: italic; color: var(--mk-primary); }
.mk-hero__subtext {
	color: var(--mk-muted);
	font-size: clamp(1.1rem, 2.2vw, 1.3rem);
	max-width: 38ch;
	margin: 0 0 2rem;
}
.mk-hero__cta { display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* Hero with media — asymmetric split. */
.mk-hero--media .mk-hero__inner,
.mk-hero--art .mk-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(1.5rem, 5vw, 3.5rem);
	align-items: center;
}
.mk-hero__media {
	position: relative;
}
.mk-hero__media img {
	width: 100%;
	border-radius: var(--mk-radius);
	box-shadow: var(--mk-shadow);
	object-fit: cover;
	aspect-ratio: 4 / 3;
}
.mk-hero__media::after {
	/* accent corner accent to frame the photo */
	content: "";
	position: absolute;
	right: -10px;
	bottom: -10px;
	width: 42%;
	height: 42%;
	border-right: 3px solid var(--mk-accent);
	border-bottom: 3px solid var(--mk-accent);
	border-radius: 0 0 var(--mk-radius) 0;
}

/* Art direction (no photo) fallback. */
.mk-hero--art::before {
	content: "";
	position: absolute;
	inset: -25% -10% auto -10%;
	height: 90%;
	background:
		radial-gradient(55% 65% at 28% 22%, color-mix(in srgb, var(--mk-accent) 30%, transparent), transparent 60%),
		radial-gradient(50% 60% at 82% 30%, color-mix(in srgb, var(--mk-primary) 26%, transparent), transparent 60%);
	filter: blur(22px);
	z-index: 0;
}
.mk-arch {
	aspect-ratio: 3 / 4;
	border-radius: 10px;
	background: linear-gradient(160deg, color-mix(in srgb, var(--mk-accent) 70%, var(--mk-surface)), var(--mk-surface) 70%);
	box-shadow: var(--mk-shadow);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 1.6rem;
}

/* ---------- Stats band ---------- */
.mk-stats {
	background: var(--mk-bg-alt);
	border-block: 1px solid var(--mk-line);
	padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
.mk-stats__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	text-align: center;
}
.mk-stat { display: flex; flex-direction: column; gap: 0.35rem; }
.mk-stat__value {
	font-family: var(--mk-font-heading);
	font-size: clamp(2.6rem, 5.5vw, 3.8rem);
	line-height: 1;
	color: var(--mk-accent);
}
.mk-stat__label {
	color: var(--mk-muted);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
}

/* ---------- Card grids (features / services / team / pricing / testimonials) ---------- */
.mk-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mk-gap);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.mk-card {
	background: var(--mk-surface);
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	padding: 1.85rem;
	box-shadow: var(--mk-shadow-sm);
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.mk-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--mk-accent) 45%, var(--mk-line)); }
.mk-card__icon {
	display: inline-flex;
	font-size: 1.9rem;
	margin-bottom: 0.7rem;
}
.mk-card__title { font-size: 1.3rem; margin: 0 0 0.5rem; }
.mk-card__text { color: var(--mk-muted); margin: 0; }
.mk-card__role { color: var(--mk-accent); font-weight: 700; margin: 0 0 0.5rem; font-size: 0.95rem; }

/* Card imagery (features/services with an image render as media cards). */
.mk-card__img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: calc(var(--mk-radius) - 6px);
	margin: -0.35rem 0 1rem;
	display: block;
}
.mk-cards--media .mk-card { padding: 1rem; }

/* ---------- Editorial menu (list layout for services/features) ---------- */
.mk-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 3.5rem;
}
.mk-menu__row {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--mk-line);
}
.mk-menu__main { display: flex; flex-direction: column; }
.mk-menu__name { font-family: var(--mk-font-heading); font-size: 1.2rem; }
.mk-menu__meta { font-size: 0.85rem; color: var(--mk-muted); margin-top: 0.15rem; }
.mk-menu__lead { flex: 1; border-bottom: 1px dotted var(--mk-line); transform: translateY(-4px); }
.mk-menu__price { font-weight: 700; color: var(--mk-primary); white-space: nowrap; }

/* ---------- Team ---------- */
.mk-card--team { padding: 1rem; text-align: left; }
.mk-team__photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: calc(var(--mk-radius) - 5px);
	display: block;
	margin-bottom: 1.1rem;
	filter: saturate(1.05);
}
.mk-card--team .mk-card__title { margin-bottom: 0.2rem; }
.mk-card--team .mk-card__text { padding-bottom: 0.4rem; }
.mk-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--mk-accent), color-mix(in srgb, var(--mk-accent) 40%, var(--mk-surface)));
	color: var(--mk-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mk-font-heading);
	font-size: 1.5rem;
	margin-bottom: 1rem;
}

/* ---------- Pricing ---------- */
.mk-card--price {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	position: relative;
}
.mk-card--featured {
	border-color: var(--mk-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--mk-accent) 35%, transparent), var(--mk-shadow);
}
.mk-card__flag {
	position: absolute;
	top: -0.85rem;
	left: 1.85rem;
	background: var(--mk-accent);
	color: var(--mk-bg);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
}
.mk-card__price {
	font-family: var(--mk-font-heading);
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--mk-ink);
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
}
.mk-card__per { font-family: var(--mk-font-body); font-size: 0.9rem; font-weight: 600; color: var(--mk-muted); }
.mk-card__features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
	color: var(--mk-ink);
}
.mk-card__features li::before {
	content: "✓";
	color: var(--mk-accent);
	font-weight: 700;
	margin-right: 0.55rem;
}
.mk-card--price .mk-btn { margin-top: auto; width: 100%; }

/* ---------- Testimonials ---------- */
.mk-card--quote {
	background: var(--mk-surface);
	border: 1px solid var(--mk-line);
	border-left: 4px solid var(--mk-accent);
}
.mk-quote { margin: 0; }
.mk-quote__text { font-size: 1.12rem; margin: 0 0 1.2rem; color: var(--mk-ink); }
.mk-quote__author { display: flex; flex-direction: column; }
.mk-quote__name { font-weight: 700; }
.mk-quote__role { color: var(--mk-muted); font-size: 0.9rem; }

/* ---------- About / split ---------- */
.mk-split {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2rem, 5vw, 3.5rem);
	align-items: center;
}
.mk-about__lead { font-size: 1.25rem; color: var(--mk-ink); margin: 0.5rem 0 0; }
.mk-about__para { color: var(--mk-muted); margin: 1rem 0 0; }
.mk-about .mk-btn { margin-top: 1.6rem; }
.mk-about__card {
	background: var(--mk-surface);
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	padding: 2rem;
	box-shadow: var(--mk-shadow);
}
.mk-about__list { list-style: none; margin: 1rem 0 0; padding: 0; }
.mk-about__list li { padding: 0.8rem 0; border-bottom: 1px solid var(--mk-line); color: var(--mk-muted); }
.mk-about__list li:last-child { border-bottom: none; }
.mk-about__list strong { color: var(--mk-ink); font-family: var(--mk-font-heading); font-weight: 600; letter-spacing: 0.01em; }

/* ---------- Gallery ---------- */
.mk-gallery__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--mk-gap);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mk-gallery__cell { position: relative; }
.mk-gallery__cell img,
.mk-gallery__ph {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--mk-radius);
}
.mk-gallery__cell img { transition: transform 0.35s ease; }
.mk-gallery__cell:hover img { transform: scale(1.03); }
.mk-gallery__ph {
	background: linear-gradient(135deg, color-mix(in srgb, var(--mk-primary) 24%, var(--mk-surface)) 0%, color-mix(in srgb, var(--mk-accent) 24%, var(--mk-surface)) 100%);
}
.mk-gallery__cap { margin: 0.6rem 0 0; color: var(--mk-muted); font-size: 0.95rem; font-weight: 600; }

/* ---------- CTA banner ---------- */
.mk-cta { background: var(--mk-surface); text-align: center; border-block: 1px solid var(--mk-line); }
.mk-cta__title { color: var(--mk-ink); font-size: clamp(1.9rem, 4vw, 3rem); margin: 0 0 0.75rem; text-transform: uppercase; }
.mk-cta__subtext { color: var(--mk-muted); max-width: 50ch; margin: 0 auto 2rem; }

/* ---------- Footer ---------- */
.mk-footer { background: var(--mk-bg-alt); color: var(--mk-muted); padding-block: 3.5rem; border-top: 1px solid var(--mk-line); }
.mk-footer__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; align-items: center; }
.mk-footer__brand { font-family: var(--mk-font-heading); font-weight: 600; color: var(--mk-ink); margin: 0 0 0.4rem; display: flex; align-items: center; gap: 0.5rem; font-size: 1.3rem; text-transform: uppercase; }
.mk-footer__brand .mk-brand__dot { background: var(--mk-accent); }
.mk-footer__text { margin: 0; font-size: 0.95rem; }
.mk-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }
.mk-footer__links a { color: var(--mk-muted); font-weight: 600; font-size: 0.95rem; }
.mk-footer__links a:hover { color: var(--mk-accent); }

/* ---------- On-page capture form ---------- */
.mk-form-section { background: var(--mk-bg-alt); }
.mk-form { display: grid; gap: 1rem; max-width: 560px; }
.mk-field { display: grid; gap: 0.35rem; }
.mk-field label { font-weight: 600; font-size: 0.95rem; }
.mk-form input,
.mk-form textarea {
	font: inherit;
	color: var(--mk-ink);
	background: var(--mk-surface);
	border: 1.5px solid var(--mk-line);
	border-radius: var(--mk-radius-sm);
	padding: 0.8rem 0.95rem;
	width: 100%;
}
.mk-form input::placeholder,
.mk-form textarea::placeholder { color: color-mix(in srgb, var(--mk-muted) 80%, transparent); }
.mk-form input:focus-visible,
.mk-form textarea:focus-visible { outline: none; border-color: var(--mk-accent); box-shadow: var(--mk-focus); }
.mk-form .mk-btn { justify-self: start; }
.mk-form__status { margin: 0; font-size: 0.95rem; }
.mk-form__status--ok { color: var(--mk-accent); font-weight: 700; }
.mk-form__status--err { color: var(--mk-err); }

/* ---------- Scroll-reveal motion ----------
   Only hides content when JS is present (.mk-js) AND the body opted in (.mk-motion); the
   script re-adds .in. No-JS visitors, crawlers, and reduced-motion users always see content. */
.mk-js .mk-motion .mk-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
/* Show rule must match the hide rule's specificity (0,3,0) or higher, else the hide rule
   wins even after JS adds .in and content stays invisible forever. Scope it under the same
   .mk-js .mk-motion ancestors → specificity 0,4,0 beats the 0,3,0 hide rule. */
.mk-js .mk-motion .mk-reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.mk-js .mk-motion .mk-reveal { opacity: 1; transform: none; transition: none; }
	* { animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Bold archetype tuning ----------
   Fonts + palette come from the theme tokens. These rules tune shape/weight so the bold
   athletic direction reads distinctly: squared corners, uppercase display, heavier rhythm. */
.mk-style--bold { --mk-radius: 12px; --mk-radius-sm: 8px; }
.mk-style--bold .mk-section__title { text-transform: uppercase; letter-spacing: 0; }
.mk-style--bold .mk-btn { border-radius: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.mk-hero--media .mk-hero__inner,
	.mk-hero--art .mk-hero__inner { grid-template-columns: 1fr; }
	.mk-hero__aside { display: none; }
	.mk-split { grid-template-columns: 1fr; }
	.mk-menu { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
	.mk-cards { grid-template-columns: 1fr; }
	/* Keep the conversion path visible on mobile; drop the anchor links only. */
	.mk-nav__links a:not(.mk-nav__cta):not(.mk-nav__login) { display: none; }
}