:root {
    font-size: 20px;
    --bg-light: #f8f9fa;
    --color0: #231f20;
    --color1: #72ccb2;
    --color2: #58c6c3;
    --color3: #7da2aa;
    --color4: #676767;
    --color5: #005c96;
    --color6: #d2eae4;
    --color7: #cdd7d9;
}

body { font-family: 'Barlow', sans-serif !important; font-weight: 400 !important; font-variant-ligatures: no-common-ligatures; line-height: 1.625 !important; color: var(--color0) !important; }

#primary .description blockquote > :last-child,
.description > :last-child,
.post, .page { margin-bottom: 0 !important; }

a,
button,
img,
svg,
.background { transition: all .4s; }

img { user-select: none; -webkit-user-drag: none; }

.background { background-repeat: no-repeat; background-position: center; background-size: cover; }

.background.contain { background-size: contain; }

.background.auto { background-size: auto; }

.background.pointer { background-size: 102.5%; }

.background.pointer:hover,
.background.pointer:focus { background-size: 110%; }

h1,
.h1 { margin-bottom: 1rem; font-weight: 700 !important; color: var(--color1) !important; }

h2,
.h2 { margin-bottom: 1rem; font-weight: 700 !important; }

h3,
.h3 { margin-bottom: 1rem; font-weight: 700 !important; color: var(--color2) !important; }

h4 { margin-bottom: 1rem; font-weight: 600 !important; }

.h4 { margin-bottom: 1rem; }

#primary .description h1:not(:first-child),
#primary .description .h1:not(:first-child),
#primary .description h2:not(:first-child),
#primary .description .h2:not(:first-child),
#primary .description h3:not(:first-child),
#primary .description .h3:not(:first-child),
#primary .description h4:not(:first-child),
#primary .description .h4:not(:first-child) { padding-top: 1rem; }

#primary .description a:not(.btn) { color: var(--color1); }

#primary .description a:not(.btn):hover,
#primary .description a:not(.btn):focus,
#primary .description a:not(.btn):active { color: var(--color2) !important; }

#primary .description ul,
#primary .description ol { margin: 0; margin-bottom: 1rem; padding: 0; padding-left: 21px; }

#primary .description ul > li > ul,
#primary .description ol > li > ul,
#primary .description ul > li > ol,
#primary .description ol > li > ol { margin-bottom: 0; }

#primary .description blockquote > p { color: var(--color1); }

#primary .description blockquote:not(:first-child) { padding-top: 1rem; }

#primary .description h3 + blockquote { padding-top: 0 !important; }

#header-wrapper { position: sticky; top: 0; }

#top-bar { background-color: var(--color0); font-size: .75rem; color: #fff; }

#colophon { background-color: var(--color0); font-size: .75rem; color: var(--color4); }

.site-info { background-color: var(--color4); font-size: .75rem; color: #fff; }

#top-bar #site-navigation ul { display: flex; flex-wrap: wrap; }

#top-bar #site-navigation ul li:not(:last-child) { margin-right: 1.25rem; }

#colophon a,
.site-info a,
#top-bar #site-navigation ul li a { color: #fff; }

#colophon a:hover,
#colophon a:focus,
.site-info a:hover,
.site-info a:focus { text-decoration: none; }

#top-bar #site-navigation ul li a.is-active,
#top-bar #site-navigation ul li a:hover,
#top-bar #site-navigation ul li a:focus { color: var(--color1); text-decoration: none; }

#masthead { background-color: var(--color6); position: relative; z-index: 1; }

#masthead .site-branding .custom-logo,
#masthead.is-scrolled .site-branding .custom-logo { height: calc(98px * .625); }

#colophon .company-branding svg { width: 100%; max-width: 264.883px; }

#colophon .company-branding svg path,
#colophon .company-branding svg polygon { fill: var(--color3); }

.skew-wrapper { position: relative; z-index: 1; }

.skew-wrapper .skew-over,
.skew-wrapper .skew-below { width: 100%; height: 27px; }

.skew-wrapper .skew-over { background-color: var(--color6); position: absolute; bottom: .5vw; transform: rotate(-1deg); }

.skew-wrapper .skew-below { background: linear-gradient(to right, var(--color6) 25%, var(--color5) 75%); }

.hero-wrapper { background-color: var(--color7); position: relative; z-index: -1; }

.hero-wrapper #hero { aspect-ratio: 2.5 / 1; width: 100%; min-height: 360px; background-repeat: no-repeat; background-size: auto 155%, auto 90%, auto 155%; background-position: 46% 125px, 2.5% 40px, 97.5% 70px; -webkit-filter: drop-shadow(0 0 100px #fff) blur(0) grayscale(0); filter: drop-shadow(0 0 100px #fff) blur(0) grayscale(0); animation: hero .8s; }

@keyframes hero {
    from { background-position: 46% 145px, 0% 60px, 100% 90px; -webkit-filter: drop-shadow(0 0 0 var(--color2)) blur(10px) grayscale(1); filter: drop-shadow(0 0 0 var(--color2)) blur(10px) grayscale(1); opacity: 0; }
    to { background-position: 46% 125px, 2.5% 40px, 97.5% 70px; -webkit-filter: drop-shadow(0 0 100px #fff) blur(0) grayscale(0); filter: drop-shadow(0 0 100px #fff) blur(0) grayscale(0); opacity: 1; }
}

.hero-wrapper .square { position: absolute; }

.hero-wrapper .square.medium { aspect-ratio: 275 / 243; width: 14vw; max-width: calc(275px * .5); background-color: var(--color2); right: 10.5%; bottom: -7%; }

.hero-wrapper .square.large { aspect-ratio: 397 / 369; width: 20vw; max-width: calc(397px * .5); background-color: var(--color1); right: 0; bottom: -4.5%; }

section[id] { scroll-margin-top: 167.633px; }

section[id]:nth-of-type(2) { background-color: var(--bg-light); }

section[id]:nth-of-type(3) { background-color: var(--color6); }

section[id] .person-wrapper,
section[id] .youtube-wrapper { overflow: hidden; }

section[id] .person-wrapper .background { aspect-ratio: 1280 / 430; }

section[id] .youtube-wrapper iframe { display: flex; aspect-ratio: 16 / 9; width: 100%; height: auto; }

section[id] a { color: var(--color5); }

section[id] a:hover,
section[id] a:focus { text-decoration: none; }

#go-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 12px, 0);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility 0s linear .2s;
}

#go-top.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);

    transition:
        opacity .2s ease,
        transform .2s ease,
        visibility 0s linear 0s;
}

#go-top a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: 50%;

    background-color: var(--color5);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);

    -webkit-tap-highlight-color: transparent;
    user-select: none;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        opacity .15s ease;
}

#go-top a:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

#go-top a:active {
    transform: translateY(0);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}

#go-top a:focus-visible {
    outline: 2px solid var(--color5);
    outline-offset: 3px;
}

#go-top svg {
    display: block;
    fill: #fff;
}

@media (max-width: 767.98px) {
    #go-top {
        right: 16px;
        bottom: 16px;
    }

    #go-top a {
        width: 48px;
        height: 48px;
    }

    #go-top svg {
        width: 20px;
        height: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #go-top,
    #go-top.active,
    #go-top a {
        transition: none;
    }

    #go-top,
    #go-top.active,
    #go-top a:hover,
    #go-top a:active {
        transform: none;
    }
}

@media ( min-width: 576px ) {
    .hero-wrapper #hero { background-size: auto 215%, auto 135%, auto 200%; background-position: 51% 40px, 2.5% 40px, 97.5% 70px; }
    .hero-wrapper .square.medium { right: 10.5%; bottom: -16%; }
    .hero-wrapper .square.large { bottom: -11.5%; }
    @keyframes hero {
        from { background-position: 51% 60px, 0% 60px, 100% 90px; -webkit-filter: drop-shadow(0 0 0 var(--color2)) blur(10px) grayscale(1); filter: drop-shadow(0 0 0 var(--color2)) blur(10px) grayscale(1); opacity: 0; }
        to { background-position: 51% 40px, 2.5% 40px, 97.5% 70px; -webkit-filter: drop-shadow(0 0 100px #fff) blur(0) grayscale(0); filter: drop-shadow(0 0 100px #fff) blur(0) grayscale(0); opacity: 1; }
    }
}

@media ( min-width: 768px ) {
    #masthead .site-branding .custom-logo { height: 98px; }
    .hero-wrapper #hero { background-position: 50.5% 40px, 7% 40px, 95% 70px; }
    .hero-wrapper .square.medium { right: 10.5%; bottom: -21%; }
    .hero-wrapper .square.large { bottom: -16.5%; }
    section[id] .person-wrapper { min-height: 414.833px; }
    @keyframes hero {
        from { background-position: 50.5% 60px, 4.5% 60px, 97.5% 90px; -webkit-filter: drop-shadow(0 0 0 var(--color2)) blur(10px) grayscale(1); filter: drop-shadow(0 0 0 var(--color2)) blur(10px) grayscale(1); opacity: 0; }
        to { background-position: 50.5% 40px, 7% 40px, 95% 70px; -webkit-filter: drop-shadow(0 0 100px #fff) blur(0) grayscale(0); filter: drop-shadow(0 0 100px #fff) blur(0) grayscale(0); opacity: 1; }
    }
}

@media ( min-width: 992px ) {
    .hero-wrapper #hero { background-position: 49.5% 40px, 19.5% 40px, 79.5% 70px; }
    .hero-wrapper .square.medium { right: 9%; bottom: -21%; }
    section[id] .person-wrapper { min-height: 399.367px; }
    @keyframes hero {
        from { background-position: 49.5% 60px, 17% 60px, 82% 90px; -webkit-filter: drop-shadow(0 0 0 var(--color2)) blur(10px) grayscale(1); filter: drop-shadow(0 0 0 var(--color2)) blur(10px) grayscale(1); opacity: 0; }
        to { background-position: 49.5% 40px, 19.5% 40px, 79.5% 70px; -webkit-filter: drop-shadow(0 0 100px #fff) blur(0) grayscale(0); filter: drop-shadow(0 0 100px #fff) blur(0) grayscale(0); opacity: 1; }
    }
}

@media ( min-width: 1200px ) {
    .hero-wrapper #hero { background-position: 50% 40px, 20% 40px, 80% 70px; }
    .hero-wrapper .square.medium { right: 7.5%; bottom: -20.5%; }
    section[id] .person-wrapper { min-height: 433.267px; }
    @keyframes hero {
        from { background-position: 50% 60px, 17.5% 60px, 82.5% 90px; -webkit-filter: drop-shadow(0 0 0 var(--color2)) blur(10px) grayscale(1); filter: drop-shadow(0 0 0 var(--color2)) blur(10px) grayscale(1); opacity: 0; }
        to { background-position: 50% 40px, 20% 40px, 80% 70px; -webkit-filter: drop-shadow(0 0 100px #fff) blur(0) grayscale(0); filter: drop-shadow(0 0 100px #fff) blur(0) grayscale(0); opacity: 1; }
    }
}

@media ( min-width: 1400px ) {
    .hero-wrapper .square.medium { right: 6%; bottom: -20%; }
    section[id] .person-wrapper { min-height: 427.5px; }
}