@font-face {
    font-family: "HK Grotesk";
    src: url("../fonts/hkgrotesk-regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk";
    src: url("../fonts/hkgrotesk-semibold.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "HK Grotesk";
    src: url("../fonts/hkgrotesk-bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

.onz-resources-page {
    --onz-resources-ink: #172d3c;
    --onz-resources-deep: #0b202c;
    --onz-resources-paper: #f2f5f2;
    --onz-resources-white: #fff;
    --onz-resources-line: rgba(23, 45, 60, .17);
    --onz-resources-muted: #61717a;
    --onz-resources-accent: #f9a515;
    --onz-resources-green: #1ec999;
    color: var(--onz-resources-ink);
    background: var(--onz-resources-paper);
    font-family: "HK Grotesk", sans-serif;
}

.onz-resources-page .layout-wrapper.landing { overflow: clip; }

.onz-resources-main,
.onz-resources-main h1,
.onz-resources-main h2,
.onz-resources-main h3,
.onz-resources-main p,
.onz-resources-main a,
.onz-resources-main span,
.onz-resources-main strong,
.onz-resources-main small,
.onz-resources-main em { font-family: "HK Grotesk", sans-serif; }

.onz-resources-shell {
    width: min(1240px, calc(100% - 48px));
    margin-inline: auto;
}

.onz-resources-page .navbar-landing > .container,
.onz-resources-page .layout-wrapper.landing > section.bg-warning > .container,
.onz-resources-page .custom-footer > .container {
    width: min(1240px, calc(100% - 48px));
    max-width: none;
    padding-inline: 0;
}

.onz-resources-page .navbar-landing {
    min-height: 72px;
    border-bottom: 1px solid rgba(23, 45, 60, .1);
    background: rgba(246, 248, 247, .94);
    box-shadow: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.onz-resources-page .navbar-landing.is-sticky {
    background: rgba(255, 255, 255, .97) !important;
    box-shadow: 0 10px 35px rgba(13, 32, 44, .09);
}

.onz-resources-page .navbar-landing .nav-link {
    color: var(--onz-resources-ink) !important;
    font-size: 14px;
    font-weight: 600;
}

.onz-resources-page .navbar-landing .btn-success {
    padding: 11px 20px;
    color: var(--onz-resources-deep);
    border-color: var(--onz-resources-green);
    background: var(--onz-resources-green);
    font-weight: 700;
}

.onz-resources-kicker {
    margin: 0 0 20px;
    color: #b56c00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .15em;
    line-height: 1.2;
    text-transform: uppercase;
}

.onz-resources-hero {
    position: relative;
    min-height: 720px;
    overflow: hidden;
    color: var(--onz-resources-white);
    background:
        radial-gradient(circle at 70% 30%, rgba(30, 201, 153, .13), transparent 28%),
        var(--onz-resources-deep);
}

.onz-resources-hero::after {
    position: absolute;
    right: -9vw;
    bottom: -34vw;
    width: 58vw;
    height: 58vw;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    content: "";
}

.onz-resources-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(330px, .65fr);
    min-height: 720px;
    gap: 86px;
    align-items: center;
    padding-top: 112px;
    padding-bottom: 58px;
}

.onz-resources-hero__copy { max-width: 790px; }
.onz-resources-hero .onz-resources-kicker { color: var(--onz-resources-accent); }

.onz-resources-hero__copy > * {
    opacity: 0;
    transform: translateY(25px);
    animation: onz-resources-rise 720ms cubic-bezier(.2, .7, .2, 1) forwards;
}

.onz-resources-hero__copy > :nth-child(1) { animation-delay: 100ms; }
.onz-resources-hero__copy > :nth-child(2) { animation-delay: 210ms; }
.onz-resources-hero__copy > :nth-child(3) { animation-delay: 330ms; }
.onz-resources-hero__copy > :nth-child(4) { animation-delay: 440ms; }

.onz-resources-hero h1 {
    margin: 0;
    color: var(--onz-resources-white);
    font-size: clamp(60px, 6.6vw, 94px);
    font-weight: 600;
    letter-spacing: -.065em;
    line-height: .9;
}

.onz-resources-hero h1 span { color: var(--onz-resources-accent); }

.onz-resources-hero__copy > p:not(.onz-resources-kicker) {
    max-width: 650px;
    margin: 30px 0 34px;
    color: rgba(255, 255, 255, .74);
    font-size: 20px;
    line-height: 1.5;
}

.onz-resources-button {
    display: inline-flex;
    min-height: 56px;
    padding: 14px 24px;
    gap: 14px;
    align-items: center;
    justify-content: center;
    border: 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}

.onz-resources-button--accent { color: var(--onz-resources-deep); background: var(--onz-resources-accent); }
.onz-resources-button--accent:hover { color: var(--onz-resources-deep); background: var(--onz-resources-white); transform: translateY(-2px); }
.onz-resources-button--dark { color: var(--onz-resources-white); background: var(--onz-resources-deep); }
.onz-resources-button--dark:hover { color: var(--onz-resources-deep); background: var(--onz-resources-green); transform: translateY(-2px); }

.onz-resources-hero__media {
    position: relative;
    align-self: end;
    width: min(100%, 420px);
    height: 560px;
    margin: 0;
    opacity: 0;
    transform: translateY(35px);
    animation: onz-resources-rise 900ms 250ms cubic-bezier(.2, .7, .2, 1) forwards;
}

.onz-resources-hero__media::before {
    position: absolute;
    inset: -16px 16px 16px -16px;
    border: 1px solid rgba(249, 165, 21, .5);
    content: "";
}

.onz-resources-hero__media img {
    width: 100%;
    height: calc(100% + 30px);
    object-fit: cover;
    object-position: center calc(50% + var(--onz-resources-hero-shift, 0px));
    filter: saturate(.68) contrast(1.04);
}

.onz-resources-hero__media figcaption {
    position: absolute;
    right: -1px;
    bottom: -1px;
    display: grid;
    width: 74%;
    padding: 18px 20px;
    gap: 4px;
    color: var(--onz-resources-deep);
    background: var(--onz-resources-accent);
}

.onz-resources-hero__media figcaption span { font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.onz-resources-hero__media figcaption strong { font-size: 16px; line-height: 1.25; }

.onz-resources-index { border-bottom: 1px solid var(--onz-resources-line); background: var(--onz-resources-white); }

.onz-resources-index .onz-resources-shell {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}

.onz-resources-index .onz-resources-shell::-webkit-scrollbar { display: none; }

.onz-resources-index a {
    display: inline-flex;
    min-width: max-content;
    min-height: 72px;
    padding: 0 22px;
    gap: 8px;
    align-items: center;
    color: var(--onz-resources-ink);
    border-right: 1px solid var(--onz-resources-line);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 180ms ease, background 180ms ease;
}

.onz-resources-index a:first-child { border-left: 1px solid var(--onz-resources-line); }
.onz-resources-index a span { color: #8b989e; font-size: 10px; letter-spacing: .08em; }
.onz-resources-index a i { color: #8b989e; transition: transform 180ms ease; }
.onz-resources-index a:hover { color: var(--onz-resources-deep); background: rgba(249, 165, 21, .12); }
.onz-resources-index a:hover i { transform: translate(2px, -2px); }

.onz-resources-discover,
.onz-resources-work { padding-block: 126px 138px; }

.onz-resources-discover { scroll-margin-top: 72px; background: var(--onz-resources-paper); }
.onz-resources-work { background: var(--onz-resources-white); }

.onz-resources-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .55fr);
    gap: 88px;
    align-items: end;
    margin-bottom: 72px;
}

.onz-resources-heading h2,
.onz-resources-final h2 {
    max-width: 850px;
    margin: 0;
    color: var(--onz-resources-ink);
    font-size: clamp(48px, 5.3vw, 76px);
    font-weight: 600;
    letter-spacing: -.058em;
    line-height: .94;
}

.onz-resources-heading > p {
    margin: 0;
    color: var(--onz-resources-muted);
    font-size: 19px;
    line-height: 1.55;
}

.onz-resources-editorial {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(310px, .78fr);
    gap: 34px;
    align-items: start;
}

.onz-resources-story { display: block; color: var(--onz-resources-ink); text-decoration: none; }
.onz-resources-story:hover { color: var(--onz-resources-ink); }
.onz-resources-story__media { display: block; overflow: hidden; background: #dce2df; }
.onz-resources-story--primary .onz-resources-story__media { height: 540px; }
.onz-resources-story--secondary { margin-top: 118px; }
.onz-resources-story--secondary .onz-resources-story__media { height: 310px; }

.onz-resources-story__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(.2, .7, .2, 1), filter 300ms ease;
}

.onz-resources-story--primary .onz-resources-story__media img { object-position: center 39%; }
.onz-resources-story__copy { display: grid; padding-top: 26px; border-top: 1px solid var(--onz-resources-line); }
.onz-resources-story__copy small { margin-bottom: 12px; color: #9a6106; font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.onz-resources-story__copy strong { font-size: clamp(32px, 3vw, 47px); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.onz-resources-story__copy > span { max-width: 650px; margin-top: 17px; color: var(--onz-resources-muted); font-size: 17px; line-height: 1.5; }

.onz-resources-story__copy em,
.onz-resources-directory__item em,
.onz-resources-evolution__item em {
    display: inline-flex;
    width: fit-content;
    margin-top: 24px;
    gap: 9px;
    align-items: center;
    color: var(--onz-resources-ink);
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
}

.onz-resources-story__copy em i,
.onz-resources-directory__item em i,
.onz-resources-evolution__item em i { transition: transform 180ms ease; }
.onz-resources-story:hover img { transform: scale(1.035); filter: saturate(1.08); }
.onz-resources-story:hover em i,
.onz-resources-directory__item:hover em i,
.onz-resources-evolution__item:hover em i { transform: translateX(4px); }

.onz-resources-directory { border-top: 1px solid var(--onz-resources-line); }

.onz-resources-directory__item {
    display: grid;
    grid-template-columns: 54px 64px minmax(0, 1fr) auto;
    min-height: 166px;
    padding-block: 26px;
    gap: 24px;
    align-items: center;
    color: var(--onz-resources-ink);
    border-bottom: 1px solid var(--onz-resources-line);
    text-decoration: none;
    transition: padding 220ms ease, background 220ms ease;
}

.onz-resources-directory__item:hover { padding-inline: 18px; color: var(--onz-resources-ink); background: rgba(30, 201, 153, .07); }
.onz-resources-directory__number { color: #89969c; font-size: 12px; letter-spacing: .1em; }
.onz-resources-directory__item > i { color: #16856c; font-size: 34px; }
.onz-resources-directory__item > span:nth-child(3) { display: grid; gap: 7px; }
.onz-resources-directory__item strong { font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -.035em; }
.onz-resources-directory__item small { max-width: 610px; color: var(--onz-resources-muted); font-size: 16px; line-height: 1.45; }
.onz-resources-directory__item em { margin: 0; white-space: nowrap; }

.onz-resources-evolution {
    padding-block: 126px 138px;
    color: var(--onz-resources-white);
    background: var(--onz-resources-deep);
}

.onz-resources-heading--dark h2 { color: var(--onz-resources-white); }
.onz-resources-heading--dark > p { color: rgba(255, 255, 255, .63); }
.onz-resources-heading--dark .onz-resources-kicker { color: var(--onz-resources-accent); }

.onz-resources-evolution__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .18); }

.onz-resources-evolution__item {
    position: relative;
    display: grid;
    min-height: 420px;
    padding: 34px 48px 40px 0;
    align-content: start;
    color: var(--onz-resources-white);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    text-decoration: none;
    transition: background 220ms ease, padding 220ms ease;
}

.onz-resources-evolution__item + .onz-resources-evolution__item { padding-left: 48px; border-left: 1px solid rgba(255, 255, 255, .18); }
.onz-resources-evolution__item:hover { padding-left: 22px; color: var(--onz-resources-white); background: rgba(255, 255, 255, .045); }
.onz-resources-evolution__item + .onz-resources-evolution__item:hover { padding-left: 70px; }
.onz-resources-evolution__item > span { margin-bottom: 60px; color: rgba(255, 255, 255, .35); font-size: 13px; letter-spacing: .12em; }
.onz-resources-evolution__item > small { margin-bottom: 12px; color: var(--onz-resources-accent); font-size: 12px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.onz-resources-evolution__item > strong { font-size: clamp(36px, 4vw, 56px); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.onz-resources-evolution__item p { max-width: 480px; margin: 20px 0 0; color: rgba(255, 255, 255, .64); font-size: 17px; line-height: 1.5; }
.onz-resources-evolution__item em { color: var(--onz-resources-white); }

.onz-resources-final { padding-block: 110px; background: #e6ede9; }

.onz-resources-final__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 80px;
    align-items: end;
}

.onz-resources-final h2 { font-size: clamp(45px, 5vw, 70px); }
.onz-resources-final__inner > div > p:last-child { max-width: 660px; margin: 25px 0 0; color: var(--onz-resources-muted); font-size: 18px; line-height: 1.5; }

.onz-resources-motion .onz-resources-reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .7, .2, 1); }
.onz-resources-motion .onz-resources-reveal.is-visible { opacity: 1; transform: none; }

@keyframes onz-resources-rise {
    to { opacity: 1; transform: none; }
}

@media (max-width: 991.98px) {
    .onz-resources-hero__inner { grid-template-columns: minmax(0, 1fr) 310px; gap: 42px; }
    .onz-resources-hero h1 { font-size: clamp(50px, 7vw, 72px); }
    .onz-resources-hero__media { height: 490px; }
    .onz-resources-heading { gap: 50px; }
    .onz-resources-editorial { grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); }
    .onz-resources-story--primary .onz-resources-story__media { height: 460px; }
    .onz-resources-story--secondary { margin-top: 72px; }
    .onz-resources-directory__item { grid-template-columns: 38px 50px minmax(0, 1fr); }
    .onz-resources-directory__item em { grid-column: 3; }
}

@media (max-width: 767.98px) {
    .onz-resources-shell,
    .onz-resources-page .navbar-landing > .container,
    .onz-resources-page .layout-wrapper.landing > section.bg-warning > .container,
    .onz-resources-page .custom-footer > .container { width: min(100% - 32px, 1240px); }

    .onz-resources-page .navbar-landing { min-height: 66px; }
    .onz-resources-hero { min-height: auto; }
    .onz-resources-hero__inner { display: block; min-height: auto; padding-top: 132px; padding-bottom: 0; }
    .onz-resources-hero h1 { font-size: clamp(48px, 14.5vw, 68px); line-height: .92; }
    .onz-resources-hero__copy > p:not(.onz-resources-kicker) { margin: 25px 0 29px; font-size: 18px; }
    .onz-resources-hero__media { width: calc(100% - 26px); height: 470px; margin: 70px 0 0 auto; }
    .onz-resources-hero__media::before { inset: -12px 12px 12px -12px; }
    .onz-resources-hero__media img { height: 100%; }
    .onz-resources-hero::after { right: -70vw; bottom: -20vw; width: 150vw; height: 150vw; }

    .onz-resources-index .onz-resources-shell {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        padding-inline: 16px;
        overflow: visible;
    }

    .onz-resources-index a {
        min-width: 0;
        min-height: 72px;
        padding: 12px 14px;
        border-bottom: 1px solid var(--onz-resources-line);
        white-space: normal;
    }

    .onz-resources-index a:nth-child(odd) { border-left: 1px solid var(--onz-resources-line); }
    .onz-resources-index a:last-child { grid-column: 1 / -1; border-left: 1px solid var(--onz-resources-line); }

    .onz-resources-discover,
    .onz-resources-work,
    .onz-resources-evolution { padding-block: 88px 96px; }

    .onz-resources-heading { display: block; margin-bottom: 48px; }
    .onz-resources-heading h2,
    .onz-resources-final h2 { font-size: clamp(42px, 12vw, 58px); }
    .onz-resources-heading > p { margin-top: 24px; font-size: 17px; }
    .onz-resources-editorial { display: block; }
    .onz-resources-story--primary .onz-resources-story__media { height: 450px; }
    .onz-resources-story--secondary { margin-top: 70px; }
    .onz-resources-story--secondary .onz-resources-story__media { height: 260px; }
    .onz-resources-story__copy strong { font-size: 35px; }

    .onz-resources-directory__item { grid-template-columns: 34px 40px minmax(0, 1fr); min-height: 0; padding-block: 27px; gap: 14px; align-items: start; }
    .onz-resources-directory__item:hover { padding-inline: 10px; }
    .onz-resources-directory__item > i { font-size: 29px; }
    .onz-resources-directory__item strong { font-size: 28px; }
    .onz-resources-directory__item small { margin-top: 2px; font-size: 15px; }
    .onz-resources-directory__item em { grid-column: 3; margin-top: 8px; }

    .onz-resources-evolution__links { display: block; }
    .onz-resources-evolution__item { min-height: 350px; padding: 28px 8px 34px; }
    .onz-resources-evolution__item + .onz-resources-evolution__item { padding-left: 8px; border-left: 0; }
    .onz-resources-evolution__item:hover,
    .onz-resources-evolution__item + .onz-resources-evolution__item:hover { padding-left: 16px; }
    .onz-resources-evolution__item > span { margin-bottom: 46px; }

    .onz-resources-final { padding-block: 86px 94px; }
    .onz-resources-final__inner { display: block; }
    .onz-resources-final .onz-resources-button { margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
    .onz-resources-hero__copy > *,
    .onz-resources-hero__media { opacity: 1; transform: none; animation: none; }
    .onz-resources-motion .onz-resources-reveal { opacity: 1; transform: none; transition: none; }
    .onz-resources-story__media img,
    .onz-resources-index a i,
    .onz-resources-story__copy em i,
    .onz-resources-directory__item,
    .onz-resources-directory__item em i,
    .onz-resources-evolution__item,
    .onz-resources-evolution__item em i { transition: none; }
}