:root {
    --csilk-black: rgba(52, 52, 52, 1);
    --csilk-white: rgba(255, 255, 255, 1);
    --csilk-green-dark: rgba(0, 70, 11, 1);
    --csilk-green-light: rgba(79, 153, 68, 1);
    --edge-fade: 64px;
}

body {
    margin: 0;
    background: var(--csilk-white);
    font-family: 'mr-eaves-xl-modern', sans-serif;
    font-display: swap;
    font-weight: 100;
    letter-spacing: .5px;
    color: var(--csilk-black);
}

.navBG {
    max-width: 100% !important;
}

/* .page-margin-main {
    margin-top: 64px;
} */


.term-artificial-trees .site-container {
    max-width: 100% !important;
}

/*
 *
 * hero 
 *
 */
.csilk-hero {
    position: relative;
    inline-size: 100%;
    background-image: url("https://commercialsilk-media.s3.amazonaws.com/wp-content/uploads/2025/08/23213514/Pine_Ceiling_Tree_Hand_Fabricated.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.csilk-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(0, 0, 0, .55) 0%,
            rgba(0, 0, 0, .40) 35%,
            rgba(0, 0, 0, 0) 70%);
    z-index: -1;
    pointer-events: none;
}

.csilk-hero__inner {
    max-width: 1920px;
    margin-inline: auto;
    block-size: 100%;
    padding: 172px 90px;
    display: grid;
    align-items: center;
}

.csilk-hero__content {
    color: var(--csilk-white);
    max-width: 640px;
    /* keep lines readable */
}

.csilk-hero__eyebrow {
    margin: 0 0 0px 0;
    font-family: 'mr-eaves-xl-modern', system-ui, sans-serif;
    font-size: 36px;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1;
}

.csilk-hero__title {
    margin: 0 0 14px 0;
    font-family: 'mr-eaves-xl-modern', system-ui, sans-serif;
    font-weight: 800;
    line-height: 1.05;
    font-size: 64px;
    font-weight: 700;
    text-transform: uppercase;
}

.csilk-hero__copy {
    margin: 0 0 32px 0;
    color: var(--csilk-white);
    font-size: 24px;
    font-weight: 400;
}

.csilk-hero__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.csilk-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding-inline: 18px;
    border-radius: 9999px;
    font: 700 14px/1 'mr-eaves-xl-modern', system-ui, sans-serif;
    letter-spacing: .02em;
    text-decoration: none;
    transition: transform .2s ease, background-color .2s ease, color .2s ease;
    will-change: transform;
}

.csilk-hero__btn--primary {
    background: var(--csilk-green-light);
    color: var(--csilk-white);
}

.csilk-hero__btn--primary:hover {
    background: var(--csilk-green-dark);
}

.csilk-hero__btn--secondary {
    background: var(--csilk-white);
    color: var(--csilk-black);
}

.csilk-hero__btn--secondary:hover {
    background: #f5f5f5;
}

@media (max-width: 976px) {
    .csilk-hero__inner {
        max-width: 1920px;
        margin-inline: auto;
        block-size: 100%;
        padding: 80px 32px;
        display: grid;
        align-items: center;
    }

    .csilk-heading__inner h2 {
        text-align: center;
    }
}

@media (max-width: 767px) {
    .csilk-hero__content {
        max-width: 100%;
    }

    .csilk-hero__actions .csilk-btn {
        width: 100% !important;
    }
}


/*
 *
 * headers 
 *
 */

.csilk-heading {
    position: relative;
    inline-size: 100%;
    padding: 48px 0 0 0;
}

.hide-desktop {
    display: none;
}

.csilk-heading__inner {
    max-width: 1920px;
    margin-inline: auto;
    block-size: 100%;
    padding: 32px 90px;
    display: grid;
    align-items: center;
}

.csilk-heading__inner-no-top-padding {
    max-width: 1920px;
    margin-inline: auto;
    block-size: 100%;
    padding: 0 90px;
    display: grid;
    align-items: center;
}

.csilk-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.csilk-section-header__left {
    display: flex;
    flex: 1;
}

.csilk-section-header__right {
    display: flex;
    flex: 1;
    justify-content: flex-end;
}

h2 {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 0;
    font-weight: 700;
    text-transform: uppercase;
}

/* wpastra breakpoints */
@media (max-width: 976px) {
    .csilk-heading__inner {
        padding: 32px 0;
    }

    .csilk-section-header {
        flex-direction: column;
    }

    .csilk-section-header__left,
    .csilk-section-header__right {
        flex: 0 0 auto;
        /* don't grow/shrink by old ratios */
        width: 100%;
        padding-left: 32px;
        padding-right: 32px;
        justify-content: center;
    }

    .csilk-heading__inner-no-top-padding {
        max-width: 1920px;
        margin-inline: auto;
        block-size: 100%;
        padding: 0 32px;
        display: grid;
        align-items: center;
    }

    .csilk-heading.hide-desktop {
        padding-top: 0;
    }

    .hide-desktop {
        display: block;
    }

    .hide-mobile {
        display: none;
    }

}

@media (max-width: 767px) {}




/*
 *
 * buttons 
 *
 */

.csilk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 20px 24px;
    border-radius: 35px;
    border: 2px solid transparent;
    font-family: 'mr-eaves-xl-modern', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
    transition: all .2s ease-in-out;
}


/* ---------- Context: ON DARK BACKGROUND ---------- */
.csilk-on-dark .csilk-btn--primary {
    background-color: var(--csilk-green-light);
    color: var(--csilk-white);
    border: 2px solid var(--csilk-green-light);
    transition: all .2s ease-in-out;
}

.csilk-on-dark .csilk-btn--primary:hover {
    background-color: var(--csilk-green-dark);
    border: 2px solid var(--csilk-green-dark);
    transition: all .2s ease-in-out;
}

.csilk-on-dark .csilk-btn--primary:active {
    background-color: var(--csilk-green-light);
    color: var(--csilk-white);
    border: 2px solid var(--csilk-green-light);
    transition: all .2s ease-in-out;
}

.csilk-on-dark .csilk-btn--ghost {
    background-color: var(--csilk-white);
    color: var(--csilk-green-dark);
    border: 2px solid var(--csilk-white);
    transition: all .2s ease-in-out;
}

.csilk-on-dark .csilk-btn--ghost:hover {
    background-color: var(--csilk-white);
    color: var(--csilk-green-dark);
    border: 2px solid var(--csilk-green-dark);
    transition: all .2s ease-in-out;
}

.csilk-on-dark .csilk-btn--ghost:active {
    background-color: var(--csilk-green-light);
    color: var(--csilk-white);
    border: 2px solid var(--csilk-green-light);
    transition: all .2s ease-in-out;
}

/* ---------- Context: ON LIGHT BACKGROUND ---------- */
.csilk-on-light .csilk-btn--primary {
    background-color: var(--csilk-green-dark);
    color: var(--csilk-white);
    border: 2px solid var(--csilk-green-dark);
    transition: all .2s ease-in-out;
}

.csilk-on-light .csilk-btn--primary:hover {
    background-color: var(--csilk-green-light);
    color: var(--csilk-white);
    border: 2px solid var(--csilk-green-light);
    transition: all .2s ease-in-out;
}

.csilk-on-light .csilk-btn--primary:active {
    background-color: var(--csilk-green-light);
    color: var(--csilk-white);
    border: 2px solid var(--csilk-green-light);
    transition: all .2s ease-in-out;
}

.csilk-on-light .csilk-btn--ghost {
    background-color: var(--csilk-white);
    color: var(--csilk-green-dark);
    border: 2px solid var(--csilk-green-dark);
    transition: all .2s ease-in-out;
}

.csilk-on-light .csilk-btn--ghost:hover {
    background-color: var(--csilk-white);
    color: var(--csilk-green-light);
    border: 2px solid var(--csilk-green-light);
    transition: all .2s ease-in-out;
}

.csilk-on-light .csilk-btn--ghost:active {
    background-color: var(--csilk-green-light);
    color: var(--csilk-white);
    border: 2px solid var(--csilk-green-light);
    transition: all .2s ease-in-out;
}

/* 100% buttons */
.csilk-btn--100-percent {
    width: 100%;
}

@media (max-width: 767px) {
    .csilk-btn--100-percent-mobile-only {
        width: 100%;
    }
}


/*
 *
 * slider splide 
 *
 */


/* full width slider (scoped) */
.csilk-slider.splide.trees {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* default desktop values */
    --peek: 148px;
    /* width of partial-slide area on each side */
    --arrow-size: 64px;
    /* matches your arrow button size */
}

/* neutralize global UL/LI rules inside the component */
.csilk-slider .splide__track {
    overflow: visible;
}

.csilk-slider .splide__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.csilk-slider .splide__slide {
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 1900px) {
    .csilk-slider.splide.trees {
        --peek: 118px;
    }
}

@media (max-width: 1400px) {
    .csilk-slider.splide.trees {
        --peek: 118px;
    }
}

@media (max-width: 1200px) {
    .csilk-slider.splide.trees {
        --peek: 89px;
    }
}

@media (max-width: 976px) {
    .csilk-slider.splide.trees {
        --peek: 60px;
    }
}

@media (max-width: 767px) {
    .csilk-slider.splide.trees {
        --peek: 70px;
    }
}

.csilk-slider .csilk-card {
    position: relative;
    display: block;
    /* clickable block */
    text-decoration: none;
    color: inherit;
    background: var(--csilk-white);
    border-radius: 18px;
    overflow: hidden;
    /* contains image zoom */
    box-shadow: 0 2px 6px 0 rgba(255, 255, 255, 1);
    /* initial white */
    transition:
        box-shadow 300ms ease-in-out,
        transform 300ms ease-in-out;
}

.csilk-slider .csilk-card:focus-visible {
    outline: 2px solid var(--csilk-green-light);
    outline-offset: 3px;
}

.csilk-slider .csilk-card img {
    display: block;
    width: 100%;
    height: 452px;
    object-fit: cover;
    transform: scale(1);
    transition: transform 300ms ease-in-out;
    will-change: transform;
}

.csilk-slider .csilk-card:hover {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.44);
}

.csilk-slider .csilk-card:hover img {
    transform: scale(1.05);
}

.csilk-slider .csilk-cta {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    color: var(--csilk-black);
    padding: 16px 12px;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
}

.csilk-slider .csilk-cta__label {
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1;
    white-space: normal;
    /* allow wrapping instead of ellipsis */
    overflow: visible;
    text-overflow: clip;
    padding-right: 12px;
    /* keep your spacing */
    transition: color 300ms ease-in-out;
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    /* break long words if needed */
}

.csilk-slider .csilk-cta__icon {
    width: 40px;
    height: 28px;
    border-radius: 0;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #111;
    /* SVG uses currentColor */
    transition: color 300ms ease-in-out, background-color 300ms ease-in-out;
}

.csilk-slider .csilk-icon-arrow {
    width: 18px;
    height: 18px;
    display: block;
}

/* When card is hovered, style the CTA */
.csilk-slider .csilk-card:hover .csilk-cta {
    background-color: var(--csilk-green-dark);
    color: var(--csilk-white);
}

.csilk-slider .csilk-card:hover .csilk-cta__label {
    color: var(--csilk-white);
}

.csilk-slider .csilk-card:hover .csilk-cta__icon {
    color: var(--csilk-white);
}

/* keep hover look while clicking (active) or focused */
.csilk-slider .csilk-card:active,
.csilk-slider .csilk-card:focus {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.0);
}

.csilk-slider .csilk-card:active img,
.csilk-slider .csilk-card:focus img {
    transform: scale(1);
}

.csilk-slider .csilk-card:active .csilk-cta,
.csilk-slider .csilk-card:focus .csilk-cta {
    background-color: var(--csilk-green-dark);
    color: var(--csilk-white);
}

.csilk-slider .csilk-card:active .csilk-cta__label,
.csilk-slider .csilk-card:focus .csilk-cta__label {
    color: var(--csilk-white);
}

.csilk-slider .csilk-card:active .csilk-cta__icon,
.csilk-slider .csilk-card:focus .csilk-cta__icon {
    color: var(--csilk-white);
}

/* overlay nav arrows (scoped) */
.csilk-slider .splide__arrows {
    pointer-events: none;
}

.csilk-slider .splide__arrow svg {
    fill: var(--csilk-white);
    height: 1.2em;
    width: 1.2em;
}

.csilk-slider .splide__arrow {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-radius: 999px;
    border: 0;
    background: var(--csilk-green-light);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    opacity: 1;
    transition: color 300ms ease-in-out, background-color 300ms ease-in-out;
    z-index: 3;
}

.csilk-slider .splide__arrow:hover {
    background: var(--csilk-green-dark);
}

/* Position arrows centered inside the peek area */
.csilk-slider.splide.trees .splide__arrow--prev {
    left: calc((var(--peek) - var(--arrow-size)) / 2);
}

.csilk-slider.splide.trees .splide__arrow--next {
    right: calc((var(--peek) - var(--arrow-size)) / 2);
}



.splide__arrow,
.splide__arrow:hover,
.splide__arrow:hover:not(:disabled) {
    opacity: 1 !important;
}

@media (max-width:900px) {
    .csilk-slider .csilk-card img {
        height: 452px;
    }
}

@media (max-width:640px) {
    .csilk-slider .csilk-card img {
        height: 452px;
    }
}

/*
 *
 * container 1 styles dark green back 
 *
 */

.csilk-container-trees-1 {
    position: relative;
    inline-size: 100%;
    padding: 0 0 0 0;
    background-color: #343434;
    margin-top: 48px;
}

.csilk-container-trees-1__inner {
    max-width: 1920px;
    margin-inline: auto;
    block-size: 100%;
    padding: 0;
    display: grid;
    align-items: center;
}

.csilk-container-trees-1__inner-no-top-padding {
    max-width: 1920px;
    margin-inline: auto;
    block-size: 100%;
    padding: 0 50px;
    display: grid;
    align-items: center;
}

.csilk-container-trees-1-inner-flex {
    display: flex;
    align-items: center;
    gap: 16px;
    align-items: stretch;
}

.csilk-container-trees-1-inner-flex__left {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 90px 90px 90px 90px;
    row-gap: 20px;
}

.csilk-container-trees-1-inner-flex__left img {
    width: 100%;
    height: auto;
    max-width: 430px;
}

.csilk-container-trees-1-inner-flex__right {
    display: flex;
    flex-direction: column;
    flex: 3;
    justify-content: flex-end;
    background-image: url("https://commercialsilk-media.s3.amazonaws.com/wp-content/uploads/2025/08/25223818/lifelike.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.csilk-container-trees-1-inner-flex h2,
.csilk-container-trees-1-inner-flex h2 p {
    color: #FFF;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    margin-bottom: 0 !important;
}

.csilk-container-trees-1-inner-flex p {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}


/* wpastra breakpoints */
@media (max-width: 976px) {
    .csilk-container-trees-1-inner-flex {
        flex-direction: column;
        /* stack */
    }

    .csilk-container-trees-1-inner-flex__left,
    .csilk-container-trees-1-inner-flex__right {
        flex: 0 0 auto;
        /* don't grow/shrink by old ratios */
        width: 100%;
    }

    .csilk-container-trees-1-inner-flex__left {
        padding-left: 32px;
        padding-right: 32px;
    }

    .csilk-container-trees-1-inner-flex__right {
        min-height: 500px;
        /* make the background visible when stacked */
    }

}

@media (max-width: 767px) {}



/*
 *
 * container 2 styles light green back 
 *
 */

.csilk-container-trees-2 {
    position: relative;
    inline-size: 100%;
    padding: 0 0 0 0;
    background-color: #F6F6F6;
    margin-top: 0;
}

.csilk-container-trees-2__inner {
    max-width: 1920px;
    margin-inline: auto;
    block-size: 100%;
    padding: 0;
    display: grid;
    align-items: center;
}



.csilk-two {
    --left: 32%;
    --right: 68%;
}


/* --- FLEX version --- */
.csilk-two--flex {
    display: flex;
    gap: 16px;
}

.csilk-two--flex .csilk-two__left {
    flex: 0 0 var(--left);
    max-width: var(--left);
}

.csilk-two--flex .csilk-two__right {
    flex: 0 0 var(--right);
    max-width: var(--right);
}

/* --- GRID version --- */
.csilk-two--grid {
    display: grid;
    grid-template-columns: var(--left) var(--right);
}

.csilk-two__col.csilk-two__col1 {
    padding: 90px 32px 90px 90px;
}

.csilk-two__col.csilk-two__col2 {
    padding: 90px 32px 90px 36px;
}

.csilk-two__col1 .above-h2 {
    color: #343434;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding-bottom: 16px;
}

.csilk-two__col1 h2,
.csilk-two__col1 h2 p {
    color: #343434;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding-bottom: 16px;
    margin-bottom: 0 !important;
}

.csilk-two__col1 h2 p {
    padding-bottom: 0;
    margin-bottom: 0 !important;
}

.csilk-two__col1 p {
    color: #343434;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    padding-bottom: 36px;
    margin-bottom: 0;
}


.csilk-two__col img {
    width: 100%;
    height: auto;
    border-radius: 16px;
}




.csilk-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    /* row & column gap */
}


.innerinner-title {
    padding-top: 16px;
    color: #343434;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    /* 54px */
    text-transform: uppercase;
}

.innerinner-copy {
    padding-top: 8px;
    color: #343434;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 30px */
}


@media (max-width: 1600px) {
    .csilk-two {
        --left: 35%;
        --right: 65%;
    }
}

@media (max-width: 1200px) {
    .csilk-two {
        --left: 50%;
        --right: 50%;
    }

    .csilk-steps {
        grid-template-columns: repeat(1, 1fr);
        gap: 24px;
    }

}

/* wpastra breakpoints */
@media (max-width: 976px) {

    .csilk-two--grid {
        display: grid;
        grid-template-columns: 100%;
    }

    .csilk-two__col.csilk-two__col1 {
        padding: 90px 32px 32px 32px;
    }

    .csilk-two__col.csilk-two__col2 {
        padding: 32px 32px 90px 36px;
    }
}

@media (max-width: 767px) {}



/* container 3 anim gif */

.csilk-container-trees-3 {
    position: relative;
    inline-size: 100%;
    padding: 0 0 0 0;
    background-color: rgba(52, 52, 52, 1);
    margin-top: 0;
}

.csilk-container-trees-3__inner {
    max-width: 1920px;
    margin-inline: auto;
    block-size: 100%;
    padding: 0;
    display: grid;
    align-items: center;
}

/* % split via vars; change inline or here */
.csilk-three {
    --left: 60%;
    --right: 40%;
}


/* --- FLEX version --- */
.csilk-three--flex {
    display: flex;
    gap: 16px;
}

.csilk-three--flex .csilk-three__left {
    flex: 0 0 var(--left);
    max-width: var(--left);
}

.csilk-three--flex .csilk-three__right {
    flex: 0 0 var(--right);
    max-width: var(--right);
}

/* --- GRID version --- */
.csilk-three--grid {
    display: grid;
    grid-template-columns: var(--left) var(--right);
}

.csilk-three__col.csilk-three__col1 {
    padding: 90px 32px 0px 90px;
    align-self: end;
}

.csilk-three__col.csilk-three__col2 {
    padding: 90px 90px 90px 90px;
    align-self: center;
}

.csilk-three--grid .above-h2 {
    color: var(--csilk-white);
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding-bottom: 16px;
}

.csilk-three--grid h2 {
    color: var(--csilk-white);
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding-bottom: 16px;
}

.csilk-three--grid p {
    color: var(--csilk-white);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    padding-bottom: 36px;
    margin-bottom: 0;
}


.csilk-three--grid img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

@media (max-width: 1200px) {
    .csilk-three {
        --left: 50%;
        --right: 50%;
    }
}


/* wpastra breakpoints */
@media (max-width: 976px) {

    .csilk-three--grid {
        display: grid;
        grid-template-columns: 100%;
    }

    .csilk-three__col.csilk-three__col1 {
        padding: 90px 32px 0 32px;
        align-self: end;
    }

    .csilk-three__col.csilk-three__col2 {
        padding: 32px 32px 90px 36px;
        align-self: center;
    }
}

@media (max-width: 767px) {}


/*
 *
 * container 4 blured white 
 *
 */


.csilk-hero-cta-2 {
    --bg: none;
    position: relative;
    width: 100%;
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--csilk-white);
    font-family: 'mr-eaves-xl-modern', sans-serif;
    isolation: isolate;
    margin-top: 48px;

    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.00) 64.43%, rgba(0, 0, 0, 0.90) 100%),
        var(--bg) lightgray 50% / cover no-repeat;
}


.csilk-hero-cta-2::before {
    content: none;
}

.csilk-hero-cta-2__inner {
    position: relative;
    z-index: 1;
    max-width: 1920px;
    margin: 0 auto;
    padding: 186px 90px;
    display: flex;
    align-items: center;
}

/* frosted panel */
.csilk-hero-cta-2__panel {
    color: var(--csilk-black);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    padding: 28px 26px 26px 26px;
    max-width: 480px;

    border-radius: 16px;
    background: rgba(255, 255, 255, 0.80);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.50);
}

/* type */
.csilk-hero-cta-2__eyebrow {
    margin: 0 0 16px 0;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(52, 52, 52, .85);
    font-size: 32px;
}

.csilk-hero-cta-2__title {
    margin: 0 0 16px 0;
    font-weight: 800;
    line-height: 1.04;
    color: var(--csilk-black);
    font-size: 64px;
}

.csilk-hero-cta-2__copy {
    margin: 0 0 32px 0;
    color: rgba(52, 52, 52, .9);
    line-height: 1.7;
    font-size: 20px;
}

/* credit */
.csilk-hero-cta-2__credit {
    position: absolute;
    left: 90px;
    bottom: 20px;
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
}


.csilk-hero-cta-2__credit a {
    display: inline-flex;
    padding: 8px 0;
    justify-content: center;
    align-items: center;
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.csilk-hero-cta-2__credit a:hover,
.csilk-hero-cta-2__credit a:active {
    color: #4F9944 !important;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}


/* wpastra breakpoints */
@media (max-width: 976px) {

    .csilk-hero-cta-2__inner {
        padding: 48px 32px 90px 32px;
    }

    .csilk-hero-cta-2__credit {
        left: 32px;
    }

    .csilk-hero-cta-2 {}

    .csilk-hero-cta-2__panel {
        max-width: 100%;
        padding: 22px;
    }

    .csilk-hero-cta-2__eyebrow {
        font-size: 32px;
    }

    .csilk-hero-cta-2__title {
        font-size: 48px;
    }

}

@media (max-width: 767px) {

    .csilk-hero-cta-2__inner {
        align-items: flex-start;
    }
}



/*
 *
 * variety / applications header
 *
 */


.csilk-online-catalog .above-h2 {
    color: #343434;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding-bottom: 8px;
}

.csilk-online-catalog h2 {
    color: #343434;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding-bottom: 16px;
}

.csilk-online-catalog p {
    color: #343434;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    padding-bottom: 36px;
    margin-bottom: 0;
}

.csilk-online-catalog .csilk-heading__inner {
    text-align: center;
}

.csilk-heading__innerinner {
    max-width: 800px;
    width: 100%;
    margin-inline: auto;
    padding-inline: 32px;
}




/*
 *
 * variety / applications
 *
 */

.csilk-circles {
    width: 100%;
}

.csilk-circles img {
    width: 100% !important;
    height: auto !important;
}

.csilk-circles__inner {
    max-width: 1920px;
    margin-inline: auto;
    padding: 24px 90px 40px 90px;
    font-family: 'mr-eaves-xl-modern', system-ui, sans-serif;
}


.csilk-circles__tabs {
    display: flex;
    justify-content: center;
    gap: 32px;
}

.csilk-circles__tab {
    position: relative;
    appearance: none;
    border: 0;
    background: transparent;
    padding: 6px 8px 8px 8px;
    letter-spacing: .04em;
    cursor: pointer;

    font-family: 'mr-eaves-xl-modern', system-ui, sans-serif;
    color: rgba(151, 151, 151, 1);
    text-align: center;
    font-size: 36px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    text-transform: uppercase;
}

.csilk-circles__tab.is-active {
    color: var(--csilk-green-dark);
}

.csilk-circles__tab.is-active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--csilk-green-dark);
    border-radius: 2px;
}

/* Sliding viewport/track */
.csilk-circles__viewport {
    position: relative;
    overflow: hidden;
}

.csilk-circles__track {
    display: flex;
    transition: transform 480ms ease;
    will-change: transform;
}

.csilk-circles__panel {
    flex: 0 0 100%;
}

.csilk-circles__panel[hidden] {
    display: block;
}

/* === Centered rows (flex-based grid) === */
.csilk-circles__grid {
    --cols: 5;
    --gap-x: 48px;
    /* horizontal gap  */
    --gap-y: 108px;
    /* vertical gap    */

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* <— centers the last row */
    column-gap: var(--gap-x);
    row-gap: var(--gap-y);
    list-style: none;
    margin: 0;
    padding: 108px 90px 20px 90px;
}

.csilk-circles__item {
    /* width of each column = (container - total gaps) / cols */
    flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap-x)) / var(--cols));
    display: flex;
    /* center card inside its column */
    justify-content: center;
    margin: 0 !important
}





.csilk-circles__item a {
    display: grid;
    justify-items: center;
    row-gap: 14px;
    text-decoration: none;
    color: var(--csilk-black);

    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;


}

/* Keep the circle responsive */
.csilk-circles__thumb {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: #eee;
    transition: transform 220ms ease;
    transform-origin: center;
}

/* hover/focus: shrink the entire circle */
.csilk-circles__item:hover .csilk-circles__thumb,
.csilk-circles__item:focus-within .csilk-circles__thumb {
    transform: scale(.95);
}

/* Smooth zoom for circle image */
.csilk-circles__thumb img {
    transition: transform 300ms ease;
    will-change: transform;
    transform-origin: center;
}

.csilk-circles__label {
    transition: color 200ms ease;
    text-decoration: none;
    font-weight: 400;
    text-align: center;
}

/* Center small rows nicely (when fewer items) */
.csilk-circles__grid {
    justify-items: center;
}

/* Hover / keyboard focus */
.csilk-circles__item a:hover .csilk-circles__thumb img,
.csilk-circles__item a:focus-visible .csilk-circles__thumb img {
    /* transform: scale(1.1); */
}

.csilk-circles__item a:hover .csilk-circles__label,
.csilk-circles__item a:focus-visible .csilk-circles__label {
    color: var(--csilk-green-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--csilk-green-dark);
}



/* Breakpoints: just change the column count */
@media (max-width:1200px) {

    .csilk-circles__inner {
        padding: 24px 90px 40px 90px;
    }

    .csilk-circles__grid {
        --cols: 5;
        --gap-x: 38px;
        --gap-y: 88px;
        padding: 88px 0px 20px 0px;
    }
}

@media (max-width: 976px) {
    .csilk-circles__inner {
        padding: 24px 32px 40px 32px;
    }

    .csilk-circles__grid {
        --cols: 5;
        --gap-x: 38px;
        --gap-y: 88px;
        padding-top: 88px;
        padding: 88px 0px 20px 0px;
    }

    .csilk-circles__item a {
        row-gap: 6px;
    }

    .csilk-circles__item a {
        font-size: 20px;
    }
}

@media (max-width: 767px) {
    .csilk-circles__inner {
        padding: 24px 32px 40px 32px;
    }

    .csilk-circles__grid {
        --cols: 4;
        --gap-x: 28px;
        --gap-y: 48px;
        padding: 108px 0px 20px 0px;
    }

    .csilk-circles__item a {
        font-size: 16px;
    }
}

@media (max-width:500px) {

    .csilk-circles__inner {
        padding: 24px 32px 10px 32px;
    }

    .csilk-circles__tabs {
        gap: 12px;
    }

    .csilk-circles__tab {
        font-size: 24px;
    }

    .csilk-circles__tab.is-active::after {
        height: 3px;
    }

    .csilk-circles__grid {
        --cols: 4;
        --gap-x: 18px;
        --gap-y: 28px;
        padding-top: 28px;
    }

    .csilk-circles__thumb {
        max-width: 58px;
    }

    .csilk-circles__item a {
        row-gap: 6px;
    }
}

/*
 *
 * read more / read less
 *
 */


.csilk-online-readmore p,
.csilk-online-readmore .readmorereadlesslink {
    color: #343434;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    padding-bottom: 36px;
    margin-bottom: 0;
    text-align: center;
}

.csilk-online-readmore a {
    cursor: pointer;
    text-decoration: underline;
    color: var(--csilk-black);
    transition: all .2s ease-in-out;
}

.csilk-online-readmore a:hover,
.csilk-online-readmore a:active {
    cursor: pointer;
    text-decoration: underline;
    color: var(--csilk-green-dark);
    transition: all .2s ease-in-out;

}

.csilk-online-readmore .readmorereadlesslink {
    cursor: pointer;
    text-decoration: underline;
    color: var(--csilk-green-light);
    transition: all .2s ease-in-out;
}

.csilk-online-readmore .readmorereadlesslink:hover,
.csilk-online-readmore .readmorereadlesslink:active {
    cursor: pointer;
    text-decoration: underline;
    color: var(--csilk-green-dark);
    transition: all .2s ease-in-out;

}

.csilk-online-readmore h2 {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 0;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 36px;
}

.csilk-online-catalog .csilk-heading__inner {
    text-align: center;
}

.csilk-heading__innerinner {
    max-width: 800px;
    width: 100%;
    margin-inline: auto;
    /* centers the block */
    /* optional for small-screen breathing room: */
    padding-inline: 32px;
}



/*
 *
 * marquee
 *
 */

.marquee {
    --gap: 1rem;
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    height: auto;
    mask-image: linear-gradient(to right, transparent 0%, black 10% 80%, transparent 100%);
}

.marquee__content {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    gap: var(--gap);
    min-width: 80%;
    padding: 0 !important;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
    .marquee__content {
        animation-play-state: paused !important;
    }
}

.enable-animation {
    padding: 92px 0 44px 0;
}

/* Enable animation */
.enable-animation .marquee__content {
    animation: scroll 40s linear infinite;
}

/* Reverse animation */
.marquee--reverse .marquee__content {
    animation-direction: reverse;
}

/* Attempt to size parent based on content. Keep in mind that the parent width is equal to both content containers that stretch to fill the parent. */
.marquee--fit-content {
    max-width: fit-content;
}

/* A fit-content sizing fix: Absolute position the duplicate container. This will set the size of the parent wrapper to a single child container. Shout out to Olavi's article that had this solution 👏 @link: https://olavihaapala.fi/2021/02/23/modern-marquee.html  */
.marquee--pos-absolute .marquee__content:last-child {
    position: absolute;
    top: 0;
    left: 0;
}

/* Enable position absolute animation on the duplicate content (last-child) */
.enable-animation .marquee--pos-absolute .marquee__content:last-child {
    animation-name: scroll-abs;
}

@keyframes scroll-abs {
    from {
        transform: translateX(calc(100% + var(--gap)));
    }

    to {
        transform: translateX(0);
    }
}

.marquee__content>* {
    flex: 0 0 auto;
    color: white;
    margin: 2px;
    border-radius: 0.25rem;
    text-align: center;
}

ul.marquee__content,
ol.marquee__content {
    padding-left: 0px;
    list-style: none;
}

img.img-grayscale {
    filter: none !important;
    max-height: 90px !important;
}

@media (max-width: 976px) {

    .enable-animation .marquee__content {
        animation: scroll 30s linear infinite;
    }
}

@media (max-width: 767px) {
    .enable-animation .marquee__content {
        animation: scroll 20s linear infinite;
    }
}