/* Component styles */

/* Links */
.link {
    text-decoration: none;
    color: var(--color-dark-green);
    font-size: 1rem;
    position: relative;
}

.link.white {
    color: #fff;
}

.link.white.chevron-right::after {
    filter: brightness(2);
}

.link.line {
    padding-left: 6rem;
}

.link.line::before {
    content: '';
    background: var(--color-bright-green);
    width: 4rem;
    left: 0;
    top: 50%;
    position: absolute;
    height: 1px;
}

.link.chevron-right {
    padding-right: 2rem;
}

.link.chevron-right::after {
    content: '';
    background: url(/assets/icons/icon-chevron-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 1.25rem;
    right: 0;
    top: 50%;
    position: absolute;
    height: 1.25rem;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
}

.link.chevron-right:hover::after {
    transform: translateY(-50%) translateX(0.5rem);
}

.link-chevron {

}

/* Icons */
.icon {
    position:relative;
}

.icon.rounded-plus.icon-before::before {
    background-image: url(/assets/icons/icon-plug-rounded.svg);
    background-size: contain;
    width: 1rem;
    height: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 0.08rem ));

    filter:var(--filter-light-green);
}

.icon.rounded-plus.icon-before.icon-left::before {
    left: 0;
}

.icon.login.icon-after::after {
    background-image: url(/assets/icons/icon-login.svg);
    background-size: contain;
    width: 1rem;
    height: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(calc(-50% - 0.08rem ));

    filter:var(--filter-light-green);
}

.icon.login.icon-after::after {
    right: 0;
}

li.blank {
    width: 1px;
    background: rgba(255,255,255,0.1);
}

li.blank.dark {
    background: rgb(31 46 49 / 20%);
}


.icon-left {
    padding-left: 1.75rem;
}

.icon-right {
    padding-right: 1.75rem;
}

.chevron-right {

}

.saving-left {

}

.experience-left {

}

.support-left {

}

.rounded-plus {

}

.login {

}

/* Tabs */
.tabs {

}

.tabs-header {
    width: 100%;
    margin-bottom: 2rem;
}

.tabs-navigation {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    border-top: 1px solid var(--color-border-dark);
    gap: 2rem;
}

.tab-button {
    padding: 2rem 0;
    background: none;
    font-size: 1rem;
    opacity: 0.25;
    cursor: pointer;
    position: relative;
    transition: opacity 0.4s ease;
    border:none;
    outline:none;
}

.tabs-navigation li {
    position: relative;
}

.tabs-navigation li::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--color-bright-green);
    transform: translateX(-50%);
    transition: width 0.4s ease;
}

.tabs-navigation li.active::before {
    width: 100%;
}

.tabs li.active button {
    opacity: 1;
}

.tabs .tabs-content {
    position: relative;
}

.tabs .tab {
    display: none;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 3rem;
    position: relative;
}

.tabs .tab.active {
    display: flex;
}

.tabs .tab .column::before {
    content: '';
    position: absolute;
    left: 3.125rem;
    top: 3.75rem;
    width: 2rem;
    height: 1px;
    background: #fff;
    z-index: 2;
}

.tabs .tab .column {
    background: var(--color-dark-green);
    display: flex;
    flex-flow:column;
    align-items: flex-start;
    width: 48%;
    min-height: 25rem;
    position: relative;
}

.tab a {
    padding: 3.75rem 3.125rem;
    text-decoration: none;
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: self-start;
    height: 100%;
    overflow: hidden;
}

.tab .link {
    bottom: -2rem;
    display: inline-block;
    position: absolute;
    transition: bottom 0.4s ease;
}

.tab a h3,
.tab a p {
    transition: transform 0.4s ease;
}

.tab a:hover h3,
.tab a:hover p {
    transform: translateY(-3rem);
}

.tab a:hover .link {
    bottom: 3rem;
}

/* Progress bar */
.progress-bar {

}

.progress-bar .status {

}

/* Buttons */
.buttons {

}

.button {

}

.button.prev {

}

.button.next {

}

/* colors */


/* cards */

.action-box {
    background: var(--color-dark-green);
    padding: 6.75rem 3.125rem;
    position: relative;
}

.action-box  .image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.action-box  .image figure {
    margin: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
    flex-flow: column;
}

.action-box .image figure.active {
    display: flex;
}

.action-box .image figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.action-box .card {
    background: #fff;
    width: 45%;
    margin-left: auto;
    position: relative;
    z-index: 2;
}

.action-box .card.slider {
    padding: 5rem  6.25rem;
    position: relative;
}

.card.slider .slide:not(.navigation) {
    display: none;
}

.card.slider .slide.active {
    display: block;
}

.action-box .card.slider h3 {
    font-size: 2rem;
    margin-bottom: 3rem;
}

/* quote */
figure.quote {
    padding: 7.75rem 12rem;
    margin: 0;
}

.quote blockquote {
    padding: 0;
    margin: 0;
}

figcaption.quote__author {
    margin-top: 3.438rem;
    display: flex;
    flex-flow: column;
    padding-left: 6rem;
    position: relative;
}

figcaption.quote__author::before {
    content: '';
    background: var(--color-bright-green);
    width: 4rem;
    left: 0;
    top: 0.65rem;
    position: absolute;
    height: 1px;
}

span.quote__role {
    color: var(--color-text-lighter);
}

.quote blockquote p {
    font-family: 'MAM-Serif';
    font-size: 2.125rem;
    font-weight: 300;
    color: var(--color-mid-green);
    line-height: 1.3;
}

.highlighted {
    color: var(--color-dark-green);
}

.cards {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 3rem;
    position: relative;
}

.cards .card {
    background: var(--color-dark-green);
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 48%;
    min-height: 25rem;
    position: relative;
}

.cards .card a {
    padding: 3.75rem 3.125rem;
    width: 100%;
    text-decoration: none;
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: self-start;
    height: 100%;
    overflow: hidden;
}

.cards .card h3 {
    color: #fff;
    text-decoration: none;
    font-size: 2.188rem;
    margin-bottom: 2.125rem;
}

.cards .card p {
    font-size: .9rem;
    color: var(--color-text-inverted);
    width: 60%;
    margin-bottom: 0;
}

.background-off-white {

    background-color: var(--color-off-white);

}

.background-before {
    position: relative;
}

.background-before > div {
    position: relative;
    z-index: 2;
}

.background-off-white.background-before::before {
    background: var(--color-off-white);
}

.background-before.background-before-up-18::before {
    top: -18rem;
}

.background-before::before {

    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

}


.breadcrumbs span {
    color: #fff;
    text-decoration: none;
}

.accent.accent-bottom.accent-green {
    position: relative;
}

.accent::before {
    content: '';
    position: absolute;
    left: 0;
    width: 4rem;
    height: 1px;
}

.accent.accent-bottom::before {

    bottom: 0;

}

.accent.accent-green::before {

    background: var(--color-bright-green);

}

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

.list-horizontal li {
    display: flex;
}

.action-box.style-theme-2 {
    padding: 0;
}

.action-box.style-theme-2 .card {
    background: var(--color-dark-green);
    width: 60%;
}

.action-box.style-theme-2 .card.slider h3 {
    color: #fff;
}

.action-box.style-theme-2 .next-prev > div {
    background-image: url(/assets/icons/icon-arrow-right-rounded.svg);
    width: 2rem;
    height: 2rem;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.action-box.style-theme-2 .next-prev > div.enabled {
    opacity: 1;
}

.action-box.style-theme-2 .next {
    transform: rotate(
            180deg);
}

.action-box.style-theme-2 .slide.navigation {
    position: absolute;
    display: flex;
    right: 5rem;
    bottom: 4.65rem;
    gap: 1rem;
}

.action-box.style-theme-2 .card.slider {
    padding: 5rem  4.25rem;
}

.action-box.style-theme-2 .image {
    --curtain-w: 0%;
    position: absolute;
    left: 0;
    top: 0;
    width: 40%;
    height: 100%;
}

.color-white { color: #fff; }
.color-white-faded { color: rgba(255,255,255,0.5); }


.carat {
    position: relative;
}

.carat::before {
    content: '';
    background: var(--color-bright-green);
    width: 4rem;
    left: 0;
    top: 0;
    position: absolute;
    height: 1px;
}

.list.list-numbered {
    list-style: decimal;
    list-style-position: inside;
}

.list.list-numbered::marker {
    color: var(--color-text-lighter);
}

.background-white { background: #fff; }

.margin-top-negative-11 { margin-top: -11rem; }

.carat-left {
    border-left: 1px solid var(--color-bright-green);
    padding-left: 2.5rem;
}

.image-column.full-size {
    padding: 0;
    margin: 0;
    flex: 1;
}

.image-column img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    inset: 0;
}

.accordion {
    display: flex;
    gap: 2rem;
    flex-flow: column;
}

.accordion-trigger {
    padding: 0;
    background: unset;
    width: 100%;
    text-align: left;
    position: relative;
    cursor: pointer;
}

.accordion-trigger::after {
    content: '';
    background: url(/assets/icons/icon-chevron-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 1.25rem;
    right: 0;
    top: 50%;
    position: absolute;
    height: 1.25rem;
    transform: translateY(-50%) rotate(
            90deg);
    transition: transform 0.35s ease;
}

.accordion-item.open .accordion-trigger::after {
    transform:translateY(-50%) rotate(
            270deg);
}

.accordion-panel {
    width: 50%;
    overflow: hidden;
}

.accordion-panel p {
    padding-top: .8rem;
    padding-bottom: 1rem;
}

.carat.carat-bottom::before {
    top: unset;
    bottom: 0;
}
.carat.carat-faded::before {
    background: var(--color-border-dark);
}

.contact-accordion {
    gap: 7rem;
    display: flex;
    flex-flow: column;
}

.contact-accordion__trigger {
    padding: 0;
    background: none;
    text-align: left;
    width: 100%;
    cursor: pointer;
}
a.contact-accordion__trigger {
    text-decoration: none;
    color: inherit;
    display: block;
}
.contact-accordion__title {
    font-family: 'MAM-Serif', serif;
    font-size: 1.375rem;
    font-weight: 400;
    margin-bottom: 1rem;
    line-height: 1.2;
    position:relative;
}


.contact-accordion__title::after {
    content: '';
    background: url(/assets/icons/icon-chevron-right.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 1.25rem;
    right: 0;
    top: 50%;
    position: absolute;
    height: 1.25rem;
    transform: translateY(-50%) rotate(
            90deg);
    transition: transform 0.35s ease;
}


.contact-accordion__item.open .contact-accordion__title::after {
    transform: translateY(-50%) rotate(270deg);
}

.contact-accordion__panel {
    overflow: hidden;
}

.contact-accordion__text {
    font-size: 1.22rem;
}

.contact-accordion__summary {
    margin-bottom: 3rem;
}

.contact-accordion__link {
    position: relative;
}
.contact-accordion__link::before {
    content: '';
    background: var(--color-border-dark);
    width: 100%;
    left: 0;
    top: 50%;
    position: absolute;
    height: 1px;
}

.contact-accordion__link .link {
    background: #fff;
    padding-right: 4rem;
}

.contact-accordion__link .link.chevron-right::after {
    right: 2rem;
}

.tabs .tab .background,
.cards .card .background {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.tabs .tab .background .image-column,
.cards .card .background .image-column {
    width: 100%;
    height: 100%;
}

.tabs .tab .background::before,
.cards .card .background::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            360deg, rgba(31, 46, 49, 1), rgba(31, 46, 49, 0.1));
    z-index: 1;
}

.tabs .tab .background::after,
.cards .card .background::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 70%;
    height: 100%;
    background: linear-gradient(
            90deg, rgba(31, 46, 49, 1), rgba(31, 46, 49, 0));
    z-index: 1;
    transition: width 0.4s ease;
}

.tabs .tab .column:hover .background::after,
.cards .card:hover .background::after {
    width: 100%;
}

section.cta { position: relative; }
section.cta .row { position: relative;
    z-index: 2; }
section.cta .image.background {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    overflow: hidden;
}

section.cta .image.background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.3);
}

section.cta .image.background::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(  90deg,  rgba(51, 79, 80, 1) 10%,  rgba(51, 79, 80, 0.95) 35%,  rgba(51, 79, 80, 0.0) 100%);
    z-index: 1;
}


.action-box.style-theme-2 .image::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            45deg, rgba(31, 46, 49, 1), rgba(31, 46, 49, 0.1));
    z-index: 1;
}
.map-embed {
    min-height: 30rem;
    padding: 2rem;
    background: var(--color-off-white);
}
.map-embed iframe {
    width: 100%;
    height: 100%;
    box-shadow: 0rem .5rem .75rem rgba(0,0,0,0.1);
}

.action-box.style-theme-2 .image::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: var(--curtain-w);
    height: 100%;
    background: var(--color-dark-green);
    z-index: 2;
}

.limiter.watermark {
    position: relative;
}

.limiter.watermark > div {
    position: relative;
}
.limiter.watermark.left::before {
    right: unset;
    left: -40rem;
    top: -20rem;
}
.limiter.watermark::before {
    content: '';
    position: absolute;
    right: -35rem;
    top: -15rem;
    width: 100%;
    background-size: contain;
    height: 40rem;
    background-image: url('/assets/images/menroc-watermark.svg');
    background-repeat: no-repeat;
    max-height: 40rem;
    background-position: center;
    opacity: 0.8;
}


.action-box.style-theme-1  .card.slider {
    padding: 3rem  5.25rem 5rem  5.25rem;
    position: relative;
}

.action-box.style-theme-1 .image figure {
    display: flex;
}

.action-box.style-theme-1 .slide-group {
    position: relative;
}

.action-box.style-theme-1 .slide.navigation.lined {
    position: relative;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    left: 0;
    top: 0;
}

.action-box.style-theme-1 .line-nav {
    width: 2.5rem;
    height: 2rem;
    position: relative;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.action-box.style-theme-1 .line-nav.active {
    opacity: 1;
}
.action-box.style-theme-1  .card.slider .slide.active {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
}
.action-box.style-theme-1  .image::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--color-dark-green);
    z-index: 1;
}
.action-box.style-theme-1  .image::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: var(--color-off-white);
    z-index: 1;
}

.action-box.style-theme-1 .next-prev > div {
    background-image: url(/assets/icons/icon-arrow-right-rounded.svg);
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter:invert(1);
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.action-box.style-theme-1 .slide.navigation {
    position: absolute;
    display: flex;
    right: 5rem;
    bottom: 5rem;
    gap: .5rem;
}
.action-box.style-theme-1 .next {
    transform: rotate(
            180deg);
}
.action-box.style-theme-1 .next-prev > div.enabled {
    opacity: 1;
}
.action-box.style-theme-1 .line-nav::before {
    content: '';
    width: 100%;
    height: 1px;
    left: 0;
    top: 50%;
    background: var(--color-bright-green);
    transform: translateY(-50%);
    position: absolute;
}