/* --------------------------------------------------------
* mutual-header.css
--------------------------------------------------------*/

/* @group @variables */

[class*="m-mutual-nav-body"] {
--mutual-nav-body-position: fixed;
--mutual-nav-body-top: 0;
--mutual-nav-body-left: 0;
--mutual-nav-body-grid-template-columns: var(--x-padding-left) 1fr var(--x-padding-right);
--mutual-nav-body-background-color: hsl(220deg 10% 30%);
--mutual-nav-body-color: var(--color-text);
--mutual-nav-body-pointer-events: auto;
--mutual-nav-list-grid-column: 1 / span 4;
--mutual-nav-header-grid-column: 2;
--global-nav-link-background-image: url('../img/sprite-svg.svg#icon-arrow-right');
--global-nav-link-action-background-image: url('../img/sprite-svg.svg#icon-arrow-right-secondary-action');
--global-nav-link-root-action-background-image: url('../img/sprite-svg.svg#icon-arrow-right-white');
}

@media (width < 48em) { /* 0 -> 767px */

[class*="m-mutual-nav-body"] {
--mutual-nav-body-overflow: auto;
--mutual-nav-body-bottom: 0;
--mutual-nav-body-align-content: start;
--mutual-nav-body-gap: 1.5rem 0;
--mutual-nav-body-width: 100%;
--mutual-nav-body-padding-bottom: 4.5rem;
--mutual-nav-transition: var(--transform-transition);
--mutual-nav-body-background-color: var(--color-white);
--mutual-nav-contact-grid-column: 2;
--icon-width: 2.25rem;
--icon-height: 2.25rem;

--mutual-nav-body-transform: translateY(-110vh);
--mutual-nav-body-transition: var(--transform-pointer-events-transition);
}

[id="mutual-nav-toggle"]:checked ~ [class*="o-mutual-nav"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-position: fixed;
--mutual-nav-body-transform: translateY(0);
}

}

@media (width >= 30em) { /* 480px -> * */

[class*="is-watch-nav"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-position: absolute;
}

}

@media (width >= 48em) { /* 768px -> * */

[class*="o-mutual-nav"] {
--mutual-nav-z-index: 21;
--mutual-nav-height: 3.75rem;
}

[class*="m-mutual-nav-body"] {
--mutual-nav-body-position: absolute;
--mutual-nav-body-top: 0;
--mutual-nav-body-grid-template-columns: var(--x-padding-left) 1fr var(--x-padding-right);
--mutual-nav-body-box-shadow: inset 0 .25rem 0 var(--color-secondary), 0 .25rem 1.5rem 0 hsl(220deg 20% 20% / 55%);
--mutual-nav-body-height: 3.75rem;
--mutual-nav-body-padding-top: .25rem;
--mutual-nav-body-pointer-events: none;
--mutual-nav-header-grid-column: 2;
--mutual-nav-list-grid-column: 2;
}

[class*="is-watch-nav"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-overflow: visible;
--mutual-nav-body-top: 3rem;
--mutual-nav-body-right: 0;
--mutual-nav-body-transition: var(--transform-none-transition), var(--position-none-transition);
--mutual-nav-body-transform: translateY(-15rem);
--mutual-nav-body-backdrop-filter: blur(.125rem);
}

[class*="is-fit-sticky"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-position: fixed;
}

[class*="is-watch-nav"][class*="is-scroll-down"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-transition: var(--transform-transition), var(--position-wait-transition);
}

[class*="is-watch-nav"][class*="is-scroll-up"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-transform: translateY(0);
--mutual-nav-body-transition: var(--transform-transition), var(--position-wait-transition);
}

[class*="o-site-root"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-top: 0;
--mutual-nav-body-transform: translateY(0);
}

[class*="is-fit-sticky"] [class*="o-site-root"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-position: absolute;
--mutual-nav-body-transform: translateY(0);
}

[class*="is-rootnav-out"] [class*="o-site-root"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-position: fixed;
--mutual-nav-body-top: 3rem;
}

[class*="is-rootnav-out"][class*="is-scroll-down"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-transform: translateY(-15rem);
--mutual-nav-body-transition: var(--transform-transition), var(--position-wait-transition);
}

[class*="is-rootnav-out"][class*="is-scroll-up"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-transform: translateY(0);
--mutual-nav-body-transition: var(--transform-transition), var(--position-wait-transition);
}

/*[class*="is-watch-nav"] [class*="o-site-root"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-position: fixed;
--mutual-nav-body-transform: translateY(0);
}

[class*="is-watch-nav"][class*="is-scroll-down"] [class*="o-site-root"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-transition: var(--transform-transition), var(--position-wait-transition);
}

[class*="is-watch-nav"][class*="is-scroll-up"] [class*="o-site-root"] [class*="m-mutual-nav-body"] {
--mutual-nav-body-transform: translateY(0);
--mutual-nav-body-transition: var(--transform-transition), var(--position-wait-transition);
}*/

}

/* @end @variables */

/* @group @o-mutual-nav */

[class*="o-mutual-nav"] {
position: relative;
z-index: var(--mutual-nav-z-index);
height: var(--mutual-nav-height);
pointer-events: none;
}

[class*="m-mutual-nav-body"] {
box-sizing: border-box;
position: var(--mutual-nav-body-position);
overflow: var(--mutual-nav-body-overflow);
overscroll-behavior-y: contain;
z-index: 23;
top: var(--mutual-nav-body-top);
right: 0;
bottom: var(--mutual-nav-body-bottom);
left: 0;
display: grid;
align-content: var(--mutual-nav-body-align-content);
grid-template-columns: var(--mutual-nav-body-grid-template-columns);
gap: var(--mutual-nav-body-gap);
width: var(--mutual-nav-body-width);
height: var(--mutual-nav-body-height);
padding-top: var(--mutual-nav-body-padding-top);
padding-bottom: var(--mutual-nav-body-padding-bottom);
transition: var(--mutual-nav-body-transition);
will-change: transform;
transform: var(--mutual-nav-body-transform);
}

[class*="m-mutual-nav-header"] {
grid-column: var(--mutual-nav-header-grid-column);
}

[class*="m-mutual-nav-list"] {
grid-column: var(--mutual-nav-list-grid-column);
}

[class*="m-mutual-nav-contact"] {
grid-column: var(--mutual-nav-contact-grid-column);
}

/* @end @o-mutual-nav */

/* @group @o-mutual-nav */

[class*="m-mutual-nav-body"] {
background-color: var(--mutual-nav-body-background-color);
box-shadow: var(--mutual-nav-body-box-shadow);
color: var(--mutual-nav-body-color);
will-change: transform;
transform: var(--mutual-nav-body-transform);
transition: var(--mutual-nav-body-transition);
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
backface-visibility: hidden;
backdrop-filter: var(--mutual-mutual-nav-backdrop-filter);
pointer-events: var(--mutual-nav-body-pointer-events);
}

/* @end @o-mutual-nav */

/* -------------------------------------------------------- */

/* @group @variables */

@media (width < 48em) { /* 0 -> 767px */

[class*="m-mutual-nav-header"] {
--page-header-grid-template-columns: 1fr auto;
--page-header-padding: 1.5rem 0 0;
--application-link-svg-width: 1rem;
--application-link-svg-height: 1rem;
--application-link-font-size: .625rem;
--application-link-line-height: 1.2;
}

}

/* @end @variables */

/* @group @m-mutual-nav-header */

@media (width < 48em) { /* 0 -> 767px */

[class*="m-mutual-nav-header"] {
display: grid;
align-items: center;
grid-template-columns: var(--page-header-grid-template-columns);
grid-template-rows: var(--page-header-grid-template-rows);
padding: var(--page-header-padding);
}

[class*="a-page-back-toggle"] {
grid-column: 2;
}

[class*="a-page-nav-logo"] {
grid-column: 1;
}

[class*="a-page-nav-logo"] img {
width: auto;
height: 1.875rem;
}

}

/* @end @m-mutual-nav-header */

/* -------------------------------------------------------- */

/* @group @variables */

@media (width < 48em) { /* 0 -> 767px */

[class*="a-page-back-toggle"] {
--application-link-background-color: var(--color-white);
--application-link-action-background-color: var(--color-primary);
--application-link-border-color: var(--border-color);
--application-link-action-border-color: var(--color-primary);
--application-link-color: var(--color-text);
--application-link-action-color: var(--color-white);
}

}

/* @end @variables */

/* @group @a-page-back-toggle */

@media (width < 48em) { /* 0 -> 767px */

[class*="a-page-back-toggle"] {
box-sizing: border-box;
position: relative;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
background-color: var(--application-link-background-color);
border-width: 1px;
border-style: solid;
border-color: var(--application-link-border-color);
border-radius: .25rem;
color: var(--application-link-color);
transition: var(--link-premier-transition);
cursor: pointer;
}

[class*="a-page-back-toggle"]:focus {
background-color: var(--application-link-action-background-color);
border-color: var(--application-link-action-border-color);
color: var(--application-link-action-color);
}

[class*="a-page-back-toggle"] svg {
width: auto;
height: 1.125rem;
fill: currentColor;
}

}

@media (width < 48em) and (hover: hover) {

[class*="a-page-back-toggle"]:hover {
background-color: var(--application-link-action-background-color);
border-color: var(--application-link-action-border-color);
color: var(--application-link-action-color);
}

}

/* @end @a-page-back-toggle */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="m-mutual-nav-list"] {
--mutual-nav-list-grid-template-columns: repeat(1, 1fr);
--mutual-nav-detail-height: 3rem;
--link-transition: var(--link-primary-transition);
--icon-margin: auto;
--icon-fill: currentColor;
--color: var(--color-white);
--mutual-nav-link-action-background-color: var(--color-secondary-action);
--mutual-nav-link-active-background-color: var(--color-secondary-active);
--mutual-nav-link-color: var(--color-text);
--mutual-nav-link-cursor: pointer;
}

[class*="a-nav-dropdown"] {
--mutual-nav-link-cursor: default;
}

@media (width < 48em) { /* 0 -> 767px */

[class*="m-mutual-nav-list"] {
--mutual-nav-list-gap: 2px;
--mutual-nav-list-box-shadow: 0 1px 0 var(--border-color);
--color: var(--color-white);
--mutual-nav-detail-background-color: hsl(0deg 0% 100% / 75%);
--mutual-nav-detail-border-right-color: hsl(0deg 0% 0%);
--mutual-nav-link-height: 3rem;
--mutual-nav-link-padding: .1875rem 1.875rem .1875rem 1.125rem;
--mutual-nav-link-box-shadow: 0 -1px 0 var(--border-color);
--icon-width: 1.5rem;
--icon-height: 1.5rem;
}

[class*="a-nav-link-current"],
[class*="a-nav-dropdown-current"] {
--link-background-color: hsl(220deg 5% 40%);
--mutual-nav-link-action-background-color: hsl(220deg 5% 40%);
--mutual-nav-link-active-background-color: hsl(220deg 5% 40%);
--mutual-nav-link-color: var(--color-white);
--mutual-nav-link-action-color: var(--color-white);
--mutual-nav-link-active-color: var(--color-white);
}

[class*="a-nav-dropdown"] {
--link-pointer-event: none;
}

}

@media (width >= 48em) { /* 768px -> * */

[class*="m-mutual-nav-list"] {
--mutual-nav-list-grid-template-columns: 2px repeat(7, 1fr);
--mutual-nav-list-gap: 1px;
--mutual-nav-list-height: calc(var(--mutual-nav-body-height) - var(--mutual-nav-body-padding-top));
--mutual-nav-body-height: 3.75rem;
--mutual-nav-body-padding-top: .25rem;
--mutual-nav-detail-grid-template-columns: 1fr 2px;
--mutual-nav-detail-height: 2.25rem;
--mutual-nav-detail-background-color: hsl(220deg 20% 87.50% / 50%);
--mutual-nav-link-action-background-color: var(--color-text-action);
--mutual-nav-link-active-background-color: var(--color-text-active);
--mutual-nav-link-height: inherit;
--mutual-nav-link-padding: .1875rem .375rem;
--mutual-nav-link-text-align: center;
--mutual-nav-link-color: var(--color-gainsboro);
--mutual-nav-link-color: var(--color-white);
--mutual-nav-link-action-color: var(--color-white);
--mutual-nav-link-active-color: var(--color-white);
--font-size: .875rem;
--line-height: 1.71428571;
}

[class*="a-nav-link-current"],
[class*="a-nav-dropdown-current"] {
--link-background-color: hsl(220deg 5% 20%);
--mutual-nav-link-action-background-color: hsl(220deg 5% 20%);
--mutual-nav-link-active-background-color: hsl(220deg 5% 20%);
}

[class*="m-mutual-nav-list"]>li:hover [class*="a-nav-dropdown"] {
--mutual-nav-link-color: var(--color-white);
}

}

/* @end @variables */

/* @group @m-mutual-nav-list */

[class*="m-mutual-nav-list"] {
z-index: 2;
display: grid;
grid-template-columns: var(--mutual-nav-list-grid-template-columns);
gap: var(--mutual-nav-list-gap);
height: var(--mutual-nav-list-height);
align-content: var(--mutual-nav-list-align-content);
box-shadow: var(--mutual-nav-list-box-shadow);
pointer-events: auto;
}

@media (width >= 48em) { /* 768px -> * */

[class*="m-mutual-nav-list"]:before {
content: '';
position: relative;
z-index: 2;
align-self: center;
display: block;
width: 1px;
height: var(--mutual-nav-detail-height);
background-color: var(--mutual-nav-detail-background-color);
border-right: 1px solid var(--mutual-nav-detail-border-right-color);
}

[class*="m-mutual-nav-list"]:after {
content: '';
position: relative;
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
width: 100%;
height: 100%;
}

:where([class*="m-mutual-nav-list"]>li):after {
content: '';
align-self: center;
display: block;
width: 1px;
height: var(--mutual-nav-detail-height);
background-color: var(--mutual-nav-detail-background-color);
border-right: 1px solid var(--mutual-nav-detail-border-right-color);
}

}

[class*="m-mutual-nav-list"]>li {
display: grid;
grid-template-columns: var(--mutual-nav-detail-grid-template-columns);
gap: 2px;
height: inherit;
}

[class*="a-nav-link"],
[class*="a-nav-dropdown"] {
box-sizing: border-box;
display: grid;
align-items: center;
height: var(--mutual-nav-link-height);
gap: .1875rem;
padding: var(--mutual-nav-link-padding);
background-color: var(--link-background-color);
box-shadow: var(--mutual-nav-link-box-shadow);
text-align: var(--mutual-nav-link-text-align);

color: var(--mutual-nav-link-color);
font-size: var(--mutual-nav-link-font-size);
line-height: var(--mutual-nav-link-line-height);
text-decoration: var(--mutual-nav-link-text-decoration);
text-decoration-skip-ink: auto;
text-underline-position: under;
cursor: var(--mutual-nav-link-cursor);
pointer-events: var(--link-pointer-events);
transition: var(--link-secondary-transition);
}

[class*="a-nav-link"]:focus {
background-color: var(--mutual-nav-link-action-background-color);
color: var(--mutual-nav-link-action-color);
text-decoration: var(--link-action-text-decoration);
}

@media (hover: hover) {

[class*="a-nav-link"]:hover {
background-color: var(--mutual-nav-link-action-background-color);
color: var(--mutual-nav-link-action-color);
text-decoration: var(--link-action-text-decoration);
}

}

@media (width < 48em) { /* 0 -> 767px */

[class*="a-nav-link"] {
background-image: var(--global-nav-link-background-image);
background-position: calc(100% - .75rem) 1.25rem;
background-repeat: no-repeat;
background-size: .625rem .625rem;
}

@media (hover: hover) {

[class*="a-nav-link"]:hover {
background-image: var(--global-nav-link-root-action-background-image);
}

}

[class*="a-nav-link"]:focus {
background-image: var(--global-nav-link-root-action-background-image);
}

}

}

@media (width >= 48em) and (hover: hover) { /* 768px -> * */

[class*="a-nav-dropdown"]:hover {
background-color: var(--mutual-nav-link-action-background-color);
color: var(--mutual-nav-link-action-color);
text-decoration: var(--link-action-text-decoration);
}

}

@media (width >= 48em) and (hover: none) { /* 768px -> * */

[class*="a-nav-dropdown"]:focus,
input:checked ~ [class*="a-nav-dropdown"] {
background-color: var(--mutual-nav-link-action-background-color);
color: var(--mutual-nav-link-action-color);
text-decoration: var(--link-action-text-decoration);
}

}

[class*="a-nav-link"]:active,
[class*="a-nav-dropdown"]:active { 
background-color: var(--lmutual-nav-ink-active-background-color);
color: var(--mutual-nav-link-active-color);
text-decoration: var(--link-active-text-decoration);
}

/* @end @m-mutual-nav-list */

/* -------------------------------------------------------- */

/* @group @variables */

[class*="a-global-sub-nav-list"] {
--global-sub-nav-list-gap: .75rem;
--global-sub-nav-description-list-gap: .375rem .75rem;
--global-sub-navlist-flex-direction: column;
--global-sub-nav-list-padding: 1.125rem;
--global-sub-nav-list-transition: max-height var(--transition-time) 0s var(--transition-cubic-bezier), padding var(--transition-time) 0s var(--transition-cubic-bezier), background-color var(--transition-time) 0s var(--transition-cubic-bezier);
--link-transition: background .25s 0s cubic-bezier(.6, .5, .5, .75), color .25s 0s var(--transition-cubic-bezier);
--transition-time: .2s;
--link-background-image: linear-gradient(transparent 80%, var(--link-border-color) 0%), linear-gradient(transparent 80%, var(--link-action-color) 0%);
--link-color: var(--color-text);
--link-action-color: var(--color-secondary-action);
--link-active-color: var(--color-secondary-active);
--link-background-image: linear-gradient(transparent 80%, var(--link-border-color) 0%), linear-gradient(transparent 80%, var(--link-action-color) 0%);
}

[class*="a-global-sub-nav-list"] p,
[class*="a-global-sub-nav-list"] dt {
--font-weight: var(--font-weight-bold);
--font-variation-settings: var(--font-variation-settings-bold);
}

@media (width < 48em) { /* 0 -> 767px */

[class*="a-global-sub-nav-list"] {
--global-sub-nav-list-background-color: var(--background-color);
}

}

@media (width >= 48em) { /* 768px -> * */

[class*="a-global-sub-nav-list"] {
--global-sub-nav-list-grid-template-columns: repeat(auto-fill, 10.5rem);
--global-sub-nav-list-gap: .375rem 1.125rem;
--global-sub-nav-description-list-gap: .375rem 1.125rem;
--global-sub-nav-list-padding: 0 var(--x-padding-right) 0 var(--x-padding-left);
--global-sub-navlist-flex-direction: row;
}

@media (hover: hover) {

[class*="m-mutual-nav-list"]>li:hover [class*="a-global-sub-nav-list"] {
--global-sub-nav-list-padding: 1.5rem var(--x-padding-right) 1.5rem var(--x-padding-left);
--global-sub-nav-list-box-shadow: 0 1px 0 0 var(--color-very-light-gray), 0 1px .25rem 0 var(--color-very-light-gray);
}

}

@media (hover: none) {

input:checked ~ [class*="a-global-sub-nav-list"] {
--global-sub-nav-list-padding: 1.5rem var(--x-padding-right) 1.5rem var(--x-padding-left);
--global-sub-nav-list-box-shadow: 0 1px 0 0 var(--color-very-light-gray), 0 1px .25rem 0 var(--color-very-light-gray);
}

}

}

/* @end @variables */

/* @group @a-global-sub-nav-list */

[class*="a-global-sub-nav-list"] {
box-sizing: border-box;
overflow: hidden;
display: grid;
grid-auto-flow: row;
gap: 1.125rem;
padding: var(--global-sub-nav-list-padding);
background-color: var(--global-sub-nav-list-background-color);
transition: var(--global-sub-nav-list-transition);
}

[class*="a-global-sub-nav-list"] span {
box-sizing: border-box;
position: relative;
/*top: -.125rem;*/
display: inline-grid;
place-items: center;
height: 1rem;
margin-left: .375rem;
padding-inline: .375rem;
background-color: var(--color-primary);
border-radius: .25rem;
font-size: .75rem;
line-height: 1.25;
color: var(--color-white);
}

@media (width >= 48em) { /* 768px -> * */

[class*="a-global-sub-nav-list"] {
position: absolute;
overflow: clip ;
top: 100%;
left: 0;
right: 0;
max-height: 0;
display: grid;
grid-auto-flow: row;
gap: 1.5rem;
background-color: var(--color-white);
box-shadow: var(--global-sub-nav-list-box-shadow);
transition: var(--global-sub-nav-list-transition);
}

}

@media (width >= 48em) and (hover: hover) {

[class*="m-mutual-nav-list"]>li:hover [class*="a-global-sub-nav-list"] {
max-height: 50rem;
}

}

@media (width >= 48em) and (hover: none) {

input:checked ~ [class*="a-global-sub-nav-list"] {
max-height: 50rem;
}

}
 
[class*="a-global-sub-nav-list"] ul {
/*display: grid;
grid-template-columns: var(--global-sub-nav-list-grid-template-columns);*/
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--global-sub-nav-list-gap);

}

[class*="a-global-sub-nav-list"] dl {
display: flex;
flex-direction: var(--global-sub-navlist-flex-direction);
flex-wrap: wrap;
gap: var(--global-sub-nav-description-list-gap);
}

[class*="a-global-sub-nav-list"] dt {
width: 100%;
margin-bottom: .375rem;
padding-bottom: calc(.375rem - 1px);
border-bottom: 1px solid var(--border-color);
}

:where([class*="a-global-sub-nav-list"]) li,
:where([class*="a-global-sub-nav-list"]) dd {
position: relative;
display: inline-flex;
padding-left: .9375rem;
background-image: var(--global-nav-link-background-image);
background-position: 0 .5625rem;
background-repeat: no-repeat;
background-size: .625rem .625rem;
transition: var(--background-image-transition);
}

@media (hover: hover) {

[class*="a-global-sub-nav-list"] li:has(a:hover):hover,
[class*="a-global-sub-nav-list"] dd:has(a:hover):hover {
background-image: var(--global-nav-link-action-background-image);
}

}

[class*="a-global-sub-nav-list"] li:has(a:focus):focus,
[class*="a-global-sub-nav-list"] dd:has(a:focus):focus {
background-image: var(--global-nav-link-action-background-image);
}

/* @end @a-global-sub-nav-list */