/* fonts */
@font-face {
    src: url("../fonts/urbanist-var.woff2") format("woff2");
    font-family: "Urbanist";
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    src: local("Arial");
    font-family: "Urbanist Fallback";
    ascent-override: 97.5%;
    descent-override: 25.7%;
    size-adjust: 97.4%;
}
@font-face {
    src: url("../fonts/baskerville-var.woff2") format("woff2");
    font-family: "Libre Baskerville";
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    src: local("Georgia");
    font-family: "Libre Baskerville Fallback";
    ascent-override: 83.8%;
    descent-override: 23.3%;
    size-adjust: 115.8%;
}
/* tokens */
:root {
    --g1: rgb(246, 247, 250);
    --g2: rgb(236, 239, 244);
    --g3: rgb(214, 219, 228);
    --g4: rgb(108, 114, 126);
    --g5: rgb(30, 33, 40);
    --g6: rgb(27, 33, 44);
    --g7: rgb(44, 52, 66);
    --w0: rgb(255, 255, 255);
    --a1: rgb(18, 96, 112);
    --a2: rgb(150, 172, 190);
    --a3: rgb(13, 76, 90);
    --p1: rgb(222, 229, 242);
    --p2: rgb(224, 236, 236);
    --e1: rgb(168, 38, 52);
    --f1: "Urbanist", "Urbanist Fallback", Arial, sans-serif;
    --f2: "Libre Baskerville", "Libre Baskerville Fallback", Georgia, serif;
    --r1: 3px;
    --s1: 0 10px 24px -14px rgba(27, 33, 44, 0.32);
    --s2: 0 2px 8px rgba(27, 33, 44, 0.1);
    --d1: 20px;
    --t1: 64px;
    --u1: clamp(16px, 4vw, 40px);
    --w1: 1240px;
}
@media (min-width: 860px) {
    :root {
        --t1: 72px;
    }
}
/* reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    margin: 0;
    padding-top: var(--t1);
    font-family: var(--f2);
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--g5);
    background: var(--g1);
}
body.scroll-lock {
    overflow: hidden;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
h1,
h2,
h3 {
    margin: 0;
    font-family: var(--f1);
    font-weight: 500;
    line-height: 1.16;
    letter-spacing: -0.005em;
}
h2 {
    font-size: clamp(1.65rem, 1.2rem + 1.5vw, 2.4rem);
}
h3 {
    font-size: 1.3rem;
}
p {
    margin: 0 0 1em;
}
ul,
ol {
    margin: 0 0 1em;
}
figure {
    margin: 0;
}
a {
    color: var(--a1);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}
a:hover {
    color: var(--a3);
}
button,
input,
textarea {
    font: inherit;
}
:focus-visible {
    outline: 3px solid var(--a1);
    outline-offset: 3px;
}
table {
    border-collapse: collapse;
}
/* layout */
.wrap {
    max-width: var(--w1);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--u1);
    padding-right: var(--u1);
}
.page {
    overflow-x: clip;
}
.page:focus {
    outline: none;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.skip-link {
    position: absolute;
    top: -64px;
    left: 16px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
    font-family: var(--f1);
    font-weight: 600;
    color: var(--w0);
    background: var(--a1);
    border-radius: var(--r1);
}
.skip-link:focus {
    top: 10px;
    color: var(--w0);
}
/* type */
.tag-label {
    margin: 0;
    font-family: var(--f1);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--a1);
}
.mark {
    text-decoration: underline;
    text-decoration-color: rgba(18, 96, 112, 0.5);
    text-decoration-thickness: 0.2em;
    text-underline-offset: 0.08em;
    text-decoration-skip-ink: none;
}
/* buttons */
.btn-block {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 16px 24px;
    font-family: var(--f1);
    font-size: 1.06rem;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.02em;
    text-align: center;
    text-decoration: none;
    color: var(--w0);
    background: var(--a1);
    border: 0;
    border-radius: var(--r1);
    box-shadow: var(--s1);
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.btn-block:hover {
    color: var(--w0);
    background: var(--a3);
}
.btn-quiet {
    color: var(--g5);
    background: var(--g2);
    box-shadow: none;
}
.btn-quiet:hover {
    color: var(--g5);
    background: var(--g3);
}
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: var(--f1);
    font-weight: 600;
    text-decoration: none;
}
.arrow-link span {
    transition: translate 0.2s ease;
}
.arrow-link:hover span {
    translate: 4px 0;
}
@media (prefers-reduced-motion: reduce) {
    .btn-block,
    .arrow-link span {
        transition: none;
    }
}