/* Base: font faces, reset, element defaults, the typography roles. */
/* Font faces --------------------------------------------------------------- */
@font-face { font-family: Gilroy; font-weight: 400; font-style: normal; font-display: swap;
             src: url('../fonts/gilroy-400.woff2') format('woff2'); }
@font-face { font-family: Gilroy; font-weight: 500; font-style: normal; font-display: swap;
             src: url('../fonts/gilroy-500.woff2') format('woff2'); }
@font-face { font-family: Gilroy; font-weight: 600; font-style: normal; font-display: swap;
             src: url('../fonts/gilroy-600.woff2') format('woff2'); }
@font-face { font-family: Gilroy; font-weight: 700; font-style: normal; font-display: swap;
             src: url('../fonts/gilroy-700.woff2') format('woff2'); }

@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 700 800; font-style: normal; font-display: swap;
             src: url('../fonts/plus-jakarta-sans-var.woff2') format('woff2'); }

/* Reset -------------------------------------------------------------------- */
*, *::before, *::after          { box-sizing: border-box; }
*                               { margin: 0; }
html                            { -webkit-text-size-adjust: 100%; }
img, picture, video, svg        { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button                          { background: none; border: 0; }
ul[class], ol[class]            { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6, p       { overflow-wrap: break-word; }

/* Document ----------------------------------------------------------------- */
body { overflow-x: clip; background: var(--cp-color-bg-page); color: var(--cp-color-text-primary); font-family: var(--cp-font-body); font-size: var(--cp-text-body); line-height: var(--cp-leading-body); }

/* Headings ----------------------------------------------------------------- */
h1, .cp-h1 { font-family: var(--cp-font-heading); font-size: var(--cp-text-h1); line-height: var(--cp-leading-h1); letter-spacing: var(--cp-tracking-h1); font-weight: var(--cp-weight-bold); }
h2, .cp-h2 { font-family: var(--cp-font-heading); font-size: var(--cp-text-h2); line-height: var(--cp-leading-h2); letter-spacing: var(--cp-tracking-h2); font-weight: var(--cp-weight-bold); }
h3, .cp-h3 { font-family: var(--cp-font-heading); font-size: var(--cp-text-h3); line-height: var(--cp-leading-h3); letter-spacing: var(--cp-tracking-h3); font-weight: var(--cp-weight-semibold); }
h4, .cp-h4 { font-family: var(--cp-font-heading); font-size: var(--cp-text-h4); line-height: var(--cp-leading-h4); font-weight: var(--cp-weight-semibold); }
h5, .cp-h5 { font-family: var(--cp-font-heading); font-size: var(--cp-text-h5); line-height: var(--cp-leading-h5); font-weight: var(--cp-weight-semibold); }
h6 { font-family: var(--cp-font-heading); font-size: var(--cp-text-h5); line-height: var(--cp-leading-h5); font-weight: var(--cp-weight-semibold); }

/* Type roles --------------------------------------------------------------- */
.cp-display-xl  { font-family: var(--cp-font-heading); font-size: var(--cp-text-display-xl); line-height: var(--cp-leading-display-xl); letter-spacing: var(--cp-tracking-display-xl); font-weight: var(--cp-weight-bold); }
.cp-display     { font-family: var(--cp-font-heading); font-size: var(--cp-text-display); line-height: var(--cp-leading-display); letter-spacing: var(--cp-tracking-display); font-weight: var(--cp-weight-semibold); }
.cp-eyebrow     { font-size: var(--cp-text-eyebrow); line-height: var(--cp-leading-eyebrow); font-weight: var(--cp-weight-medium); }
.cp-body-title  { font-size: var(--cp-text-body-title); line-height: var(--cp-leading-body-title); font-weight: var(--cp-weight-semibold); }
.cp-body-large  { font-size: var(--cp-text-body-large); line-height: var(--cp-leading-body-large); }
.cp-body        { font-size: var(--cp-text-body); line-height: var(--cp-leading-body); }
.cp-body-tight  { font-size: var(--cp-text-body-tight); line-height: var(--cp-leading-body-tight); }
.cp-caption     { font-size: var(--cp-text-caption); line-height: var(--cp-leading-caption); }
.cp-label       { font-size: var(--cp-text-label); line-height: var(--cp-leading-label); letter-spacing: var(--cp-tracking-label); font-weight: var(--cp-weight-medium); }
.cp-whisper     { font-size: var(--cp-text-whisper); line-height: var(--cp-leading-whisper); letter-spacing: var(--cp-tracking-whisper); text-transform: uppercase; }
.cp-nav-link    { font-size: var(--cp-text-nav-link); line-height: var(--cp-leading-nav-link); }

/* Links -------------------------------------------------------------------- */
a                 { color: var(--cp-color-text-link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover           { text-decoration-thickness: 2px; }

/* Rich text ---------------------------------------------------------------- */
.cp-rich-text           { max-width: var(--cp-measure); }
.cp-rich-text > * + *   { margin-block-start: var(--cp-space-4); }
.cp-rich-text :where(h2, h3) { margin-block-start: var(--cp-space-8); }
.cp-rich-text ul,
.cp-rich-text ol        { padding-inline-start: var(--cp-space-6); }
.cp-rich-text li + li   { margin-block-start: var(--cp-space-2); }

/* Focus -------------------------------------------------------------------- */
:focus-visible { outline: 2px solid var(--cp-color-focus-ring); outline-offset: 2px; }

/* Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

/* Screen reader text ------------------------------------------------------- */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.screen-reader-text:focus,
.screen-reader-text:focus-within {
  position: static; width: auto; height: auto; padding: var(--cp-space-4);
  margin: 0; overflow: visible; clip-path: none; white-space: normal;
}