/* Hide Apply Now */
.c-apply-now {
    display:none;
}
.c-desktop-menu-full {
    top:0;
}
#mobile-nav.js-is-open {
    padding-block-start: var(--gutter);
}

/* Section 1 */
.c-join-banner {
    position: relative;
    background-size: cover;
    background-position: center center;
    aspect-ratio: 15182/4584;
    overflow: hidden;
}

.c-join-banner__img {
    /* 15182 x 4584 */
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition:1s ease-in-out;
}

/* Video */
.c-join-banner__video-cont {
    position: absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
}

.c-join-banner__video-cont video {
    width:100%;
    height:100%;
    object-fit: cover;
}

/* Hidden for now */

.c-join-banner__wrapper {
    display:flex;
    padding-block:var(--space-l-5xl);
}

.c-join-banner__columns {
    background-color:rgba(255,255,255,.8);
    padding:var(--space-xl) var(--space-m);
    min-width:min(450px, 100%);
    flex-basis:55%;
    box-sizing: border-box;
    border-radius: 5px;
}

.c-join-banner__header {
    margin-inline: auto;
    overflow: hidden;
    position: relative;
    /* Added for line-height fix */
    padding-block: 1%;
}

.c-join-banner__heading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    color:var(--pine);
}

/* Animation sizer */
.c-join-banner__heading--first {
    position: relative;
}

@media(max-width: 768px) {
    .c-join-banner__columns {
        flex-basis:auto;
        margin-inline:auto;
    }
}

/* Section 2 */
.c-esop {
    background:var(--powder);
    padding-block:var(--space-l-3xl);
}

.c-esop-header__content {
    padding-block-end:var(--space-m);
}

.c-esop__list {
    margin-left:2em;
}
.c-esop__item {
    font-weight:300;
}

.c-esop__img-collage {
    display:flex;
    float:inline-end;
    margin-left:var(--space-l);
    width: 56%;
}

/* ESOP Images */
.c-esop_images {
    display: block;
    position:relative;
    width:100%;
    --parent-width:1600;
    --parent-height:930;
    aspect-ratio:var(--parent-width) / var(--parent-height);
    /* Border style offset */
    margin: 5% 5% 8% 3%;
}
.c-esop_img {
    position:absolute;
    height:auto;
    filter:drop-shadow(3px 3px 10px rgba(0,0,0,.25));
    transition:.5s ease-in-out;
}
.c-esop_img::before {
    content: '';
    position: absolute;
    top: -7%;
    left: -7%;
    width: 114%;
    height: 120%;
    background-color:var(--white);
}
.c-esop_img img {
    position:relative;
}
.c-esop_img--1 {
    /* 450x411 */
    top: 38%;
    left: 45%;
    width:calc( 450 / var(--parent-width) * 100% );
    z-index:3;
}
.c-esop_img--2 {
    /* 450x495 */
    top:0;
    left:25%;
    width:calc( 450 / var(--parent-width) * 100% );
    z-index:2;
    transform: rotate(-8deg);
}
.c-esop_img--3 {
    /* 450x600 */
    bottom:0%;
    left:0%;
    width:calc( 450 / var(--parent-width) * 100% );
}
.c-esop_img--4 {
    /* 420x560 */
    top:2%;
    right:0;
    width:calc( 420 / var(--parent-width) * 100% );
    z-index:1;
    transform: rotate(8deg);
}

@media (hover:hover) {
    .c-esop_img--3:hover {
        transform:rotate(-8deg) scale(1.15);
        z-index:5;
    }
    .c-esop_img--2:hover {
        transform:rotate(0deg) scale(1.15);
        z-index:5;
    }
    .c-esop_img--1:hover {
        transform:rotate(8deg) scale(1.15);
        z-index:5;
    }
    .c-esop_img--4:hover {
        transform:rotate(0deg) scale(1.15);
        z-index:5;
    }
}

@media (max-width: 768px) {
    .c-esop__img-collage {
        float: unset;
        margin-inline: auto;
        width: 100%;
    }
    .c-esop-header__content {
        padding-block-start:var(--space-m);
    }
}

/* Section 3 */
.c-core-values {
    background:var(--white);
    padding-block:var(--space-l-3xl);
}

.c-core-values__columns {
    align-items: center;
    gap:var(--space-xl);
}

.c-core-values__list {
    margin-left:2em;
}
.c-core-values__item {
    font-weight:300;
}

/* Offest line-height from Shelby */
.c-core-values__title {
    margin-block-end:-2.5%;
}

/* Puzzle Pieces */
.c-core-values__column--1 {
    max-width:min(600px, 100%);
}
.c-core-values__puzzle {
    display: block;
    position:relative;
    /* 140 + 165 = 305 */
    aspect-ratio:305/305;
    /* Spacing is doubled */
    --puzzle-space:1.5%;
}
/* 1 & 4 - 140/165, 2 & 3 - 165/140 */
.c-core-values__puzzle-piece {
    position:absolute;
    height:auto;
    filter:drop-shadow(3px 3px 10px rgba(0,0,0,.25));
}
.c-core-values__puzzle-piece img {
    transition:.6s ease-in-out;
    --puzzle-scale:1.2;
}
.c-core-values__puzzle-piece--1 {
    top:0;
    left:0;
    width:calc(46% - var(--puzzle-space));
}
.c-core-values__puzzle-piece--2 {
    top:0;
    right:0;
    width:calc(54% - var(--puzzle-space))
}
.c-core-values__puzzle-piece--1 img, .c-core-values__puzzle-piece--2 img {
    transform-origin: bottom bottom;
}
.c-core-values__puzzle-piece--3 {
    bottom:0;
    left:0;
    width:calc(54% - var(--puzzle-space))
}
.c-core-values__puzzle-piece--4 {
    bottom:0;
    right:0;
    width:calc(46% - var(--puzzle-space))
}
.c-core-values__puzzle-piece--3 img, .c-core-values__puzzle-piece--4 img {
    transform-origin: top top;
}

@media (hover:hover) {

    .c-core-values__puzzle-piece:hover {
        z-index:1;
    }
    /* .c-core-values__puzzle-piece--1:hover img, .c-core-values__puzzle-piece--4:hover img {
        transform:scale(var(--puzzle-scale)) rotateY(-360deg);
    }
    .c-core-values__puzzle-piece--2:hover img, .c-core-values__puzzle-piece--3:hover img {
        transform:scale(var(--puzzle-scale)) rotateX(-360deg);
    } */

    .c-core-values__puzzle-piece--1:hover img {
        transform:scale(var(--puzzle-scale)) rotateY(-360deg) translateX(15%) translateY(15%);
    }
    .c-core-values__puzzle-piece--2:hover img {
        transform:scale(var(--puzzle-scale)) rotateX(-360deg) translateX(-15%) translateY(15%);
    }
    .c-core-values__puzzle-piece--3:hover img {
        transform:scale(var(--puzzle-scale)) rotateX(360deg) translateX(15%) translateY(-15%);
    }
    .c-core-values__puzzle-piece--4:hover img {
        transform:scale(var(--puzzle-scale)) rotateY(360deg) translateX(-15%) translateY(-15%);
    }

}

/* Section 4 */
.c-apart {
    background-color:var(--pine);
    padding-block:var(--space-l-3xl);
    color:var(--white);
}
.c-apart-carousel {
    margin-block-start:0;
}

/* Section 5 */
.c-support-grow {
    background-color:var(--powder);
    padding-block:var(--space-l-3xl);
}

.c-support-grow__columns {
    xmargin-block-start: var(--space-m);
}
.c-support-grow__column--1 {
    xmargin-block-start:5%;
    min-width:min(280px, 100%);
    flex-basis:calc( 30% - (var(--space-l) / 1.5 ));
}

.c-support-grow__heading--mobile {
    display:none;
}

@media (max-width: 1024px) {
    .c-support-grow__column--1 {
        margin-block-start:0;
    }
    .c-support-grow__heading--mobile {
        display:block;
    }
    .c-support-grow__heading--desktop {
        display:none;
    }
}

.c-support-grow__column--2 {
    min-width:min(550px, 100%);
    flex-basis:calc( 70% - (var(--space-l) / 1.5 ));
    flex-grow:1;
}
.c-support-grow__columns--1 {
    align-items: stretch;
}
.c-support-grow__columns--2 {
    align-items: center;
    margin-block-start:var(--space-l-xl);
}

.c-support-grow__column {
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-l);
}

.c-support-grow-column__item {
    position: relative;
    display:flex;
    flex-grow:1;
    text-wrap:balance;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:var(--medallion);
    padding:var(--space-s);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    --border-color:var(--corporategreen);
    transition:.5s ease-in-out;
}
.c-support-grow-column__item::before {
    top: 0;
    left: 0;
}
.c-support-grow-column__item::after {
    bottom:0;
    right:0;
}
.c-support-grow-column__item::before, .c-support-grow-column__item::after {
    border: 3px solid transparent;
    width:0;
    height:0;
    box-sizing: inherit;
    content: "";
    position: absolute;
}

@media (hover:hover) {
    .c-support-grow-column__item:hover::before {
        border-top-color: var(--border-color);
        border-right-color:var(--border-color);
        transition: width 0.2s ease-out, height 0.2s ease-out 0.2s;
    }
    .c-support-grow-column__item:hover::after {
        border-bottom-color: var(--border-color);
        border-left-color: var(--border-color);
        transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
    }
    .c-support-grow-column__item:hover::before, .c-support-grow-column__item:hover::after {
        width:100%;
        height:100%;
    }
    .c-support-grow-column__item:hover {
        transform:scale(1.1);
    }
}

.c-support-grow__column--1--2 {
    min-width:min(340px, 100%);
    flex-basis:calc( 40% - (var(--space-l) / 1.5 ));
}
.c-support-grow__column--2--2 {
    min-width:min(450px, 100%);
    flex-basis:calc( 60% - (var(--space-l) / 1.5 ));
    flex-grow:1;
    padding:var(--space-xs);
    filter: drop-shadow(3px 3px 6px rgba(0,0,0,.3));
}

.c-support-grow-column__title--2 {
    margin-block-end:-2.5%;
}
.c-support-grow-column__subtitle--2 {
    font-style: italic;
    margin-block-start:0;
}

.c-support-grow__img {
    cursor:pointer;
    transition:.5s ease-in-out;
}

@media (hover:hover) {
    .c-support-grow__img:hover {
        transform:scale(1.05);
    }
}

/* Form */
.c-support-grow-form {
    background:var(--white);
    border-radius: var(--space-xs);
    box-shadow: 3px 3px 20px -2px rgba(0,0,0,.5);
}
.c-support-grow-form--checkbox {
    background: unset;
    border-radius: unset;
    box-shadow: unset;
    margin-block:var(--space-xs);
}

.c-support-grow-form__grid {
    display:grid;
    gap: var(--space-2xs);
    grid-template-columns: repeat( auto-fill, minmax(min(100%, 310px), 1fr));
    grid-auto-flow:column;
}
.c-support-grow-form__grid > label:nth-of-type(odd), .c-support-grow-form__grid > div:nth-of-type(odd) {
    grid-column: 1 / span 1;
}
.c-support-grow-form__grid > label:nth-of-type(even), .c-support-grow-form__grid > div:nth-of-type(even) {
    grid-column: 2 / span 1;
}

.c-support-grow-form__grid > div:nth-of-type(11), .c-support-grow-form__grid > div:nth-of-type(12) {
    grid-column: 1 / sapn 2;
    margin-block-start:var(--space-2xs);
}


@media (max-width: 768px) {
    .c-support-grow-form__grid {
        grid-auto-flow:row;
    }
    .c-support-grow-form__grid > label:nth-of-type(odd), .c-support-grow-form__grid > div:nth-of-type(odd) {
        grid-column: unset;
    }
    .c-support-grow-form__grid > label:nth-of-type(even), .c-support-grow-form__grid > div:nth-of-type(even) {
        grid-column: unset;
    }
}


/* Section 6 */
.c-socials {
    background-color:var(--white);
    padding-block:var(--space-l-3xl);
}

.c-socials__icons {
    display:flex;
    justify-content: center;
    align-items: center;
    gap:var(--space-s);
}

.c-socials__link {
    transition:.5s ease-in-out;
}
.c-socials__link svg {
  font-size:2.5em;
}
.c-socials__link--green {
    color:var(--corporategreen)
}
.c-socials__link--frost {
    color:var(--frost)
}
.c-socials__link--medallion {
    color:var(--medallion)
}
.c-socials__link--fire {
    color:var(--fire)
}

@media (hover: hover) {
  .c-socials__link:hover {
    transform:rotateY(360deg) scale(1.1);
    transform-origin: center center;
  }
}

/* Carousel Styles */
.c-apart-carousel__name {
    color:var(--medallion);
}
.c-socials-carousel__name {
    color:var(--corporategreen);
}
.c-socials-carousel__caption, .c-apart-carousel__caption {
    margin-block-start:var(--space-2xs);
}

.splide {
    /* Everything is calculated off the slide arrow width var */
    --slide-arrow-width:var(--step-2);
    --slide-arrow-padding:calc( var(--slide-arrow-width) * 1.5 );
    --slide-arrow-space: calc( (var(--slide-arrow-width) * .33) + var(--slide-arrow-width) );

    --slide-dot-width: calc( var(--slide-arrow-width) * .4);
    --slide-dot-space: calc( (var(--slide-arrow-width) * 1.5) / 2 );

    padding:var(--slide-arrow-padding);
    padding-block-start:var(--space-xs);
}
.splide__slide__content {
    text-align:center;
    margin-block-start:var(--space-s);
}
.splide__arrow {
    background: none;
    border: 0;
    cursor: pointer;
    position: absolute;
    padding:0;
    top: 50%;
}
.c-apart-carousel .splide__arrow {
    color:var(--white);
}
.c-socials-carousel .splide__arrow {
    color:var(--corporategreen);
}

.splide__arrow svg {
    fill: currentColor;
    stroke: currentColor;
    stroke-linecap: square;
    stroke-width: 0px;
    height:var(--slide-arrow-width);
    vertical-align: middle;
    width:var(--slide-arrow-width);
    transition: .5s ease-in-out;
}
.splide__arrow--prev {
  left:0;
  transform:scaleX(-1) translateY(-50%) translateX(-25%);
}
.splide__arrow--next {
  right:0;
  transform: translateY(-50%) translateX(-25%);
}
@media (hover: hover) {
    .splide__arrow:hover svg {
        transform: scale(1.2);
    }
}

.splide__pagination {
    bottom:calc(1 * var(--slide-dot-space));
    left:50%;
    position:absolute;
    transform:translate(-50%, 50%);
    width:100%;
    padding:0;
}
.splide__pagination__page {
    background:#95a5a6;
    border:0;
    border-radius:50%;
    display:inline-block;
    height:var(--slide-dot-width);
    margin:0 .1em;
    padding:0;
    position:relative;
    transition:background-color .2s ease,color .2s ease;
    width:var(--slide-dot-width);
    cursor: pointer;
}
.splide__pagination__page:not(.is-active):hover {
    background:#c4d5d7;
}
.splide__pagination__page:focus:not(:focus-visible) {
    outline:0
}
.splide__pagination__page:focus-visible {
    outline-offset:3px;
    z-index:1
}

.c-apart-carousel .splide__pagination__page.is-active {
    background:var(--medallion);
}
.c-apart-carousel .splide__pagination__page:focus-visible {
    outline:3px solid rgba(255, 211, 63, .8);
}
.c-socials-carousel .splide__pagination__page.is-active {
    background:var(--corporategreen);
}
.c-socials-carousel .splide__pagination__page:focus-visible {
    outline:3px solid rgba(71, 119, 61, .8);
}

/* Dialog / Modal */
#c-joinus-modal__wrapper {
    flex-grow:1;
}