/* ==========================================================
   RESOURCES PAGE
========================================================== */

.resources-page {
    overflow: hidden;

    background: #fffdf9;
}


/* ==========================================================
   RESOURCES HERO
========================================================== */

.resources-hero {
    position: relative;

    margin-top: 70px;

    overflow: hidden;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #0b3b2f 0%,
            #0d4536 42%,
            #123f33 100%
        );
}


/* ==========================================================
   HERO BACKGROUND TEXTURE
========================================================== */

.resources-hero__background {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 25% 30%,
            rgba(255,255,255,.035),
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(218,174,82,.05),
            transparent 35%
        );
}


/* ==========================================================
   HERO LAYOUT
========================================================== */

.resources-hero__layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(320px, .78fr)
        minmax(0, 1.22fr);

    align-items: stretch;

    min-height: 420px;
}


/* ==========================================================
   HERO CONTENT
========================================================== */

.resources-hero__content {
    position: relative;

    z-index: 4;

    display: flex;

    flex-direction: column;

    justify-content: center;

    max-width: 470px;

    padding:
        58px
        35px
        58px
        30px;
}


/* ==========================================================
   EYEBROW
========================================================== */

.resources-hero__eyebrow {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 12px;

    color: rgba(255,255,255,.92);

    font-size: 11px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.resources-hero__eyebrow-leaf {
    color: #d4a64c;

    font-size: 13px;

    transform: rotate(-18deg);
}


/* ==========================================================
   TITLE
========================================================== */

.resources-hero__title {
    max-width: 390px;

    margin: 0;

    color: #fffdf8;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(42px, 4.1vw, 58px);

    font-weight: 400;

    line-height: 1.04;

    letter-spacing: -.025em;
}


.resources-hero__title span {
    color: #dca950;

    font-style: italic;
}


/* ==========================================================
   GOLD DIVIDER
========================================================== */

.resources-hero__line {
    width: 55px;
    height: 2px;

    margin:
        18px
        0
        17px;

    background: #dca950;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.resources-hero__description {
    max-width: 410px;

    margin: 0;

    color: rgba(255,255,255,.84);

    font-size: 12px;

    line-height: 1.7;
}


/* ==========================================================
   HERO ACTIONS
========================================================== */

.resources-hero__actions {
    display: flex;

    flex-wrap: wrap;

    gap: 11px;

    margin-top: 22px;
}


/* ==========================================================
   HERO BUTTON
========================================================== */

.resources-hero__button {
    min-height: 40px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        9px
        16px;

    border-radius: 5px;

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    transition:
        transform .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}


.resources-hero__button:hover {
    transform: translateY(-2px);
}


.resources-hero__button--primary {
    color: #173c31;

    background: #e5b65b;

    border:
        1px solid #e5b65b;
}


.resources-hero__button--primary:hover {
    background: #efc66f;

    border-color: #efc66f;
}


.resources-hero__button--secondary {
    color: #ffffff;

    background:
        rgba(255,255,255,.03);

    border:
        1px solid rgba(255,255,255,.65);
}


.resources-hero__button--secondary:hover {
    background:
        rgba(255,255,255,.09);
}


/* ==========================================================
   HERO VISUAL
========================================================== */

.resources-hero__visual {
    position: relative;

    min-width: 0;

    min-height: 420px;
}


/* ==========================================================
   HERO PNG PLACEHOLDER
========================================================== */

.resources-hero__image-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    color: rgba(255,255,255,.9);

    background:
        linear-gradient(
            135deg,
            #74634c,
            #9a7d55 48%,
            #4e583e
        );
}


.resources-hero__image-placeholder::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8,50,39,.75) 0%,
            rgba(8,50,39,.28) 23%,
            rgba(8,50,39,.02) 52%
        );
}


.resources-hero__image-placeholder span {
    position: relative;

    z-index: 2;

    padding:
        6px
        10px;

    color: #ffffff;

    background:
        rgba(8,50,39,.65);

    border-radius: 999px;

    font-size: 8px;

    font-weight: 600;
}


/* ==========================================================
   HERO QUOTE CARD
========================================================== */

.resources-hero__quote {
    position: absolute;

    z-index: 5;

    top: 50%;
    right: 18px;

    width: 165px;

    padding:
        22px
        20px
        25px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #0c4b3b,
            #07372c
        );

    border:
        1px solid #d8a94f;

    border-radius: 14px;

    box-shadow:
        0
        15px
        35px
        rgba(0,0,0,.18);

    transform:
        translateY(-50%);
}


/* ==========================================================
   QUOTE MARK
========================================================== */

.resources-hero__quote-mark {
    height: 30px;

    color: #e0ad4e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 40px;

    font-weight: 700;

    line-height: 1;
}


/* ==========================================================
   QUOTE TEXT
========================================================== */

.resources-hero__quote blockquote {
    position: relative;

    z-index: 2;

    margin:
        5px
        0
        0;

    color: #fffdf7;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: 400;

    line-height: 1.42;
}


/* ==========================================================
   QUOTE DECORATIVE LEAF
========================================================== */

.resources-hero__quote-leaf {
    position: absolute;

    right: 13px;
    bottom: 10px;

    color:
        rgba(221,174,78,.55);

    font-size: 40px;

    transform: rotate(-28deg);
}


/* ==========================================================
   LEFT DECORATIVE LEAF
========================================================== */

.resources-hero::before {
    content: "❧";

    position: absolute;

    z-index: 1;

    left: -22px;
    bottom: 5px;

    color:
        rgba(220,169,80,.42);

    font-size: 125px;

    line-height: 1;

    transform: rotate(25deg);
}


/* ==========================================================
   TEMP RESPONSIVE — TABLET
========================================================== */

@media (max-width: 900px) {

    .resources-hero {
        margin-top: 35px;
    }


    .resources-hero__layout {
        grid-template-columns: 1fr;
    }


    .resources-hero__content {
        max-width: 620px;

        padding:
            48px
            25px;
    }


    .resources-hero__visual {
        min-height: 340px;
    }

}


/* ==========================================================
   TEMP RESPONSIVE — MOBILE
========================================================== */

@media (max-width: 600px) {

    .resources-hero {
        margin-top: 20px;
    }


    .resources-hero__content {
        padding:
            40px
            20px;
    }


    .resources-hero__title {
        font-size: 40px;
    }


    .resources-hero__actions {
        align-items: stretch;

        flex-direction: column;
    }


    .resources-hero__button {
        width: 100%;
    }


    .resources-hero__visual {
        min-height: 300px;
    }


    .resources-hero__quote {
        right: 15px;

        width: 145px;

        padding:
            18px
            16px;
    }


    .resources-hero__quote blockquote {
        font-size: 15px;
    }

}

/* ==========================================================
   RESOURCES — CATEGORY NAVIGATION
========================================================== */

.resources-categories {
    position: relative;

    z-index: 10;

    margin-top: -45px;

    padding:
        0
        0
        30px;

    background:
        linear-gradient(
            180deg,
            transparent 0,
            transparent 45px,
            #fffdf9 45px,
            #fffdf9 100%
        );
}


/* ==========================================================
   CATEGORY PANEL
========================================================== */

.resources-categories__panel {
    display: grid;

    grid-template-columns:
        repeat(8, minmax(0, 1fr));

    align-items: stretch;

    overflow: hidden;

    background:
        rgba(255,255,255,.97);

    border:
        1px solid rgba(23,72,59,.10);

    border-radius: 18px;

    box-shadow:
        0
        12px
        32px
        rgba(21,55,45,.08);
}


/* ==========================================================
   CATEGORY ITEM
========================================================== */

.resources-category {
    position: relative;

    min-width: 0;

    min-height: 92px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        14px
        8px;

    color: #304b40;

    text-align: center;

    text-decoration: none;

    transition:
        background-color .2s ease,
        color .2s ease;
}


/* dividers */

.resources-category:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 20px;
    right: 0;
    bottom: 20px;

    width: 1px;

    background:
        rgba(23,72,59,.10);
}


/* ==========================================================
   ICON
========================================================== */

.resources-category__icon {
    width: 40px;
    height: 40px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #17483b;

    transition:
        color .2s ease,
        transform .2s ease;
}


.resources-category__icon svg {
    display: block;

    width: 34px;
    height: 34px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.45;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   LABEL
========================================================== */

.resources-category__label {
    max-width: 110px;

    color: inherit;

    font-size: 8px;

    font-weight: 600;

    line-height: 1.3;
}


/* ==========================================================
   HOVER
========================================================== */

.resources-category:hover {
    color: #b68632;

    background:
        rgba(244,239,225,.45);
}


.resources-category:hover
.resources-category__icon {
    color: #b68632;

    transform:
        translateY(-2px);
}


/* ==========================================================
   ACTIVE — ALL RESOURCES
========================================================== */

.resources-category.is-active
.resources-category__icon {
    width: 43px;
    height: 43px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #17483b,
            #0d372d
        );

    border-radius: 50%;
}


.resources-category.is-active
.resources-category__icon svg {
    width: 25px;
    height: 25px;
}


.resources-category.is-active {
    color: #17483b;
}


/* ==========================================================
   TEMP TABLET
========================================================== */

@media (max-width: 1000px) {

    .resources-categories__panel {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    .resources-category:nth-child(4)::after,
    .resources-category:nth-child(8)::after {
        display: none;
    }


    .resources-category:nth-child(-n+4) {
        border-bottom:
            1px solid rgba(23,72,59,.10);
    }

}


/* ==========================================================
   TEMP MOBILE
========================================================== */

@media (max-width: 600px) {

    .resources-categories {
        margin-top: -25px;

        padding-bottom: 25px;

        background:
            linear-gradient(
                180deg,
                transparent 0,
                transparent 25px,
                #fffdf9 25px,
                #fffdf9 100%
            );
    }


    .resources-categories__panel {
        display: flex;

        overflow-x: auto;

        border-radius: 12px;

        scrollbar-width: none;
    }


    .resources-categories__panel::-webkit-scrollbar {
        display: none;
    }


    .resources-category {
        flex:
            0
            0
            125px;

        min-height: 88px;
    }


    .resources-category:nth-child(-n+4) {
        border-bottom: 0;
    }


    .resources-category::after {
        display: block !important;
    }


    .resources-category:last-child::after {
        display: none !important;
    }

}

/* ==========================================================
   RESOURCES — FEATURED RESOURCES
========================================================== */

.resources-featured {
    position: relative;

    padding:
        10px
        0
        50px;

    background: #fffdf9;
}


/* ==========================================================
   FEATURED HEADING
========================================================== */

.resources-featured__heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 20px;
}


.resources-featured__title-wrap {
    display: flex;

    align-items: center;

    gap: 9px;
}


.resources-featured__leaf {
    color: #8da08f;

    font-size: 18px;

    line-height: 1;

    transform: rotate(-20deg);
}


.resources-featured__heading h2 {
    margin: 0;

    color: #1e382f;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 25px;

    font-weight: 400;

    line-height: 1.2;
}


.resources-featured__view-all {
    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #17483b;

    font-size: 9px;

    font-weight: 600;

    text-decoration: none;
}


.resources-featured__view-all span {
    transition: transform .2s ease;
}


.resources-featured__view-all:hover span {
    transform: translateX(3px);
}


/* ==========================================================
   FEATURED GRID
========================================================== */

.resources-featured__grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 16px;

    align-items: stretch;
}


/* ==========================================================
   FEATURED CARD
========================================================== */

.resources-feature-card {
    min-width: 0;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid rgba(23,72,59,.10);

    border-radius: 9px;

    box-shadow:
        0
        5px
        18px
        rgba(21,55,45,.045);

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


.resources-feature-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0
        13px
        28px
        rgba(21,55,45,.09);
}


/* ==========================================================
   FEATURED IMAGE
========================================================== */

.resources-feature-card__image {
    position: relative;

    width: 100%;

    aspect-ratio: 1.45 / 1;

    overflow: hidden;
}


/* ==========================================================
   PNG PLACEHOLDER
========================================================== */

.resources-feature-card__placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #a79778,
            #6d806d
        );
}


.resources-feature-card:nth-child(2)
.resources-feature-card__placeholder {
    background:
        linear-gradient(
            135deg,
            #839b7e,
            #496957
        );
}


.resources-feature-card:nth-child(3)
.resources-feature-card__placeholder {
    background:
        linear-gradient(
            135deg,
            #c1a77b,
            #826b4d
        );
}


.resources-feature-card:nth-child(4)
.resources-feature-card__placeholder {
    background:
        linear-gradient(
            135deg,
            #7f8d82,
            #4c6258
        );
}


.resources-feature-card__placeholder::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(10,48,38,0) 50%,
            rgba(10,48,38,.18) 100%
        );
}


.resources-feature-card__placeholder span {
    position: relative;

    z-index: 2;

    max-width: 90%;

    padding:
        5px
        8px;

    color: #ffffff;

    background:
        rgba(10,48,38,.60);

    border-radius: 999px;

    font-size: 6px;

    text-align: center;
}


/* ==========================================================
   CATEGORY BADGE
========================================================== */

.resources-feature-card__badge {
    position: absolute;

    z-index: 3;

    left: 12px;
    bottom: 10px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 21px;

    padding:
        4px
        9px;

    color: #163d31;

    background: #e5bd69;

    border-radius: 999px;

    box-shadow:
        0
        3px
        8px
        rgba(0,0,0,.08);

    font-size: 6px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: .04em;

    text-transform: uppercase;
}


/* ==========================================================
   FEATURED CONTENT
========================================================== */

.resources-feature-card__content {
    padding:
        15px
        15px
        13px;
}


.resources-feature-card__content h3 {
    margin:
        0
        0
        8px;

    color: #243e35;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    font-weight: 400;

    line-height: 1.3;
}


.resources-feature-card__content p {
    margin: 0;

    color: #65716b;

    font-size: 7px;

    line-height: 1.65;
}


/* ==========================================================
   FEATURED FOOTER
========================================================== */

.resources-feature-card__footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: 14px;

    padding-top: 11px;

    border-top:
        1px solid rgba(23,72,59,.08);
}


/* ==========================================================
   FILE META
========================================================== */

.resources-feature-card__meta {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    color: #7c8681;

    font-size: 6px;

    line-height: 1;
}


.resources-feature-card__meta span:first-child {
    color: #a07a34;

    font-weight: 700;
}


.resources-feature-card__dot {
    width: 3px;
    height: 3px;

    flex: 0 0 auto;

    background: #b89b63;

    border-radius: 50%;
}


/* ==========================================================
   DOWNLOAD BUTTON
========================================================== */

.resources-feature-card__download {
    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #17483b;

    background:
        rgba(23,72,59,.055);

    border:
        1px solid rgba(23,72,59,.10);

    border-radius: 50%;

    text-decoration: none;

    transition:
        color .2s ease,
        background-color .2s ease,
        transform .2s ease;
}


.resources-feature-card__download svg {
    width: 14px;
    height: 14px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.resources-feature-card__download:hover {
    color: #ffffff;

    background: #17483b;

    transform: translateY(-2px);
}


/* ==========================================================
   FEATURED — TABLET
========================================================== */

@media (max-width: 900px) {

    .resources-featured__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }

}


/* ==========================================================
   FEATURED — MOBILE
========================================================== */

@media (max-width: 600px) {

    .resources-featured {
        padding-bottom: 38px;
    }


    .resources-featured__heading {
        align-items: flex-start;
    }


    .resources-featured__heading h2 {
        font-size: 22px;
    }


    .resources-featured__grid {
        grid-template-columns: 1fr;
    }


    .resources-feature-card__image {
        aspect-ratio: 1.65 / 1;
    }


    .resources-feature-card__content h3 {
        font-size: 17px;
    }


    .resources-feature-card__content p {
        font-size: 8px;
    }

}

/* ==========================================================
   RESOURCES — BROWSE ALL
========================================================== */

.resources-browse {
    position: relative;

    padding:
        44px
        0
        50px;

    background: #f8f6f0;
}


/* ==========================================================
   SECTION HEADING
========================================================== */

.resources-browse__heading {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 24px;
}


.resources-browse__eyebrow {
    display: block;

    margin-bottom: 6px;

    color: #ac8134;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;
}


.resources-browse__heading h2 {
    margin: 0;

    color: #203d33;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 26px;

    font-weight: 400;

    line-height: 1.15;
}


.resources-browse__heading > p {
    max-width: 400px;

    margin: 0;

    color: #68736e;

    font-size: 8px;

    line-height: 1.55;
}


/* ==========================================================
   BROWSE LAYOUT
========================================================== */

.resources-browse__layout {
    display: grid;

    grid-template-columns:
        205px
        minmax(0, 1fr);

    gap: 24px;

    align-items: start;
}


/* ==========================================================
   FILTER SIDEBAR
========================================================== */

.resources-filter {
    padding:
        18px
        16px;

    background: #ffffff;

    border:
        1px solid rgba(23,72,59,.08);

    border-radius: 8px;
}


/* FILTER GROUP */

.resources-filter__group {
    padding-bottom: 18px;

    margin-bottom: 17px;

    border-bottom:
        1px solid rgba(23,72,59,.08);
}


.resources-filter__group h3 {
    margin:
        0
        0
        12px;

    color: #274239;

    font-size: 9px;

    font-weight: 700;
}


/* ==========================================================
   RADIO OPTIONS
========================================================== */

.resources-filter__options {
    display: grid;

    gap: 9px;
}


.resources-filter__option {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #56645d;

    font-size: 8px;

    cursor: pointer;
}


.resources-filter__option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.resources-filter__radio {
    position: relative;

    width: 13px;
    height: 13px;

    flex: 0 0 auto;

    background: #ffffff;

    border:
        1px solid #a6afa9;

    border-radius: 50%;
}


.resources-filter__option input:checked +
.resources-filter__radio {
    border-color: #17483b;
}


.resources-filter__option input:checked +
.resources-filter__radio::after {
    content: "";

    position: absolute;

    inset: 3px;

    background: #17483b;

    border-radius: 50%;
}


/* ==========================================================
   FORMAT BUTTONS
========================================================== */

.resources-filter__formats {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}


.resources-format {
    min-height: 27px;

    padding:
        6px
        10px;

    color: #57655e;

    background: #faf9f5;

    border:
        1px solid rgba(23,72,59,.10);

    border-radius: 4px;

    font-family: inherit;

    font-size: 7px;

    cursor: pointer;
}


.resources-format.is-active {
    color: #ffffff;

    background: #17483b;

    border-color: #17483b;
}


/* ==========================================================
   RESET FILTER
========================================================== */

.resources-filter__reset {
    width: 100%;

    min-height: 32px;

    color: #17483b;

    background: transparent;

    border:
        1px solid rgba(23,72,59,.20);

    border-radius: 5px;

    font-family: inherit;

    font-size: 7px;

    font-weight: 600;

    cursor: pointer;
}


/* ==========================================================
   RESOURCE LIBRARY
========================================================== */

.resources-library {
    min-width: 0;
}


/* ==========================================================
   TOOLBAR
========================================================== */

.resources-library__toolbar {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-bottom: 14px;
}


/* ==========================================================
   SEARCH
========================================================== */

.resources-library__search {
    position: relative;

    flex:
        1
        1
        340px;

    max-width: 410px;
}


.resources-library__search svg {
    position: absolute;

    top: 50%;
    left: 12px;

    width: 14px;
    height: 14px;

    fill: none;

    stroke: #627068;

    stroke-width: 1.5;

    stroke-linecap: round;

    transform:
        translateY(-50%);
}


.resources-library__search input {
    width: 100%;

    min-height: 36px;

    padding:
        8px
        12px
        8px
        35px;

    color: #3e4d46;

    background: #ffffff;

    border:
        1px solid rgba(23,72,59,.10);

    border-radius: 5px;

    outline: none;

    font: inherit;

    font-size: 8px;
}


/* ==========================================================
   SORT
========================================================== */

.resources-library__sort {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #6f7974;

    font-size: 7px;
}


.resources-library__sort select {
    min-height: 36px;

    padding:
        7px
        28px
        7px
        10px;

    color: #435149;

    background: #ffffff;

    border:
        1px solid rgba(23,72,59,.10);

    border-radius: 5px;

    font: inherit;

    font-size: 8px;

    cursor: pointer;
}


/* ==========================================================
   RESOURCE GRID
========================================================== */

.resources-library__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 13px;
}


/* ==========================================================
   RESOURCE CARD
========================================================== */

.resource-library-card {
    min-width: 0;

    display: grid;

    grid-template-columns:
        135px
        minmax(0, 1fr);

    min-height: 150px;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid rgba(23,72,59,.09);

    border-radius: 7px;

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


.resource-library-card:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0
        9px
        20px
        rgba(20,57,46,.06);
}


/* ==========================================================
   LIBRARY IMAGE
========================================================== */

.resource-library-card__image {
    position: relative;

    min-height: 150px;

    overflow: hidden;
}


.resource-library-card__placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #9a8a70,
            #687d68
        );
}


.resource-library-card:nth-child(2n)
.resource-library-card__placeholder {
    background:
        linear-gradient(
            145deg,
            #78927e,
            #496956
        );
}


.resource-library-card:nth-child(3n)
.resource-library-card__placeholder {
    background:
        linear-gradient(
            145deg,
            #a69270,
            #75634c
        );
}


.resource-library-card__placeholder span {
    max-width: 90%;

    padding:
        5px
        7px;

    color: #ffffff;

    background:
        rgba(10,48,38,.60);

    border-radius: 999px;

    font-size: 5px;

    text-align: center;
}


/* ==========================================================
   LIBRARY BADGE
========================================================== */

.resource-library-card__badge {
    position: absolute;

    z-index: 3;

    left: 9px;
    bottom: 9px;

    padding:
        4px
        7px;

    color: #173d31;

    background: #e5bd69;

    border-radius: 999px;

    font-size: 5px;

    font-weight: 700;

    line-height: 1;

    text-transform: uppercase;
}


/* ==========================================================
   LIBRARY CONTENT
========================================================== */

.resource-library-card__content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    padding:
        14px
        13px
        12px;
}


.resource-library-card__content h3 {
    margin:
        0
        0
        7px;

    color: #273f36;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.3;
}


.resource-library-card__content p {
    margin: 0;

    color: #67716c;

    font-size: 7px;

    line-height: 1.55;
}


/* ==========================================================
   LIBRARY FOOTER
========================================================== */

.resource-library-card__footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin-top: auto;

    padding-top: 12px;
}


.resource-library-card__meta {
    display: flex;

    align-items: center;

    gap: 5px;

    color: #7e8682;

    font-size: 6px;
}


.resource-library-card__meta span:first-child {
    color: #9c7732;

    font-weight: 700;
}


.resource-library-card__dot {
    width: 3px;
    height: 3px;

    background: #b89b63;

    border-radius: 50%;
}


/* ==========================================================
   DOWNLOAD
========================================================== */

.resource-library-card__download {
    width: 27px;
    height: 27px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #17483b;

    background:
        rgba(23,72,59,.055);

    border:
        1px solid rgba(23,72,59,.10);

    border-radius: 50%;
}


.resource-library-card__download svg {
    width: 13px;
    height: 13px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   LOAD MORE
========================================================== */

.resources-library__more {
    display: flex;

    justify-content: center;

    margin-top: 20px;
}


.resources-library__more-button {
    min-height: 38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        8px
        18px;

    color: #17483b;

    background: #ffffff;

    border:
        1px solid rgba(23,72,59,.24);

    border-radius: 5px;

    font-family: inherit;

    font-size: 8px;

    font-weight: 600;

    cursor: pointer;
}

/* ==========================================================
   RESOURCES — VALUES STRIP
========================================================== */

.resources-values {
    position: relative;

    padding:
        34px
        0
        38px;

    background: #fffdf9;
}


/* ==========================================================
   VALUES GRID
========================================================== */

.resources-values__grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 14px;
}


/* ==========================================================
   VALUE CARD
========================================================== */

.resources-value-card {
    position: relative;

    min-width: 0;

    min-height: 135px;

    display: grid;

    grid-template-columns:
        56px
        minmax(0, 1fr);

    gap: 14px;

    align-items: center;

    overflow: hidden;

    padding:
        20px
        19px;

    background:
        linear-gradient(
            135deg,
            #f7f3e9,
            #fbf9f4
        );

    border:
        1px solid rgba(23,72,59,.08);

    border-radius: 8px;
}


/* ==========================================================
   ICON
========================================================== */

.resources-value-card__icon {
    width: 54px;
    height: 54px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #17483b;
}


.resources-value-card__icon svg {
    width: 44px;
    height: 44px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.45;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ==========================================================
   CONTENT
========================================================== */

.resources-value-card__content {
    min-width: 0;
}


.resources-value-card__content h3 {
    margin:
        0
        0
        7px;

    color: #263f36;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 14px;

    font-weight: 400;

    line-height: 1.25;
}


.resources-value-card__content p {
    margin: 0;

    color: #68736d;

    font-size: 7px;

    line-height: 1.55;
}


/* ==========================================================
   HIGHLIGHT CARD
========================================================== */

.resources-value-card--highlight {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #17483b,
            #0e382e
        );

    border-color:
        rgba(218,177,85,.22);
}


.resources-value-card--highlight
.resources-value-card__icon {
    color: #d8aa50;
}


.resources-value-card--highlight
.resources-value-card__content h3 {
    color: #fffaf0;
}


.resources-value-card--highlight
.resources-value-card__content p {
    color:
        rgba(255,255,255,.75);
}


/* ==========================================================
   HIGHLIGHT LINK
========================================================== */

.resources-value-card__content a {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-top: 10px;

    color: #e1b85e;

    font-size: 7px;

    font-weight: 700;

    text-decoration: none;
}


/* ==========================================================
   DECORATIVE LEAF
========================================================== */

.resources-value-card__leaf {
    position: absolute;

    right: -14px;
    bottom: -22px;

    color:
        rgba(218,177,85,.20);

    font-size: 95px;

    line-height: 1;

    transform: rotate(-25deg);
}

/* ==========================================================
   RESOURCES — NEWSLETTER
========================================================== */

.resources-newsletter {
    position: relative;

    padding:
        0
        0
        24px;

    background: #fffdf9;
}


/* ==========================================================
   PANEL
========================================================== */

.resources-newsletter__panel {
    position: relative;

    min-height: 120px;

    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(360px, 1.2fr);

    gap: 40px;

    align-items: center;

    overflow: hidden;

    padding:
        25px
        34px;

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            #17483b 0%,
            #104033 55%,
            #0c342a 100%
        );

    border-radius: 8px;
}


/* ==========================================================
   CONTENT
========================================================== */

.resources-newsletter__content {
    position: relative;

    z-index: 2;

    max-width: 420px;
}


.resources-newsletter__heading {
    display: flex;

    align-items: center;

    gap: 8px;
}


.resources-newsletter__heading h2 {
    margin: 0;

    color: #fffaf0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    font-weight: 400;
}


.resources-newsletter__heading span {
    color: #d2aa55;

    font-size: 13px;
}


.resources-newsletter__content p {
    max-width: 360px;

    margin:
        8px
        0
        0;

    color:
        rgba(255,255,255,.78);

    font-size: 8px;

    line-height: 1.55;
}


/* ==========================================================
   FORM
========================================================== */

.resources-newsletter__form {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 8px;

    align-items: center;

    max-width: 500px;
}


.resources-newsletter__form input {
    min-width: 0;

    min-height: 38px;

    padding:
        9px
        12px;

    color: #405049;

    background: #ffffff;

    border:
        1px solid rgba(255,255,255,.18);

    border-radius: 5px;

    outline: none;

    font: inherit;

    font-size: 8px;
}


.resources-newsletter__form input::placeholder {
    color: #929995;
}


.resources-newsletter__form button {
    min-height: 38px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    padding:
        9px
        16px;

    color: #17483b;

    background: #f0d79e;

    border: 0;

    border-radius: 5px;

    font-family: inherit;

    font-size: 8px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        background-color .2s ease;
}


.resources-newsletter__form button:hover {
    background: #e8c87d;

    transform: translateY(-1px);
}


/* ==========================================================
   SMALL TEXT
========================================================== */

.resources-newsletter__form small {
    grid-column: 1 / -1;

    color:
        rgba(255,255,255,.58);

    font-size: 6px;
}


/* ==========================================================
   DECORATIVE LEAF
========================================================== */

.resources-newsletter__leaf {
    position: absolute;

    left: -20px;
    bottom: -34px;

    z-index: 1;

    color:
        rgba(218,177,85,.20);

    font-size: 125px;

    line-height: 1;

    transform: rotate(22deg);
}
.resources-page + .site-footer {
    margin-top: 0;
}


/* ==========================================================
   RESOURCE LIBRARY — EMPTY STATE
========================================================== */

.resources-library__empty {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 150px;

    margin-top: 13px;

    padding: 25px;

    color: #607068;

    text-align: center;

    background: #ffffff;

    border:
        1px dashed rgba(23,72,59,.18);

    border-radius: 7px;
}


.resources-library__empty strong {
    color: #274239;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    font-weight: 400;
}


.resources-library__empty span {
    font-size: 7px;
}


/* ==========================================================
   RESOURCE FILTER — VISIBILITY FIX
========================================================== */

.resource-library-card.is-hidden {
    display: none !important;
}


/* ==========================================================
   LOAD MORE VISIBILITY
========================================================== */

.resources-library__more[hidden] {
    display: none !important;
}


/* ==========================================================
   CARD APPEARANCE
========================================================== */

.resource-library-card:not(.is-hidden) {
    animation:
        resourcesCardReveal
        .22s ease;
}


@keyframes resourcesCardReveal {

    from {
        opacity: 0;

        transform:
            translateY(4px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ==========================================================
   EMPTY STATE
========================================================== */

.resources-library__empty {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 6px;

    min-height: 150px;

    margin-top: 13px;

    padding:
        25px;

    color: #607068;

    text-align: center;

    background: #ffffff;

    border:
        1px dashed
        rgba(23,72,59,.18);

    border-radius: 7px;
}


.resources-library__empty strong {
    color: #274239;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    font-weight: 400;
}


.resources-library__empty span {
    max-width: 280px;

    color: #747f79;

    font-size: 7px;

    line-height: 1.5;
}

/* ==========================================================
   RESOURCES PAGE — FINAL RESPONSIVE
========================================================== */


/* ==========================================================
   SMALL LAPTOP — 1200px
========================================================== */

@media (max-width: 1200px) {

    .resources-hero__layout {
        grid-template-columns:
            minmax(300px, .82fr)
            minmax(0, 1.18fr);
    }

    .resources-hero__title {
        font-size: 48px;
    }

    .resources-categories__panel {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .resources-category:nth-child(4)::after,
    .resources-category:nth-child(8)::after {
        display: none;
    }

    .resources-category:nth-child(-n+4) {
        border-bottom:
            1px solid rgba(23,72,59,.10);
    }

    .resources-featured__grid {
        gap: 13px;
    }

    .resources-browse__layout {
        grid-template-columns:
            190px
            minmax(0, 1fr);

        gap: 20px;
    }

    .resource-library-card {
        grid-template-columns:
            120px
            minmax(0, 1fr);
    }

    .resources-values__grid {
        gap: 12px;
    }

}


/* ==========================================================
   TABLET — 992px
========================================================== */

@media (max-width: 992px) {

    /* HERO */

    .resources-hero {
        margin-top: 35px;
    }

    .resources-hero__layout {
        grid-template-columns: 1fr;
    }

    .resources-hero__content {
        max-width: 640px;

        padding:
            48px
            28px;
    }

    .resources-hero__title {
        max-width: 520px;

        font-size: 46px;
    }

    .resources-hero__description {
        max-width: 520px;
    }

    .resources-hero__visual {
        min-height: 350px;
    }


    /* CATEGORIES */

    .resources-categories {
        margin-top: -35px;
    }

    .resources-categories__panel {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }


    /* FEATURED */

    .resources-featured__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 18px;
    }


    /* BROWSE */

    .resources-browse__layout {
        grid-template-columns:
            180px
            minmax(0, 1fr);
    }

    .resources-library__grid {
        grid-template-columns: 1fr;
    }

    .resource-library-card {
        grid-template-columns:
            145px
            minmax(0, 1fr);
    }


    /* VALUES */

    .resources-values__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .resources-value-card--highlight {
        grid-column: 1 / -1;
    }


    /* NEWSLETTER */

    .resources-newsletter__panel {
        grid-template-columns:
            1fr
            1.1fr;

        gap: 25px;

        padding:
            24px;
    }

}


/* ==========================================================
   MOBILE / SMALL TABLET — 767px
========================================================== */

@media (max-width: 767px) {

    /* ======================================================
       HERO
    ====================================================== */

    .resources-hero {
        margin-top: 20px;
    }

    .resources-hero__content {
        max-width: 100%;

        padding:
            40px
            20px
            36px;
    }

    .resources-hero__title {
        font-size:
            clamp(
                36px,
                10vw,
                43px
            );
    }

    .resources-hero__description {
        font-size: 11px;
    }

    .resources-hero__actions {
        flex-wrap: wrap;
    }

    .resources-hero__visual {
        min-height: 320px;
    }

    .resources-hero__quote {
        right: 16px;

        width: 150px;
    }

    .resources-hero__quote blockquote {
        font-size: 16px;
    }


    /* ======================================================
       CATEGORIES
    ====================================================== */

    .resources-categories {
        margin-top: -25px;

        padding-bottom: 28px;

        background:
            linear-gradient(
                180deg,
                transparent 0,
                transparent 25px,
                #fffdf9 25px,
                #fffdf9 100%
            );
    }

    .resources-categories__panel {
        display: flex;

        overflow-x: auto;

        border-radius: 12px;

        scrollbar-width: none;
    }

    .resources-categories__panel::-webkit-scrollbar {
        display: none;
    }

    .resources-category {
        flex:
            0
            0
            125px;

        min-height: 90px;
    }

    .resources-category:nth-child(-n+4) {
        border-bottom: 0;
    }

    .resources-category::after {
        display: block !important;
    }

    .resources-category:last-child::after {
        display: none !important;
    }


    /* ======================================================
       FEATURED
    ====================================================== */

    .resources-featured {
        padding:
            8px
            0
            40px;
    }

    .resources-featured__heading {
        align-items: flex-start;
    }

    .resources-featured__heading h2 {
        font-size: 22px;
    }

    .resources-featured__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;
    }

    .resources-feature-card__content {
        padding:
            13px
            12px;
    }

    .resources-feature-card__content h3 {
        font-size: 14px;
    }

    .resources-feature-card__content p {
        font-size: 7px;
    }


    /* ======================================================
       BROWSE HEADING
    ====================================================== */

    .resources-browse {
        padding:
            38px
            0
            42px;
    }

    .resources-browse__heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }

    .resources-browse__heading h2 {
        font-size: 24px;
    }

    .resources-browse__heading > p {
        max-width: 100%;

        font-size: 8px;
    }


    /* ======================================================
       FILTER + LIBRARY
    ====================================================== */

    .resources-browse__layout {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .resources-filter {
        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap:
            15px
            20px;
    }

    .resources-filter__group {
        margin: 0;

        padding: 0;

        border-bottom: 0;
    }

    .resources-filter__reset {
        grid-column: 1 / -1;
    }


    /* TOOLBAR */

    .resources-library__toolbar {
        align-items: stretch;

        flex-direction: column;
    }

    .resources-library__search {
        max-width: none;

        flex: none;

        width: 100%;
    }

    .resources-library__sort {
        justify-content: flex-end;
    }


    /* GRID */

    .resources-library__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .resource-library-card {
        grid-template-columns: 1fr;

        min-height: 0;
    }

    .resource-library-card__image {
        min-height: 145px;
    }

    .resource-library-card__content {
        min-height: 155px;
    }


    /* ======================================================
       VALUES
    ====================================================== */

    .resources-values {
        padding:
            30px
            0
            34px;
    }

    .resources-values__grid {
        grid-template-columns: 1fr;
    }

    .resources-value-card--highlight {
        grid-column: auto;
    }


    /* ======================================================
       NEWSLETTER
    ====================================================== */

    .resources-newsletter {
        padding-bottom: 50px;
    }

    .resources-newsletter__panel {
        grid-template-columns: 1fr;

        gap: 18px;

        padding:
            25px
            22px;
    }

    .resources-newsletter__form {
        max-width: 100%;
    }

}


/* ==========================================================
   SMALL MOBILE — 520px
========================================================== */

@media (max-width: 520px) {

    /* HERO */

    .resources-hero__content {
        padding:
            34px
            18px;
    }

    .resources-hero__title {
        font-size: 36px;
    }

    .resources-hero__actions {
        align-items: stretch;

        flex-direction: column;
    }

    .resources-hero__button {
        width: 100%;
    }

    .resources-hero__visual {
        min-height: 285px;
    }

    .resources-hero__quote {
        right: 12px;

        width: 140px;

        padding:
            17px
            15px;
    }

    .resources-hero__quote blockquote {
        font-size: 15px;
    }


    /* FEATURED */

    .resources-featured__heading {
        flex-direction: column;

        gap: 8px;
    }

    .resources-featured__grid {
        grid-template-columns: 1fr;
    }

    .resources-feature-card__image {
        aspect-ratio: 1.65 / 1;
    }

    .resources-feature-card__content h3 {
        font-size: 16px;
    }


    /* FILTER */

    .resources-filter {
        grid-template-columns: 1fr;
    }

    .resources-filter__reset {
        grid-column: auto;
    }


    /* RESOURCE GRID */

    .resources-library__grid {
        grid-template-columns: 1fr;
    }

    .resource-library-card {
        grid-template-columns:
            125px
            minmax(0, 1fr);
    }

    .resource-library-card__image {
        min-height: 155px;
    }

    .resource-library-card__content {
        min-height: 155px;
    }


    /* NEWSLETTER */

    .resources-newsletter__form {
        grid-template-columns: 1fr;
    }

    .resources-newsletter__form button {
        width: 100%;
    }

    .resources-newsletter__form small {
        grid-column: auto;
    }

}


/* ==========================================================
   VERY SMALL MOBILE — 400px
========================================================== */

@media (max-width: 400px) {

    .resources-hero__title {
        font-size: 33px;
    }

    .resources-category {
        flex-basis: 115px;
    }

    .resource-library-card {
        grid-template-columns: 1fr;
    }

    .resource-library-card__image {
        min-height: 175px;
    }

    .resources-value-card {
        grid-template-columns:
            48px
            minmax(0, 1fr);

        padding:
            18px
            15px;
    }

    .resources-value-card__icon {
        width: 46px;
        height: 46px;
    }

    .resources-value-card__icon svg {
        width: 38px;
        height: 38px;
    }

    .resources-newsletter__heading h2 {
        font-size: 20px;
    }

}

.resources-page + .site-footer {
    margin-top: 0;
}