:root {
  --mc-ink: #15323a;
  --mc-deep: #10272e;
  --mc-night: #0c2026;
  --mc-slate: #52666b;
  --mc-sage: #6f9993;
  --mc-copper: #c4785a;
  --mc-copper-dark: #a96047;
  --mc-sand: #d0b889;
  --mc-ivory: #f6f2ea;
  --mc-mist: #e8eeea;
  --mc-paper: #fffefb;
}

body {
  background: var(--mc-paper);
  color: var(--mc-ink);
}

::selection {
  background: color-mix(in srgb, var(--mc-copper) 32%, transparent);
}

.bg-blue-600 { background-color: var(--mc-ink); }
.bg-blue-500 { background-color: var(--mc-copper); }
.bg-blue-100, .bg-blue-50 { background-color: var(--mc-mist); }
.bg-gray-900 { background-color: var(--mc-night); }
.bg-gray-800 { background-color: var(--mc-deep); }
.bg-gray-100 { background-color: var(--mc-ivory); }
.bg-gray-200 { background-color: #dce5e1; }
.bg-white { background-color: var(--mc-paper); }

.text-blue-600 { color: var(--mc-copper-dark); }
.text-blue-500 { color: var(--mc-copper); }
.text-blue-300 { color: #b9cfca; }
.text-gray-900 { color: var(--mc-ink); }
.text-gray-600, .text-gray-500 { color: var(--mc-slate); }
.text-gray-400 { color: #8ca09e; }
.text-gray-100 { color: var(--mc-ivory); }
.text-emerald-500 { color: var(--mc-sage); }
.text-white\/85 { color: rgb(255 255 255 / 0.85); }
.text-white\/80 { color: rgb(255 255 255 / 0.8); }
.text-white\/75 { color: rgb(255 255 255 / 0.75); }
.text-white\/65 { color: rgb(255 255 255 / 0.65); }
.bg-white\/92 { background-color: rgb(255 254 251 / 0.92); }
.backdrop-blur { backdrop-filter: blur(8px); }
.\!text-blue-600 { color: var(--mc-copper-dark) !important; }

.fill-blue-600, .fill-blue-500 { fill: var(--mc-copper); }
.fill-blue-100 { fill: var(--mc-ivory); }
.fill-sky-400, .fill-sky-300 { fill: var(--mc-sage); }
.fill-emerald-400 { fill: var(--mc-copper); }
.border-blue-500 { border-color: color-mix(in srgb, var(--mc-sage) 45%, transparent); }
.from-gray-900 { --tw-gradient-from: var(--mc-night); }

.hover\:bg-blue-600:hover, .hover\:bg-blue-500:hover { background-color: var(--mc-copper-dark); }
.hover\:bg-gray-800:hover { background-color: #1b373e; }
.hover\:bg-blue-50:hover { background-color: var(--mc-mist); }
.hover\:text-blue-600:hover, .hover\:text-blue-500:hover { color: var(--mc-copper-dark); }

.btn, .btn-sm {
  border-radius: 0.375rem;
  box-shadow: none;
  letter-spacing: -0.01em;
}

.h1, .h2, .h3, .h4, .mc-wordmark {
  letter-spacing: -0.035em;
}

.h1 {
  max-width: 13ch;
  margin-inline: auto;
}

.mc-kicker {
  color: var(--mc-sand);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.mc-wordmark {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
}

.mc-photo {
  border-radius: 0.375rem;
  filter: saturate(0.68) contrast(0.94) sepia(0.06);
}

.mc-trust-card {
  width: 15rem !important;
  min-height: 7rem;
  border: 1px solid color-mix(in srgb, var(--mc-sage) 20%, transparent);
  background: color-mix(in srgb, var(--mc-deep) 88%, white);
}

.mc-service-card {
  border: 1px solid #dce5e1;
  background: var(--mc-paper);
  transition: border-color 160ms ease, transform 160ms ease;
}

.mc-service-card:hover {
  border-color: color-mix(in srgb, var(--mc-copper) 55%, #dce5e1);
  transform: translateY(-2px);
}

.mc-soft-surface { background: var(--mc-ivory); }

/* Utilities used by the MoveCo layer but absent from Talent's compiled source set. */
.pt-32 { padding-top: 8rem; }
.pb-20 { padding-bottom: 5rem; }
.pb-9 { padding-bottom: 2.25rem; }
.pb-6 { padding-bottom: 1.5rem; }
.py-16 { padding-block: 4rem; }
.py-14 { padding-block: 3.5rem; }
.py-10 { padding-block: 2.5rem; }
.py-3 { padding-block: 0.75rem; }
.p-7 { padding: 1.75rem; }
.mb-14 { margin-bottom: 3.5rem; }
.mb-9 { margin-bottom: 2.25rem; }
.mb-7 { margin-bottom: 1.75rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-4 { margin-top: 1rem; }
.mr-7 { margin-right: 1.75rem; }
.gap-10 { gap: 2.5rem; }
.gap-7 { gap: 1.75rem; }
.gap-5 { gap: 1.25rem; }
.gap-2\.5 { gap: 0.625rem; }
.space-y-7 > :not(:last-child) { margin-bottom: 1.75rem; }
.w-10 { width: 2.5rem; }
.max-w-xs { max-width: 20rem; }
.bottom-4 { bottom: 1rem; }
.left-4 { left: 1rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.leading-tight { line-height: 1.25; }
.before\:w-24::before, .after\:w-24::after { width: 6rem; }

@media (min-width: 768px) {
  .h1 { font-size: 4rem; line-height: 1.04; }
  .md\:pt-44 { padding-top: 11rem; }
  .md\:pb-24 { padding-bottom: 6rem; }
  .md\:pb-14 { padding-bottom: 3.5rem; }
  .md\:py-24 { padding-block: 6rem; }
  .md\:py-16 { padding-block: 4rem; }
  .md\:p-9 { padding: 2.25rem; }
  .md\:mb-16 { margin-bottom: 4rem; }
  .md\:space-x-10 > :not(:last-child) { margin-right: 2.5rem; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
}

@media (min-width: 640px) {
  .sm\:bottom-6 { bottom: 1.5rem; }
  .sm\:left-6 { left: 1.5rem; }
  .sm\:col-span-4 { grid-column: span 4 / span 4; }
  .sm\:flex-row { flex-direction: row; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:col-span-5 { grid-column: span 5 / span 5; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
  .lg\:gap-16 { gap: 4rem; }
  .lg\:max-w-sm { max-width: 24rem; }
  .lg\:space-x-20 > :not(:last-child) { margin-right: 5rem; }
}
