@font-face {
  font-family: "Poppins";
  src: url("./assets/fonts/poppins/poppins-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./assets/fonts/poppins/poppins-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./assets/fonts/poppins/poppins-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Poppins";
  src: url("./assets/fonts/poppins/poppins-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

body {
  margin: 0;
  background: var(--viox-surface);
  color: var(--viox-text);
  font-family: var(--viox-font);
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

.wp-site-blocks,
.wp-site-blocks > * {
  margin-block-start: 0;
}

.viox-page-shell,
.viox-page-shell > .wp-block-post-content {
  max-width: none;
  margin: 0;
  padding: 0;
}

input,
select,
textarea {
  border-radius: var(--viox-radius-card);
}

a {
  color: var(--viox-red);
}

a:hover {
  color: var(--viox-red-hover);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--viox-heading);
  font-family: var(--viox-font);
}

h1 {
  font-size: clamp(44px, 5vw, 56px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

h2 {
  font-size: clamp(38px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.14;
}

h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.3;
}

.viox-body {
  font-size: 16px;
  line-height: 1.7;
}

.viox-lead {
  color: var(--viox-text);
  font-size: clamp(18px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.6;
}

.viox-label {
  color: var(--viox-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.viox-spec {
  font-feature-settings: "tnum" 1;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

.viox-container,
.viox-shell {
  width: min(var(--viox-container), calc(100% - (2 * var(--viox-gutter-desktop))));
  margin-inline: auto;
}

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

.viox-dark-surface,
.viox-surface--dark {
  background: var(--viox-dark);
  color: #d7dee6;
}

.viox-dark-surface h1,
.viox-dark-surface h2,
.viox-dark-surface h3,
.viox-surface--dark h1,
.viox-surface--dark h2,
.viox-surface--dark h3 {
  color: #ffffff;
}

.viox-dark-surface p,
.viox-dark-surface .viox-lead,
.viox-dark-surface .viox-body,
.viox-surface--dark p,
.viox-surface--dark .viox-lead,
.viox-surface--dark .viox-body {
  color: #d7dee6;
}

:focus-visible {
  outline: 3px solid var(--viox-red);
  outline-offset: 3px;
}

/* Pointer activation should not leave a browser focus ring around links.
 * Keyboard navigation keeps the visible :focus-visible treatment above. */
a:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

@media (max-width: 1024px) {
  .viox-container,
  .viox-shell {
    width: calc(100% - (2 * var(--viox-gutter-tablet)));
  }
}

@media (max-width: 600px) {
  h1 {
    font-size: clamp(32px, 10vw, 38px);
    line-height: 1.12;
  }

  h2 {
    font-size: clamp(27px, 8vw, 34px);
    line-height: 1.15;
  }

  h3 {
    font-size: clamp(20px, 6vw, 24px);
  }

  .viox-container,
  .viox-shell {
    width: calc(100% - (2 * var(--viox-gutter-mobile)));
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }
}