/* MHG Industrial — Base styles (see docs/BRAND.md) */

:root {
  --color-blue: #0D5EB1;
  --color-navy: #182B54;
  --color-navy-dark: #0f2744;
  --color-white: #FFFFFF;
  --color-gray-100: #F4F5F7;
  --color-gray-200: #D9D9D9;
  --color-gray-400: #7D8189;
  --color-gray-900: #111111;
  --color-blue-light: #CEDEE6;
  --color-whatsapp: #25D366;

  --font-display: "Inter", system-ui, sans-serif;
  --font-body: "Source Sans 3", system-ui, sans-serif;
  --logo-tracking: -0.04em;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: clamp(2rem, 5vw, 3rem);

  --container-max: 1200px;
  --container-narrow: 800px;
  --container-padding: clamp(1rem, 4vw, 2rem);
  --section-space: clamp(3rem, 8vw, 6rem);
  --card-radius: 4px;
  --button-radius: 4px;

  --header-height: 72px;
  --transition: 0.2s ease;
}

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-gray-900);
  background: var(--color-white);
}

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

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

a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-navy);
  margin: 0 0 1rem;
}

h1 { font-size: var(--text-5xl); font-weight: 800; }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0 0 1rem; max-width: 65ch; }

ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
  padding-block: var(--section-space);
}

.section--gray { background: var(--color-gray-100); }
.section--navy { background: var(--color-navy); color: var(--color-white); }
.section--navy h2, .section--navy h3 { color: var(--color-white); }
.section--navy p { color: rgba(255,255,255,0.88); }

.section__header {
  text-align: center;
  margin-bottom: 3rem;
}

.section__header p {
  margin-inline: auto;
  color: var(--color-gray-400);
  font-size: var(--text-lg);
}

.lead { font-size: var(--text-lg); line-height: 1.75; }

.page-hero {
  padding-block: 4rem 3rem;
  background: var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-200);
}
.page-hero--compact {
  padding-block: 2rem 1.75rem;
}
.page-hero h1,
.page-hero h2 { margin-bottom: 0.75rem; }
.page-hero p { color: var(--color-gray-400); margin: 0; max-width: 60ch; }