@charset "UTF-8";

   :root {
--grid-size-xl: 144rem;
--grid-size-lg: 124rem;
--grid-size-md: 102.4rem;
--grid-size-smd: 89.9rem;
--grid-size-sm: 76.7rem;
--grid-size-xs: 49.9rem;
--grid-padding: 2rem;
--border-radius: 1.2rem;
--border-radius-sm: .8rem;
--color-black: #14161a;
--color-grey: #6b7076;
--color-white: #ffffff;
--color-offwhite: #f7f6f3;
--color-lightblue: #f3fbff;
--color-lightpurple: #eaf0ff;
--color-green: #dbf734;
--color-verydarkgreen: #062026;
--color-line: #dbe6e2;
--shadow-card: 0 1rem 2.4rem rgba(10, 31, 64, .05);
--shadow-glass: 0 .8rem 2.4rem -.6rem rgba(0, 0, 0, .18);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
img,
svg,
video {
max-width: 100%;
height: auto;
}
body {
overflow-x: hidden;
font-family: 'Inter Tight', Arial, sans-serif;
font-size: 1.65rem;
font-weight: 400;
line-height: 1.6;
color: var(--color-black);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
button,
input,
select,
textarea {
font: inherit;
-webkit-font-smoothing: inherit;
-moz-osx-font-smoothing: inherit;
} h1, .faux-h1,
h2, .faux-h2,
h3, .faux-h3,
h4, .faux-h4 {
display: block;
margin: 0 0 2rem;
font-family: 'Inter Tight', Arial, sans-serif;
font-weight: 500;
color: var(--color-black);
}
h1:last-child, .faux-h1:last-child,
h2:last-child, .faux-h2:last-child,
h3:last-child, .faux-h3:last-child,
h4:last-child, .faux-h4:last-child {
margin-bottom: 0;
}
h1, .faux-h1 {
margin-bottom: 2.5rem;
font-size: 5.4rem;
line-height: 1.1;
}
h2, .faux-h2 {
font-size: 3.6rem;
line-height: 1.2;
}
h2.large, .faux-h2.large {
font-size: 5.2rem;
line-height: 1.1;
}
h2.small, .faux-h2.small {
font-size: 3rem;
line-height: 1.2;
}
h3, .faux-h3 {
font-size: 2.4rem;
line-height: 1.3;
}
h4, .faux-h4, h3.small, .faux-h3.small {
font-size: 2rem;
line-height: 1.3;
} p {
margin: 0 0 2.5rem;
} p.large {
font-size: 2rem;
line-height: 1.5;
color: var(--color-black);
}
p:empty {
display: none;
}
p:last-child {
margin: 0;
}
a {
color: inherit;
text-decoration: underline;
transition: .3s;
}
strong {
font-weight: 600;
}
blockquote {
margin: 0;
}
.grey {
color: var(--color-grey);
} .video-embed {
position: relative;
margin: 4rem 0;
aspect-ratio: 16 / 9;
border-radius: var(--border-radius);
overflow: hidden;
background-color: var(--color-verydarkgreen);
}
.video-embed iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
} .audio-embed {
margin: 4rem 0;
}
.audio-embed iframe {
display: block;
width: 100%;
height: 15.2rem;
border: 0;
border-radius: var(--border-radius);
} ul,
ol {
margin: 0 0 2rem;
padding-left: 2rem;
}
ul.checklist {
display: grid;
gap: .5rem;
margin: 2rem 0;
padding: 0;
list-style: none;
}
ul.checklist:last-child {
margin-bottom: 0;
}
ul.checklist li {
position: relative;
padding-left: 2rem;
line-height: 1.5;
}
ul.checklist li::before {
content: '\f00c';
position: absolute;
left: 0;
top: .4rem;
font-family: 'Font Awesome 6 Pro';
font-weight: 400;
font-size: 1.3rem;
color: var(--color-verydarkgreen);
} ul.crosslist {
display: grid;
gap: .5rem;
margin: 2rem 0;
padding: 0;
list-style: none;
}
ul.crosslist li {
position: relative;
padding-left: 2rem;
line-height: 1.5;
}
ul.crosslist li::before {
content: '\f00d';
position: absolute;
left: 0;
top: .4rem;
font-family: 'Font Awesome 6 Pro';
font-weight: 400;
font-size: 1.3rem;
color: var(--color-grey);
} p + ul.checklist,
p + ul.crosslist {
margin-top: -1.5rem;
}
.bgcolor-verydarkgreen ul.checklist li::before {
color: var(--color-green);
} section {
position: relative;
padding: 0 var(--grid-padding);
}
.row-xl,
.row-lg,
.row-md,
.row-smd,
.row-sm,
.row-xs {
width: 100%;
margin: 0 auto;
}
.row-xl {
max-width: var(--grid-size-xl);
}
.row-lg {
max-width: var(--grid-size-lg);
}
.row-md {
max-width: var(--grid-size-md);
}
.row-smd {
max-width: var(--grid-size-smd);
}
.row-sm {
max-width: var(--grid-size-sm);
}
.row-xs {
max-width: var(--grid-size-xs);
}
.pt-lg {
padding-top: 13rem;
}
.pt-md {
padding-top: 10rem;
}
.pt-sm {
padding-top: 5rem;
}
.pt-none {
padding-top: 0;
}
.pb-lg {
padding-bottom: 13rem;
}
.pb-md {
padding-bottom: 10rem;
}
.pb-sm {
padding-bottom: 5rem;
}
.pb-none {
padding-bottom: 0;
}
.mt-lg { margin-top: 13rem; }
.mt-md { margin-top: 10rem; }
.mt-sm { margin-top: 5rem; }
.mt-none { margin-top: 0; }
.mb-lg { margin-bottom: 13rem; }
.mb-md { margin-bottom: 10rem; }
.mb-sm { margin-bottom: 5rem; }
.mb-none { margin-bottom: 0; } .btn,
.menu-btn a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1.2rem 2.4rem;
cursor: pointer;
border: 1px solid var(--color-green);
border-radius: var(--border-radius-sm);
background-color: var(--color-green);
font-size: 1.4rem;
font-weight: 500;
line-height: 1.5;
color: var(--color-verydarkgreen);
text-decoration: none;
white-space: nowrap;
transition: .3s;
}
.btn:hover,
.menu-btn a:hover {
border-color: color-mix(in srgb, var(--color-green) 90%, black);
background-color: color-mix(in srgb, var(--color-green) 90%, black);
}
.btn.white {
border-color: var(--color-line);
background-color: var(--color-white);
color: var(--color-black);
}
.btn.white::after {
content: '\f061';
font-family: 'Font Awesome 6 Pro';
font-weight: 400;
}
.btn.white:hover {
border-color: color-mix(in srgb, var(--color-white) 90%, black);
background-color: color-mix(in srgb, var(--color-white) 90%, black);
} .btn.outline {
border-color: var(--color-black);
background-color: transparent;
color: var(--color-black);
}
.btn.outline:hover {
background-color: var(--color-black);
color: var(--color-white);
}
.btn.dark {
border-color: var(--color-verydarkgreen);
background-color: var(--color-verydarkgreen);
color: var(--color-white);
}
.btn.dark:hover {
border-color: var(--color-green);
background-color: var(--color-green);
color: var(--color-verydarkgreen);
}
.bgcolor-verydarkgreen .btn.outline {
border-color: var(--color-white);
color: var(--color-white);
}
.bgcolor-verydarkgreen .btn.outline:hover {
background-color: var(--color-white);
color: var(--color-black);
}
.btn-group {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
* + .btn-group {
margin-top: 2.5rem;
} .bgcolor-white {
background-color: var(--color-white);
}
.bgcolor-offwhite {
background-color: var(--color-offwhite);
}
.bgcolor-lightblue {
background-color: var(--color-lightblue);
}
.bgcolor-green {
background-color: var(--color-green);
color: var(--color-verydarkgreen);
}
.bgcolor-green h1,
.bgcolor-green h2,
.bgcolor-green h3,
.bgcolor-green h4 {
color: var(--color-verydarkgreen);
}
.bgcolor-verydarkgreen {
background-color: var(--color-verydarkgreen);
color: var(--color-lightblue);
}
.bgcolor-verydarkgreen h1, .bgcolor-verydarkgreen .faux-h1,
.bgcolor-verydarkgreen h2, .bgcolor-verydarkgreen .faux-h2,
.bgcolor-verydarkgreen h3, .bgcolor-verydarkgreen .faux-h3,
.bgcolor-verydarkgreen h4, .bgcolor-verydarkgreen .faux-h4 {
color: var(--color-lightblue);
} .label {
display: inline-flex;
align-items: center;
margin-bottom: 2.5rem;
padding: .8rem 1.6rem;
border: 1px solid var(--color-verydarkgreen);
border-radius: 999px;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.5;
color: var(--color-verydarkgreen);
text-transform: uppercase;
letter-spacing: .1rem;
}
.bgcolor-offwhite .label {
border-color: var(--color-white);
background-color: var(--color-white);
}
.bgcolor-lightblue .label {
border-color: var(--color-lightpurple);
background-color: var(--color-lightpurple);
}
.bgcolor-verydarkgreen .label {
padding: 0;
border: 0;
color: var(--color-green);
}
.hero.bgcolor-verydarkgreen .label,
.hero-featured .label {
padding: .8rem 1.6rem;
border: 1px solid var(--color-green);
background-color: var(--color-green);
color: var(--color-verydarkgreen);
}
.label.label-sm {
padding: .6rem 1.2rem;
font-size: 1.1rem;
}
.label.label-glass {
padding: .8rem 1.6rem;
border: 1px solid rgba(255, 255, 255, .28);
background-color: rgba(255, 255, 255, .18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
color: var(--color-white);
} .story-video {
position: absolute;
right: 2.4rem;
bottom: 2.4rem;
display: inline-flex;
align-items: center;
gap: 1rem;
margin-bottom: 0;
font-family: inherit;
cursor: pointer;
transition: .3s;
}
.story-video:hover {
border-color: rgba(255, 255, 255, .5);
background-color: rgba(255, 255, 255, .3);
}
.image-wrapper {
position: relative;
}
.glass-tag {
position: absolute;
display: inline-flex;
align-items: center;
gap: 1.2rem;
padding: 1rem 1.5rem 1rem 1rem;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: var(--border-radius);
background-color: rgba(255, 255, 255, .18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: var(--shadow-glass);
font-size: 1.6rem;
color: var(--color-white);
font-weight: 500;
white-space: nowrap;
animation: glass-float 4s ease-in-out infinite;
}
.glass-tag.no-icon {
padding: 1rem 1.5rem;
}
.glass-tag-icon {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border-radius: 1rem;
background-color: var(--color-green);
color: var(--color-verydarkgreen);
font-size: 1.6rem;
}
@keyframes glass-float {
0%, 100% { translate: 0 0; }
50% { translate: 0 -.6rem; }
} .image-wrapper .lottie.is-full {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 2.5rem;
border-radius: var(--border-radius);
overflow: hidden;
} .image-wrapper .lottie.is-tag {
position: absolute;
height: 8rem;
max-width: calc(100% - 4.8rem);
} .pos-center { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pos-top-left { left: 2.4rem; top: 2.4rem; }
.pos-top-right { right: 2.4rem; top: 2.4rem; }
.pos-bottom-left { left: 2.4rem; bottom: 2.4rem; }
.pos-bottom-right { right: 2.4rem; bottom: 2.4rem; }
.pos-center.glass-tag {
animation-name: glass-float-centered;
}
@keyframes glass-float-centered {
0%, 100% { transform: translate(-50%, -50%); }
50% { transform: translate(-50%, calc(-50% - .6rem)); }
}
.link-arrow {
display: inline-flex;
font-size: 1.5rem;
line-height: 1.6;
align-items: center;
gap: 1rem;
text-decoration: none;
}
.link-arrow:hover {
gap: 1rem;
} .site-header {
position: sticky;
top: 0;
z-index: 800;
padding: 2rem var(--grid-padding);
background-color: var(--color-white);
border-bottom: 1px solid var(--color-line);
transition: padding .3s ease;
} .site-header.scrolled {
padding-top: 1rem;
padding-bottom: 1rem;
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.site-logo {
display: inline-block;
line-height: 0;
text-decoration: none;
}
.site-logo img {
display: block;
width: auto;
height: 2.2rem;
}
.site-nav {
display: flex;
align-items: center;
gap: 4rem;
}
.site-nav-links {
display: flex;
align-items: center;
gap: 3rem;
list-style: none;
margin: 0;
padding: 0;
}
.site-nav-links a {
font-size: 1.5rem;
line-height: 1.6;
font-weight: 500;
color: var(--color-black);
text-decoration: none;
}
.site-nav-links a:hover {
color: var(--color-grey);
} .site-nav-links .current-menu-item > a,
.site-nav-links .current-menu-ancestor > a {
text-decoration: underline;
text-underline-offset: .4rem;
text-decoration-thickness: 1px;
}
.site-nav-links .menu-btn a {
text-decoration: none;
}
.site-nav-links .menu-btn {
margin-left: 1rem;
}
.site-nav-links .menu-btn a,
.site-nav-links .menu-btn a:hover {
font-size: 1.4rem;
line-height: 1.5;
color: var(--color-verydarkgreen);
}
.hamburger {
position: fixed;
right: var(--grid-padding);
top: 1rem;
z-index: 900;
display: none;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
padding: 0;
border: 0;
border-radius: 50%;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
font-size: 2rem;
color: var(--color-black);
cursor: pointer;
transition: top .3s;
}
.site-header.scrolled .hamburger {
top: 2rem;
} .mobile-menu {
position: fixed;
inset: 0;
z-index: 850;
display: flex;
flex-direction: column;
padding: 0 var(--grid-padding) 3rem;
overflow-x: hidden;
overflow-y: auto;
opacity: 0;
visibility: hidden;
transition: opacity .35s ease, visibility .35s;
}
.mobile-menu.is-open {
opacity: 1;
visibility: visible;
} .mobile-menu-top {
display: flex;
flex-shrink: 0;
align-items: center;
min-height: calc(6rem + 1px);
margin: 0 calc(-1 * var(--grid-padding));
padding: 0 var(--grid-padding);
}
.mobile-menu-nav {
position: relative;
z-index: 1;
margin-top: 4rem;
}
.mobile-menu-links {
margin: 0;
padding: 0;
list-style: none;
}
.mobile-menu-links li {
border-bottom: 1px solid rgba(255, 255, 255, .1);
opacity: 0;
transform: translateY(1rem);
transition: opacity .4s ease, transform .4s ease;
}
.mobile-menu.is-open .mobile-menu-links li {
opacity: 1;
transform: none;
}
.mobile-menu.is-open .mobile-menu-links li:nth-child(1) { transition-delay: .05s; }
.mobile-menu.is-open .mobile-menu-links li:nth-child(2) { transition-delay: .1s; }
.mobile-menu.is-open .mobile-menu-links li:nth-child(3) { transition-delay: .15s; }
.mobile-menu.is-open .mobile-menu-links li:nth-child(4) { transition-delay: .2s; }
.mobile-menu.is-open .mobile-menu-links li:nth-child(5) { transition-delay: .25s; }
.mobile-menu.is-open .mobile-menu-links li:nth-child(6) { transition-delay: .3s; }
.mobile-menu.is-open .mobile-menu-links li:nth-child(7) { transition-delay: .35s; }
.mobile-menu.is-open .mobile-menu-links li:nth-child(8) { transition-delay: .4s; }
.mobile-menu.is-open .mobile-menu-links li:nth-child(9) { transition-delay: .45s; }
.mobile-menu-links a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding: 1.4rem 0;
font-size: 2.6rem;
font-weight: 500;
line-height: 1.3;
color: var(--color-lightblue);
text-decoration: none;
transition: color .3s;
} .mobile-menu-links a::after {
content: '\f061';
flex-shrink: 0;
width: 4rem;
text-align: center;
font-family: 'Font Awesome 6 Pro';
font-weight: 400;
font-size: 1.6rem;
color: var(--color-green);
opacity: 0;
transform: translateX(-.8rem);
transition: opacity .3s, transform .3s;
}
.mobile-menu-links a:hover::after,
.mobile-menu-links .current-menu-item > a::after,
.mobile-menu-links .current-menu-ancestor > a::after {
opacity: 1;
transform: none;
}
.mobile-menu-links .current-menu-item > a,
.mobile-menu-links .current-menu-ancestor > a {
color: var(--color-green);
} .mobile-menu-links .menu-btn {
margin-top: 3rem;
border-bottom: 0;
}
.mobile-menu-links .menu-btn a {
justify-content: center;
padding: 1.4rem 2.4rem;
border-radius: var(--border-radius-sm);
background-color: var(--color-green);
font-size: 1.5rem;
color: var(--color-verydarkgreen);
}
.mobile-menu-links .menu-btn a::after {
display: none;
} .site-header :focus:not(:focus-visible),
.mobile-menu :focus:not(:focus-visible),
.hamburger:focus:not(:focus-visible) {
outline: none;
} body.menu-open {
overflow: hidden;
}
@media (min-width: 1281px) {
.mobile-menu {
display: none;
}
} .site-footer {
padding: 0 var(--grid-padding);
background-color: var(--color-verydarkgreen);
color: var(--color-lightblue);
}
.footer-top {
display: flex;
justify-content: space-between;
gap: 6rem;
}
.footer-brand {
max-width: 21.4rem;
}
.footer-brand .site-logo img {
height: 1.7rem;
}
.footer-brand p {
margin-top: 2rem;
font-size: 1.5rem;
line-height: 1.6;
}
.footer-cols {
display: flex;
gap: 7rem;
}
.footer-col h4 {
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: 600;
line-height: 1.6;
color: inherit;
}
.footer-col ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.footer-col a {
font-size: 1.5rem;
line-height: 1.6;
text-decoration: none;
}
.footer-col a:hover {
color: var(--color-green);
}
.footer-bottom {
font-size: 1.5rem;
line-height: 1.6;
display: flex;
justify-content: space-between;
gap: 2rem;
padding: 3rem 0;
border-top: 1px solid color-mix(in srgb, var(--color-lightblue) 20%, transparent);
color: var(--color-green);
}
.footer-bottom p {
margin: 0;
}
.footer-bottom a {
text-decoration: none;
} .footer-legal {
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
.footer-legal li + li::before {
content: '\00b7';
margin: 0 .5em;
}  @media (max-width: 1280px) {
.site-header {
position: static;
padding-top: 1rem;
padding-bottom: 1rem;
}
.header-inner {
min-height: 4rem;
}
.site-nav-links {
display: none;
}
.hamburger {
display: flex;
}
}
@media (max-width: 1220px) {
h1, .faux-h1 {
font-size: 4.4rem;
}
h2.large, .faux-h2.large {
font-size: 4.2rem;
}
}
@media (max-width: 1024px) {
.story-video {
right: 2rem;
bottom: 2rem;
}
.pos-top-left { left: 2rem; top: 2rem; }
.pos-top-right { right: 2rem; top: 2rem; }
.pos-bottom-left { left: 2rem; bottom: 2rem; }
.pos-bottom-right { right: 2rem; bottom: 2rem; }
.image-wrapper .lottie.is-tag {
max-width: calc(100% - 4rem);
}
.footer-brand {
max-width: none;
}
.pt-lg { padding-top: 9rem; }
.pt-md { padding-top: 7rem; }
.pt-sm { padding-top: 3rem; }
.pb-lg { padding-bottom: 9rem; }
.pb-md { padding-bottom: 7rem; }
.pb-sm { padding-bottom: 3rem; }
.mt-lg { margin-top: 9rem; }
.mt-md { margin-top: 7rem; }
.mt-sm { margin-top: 3rem; }
.mb-lg { margin-bottom: 9rem; }
.mb-md { margin-bottom: 7rem; }
.mb-sm { margin-bottom: 3rem; }
h1, .faux-h1 {
font-size: 4rem;
}
h2.large, .faux-h2.large {
font-size: 3.8rem;
}
h2, .faux-h2 {
font-size: 3rem;
}
.footer-top {
flex-direction: column;
gap: 4rem;
}
.footer-cols {
flex-wrap: wrap;
gap: 3rem 6rem;
}
}
@media (max-width: 767px) {
p.large {
font-size: 1.8rem;
}
.footer-col h4 {
margin-bottom: .5rem;
}
.footer-col ul {
gap: .5rem;
}
.pt-lg { padding-top: 8rem; }
.pb-lg { padding-bottom: 8rem; }
.mt-lg { margin-top: 8rem; }
.mb-lg { margin-bottom: 8rem; }
.pt-md { padding-top: 6rem; }
.pb-md { padding-bottom: 6rem; }
.mt-md { margin-top: 6rem; }
.mb-md { margin-bottom: 6rem; }
.image-wrapper .lottie.is-full {
padding: 2rem;
} .glass-tag {
gap: 1rem;
padding: .8rem 1.2rem .8rem .8rem;
font-size: 1.4rem;
}
.glass-tag.no-icon {
padding: .8rem 1.2rem;
}
.glass-tag-icon {
width: 3.2rem;
height: 3.2rem;
border-radius: .8rem;
font-size: 1.4rem;
} .label {
margin-bottom: 1.5rem;
padding: .6rem 1.2rem;
font-size: 1.1rem;
}
.btn-group {
flex-direction: column;
gap: 1rem;
}
.btn-group .btn {
width: 100%;
}
h1, .faux-h1 {
font-size: 3.4rem;
}
h2.large, .faux-h2.large {
font-size: 3.2rem;
}
h2, .faux-h2 {
font-size: 2.6rem;
}
h2.small, .faux-h2.small {
font-size: 2.4rem;
}
h3, .faux-h3 {
font-size: 2.1rem;
}
.site-nav {
gap: 2rem;
}
.site-nav-links {
display: none;
}
.footer-bottom {
flex-direction: column;
gap: 0;
}
}
@media (max-width: 499px) {
.footer-cols {
flex-direction: column;
gap: 3rem;
}
}.hero {
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
left: -8rem;
top: -30rem;
z-index: 0;
width: 52.9rem;
height: 98.9rem;
background: url(//finterface.tech/wp-content/themes/finterface-theme/assets/images/pattern-hero-line.svg) no-repeat left bottom / contain;
pointer-events: none;
}
.hero .row-lg {
position: relative;
z-index: 1;
} .hero .glass-tiles.is-right {
--out: 1.5;
right: max(0px, calc(max(var(--grid-padding), (100% - var(--grid-size-lg)) / 2) - var(--out) * var(--tile-w)));
top: 50%;
z-index: 2;
}
.hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 8rem;
}
.hero .content-wrapper {
max-width: 63.2rem;
min-width: 0;
}
.hero .content-wrapper p {
margin-top: 0;
}
.hero.bgcolor-verydarkgreen .content-wrapper p {
color: var(--color-lightblue);
} .hero.bgcolor-lightblue::before {
width: 48.1rem;
height: 89.9rem;
background-image: url(//finterface.tech/wp-content/themes/finterface-theme/assets/images/pattern-hero-line-fill.svg);
opacity: .05;
}
.hero:not(.bgcolor-verydarkgreen):not(.bgcolor-lightblue)::before {
display: none;
}
.hero .image-wrapper {
min-width: 0;
}
.hero .image-wrapper img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 536 / 701;
object-fit: cover;
border-radius: var(--border-radius);
} .hero-featured {
position: relative;
background-size: cover;
background-position: center top;
text-align: center;
overflow: hidden;
} .hero-featured::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(to bottom, rgba(6, 32, 38, .7) 0%, rgba(6, 32, 38, .85) 35%, rgba(6, 32, 38, .95) 100%);
pointer-events: none;
}
.hero-featured .row-md {
position: relative;
z-index: 2;
}
.hero-featured .content-wrapper {
margin-bottom: 5rem;
}
.hero-featured .btn-group {
justify-content: center;
}
.hero-featured .image-wrapper img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 108 / 60;
object-fit: cover;
border-radius: var(--border-radius);
}
.hero-featured .image-wrapper {
position: relative;
} .hero-featured .glass-tiles.is-right {
--out: 1.5;
right: max(0px, calc(max(var(--grid-padding), (100% - var(--grid-size-md)) / 2) - var(--out) * var(--tile-w)));
top: 50%;
z-index: 3;
} .hero-featured.is-compact .content-wrapper {
margin-bottom: 0;
}
.hero-featured .glass-tiles.is-bottom-center {
left: 50%;
bottom: -9.4rem;
z-index: 1;
transform: translateX(-50%);
} @media (max-width: 1024px) {
.hero-featured .glass-tiles {
display: none;
}
.hero-featured .content-wrapper {
margin-bottom: 4rem;
}
.hero::before,
.hero .glass-tiles {
display: none;
}
.hero .content-wrapper {
max-width: none;
}
.hero .container {
grid-template-columns: 1fr;
gap: 4rem;
}
.hero .content-wrapper p,
.hero .btn-group {
margin-top: 2rem;
}
.hero .image-wrapper img {
aspect-ratio: 16 / 10;
}
}
@media (max-width: 767px) { .hero-featured {
text-align: left;
}
.hero-featured .btn-group {
justify-content: flex-start;
}
}.content-text-image .container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 8rem;
}
.content-text-image.is-flipped .content-wrapper {
order: 2;
}
.content-text-image .content-wrapper {
min-width: 0;
}
.content-text-image .image-wrapper {
position: relative;
}
.content-text-image .image-wrapper img {
display: block;
width: 100%;
height: auto;
border-radius: 1rem;
} .visual-wrapper {
min-width: 0;
}
.highlight-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-top: 1rem;
}
.highlight {
padding: 2rem 2rem;
border-radius: 1rem;
background-color: var(--color-green);
color: var(--color-verydarkgreen);
}
.highlight p {
margin: 0;
font-size: 1.5rem;
line-height: 1.6;
}
.highlight p + p {
margin-top: .5rem;
} .content-text-image-accordion .content-wrapper {
max-width: 86rem;
margin: 0 auto 5rem;
text-align: center;
}
.accordion-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 8rem;
}
.accordion-wrapper .image-wrapper {
position: relative;
min-width: 0;
border-radius: var(--border-radius);
overflow: hidden;
} .accordion-wrapper .image-wrapper img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.accordion-list {
min-width: 0;
display: grid;
align-content: start;
gap: 3rem;
padding-left: 8rem;
border-left: 2px solid var(--color-line);
}
.accordion-item {
position: relative;
}
.accordion-item::before {
content: '';
position: absolute;
left: calc(-8rem - 2px);
top: 0;
bottom: 0;
width: 2px;
background-color: transparent;
transition: .3s;
}
.accordion-item.is-active::before {
background-color: var(--color-green);
} .accordion-list {
--accordion-duration: 6s;
}
.accordion-list.is-autoplay .accordion-item.is-active::before {
transform-origin: top;
animation: accordion-progress var(--accordion-duration) linear forwards;
}
@keyframes accordion-progress {
from { transform: scaleY(0); }
to { transform: scaleY(1); }
} .accordion-list.is-paused .accordion-item.is-active::before,
.accordion-list.is-autoplay:has(:focus-visible) .accordion-item.is-active::before {
animation-play-state: paused;
}
@media (hover: hover) {
.accordion-list.is-autoplay:hover .accordion-item.is-active::before {
animation-play-state: paused;
}
}
.accordion-trigger {
display: block;
width: 100%;
margin-bottom: 1rem;
padding: 0;
background: none;
border: 0;
text-align: left;
cursor: pointer;
color: var(--color-grey);
transition: .3s;
}
.accordion-item.is-active .accordion-trigger {
color: var(--color-black);
} .accordion-panel {
max-height: 3.2em; overflow: hidden;
color: var(--color-grey);
transition: max-height .4s ease, color .3s;
} .accordion-item:not(.is-active) .accordion-panel > *:first-child {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.accordion-item:not(.is-active) .accordion-panel > *:not(:first-child) {
display: none;
}
.accordion-item.is-active .accordion-panel {
max-height: 60rem;
color: var(--color-black);
}
.accordion-panel .btn-group {
margin-top: 3rem;
} .content-media-tabs .content-wrapper {
max-width: 72rem;
margin: 0 auto;
text-align: center;
}
.content-media-tabs .btn-group {
justify-content: center;
}
.content-media-tabs .media-wrapper {
max-width: 108rem;
margin: 5rem auto 0;
padding-top: 5rem;
border-radius: var(--border-radius);
background: linear-gradient(to top right, var(--color-lightblue) 0%, var(--color-offwhite) 100%);
overflow: hidden;
}
.tabs-nav {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 3rem;
} .tab-trigger,
.filter-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 0;
border-color: var(--color-white);
background-color: var(--color-white);
font-family: inherit;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0;
color: var(--color-black);
text-transform: none;
white-space: nowrap;
cursor: pointer;
transition: .3s;
}
.tab-trigger:hover,
.filter-pill:hover {
border-color: var(--color-line);
}
.tab-trigger.is-active,
.filter-pill.is-active {
border-color: var(--color-green);
background-color: var(--color-green);
color: var(--color-verydarkgreen);
} .tab-panel {
display: none;
aspect-ratio: 2 / 1;
margin: 0 8%;
}
.tab-panel.is-active {
display: block;
}
.tab-panel img {
display: block;
width: 100%;
max-width: none;
height: 100%;
object-fit: cover;
object-position: left top;
border-radius: 1.6rem 1.6rem 0 0;
box-shadow: 0 2.4rem 6rem rgba(6, 32, 38, .12);
}
.tab-panel .lottie {
position: static;
width: 100%;
max-width: 100%;
height: 100%;
}
.content-media-tabs .content-wrapper.is-bottom {
margin-top: 5rem;
} .content-media .content-wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: end;
gap: 2.4rem;
}
.content-media .content-col:first-child {
grid-column: span 7;
}
.content-media .content-col:last-child {
grid-column: span 5;
}
.content-media .content-col:only-child {
grid-column: span 12;
max-width: 76rem;
}
.content-media .content-col:last-child .btn-group {
justify-content: flex-end;
margin-top: 0;
}
.content-media .content-wrapper .label {
padding: 0;
border: 0;
color: var(--color-green);
}
.content-media .media-wrapper {
margin-top: 5rem;
}
.content-media .media-wrapper img {
display: block;
width: 100%;
height: auto;
border-radius: 1rem;
}
.content-media .media-wrapper .lottie {
position: static;
width: 100%;
max-width: 100%;
height: auto;
} .content-customer-story .container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 8rem;
}
.content-customer-story .image-wrapper {
position: relative;
min-width: 0;
}
.content-customer-story .image-wrapper img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 600 / 700;
object-fit: cover;
border-radius: var(--border-radius);
}
.story-label {
position: absolute;
left: 2.4rem;
top: 2.4rem;
gap: 1rem;
}
.story-label::before {
content: '';
width: .6rem;
height: .6rem;
border-radius: 50%;
background-color: var(--color-green);
}
.story-author {
position: absolute;
left: 2.4rem;
bottom: 2.4rem;
color: var(--color-white);
}
.story-author p {
margin: 0;
}
.story-author-name {
color: var(--color-green);
}
.story-author-role {
margin-top: 1rem;
font-size: 1.5rem;
line-height: 1.6;
}
.content-customer-story .content-wrapper {
min-width: 0;
}
.content-customer-story blockquote,
.content-customer-story blockquote p {
margin: 0;
line-height: 1.6;
color: var(--color-black);
}
.content-customer-story .link-arrow {
margin-top: 2.5rem;
align-self: flex-start;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.5;
color: var(--color-grey);
white-space: nowrap;
transition: .3s;
} .content-cta {
padding-left: 0;
padding-right: 0;
}
.cta-wrapper {
position: relative;
display: grid;
align-items: end;
min-height: 62.6rem;
padding: 6rem var(--grid-padding);
background-size: cover;
background-position: center;
overflow: hidden;
}
.cta-wrapper .row-lg {
position: relative;
z-index: 1;
} .cta-wrapper .glass-tiles.is-top-left {
left: max(var(--grid-padding), calc(50% - 62rem));
top: 0;
z-index: 0;
} .cta-wrapper .glass-tiles.is-bottom-right {
--out: 1.5;
right: max(0px, calc(max(var(--grid-padding), (100% - var(--grid-size-lg)) / 2) - var(--out) * var(--tile-w)));
bottom: 0;
z-index: 0;
}
.content-cta h2, .content-cta .faux-h2,
.content-cta h3, .content-cta .faux-h3,
.content-cta-grid h2, .content-cta-grid .faux-h2,
.content-cta-grid h3, .content-cta-grid .faux-h3 {
margin-bottom: 1rem;
}
.content-cta .content-wrapper,
.content-cta-grid .content-wrapper {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 3rem;
padding: 4rem 5rem;
border-radius: var(--border-radius);
background-color: var(--color-green);
overflow: hidden;
}
.content-cta .content-wrapper::before,
.content-cta-grid .content-wrapper::before {
content: '';
position: absolute;
right: 0;
top: 0;
z-index: 0;
width: 116.1rem;
height: 70.3rem;
background: url(//finterface.tech/wp-content/themes/finterface-theme/assets/images/pattern-grid.svg) no-repeat right top / contain;
-webkit-mask-image: linear-gradient(to right, transparent 30%, #000 100%);
mask-image: linear-gradient(to right, transparent 30%, #000 100%);
opacity: .1;
pointer-events: none;
} .content-cta-grid .content-wrapper::before {
right: 0;
top: -35rem;
width: 51.6rem;
height: 87.9rem;
background-image: url(//finterface.tech/wp-content/themes/finterface-theme/assets/images/pattern-cta-line-fill.svg);
background-position: right top;
-webkit-mask-image: none;
mask-image: none;
opacity: 1;
}
.content-cta .content-wrapper > *,
.content-cta-grid .content-wrapper > * {
position: relative;
z-index: 1;
}
.content-cta .text-wrapper,
.content-cta-grid .text-wrapper {
max-width: 76.7rem;
}
.content-cta .content-wrapper p,
.content-cta-grid .content-wrapper p {
margin: 0;
color: var(--color-black);
} .content-comparison .content-wrapper {
max-width: 90rem;
margin: 0 auto 5rem;
text-align: center;
}
.comparison-wrapper {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: stretch;
gap: 3rem;
}
.comparison-card {
position: relative;
padding: 4.5rem 3.5rem 3.5rem;
border: 1px solid var(--color-line);
border-radius: var(--border-radius);
background-color: var(--color-white);
}
.comparison-card.is-after {
border: 2px solid var(--color-verydarkgreen);
}
.comparison-card ul {
margin-bottom: 0;
}
.comparison-tag {
position: absolute;
left: 3.5rem;
top: 0;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
padding: .8rem 1.6rem;
border-radius: var(--border-radius-sm);
background-color: var(--color-offwhite);
font-size: 1.2rem;
font-weight: 500;
line-height: 1.5;
text-transform: uppercase;
letter-spacing: .1rem;
color: var(--color-verydarkgreen);
}
.comparison-card.is-after .comparison-tag {
background-color: var(--color-black);
color: var(--color-white);
}
.comparison-arrow {
align-self: center;
font-size: 2.4rem;
color: var(--color-verydarkgreen);
} .content-text.col-2 .container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 8rem;
}
.content-text .content-col > :last-child {
margin-bottom: 0;
} .content-featured {
overflow: hidden;
text-align: center;
}
.content-featured .content-wrapper {
margin-bottom: 5rem;
}
.content-featured .content-wrapper > :last-child {
margin-bottom: 0;
}
.content-featured .btn-group {
justify-content: center;
}
.content-featured .featured-stage {
position: relative;
}
.content-featured .featured-stage .row-md {
position: relative;
z-index: 1;
}
.content-featured .image-wrapper {
position: relative;
}
.content-featured .image-wrapper img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 108 / 60;
object-fit: cover;
border-radius: var(--border-radius);
} .content-featured .story-video {
left: 50%;
top: 50%;
right: auto;
bottom: auto;
transform: translate(-50%, -50%);
} .content-featured .glass-tiles {
bottom: 0;
z-index: 2;
}
.content-featured .glass-tiles.is-left {
left: calc(-1 * var(--grid-padding));
}
.content-featured .glass-tiles.is-right {
right: calc(-1 * var(--grid-padding));
} .content-featured .glass-tiles {
--tint: 205, 210, 212;
--line-alpha: .6;
}
.content-featured .content-wrapper.is-bottom {
margin: 5rem 0 0;
}
.content-faqs .content-wrapper {
max-width: 76rem;
margin-bottom: 4rem;
}
.faq-list {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
gap: 1.5rem;
}
.faq-item {
border-radius: var(--border-radius-sm);
background-color: var(--color-white);
transition: background-color .3s;
} .content-faqs.bgcolor-white .faq-item {
background-color: var(--color-offwhite);
}
.faq-item.is-active,
.content-faqs.bgcolor-white .faq-item.is-active {
background-color: var(--color-green);
}
.faq-trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
width: 100%;
padding: 2rem 2.4rem;
border: 0;
background: none;
font-family: inherit;
font-weight: 500;
color: var(--color-black);
text-align: left;
cursor: pointer;
}
.faq-trigger i {
flex-shrink: 0;
transition: transform .3s;
}
.faq-item.is-active .faq-trigger i {
transform: rotate(45deg);
}
.faq-answer {
display: none;
padding: 0 2.4rem 2rem;
}
.faq-item.is-active .faq-answer {
display: block;
} .content-process .content-wrapper {
text-align: center;
}
.steps-wrapper {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 3rem;
margin: 2.5rem 0;
}
.step {
position: relative;
text-align: center;
} .step + .step::before {
content: '';
position: absolute;
left: -1.5rem;
top: -1.2rem;
width: 3.3rem;
height: 6.7rem;
transform: translateX(-50%);
background: url(//finterface.tech/wp-content/themes/finterface-theme/assets/images/pattern-step-arrow.svg) no-repeat center / contain;
}
.step-number {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4.4rem;
height: 4.4rem;
margin-bottom: 1rem;
border: 1px solid var(--color-line);
border-radius: 50%;
background-color: var(--color-lightblue);
font-weight: 500;
color: var(--color-verydarkgreen);
transition: background-color .6s ease, border-color .6s ease;
}
.step.is-active .step-number {
border-color: var(--color-green);
background-color: var(--color-green);
}
.step p {
margin: 0;
font-size: 1.4rem;
color: var(--color-grey);
}
.step .step-title {
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: 1.6;
font-weight: 500;
color: var(--color-black);
} .content-quote .container {
text-align: center;
}
.quote-image {
width: 5.6rem;
height: 5.6rem;
margin: 0 auto 2.5rem;
border-radius: 50%;
object-fit: cover;
}
.quote-credit {
margin-top: 2rem;
} @media (max-width: 1220px) {
.content-text-image .container,
.content-text.col-2 .container {
gap: 6rem;
}
.accordion-list {
padding-left: 3rem;
}
.accordion-item::before {
left: calc(-3rem - 2px);
}
}
@media (max-width: 1024px) {
.content-featured .glass-tiles {
display: none;
}
.content-featured .content-wrapper {
margin-bottom: 4rem;
}
.content-featured .content-wrapper.is-bottom {
margin-top: 4rem;
}
.story-label {
left: 2rem;
top: 2rem;
}
.story-author {
left: 2rem;
bottom: 2rem;
}
.content-process .content-wrapper {
text-align: left;
}
.steps-wrapper {
grid-template-columns: 1fr;
gap: 2rem;
margin: 0;
}
.step {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 2rem;
text-align: left;
}
.step + .step::before {
display: none;
}
.step .step-number {
grid-row: span 2;
margin-bottom: 0;
}
.comparison-wrapper {
grid-template-columns: 1fr;
gap: 1rem;
}
.comparison-arrow {
justify-self: center;
transform: rotate(90deg);
}
.comparison-card {
padding: 3rem 2rem 2rem;
}
.comparison-tag {
left: 2rem;
}
.content-cta .text-wrapper,
.content-cta-grid .text-wrapper {
max-width: none;
}
.faq-list {
grid-template-columns: 1fr;
gap: 1rem;
}
.content-media .content-wrapper {
grid-template-columns: 1fr;
align-items: start;
gap: 2rem;
}
.content-media .content-col,
.content-media .content-col:first-child,
.content-media .content-col:last-child {
grid-column: auto;
}
.content-media .content-col:last-child .btn-group {
justify-content: flex-start;
}
.cta-wrapper .glass-tiles {
display: none;
}
.content-text-image-accordion .content-wrapper,
.content-media-tabs .content-wrapper,
.content-media .content-col:only-child,
.content-faqs .content-wrapper,
.faq-list {
max-width: none;
}
.content-text-image-accordion .content-wrapper,
.content-comparison .content-wrapper {
margin-bottom: 4rem;
}
.content-media-tabs .media-wrapper {
margin-top: 4rem;
padding-top: 4rem;
}
.content-media-tabs .content-wrapper.is-bottom,
.content-media .media-wrapper {
margin-top: 4rem;
}
.content-text-image .container,
.content-text.col-2 .container,
.accordion-wrapper,
.content-customer-story .container {
grid-template-columns: 1fr;
gap: 4rem;
}
.content-text-image.is-flipped .content-wrapper {
order: 0;
}
.accordion-wrapper .image-wrapper {
height: auto !important;
aspect-ratio: 3 / 2;
}
.content-customer-story .content-wrapper > p:first-child {
font-size: 2.4rem;
}
.content-customer-story .image-wrapper img {
aspect-ratio: 4 / 3;
}
.cta-wrapper {
min-height: 48rem;
}
}
@media (max-width: 767px) {
.content-featured {
text-align: left;
}
.content-featured .btn-group {
justify-content: flex-start;
}
.content-cta .content-wrapper::before,
.content-cta-grid .content-wrapper::before {
opacity: .05;
} .content-text-image-accordion .content-wrapper,
.content-media-tabs .content-wrapper,
.content-comparison .content-wrapper,
.content-process .content-wrapper,
.content-quote .container,
.step {
text-align: left;
}
.quote-image {
margin-left: 0;
}
.story-label {
display: none;
}
.content-customer-story .story-video {
right: auto;
bottom: auto;
left: 2rem;
top: 2rem;
}
.content-media-tabs .media-wrapper {
height: auto;
padding: 3rem 0 0;
}
.tabs-nav {
flex-wrap: wrap;
margin-bottom: 3rem;
}
.tab-panel {
margin: 0;
}
.tab-panel img {
width: 100%;
border-radius: 0;
}
.content-text-image-accordion .content-wrapper,
.content-faqs .content-wrapper {
margin-bottom: 3rem;
}
.accordion-trigger {
font-size: 2.2rem;
}
.content-media-tabs .media-wrapper,
.content-media .media-wrapper {
margin-top: 3rem;
}
.cta-wrapper {
min-height: 0;
padding: 3rem var(--grid-padding);
}
.content-cta .content-wrapper,
.content-cta-grid .content-wrapper {
grid-template-columns: 1fr;
padding: 3rem 2rem 2rem;
}
}
@media (max-width: 499px) {
.highlight-wrapper {
grid-template-columns: 1fr;
}
}.slider-testimonials {
text-align: center;
}
.testimonials-swiper {
margin-top: 5rem;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.testimonials-swiper .swiper-slide {
height: 6rem;
cursor: pointer;
opacity: .35;
transition: opacity .3s;
}
.testimonials-swiper .swiper-slide-active {
opacity: 1;
}
.testimonial-logo {
display: block;
width: auto;
max-width: 16rem;
max-height: 4.5rem;
margin: 0 auto;
object-fit: contain;
}
.testimonials-content {
max-width: 68rem;
margin: 5rem auto 0;
}
.testimonials-content {
display: grid;
}
.testimonial {
grid-area: 1 / 1;
opacity: 0;
visibility: hidden;
transition: opacity .4s ease, visibility .4s;
}
.testimonial.is-active {
opacity: 1;
visibility: visible;
}
.testimonial-credit {
margin: 2rem 0 0;
font-size: 1.4rem;
}
.testimonial .link-arrow {
margin-top: 2rem;
} @media (max-width: 1024px) {
.testimonials-content {
max-width: none;
}
}
@media (max-width: 767px) {
.slider-testimonials {
text-align: left;
} .slider-testimonials .label {
display: flex;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.testimonial blockquote {
font-size: 2rem;
}
}.grid-bento .content-wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
align-items: end;
gap: 2.4rem;
margin-bottom: 4rem;
}
.grid-bento .content-col:first-child {
grid-column: span 8;
}
.grid-bento .content-col:last-child {
grid-column: span 4;
}
.grid-bento .content-col:only-child {
grid-column: span 12;
}
.grid-bento .content-wrapper.is-centered {
grid-template-columns: 1fr;
max-width: 76rem;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.grid-bento .content-wrapper.is-centered .content-col {
grid-column: auto;
}
.grid-bento .content-wrapper.is-centered .btn-group {
justify-content: center;
}
.grid-bento .content-col:last-child .btn-group {
justify-content: flex-end;
margin-top: 0;
} .grid-bento .bento-wrapper {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2.4rem;
} .grid-bento .bento-wrapper.is-plain {
gap: 5rem 8rem;
} .bento-card {
display: flex;
flex-direction: column;
min-width: 0;
color: inherit;
text-decoration: none;
}
.bento-card.has-bg {
padding: 2.4rem;
border: 1px solid var(--color-line);
border-radius: var(--border-radius);
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
.bento-card.span-12 { grid-column: span 12; }
.bento-card.span-8 { grid-column: span 8; }
.bento-card.span-6 { grid-column: span 6; }
.bento-card.span-4 { grid-column: span 4; }
.bento-card.span-3 { grid-column: span 3; }
.bento-card .image-wrapper {
position: relative;
border-radius: 1rem;
overflow: hidden;
}
.bento-card .image-wrapper img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
} a.bento-card .image-wrapper img {
transition: transform .6s ease;
}
a.bento-card:hover .image-wrapper img {
transform: scale(1.04);
}
.bento-card .text-wrapper {
position: relative;
margin-top: 2rem;
}
a.bento-card .text-wrapper {
padding-right: 6rem;
}
.bento-card .text-wrapper h3 {
display: flex;
align-items: center;
min-height: 4rem;
margin-bottom: 0;
}
.bento-card .text-wrapper p {
margin: .3rem 0 0;
font-size: 1.5rem;
line-height: 1.6;
color: var(--color-grey);
}
.bento-card-arrow {
position: absolute;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
width: 4.5rem;
height: 4.3rem;
border: 1px solid var(--color-line);
border-radius: var(--border-radius-sm);
transition: .3s;
}
.bento-card-arrow::after {
content: '\f061';
font-family: 'Font Awesome 6 Pro';
font-weight: 400;
font-size: 1.5rem;
}
a.bento-card:hover .bento-card-arrow {
background-color: var(--color-green);
border-color: var(--color-green);
} .grid-bento.ar-2-1 .bento-card .image-wrapper { aspect-ratio: 2 / 1; }
.grid-bento.ar-3-2 .bento-card .image-wrapper { aspect-ratio: 3 / 2; }
.grid-bento.ar-4-3 .bento-card .image-wrapper { aspect-ratio: 4 / 3; }
.grid-bento.ar-1-1 .bento-card .image-wrapper { aspect-ratio: 1 / 1; }
.bento-card.is-sized .image-wrapper { aspect-ratio: auto; }  .insight-featured {
display: grid;
color: inherit;
text-decoration: none;
grid-template-columns: 1fr 1fr;
align-items: stretch;
border-radius: var(--border-radius);
background-color: var(--color-white);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.insight-featured .image-wrapper {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
}
.insight-featured .image-wrapper img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.insight-featured:hover .image-wrapper img {
transform: scale(1.04);
}
.insight-featured-label {
position: absolute;
left: 2rem;
top: 2rem;
margin-bottom: 0;
border-color: var(--color-green);
background-color: var(--color-green);
}
.insight-featured .content-wrapper {
align-self: center;
padding: 4rem;
}
.insight-terms {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 2rem;
}
.insight-terms .label {
margin-bottom: 0;
border-color: var(--color-offwhite);
background-color: var(--color-offwhite);
}
.insight-featured .faux-h3 {
margin-bottom: 2rem;
}
.insight-featured .link-arrow {
color: var(--color-grey);
}  .filter-pill {
border-color: var(--color-line);
}
.grid-insights .content-wrapper {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 2.4rem;
margin-bottom: 3rem;
} .grid-insights .content-wrapper.is-centered {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
} .grid-insights .content-wrapper.no-filters {
margin-bottom: 4rem;
}
.grid-insights .content-wrapper h2 {
margin-bottom: 0;
}
.insights-formats {
position: relative;
display: inline-block;
}
.insights-formats select {
padding-right: 5rem;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.insights-formats::after {
content: '\f078';
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
font-family: 'Font Awesome 6 Pro';
font-weight: 400;
font-size: 1.2rem;
pointer-events: none;
transition: .3s;
}
.insights-formats:hover::after {
color: var(--color-white);
}
.insights-filters {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 4rem;
} .insights-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4rem 2.4rem;
transition: opacity .3s;
}
.insights-grid.is-loading {
opacity: .4;
}
.insight-card {
display: block;
color: inherit;
text-decoration: none;
}
.insight-card .image-wrapper {
aspect-ratio: 3 / 2;
margin-bottom: 2rem;
border-radius: 1rem;
overflow: hidden;
}
.insight-card .image-wrapper img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .6s ease;
}
.insight-card:hover .image-wrapper img {
transform: scale(1.04);
}
.insight-card .label {
margin-bottom: 1rem;
border-color: var(--color-offwhite);
background-color: var(--color-offwhite);
}
.insight-card h3 {
margin-bottom: .5rem;
}
.insight-duration {
margin: 0;
font-size: 1.5rem;
line-height: 1.6;
color: var(--color-grey);
}
.insights-more {
display: flex;
justify-content: center;
margin-top: 4rem;
} .insights-more[hidden] {
display: none;
}
.insights-empty {
grid-column: 1 / -1;
margin: 0;
} .grid-icon-blocks {
position: relative;
overflow: hidden;
} .grid-icon-blocks.has-bg-image {
background-size: cover;
background-position: center;
}
.grid-icon-blocks.has-bg-image::before {
content: '';
position: absolute;
inset: 0;
z-index: 0; background: linear-gradient(to bottom, rgba(6, 32, 38, .7) 0%, rgba(6, 32, 38, .85) 35%, rgba(6, 32, 38, .95) 100%);
pointer-events: none;
}
.grid-icon-blocks .row-lg {
position: relative;
z-index: 2;
}
.grid-icon-blocks .content-wrapper {
max-width: 76rem;
margin-bottom: 4rem;
}
.grid-icon-blocks .content-wrapper.is-centered {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.grid-icon-blocks .content-wrapper > :last-child {
margin-bottom: 0;
}
.bgcolor-verydarkgreen.grid-icon-blocks .label {
padding: 0;
border: 0;
color: var(--color-green);
}
.icon-blocks-wrapper {
display: grid;
gap: 2rem;
}
.icon-blocks-wrapper.col-2 { grid-template-columns: repeat(2, 1fr); }
.icon-blocks-wrapper.col-3 { grid-template-columns: repeat(3, 1fr); }
.icon-blocks-wrapper.col-4 { grid-template-columns: repeat(4, 1fr); }
.icon-block {
padding: 2.4rem 2.4rem 3rem;
border: 1px solid var(--color-line);
border-radius: var(--border-radius);
background-color: var(--color-white);
transition: background-color .3s, border-color .3s, color .3s, transform .3s;
} .icon-block.is-link {
display: block;
color: inherit;
text-decoration: none;
}
.icon-block.is-link:hover {
transform: translateY(-.5rem);
}
.icon-block-icon {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin-bottom: 2rem;
border-radius: .8rem;
background-color: var(--color-offwhite);
font-size: 1.6rem;
color: var(--color-verydarkgreen);
transition: background-color .3s, border-color .3s, color .3s;
} .icon-block-icon i,
.icon-block-icon svg {
color: inherit;
fill: currentColor;
}
.icon-block h3 {
margin-bottom: 1rem;
}
.icon-block p {
margin: 0;
font-size: 1.5rem;
line-height: 1.6;
} .size-sm .icon-block {
display: flex;
align-items: flex-start;
gap: 1.6rem;
padding: 2rem;
}
.size-sm .icon-block p {
font-size: 1.5rem;
}
.size-sm .icon-block-icon {
flex-shrink: 0;
margin-bottom: 0;
}
.size-sm .icon-block h3 {
margin-bottom: .2rem;
font-size: 1.8rem;
} .bgcolor-verydarkgreen .icon-block {
border-color: rgba(255, 255, 255, .08);
background-color: #0b2b31;
}
.bgcolor-verydarkgreen .icon-block-icon {
border: 1px solid rgba(255, 255, 255, .15);
background-color: var(--color-verydarkgreen);
color: var(--color-lightblue);
} .has-bg-image .size-sm .icon-block {
border-color: rgba(255, 255, 255, .2);
background-color: rgba(255, 255, 255, .1);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.has-bg-image .size-sm .icon-block-icon {
border-color: var(--color-white);
background-color: var(--color-white);
color: var(--color-verydarkgreen);
}
.bgcolor-verydarkgreen .icon-block.is-link:hover {
border-color: var(--color-green);
background-color: var(--color-green);
color: var(--color-verydarkgreen);
}
.bgcolor-verydarkgreen .icon-block.is-link:hover h3 {
color: var(--color-verydarkgreen);
}
.bgcolor-verydarkgreen .icon-block.is-link:hover .icon-block-icon {
border-color: var(--color-verydarkgreen);
background-color: transparent;
color: var(--color-verydarkgreen);
} @media (max-width: 1024px) {
.icon-blocks-wrapper.col-3,
.icon-blocks-wrapper.col-4 {
grid-template-columns: repeat(2, 1fr);
}
.grid-icon-blocks .content-wrapper {
max-width: none;
}
.insight-featured {
grid-template-columns: 1fr;
}
.insight-featured .content-wrapper {
padding: 3rem 2rem;
}
.insight-featured-label {
left: 2rem;
top: 2rem;
}
.grid-insights .content-wrapper {
grid-template-columns: 1fr;
align-items: start;
}
.insights-grid {
grid-template-columns: repeat(2, 1fr);
gap: 3rem 2rem;
}
.grid-bento .content-col:last-child .btn-group {
justify-content: flex-start;
}
.grid-bento .content-wrapper.is-centered {
max-width: none;
}
.bento-card.has-bg {
padding: 2rem;
}
.icon-block {
padding: 2rem 2rem 2.5rem;
}
.grid-bento .bento-wrapper {
gap: 2rem;
}
.grid-bento .bento-wrapper.is-plain {
gap: 3rem;
}
.grid-bento .content-wrapper {
grid-template-columns: 1fr;
align-items: start;
gap: 2rem;
}
.grid-bento .content-col:first-child,
.grid-bento .content-col:last-child {
grid-column: auto;
}
.grid-bento .content-col:last-child .btn-group {
justify-content: flex-start;
}
.bento-card.span-8 {
grid-column: span 12;
}
.bento-card.span-4,
.bento-card.span-3 {
grid-column: span 6;
}
}
@media (max-width: 767px) {
.grid-insights .content-wrapper.is-centered {
justify-items: start;
text-align: left;
}
.icon-blocks-wrapper.col-2,
.icon-blocks-wrapper.col-3,
.icon-blocks-wrapper.col-4 {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.grid-icon-blocks .content-wrapper.is-centered {
text-align: left;
} .grid-insights .content-col:last-child {
display: none;
} .grid-bento .content-wrapper.is-centered {
text-align: left;
}
.grid-bento .content-wrapper.is-centered .btn-group,
.insights-more {
justify-content: flex-start;
}
.insights-grid {
grid-template-columns: 1fr;
}
.bento-card.span-12,
.bento-card.span-8,
.bento-card.span-6,
.bento-card.span-4,
.bento-card.span-3 {
grid-column: span 12;
}
.bento-card.has-bg {
padding: 2rem;
}
}
@media (max-width: 499px) {
.grid-bento .bento-wrapper {
gap: 1.5rem;
}
}.form-card {
padding: 5rem;
border: 1px solid var(--color-line);
border-radius: 2rem;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
}
.form-card .content-wrapper {
margin-bottom: 3rem;
}
.form-card .content-wrapper > :last-child {
margin-bottom: 0;
}
.form-card .content-wrapper.is-bottom {
margin: 3rem 0 0;
font-size: 1.4rem;
color: var(--color-grey);
}
.form-card .content-wrapper.is-bottom a {
color: inherit;
text-decoration: none;
} .gform_wrapper .gform_fields {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 2.4rem 2rem;
margin: 0;
padding: 0;
list-style: none;
}
.gform_wrapper .gfield {
grid-column: span 12;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.gform_wrapper .gfield--width-half {
grid-column: span 6;
}
.gform_wrapper .gfield_label {
display: block;
margin-bottom: 1rem;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.5;
color: var(--color-black);
}
.gform_wrapper .gfield_required {
display: none;
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper textarea {
width: 100%;
padding: 1.3rem 1.6rem;
border: 1px solid var(--color-line);
border-radius: var(--border-radius-sm);
background-color: var(--color-offwhite);
font-family: inherit;
font-size: 1.5rem;
line-height: 1.5;
color: var(--color-black);
transition: border-color .3s, background-color .3s;
}
.gform_wrapper textarea {
height: 4.9rem;
min-height: 4.9rem;
resize: vertical;
}
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
color: var(--color-grey);
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus {
outline: 0;
border-color: var(--color-verydarkgreen);
background-color: var(--color-white);
} .gform_wrapper .form-pills .gfield_label {
margin-bottom: 1.6rem;
font-size: 1.2rem;
font-weight: 500;
letter-spacing: .1rem;
text-transform: uppercase;
color: var(--color-grey);
}
.gform_wrapper .form-pills .gfield_checkbox {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.gform_wrapper .form-pills .gchoice {
position: relative;
}
.gform_wrapper .form-pills input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.gform_wrapper .form-pills .gchoice label {
display: inline-flex;
align-items: center;
padding: .8rem 1.6rem;
border: 1px solid var(--color-line);
border-radius: 999px;
background-color: var(--color-white);
font-size: 1.4rem;
font-weight: 500;
line-height: 1.5;
cursor: pointer;
transition: .3s;
}
.gform_wrapper .form-pills .gchoice label:hover {
border-color: var(--color-verydarkgreen);
}
.gform_wrapper .form-pills input:checked + label {
border-color: var(--color-green);
background-color: var(--color-green);
color: var(--color-verydarkgreen);
}
.gform_wrapper .form-pills input:focus-visible + label {
outline: 2px solid var(--color-verydarkgreen);
outline-offset: 2px;
} .gform_wrapper .gform_footer {
margin-top: 2.4rem;
}
.gform_wrapper .gform_button {
width: 100%;
padding: 1.2rem 2.4rem;
border: 1px solid var(--color-green);
border-radius: var(--border-radius-sm);
background-color: var(--color-green);
font-family: inherit;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.5;
color: var(--color-verydarkgreen);
cursor: pointer;
transition: .3s;
}
.gform_wrapper .gform_button:hover {
border-color: color-mix(in srgb, var(--color-green) 90%, black);
background-color: color-mix(in srgb, var(--color-green) 90%, black);
} .gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
border-color: #c0392b;
}
.gform_wrapper .gfield_validation_message,
.gform_wrapper .gform_validation_errors {
margin-top: .6rem;
font-size: 1.3rem;
color: #c0392b;
}
.gform_wrapper .gform_validation_errors {
margin: 0 0 2.4rem;
}
.gform_wrapper .gform_validation_errors h2 {
margin: 0;
font-size: 1.4rem;
color: inherit;
}
.gform_confirmation_message {
font-size: 1.65rem;
}
.gform_wrapper .gform_required_legend,
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_validation_container {
display: none;
}  .hs-form-html {
--hsf-global__font-family: inherit;
--hsf-background__padding: 0;
--hsf-row__horizontal-spacing: 2rem;
--hsf-row__vertical-spacing: 2.4rem;
--hsf-module__vertical-spacing: 1rem;
--hsf-field-label__font-size: 1.4rem;
--hsf-field-label__color: var(--color-black);
--hsf-field-label-requiredindicator__color: transparent;
--hsf-field-input__font-size: 1.5rem;
--hsf-field-input__color: var(--color-black);
--hsf-field-input__background-color: var(--color-offwhite);
--hsf-field-input__border-color: var(--color-line);
--hsf-field-input__border-radius: var(--border-radius-sm);
--hsf-field-input__padding: 1.3rem 1.6rem;
--hsf-field-input__placeholder-color: var(--color-grey);
--hsf-field-textarea__font-size: 1.5rem;
--hsf-field-textarea__color: var(--color-black);
--hsf-field-textarea__background-color: var(--color-offwhite);
--hsf-field-textarea__border-color: var(--color-line);
--hsf-field-textarea__border-radius: var(--border-radius-sm);
--hsf-field-textarea__padding: 1.2rem 1.6rem;
--hsf-field-textarea__placeholder-color: var(--color-grey);
--hsf-field-checkbox__background-color: var(--color-white);
--hsf-field-checkbox__border-color: var(--color-line);
--hsf-field-checkbox__color: var(--color-verydarkgreen);
--hsf-field-checkbox__padding: 0;
--hsf-richtext__font-size: 1.3rem;
--hsf-richtext__color: var(--color-grey);
--hsf-erroralert__font-size: 1.3rem;
--hsf-erroralert__color: #c0392b;
--hsf-button__width: 100%;
--hsf-button__font-size: 1.4rem;
--hsf-button__font-weight: 500;
--hsf-button__color: var(--color-verydarkgreen);
--hsf-button__background-color: var(--color-green);
--hsf-button__border-radius: var(--border-radius-sm);
--hsf-button__border-width: 1px;
--hsf-button__border-style: solid;
--hsf-button__border-color: var(--color-green);
--hsf-button__padding: 1.2rem 2.4rem;
--hsf-button__box-shadow: none;
--hsf-button--hover__color: var(--color-verydarkgreen);
--hsf-button--hover__background-color: color-mix(in srgb, var(--color-green) 90%, black);
--hsf-button--hover__border-color: color-mix(in srgb, var(--color-green) 90%, black);
--hsf-button--focus__color: var(--color-verydarkgreen);
--hsf-button--focus__background-color: var(--color-green);
--hsf-button--focus__border-color: var(--color-green);
} .form-card .content-wrapper + .hs-form-html .hsfc-Renderer .hsfc-Row:has(> .hsfc-Heading) {
display: none;
}
.hs-form-html .hsfc-Renderer .hsfc-FieldLabel {
font-weight: 500;
line-height: 1.5;
} .hs-form-html .hsfc-Renderer .hsfc-TextInput,
.hs-form-html .hsfc-Renderer .hsfc-TextareaInput {
line-height: 1.5;
transition: border-color .3s, background-color .3s;
}
.hs-form-html .hsfc-Renderer .hsfc-TextInput:focus,
.hs-form-html .hsfc-Renderer .hsfc-TextareaInput:focus,
.hs-form-html .hsfc-Renderer .hsfc-PhoneInput:focus-within .hsfc-TextInput {
box-shadow: none;
border-color: var(--color-verydarkgreen);
background-color: var(--color-white);
}
.hs-form-html .hsfc-Renderer .hsfc-TextareaInput {
height: 4.9rem;
min-height: 4.9rem;
resize: vertical;
} .hs-form-html .hsfc-Renderer .hsfc-CheckboxField .hsfc-CheckboxInput {
flex-shrink: 0;
width: 1.8rem;
height: 1.8rem;
border-radius: .4rem;
}
.hs-form-html .hsfc-Renderer .hsfc-CheckboxField .hsfc-CheckboxInput:checked {
border-color: var(--color-green);
background-color: var(--color-green);
}
.hs-form-html .hsfc-Renderer .hsfc-CheckboxField .hsfc-FieldLabel {
gap: 1rem;
} .hs-form-html .hsfc-Renderer .hsfc-CheckboxFieldGroup > .hsfc-FieldLabel {
margin-bottom: 1.6rem;
font-size: 1.2rem;
letter-spacing: .1rem;
text-transform: uppercase;
color: var(--color-grey);
}
.hs-form-html .hsfc-Renderer .hsfc-CheckboxFieldGroup__Options {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.hs-form-html .hsfc-Renderer .hsfc-CheckboxFieldGroup__Options > div {
margin: 0;
}
.hs-form-html .hsfc-Renderer .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel {
position: relative;
display: inline-flex;
align-items: center;
padding: .8rem 1.6rem;
border: 1px solid var(--color-line);
border-radius: 999px;
background-color: var(--color-white);
font-size: 1.4rem;
cursor: pointer;
transition: .3s;
}
.hs-form-html .hsfc-Renderer .hsfc-CheckboxFieldGroup__Options .hsfc-CheckboxInput {
position: absolute;
opacity: 0;
pointer-events: none;
}
.hs-form-html .hsfc-Renderer .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel:hover {
border-color: var(--color-verydarkgreen);
}
.hs-form-html .hsfc-Renderer .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel:has(input:checked) {
border-color: var(--color-green);
background-color: var(--color-green);
color: var(--color-verydarkgreen);
}
.hs-form-html .hsfc-Renderer .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel:has(input:focus-visible) {
outline: 2px solid var(--color-verydarkgreen);
outline-offset: 2px;
} .hs-form-html .hsfc-Renderer .hsfc-FileInput,
.gform_wrapper input[type="file"] {
width: 100%;
padding: .6rem;
border: 1px solid var(--color-line);
border-radius: var(--border-radius-sm);
background-color: var(--color-offwhite);
font-family: inherit;
font-size: 1.4rem;
line-height: 1.5;
color: var(--color-grey);
cursor: pointer;
}
.hs-form-html .hsfc-Renderer .hsfc-FileInput::file-selector-button,
.gform_wrapper input[type="file"]::file-selector-button {
margin-right: 1.2rem;
padding: .8rem 1.6rem;
border: 1px solid var(--color-line);
border-radius: var(--border-radius-sm);
background-color: var(--color-white);
font-family: inherit;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.5;
color: var(--color-black);
cursor: pointer;
transition: .3s;
}
.hs-form-html .hsfc-Renderer .hsfc-FileInput:hover::file-selector-button,
.gform_wrapper input[type="file"]:hover::file-selector-button {
background-color: color-mix(in srgb, var(--color-white) 90%, black);
} .hs-form-html .hsfc-Renderer .hsfc-NavigationRow {
margin-top: 0;
}
.hs-form-html .hsfc-Renderer .hsfc-Button {
line-height: 1.5;
cursor: pointer;
transition: .3s;
}
.hs-form-html .hsfc-Renderer .hsfc-Button:not([disabled]):hover,
.hs-form-html .hsfc-Renderer .hsfc-Button:not([disabled]):active {
transform: none;
} @media (max-width: 767px) {
.form-card {
padding: 3rem 2rem;
}
.gform_wrapper .gfield--width-half {
grid-column: span 12;
}
.hs-form-html {
--hsf-row__vertical-spacing: 2rem;
} .hs-form-html .hsfc-Renderer .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel {
padding: .6rem 1.2rem;
font-size: 1.3rem;
} .gform_wrapper .form-pills .gchoice label {
padding: .6rem 1.2rem;
font-size: 1.3rem;
}
.gform_wrapper .form-pills .gfield_checkbox {
gap: .8rem;
}
}.single-story {
position: relative;
padding-left: var(--grid-padding);
padding-right: var(--grid-padding);
}
.single-header {
margin-bottom: 4rem;
} .single-label {
border-color: var(--color-lightblue);
background-color: var(--color-lightblue);
}
.single-header h1 {
margin-bottom: 0;
} .single-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem 4rem;
margin-top: 3rem;
}
.single-meta-item {
display: flex;
align-items: center;
gap: 1.4rem;
}
.single-meta p,
.single-meta-line {
margin: 0;
font-size: 1.5rem;
line-height: 1.5;
color: var(--color-grey);
}
.single-meta .single-meta-name {
font-weight: 500;
color: var(--color-black);
}
.single-meta .single-meta-name a {
color: inherit;
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: .3rem;
transition: text-decoration-color .3s;
}
.single-meta .single-meta-name a:hover {
text-decoration-color: currentColor;
}
.single-meta p span + span::before,
.single-meta-line span + span::before {
content: '·';
margin: 0 .8rem;
}
.single-author-image {
flex-shrink: 0;
width: 4rem;
height: 4rem;
border-radius: 50%;
background-color: var(--color-offwhite);
overflow: hidden;
}
.single-author-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.single-story .image-wrapper {
position: relative;
}
.single-story .image-wrapper img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 108 / 50;
object-fit: cover;
border-radius: var(--border-radius);
} .single-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
margin-top: 6rem;
}
.single-tags {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.single-tags .label {
margin-bottom: 0;
border-color: var(--color-offwhite);
background-color: var(--color-offwhite);
} .share-link {
display: inline-flex;
align-items: center;
gap: 1rem;
font-size: 1.5rem;
font-weight: 500;
line-height: 1.6;
text-decoration: none;
}
.share-icon {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
width: 3.05rem;
height: 3.05rem;
border-radius: 50%;
background-color: var(--color-offwhite);
font-size: 1.3rem;
transition: .3s;
}
.share-icon svg {
fill: currentColor;
}
.share-link:hover .share-icon {
background-color: var(--color-green);
color: var(--color-verydarkgreen);
}
.single-content {
margin-top: 4rem;
}
.single-content > :last-child {
margin-bottom: 0;
}
.single-content h2,
.single-content h3 {
margin-top: 4rem;
} .single-content blockquote {
margin: 4rem 0;
padding-left: 2.4rem;
border-left: 3px solid var(--color-green);
}
.single-content blockquote p {
font-size: 2rem;
line-height: 1.5;
color: var(--color-black);
}
.single-content blockquote > :last-child {
margin-bottom: 0;
} .single-insight .single-meta-item p:not(.single-meta-name) {
font-size: 1.5rem;
}
.single-insight + .single-more {
padding-top: 0;
} .single-case-hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 8rem;
}
.single-case-hero h1 {
margin-bottom: 2.4rem;
}
.single-meta-line a {
color: inherit;
text-decoration: none;
}
.single-case-hero .single-author-image {
background-color: var(--color-green);
}
.single-case-summary {
margin: 4rem 0 0;
color: var(--color-grey);
}
.single-case-facts {
display: flex;
flex-wrap: wrap;
row-gap: 1.6rem;
margin: 3rem 0 0;
}
.single-case-facts > div {
flex: 0 1 auto;
min-width: 0;
padding: 0 2rem;
border-left: 1px solid var(--color-line);
}
.single-case-facts > div:first-child {
padding-left: 0;
border-left: 0;
}
.single-case-facts dt {
font-size: 1.2rem;
font-weight: 500;
letter-spacing: .1rem;
text-transform: uppercase;
color: var(--color-grey);
}
.single-case-facts dt {
white-space: nowrap;
}
.single-case-facts dd {
margin: .2rem 0 0;
font-size: 1.5rem;
line-height: 1.5;
}
.single-case-hero .image-wrapper img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 5 / 4;
object-fit: cover;
border-radius: var(--border-radius);
}
.single-case-content .container {
display: grid;
grid-template-columns: 30rem 1fr;
align-items: start;
gap: 8rem;
}
.single-case-aside {
position: sticky;
top: 10rem;
}
.form-card.is-compact {
padding: 2.4rem;
}
.form-card.is-compact .content-wrapper {
margin-bottom: 2rem;
}
.form-card.is-compact .content-wrapper.is-bottom {
margin: 2rem 0 0;
}
.single-case-main {
grid-column: 2;
max-width: 70rem;
}
.single-case-content .single-content {
margin-top: 0;
} .single-case-content .single-content > p:not(.large) {
color: var(--color-grey);
}
.single-case-story {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 3rem;
margin-top: 4rem;
padding: 2rem 2rem 2rem 3rem;
border-radius: var(--border-radius);
background-color: var(--color-lightblue);
}
.single-case-story p {
margin: 0;
}
.single-case-story-name {
font-size: 1.8rem;
font-weight: 500;
color: var(--color-black);
}
.single-case-story-role {
margin-top: .2rem !important;
font-size: 1.2rem;
font-weight: 500;
letter-spacing: .05rem;
text-transform: uppercase;
color: var(--color-grey);
}
.single-case-story-quote {
margin-top: 2.4rem !important;
font-size: 1.5rem;
}
.single-case-story .btn-group {
margin-top: 2.4rem;
}
.single-case-story .image-wrapper img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--border-radius);
} .single-team-header {
display: flex;
gap: 4rem;
margin-bottom: 4rem;
}
.single-team-image {
flex-shrink: 0;
width: 16rem;
height: 16rem;
border-radius: 50%;
background-color: var(--color-offwhite);
overflow: hidden;
}
.single-team-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.single-team-header h1 {
margin-bottom: .5rem;
}
.single-team-role {
margin: 0;
color: var(--color-grey);
}
.single-team-contact {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin: 2rem 0 0;
padding: 0;
list-style: none;
}
.single-team-contact a {
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
border: 1px solid var(--color-offwhite);
border-radius: 50%;
background-color: var(--color-offwhite);
color: var(--color-verydarkgreen);
text-decoration: none;
transition: .3s;
}
.single-team-contact a:hover {
border-color: var(--color-green);
background-color: var(--color-green);
}
.single-team .single-content {
margin-top: 0;
}
.single-team .single-content blockquote:first-child {
margin-top: 0;
} .content-cta.is-plain .cta-wrapper {
min-height: 0;
padding: 0 var(--grid-padding);
}
.content-cta.is-plain .glass-tiles {
display: none;
} @media (max-width: 1024px) {
.single-case-hero .container,
.single-case-content .container {
grid-template-columns: 1fr;
gap: 4rem;
}
.single-case-main {
grid-column: auto;
max-width: none;
}
.single-case-summary {
margin-top: 3rem;
}
.single-case-aside {
position: static;
order: 2;
}
}
@media (max-width: 767px) { .single-footer {
flex-direction: column;
align-items: flex-start;
margin-top: 4rem;
}
.single-team-header {
flex-direction: column;
align-items: flex-start;
gap: 2.4rem;
}
.single-team-image {
width: 10rem;
height: 10rem;
}
.single-case-story {
grid-template-columns: 1fr;
padding: 2rem;
} .single-case-facts {
flex-direction: column;
}
.single-case-facts > div {
padding: 0;
border-left: 0;
}
.single-author-image {
display: none;
}
.single-meta {
flex-direction: column;
align-items: flex-start;
}
.single-header {
margin-bottom: 3rem;
}
.single-content {
margin-top: 3rem;
}
.single-content blockquote p {
font-size: 1.8rem;
}
}.modal {
position: fixed;
inset: 0;
z-index: 1000;
display: none;
align-items: center;
justify-content: center;
padding: var(--grid-padding);
}
.modal.is-open {
display: flex;
}
.modal-backdrop {
position: absolute;
inset: 0;
background-color: rgba(6, 32, 38, .8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.modal-dialog {
position: relative;
width: 100%;
max-width: 108rem;
}
.modal-close {
position: absolute;
right: 0;
bottom: 100%;
display: flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin-bottom: 1rem;
padding: 0;
border: 0;
background: none;
font-size: 2.4rem;
color: var(--color-white);
cursor: pointer;
transition: .3s;
}
.modal-close:hover {
color: var(--color-green);
} .modal-video .modal-body {
aspect-ratio: 16 / 9;
border-radius: var(--border-radius);
background-color: var(--color-black);
overflow: hidden;
}
.modal-video iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}.glass-tiles {
--tile-w: 10rem;
--tile-h: 9.4rem;
--tint: 155, 165, 170;
--tint-alpha: .55;
--max-blur: 7px;
--line-alpha: .12;
--over-fade: .4;
--over-blur-fade: .88;
--ease: .22s ease-out;
--out: 0;
position: absolute;
display: grid;
grid-template-columns: repeat(var(--cols), var(--tile-w));
grid-auto-rows: var(--tile-h);
pointer-events: none;
} .glass-tiles .tile {
--rnd: 1;
--clarity: 0;
--over: 0;
--over-blur: 0;
--haze: calc(var(--rnd) * (1 - var(--clarity)));
display: block;
background-color: rgba(var(--tint), calc(var(--tint-alpha) * var(--haze) * (1 - var(--over-fade) * var(--over))));
box-shadow: inset -1px -1px 0 rgba(255, 255, 255, calc(var(--line-alpha) * (1 - var(--clarity))));
backdrop-filter: blur(calc(var(--max-blur) * var(--haze) * (1 - var(--over-blur-fade) * var(--over-blur))));
-webkit-backdrop-filter: blur(calc(var(--max-blur) * var(--haze) * (1 - var(--over-blur-fade) * var(--over-blur))));
pointer-events: none;
} .glass-tiles.is-ready .tile {
transition: background-color var(--ease), box-shadow var(--ease), backdrop-filter var(--ease), -webkit-backdrop-filter var(--ease);
}
.glass-tiles .tile-star {
position: absolute;
width: 1.3rem;
height: 1.3rem;
transform: translate(-50%, -50%);
opacity: .9;
filter: drop-shadow(0 0 1px rgba(0, 0, 0, .25));
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 5.4 6 10.8 11.4 11.4l.6.6-.6.6C18 13.2 12.6 18.6 12 24c-.6-5.4-6-10.8-11.4-11.4L0 12l.6-.6C6 10.8 11.4 5.4 12 0z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
pointer-events: none;
}