/* =========================================================
   BASE / RESET
========================================================= */

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

html { scroll-behavior: auto; } /* Lenis takes over smooth scrolling in JS */

body.mcg-body {
	background: var(--mcg-bg);
	color: var(--mcg-text);
	font-family: var(--mcg-font-body);
	font-size: var(--mcg-fs-body);
	line-height: var(--mcg-lh-normal);
	margin: 0;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; margin: 0; padding: 0; }

button {
	font-family: inherit;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	padding: 0;
}

h1, h2, h3, h4 {
	font-family: var(--mcg-font-display);
	text-transform: uppercase;
	line-height: var(--mcg-lh-tight);
	margin: 0;
	letter-spacing: var(--mcg-ls-wide);
}

p { margin: 0; }

:focus-visible {
	outline: 2px solid var(--mcg-orange);
	outline-offset: 3px;
}

/* Respect reduced motion system-wide; JS also checks this before
   initializing Lenis/GSAP scrub animations. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Layout utilities ---------- */
.mcg-section {
	position: relative;
	padding-block: var(--mcg-section-pad-y);
	padding-left: calc(var(--mcg-rail-width) + var(--mcg-gutter));
	padding-right: var(--mcg-gutter);
}

.mcg-section__inner {
	max-width: var(--mcg-container-max);
	margin-inline: auto;
}

.mcg-section__title {
	font-size: var(--mcg-fs-h2);
	margin-bottom: 1.25rem;
}

.mcg-section__title--center { text-align: center; }

.mcg-section__text {
	color: var(--mcg-text-muted);
	font-size: var(--mcg-fs-body-lg);
	max-width: 46ch;
}

.mcg-text-accent { color: var(--mcg-orange); }

/* ---------- Eyebrow label ---------- */
.mcg-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--mcg-fs-eyebrow);
	letter-spacing: var(--mcg-ls-eyebrow);
	text-transform: uppercase;
	color: var(--mcg-orange);
	font-weight: 600;
	margin-bottom: 1rem;
}
.mcg-eyebrow--center { display: flex; justify-content: center; width: 100%; }
.mcg-eyebrow__rule {
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--mcg-orange);
}

/* ---------- Buttons ---------- */
.mcg-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.9rem 1.6rem;
	font-size: var(--mcg-fs-small);
	font-weight: 700;
	letter-spacing: var(--mcg-ls-wide);
	text-transform: uppercase;
	border-radius: var(--mcg-radius-pill);
	transition: background var(--mcg-dur-fast) var(--mcg-ease), color var(--mcg-dur-fast) var(--mcg-ease), transform var(--mcg-dur-fast) var(--mcg-ease);
}
.mcg-btn--outline {
	border: 1px solid var(--mcg-orange);
	color: var(--mcg-orange);
}
.mcg-btn--outline:hover {
	background: var(--mcg-orange);
	color: var(--mcg-bg);
	transform: translateY(-2px);
}
.mcg-btn--sm { padding: 0.6rem 1.2rem; font-size: 0.75rem; }
.mcg-btn--lg { padding: 1.1rem 2.2rem; font-size: 0.9rem; }

.mcg-link-cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--mcg-orange);
	font-weight: 700;
	font-size: var(--mcg-fs-small);
	text-transform: uppercase;
	letter-spacing: var(--mcg-ls-wide);
}
.mcg-link-cta i { transition: transform var(--mcg-dur-fast) var(--mcg-ease); }
.mcg-link-cta:hover i { transform: translateX(4px); }

/* ---------- Logo lockup ---------- */
.mcg-logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}
.mcg-logo-mark {
	font-family: var(--mcg-font-display);
	color: var(--mcg-orange);
	font-size: 1.6rem;
	letter-spacing: 0.02em;
}
.mcg-logo-sub {
	font-size: 0.55rem;
	letter-spacing: var(--mcg-ls-eyebrow);
	color: var(--mcg-text-muted);
	text-transform: uppercase;
	margin-top: 2px;
}

/* ---------- Social icons ---------- */
.mcg-social-list { display: flex; gap: 0.6rem; }
.mcg-social-list a {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mcg-border-strong);
	border-radius: 50%;
	transition: border-color var(--mcg-dur-fast) var(--mcg-ease), color var(--mcg-dur-fast) var(--mcg-ease);
}
.mcg-social-list a:hover { border-color: var(--mcg-orange); color: var(--mcg-orange); }

/* ---------- Scroll reveal base states (animated via GSAP) ---------- */
.mcg-reveal-up,
.mcg-reveal-fade,
.mcg-reveal-scale,
.mcg-reveal-clip {
	will-change: transform, opacity;
}