/* ===========================================================
   Mavco - Base / Reset / Typography / Layout primitives
   =========================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	text-rendering: optimizeLegibility;
}

body {
	margin: 0;
	background: var(--mv-bg);
	color: var(--mv-text);
	font-family: var(--mv-font-body);
	font-size: var(--mv-fs-16);
	line-height: var(--mv-lh-base);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

a {
	color: var(--mv-link);
	text-decoration: none;
	transition: color var(--mv-dur-fast) var(--mv-ease);
}
a:hover { color: var(--mv-link-hover); }

p { margin: 0 0 1em; }

/* Headings - Barlow Semi Condensed, uppercase, bold */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--mv-font-head);
	font-weight: 700;
	line-height: var(--mv-lh-tight);
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: var(--mv-text);
	margin: 0 0 0.5em;
}

/* Barlow Semi Condensed has generous top half-leading above the cap-line.
   text-box-trim crops to cap-height + baseline so large numeric stats
   sit visually centered inside their tight colored containers. Limited
   to those few cases - everywhere else the half-leading provides useful
   visual padding. Progressive enhancement; older browsers fall back. */
@supports (text-box-edge: cap alphabetic) {
	.trust-strip__stat .value,
	.value-stat-card__num,
	.process__num {
		text-box: trim-both cap alphabetic;
	}
}
h1, .h1 { font-size: clamp(2.25rem, 4.6vw, var(--mv-fs-64)); letter-spacing: -0.005em; }
h2, .h2 { font-size: clamp(1.75rem, 3.2vw, var(--mv-fs-48)); }
h3, .h3 { font-size: clamp(1.4rem, 2.2vw, var(--mv-fs-32)); }
h4, .h4 { font-size: clamp(1.15rem, 1.6vw, var(--mv-fs-24)); }
h5, .h5 { font-size: var(--mv-fs-18); }
h6, .h6 { font-size: var(--mv-fs-16); }

/* Eyebrow / kicker */
.eyebrow {
	font-family: var(--mv-font-head);
	font-weight: 600;
	font-size: var(--mv-fs-14);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mv-lime-600);
	display: inline-block;
	margin: 0 0 var(--mv-s-3);
}

.lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--mv-text-muted); }

ul, ol { padding-left: 1.25rem; margin: 0 0 1em; }
ul.bare, ol.bare { list-style: none; padding: 0; margin: 0; }

hr { border: 0; height: 1px; background: var(--mv-border); margin: var(--mv-s-8) 0; }

::selection { background: var(--mv-lime); color: var(--mv-ink); }

/* Container */
.container {
	width: 100%;
	max-width: var(--mv-container);
	margin: 0 auto;
	padding-inline: var(--mv-gutter);
}
.container--wide   { max-width: var(--mv-container-wide); }
.container--narrow { max-width: var(--mv-container-narrow); }

/* Section padding scale */
.section { padding-block: clamp(3rem, 8vw, var(--mv-s-20)); }

/* Sticky-header offset so anchor jumps (#hero, #services, etc.) land below the bar */
[id] { scroll-margin-top: 96px; }
.section--tight  { padding-block: clamp(2rem, 5vw, var(--mv-s-12)); }
.section--loose  { padding-block: clamp(4rem, 10vw, var(--mv-s-24)); }
.section--forest { background: var(--mv-forest); color: var(--mv-bone); }
.section--forest h1,
.section--forest h2,
.section--forest h3,
.section--forest h4 { color: var(--mv-white); }
.section--forest .eyebrow { color: var(--mv-lime); }
.section--forest a { color: var(--mv-lime); }
.section--ink    { background: var(--mv-ink); color: var(--mv-bone); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--mv-white); }
.section--stone  { background: var(--mv-stone-100); }
.section--surface { background: var(--mv-surface); }

/* Accessibility */
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px);
	clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden;
	padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
:focus-visible {
	outline: 2px solid var(--mv-lime);
	outline-offset: 2px;
	border-radius: var(--mv-radius-sm);
}

/* Grid utilities */
.grid { display: grid; gap: var(--mv-s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.stack > * + * { margin-top: var(--mv-s-4); }
.stack-lg > * + * { margin-top: var(--mv-s-8); }

.text-center { text-align: center; }
.muted { color: var(--mv-text-muted); }

/* Phosphor icon (rendered as <i class="ph ph-{slug}">).
   Use inline-flex so the icon glyph centers cleanly inside <i>,
   eliminating the font-metric "top padding" inherent to icon fonts. */
.mavco-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	flex-shrink: 0;
	color: currentColor;
	vertical-align: -0.15em; /* baseline nudge for icons alongside text */
}
.mavco-icon::before {
	display: block;
	line-height: 1;
}