@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/switzer-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #F7F4EE;
  color: #17140F;
  font-family: 'Switzer', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { cursor: pointer; }

/* Fade-and-rise on scroll into view. Elements are fully visible by default —
   JS only opts an element into the hidden starting state (vk-reveal) once it
   has confirmed IntersectionObserver support and the element is currently
   off-screen, so content can never get stuck at opacity 0. */
.vk-reveal { opacity: 0; transform: translateY(24px); }
.vk-reveal.vk-visible { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

@keyframes vaktaCaret { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
@keyframes vaktaFade { from { opacity: 0 } to { opacity: 1 } }

/* Long-form article body (blog posts) — same ink-on-paper tokens as the rest
   of the site, applied via class since an article has too many elements for
   the hand-inlined-style pattern used on the 4 marketing pages. */
.vk-article h2 { font-size: 1.7rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 52px 0 18px; color: #17140F; }
.vk-article h3 { font-size: 1.2rem; font-weight: 600; margin: 34px 0 12px; color: #17140F; }
.vk-article p { font-size: 1.05rem; line-height: 1.7; margin: 0 0 20px; color: #17140F; }
.vk-article ul, .vk-article ol { margin: 20px 0; padding-left: 22px; }
.vk-article li { font-size: 1.05rem; line-height: 1.7; margin-bottom: 8px; color: #17140F; }
.vk-article strong { font-weight: 600; }
.vk-article .vk-callout { border: 1px solid #E4DFD4; border-radius: 12px; padding: 24px 26px; margin: 40px 0; background: #F7F4EE; }
.vk-article .vk-callout p { margin: 0; }
.vk-article .vk-callout p + p { margin-top: 10px; }
.vk-article .vk-callout-label { font-weight: 600; display: block; margin-bottom: 8px; }

.vk-card { border: 1px solid #E4DFD4; border-radius: 12px; padding: 30px 32px; transition: border-color .15s ease; }
.vk-card:hover { border-color: #17140F; }

/* Mobile */
@media (max-width: 720px) {
  nav { flex-wrap: wrap; gap: 14px; }
  h1 { font-size: 2.5rem !important; }
  .vk-grid-3 { grid-template-columns: 1fr !important; }
  .vk-jmf-row, .vk-jmf-head { grid-template-columns: 1fr !important; }
  .vk-jmf-row > div, .vk-jmf-head > div { border-left: none !important; padding-left: 0 !important; }
  .vk-contact { flex-direction: column !important; }
}