/* Self-hosted brand fonts (see /img/fonts) */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../img/fonts/poppins-400.woff2") format("woff2");
}

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

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

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

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

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../img/fonts/fraunces-normal-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../img/fonts/fraunces-italic-variable.woff2") format("woff2");
}

/* Our Process timeline: odd steps (01, 03, 05) sit in the left column and
   read inward toward the center rail; even steps stay left-aligned in the
   right column by default. */
@media (min-width: 1024px) {
  .process-steps > .relative:nth-child(odd) {
    text-align: right;
  }
}

/* Oversized "CC" watermark rings behind the hero copy */
.hero-watermark {
  pointer-events: none;
  background-image:
    radial-gradient(circle at center, transparent 0%, transparent 62%, rgba(199, 143, 90, 0.12) 62.5%, rgba(199, 143, 90, 0.12) 64%, transparent 64.5%),
    radial-gradient(circle at center, transparent 0%, transparent 62%, rgba(199, 143, 90, 0.12) 62.5%, rgba(199, 143, 90, 0.12) 64%, transparent 64.5%);
  background-repeat: no-repeat;
  background-position: -10% center, 22% center;
  background-size: 60% 130%, 60% 130%;
}
