/** Foundations and global atmosphere */
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--cy-header-offset);
}

body.cy-design {
  color: var(--cy-ink-soft);
  background:
    radial-gradient(circle at 8% 8%, rgb(var(--cy-accent-rgb) / 6%), transparent 32rem),
    linear-gradient(180deg, var(--cy-paper-raised), var(--cy-paper));
  font-family: var(--cy-font-body);
  font-size: var(--cy-text-base);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.cy-design::before {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  content: "";
  opacity: .025;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, #000 0 1px, transparent 1px 4px),
    repeating-radial-gradient(circle at 80% 70%, #000 0 1px, transparent 1px 5px);
  background-size: 7px 7px, 11px 11px;
  mix-blend-mode: multiply;
}

body.cy-design ::selection {
  color: #fff;
  background: var(--cy-accent);
}

body.cy-design :where(h1, h2, h3, h4, h5, h6),
body.cy-design :where(h1, h2, h3, h4, h5, h6) a {
  color: var(--cy-ink);
  font-family: var(--cy-font-display);
  font-weight: 650;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* Avada and Slider Revolution often add an inline family to headings. */
body.cy-design :is(h1, h2, h3, h4, h5, h6),
body.cy-design .fusion-title .title-heading-tag,
body.cy-design .cy-home-hero-copy {
  font-family: var(--cy-font-display);
}

body.cy-design :where(h1) { font-size: var(--cy-text-hero); line-height: .98; }
body.cy-design :where(h2) { font-size: var(--cy-text-2xl); line-height: 1.08; }
body.cy-design :where(h3) { font-size: var(--cy-text-xl); line-height: 1.18; }
body.cy-design :where(h4) { font-size: var(--cy-text-lg); line-height: 1.3; }

body.cy-design :where(p, ul, ol) {
  text-wrap: pretty;
}

body.cy-design a {
  color: var(--cy-accent);
  text-decoration-thickness: .08em;
  text-underline-offset: .22em;
  transition: color var(--cy-duration-fast) ease, opacity var(--cy-duration-fast) ease;
}

body.cy-design a:hover,
body.cy-design a:focus-visible {
  color: var(--cy-accent-deep);
}

body.cy-design :focus-visible {
  outline: 3px solid var(--cy-accent-bright);
  outline-offset: 4px;
}

body.cy-design img {
  max-width: 100%;
  height: auto;
}

body.cy-design #main {
  position: relative;
  isolation: isolate;
  background: transparent;
}

body.cy-design #main::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 48%, rgb(var(--cy-accent-rgb) / 3%) 48% 49%, transparent 49% 100%),
    radial-gradient(circle at 88% 15%, rgb(var(--cy-accent-rgb) / 8%), transparent 24rem);
}

body.cy-design hr,
body.cy-design .fusion-separator {
  border-color: rgb(var(--cy-accent-rgb) / 24%);
}

body.cy-design .cy-kicker,
body.cy-design .fusion-title-size-six,
body.cy-design .title-heading-center:is(h5, h6) {
  color: var(--cy-accent);
  font-family: var(--cy-font-body);
  font-size: var(--cy-text-xs);
  font-weight: 750;
  letter-spacing: .2em;
  text-transform: uppercase;
}

body.cy-design .cy-kicker::before {
  display: inline-block;
  width: 2.6rem;
  height: 1px;
  margin-right: .75rem;
  vertical-align: middle;
  content: "";
  background: currentColor;
}

body.cy-design .screen-reader-text:focus {
  z-index: 100000;
}