/* =========================
   BASE / TOKENS / RESET
========================= */
:root {
  --brand-primary: #0b4f6c;
  --brand-primary-dark: #083d54;
  --brand-secondary: #4ea3a0;
  --brand-dark-blue: #29307a;

  --logo-blue-1: #0b4f6c;
  --logo-blue-2: #0a4763;
  --logo-blue-4: #0c5a73;
  --logo-blue-5: #0e6f7a;
  --logo-blue-6: #0a5366;

  --white: #ffffff;
  --black: #111111;
  --text-main: #0f1115;
  --text-body: #2b2f33;
  --text-muted: #6b737a;

  --container-wide: 1280px;
  --nav-height: 96px;

  --section-space-y: 130px;
  --section-gap: 72px;

  --mobile-side: 16px;
  --mobile-section-space-y: 90px;
  --mobile-image-gap: 104px;

  --radius-xl: 28px;
  --radius-lg: 24px;
  --radius-md: 20px;

  --shadow-soft: 0 18px 40px rgba(10, 74, 104, 0.08);
  --shadow-card: 0 14px 32px rgba(0, 72, 110, 0.08);

  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-distance: 18px;
  --reveal-distance-soft: 10px;

  --nav-static-start: #0e4f63;
  --nav-static-mid-1: #0c5466;
  --nav-static-mid-2: #0a4e63;
  --nav-static-end: #083f57;

  --nav-static-scrolled-start: #0d5f5f;
  --nav-static-scrolled-mid-1: #0c5c63;
  --nav-static-scrolled-mid-2: #0a5364;
  --nav-static-scrolled-end: #09495f;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  padding-top: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  background: #ffffff;
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
.section-copy h2,
.contact-cta-copy h2,
.quote-section-quote,
.footer-title,
.horizontal-copy h2 {
  font-family: "Montserrat", "Plus Jakarta Sans", sans-serif;
}

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

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

.section-container {
  width: min(var(--container-wide), calc(100% - 120px));
  margin: 0 auto;
}

/* =========================
   TYPOGRAPHY HELPERS
========================= */
.eyebrow,
.section-eyebrow,
.more-know-eyebrow,
.horizontal-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.eyebrow,
.section-eyebrow,
.more-know-eyebrow {
  letter-spacing: 0.18em;
  color: var(--brand-secondary);
}

.highlight-orange {
  color: #4ea3a0;
}