/* Outfit is enqueued from functions.php (display=swap). Do not @import fonts here. */

/* Design tokens from Elementor Kit (elementor-kit-7) on midofficedata.com.
   Semantic aliases only — never use Elementor class names in markup. */
:root {
  --font: "Outfit", sans-serif;

  --color-primary: #1f3e4a;
  --color-primary-alt: #203e49;
  --color-ink: #030303;
  --color-ink-soft: #000000cc;
  --color-muted: #00000099;
  --color-white: #ffffff;
  --color-surface: #f4f7fc;
  --color-surface-alt: #e6f1f9;
  --color-card: #e9eced;
  --color-gray: #e5e7eb;
  --color-accent: #0071c1;
  --color-cyan: #00aed0;
  --color-sky: #01b0f1;
  --color-green: #0fb587;
  --color-green-soft: #e7f8f3;
  --color-ice: #e6f7fe;
  --color-mint-text: #bbfbff;
  --color-highlight: #fcffa8;
  --color-lilac: #e0dbff;
  --color-pink: #ffd7f9;
  --color-blue-wash: #d6e7ff;

  --text-display-size: 60px;
  --text-display-weight: 600;
  --text-display-line: 60px;

  --text-h1-size: 48px;
  --text-h1-weight: 500;
  --text-h1-line: 50px;

  --text-h2-size: 36px;
  --text-h2-weight: 500;
  --text-h2-line: 48px;

  --text-h3-size: 32px;
  --text-h3-weight: 500;
  --text-h3-line: 50px;

  --text-h4-size: 30px;
  --text-h4-weight: 600;
  --text-h4-line: 40px;
  --text-h4-tracking: -0.7px;

  --text-h5-size: 28px;
  --text-h5-weight: 600;
  --text-h5-line: 35px;

  --text-lead-size: 18px;
  --text-lead-weight: 500;
  --text-lead-line: 26px;

  --text-body-size: 18px;
  --text-body-weight: 400;
  --text-body-line: 26px;

  --text-small-size: 16px;
  --text-small-weight: 500;
  --text-small-line: 24px;

  --radius-pill: 100px;
  --radius-card: 30px;
  --radius-btn: 48px;
  --radius-image: 24px;
  --media-split-ratio: 4 / 3;

  --space-page-x: 100px;
  --space-page-x-md: 40px;
  --space-page-x-sm: 16px;
  --space-section: 30px;
  --shadow-header: 0 4px 20px rgba(244, 247, 252, 0.05);
  --shadow-float: 0 18px 40px rgba(31, 62, 74, 0.12);

  --header-pill-bg: var(--color-surface);
  --header-height: 64px;
  --header-offset: calc(var(--header-height) + 8px);
  --logo-width: 220px;
  --cta-bg: var(--color-accent);
  --cta-pad: 14px 30px;
  --footer-bg: var(--color-primary);
  --footer-pad: 80px 100px 30px;
}

@media (max-width: 575.98px) {
  :root {
    --radius-card: 16px;
    --text-h2-size: 24px;
    --text-h2-line: 32px;
    --text-h3-size: 22px;
    --text-h3-line: 28px;
    --footer-pad: 28px 20px 20px;
  }
}

html {
  font-family: var(--font);
  color: var(--color-ink);
  background: var(--color-white);
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .fade-in,
  .fade-in.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-small-size);
  font-weight: 400;
  line-height: 30px;
  color: var(--color-ink);
  background: var(--color-white);
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 12px;
  padding-left: 12px;
}

@media (min-width: 576px) {
  .container { max-width: 540px; }
}

@media (min-width: 768px) {
  .container { max-width: 720px; }
}

@media (min-width: 992px) {
  .container { max-width: 960px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}

@media (min-width: 1400px) {
  .container { max-width: 1320px; }
}