html {
scrollbar-gutter: stable;
}
html.menu-open {
overflow-x: hidden;
overflow-y: scroll;
overscroll-behavior: none;
}
body.menu-open {
overflow: hidden;
overscroll-behavior: none;
} #masthead {
position: fixed;
z-index: 1100;
inset: 0 0 auto;
}
.fig-menu-trigger-frame.site-container::after {
content: "";
position: absolute;
z-index: 2;
left: 50%;
width: 100vw;
margin-left: -50vw;
bottom: 0;
height: 2px;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--global-palette1, #304d51) 62%, transparent),
var(--global-palette1, #304d51)
);
box-shadow: 2px 0 6px color-mix(in srgb, var(--global-palette1, #304d51) 28%, transparent);
transform: scaleX(var(--fig-scroll-progress, 0));
transform-origin: left center;
transition: opacity .14s ease;
pointer-events: none;
}
.menu-open .fig-menu-trigger-frame.site-container::after {
opacity: 0;
}
.admin-bar #masthead {
top: 32px;
}
#masthead .site-header-inner-wrap.kadence-sticky-header {
background-color: rgb(255 255 255 / 32%) !important;
border-bottom: 1px solid rgb(32 37 35 / 14%);
-webkit-backdrop-filter: blur(12px) saturate(105%);
backdrop-filter: blur(12px) saturate(105%);
transition: background-color .25s ease, border-color .25s ease;
}
.fig-header-over-dark #masthead .site-header-inner-wrap.kadence-sticky-header {
background-color: var(--global-palette1, #304d51) !important;
background-color: color-mix(
in srgb,
var(--global-palette1, #304d51) 58%,
transparent
) !important;
border-bottom-color: rgb(215 208 191 / 18%);
-webkit-backdrop-filter: blur(12px) saturate(90%);
backdrop-filter: blur(12px) saturate(90%);
}
#masthead .site-branding img {
transition: filter .25s ease;
}
.fig-header-over-dark #masthead .site-branding img {
filter: brightness(0) invert(1);
}
.fig-header-over-dark .fig-menu-trigger-frame.site-container::after {
background: linear-gradient(
90deg,
color-mix(in srgb, var(--global-palette7, #d7d0bf) 62%, transparent),
var(--global-palette7, #d7d0bf)
);
box-shadow: 2px 0 6px color-mix(in srgb, var(--global-palette7, #d7d0bf) 28%, transparent);
} #masthead .site-header-upper-wrap,
#masthead .site-header-upper-inner-wrap,
#masthead .site-main-header-wrap,
#masthead .site-header-row-container-inner {
background: transparent !important;
}
#masthead .main-navigation,
#mobile-header .mobile-toggle-open-container,
#mobile-header .mobile-navigation {
display: none !important;
}
#masthead .site-branding .brand {
justify-content: center;
}
#masthead [data-section="kadence_customizer_header_button"] .header-button,
#masthead [data-section="kadence_customizer_mobile_button"] .mobile-header-button {
border: 1px solid rgb(48 77 81 / 22%);
box-shadow: 0 4px 18px rgb(32 63 66 / 6%);
transition:
color .25s ease,
background-color .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}
#masthead [data-section="kadence_customizer_header_button"] .header-button:hover,
#masthead [data-section="kadence_customizer_header_button"] .header-button:focus-visible,
#masthead [data-section="kadence_customizer_mobile_button"] .mobile-header-button:hover,
#masthead [data-section="kadence_customizer_mobile_button"] .mobile-header-button:focus-visible {
border-color: #78979a;
box-shadow: 0 0 0 4px rgb(48 77 81 / 8%);
}
.fig-menu-trigger-frame.site-container {
position: fixed;
z-index: 1201;
top: 0;
left: 50%;
display: flex;
align-items: center;
width: 100%;
height: var(--fig-header-height);
transform: translateX(-50%);
pointer-events: none;
}
.admin-bar .fig-menu-trigger-frame {
top: 32px;
}
.fig-menu-trigger {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
width: 112px;
min-width: 112px;
height: 44px;
padding: 0;
color: var(--fig-ink);
font: 600 12px "DM Sans", sans-serif;
letter-spacing: .13em;
border: 1px solid rgb(48 77 81 / 22%);
border-radius: 999px;
background: rgb(255 255 255 / 90%);
box-shadow: 0 4px 18px rgb(32 63 66 / 6%);
cursor: pointer;
pointer-events: auto;
transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease;
}
.fig-menu-trigger:hover,
.fig-menu-trigger:focus-visible {
border-color: #78979a;
box-shadow: 0 0 0 4px rgb(48 77 81 / 8%);
outline: 0;
}
.fig-menu-word {
display: grid;
grid-template-columns: 18px 16px 16px 16px;
align-items: center;
justify-items: center;
}
.fig-letter {
width: 100%;
text-align: center;
transition: transform .55s cubic-bezier(.65, -.2, .25, 1.2), opacity .3s ease, filter .3s ease;
}
.fig-menu-e {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 14px;
height: 12px;
}
.fig-menu-e i {
display: block;
flex: 0 0 2px;
width: 14px;
height: 2px;
border-radius: 1px;
background: currentColor;
transition: transform .55s cubic-bezier(.65, -.2, .25, 1.2), opacity .3s ease, background-color .25s ease;
}
.fig-drawer {
position: fixed;
z-index: 1000;
inset: 0;
width: 100%;
height: 100dvh;
color: #fff;
background: #294a50;
visibility: hidden;
pointer-events: none;
clip-path: circle(0 at var(--menu-x, 72px) var(--menu-y, 44px));
overflow: hidden;
overscroll-behavior: contain;
contain: paint;
transition: clip-path .9s cubic-bezier(.76, 0, .24, 1), visibility 0s linear .9s;
}
.fig-drawer::before {
content: "";
position: absolute;
inset: -30%;
background: repeating-radial-gradient(circle at var(--menu-x, 8%) var(--menu-y, 7%), transparent 0 42px, rgb(255 255 255 / 4%) 43px 44px);
opacity: 0;
transition: transform 1.4s ease, opacity .5s ease;
}
.fig-drawer::after {
content: "";
position: absolute;
top: -35vw;
right: -30vw;
width: 70vw;
height: 70vw;
border: 1px solid rgb(255 255 255 / 12%);
border-radius: 50%;
box-shadow: 0 0 0 8vw rgb(255 255 255 / 2%), 0 0 0 16vw rgb(255 255 255 / 2%);
}
.menu-open .fig-drawer {
visibility: visible;
pointer-events: auto;
clip-path: circle(150vmax at var(--menu-x, 72px) var(--menu-y, 44px));
transition: clip-path 1s cubic-bezier(.76, 0, .24, 1), visibility 0s;
}
.menu-open .fig-drawer::before {
opacity: 1;
transform: rotate(110deg);
}
.fig-drawer-inner {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr);
width: 100%;
max-width: 1320px;
height: 100%;
margin: auto;
padding: 110px clamp(40px, 7vw, 100px) 45px;
opacity: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
transition: opacity .18s ease;
}
.menu-open .fig-drawer-inner {
opacity: 1;
transition: opacity .32s ease .12s;
}
.fig-drawer-navigation {
display: flex;
align-items: center;
min-width: 0;
}
.fig-drawer-nav,
.fig-drawer-nav .sub-menu {
margin: 0;
padding: 0;
list-style: none;
}
.fig-drawer-nav {
display: flex;
width: 100%;
flex-direction: column;
align-items: flex-start;
justify-content: center;
counter-reset: fig-menu-item;
}
.fig-drawer-nav > li {
--item-delay: .7s;
margin: 0;
}
.fig-drawer-nav > li > a {
position: relative;
display: inline-block;
color: #fff;
font: 500 clamp(40px, 5.2vw, 74px) / 1.03 "DM Sans", sans-serif;
letter-spacing: -.055em;
text-decoration: none;
opacity: 0;
transform: translateY(45px);
transform-origin: left;
transition: transform .55s ease, opacity .4s ease, color .2s ease, padding .2s ease;
transition-delay: var(--item-delay), var(--item-delay), 0s, 0s;
}
.fig-drawer-nav > li > a::before {
counter-increment: fig-menu-item;
content: "0" counter(fig-menu-item);
position: absolute;
top: .9em;
left: -34px;
color: #a6c7c3;
font: 500 10px "DM Sans", sans-serif;
letter-spacing: .12em;
}
.fig-drawer-nav > li:nth-child(1) { --item-delay: .28s; }
.fig-drawer-nav > li:nth-child(2) { --item-delay: .34s; }
.fig-drawer-nav > li:nth-child(3) { --item-delay: .40s; }
.fig-drawer-nav > li:nth-child(4) { --item-delay: .46s; }
.fig-drawer-nav > li:nth-child(5) { --item-delay: .52s; }
.fig-drawer-nav > li:nth-child(6) { --item-delay: .58s; }
.fig-drawer-nav > li:nth-child(7) { --item-delay: .64s; }
.menu-open .fig-drawer-nav > li > a {
opacity: 1;
transform: none;
}
.fig-drawer-nav a:hover,
.fig-drawer-nav a:focus-visible {
color: #b8d5d1;
outline: 0;
}
.fig-drawer-nav > li > a:hover,
.fig-drawer-nav > li > a:focus-visible {
padding-left: 12px;
}
.fig-drawer-nav .sub-menu {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
max-height: 0;
margin-left: 2px;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: max-height .35s ease, margin .35s ease, opacity .25s ease, visibility 0s linear .35s;
}
.menu-open .fig-drawer-nav .menu-item-has-children:hover > .sub-menu,
.menu-open .fig-drawer-nav .menu-item-has-children:focus-within > .sub-menu,
.menu-open .fig-drawer-nav .current-menu-ancestor > .sub-menu {
max-height: 120px;
margin-top: 7px;
margin-bottom: 7px;
opacity: 1;
visibility: visible;
transition: max-height .35s ease, margin .35s ease, opacity .25s ease, visibility 0s;
}
.fig-drawer-nav .sub-menu a {
color: #cfdbd9;
font: 500 14px / 1.4 "DM Sans", sans-serif;
letter-spacing: .02em;
text-decoration: none;
}
.fig-drawer-side {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 32px;
padding-left: 45px;
border-left: 1px solid rgb(255 255 255 / 20%);
opacity: 0;
transform: translateX(20px);
transition: opacity .22s ease, transform .28s ease;
}
.menu-open .fig-drawer-side {
opacity: 1;
transform: none;
transition: opacity .5s ease .5s, transform .5s ease .5s;
}
.fig-drawer-side small {
display: block;
margin-bottom: 8px;
color: #b8cccd;
font: 500 10px "DM Sans", sans-serif;
letter-spacing: .1em;
text-transform: uppercase;
}
.fig-drawer-side a,
.fig-drawer-side p {
margin: 0;
color: #fff;
font: 400 14px / 1.6 "DM Sans", sans-serif;
text-decoration: none;
}
.fig-drawer-contact-links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
.fig-drawer-contact-links a {
transition: color .2s ease, opacity .2s ease;
}
.fig-drawer-contact-links .fig-drawer-linkedin {
display: inline-flex;
align-items: center;
gap: 7px;
}
.fig-drawer-linkedin svg {
width: 16px;
height: 16px;
flex: 0 0 16px;
}
.fig-drawer-contact-links a:hover {
opacity: .72;
}
.fig-drawer-side a:focus-visible {
outline: 1px solid #fff;
outline-offset: 5px;
}
.menu-open .fig-menu-trigger {
width: 112px;
min-width: 112px;
border-color: transparent;
background: transparent;
box-shadow: none;
}
.menu-open .fig-menu-trigger::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 42px;
height: 42px;
border: 1px solid rgb(255 255 255 / 40%);
border-radius: 50%;
background: var(--fig-green-dark);
transform: translate(-50%, -50%);
}
.menu-open .fig-letter {
opacity: 0;
filter: blur(4px);
transform: scale(.4);
}
.menu-open .fig-menu-e {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
transform: translate(-50%, -50%);
}
.menu-open .fig-menu-e i {
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 2px;
background: #fff;
}
.menu-open .fig-menu-e i:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu-open .fig-menu-e i:nth-child(2) { opacity: 0; }
.menu-open .fig-menu-e i:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.menu-open #masthead .site-header-inner-wrap.kadence-sticky-header {
background: transparent !important;
border-color: transparent !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
#masthead .site-branding,
#masthead [data-section*="header_button"],
#masthead [data-section*="mobile_button"] {
opacity: 1;
visibility: visible;
transition: opacity .14s ease, visibility 0s;
}
.menu-open #masthead .site-branding {
opacity: 0;
visibility: hidden;
transition: opacity .14s ease .28s, visibility 0s linear .42s;
}
.menu-open #masthead [data-section*="header_button"] {
opacity: 0;
visibility: hidden;
transition: opacity .14s ease .48s, visibility 0s linear .62s;
}
.menu-open #masthead [data-section*="mobile_button"] {
opacity: 0;
visibility: hidden;
transition: opacity .14s ease .2s, visibility 0s linear .34s;
}
@media (max-width: 782px) {
.admin-bar #masthead { top: 46px; }
.admin-bar .fig-menu-trigger-frame { top: 46px; }
}
@media (max-width: 767px) {
:root { --fig-header-height: 72px; }
#masthead .site-main-header-wrap,
#masthead .site-main-header-inner-wrap {
min-height: var(--fig-header-height);
}
#mobile-header [data-section*="mobile_button"] {
margin-right: 54px;
}
.fig-menu-trigger-frame.site-container {
justify-content: flex-end;
}
.fig-menu-trigger,
.menu-open .fig-menu-trigger {
width: 44px;
min-width: 44px;
height: 44px;
}
.fig-menu-word {
position: relative;
display: block;
width: 18px;
height: 18px;
}
.fig-menu-word > .fig-letter { display: none; }
.fig-menu-e,
.menu-open .fig-menu-e {
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
transform: translate(-50%, -50%);
}
.fig-menu-e i {
position: absolute;
left: 0;
width: 18px;
height: 2px;
}
.fig-menu-e i:first-child { top: 3px; }
.fig-menu-e i:nth-child(2) { top: 8px; }
.fig-menu-e i:last-child { top: 13px; }
.menu-open .fig-menu-e i {
top: 50%;
left: 50%;
height: 2px;
}
.menu-open .fig-menu-e i:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu-open .fig-menu-e i:nth-child(2) { opacity: 0; transform: translate(-50%, -50%); }
.menu-open .fig-menu-e i:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.fig-drawer-inner {
grid-template-columns: 1fr;
padding: 92px 25px 28px;
}
.fig-drawer-navigation {
align-items: flex-start;
padding-top: 18px;
}
.fig-drawer-nav {
justify-content: flex-start;
}
.fig-drawer-nav > li > a {
font-size: clamp(34px, 10vw, 48px);
line-height: 1.08;
}
.fig-drawer-nav > li > a::before { display: none; }
.fig-drawer-nav .sub-menu {
gap: 5px 14px;
}
.fig-drawer-side {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 25px;
padding: 20px 0 0;
border: 0;
border-top: 1px solid rgb(255 255 255 / 20%);
}
}
@media (max-width: 430px) {
.fig-drawer-side {
grid-template-columns: 1fr;
gap: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.fig-drawer,
.fig-drawer::before,
.fig-drawer-inner,
.fig-menu-e i,
.fig-letter,
.fig-drawer-nav > li > a,
.fig-drawer-nav .sub-menu,
.fig-drawer-side,
#masthead .site-branding,
#masthead [data-section*="header_button"],
#masthead [data-section*="mobile_button"] {
transition: none !important;
}
}